/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-base.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Legacy web CSS before the workbench/category-market split. Do not add new module styles here. */

:root,
[data-theme='dark'] {
  color-scheme: dark;
  --bg: #070b18;
  --bg-deep: #050714;
  --bg-sidebar: #0a0e1f;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --surface-dark: rgba(255, 255, 255, 0.04);
  --surface-dark-hover: rgba(255, 255, 255, 0.06);
  --surface-panel: rgba(255, 255, 255, 0.045);
  --surface-panel-hover: rgba(255, 255, 255, 0.065);
  --surface-panel-strong: rgba(255, 255, 255, 0.08);
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #64748b;
  --text-1: #f1f5f9;
  --text-2: #94a3b8;
  --text-3: #64748b;
  --line: #dbe3ee;
  --line-dark: rgba(255, 255, 255, 0.08);
  --line-dark-strong: rgba(255, 255, 255, 0.12);
  --primary: #7c3aed;
  --primary-light: #8b5cf6;
  --primary-soft: rgba(124, 58, 237, 0.34);
  --primary-glow: rgba(124, 58, 237, 0.38);
  --primary-glow-strong: rgba(124, 58, 237, 0.42);
  --primary-border: rgba(124, 58, 237, 0.52);
  --primary-border-strong: rgba(124, 58, 237, 0.76);
  --primary-active-bg: rgba(124, 58, 237, 0.42);
  --focus-ring: rgba(124, 58, 237, 0.34);
  --accent: #06b6d4;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.08);
  --danger-line: rgba(239, 68, 68, 0.22);
  --danger-ink: #b91c1c;
  --grad: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
  --brand-grad: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
  --shadow-dark: 0 28px 80px rgba(0, 0, 0, 0.38);
  --shadow-light: 0 20px 60px rgba(15, 23, 42, 0.12);
  --auth-page-bg: #eef2f7;
  --auth-promo-bg:
    radial-gradient(circle at top left, rgba(109, 124, 255, 0.24), transparent 26%),
    linear-gradient(180deg, #0b1220 0%, #101a31 100%);
  --auth-promo-surface: #121b31;
  --auth-form-bg: #ffffff;
  --auth-panel-bg: rgba(24, 32, 54, 0.78);
  --auth-panel-border: rgba(255, 255, 255, 0.2);
  --auth-panel-shadow: 0 30px 92px rgba(0, 0, 0, 0.42);
  --auth-panel-ink: #f8fafc;
  --auth-panel-soft: #e2e8f0;
  --auth-panel-muted: #cbd5e1;
  --auth-panel-faint: #94a3b8;
  --auth-panel-control-bg: rgba(255, 255, 255, 0.08);
  --auth-panel-control-border: rgba(255, 255, 255, 0.13);
  --auth-panel-input-bg: rgba(15, 23, 42, 0.68);
  --auth-panel-input-border: rgba(255, 255, 255, 0.16);
  --auth-panel-input-ink: #f8fafc;
  --auth-panel-input-placeholder: #94a3b8;
  --auth-panel-ready-ink: #86efac;
  --auth-panel-pending-ink: #cbd5e1;
  --auth-panel-error-ink: #fca5a5;
  --app-shell-bg:
    radial-gradient(circle at 28% 0%, var(--primary-glow), transparent 26%),
    radial-gradient(circle at 82% 4%, rgba(6, 182, 212, 0.12), transparent 22%),
    linear-gradient(180deg, var(--bg-deep), var(--bg));
  --app-sidebar-bg: linear-gradient(180deg, rgba(10, 14, 31, 0.98), rgba(5, 7, 20, 0.98));
  --app-topbar-bg: rgba(7, 11, 24, 0.76);
  --sticky-toolbar-bg: #080d1c;
  --control-bg: rgba(5, 7, 20, 0.72);
  --overlay-bg: rgba(5, 7, 20, 0.82);
  --tag-bg: rgba(255, 255, 255, 0.055);
  --row-line: rgba(255, 255, 255, 0.055);
  --theme-switcher-bg: rgba(255, 255, 255, 0.05);
  --theme-switcher-active-bg: var(--primary-border);
  --app-scrollbar-size: 10px;
  --app-scrollbar-track: rgba(148, 163, 184, 0.06);
  --app-scrollbar-thumb: rgba(148, 163, 184, 0.38);
  --app-scrollbar-thumb-hover: rgba(148, 163, 184, 0.62);
  --app-scrollbar-thumb-active: rgba(124, 58, 237, 0.76);
  --landing-canvas-min-width: 1120px;
  --workspace-canvas-min-width: 1180px;
}

[data-theme='light'] {
  color-scheme: light;
  --bg: #f4f7fb;
  --bg-deep: #eaf0f8;
  --bg-sidebar: #edf3fb;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --surface-dark: rgba(15, 23, 42, 0.04);
  --surface-dark-hover: rgba(15, 23, 42, 0.06);
  --surface-panel: rgba(255, 255, 255, 0.82);
  --surface-panel-hover: rgba(255, 255, 255, 0.96);
  --surface-panel-strong: rgba(255, 255, 255, 0.9);
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #64748b;
  --text-1: #162033;
  --text-2: #475569;
  --text-3: #64748b;
  --line: #dbe3ee;
  --line-dark: rgba(15, 23, 42, 0.11);
  --line-dark-strong: rgba(15, 23, 42, 0.18);
  --primary: #6d28d9;
  --primary-light: #7c3aed;
  --primary-soft: rgba(124, 58, 237, 0.31);
  --primary-glow: rgba(124, 58, 237, 0.31);
  --primary-glow-strong: rgba(124, 58, 237, 0.36);
  --primary-border: rgba(124, 58, 237, 0.48);
  --primary-border-strong: rgba(124, 58, 237, 0.76);
  --primary-active-bg: rgba(124, 58, 237, 0.36);
  --focus-ring: rgba(124, 58, 237, 0.34);
  --accent: #0891b2;
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.08);
  --danger-line: rgba(220, 38, 38, 0.22);
  --danger-ink: #991b1b;
  --grad: linear-gradient(135deg, #7c3aed 0%, #0891b2 100%);
  --brand-grad: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
  --shadow-dark: 0 24px 64px rgba(15, 23, 42, 0.16);
  --shadow-light: 0 18px 50px rgba(15, 23, 42, 0.12);
  --auth-page-bg: #f4f7fb;
  --auth-promo-bg:
    radial-gradient(circle at top left, var(--primary-glow), transparent 27%),
    linear-gradient(180deg, #eaf0ff 0%, #f8fbff 100%);
  --auth-promo-surface: #ffffff;
  --auth-form-bg: #ffffff;
  --auth-panel-bg: rgba(255, 255, 255, 0.7);
  --auth-panel-border: rgba(255, 255, 255, 0.7);
  --auth-panel-shadow: 0 26px 80px rgba(15, 23, 42, 0.18);
  --auth-panel-ink: #0f172a;
  --auth-panel-soft: #334155;
  --auth-panel-muted: #64748b;
  --auth-panel-faint: #94a3b8;
  --auth-panel-control-bg: rgba(248, 250, 252, 0.72);
  --auth-panel-control-border: rgba(148, 163, 184, 0.28);
  --auth-panel-input-bg: rgba(255, 255, 255, 0.88);
  --auth-panel-input-border: rgba(148, 163, 184, 0.34);
  --auth-panel-input-ink: #0f172a;
  --auth-panel-input-placeholder: #94a3b8;
  --auth-panel-ready-ink: #047857;
  --auth-panel-pending-ink: #475569;
  --auth-panel-error-ink: #b91c1c;
  --app-shell-bg:
    radial-gradient(circle at 28% 0%, var(--primary-soft), transparent 28%),
    radial-gradient(circle at 82% 4%, rgba(8, 145, 178, 0.12), transparent 24%),
    linear-gradient(180deg, #eef4fb, #f8fafc);
  --app-sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.98));
  --app-topbar-bg: rgba(255, 255, 255, 0.78);
  --sticky-toolbar-bg: #ffffff;
  --control-bg: rgba(255, 255, 255, 0.9);
  --overlay-bg: rgba(255, 255, 255, 0.84);
  --tag-bg: rgba(15, 23, 42, 0.045);
  --row-line: rgba(15, 23, 42, 0.08);
  --theme-switcher-bg: rgba(15, 23, 42, 0.05);
  --theme-switcher-active-bg: var(--primary-active-bg);
  --app-scrollbar-size: 10px;
  --app-scrollbar-track: rgba(15, 23, 42, 0.05);
  --app-scrollbar-thumb: rgba(100, 116, 139, 0.42);
  --app-scrollbar-thumb-hover: rgba(100, 116, 139, 0.64);
  --app-scrollbar-thumb-active: rgba(124, 58, 237, 0.72);
  --landing-canvas-min-width: 1120px;
  --workspace-canvas-min-width: 1180px;
}

* {
  box-sizing: border-box;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: var(--app-scrollbar-size);
  height: var(--app-scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--app-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 3px solid transparent;
  border-radius: 999px;
  background-color: var(--app-scrollbar-thumb);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--app-scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--app-scrollbar-thumb-active);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.compassIcon {
  display: block;
  flex: 0 0 auto;
}

.compassTooltipContent {
  z-index: 80;
  max-width: min(280px, calc(100vw - 24px));
  border: 1px solid var(--line-dark-strong);
  border-radius: 8px;
  background: var(--overlay-bg);
  box-shadow: var(--shadow-dark);
  color: var(--text-1);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.compassTooltipContent[data-state='delayed-open'],
.compassTooltipContent[data-state='instant-open'] {
  animation: compassTooltipIn 120ms ease-out;
}

.compassTooltipArrow {
  fill: var(--overlay-bg);
}

@keyframes compassTooltipIn {
  from {
    opacity: 0;
    transform: translateY(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.landingPage {
  min-height: 100vh;
  min-width: var(--landing-canvas-min-width);
  overflow-x: auto;
  background:
    radial-gradient(circle at 50% -10%, var(--primary-glow), transparent 34%),
    radial-gradient(circle at 86% 20%, rgba(6, 182, 212, 0.12), transparent 28%),
    linear-gradient(180deg, var(--bg-deep), var(--bg));
  color: var(--text-1);
}

.landingNav {
  position: sticky;
  top: 0;
  z-index: 20;
  min-width: var(--landing-canvas-min-width);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line-dark);
  background: var(--overlay-bg);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  padding: 0 48px;
}

.landingLogo,
.landingNavLinks,
.landingNavActions,
.landingHeroActions,
.landingStats,
.landingFooterCta {
  display: flex;
  align-items: center;
}

.landingLogo {
  gap: 10px;
  color: var(--text-1);
  text-decoration: none;
}

.landingLogoMark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--brand-grad);
  color: #ffffff;
  font-weight: 900;
}

.landingLogo strong,
.landingLogo em {
  display: block;
}

.landingLogo strong {
  font-size: 18px;
}

.landingLogo em {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.brandLogo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}

.brandLogo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brandLogo-full {
  width: 168px;
  height: 42px;
}

.brandLogo-mark {
  width: 36px;
  height: 36px;
  border-radius: 999px;
}

.appLoadingState .brandLogo-mark {
  width: 54px;
  height: 54px;
  border-radius: 999px;
}

.appLoadingState .brandLogo-mark img {
  width: 100%;
  height: 100%;
}

.landingBrandLogo {
  position: relative;
  isolation: isolate;
  width: 182px;
  height: 46px;
  background: var(--grad);
}

.landingBrandLogo::after,
.landingPreviewPosterFrame::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--grad);
  content: '';
  mix-blend-mode: hue;
  pointer-events: none;
}

.landingNavLinks {
  gap: 30px;
}

.landingNavLinks a,
.landingGhostButton,
.landingPrimaryButton {
  flex: 0 0 auto;
  text-decoration: none;
  white-space: nowrap;
}

.landingNavLinks a {
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
}

.landingNavLinks a:hover {
  color: var(--text-1);
}

.landingNavActions,
.landingHeroActions {
  gap: 12px;
}

.landingGhostButton,
.landingPrimaryButton {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 850;
}

.landingGhostButton {
  border: 1px solid var(--line-dark-strong);
  background: transparent;
  color: var(--text-2);
}

.landingGhostButton:hover {
  border-color: var(--primary-border-strong);
  color: var(--text-1);
}

.landingPrimaryButton {
  border: 1px solid transparent;
  background: var(--grad);
  color: #ffffff;
}

.landingPrimaryButton.large,
.landingGhostButton.large {
  min-height: 48px;
  padding: 0 24px;
  font-size: 15px;
}

.landingHero {
  width: min(1180px, calc(100% - 48px));
  min-width: calc(var(--landing-canvas-min-width) - 48px);
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.76fr);
  align-items: center;
  gap: 52px;
  margin: 0 auto;
  padding: 72px 0 42px;
}

.landingHeroCopy {
  min-width: 0;
}

.landingBadge {
  width: fit-content;
  margin: 0 0 22px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--primary-soft);
  color: #c4b5fd;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 850;
}

.landingHero h1 {
  max-width: 760px;
  margin: 0;
  color: var(--text-1);
  font-size: clamp(56px, 5vw, 76px);
  line-height: 1.08;
}

.landingHero h1 span {
  display: block;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.landingHero p {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1.75;
}

.landingHeroActions {
  flex-wrap: nowrap;
  margin-top: 34px;
}

.landingStats {
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 50px;
}

.landingStats span {
  display: grid;
  gap: 4px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 800;
}

.landingStats strong {
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 30px;
  line-height: 1;
}

.landingPreview {
  min-width: 0;
  display: grid;
  gap: 16px;
  justify-items: center;
}

.landingPreviewPosterFrame {
  position: relative;
  isolation: isolate;
  width: min(460px, 100%);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 28px;
  background: var(--grad);
  box-shadow: var(--shadow-dark);
}

.landingPreviewPoster {
  display: block;
  width: 100%;
  height: auto;
}

.landingPreviewCaption {
  width: min(460px, 100%);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.landingPreviewCaption strong,
.landingPreviewCaption span {
  display: block;
}

.landingPreviewCaption strong {
  color: var(--text-1);
}

.landingPreviewCaption span {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.6;
}

.landingModuleBand {
  width: min(1180px, calc(100% - 48px));
  min-width: calc(var(--landing-canvas-min-width) - 48px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 auto;
  padding: 42px 0 72px;
}

.landingModuleBand article {
  min-height: 156px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 18px;
}

.landingModuleBand span,
.landingModuleBand strong,
.landingModuleBand p {
  display: block;
}

.landingModuleBand span {
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 900;
}

.landingModuleBand strong {
  margin-top: 16px;
  color: var(--text-1);
  font-size: 18px;
}

.landingModuleBand p {
  margin: 10px 0 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.65;
}

.landingFooterCta {
  width: min(1180px, calc(100% - 48px));
  min-width: calc(var(--landing-canvas-min-width) - 48px);
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto 48px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--focus-ring), rgba(6, 182, 212, 0.07));
  padding: 24px;
}

.landingFooterCta .landingBadge {
  margin-bottom: 12px;
}

.landingFooterCta h2 {
  margin: 0;
  color: var(--text-1);
}

.landingFooterCta p {
  max-width: 640px;
  margin: 10px 0 0;
  color: var(--text-2);
  line-height: 1.7;
}

.authPage {
  min-height: 100vh;
  background: var(--auth-page-bg);
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.88), rgba(248, 250, 252, 0.94)),
    var(--auth-login-bg), var(--auth-page-bg);
  background-position: center;
  background-size: cover;
  color: var(--ink);
}

.authPageCentered {
  display: grid;
  place-items: center;
  padding: 24px;
}

.authLayout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}

.authPromoPane {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 32px;
  padding: 40px 48px;
  overflow: hidden;
  border-right: 0;
  background: var(--auth-promo-bg);
  border-right: 1px solid var(--line-dark);
  background:
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--primary) 18%, transparent),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--auth-promo-bg) 76%, transparent),
      color-mix(in srgb, var(--auth-promo-bg) 90%, transparent)
    ),
    var(--auth-login-bg), var(--auth-promo-bg);
  background-position: center;
  background-size: cover;
}

.authPromoTop,
.authBrandRow,
.authCapabilityStrip {
  display: flex;
  align-items: center;
}

.authPromoTop {
  justify-content: flex-start;
  gap: 12px;
}

.themeSwitcher {
  min-height: 34px;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(64px, auto);
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--theme-switcher-bg);
  padding: 3px;
}

.languageSwitcher {
  min-height: 34px;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(72px, auto);
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--theme-switcher-bg);
  padding: 3px;
}

.languageSwitcher::before {
  content: 'Language';
  padding: 0 7px 0 8px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.themeSwitcher.compact {
  grid-auto-columns: 34px;
}

.languageSwitcher.compact {
  grid-auto-columns: 42px;
}

.themeSwitcherOption {
  min-width: 0;
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 850;
}

.languageSwitcherOption {
  min-width: 0;
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 850;
}

.themeSwitcher.compact .themeSwitcherOption {
  width: 34px;
  padding: 0;
}

.languageSwitcher.compact .languageSwitcherOption {
  width: 42px;
  padding: 0;
}

.themeSwitcherOption:hover,
.themeSwitcherOption.active,
.languageSwitcherOption:hover,
.languageSwitcherOption.active {
  border-color: var(--primary-border);
  background: var(--theme-switcher-active-bg);
  color: var(--text-1);
}

.themeSwitcherSkeleton {
  width: 110px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(90deg, transparent, var(--surface-panel-hover), transparent);
}

.themeSwitcher.compact .themeSwitcherSkeleton {
  width: 106px;
}

.themeAccentPicker {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--theme-switcher-bg);
  padding: 3px;
}

.themeAccentPicker.compact {
  gap: 3px;
}

.themeAccentOption {
  width: 32px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  padding: 0;
}

.themeAccentCustom {
  position: relative;
  cursor: pointer;
}

.themeAccentCustom input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.themeAccentOption span {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.themeAccentOption em {
  color: var(--text-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.themeAccentOption:hover,
.themeAccentOption.active {
  border-color: var(--primary-border);
  background: var(--theme-switcher-active-bg);
}

.themeAccentSkeleton {
  width: 166px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(90deg, transparent, var(--surface-panel-hover), transparent);
}

.themeAccentPicker.compact .themeAccentSkeleton {
  width: 166px;
}

.workspacePreferences {
  position: relative;
  z-index: 1001;
  flex: 0 0 auto;
}

.workspacePreferencesTrigger {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
}

.workspacePreferencesTrigger:hover,
.workspacePreferencesTrigger[aria-expanded='true'] {
  border-color: var(--primary-border);
  background: var(--theme-switcher-active-bg);
}

.workspacePreferencesTrigger svg {
  flex: 0 0 auto;
  color: var(--text-2);
  transition: transform 160ms ease;
}

.workspacePreferencesTrigger svg.is-open {
  transform: rotate(180deg);
}

.workspacePreferencesTriggerText {
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspacePreferencesTriggerSwatch {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.44),
    0 0 0 1px var(--line-dark);
}

.workspacePreferencesPanel {
  position: fixed;
  z-index: 1002;
  width: min(290px, calc(100vw - 24px));
  max-height: min(620px, calc(100dvh - 80px));
  overflow-y: auto;
  display: grid;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--line-dark) 58%, transparent);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  padding: 8px;
}

.workspacePreferencesHeader {
  display: grid;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-dark);
}

.workspacePreferencesHeader strong {
  color: var(--text-1);
  font-size: 13px;
}

.workspacePreferencesHeader span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 750;
}

.workspacePreferencesSection {
  display: grid;
  gap: 8px;
  padding: 14px 10px 10px;
  border-top: 1px solid color-mix(in srgb, var(--line-dark) 58%, transparent);
}

.workspacePreferencesLanguage {
  border-top: 0;
  padding: 0;
}

.workspacePreferencesSectionTitle {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.workspacePreferencesOptionList,
.workspacePreferencesAccentGrid {
  display: grid;
  gap: 3px;
}

.workspacePreferencesOptionList.twoColumn {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspacePreferencesOption {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 650;
}

.workspacePreferencesOption:hover,
.workspacePreferencesOption.active {
  border-color: transparent;
  background: var(--theme-switcher-active-bg);
  color: var(--text-1);
}

.workspacePreferencesLocaleOption {
  min-height: 44px;
  justify-content: flex-start;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 450;
}

.workspacePreferencesOption svg,
.workspacePreferencesAccentOption svg {
  flex: 0 0 auto;
  color: var(--primary-light);
}

.workspacePreferencesAccentGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspacePreferencesAccentOption {
  position: relative;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.workspacePreferencesAccentOption:hover,
.workspacePreferencesAccentOption.active {
  border-color: var(--primary-border);
  background: var(--theme-switcher-active-bg);
  color: var(--text-1);
}

.workspacePreferencesAccentOption span {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.44),
    0 0 0 1px var(--line-dark);
}

.workspacePreferencesAccentOption em {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.workspacePreferencesAccentOption input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.authBrandRow {
  margin-left: auto;
  gap: 14px;
  color: var(--text-1);
}

.authBrandLogo {
  width: 172px;
  height: 43px;
}

.authCheckLogo {
  width: 190px;
  height: 48px;
  margin: 0 auto 12px;
}

.authBrandRow strong {
  display: block;
  font-size: 17px;
}

.authBrandRow span {
  display: block;
  margin-top: 3px;
  color: var(--text-2);
  font-size: 12px;
}

.authBackLink {
  display: inline-flex;
  width: fit-content;
  color: var(--text-2);
  font-size: 14px;
  text-decoration: none;
}

.authBackLink:hover {
  color: var(--text-1);
}

.authBrandMark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--brand-grad);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 12px 26px var(--primary-border);
}

.authPromoStage {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
}

.authEyebrow {
  margin: 0;
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workbenchTitle {
  margin: 0;
  font-weight: 780;
  letter-spacing: 0;
}

.authPromoPoster {
  display: block;
  width: min(680px, 100%);
  height: auto;
  border-radius: 28px;
  background: var(--auth-promo-surface);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
    var(--auth-login-bg), var(--auth-promo-surface);
  background-position: center;
  background-size: cover;
  box-shadow: var(--shadow-dark);
}

.authPromoCaption {
  width: min(680px, 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}

.authPromoCaption strong {
  display: block;
  color: var(--text-1);
}

.authPromoCaption span {
  display: block;
  margin-top: 3px;
}

.authPromoCaptionTag {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--line-dark-strong);
  border-radius: 999px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  padding: 0 12px;
  white-space: nowrap;
}

.authCapabilityStrip span {
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 800;
}

.authFormPane {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 88px clamp(32px, 8vw, 112px) 48px 32px;
  background: transparent;
  color: var(--auth-panel-ink);
  pointer-events: none;
}

.authFormShell {
  width: min(420px, 100%);
  max-height: calc(100vh - 96px);
  overflow: auto;
  margin: 0;
  border: 1px solid var(--auth-panel-border);
  border-radius: 8px;
  background: var(--auth-panel-bg);
  box-shadow:
    var(--auth-panel-shadow),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;
  padding: 26px;
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  pointer-events: auto;
}

.formHeader {
  margin-bottom: 16px;
}

.formHeader .authEyebrow {
  color: var(--primary-light);
}

.formHeader h1,
.workspacePanel h2,
.authCheckCard h1 {
  margin: 10px 0 8px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.15;
}

.authFormShell .formHeader h1 {
  color: var(--auth-panel-ink);
}

.formHeader p,
.workspacePanel p,
.authCheckCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
}

.authFormShell .formHeader p {
  color: var(--auth-panel-muted);
}

.muted {
  color: var(--muted);
  line-height: 1.65;
}

.authServiceStatus {
  margin-bottom: 14px;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
}

.authServiceStatus.is-ready {
  border: 1px solid rgba(16, 185, 129, 0.2);
  background: rgba(16, 185, 129, 0.08);
  color: var(--auth-panel-ready-ink);
}

.authServiceStatus.is-pending {
  border: 1px solid var(--auth-panel-control-border);
  background: var(--auth-panel-control-bg);
  color: var(--auth-panel-pending-ink);
}

.authServiceStatus.is-error {
  border: 1px solid var(--danger-line);
  background: var(--danger-bg);
  color: var(--auth-panel-error-ink);
}

.authTabs {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 16px;
  border: 1px solid var(--auth-panel-control-border);
  border-radius: 8px;
  background: rgba(241, 245, 249, 0.84);
  padding: 4px;
}

.authPageTab {
  min-width: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--auth-panel-muted);
  padding: 8px 14px;
  font-weight: 800;
  cursor: pointer;
}

.authPageTab.active {
  background: var(--grad);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.18);
}

.authField {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 14px;
}

.authField span {
  color: var(--auth-panel-soft);
  font-size: 13px;
  font-weight: 800;
}

.authField input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--auth-panel-input-border);
  border-radius: 8px;
  background: var(--auth-panel-input-bg);
  color: var(--auth-panel-input-ink);
  outline: none;
  padding: 0 14px;
}

.authField select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--auth-panel-input-border);
  border-radius: 8px;
  background: var(--auth-panel-input-bg);
  color: var(--auth-panel-input-ink);
  outline: none;
  padding: 0 14px;
}

.authField input::placeholder {
  color: var(--auth-panel-input-placeholder);
}

.authField input:focus,
.authField select:focus {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.authSubmitButton,
.secondaryButton {
  min-height: 46px;
  border-radius: 8px;
  font-weight: 800;
}

.authSubmitButton {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  border: 1px solid transparent;
  background: var(--grad);
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(79, 70, 229, 0.22);
}

.authSubmitButton:hover:not(:disabled) {
  filter: brightness(1.05);
}

.authSubmitButton:disabled,
.authOutlineButton:disabled,
.authOAuthButton:disabled {
  cursor: not-allowed;
  filter: saturate(0.8);
  opacity: 0.68;
}

.authDisclaimer {
  margin: 18px 0 0;
  color: var(--auth-panel-faint);
  font-size: 12px;
  line-height: 1.7;
}

.authHelper {
  margin: 12px 0 0;
  color: var(--auth-panel-muted);
  font-size: 13px;
  line-height: 1.7;
}

.authSwitchLink {
  border: 0;
  background: transparent;
  color: #4f46e5;
  padding: 0;
  font-size: inherit;
  font-weight: 850;
  cursor: pointer;
}

.authPrototypeShell {
  display: grid;
  gap: 0;
}

.authModePanel {
  display: grid;
  gap: 12px;
}

.authInputWithIcon {
  position: relative;
  min-width: 0;
}

.authInputWithIcon svg {
  position: absolute;
  left: 14px;
  top: 50%;
  color: #94a3b8;
  transform: translateY(-50%);
}

.authInputWithIcon input {
  padding-left: 42px;
}

.authPasswordInput input {
  padding-right: 44px;
}

.authPasswordInput input[type='password']::-ms-clear,
.authPasswordInput input[type='password']::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

.authPasswordInput input[type='password']::-webkit-credentials-auto-fill-button,
.authPasswordInput input[type='password']::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.authPasswordToggle {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  transform: translateY(-50%);
}

.authPasswordToggle:hover:not(:disabled),
.authPasswordToggle:focus-visible {
  background: rgba(37, 99, 235, 0.08);
  color: #4f46e5;
}

.authPasswordToggle:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.authPasswordInput .authPasswordToggle svg {
  position: static;
  color: currentColor;
  transform: none;
}

.authInlineActions,
.authCodeSendRow,
.authAgreement,
.authWarningNote {
  display: flex;
  align-items: center;
}

.authInlineActions {
  justify-content: space-between;
  gap: 12px;
  color: var(--auth-panel-muted);
  font-size: 12px;
  line-height: 1.55;
}

.authSecurityPanel,
.authCodePanel,
.authPasswordMeter,
.authSuccessPanel,
.authVerifiedIdentityCard,
.authPendingIdentityPanel,
.authWarningNote {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.74));
}

.authSecurityPanel {
  position: relative;
  overflow: hidden;
}

.authSecurityPanel::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #94a3b8;
}

.authSecurityPanel.required::before {
  background: #0891b2;
}

.authSecurityPanel.warning::before {
  background: #f59e0b;
}

.authSecurityPanel.off::before {
  background: #10b981;
}

.authSecurityPanel,
.authCodePanel,
.authPasswordMeter,
.authSuccessPanel,
.authVerifiedIdentityCard {
  padding: 12px;
}

.authVerifiedIdentityCard {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) max-content;
  gap: 9px;
  align-items: start;
}

.authPendingIdentityPanel {
  border-color: rgba(79, 70, 229, 0.22);
  background: rgba(79, 70, 229, 0.07);
  padding: 12px;
}

.authProviderVerifiedIdentity {
  align-items: center;
}

.authProviderVerifiedIdentity strong,
.authProviderVerifiedIdentity span,
.authProviderVerifiedIdentity p {
  min-width: 0;
}

.authPanelHeader {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.authPanelHeader strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.authPanelHeader p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.authPanelIcon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(6, 182, 212, 0.22);
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.08);
  color: #0e7490;
}

.authSecurityPanel.off .authPanelIcon {
  border-color: rgba(16, 185, 129, 0.24);
  background: rgba(16, 185, 129, 0.09);
  color: #047857;
}

.authSecurityPanel.warning .authPanelIcon {
  border-color: rgba(245, 158, 11, 0.26);
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
}

.authPanelIcon.amber {
  border-color: rgba(245, 158, 11, 0.26);
  background: rgba(245, 158, 11, 0.09);
  color: #b45309;
}

.authCaptchaPreview {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  border: 1px solid rgba(8, 145, 178, 0.18);
  border-radius: 8px;
  background: #ffffff;
  padding: 7px 10px;
}

.authCaptchaPreview span {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.authCaptchaPreview em {
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(8, 145, 178, 0.1);
  color: #0e7490;
  padding: 4px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.authSecurityPanel.off .authCaptchaPreview {
  border-color: rgba(16, 185, 129, 0.18);
}

.authSecurityPanel.off .authCaptchaPreview em {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}

.authSecurityPanel.warning .authCaptchaPreview {
  border-color: rgba(245, 158, 11, 0.22);
}

.authSecurityPanel.warning .authCaptchaPreview em {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}

.authDivider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

.authDivider::before,
.authDivider::after {
  content: '';
  height: 1px;
  background: var(--line);
}

.authOAuthGrid,
.authPhoneGrid,
.authContextStack {
  display: grid;
  gap: 10px;
}

.authOAuthGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.authOAuthButton,
.authOutlineButton {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 0 12px;
  font-weight: 850;
}

.authOAuthButton {
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
}

.authOAuthButton.google span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0f172a;
  font-weight: 900;
}

.authOAuthButton.github {
  background: #111827;
  color: #ffffff;
}

.authOAuthButton.github span {
  font-size: 11px;
  font-weight: 900;
}

.authSegmentedControl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 4px;
}

.authSegmentedControl button,
.authStepper button {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
}

.authSegmentedControl button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 7px;
}

.authSegmentedControl button.active,
.authStepper button.active {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.authPhoneGrid {
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: end;
}

.authPhoneGrid .authField {
  margin-bottom: 0;
}

.authStepper.authRegisterStepper {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.authRegisterContactField {
  margin-bottom: 0;
}

.authRegisterCodeField {
  margin-bottom: 0;
}

.authLoginCodeContactField,
.authLoginCodeField {
  margin-bottom: 0;
}

.authRegisterContactControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
  gap: 8px;
  align-items: stretch;
}

.authRegisterContactControls .authInputWithIcon,
.authPhoneJoinedInput {
  min-width: 0;
}

.authSendCodeButton {
  min-width: 112px;
  height: 46px;
  align-self: stretch;
  padding: 0 10px;
  white-space: nowrap;
}

.authPhoneJoinedInput {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: stretch;
}

.authPhoneJoinedInput select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-weight: 850;
}

.authPhoneJoinedInput .authInputWithIcon input {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.authCodeSendRow {
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.authOutlineButton {
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
}

.authCodePanel {
  display: grid;
  gap: 10px;
}

.authCodeBoxes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.authCodeBoxes span {
  aspect-ratio: 1;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.authCodePanel p,
.authLoginCodeStatus,
.authLoginVerificationHint,
.authRegisterVerificationHint,
.authResetVerificationHint,
.authMutedNote,
.authWarningNote span {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.authPasswordMeter {
  display: grid;
  gap: 10px;
}

.authMeterTrack {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.authMeterTrack span {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f59e0b, #10b981);
}

.authPasswordMeter ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.authPasswordMeter li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.authPasswordMeter li svg {
  color: #059669;
  flex: 0 0 auto;
}

.authAgreement {
  gap: 9px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

.authAgreement input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.authAgreementInlineLink {
  display: inline;
  border: 0;
  background: transparent;
  color: var(--auth-brand-color, var(--accent));
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-align: left;
}

.authAgreementInlineLink:hover {
  color: color-mix(in srgb, var(--auth-brand-color, var(--accent)) 72%, #0f172a);
  text-decoration: underline;
}

.authAgreementList {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 10px;
}

.authAgreementList p {
  margin: 0;
  color: var(--auth-panel-muted);
  font-size: 12px;
  line-height: 1.5;
}

.authAgreementItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--auth-panel-control-border);
  border-radius: 8px;
  background: var(--auth-panel-control-bg);
  padding: 10px;
}

.authAgreementItem div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.authAgreementItem strong {
  overflow: hidden;
  color: var(--auth-panel-ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.authAgreementItem span {
  color: var(--auth-panel-faint);
  font-size: 11px;
}

.authAgreementModalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.56);
  padding: 18px;
}

.authAgreementModal {
  display: grid;
  gap: 16px;
  width: min(720px, 100%);
  max-height: min(720px, 88vh);
  overflow: hidden;
  border: 1px solid var(--auth-panel-border);
  border-radius: 8px;
  background: var(--auth-form-bg);
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.32);
  padding: 18px;
}

.authAgreementBody {
  max-height: 48vh;
  overflow: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 14px;
  font: inherit;
  font-size: 13px;
  line-height: 1.72;
  white-space: pre-wrap;
}

.authAgreementHint,
.authAgreementError {
  margin: -6px 0 0;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.5;
}

.authAgreementHint {
  border: 1px solid rgba(14, 165, 233, 0.22);
  background: rgba(14, 165, 233, 0.08);
  color: #0369a1;
}

.authAgreementError {
  border: 1px solid rgba(239, 68, 68, 0.22);
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
}

.authSubmitButton.prototype {
  background: linear-gradient(135deg, #0f766e, #0891b2);
}

.authStepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 4px;
}

.authStepper button {
  min-height: 48px;
  display: grid;
  gap: 3px;
  justify-items: center;
  border-radius: 7px;
  padding: 6px 4px;
  font-size: 11px;
}

.authStepper button span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #e2e8f0;
  color: var(--ink-soft);
  font-size: 11px;
}

.authStepper button.active span {
  background: #0891b2;
  color: #ffffff;
}

.authResetPanel {
  display: grid;
  gap: 14px;
}

.authSuccessPanel {
  justify-items: center;
  text-align: center;
}

.authSuccessPanel svg {
  color: #059669;
}

.authSuccessPanel strong {
  color: var(--ink);
  font-size: 17px;
}

.authSuccessPanel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.authWarningNote {
  gap: 8px;
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(245, 158, 11, 0.08);
  padding: 10px 12px;
}

.authWarningNote svg {
  color: #b45309;
  flex: 0 0 auto;
}

.authContextStack {
  margin-top: 18px;
}

.authContextStack article {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

.authContextStack svg {
  color: #0891b2;
}

.authContextStack span,
.authContextStack strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.authContextStack span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.authContextStack strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 13px;
}

.authCheckCard {
  width: min(420px, 100%);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-dark);
  padding: 28px;
}

.authProgressTrack {
  height: 6px;
  overflow: hidden;
  margin-top: 22px;
  border-radius: 999px;
  background: var(--surface-panel-strong);
}

.authProgressTrack span {
  display: block;
  width: 48%;
  height: 100%;
  border-radius: inherit;
  background: var(--grad);
}

.workbenchShell {
  width: min(1120px, calc(100% - 40px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 32px 0 56px;
  color: var(--ink);
}

.workbenchHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.workbenchTitle {
  color: var(--ink);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.secondaryButton {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 0 14px;
}

.secondaryButton:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.workspacePanel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-light);
  padding: 28px;
}

.factsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.factItem {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 16px;
}

.factItem span,
.factItem strong {
  display: block;
}

.factItem span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.factItem strong {
  overflow-wrap: anywhere;
  margin-top: 8px;
  color: var(--ink);
  font-size: 1.05rem;
}

.contextPanel {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 18px;
}

.contextLabel {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contextPanel p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.contextPanel .warning {
  color: var(--danger-ink);
}

.contextFacts,
.permissionList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.permissionList {
  margin-top: 22px;
}

.contextFacts span,
.permissionList span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 7px 10px;
  font-size: 0.88rem;
  font-weight: 800;
}

.appShell {
  --app-control-line: #e4e8ef;
  --app-control-line-hover: color-mix(in srgb, var(--primary) 30%, var(--app-control-line));
  --app-control-focus: color-mix(in srgb, var(--primary) 12%, transparent);
  --app-control-bg: var(--control-bg);
  --app-control-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  background: var(--app-shell-bg);
  color: var(--text-1);
  overflow-x: hidden;
}

.appShell :is(.cuiInput, .cuiSelect, .cuiTextarea, .cuiDropdownSelectTrigger) {
  --cui-control-line: var(--app-control-line);
  --cui-control-line-strong: var(--app-control-line-hover);
  --cui-control-focus: var(--app-control-focus);
  --cui-control-bg: var(--app-control-bg);
}

.appShell
  :is(
    select,
    input[type='text'],
    input[type='search'],
    input[type='number'],
    input[type='date'],
    input[type='datetime-local'],
    input[type='email'],
    input[type='password'],
    textarea
  ):not(.authInputWithIcon input):not(.cuiInput):not(.cuiSelect):not(.cuiTextarea) {
  border: 1px solid var(--app-control-line);
  background: var(--app-control-bg);
  color: var(--text-1);
  box-shadow: var(--app-control-shadow);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.appShell select:not(.cuiSelect):not([multiple]) {
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 12px) 50%;
  background-repeat: no-repeat;
  background-size:
    5px 5px,
    5px 5px;
}

.appShell select[multiple]:not(.cuiSelect) {
  padding-right: 10px;
}

.appShell
  :is(
    select,
    input[type='text'],
    input[type='search'],
    input[type='number'],
    input[type='date'],
    input[type='datetime-local'],
    input[type='email'],
    input[type='password'],
    textarea
  ):not(.authInputWithIcon input):not(.cuiInput):not(.cuiSelect):not(.cuiTextarea):hover {
  border-color: var(--app-control-line-hover);
}

.appShell
  :is(
    select,
    input[type='text'],
    input[type='search'],
    input[type='number'],
    input[type='date'],
    input[type='datetime-local'],
    input[type='email'],
    input[type='password'],
    textarea
  ):not(.authInputWithIcon input):not(.cuiInput):not(.cuiSelect):not(.cuiTextarea):focus {
  border-color: var(--app-control-line-hover);
  outline: 0;
  box-shadow: 0 0 0 3px var(--app-control-focus);
}

.appShell input[type='checkbox']:not(.cuiCheckbox),
.appShell input[type='radio']:not(.cuiRadio) {
  width: 18px;
  height: 18px;
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--app-control-line);
  background: var(--app-control-bg);
  box-shadow: var(--app-control-shadow);
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.appShell input[type='checkbox']:not(.cuiCheckbox) {
  border-radius: 5px;
}

.appShell input[type='radio']:not(.cuiRadio) {
  border-radius: 999px;
}

.appShell input[type='checkbox']:not(.cuiCheckbox)::before,
.appShell input[type='radio']:not(.cuiRadio)::before {
  width: 9px;
  height: 9px;
  background: #ffffff;
  content: '';
  transform: scale(0);
  transition: transform 120ms ease;
}

.appShell input[type='checkbox']:not(.cuiCheckbox)::before {
  border-radius: 3px;
}

.appShell input[type='radio']:not(.cuiRadio)::before {
  border-radius: 999px;
}

.appShell input[type='checkbox']:not(.cuiCheckbox):hover,
.appShell input[type='radio']:not(.cuiRadio):hover {
  border-color: var(--app-control-line-hover);
}

.appShell input[type='checkbox']:not(.cuiCheckbox):focus-visible,
.appShell input[type='radio']:not(.cuiRadio):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--app-control-focus);
}

.appShell input[type='checkbox']:not(.cuiCheckbox):checked,
.appShell input[type='radio']:not(.cuiRadio):checked {
  border-color: var(--primary);
  background: var(--primary);
}

.appShell input[type='checkbox']:not(.cuiCheckbox):checked::before,
.appShell input[type='radio']:not(.cuiRadio):checked::before {
  transform: scale(1);
}

.appSidebar {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 14px;
  overflow: hidden;
  border-right: 1px solid var(--line-dark);
  background: var(--app-sidebar-bg);
  padding: 16px 14px;
}

.sidebarLogo,
.topbarLeft,
.topbarRight,
.userBadge,
.panelHeader,
.productNameCell,
.aiInsightBar,
.alertItem,
.usageTags {
  display: flex;
  align-items: center;
}

.sidebarLogo {
  gap: 12px;
  min-height: 46px;
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  text-align: left;
}

.sidebarLogo:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 8px;
}

.sidebarLogo strong,
.userBadge strong,
.workspaceSummary strong,
.heroContextCard strong,
.sidebarBottom strong {
  display: block;
  color: var(--text-1);
}

.sidebarLogo span,
.workspaceSwitcherLabel,
.workspaceSwitcher em,
.workspaceSwitcher small,
.sidebarBottom span,
.sidebarBottom em {
  display: block;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.brandMarkCompact,
.aiOrb {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--brand-grad);
  color: #ffffff;
  font-weight: 900;
}

.brandMarkCompact {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.sidebarLogo .brandMarkCompact {
  background: transparent;
  box-shadow: none;
}

.sidebarLogo .sidebarBrandMark {
  display: none;
}

.sidebarLogo .sidebarBrandLogo {
  width: 150px;
  height: 38px;
}

@media (max-width: 1080px) {
  .sidebarLogo .sidebarBrandLogo {
    display: none;
  }

  .sidebarLogo .sidebarBrandMark {
    display: inline-flex;
  }

  .appSidebar.is-rail-open .sidebarLogo .sidebarBrandLogo {
    display: inline-flex;
  }

  .appSidebar.is-rail-open .sidebarLogo .sidebarBrandMark {
    display: none;
  }
}

.workspaceSwitcher {
  width: 100%;
  position: relative;
  display: grid;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--line-dark) 68%, var(--primary-border) 32%);
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--surface-panel) 88%, var(--primary-soft) 12%),
    var(--surface-panel)
  );
  color: var(--text-1);
  padding: 12px 13px;
  text-align: left;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary) 72%, transparent);
}

.workspaceSwitcherTeamRow {
  min-width: 0;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.workspaceSwitcherDot {
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-soft) 82%, transparent);
}

.workspaceSwitcherTeam {
  min-width: 0;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspaceSwitcherSelect {
  width: 100%;
}

.workspaceSwitcherSelectTrigger {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line-dark-strong);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-1);
  outline: none;
  padding: 0 9px;
  font-size: 13px;
  font-weight: 850;
}

.workspaceSwitcherSelectTrigger:focus-visible,
.workspaceSwitcherSelect.is-open .workspaceSwitcherSelectTrigger {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.workspaceSwitcherSelectText {
  min-width: 0;
}

.workspaceSwitcherSelectValue,
.workspaceSwitcherSelectOptionLabel {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspaceSwitcherChevron {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-3);
  transition: transform 160ms ease;
}

.workspaceSwitcherSelect.is-open .workspaceSwitcherChevron {
  transform: rotate(180deg);
}

.workspaceSwitcherSelectMenu {
  width: max(100%, 220px);
  max-height: 260px;
  z-index: 1200;
  border-color: var(--line-dark);
  background: var(--surface-panel);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.workspaceSwitcherSelectOption {
  min-height: 40px;
  grid-template-columns: minmax(0, 1fr) 18px;
}

.workspaceSwitcherSelectOption.active {
  border-color: var(--primary-border);
  background: var(--primary-active-bg);
}

.workspaceSwitcherSelectOptionMeta {
  width: fit-content;
  max-width: 100%;
  margin-top: 3px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-3);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}

.workspaceSwitcherSelectCheck {
  width: 18px;
  display: inline-grid;
  place-items: center;
  color: var(--primary-light);
}

.workspaceSwitcher small {
  color: #34d399;
  line-height: 1.45;
}

.workspaceSwitcher .cuiStatusBadge {
  width: fit-content;
  max-width: 100%;
}

.workspaceSwitcherSkeleton.cuiSkeletonBlock {
  border-color: color-mix(in srgb, var(--primary-border) 72%, transparent);
  background: color-mix(in srgb, var(--surface-panel) 82%, transparent);
  padding: 8px;
}

.workspaceSwitcher.is-error small,
.workspaceSwitcher.is-error em {
  color: #fca5a5;
}

.workspaceSwitcher.is-loading strong,
.workspaceSwitcher.is-empty strong {
  color: var(--text-1);
  font-size: 14px;
}

.sidebarNav {
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0;
}

.navSection {
  display: grid;
  gap: 5px;
  margin-bottom: 18px;
}

.navSectionLabel {
  padding: 0 8px 4px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.navGroup {
  display: grid;
  gap: 4px;
}

.navSectionToggle {
  width: 100%;
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: inherit;
  padding: 4px 8px;
  text-align: left;
  cursor: pointer;
}

.navSectionToggle:hover {
  color: var(--text-2);
}

.navSectionToggle.is-active {
  border-color: var(--primary-border);
  border-radius: 6px;
  background: var(--primary-active-bg);
  background: color-mix(in srgb, var(--primary-glow-strong) 30%, transparent);
  color: var(--text-2);
}

.navSectionToggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

.navSectionChevron {
  flex: 0 0 auto;
  transition:
    transform 160ms ease,
    color 160ms ease;
}

.navSectionToggle.is-collapsed .navSectionChevron {
  transform: rotate(-90deg);
}

.navItem {
  min-height: 38px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  padding: 0 8px;
  text-decoration: none;
}

.navLabel {
  min-width: 0;
  overflow: hidden;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navItem:hover {
  border-color: var(--line-dark);
  background: var(--surface-panel);
  color: var(--text-1);
}

.navItem.active {
  border-color: var(--primary-border);
  background: linear-gradient(90deg, var(--primary-glow-strong), rgba(6, 182, 212, 0.08));
  color: var(--text-1);
}

.navItem.disabled {
  color: rgba(148, 163, 184, 0.56);
  pointer-events: none;
}

.navParent {
  grid-template-columns: 24px minmax(0, 1fr) auto;
  width: 100%;
  cursor: pointer;
}

.navParent.active {
  border-color: transparent;
  background: transparent;
  color: var(--text-1);
}

.navDisclosure {
  display: grid;
  place-items: center;
  color: var(--text-3);
  line-height: 1;
}

.navChildren {
  display: grid;
  gap: 4px;
  margin-left: 32px;
}

.navSubItem {
  min-height: 34px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-left: 10px;
}

.navSubItem.active {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.1);
}

.navIcon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--surface-panel-hover);
  font-size: 13px;
}

.navBadge,
.navStage,
.statusPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.navBadge {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  padding: 0 7px;
}

.navStage {
  grid-column: 2 / 4;
  justify-self: start;
  border: 1px solid var(--line-dark);
  color: var(--text-3);
  padding: 0 7px;
}

.sidebarBottom {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.appMain {
  min-width: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: visible;
}

.appTopbar {
  position: relative;
  z-index: 1000;
  min-width: 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line-dark);
  background: var(--app-topbar-bg);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  padding: 0 22px;
}

.topbarLeft,
.topbarRight {
  min-width: 0;
  gap: 12px;
}

.topbarLeft {
  flex: 1 1 auto;
}

.topbarRight {
  flex: 0 1 auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.runtimeDbStatusWrap {
  position: relative;
  flex: 0 1 360px;
  min-width: 220px;
  max-width: min(420px, 34vw);
}

.runtimeDbStatus {
  width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-1);
  cursor: pointer;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.runtimeDbStatus:hover {
  border-color: var(--line-dark-strong);
  background: var(--surface-panel-hover);
}

.runtimeDbStatus:focus-visible,
.runtimeDbControlMenu button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.runtimeDbStatusDot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--text-3);
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12);
}

.runtimeDbStatusLabel {
  flex: 0 0 auto;
}

.runtimeDbStatusTarget {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-family: var(--font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
}

.runtimeDbStatus-green {
  border-color: rgba(34, 197, 94, 0.45);
  background: color-mix(in srgb, #22c55e 12%, var(--surface-panel));
}

.runtimeDbStatus-green .runtimeDbStatusDot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.runtimeDbStatus-amber,
.runtimeDbStatusLoading {
  border-color: rgba(245, 158, 11, 0.48);
  background: color-mix(in srgb, #f59e0b 12%, var(--surface-panel));
}

.runtimeDbStatus-amber .runtimeDbStatusDot,
.runtimeDbStatusLoading .runtimeDbStatusDot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.runtimeDbStatus-red {
  border-color: rgba(239, 68, 68, 0.5);
  background: color-mix(in srgb, #ef4444 12%, var(--surface-panel));
}

.runtimeDbStatus-red .runtimeDbStatusDot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.runtimeDbControlMenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 1200;
  width: min(320px, 88vw);
  display: grid;
  gap: 6px;
  border: 1px solid var(--line-dark-strong);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  box-shadow: var(--shadow-dark);
  padding: 8px;
  transform: translateX(-50%);
}

.runtimeDbControlMenu button {
  min-height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.runtimeDbControlMenu button:hover:not(:disabled) {
  border-color: var(--line-dark-strong);
}

.runtimeDbControlMenu button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.runtimeDbControlMessage {
  overflow-wrap: anywhere;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  padding: 2px 4px 0;
}

.globalRuntimeDbStatus {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1600;
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}

.globalRuntimeDbStatus .runtimeDbStatusWrap {
  width: 100%;
  min-width: 0;
  max-width: none;
  pointer-events: auto;
}

.globalRuntimeDbStatus .runtimeDbControlMenu {
  top: auto;
  right: 0;
  bottom: calc(100% + 8px);
  left: auto;
  transform: none;
}

.regionSelector {
  min-width: 0;
  min-height: 40px;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  padding: 6px 10px;
}

.regionSelectorLabel,
.regionSelectorControl,
.regionSelectorHint {
  min-width: 0;
}

.regionSelectorLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.regionSelectorLabel svg {
  flex: 0 0 auto;
  color: var(--text-2);
}

.regionSelectorControl {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--text-1);
}

.regionSelectorControl select {
  width: 100%;
  min-width: 0;
  max-width: 190px;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0 18px 0 0;
}

.regionSelectorControl svg {
  position: absolute;
  right: 0;
  flex: 0 0 auto;
  color: var(--text-3);
  pointer-events: none;
}

.regionSelectorHint {
  grid-column: 2;
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.regionSelector.compact {
  min-height: 34px;
  display: inline-flex;
  gap: 8px;
  padding: 0 10px;
}

.regionSelector.compact .regionSelectorHint {
  display: none;
}

.topbarRegionSelector {
  flex: 0 1 250px;
  max-width: 260px;
}

.topbarRegionSelector .regionSelectorControl {
  flex: 1 1 auto;
}

.topbarRegionSelector .regionSelectorControl select {
  max-width: 170px;
}

.authRegionSelector {
  border-color: var(--auth-panel-control-border);
  background: var(--auth-panel-control-bg);
  color: var(--auth-panel-ink);
}

.authRegionSelector .regionSelectorControl select {
  color: var(--auth-panel-ink);
}

.authRegionSelector .regionSelectorLabel,
.authRegionSelector .regionSelectorHint,
.authRegionSelector .regionSelectorControl svg {
  color: var(--auth-panel-muted);
}

.breadcrumb {
  flex: 0 0 auto;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
}

.searchBox {
  flex: 1 1 260px;
  width: min(420px, 34vw);
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-3);
  padding: 0 11px;
}

.searchBox input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-2);
}

.searchBox input::placeholder {
  color: var(--text-3);
}

.topbarChip,
.topbarIcon,
.topbarLogout {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  font-weight: 800;
  white-space: nowrap;
}

.topbarChip,
.topbarLogout {
  padding: 0 12px;
}

.topbarIcon {
  min-width: 34px;
  color: #fca5a5;
}

.notificationTopbarButton {
  cursor: pointer;
  position: relative;
  overflow: visible;
}

.notificationTopbarButton.has-unread {
  color: #fca5a5;
}

.notificationTopbarButton span {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--surface-app);
  border-radius: 999px;
  background: #fee2e2;
  color: #ef4444;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.topbarLogout:hover:not(:disabled) {
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}

.topbarChip.locked {
  border-color: rgba(245, 158, 11, 0.26);
  background: rgba(245, 158, 11, 0.08);
  color: #fbbf24;
}

.userBadge {
  flex: 0 0 auto;
  gap: 9px;
  min-width: 148px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 6px 9px;
}

.userBadge > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--primary-glow-strong);
  color: var(--text-1);
  font-weight: 900;
}

.userBadge div {
  min-width: 0;
}

.userBadge strong,
.userBadge em {
  display: block;
  overflow: hidden;
  max-width: 150px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.userBadge strong {
  font-size: 12px;
}

.userBadge em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
}

.userBadgeChevron {
  margin-left: auto;
  color: var(--text-3);
  transition: transform 0.16s ease;
}

.userBadgeChevron.is-open {
  transform: rotate(180deg);
}

.userMenuPanel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 45;
  width: 218px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-lg);
  padding: 6px;
}

.userMenuItem {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 7px;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 800;
  padding: 9px 10px;
  text-decoration: none;
}

.userMenuItem:hover,
.userMenuItem:focus-visible {
  background: var(--surface-panel-hover);
  color: var(--primary);
}

.userMenuItem:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.appContent {
  min-width: 0;
  display: grid;
  gap: 16px;
  overflow-x: auto;
  padding: 18px 22px 32px;
  scrollbar-gutter: stable;
}

.appContent > * {
  min-width: var(--workspace-canvas-min-width);
}

.cuiAgencyThemeScope[data-compass-theme-surface] .appShell {
  --app-control-bg: var(--cui-input-bg);
  --app-control-line: var(--cui-line);
  --app-control-line-hover: color-mix(in srgb, var(--cui-primary) 34%, var(--cui-line));
  --app-control-focus: var(--cui-focus);
  --app-control-shadow: var(--cui-shadow-md);
  background: var(--cui-bg);
  color: var(--cui-text);
}

.cuiAgencyThemeScope[data-compass-theme-surface] .appShell .appSidebar {
  background: var(--cui-nav-bg);
  color: var(--cui-nav-text);
}

.cuiAgencyThemeScope[data-compass-theme-surface] .appShell .navItem {
  color: var(--cui-nav-text);
}

.cuiAgencyThemeScope[data-compass-theme-surface] .appShell .navItem.active {
  background: var(--cui-nav-active-bg);
}

.cuiAgencyThemeScope[data-compass-theme-surface]
  .appShell
  :is(
    select,
    input[type='text'],
    input[type='search'],
    input[type='number'],
    input[type='date'],
    input[type='datetime-local'],
    input[type='email'],
    input[type='password'],
    textarea
  ):not(.cuiInput):not(.cuiSelect):not(.cuiTextarea) {
  border-radius: var(--cui-radius-md);
}

.cuiAgencyThemeScope[data-compass-theme-surface]
  .appShell
  :is(.panel, .panelHeader, .statCard, .summaryCard, .metricCard) {
  border-color: var(--cui-line);
  border-radius: var(--cui-card-radius);
  background-color: var(--cui-surface);
  box-shadow: var(--cui-shadow-md);
}

.cuiAgencyThemeScope[data-cui-density='compact'] .appShell {
  grid-template-columns: 216px minmax(0, 1fr);
}

.cuiAgencyThemeScope[data-cui-density='compact'] .appSidebar {
  gap: 8px;
  padding: 10px;
}

.cuiAgencyThemeScope[data-cui-density='compact'] .appTopbar {
  min-height: 52px;
  padding: 7px 14px;
}

.cuiAgencyThemeScope[data-cui-density='compact'] .appContent {
  gap: 10px;
  padding: 12px 16px 22px;
}

.cuiAgencyThemeScope[data-cui-density='compact'] .navItem {
  min-height: 34px;
  padding-block: 7px;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-workspace-prelude.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy workspace prelude CSS.
 *
 * Order-preserving app-content and horizontal-scroll compatibility rules.
 * Do not add new module styles here.
 */

/* Legacy workspace core split. This block was moved intact from app/styles.css to preserve cascade order. Do not add new module styles here. */

.appContent:has(.categoryMarketPage.isInsight) {
  overflow: hidden;
}

.appHorizontalScroller {
  position: fixed;
  right: auto;
  bottom: 0;
  z-index: 900;
  height: 16px;
  display: none;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--app-topbar-bg);
  border-top: 1px solid var(--line-dark);
  scrollbar-gutter: stable;
}

.appHorizontalScroller.is-visible {
  display: block;
}

.appHorizontalScroller > div {
  height: 1px;
}

.productsPage,
.creatorsPage,
.creatorDetailPage,
.competitorsPage,
.chatbiPage,
.crmPage,
.openapiPage,
.livesPage,
.notificationsPage,
.accountProfilePage,
.favoritesPage,
.accountSecurityPage,
.productDetailPage {
  min-width: var(--workspace-canvas-min-width);
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-workbench.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy workbench/home CSS.
 *
 * Moved from legacy-workspace-core.css as an order-preserving compatibility
 * chunk. Do not add new rules here; put new scoped rules in workbench.css.
 */

.homeWorkbenchPage {
  --home-workbench-topbar-height: 60px;
  --home-workbench-content-padding-y: 50px;
  width: 100%;
  min-width: 0;
  position: relative;
  display: grid;
  align-content: start;
}

.homeWorkbenchPage.is-agent-mode {
  height: calc(100dvh - var(--home-workbench-topbar-height) - var(--home-workbench-content-padding-y));
  max-height: calc(100dvh - var(--home-workbench-topbar-height) - var(--home-workbench-content-padding-y));
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.homeWorkbenchPage:not(.is-agent-mode) {
  gap: 16px;
}

.homeWorkbenchPanel,
.homeWorkbenchAgentColumn {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.homeWorkbenchDashboardHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
}

.homeWorkbenchDashboardHeader--agent {
  padding-bottom: 10px;
}

.homeWorkbenchDashboardTitle {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 950;
}

.homeWorkbenchDashboardTitle svg {
  color: var(--primary);
}

.homeWorkbenchHeaderActions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.homeWorkbenchSegmentedControl {
  flex: 0 0 auto;
  width: fit-content;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(96px, max-content));
  gap: 2px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 88%, var(--surface-canvas));
  padding: 3px;
}

.homeWorkbenchSegmentedControl button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 0 11px;
  white-space: nowrap;
}

.homeWorkbenchSegmentedControl button.active {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(20, 79, 255, 0.16);
}

.homeWorkbenchSegmentedControl button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.homeWorkbenchEditButton {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-1);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 0 12px;
  white-space: nowrap;
}

.homeWorkbenchEditButton:hover {
  border-color: var(--primary-border);
  color: var(--primary);
}

.homeWorkbenchEditButton:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.homeWorkbenchDataState,
.homeWorkbenchDataBanner {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.homeWorkbenchDataState {
  min-height: 320px;
  display: grid;
  grid-template-columns: auto minmax(0, 520px) auto;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
}

.homeWorkbenchDataStateIcon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-canvas));
  color: var(--primary);
}

.homeWorkbenchDataStateIcon i,
.categoryMarketDataStateIcon i {
  width: 18px;
  height: 18px;
  border: 3px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-top-color: var(--primary);
  border-radius: 999px;
  animation: compassDataStateSpin 0.82s linear infinite;
}

.homeWorkbenchDataState strong,
.categoryMarketDataState strong {
  display: block;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 950;
}

.homeWorkbenchDataState p,
.categoryMarketDataState p {
  max-width: 620px;
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}

.homeWorkbenchDataState button,
.homeWorkbenchDataBanner button,
.categoryMarketDataState button,
.categoryMarketDataBanner button {
  min-height: 34px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-panel));
  color: var(--primary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 0 12px;
}

.homeWorkbenchDataState.isError .homeWorkbenchDataStateIcon,
.categoryMarketDataState.isError .categoryMarketDataStateIcon {
  background: color-mix(in srgb, #ef4444 10%, var(--surface-canvas));
  color: #ef4444;
}

.homeWorkbenchDataBanner,
.categoryMarketDataBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  padding: 10px 12px;
}

.homeWorkbenchDataBanner.isPartial,
.categoryMarketDataBanner.isPartial {
  border-color: color-mix(in srgb, #f59e0b 24%, var(--line-dark));
  background: color-mix(in srgb, #f59e0b 8%, var(--surface-panel));
  color: var(--text-1);
}

@keyframes compassDataStateSpin {
  to {
    transform: rotate(360deg);
  }
}

.homeWorkbenchOverview {
  min-width: 0;
  display: grid;
  align-content: start;
  grid-template-rows: auto auto auto;
  gap: 16px;
}

.homeWorkbenchOverview:not(.is-editing) {
  height: calc(100dvh - var(--home-workbench-topbar-height) - var(--home-workbench-content-padding-y));
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.homeWorkbenchOverview.is-editing {
  height: calc(100dvh - var(--home-workbench-topbar-height) - var(--home-workbench-content-padding-y));
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.homeWorkbenchEditorShell {
  --home-workbench-preview-scale: 0.45;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(560px, 1fr) minmax(560px, 0.72fr);
  align-items: stretch;
  gap: 16px;
  overflow: hidden;
}

.homeWorkbenchEditorConfig {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.homeWorkbenchDiyActions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.homeWorkbenchDiyActions button,
.homeWorkbenchOptionRow button {
  min-height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel);
  color: var(--text-1);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 0 11px;
}

.homeWorkbenchDiyActions button.primary,
.homeWorkbenchOptionRow button.active {
  border-color: transparent;
  background: var(--primary);
  color: #ffffff;
}

.homeWorkbenchDiySection {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.homeWorkbenchDiySection.wide {
  grid-column: span 2;
}

.homeWorkbenchDiySection.full {
  grid-column: 1 / -1;
}

.homeWorkbenchDiySection h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

.homeWorkbenchOptionRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.homeWorkbenchRangePicker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.homeWorkbenchRangePicker label {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 0 9px;
}

.homeWorkbenchRangePicker label.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary);
}

.homeWorkbenchRangePicker input,
.homeWorkbenchChoiceCard input,
.homeWorkbenchMetricOption input,
.homeWorkbenchToggleList input {
  flex: 0 0 auto;
}

.homeWorkbenchCustomDaysInput {
  width: 48px;
  height: 26px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-1);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  padding: 0 4px;
}

.homeWorkbenchShopEditor {
  gap: 12px;
}

.homeWorkbenchShopSearch {
  height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel-hover);
  color: var(--text-3);
  padding: 0 10px;
}

.homeWorkbenchShopSearch input {
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  font-size: 12px;
  outline: none;
}

.homeWorkbenchShopSearchResults,
.homeWorkbenchShopOptionList {
  display: grid;
  gap: 6px;
}

.homeWorkbenchShopSearchResults {
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  padding: 6px;
}

.homeWorkbenchShopSearchResults article,
.homeWorkbenchShopOptionList article {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  background: var(--surface-panel-hover);
  padding: 6px 8px;
}

.homeWorkbenchShopSearchResults article > div:first-child {
  min-width: 0;
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.homeWorkbenchShopSearchResults img,
.homeWorkbenchShopSearchResults article > div:first-child > span {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  object-fit: cover;
}

.homeWorkbenchShopSearchResults article > div:first-child > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.homeWorkbenchShopSearchResults strong,
.homeWorkbenchShopOptionList label span {
  overflow: hidden;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 860;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchShopSearchResults small,
.homeWorkbenchShopOptionList small {
  color: var(--text-3);
  font-size: 10px;
}

.homeWorkbenchShopSearchResults button,
.homeWorkbenchShopOptionList button {
  height: 28px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-2);
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
  padding: 0 9px;
}

.homeWorkbenchShopSearchResults button:disabled,
.homeWorkbenchShopOptionList button:disabled {
  cursor: default;
  opacity: 0.45;
}

.homeWorkbenchShopSearchState {
  min-height: 34px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: 11px;
}

.homeWorkbenchShopSearchState.isError {
  color: var(--danger, #dc2626);
}

.homeWorkbenchShopOptionList article.isEnabled {
  background: var(--primary-soft);
}

.homeWorkbenchShopOptionList label {
  min-width: 0;
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.homeWorkbenchShopOptionList article > div {
  display: inline-flex;
  gap: 4px;
}

.homeWorkbenchShopOptionList article > div button {
  width: 28px;
  display: grid;
  place-items: center;
  padding: 0;
}

.homeWorkbenchChoiceGrid {
  display: grid;
  gap: 8px;
}

.homeWorkbenchChoiceGrid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.homeWorkbenchChoiceCard,
.homeWorkbenchMetricOption,
.homeWorkbenchToggleList label {
  min-width: 0;
  display: grid;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  cursor: pointer;
}

.homeWorkbenchChoiceCard {
  grid-template-columns: 18px 22px minmax(0, 1fr);
  gap: 9px;
  padding: 10px;
}

.homeWorkbenchChoiceCard span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.homeWorkbenchChoiceCard strong,
.homeWorkbenchChoiceCard em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchChoiceCard strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 920;
}

.homeWorkbenchChoiceCard em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.homeWorkbenchChoiceCard:has(input:checked),
.homeWorkbenchMetricOption:has(input:checked),
.homeWorkbenchToggleList label:has(input:checked) {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.homeWorkbenchMetricPicker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.homeWorkbenchMetricOption {
  grid-template-columns: 18px 20px minmax(0, 1fr);
  gap: 8px;
  min-height: 40px;
  padding: 0 10px;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 880;
}

.homeWorkbenchMetricOption.disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

.homeWorkbenchMetricLibrary {
  display: grid;
  gap: 12px;
}

.homeWorkbenchMetricLibrary section {
  display: grid;
  gap: 8px;
}

.homeWorkbenchMetricLibrary h4 {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 950;
}

.homeWorkbenchTemplatePicker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.homeWorkbenchToggleList {
  display: grid;
  gap: 8px;
}

.homeWorkbenchToggleList label {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 880;
}

.homeWorkbenchEditorPreview {
  min-width: 0;
  min-height: 0;
  height: 100%;
  position: sticky;
  top: 78px;
  align-self: start;
  overflow: hidden;
}

.homeWorkbenchPreviewFrame {
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
  overflow: hidden;
}

.homeWorkbenchPreviewFrame.templateOnly {
  --home-workbench-template-preview-scale: 1;
  --home-workbench-template-preview-width: 1160px;
}

.homeWorkbenchPreviewHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.homeWorkbenchPreviewHeader > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.homeWorkbenchPreviewHeader strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 950;
}

.homeWorkbenchPreviewHeader span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 780;
}

.homeWorkbenchRangeTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.homeWorkbenchRangeTabsInline {
  justify-content: flex-end;
  margin-left: auto;
}

.homeWorkbenchRangeTabs button {
  min-height: 30px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 0 11px;
}

.homeWorkbenchRangeTabs button.active {
  border-color: transparent;
  background: var(--primary);
  color: #ffffff;
}

.homeWorkbenchPreviewViewport {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-canvas);
}

.homeWorkbenchPreviewFrame.templateOnly .homeWorkbenchPreviewViewport {
  scrollbar-gutter: stable;
}

.homeWorkbenchPreviewCanvas {
  width: calc(1160px * var(--home-workbench-preview-scale));
  min-width: calc(1160px * var(--home-workbench-preview-scale));
  height: var(--home-workbench-preview-height, calc(1180px * var(--home-workbench-preview-scale)));
  min-height: var(--home-workbench-preview-height, calc(1180px * var(--home-workbench-preview-scale)));
  overflow: visible;
  transform-origin: top left;
}

.homeWorkbenchPreviewCanvas > .homeWorkbenchThreeZoneGrid {
  width: 1160px;
  transform: scale(var(--home-workbench-preview-scale));
  transform-origin: top left;
}

.homeWorkbenchThreeZoneGrid {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(300px, 0.75fr);
  grid-template-rows: minmax(220px, auto) minmax(260px, 1fr);
  align-items: stretch;
  gap: 16px;
}

.homeWorkbenchOverview:not(.is-editing) .homeWorkbenchThreeZoneGrid:not(.isPreview) {
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.homeWorkbenchThreeZoneGrid.layout-data {
  grid-template-columns: minmax(0, 2.15fr) minmax(260px, 0.58fr);
}

.homeWorkbenchThreeZoneGrid.layout-action {
  grid-template-columns: minmax(0, 1.58fr) minmax(320px, 0.92fr);
}

.homeWorkbenchThreeZoneGrid.side-count-0 {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(260px, auto);
}

.homeWorkbenchThreeZoneGrid.side-count-1 {
  grid-template-rows: minmax(420px, auto);
}

.homeWorkbenchBoardPanel {
  grid-row: 1 / span 2;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 14px;
  overflow: hidden;
}

.homeWorkbenchOverview:not(.is-editing) .homeWorkbenchThreeZoneGrid:not(.isPreview) .homeWorkbenchBoardPanel {
  max-height: 100%;
  overflow: hidden;
}

.homeWorkbenchBoardScrollBody {
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.homeWorkbenchOverview:not(.is-editing) .homeWorkbenchThreeZoneGrid:not(.isPreview) .homeWorkbenchBoardScrollBody {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 2px;
}

.homeWorkbenchThreeZoneGrid.side-count-0 .homeWorkbenchBoardPanel {
  grid-row: auto;
}

.homeWorkbenchThreeZoneGrid.side-count-1 .homeWorkbenchBoardPanel {
  grid-row: auto;
}

.homeWorkbenchPage.density-compact .homeWorkbenchBoardPanel,
.homeWorkbenchPage.density-compact .homeWorkbenchPanel {
  padding: 12px;
}

.homeWorkbenchPage.density-compact .homeWorkbenchKpi {
  min-height: 76px;
  padding: 12px;
}

.homeWorkbenchPage.density-compact .homeWorkbenchChart {
  height: clamp(180px, 28dvh, 260px);
}

.homeWorkbenchToolboxPanel,
.homeWorkbenchNoticePanel {
  display: grid;
  align-content: start;
}

.homeWorkbenchSideColumn {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 16px;
}

.homeWorkbenchOverview:not(.is-editing) .homeWorkbenchThreeZoneGrid:not(.isPreview) .homeWorkbenchSideColumn {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.homeWorkbenchThreeZoneGrid.side-count-1 .homeWorkbenchToolboxPanel,
.homeWorkbenchThreeZoneGrid.side-count-1 .homeWorkbenchNoticePanel {
  min-height: 100%;
}

.homeWorkbenchKpiGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.homeWorkbenchKpi {
  position: relative;
  min-height: 92px;
  display: grid;
  align-content: space-between;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.homeWorkbenchKpi::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--primary);
}

.homeWorkbenchKpi.cyan::after {
  background: var(--accent);
}

.homeWorkbenchKpi.green::after {
  background: var(--success);
}

.homeWorkbenchKpi.amber::after {
  background: var(--warning);
}

.homeWorkbenchKpi.purple::after {
  background: var(--primary);
}

.homeWorkbenchKpi.rose::after {
  background: #db2777;
}

.homeWorkbenchKpi > span,
.homeWorkbenchKpi strong,
.homeWorkbenchKpi em {
  display: block;
}

.homeWorkbenchKpi > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 820;
}

.homeWorkbenchKpi > span svg {
  width: 15px;
  height: 15px;
  color: var(--primary);
}

.homeWorkbenchKpi strong {
  color: var(--text-1);
  font-size: 25px;
  line-height: 1;
}

.homeWorkbenchKpi em {
  color: #34d399;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.homeWorkbenchPanel {
  min-width: 0;
  padding: 16px;
}

.homeWorkbenchPanel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.homeWorkbenchPanel > header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.homeWorkbenchPanel h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 16px;
  line-height: 1.25;
}

.homeWorkbenchPanel svg {
  color: var(--primary);
  flex: 0 0 auto;
}

.homeWorkbenchPanel > header.homeWorkbenchControlDeck {
  position: relative;
  z-index: 12;
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(420px, auto);
  align-items: center;
  gap: 18px;
  margin: -4px -4px 0;
  border: 1px solid color-mix(in srgb, var(--line-dark) 78%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-panel) 82%, transparent), color-mix(in srgb, var(--surface-panel-hover) 62%, transparent)),
    color-mix(in srgb, var(--surface-panel) 92%, transparent);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
  padding: 9px 12px;
}

.homeWorkbenchThreeZoneGrid.isPreview .homeWorkbenchControlDeck {
  position: static;
}

.homeWorkbenchPanel > header.homeWorkbenchControlDeck > div {
  min-width: 0;
}

.homeWorkbenchControlHero {
  display: flex;
  align-items: center;
  gap: 9px;
}

.homeWorkbenchControlHero > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.homeWorkbenchControlEyebrow {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0;
}

.homeWorkbenchControlHero h2 {
  overflow: hidden;
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchControlShelf {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(150px, 210px) minmax(0, auto);
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.homeWorkbenchControlField {
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.homeWorkbenchControlField > span {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 920;
  white-space: nowrap;
}

.homeWorkbenchControlField select {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-panel) 92%, transparent), color-mix(in srgb, var(--surface-panel-hover) 72%, transparent));
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  outline: none;
  padding: 0 28px 0 10px;
}

.homeWorkbenchControlField select:disabled {
  cursor: default;
  color: var(--text-2);
  opacity: 1;
}

.homeWorkbenchControlField select:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.homeWorkbenchRangeField {
  flex: 0 1 auto;
}

.homeWorkbenchRangeField .homeWorkbenchRangeTabs {
  max-width: min(360px, 30vw);
  min-width: 0;
  flex-wrap: nowrap;
  margin-left: 0;
  gap: 2px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-panel-hover) 78%, transparent);
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.homeWorkbenchRangeField .homeWorkbenchRangeTabs button {
  flex: 0 0 auto;
  min-height: 28px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  padding: 0 11px;
  box-shadow: none;
}

.homeWorkbenchRangeField .homeWorkbenchRangeTabs button.active {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 7px 16px color-mix(in srgb, var(--primary) 18%, transparent);
}

.homeWorkbenchRangeField .homeWorkbenchRangeTabs::-webkit-scrollbar {
  display: none;
}

[data-theme='dark'] .homeWorkbenchPanel > header.homeWorkbenchControlDeck {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-panel-hover) 42%, transparent), color-mix(in srgb, var(--surface-panel) 76%, transparent)),
    color-mix(in srgb, var(--surface-panel) 90%, #050712);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
}

[data-theme='dark'] .homeWorkbenchControlField select,
[data-theme='dark'] .homeWorkbenchRangeField .homeWorkbenchRangeTabs {
  background: color-mix(in srgb, var(--surface-panel-hover) 72%, #050712);
}

@media (max-width: 1180px) {
  .homeWorkbenchPanel > header.homeWorkbenchControlDeck {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .homeWorkbenchControlShelf {
    width: 100%;
    grid-template-columns: minmax(150px, 210px) minmax(150px, 210px) minmax(0, auto);
    justify-content: flex-start;
  }

  .homeWorkbenchRangeField .homeWorkbenchRangeTabs {
    max-width: min(380px, 72vw);
  }
}

@media (max-width: 720px) {
  .homeWorkbenchPanel > header.homeWorkbenchControlDeck {
    min-height: 0;
    gap: 10px;
    padding: 10px;
  }

  .homeWorkbenchControlShelf {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .homeWorkbenchControlField {
    width: 100%;
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .homeWorkbenchRangeField .homeWorkbenchRangeTabs {
    max-width: 100%;
  }
}

.homeWorkbenchChart {
  height: clamp(220px, 34dvh, 320px);
  display: grid;
  grid-template-columns: repeat(7, minmax(32px, 1fr));
  align-items: end;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(var(--line-dark) 1px, transparent 1px) 0 0 / 100% 25%,
    var(--surface-panel-hover);
  padding: 18px 18px 10px;
}

.homeWorkbenchChart span {
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: 8px;
}

.homeWorkbenchChart i {
  width: 100%;
  max-width: 42px;
  align-self: end;
  height: var(--home-bar-height);
  min-height: 8px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}

.homeWorkbenchChart em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.homeWorkbenchWidgetList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.homeWorkbenchWidgetItem {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 10px;
  text-align: left;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.homeWorkbenchWidgetItem:hover,
.homeWorkbenchWidgetItem.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  box-shadow: 0 12px 26px rgba(220, 78, 151, 0.13);
}

.homeWorkbenchWidgetItem:hover {
  transform: translateY(-1px);
}

.homeWorkbenchWidgetItem:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.homeWorkbenchWidgetItem span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.homeWorkbenchWidgetItem strong,
.homeWorkbenchWidgetItem em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchWidgetItem strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 920;
}

.homeWorkbenchWidgetItem em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.homeWorkbenchWidgetItem b {
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 950;
  padding: 4px 8px;
}

.homeWorkbenchWidgetItem.active b {
  background: var(--primary);
  color: #ffffff;
}

.homeWorkbenchToolboxGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.homeWorkbenchToolboxAction {
  min-width: 0;
  min-height: 104px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  padding: 12px 10px;
  text-align: center;
  text-decoration: none;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.homeWorkbenchToolboxAction:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  transform: translateY(-1px);
}

.homeWorkbenchToolboxAction.disabled {
  opacity: 0.56;
}

.homeWorkbenchToolboxAction span {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchAlertList {
  display: grid;
  gap: 10px;
}

.homeWorkbenchAlertList article {
  min-width: 0;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 11px;
}

.homeWorkbenchAlertList article > span {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--primary);
}

.homeWorkbenchAlertList article.danger > span {
  background: #ef4444;
}

.homeWorkbenchAlertList article.success > span {
  background: #22c55e;
}

.homeWorkbenchAlertList article.warning > span {
  background: #f59e0b;
}

.homeWorkbenchAlertList strong {
  display: block;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 920;
}

.homeWorkbenchAlertList p {
  margin: 4px 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
}

.homeWorkbenchAlertList em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.homeWorkbenchDiySectionHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.homeWorkbenchDiySectionHeader > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.homeWorkbenchDiySectionHeader p,
.homeWorkbenchMetricGroup > p {
  margin: 0;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 820;
}

.homeWorkbenchDiySectionHeader.small span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.homeWorkbenchInlineAction,
.homeWorkbenchTemplateFormActions button,
.homeWorkbenchResetRow button {
  min-height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel);
  color: var(--text-1);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 0 11px;
  white-space: nowrap;
}

.homeWorkbenchTemplateFormActions button.primary {
  border-color: transparent;
  background: var(--primary);
  color: #ffffff;
}

.homeWorkbenchTemplateGlyph {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 950;
}

.homeWorkbenchTemplateGlyph.small {
  width: 26px;
  height: 26px;
  font-size: 12px;
}

.homeWorkbenchTemplateBody {
  display: grid;
  gap: 14px;
}

.homeWorkbenchContentGrid,
.homeWorkbenchCommerceGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.homeWorkbenchCommerceCard {
  grid-column: span 2;
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-panel-hover) 86%, transparent),
      color-mix(in srgb, var(--surface-panel) 96%, transparent)
    ),
    var(--surface-panel);
  padding: 12px;
}

.homeWorkbenchCommerceCard.wide {
  grid-column: span 4;
}

.homeWorkbenchCommerceCard--full {
  grid-column: span 6;
}

.homeWorkbenchCommerceCard.isPreview {
  gap: 10px;
}

.homeWorkbenchInsightHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.homeWorkbenchInsightHeader > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.homeWorkbenchInsightHeader span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-panel-strong));
  color: var(--primary);
}

.homeWorkbenchInsightHeader strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchInsightHeader em {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.homeWorkbenchRankList,
.homeWorkbenchAdVideoList,
.homeWorkbenchChannelList {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.homeWorkbenchRankRow,
.homeWorkbenchAdVideoRow {
  min-width: 0;
  display: grid;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 90%, transparent);
}

.homeWorkbenchRankRow {
  grid-template-columns: 24px 42px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.homeWorkbenchRankRow:hover,
.homeWorkbenchRankRow.isActive {
  border-color: color-mix(in srgb, var(--primary-border) 48%, var(--line-dark));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent),
    color-mix(in srgb, var(--surface-panel-hover) 96%, transparent);
}

.homeWorkbenchRankBadge {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: #f59e0b;
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
}

.homeWorkbenchRankRow img,
.homeWorkbenchAdVideoRow img,
.homeWorkbenchCommerceMedia img,
.homeWorkbenchVideoStrip img,
.homeWorkbenchLiveProducts img {
  display: block;
  object-fit: cover;
  background: var(--surface-canvas);
}

.homeWorkbenchRankRow img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

.homeWorkbenchRankRow div,
.homeWorkbenchAdVideoRow div,
.homeWorkbenchCommerceSummary {
  min-width: 0;
}

.homeWorkbenchRankRow strong,
.homeWorkbenchAdVideoRow strong,
.homeWorkbenchCommerceSummary strong,
.homeWorkbenchLiveRoom strong {
  display: block;
  overflow: hidden;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchRankRow p,
.homeWorkbenchRankRow em,
.homeWorkbenchAdVideoRow p,
.homeWorkbenchCommerceSummary p,
.homeWorkbenchLiveRoom p {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchRankRow em {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, #f472b6 14%, var(--surface-panel));
  color: #be185d;
  padding: 1px 6px;
}

.homeWorkbenchRankRow b {
  color: var(--success);
  font-size: 11px;
  font-weight: 900;
}

.homeWorkbenchRankRow b.down {
  color: #ef4444;
}

.homeWorkbenchCommerceProduct {
  min-width: 0;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.homeWorkbenchCommerceMedia {
  position: relative;
  min-width: 0;
}

.homeWorkbenchCommerceMedia img {
  width: 116px;
  height: 116px;
  border-radius: 8px;
  border: 1px solid var(--line-dark);
}

.homeWorkbenchCommerceMedia span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 950;
  padding: 3px 7px;
}

.homeWorkbenchCommerceSummary strong {
  font-size: 15px;
}

.homeWorkbenchStars {
  margin-top: 6px;
  color: #facc15;
  font-size: 14px;
  letter-spacing: 0;
}

.homeWorkbenchStars span {
  color: #e2e8f0;
}

.homeWorkbenchMiniStatGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.homeWorkbenchMiniStatGrid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.homeWorkbenchMiniStatGrid > span {
  min-width: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 92%, transparent);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 820;
  padding: 7px;
}

.homeWorkbenchMiniStatGrid b {
  display: block;
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchProductEvidenceGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.homeWorkbenchProductEvidenceGrid article {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 82%, transparent);
  padding: 7px;
}

.homeWorkbenchProductEvidenceGrid img {
  width: 46px;
  height: 46px;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.homeWorkbenchProductEvidenceGrid div {
  min-width: 0;
}

.homeWorkbenchProductEvidenceGrid span,
.homeWorkbenchProductEvidenceGrid strong,
.homeWorkbenchProductEvidenceGrid p,
.homeWorkbenchProductEvidenceGrid em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchProductEvidenceGrid span {
  display: block;
  color: var(--primary);
  font-size: 10px;
  font-weight: 950;
}

.homeWorkbenchProductEvidenceGrid strong {
  display: block;
  color: var(--text-1);
  font-size: 11px;
  font-weight: 950;
}

.homeWorkbenchProductEvidenceGrid p {
  margin: 1px 0 0;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 780;
}

.homeWorkbenchProductEvidenceGrid em {
  color: var(--success);
  font-size: 10px;
  font-style: normal;
  font-weight: 930;
}

.homeWorkbenchProductEvidenceGrid em.down {
  color: var(--danger);
}

.homeWorkbenchChannelStrip {
  height: 18px;
  display: flex;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-canvas);
}

.homeWorkbenchChannelStrip span {
  flex: 0 0 var(--segment-width);
  min-width: 4px;
  background: var(--segment-color);
}

.homeWorkbenchChannelLegend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 10px;
}

.homeWorkbenchChannelLegend span,
.homeWorkbenchChannelList p {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 820;
}

.homeWorkbenchChannelLegend i,
.homeWorkbenchChannelList i {
  width: 8px;
  height: 8px;
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 999px;
}

.homeWorkbenchChannelLegend span {
  justify-content: flex-start;
}

.homeWorkbenchCreatorFlow,
.homeWorkbenchLiveRoom {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.homeWorkbenchCreatorStack {
  display: flex;
  align-items: center;
  min-width: 108px;
}

.homeWorkbenchCreatorStack img {
  width: 42px;
  height: 42px;
  margin-left: calc(var(--stack-index) * -10px);
  border: 2px solid var(--surface-panel-strong);
  border-radius: 999px;
  object-fit: cover;
}

.homeWorkbenchCreatorStack img:first-child {
  margin-left: 0;
}

.homeWorkbenchCreatorStack span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-left: -8px;
  border: 2px solid var(--surface-panel-strong);
  border-radius: 999px;
  background: var(--primary);
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
}

.homeWorkbenchCreatorCopy {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.homeWorkbenchCreatorCopy div {
  min-width: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 92%, transparent);
  padding: 8px;
}

.homeWorkbenchCreatorCopy strong,
.homeWorkbenchCreatorCopy span,
.homeWorkbenchCreatorCopy em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchCreatorCopy strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 950;
}

.homeWorkbenchCreatorCopy span {
  margin-top: 2px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 920;
}

.homeWorkbenchCreatorCopy em {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
  font-weight: 760;
}

.homeWorkbenchVideoStrip {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.homeWorkbenchVideoStrip figure {
  position: relative;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border-radius: 8px;
  border: 1px solid var(--line-dark);
  aspect-ratio: 4 / 3;
}

.homeWorkbenchVideoStrip img {
  width: 100%;
  height: 100%;
}

.homeWorkbenchVideoStrip figcaption {
  position: absolute;
  right: 6px;
  bottom: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 6px;
}

.homeWorkbenchAdVideoRow {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.homeWorkbenchAdVideoRow:hover,
.homeWorkbenchAdVideoRow.isActive {
  border-color: color-mix(in srgb, var(--primary-border) 48%, var(--line-dark));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent),
    color-mix(in srgb, var(--surface-panel-hover) 96%, transparent);
}

.homeWorkbenchAdVideoRow img {
  width: 48px;
  height: 54px;
  border-radius: 8px;
}

.homeWorkbenchAdVideoRow span {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 950;
}

.homeWorkbenchLiveProducts {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.homeWorkbenchLiveProducts img {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
}

.homeWorkbenchLiveTrend {
  height: 86px;
  display: flex;
  align-items: end;
  gap: 7px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(to top, transparent 0 19px, color-mix(in srgb, var(--line-dark-strong) 80%, transparent) 20px),
    color-mix(in srgb, var(--surface-panel-hover) 90%, transparent);
  padding: 10px 12px;
}

.homeWorkbenchLiveTrend span {
  flex: 1 1;
  min-width: 8px;
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(180deg, #ef476f, #2dd4bf);
}

.homeWorkbenchChannelMix {
  min-width: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.homeWorkbenchCommerceDonut {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.homeWorkbenchCommerceDonut span {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--surface-panel-strong);
}

.homeWorkbenchChannelList span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchChannelList b {
  color: var(--text-1);
  font-size: 11px;
  font-weight: 950;
}

.homeWorkbenchStrategyGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.homeWorkbenchStrategyCard,
.homeWorkbenchStructureList button,
.homeWorkbenchMismatchList button,
.homeWorkbenchTierFocusGrid article {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 82%, transparent);
}

.homeWorkbenchStrategyCard {
  display: grid;
  gap: 10px;
  overflow: hidden;
  padding: 10px;
}

.homeWorkbenchStrategyCard header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.homeWorkbenchStrategyCard header strong,
.homeWorkbenchStrategyCard header span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchStrategyCard header strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

.homeWorkbenchStrategyCard header span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 11px;
  font-weight: 920;
  padding: 4px 8px;
}

.homeWorkbenchStrategyCardBody {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(48px, 58px) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.homeWorkbenchStackViz {
  width: 54px;
  height: 118px;
  justify-self: center;
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: 26px 26px 7px 7px;
  background: color-mix(in srgb, var(--line-dark) 46%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-dark) 72%, transparent);
}

.homeWorkbenchStackViz.affiliate {
  border-radius: 7px 7px 26px 26px;
}

.homeWorkbenchStackViz span {
  width: 100%;
  height: var(--segment-height);
  display: block;
  background: var(--segment-color);
  opacity: 0.78;
}

.homeWorkbenchDataTable,
.homeWorkbenchTierTable {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.homeWorkbenchDataHead,
.homeWorkbenchDataRow {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(54px, 1fr) minmax(50px, 0.76fr) minmax(38px, 0.58fr) minmax(38px, 0.58fr);
  align-items: center;
  gap: 4px;
}

.homeWorkbenchDataHead {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 900;
  padding: 0 6px;
}

.homeWorkbenchDataRow {
  min-height: 32px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 78%, transparent);
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 820;
  padding: 0 5px;
}

.homeWorkbenchDataRow strong,
.homeWorkbenchDataRow span,
.homeWorkbenchDataRow em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchDataRow strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-1);
  font-weight: 930;
}

.homeWorkbenchDataRow strong i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--segment-color, var(--primary));
}

.homeWorkbenchDataRow em {
  font-style: normal;
  font-weight: 930;
}

.homeWorkbenchDataRow em.up {
  color: var(--success);
}

.homeWorkbenchDataRow em.down {
  color: var(--danger);
}

.homeWorkbenchStructureBar {
  height: 18px;
  display: flex;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-dark) 56%, transparent);
}

.homeWorkbenchStructureBar span {
  flex: 0 0 var(--segment-width);
  min-width: 10px;
  background: var(--segment-color);
}

.homeWorkbenchStructureList,
.homeWorkbenchMismatchList,
.homeWorkbenchTierFocusGrid {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.homeWorkbenchStructureList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.homeWorkbenchStructureList button {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 8px 9px;
  text-align: left;
}

.homeWorkbenchStructureList button:hover,
.homeWorkbenchStructureList button.isActive,
.homeWorkbenchMismatchList button:hover,
.homeWorkbenchMismatchList button.isActive {
  border-color: color-mix(in srgb, var(--primary-border) 48%, var(--line-dark));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent),
    color-mix(in srgb, var(--surface-panel-hover) 96%, transparent);
}

.homeWorkbenchStructureList button > span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--segment-color);
}

.homeWorkbenchStructureList button div {
  min-width: 0;
}

.homeWorkbenchStructureList strong,
.homeWorkbenchStructureList p,
.homeWorkbenchStructureList em {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchStructureList strong {
  display: block;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 930;
}

.homeWorkbenchStructureList p {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 760;
}

.homeWorkbenchStructureList em {
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 930;
  text-align: right;
}

.homeWorkbenchStructureList b {
  grid-column: 2 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-dark) 60%, transparent);
}

.homeWorkbenchStructureList i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.homeWorkbenchMismatchList button {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 9px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 9px 10px;
  text-align: left;
}

.homeWorkbenchMismatchList strong,
.homeWorkbenchMismatchList em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchMismatchList strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 940;
}

.homeWorkbenchMismatchList button > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.homeWorkbenchMismatchList span {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 850;
}

.homeWorkbenchMismatchList b {
  height: 7px;
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.homeWorkbenchMismatchList em {
  color: var(--success);
  font-size: 11px;
  font-style: normal;
  font-weight: 930;
  text-align: right;
}

.homeWorkbenchMismatchList em.down {
  color: var(--warning);
}

.homeWorkbenchTierFocusGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.homeWorkbenchTierFocusGrid article {
  display: grid;
  gap: 4px;
  padding: 9px;
}

.homeWorkbenchTierFocusGrid article > strong,
.homeWorkbenchTierFocusGrid article > span,
.homeWorkbenchTierFocusGrid article > em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchTierFocusGrid article > strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 930;
}

.homeWorkbenchTierFocusGrid article > span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 820;
}

.homeWorkbenchTierFocusGrid article > em {
  color: var(--text-2);
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.homeWorkbenchActionGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.homeWorkbenchActionItem,
.homeWorkbenchActionPanel,
.homeWorkbenchActionSignalGrid article,
.homeWorkbenchActionProductRow,
.homeWorkbenchActionTimeline article {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 84%, transparent);
}

.homeWorkbenchActionItem {
  min-height: 96px;
  display: grid;
  align-content: start;
  gap: 7px;
  color: inherit;
  padding: 10px;
  text-decoration: none;
}

.homeWorkbenchActionItem:hover,
.homeWorkbenchActionProductRow:hover {
  border-color: color-mix(in srgb, var(--primary-border) 48%, var(--line-dark));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent),
    color-mix(in srgb, var(--surface-panel-hover) 96%, transparent);
}

.homeWorkbenchActionItem > span,
.homeWorkbenchActionSignalGrid article > span {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-panel));
  color: var(--primary);
}

.homeWorkbenchActionItem strong,
.homeWorkbenchActionPanel header strong,
.homeWorkbenchActionProductRow strong,
.homeWorkbenchActionTimeline strong,
.homeWorkbenchActionSignalGrid strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchActionItem p,
.homeWorkbenchActionProductRow p,
.homeWorkbenchActionTimeline p,
.homeWorkbenchActionSignalGrid p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.45;
  text-overflow: ellipsis;
}

.homeWorkbenchActionItem p,
.homeWorkbenchActionProductRow p,
.homeWorkbenchActionSignalGrid p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.homeWorkbenchActionSplit {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.homeWorkbenchActionPanel {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
}

.homeWorkbenchActionPanel header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.homeWorkbenchActionPanel header span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  font-size: 10px;
  font-weight: 920;
  padding: 4px 7px;
}

.homeWorkbenchActionProductList,
.homeWorkbenchActionTimeline {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.homeWorkbenchActionProductRow {
  display: grid;
  grid-template-columns: 22px 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: inherit;
  padding: 7px;
  text-decoration: none;
}

.homeWorkbenchActionProductRow > b {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 10px;
  font-weight: 950;
}

.homeWorkbenchActionProductRow img {
  width: 38px;
  height: 38px;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.homeWorkbenchActionProductRow div,
.homeWorkbenchActionTimeline div,
.homeWorkbenchActionSignalGrid div {
  min-width: 0;
}

.homeWorkbenchActionProductRow em {
  max-width: 48px;
  overflow: hidden;
  color: var(--success);
  font-size: 10px;
  font-style: normal;
  font-weight: 930;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchActionProductRow em.down {
  color: var(--danger);
}

.homeWorkbenchActionTimeline article {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 8px;
}

.homeWorkbenchActionTimeline article > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-panel));
  color: var(--primary);
  font-size: 10px;
  font-weight: 950;
}

.homeWorkbenchActionSignalGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.homeWorkbenchActionSignalGrid article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px;
}

.homeWorkbenchOperationSliceGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.homeWorkbenchOperationSlice {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 82%, transparent);
  color: inherit;
  padding: 8px;
  text-decoration: none;
}

.homeWorkbenchOperationSlice:hover {
  border-color: color-mix(in srgb, var(--primary-border) 48%, var(--line-dark));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent),
    color-mix(in srgb, var(--surface-panel-hover) 96%, transparent);
}

.homeWorkbenchOperationSlice > img,
.homeWorkbenchOperationSliceIcon {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
}

.homeWorkbenchOperationSlice > img {
  display: block;
  object-fit: cover;
}

.homeWorkbenchOperationSliceIcon {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 48%),
    color-mix(in srgb, var(--primary) 9%, var(--surface-panel));
  color: var(--primary);
}

.homeWorkbenchOperationSlice.channel {
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
}

.homeWorkbenchOperationSlice.channel .homeWorkbenchOperationSliceIcon {
  width: 64px;
  aspect-ratio: 1;
  align-self: center;
}

.homeWorkbenchOperationSlice.channel > div {
  align-self: center;
}

.homeWorkbenchOperationSlice div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.homeWorkbenchOperationSlice span,
.homeWorkbenchOperationSlice strong,
.homeWorkbenchOperationSlice p,
.homeWorkbenchOperationSlice em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.homeWorkbenchOperationSlice span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.homeWorkbenchOperationSlice strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.homeWorkbenchOperationSlice p,
.homeWorkbenchOperationSlice em {
  margin: 0;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.4;
}

.homeWorkbenchOperationSlice p {
  white-space: nowrap;
}

.homeWorkbenchOperationSlice em {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.homeWorkbenchOperationChannelBar {
  min-width: 0;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-canvas);
}

.homeWorkbenchOperationChannelBar span {
  min-width: 72px;
  flex: 0 0 var(--segment-width);
  display: grid;
  gap: 2px;
  background: color-mix(in srgb, var(--segment-color) 18%, var(--surface-panel));
  border-right: 1px solid color-mix(in srgb, var(--segment-color) 28%, var(--line-dark));
  padding: 8px;
}

.homeWorkbenchOperationChannelBar span:last-child {
  border-right: 0;
}

.homeWorkbenchOperationChannelBar b,
.homeWorkbenchOperationChannelBar em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchOperationChannelBar b {
  color: var(--text-1);
  font-size: 11px;
  font-weight: 950;
}

.homeWorkbenchOperationChannelBar em {
  color: var(--segment-color);
  font-size: 10px;
  font-style: normal;
  font-weight: 930;
}

.homeWorkbenchPulseRow,
.homeWorkbenchPriceBandList button {
  min-width: 0;
  display: grid;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 90%, transparent);
  color: inherit;
  font: inherit;
}

.homeWorkbenchPulseRow {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 9px 10px;
}

.homeWorkbenchPulseRow strong,
.homeWorkbenchPulseRow span,
.homeWorkbenchPulseRow b,
.homeWorkbenchPriceBandList strong,
.homeWorkbenchPriceBandList span,
.homeWorkbenchPriceBandList b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchPulseRow strong,
.homeWorkbenchPriceBandList strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 950;
}

.homeWorkbenchPulseRow span,
.homeWorkbenchPriceBandList span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 820;
}

.homeWorkbenchPulseRow b,
.homeWorkbenchPriceBandList b {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 950;
}

.homeWorkbenchPulseRow b.up {
  color: var(--success);
}

.homeWorkbenchPulseRow b.down {
  color: var(--danger);
}

.homeWorkbenchPriceBandList {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.homeWorkbenchPriceBandList button {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px 8px;
  cursor: pointer;
  padding: 10px;
  text-align: left;
}

.homeWorkbenchPriceBandList button:hover,
.homeWorkbenchPriceBandList button.isActive {
  border-color: color-mix(in srgb, var(--primary-border) 48%, var(--line-dark));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent),
    color-mix(in srgb, var(--surface-panel-hover) 96%, transparent);
}

.homeWorkbenchPriceBandList b {
  grid-column: 1 / -1;
}

.homeWorkbenchInsightLayout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(230px, 0.86fr) minmax(0, 1.45fr);
  gap: 10px;
  align-items: stretch;
}

.homeWorkbenchInsightLayout.category {
  grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
}

.homeWorkbenchInsightLayout.categoryRail,
.homeWorkbenchInsightLayout.strategy,
.homeWorkbenchInsightLayout.operationSlices,
.homeWorkbenchInsightLayout.structure,
.homeWorkbenchInsightLayout.priceMismatch,
.homeWorkbenchInsightLayout.creatorTier,
.homeWorkbenchInsightLayout.actionList {
  grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
}

.homeWorkbenchInsightLayout.category > .homeWorkbenchInsightRail {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
  scrollbar-gutter: stable;
}

.homeWorkbenchInsightLayout.category > .homeWorkbenchInsightDetail {
  align-content: stretch;
  border: 0;
  background: transparent;
  min-height: 420px;
  padding: 0;
}

.homeWorkbenchInsightLayout.category .categoryMarketMatrix {
  height: 100%;
  min-height: 420px;
}

.homeWorkbenchInsightRail,
.homeWorkbenchInsightDetail {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.homeWorkbenchInsightRail {
  overflow-anchor: none;
  scrollbar-gutter: stable;
}

.homeWorkbenchInsightLayout.strategy > .homeWorkbenchInsightRail,
.homeWorkbenchInsightLayout.operationSlices > .homeWorkbenchInsightRail,
.homeWorkbenchInsightLayout.structure > .homeWorkbenchInsightRail,
.homeWorkbenchInsightLayout.categoryRail > .homeWorkbenchInsightRail,
.homeWorkbenchInsightLayout.priceMismatch > .homeWorkbenchInsightRail,
.homeWorkbenchInsightLayout.creatorTier > .homeWorkbenchInsightRail,
.homeWorkbenchInsightLayout.actionList > .homeWorkbenchInsightRail {
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
}

.homeWorkbenchInsightDetail {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-panel-hover) 88%, transparent);
  padding: 10px;
}

.homeWorkbenchInsightMediaStrip {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.homeWorkbenchInsightMediaStrip figure {
  position: relative;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-canvas);
  aspect-ratio: 16 / 9;
}

.homeWorkbenchInsightMediaStrip img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.homeWorkbenchInsightMediaStrip figcaption {
  position: absolute;
  right: 6px;
  bottom: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 6px;
}

.homeWorkbenchCreatorCandidate,
.homeWorkbenchLiveCandidate,
.homeWorkbenchCategoryRow,
.homeWorkbenchCompetitorRow {
  min-width: 0;
  display: grid;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 90%, transparent);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.homeWorkbenchCreatorCandidate {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
}

.homeWorkbenchLiveCandidate {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px;
}

.homeWorkbenchCategoryRow {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  padding: 9px;
  scroll-margin-block: 8px;
}

.homeWorkbenchInsightLayout.category .homeWorkbenchCategoryRow {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 8px;
  min-height: 76px;
  padding: 8px;
}

.homeWorkbenchInsightLayout.category .homeWorkbenchCategoryRow > span {
  grid-column: 1;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  padding: 4px 8px;
}

.homeWorkbenchInsightLayout.category .homeWorkbenchCategoryRow div {
  grid-column: 1 / -1;
}

.homeWorkbenchInsightLayout.category .homeWorkbenchCategoryRow b {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.homeWorkbenchCompetitorRow {
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 10px;
}

.homeWorkbenchCreatorCandidate:hover,
.homeWorkbenchCreatorCandidate.isActive,
.homeWorkbenchLiveCandidate:hover,
.homeWorkbenchLiveCandidate.isActive,
.homeWorkbenchCategoryRow:hover,
.homeWorkbenchCategoryRow.isActive,
.homeWorkbenchCompetitorRow:hover,
.homeWorkbenchCompetitorRow.isActive {
  border-color: color-mix(in srgb, var(--primary-border) 48%, var(--line-dark));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent),
    color-mix(in srgb, var(--surface-panel-hover) 96%, transparent);
}

.homeWorkbenchCategoryRow > span {
  min-width: 56px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-panel));
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  padding: 4px 7px;
  text-align: center;
  white-space: nowrap;
}

.homeWorkbenchCategoryRow > span.tone-green {
  background: color-mix(in srgb, #22c55e 13%, var(--surface-panel));
  color: #15803d;
}

.homeWorkbenchCategoryRow > span.tone-amber {
  background: color-mix(in srgb, #f59e0b 15%, var(--surface-panel));
  color: #b45309;
}

.homeWorkbenchCategoryRow > span.tone-cyan {
  background: color-mix(in srgb, #06b6d4 13%, var(--surface-panel));
  color: #0e7490;
}

.homeWorkbenchCategoryRow > span.tone-rose {
  background: color-mix(in srgb, #ef4444 12%, var(--surface-panel));
  color: #dc2626;
}

.homeWorkbenchCategoryRow b {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 920;
  white-space: nowrap;
}

.homeWorkbenchCategoryBack,
.homeWorkbenchCategoryScope {
  min-width: 0;
  display: flex;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-panel-hover) 82%, transparent);
  color: var(--text-2);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
}

.homeWorkbenchCategoryBack {
  justify-content: flex-start;
  gap: 4px;
  cursor: pointer;
  padding: 7px 10px;
}

.homeWorkbenchCategoryBack:hover,
.homeWorkbenchCategoryScope button:hover {
  border-color: color-mix(in srgb, var(--primary-border) 48%, var(--line-dark));
  color: var(--primary);
}

.homeWorkbenchCategoryScope {
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px 6px 10px;
}

.homeWorkbenchCategoryScope span,
.homeWorkbenchCategoryScope b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchCategoryScope span {
  color: var(--text-1);
  font-weight: 950;
}

.homeWorkbenchCategoryScope b {
  color: var(--text-3);
}

.homeWorkbenchCategoryScope button {
  flex: 0 0 auto;
  min-height: 24px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  padding: 0 9px;
}

.homeWorkbenchCompetitorRow > i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
}

.homeWorkbenchCompetitorRow > i.tone-danger {
  background: #ef4444;
}

.homeWorkbenchCompetitorRow > i.tone-success {
  background: #22c55e;
}

.homeWorkbenchCompetitorRow > i.tone-warning {
  background: #f59e0b;
}

.homeWorkbenchCompetitorRow > span {
  max-width: 132px;
  overflow: hidden;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchCreatorCandidate img {
  width: 38px;
  height: 38px;
  display: block;
  border-radius: 999px;
  object-fit: cover;
}

.homeWorkbenchCreatorCandidate div,
.homeWorkbenchLiveCandidate div,
.homeWorkbenchCategoryRow div,
.homeWorkbenchCompetitorRow div {
  min-width: 0;
}

.homeWorkbenchCreatorCandidate strong,
.homeWorkbenchLiveCandidate strong,
.homeWorkbenchCategoryRow strong,
.homeWorkbenchCompetitorRow strong,
.homeWorkbenchCreatorProfile strong,
.homeWorkbenchAdDetail > div > strong,
.homeWorkbenchLinkedProduct strong,
.homeWorkbenchInsightNote strong,
.homeWorkbenchCompetitorHero strong,
.homeWorkbenchCompetitorAction strong,
.homeWorkbenchCompetitorProducts b {
  display: block;
  overflow: hidden;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchCreatorCandidate p,
.homeWorkbenchLiveCandidate p,
.homeWorkbenchCategoryRow p,
.homeWorkbenchCompetitorRow p,
.homeWorkbenchCreatorProfile p,
.homeWorkbenchAdDetail > div > p,
.homeWorkbenchLinkedProduct p,
.homeWorkbenchInsightNote span,
.homeWorkbenchCompetitorHero p,
.homeWorkbenchCompetitorAction p {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.45;
  text-overflow: ellipsis;
}

.homeWorkbenchCreatorCandidate p,
.homeWorkbenchLiveCandidate p,
.homeWorkbenchCategoryRow p,
.homeWorkbenchCompetitorRow p,
.homeWorkbenchLinkedProduct p {
  white-space: nowrap;
}

.homeWorkbenchCreatorCandidate span,
.homeWorkbenchLiveCandidate span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 920;
  white-space: nowrap;
}

.homeWorkbenchCategoryMatrix {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(251, 191, 36, 0.1), transparent 38%),
    radial-gradient(circle at 78% 22%, color-mix(in srgb, #22c55e 14%, transparent), transparent 34%),
    linear-gradient(to right, transparent calc(50% - 0.5px), var(--line-dark) calc(50% - 0.5px), var(--line-dark) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--line-dark) calc(50% - 0.5px), var(--line-dark) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    color-mix(in srgb, var(--surface-panel-hover) 88%, transparent);
  padding: 18px;
}

.homeWorkbenchInsightLayout.category .homeWorkbenchCategoryMatrix {
  height: 100%;
  min-height: 398px;
}

.homeWorkbenchCategoryMatrix .axisY,
.homeWorkbenchCategoryMatrix .axisX,
.homeWorkbenchCategoryMatrix em {
  position: absolute;
  z-index: 2;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-panel) 86%, transparent);
  color: var(--text-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  padding: 7px 9px;
  white-space: nowrap;
}

.homeWorkbenchCategoryMatrix .axisY {
  top: 14px;
  left: 14px;
  color: #15803d;
}

.homeWorkbenchCategoryMatrix .axisX {
  right: 14px;
  bottom: 14px;
  color: #15803d;
}

.homeWorkbenchCategoryMatrix .good {
  top: 14px;
  right: 14px;
  color: #15803d;
}

.homeWorkbenchCategoryMatrix .wait {
  left: 14px;
  bottom: 14px;
}

.homeWorkbenchCategoryBubble {
  position: absolute;
  left: var(--matrix-x);
  bottom: var(--matrix-y);
  z-index: var(--bubble-z, 3);
  width: var(--bubble-size, 42px);
  height: var(--bubble-size, 42px);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-panel));
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  text-align: center;
  opacity: 0;
  animation: homeWorkbenchCategoryBubbleIn 420ms cubic-bezier(0.18, 0.86, 0.22, 1) forwards;
  animation-delay: calc(var(--bubble-index, 0) * 42ms);
  transform: translate(calc(-50% + var(--bubble-offset-x, 0px)), calc(50% + var(--bubble-offset-y, 0px)));
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}

@keyframes homeWorkbenchCategoryBubbleIn {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--bubble-offset-x, 0px)), calc(56% + var(--bubble-offset-y, 0px))) scale(0.72);
  }

  62% {
    opacity: 1;
    transform: translate(calc(-50% + var(--bubble-offset-x, 0px)), calc(49% + var(--bubble-offset-y, 0px))) scale(1.04);
  }

  100% {
    opacity: 1;
    transform: translate(calc(-50% + var(--bubble-offset-x, 0px)), calc(50% + var(--bubble-offset-y, 0px))) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .homeWorkbenchCategoryBubble {
    opacity: 1;
    animation: none;
  }
}

.homeWorkbenchCategoryBubble:hover,
.homeWorkbenchCategoryBubble.isActive {
  box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 18%, transparent);
  transform: translate(calc(-50% + var(--bubble-offset-x, 0px)), calc(50% + var(--bubble-offset-y, 0px))) scale(1.08);
}

.homeWorkbenchCategoryBubble strong {
  min-width: 0;
  max-width: calc(var(--bubble-size, 42px) - 8px);
  display: block;
  overflow: hidden;
  color: var(--text-1);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchCategoryMatrix.isDense .homeWorkbenchCategoryBubble {
  opacity: 0.86;
}

.homeWorkbenchCategoryMatrix.isDense .homeWorkbenchCategoryBubble:not(:hover):not(.isActive) strong {
  font-size: 10px;
}

.homeWorkbenchCategoryMatrix.isDense .homeWorkbenchCategoryBubble:not(:hover):not(.isActive) {
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 10%, transparent);
}

.homeWorkbenchCategoryBubble.tone-green {
  border-color: rgba(34, 197, 94, 0.46);
  background: color-mix(in srgb, #22c55e 20%, var(--surface-panel));
}

.homeWorkbenchCategoryBubble.tone-amber {
  border-color: rgba(245, 158, 11, 0.46);
  background: color-mix(in srgb, #f59e0b 18%, var(--surface-panel));
}

.homeWorkbenchCategoryBubble.tone-cyan {
  border-color: rgba(6, 182, 212, 0.46);
  background: color-mix(in srgb, #06b6d4 18%, var(--surface-panel));
}

.homeWorkbenchCategoryBubble.tone-rose {
  border-color: rgba(239, 68, 68, 0.46);
  background: color-mix(in srgb, #ef4444 18%, var(--surface-panel));
}

.homeWorkbenchCompetitorHero,
.homeWorkbenchCompetitorAction,
.homeWorkbenchCompetitorProducts {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 82%, transparent);
}

.homeWorkbenchCompetitorHero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
}

.homeWorkbenchCompetitorHero > div {
  min-width: 0;
}

.homeWorkbenchCompetitorHero > span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-panel));
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  padding: 5px 8px;
}

.homeWorkbenchCompetitorHero > span.tone-danger {
  background: color-mix(in srgb, #ef4444 13%, var(--surface-panel));
  color: #dc2626;
}

.homeWorkbenchCompetitorHero > span.tone-success {
  background: color-mix(in srgb, #22c55e 13%, var(--surface-panel));
  color: #15803d;
}

.homeWorkbenchCompetitorHero > span.tone-warning {
  background: color-mix(in srgb, #f59e0b 15%, var(--surface-panel));
  color: #b45309;
}

.homeWorkbenchCompetitorAction {
  padding: 10px;
}

.homeWorkbenchCompetitorAction p {
  white-space: normal;
}

.homeWorkbenchCompetitorProducts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}

.homeWorkbenchCompetitorProducts span {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.homeWorkbenchCompetitorProducts img {
  width: 38px;
  height: 38px;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.homeWorkbenchCompetitorProducts b,
.homeWorkbenchCompetitorProducts em {
  grid-column: 2;
}

.homeWorkbenchCompetitorProducts em {
  overflow: hidden;
  color: var(--success);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchCreatorProfile {
  min-width: 0;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.homeWorkbenchCreatorProfile > img {
  width: 74px;
  height: 74px;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

.homeWorkbenchCreatorEvidenceGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
}

.homeWorkbenchCreatorVideoEvidence,
.homeWorkbenchCreatorLiveEvidence {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 82%, transparent);
}

.homeWorkbenchCreatorVideoEvidence {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  padding: 7px;
}

.homeWorkbenchCreatorVideoEvidence figure {
  position: relative;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border-radius: 8px;
  background: var(--surface-canvas);
}

.homeWorkbenchCreatorVideoEvidence img {
  width: 100%;
  height: 100%;
  min-height: 88px;
  display: block;
  object-fit: cover;
}

.homeWorkbenchCreatorVideoEvidence figcaption {
  position: absolute;
  left: 6px;
  bottom: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 10px;
  font-weight: 920;
  padding: 2px 6px;
}

.homeWorkbenchCreatorVideoEvidence div,
.homeWorkbenchCreatorLiveEvidence {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
}

.homeWorkbenchCreatorVideoEvidence strong,
.homeWorkbenchCreatorVideoEvidence p,
.homeWorkbenchCreatorVideoEvidence span,
.homeWorkbenchCreatorLiveEvidence strong,
.homeWorkbenchCreatorLiveEvidence p,
.homeWorkbenchCreatorLiveEvidence em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.homeWorkbenchCreatorVideoEvidence strong,
.homeWorkbenchCreatorLiveEvidence strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.homeWorkbenchCreatorVideoEvidence p,
.homeWorkbenchCreatorVideoEvidence span,
.homeWorkbenchCreatorLiveEvidence p,
.homeWorkbenchCreatorLiveEvidence em {
  margin: 0;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.42;
}

.homeWorkbenchCreatorVideoEvidence p,
.homeWorkbenchCreatorVideoEvidence span,
.homeWorkbenchCreatorLiveEvidence p {
  white-space: nowrap;
}

.homeWorkbenchCreatorLiveEvidence {
  padding: 10px;
}

.homeWorkbenchCreatorLiveEvidence > span {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, #ef476f 12%, var(--surface-panel));
  color: #ef476f;
  font-size: 10px;
  font-weight: 950;
  padding: 4px 7px;
}

.homeWorkbenchAdDetail {
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: stretch;
}

.homeWorkbenchAdDetail > figure {
  position: relative;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: var(--surface-canvas);
}

.homeWorkbenchAdDetail > figure img {
  width: 100%;
  height: 100%;
  min-height: 178px;
  display: block;
  object-fit: cover;
}

.homeWorkbenchAdDetail > figure figcaption {
  position: absolute;
  left: 8px;
  bottom: 8px;
  border-radius: 999px;
  background: #ef476f;
  color: #ffffff;
  font-size: 10px;
  font-weight: 950;
  padding: 3px 7px;
}

.homeWorkbenchLinkedProduct {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 82%, transparent);
  padding: 7px;
}

.homeWorkbenchLinkedProduct img {
  width: 42px;
  height: 42px;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.homeWorkbenchInsightNote {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--primary-border) 36%, var(--line-dark));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-panel));
  padding: 9px 10px;
}

[data-theme='dark'] .homeWorkbenchCommerceCard {
  border-color: rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.58), rgba(15, 23, 42, 0.72)),
    var(--surface-panel);
}

[data-theme='dark'] .homeWorkbenchRankRow,
[data-theme='dark'] .homeWorkbenchAdVideoRow,
[data-theme='dark'] .homeWorkbenchCreatorCandidate,
[data-theme='dark'] .homeWorkbenchLiveCandidate,
[data-theme='dark'] .homeWorkbenchCategoryRow,
[data-theme='dark'] .homeWorkbenchCompetitorRow,
[data-theme='dark'] .homeWorkbenchMiniStatGrid > span,
[data-theme='dark'] .homeWorkbenchCreatorCopy div,
[data-theme='dark'] .homeWorkbenchInsightDetail,
[data-theme='dark'] .homeWorkbenchLinkedProduct,
[data-theme='dark'] .homeWorkbenchInsightNote,
[data-theme='dark'] .homeWorkbenchCompetitorHero,
[data-theme='dark'] .homeWorkbenchCompetitorAction,
[data-theme='dark'] .homeWorkbenchCompetitorProducts,
[data-theme='dark'] .homeWorkbenchActionItem,
[data-theme='dark'] .homeWorkbenchActionPanel,
[data-theme='dark'] .homeWorkbenchActionSignalGrid article,
[data-theme='dark'] .homeWorkbenchActionProductRow,
[data-theme='dark'] .homeWorkbenchActionTimeline article,
[data-theme='dark'] .homeWorkbenchOperationSlice,
[data-theme='dark'] .homeWorkbenchProductEvidenceGrid article,
[data-theme='dark'] .homeWorkbenchCreatorVideoEvidence,
[data-theme='dark'] .homeWorkbenchCreatorLiveEvidence {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.48);
}

[data-theme='dark'] .homeWorkbenchRankRow:hover,
[data-theme='dark'] .homeWorkbenchRankRow.isActive,
[data-theme='dark'] .homeWorkbenchAdVideoRow:hover,
[data-theme='dark'] .homeWorkbenchAdVideoRow.isActive,
[data-theme='dark'] .homeWorkbenchCreatorCandidate:hover,
[data-theme='dark'] .homeWorkbenchCreatorCandidate.isActive,
[data-theme='dark'] .homeWorkbenchLiveCandidate:hover,
[data-theme='dark'] .homeWorkbenchLiveCandidate.isActive,
[data-theme='dark'] .homeWorkbenchCategoryRow:hover,
[data-theme='dark'] .homeWorkbenchCategoryRow.isActive,
[data-theme='dark'] .homeWorkbenchCompetitorRow:hover,
[data-theme='dark'] .homeWorkbenchCompetitorRow.isActive,
[data-theme='dark'] .homeWorkbenchActionItem:hover,
[data-theme='dark'] .homeWorkbenchActionProductRow:hover,
[data-theme='dark'] .homeWorkbenchOperationSlice:hover {
  border-color: color-mix(in srgb, var(--primary-border) 62%, rgba(148, 163, 184, 0.16));
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(15, 23, 42, 0.5)),
    rgba(15, 23, 42, 0.64);
}

[data-theme='dark'] .homeWorkbenchInsightHeader span,
[data-theme='dark'] .homeWorkbenchTemplateGlyph {
  background: color-mix(in srgb, var(--primary) 20%, rgba(15, 23, 42, 0.74));
}

[data-theme='dark'] .homeWorkbenchCommerceMedia img,
[data-theme='dark'] .homeWorkbenchRankRow img,
[data-theme='dark'] .homeWorkbenchAdVideoRow img,
[data-theme='dark'] .homeWorkbenchCreatorCandidate img,
[data-theme='dark'] .homeWorkbenchCreatorProfile > img,
[data-theme='dark'] .homeWorkbenchLinkedProduct img,
[data-theme='dark'] .homeWorkbenchInsightMediaStrip figure,
[data-theme='dark'] .homeWorkbenchVideoStrip figure,
[data-theme='dark'] .homeWorkbenchLiveProducts img {
  border-color: rgba(148, 163, 184, 0.18);
}

[data-theme='dark'] .homeWorkbenchRankRow em {
  background: rgba(244, 114, 182, 0.16);
  color: #f9a8d4;
}

[data-theme='dark'] .homeWorkbenchChannelStrip,
[data-theme='dark'] .homeWorkbenchLiveTrend {
  background:
    repeating-linear-gradient(to top, transparent 0 19px, rgba(148, 163, 184, 0.12) 20px),
    rgba(15, 23, 42, 0.46);
}

[data-theme='dark'] .homeWorkbenchCategoryMatrix {
  border-color: rgba(148, 163, 184, 0.12);
  background:
    linear-gradient(135deg, rgba(251, 191, 36, 0.08), transparent 38%),
    radial-gradient(circle at 78% 22%, rgba(34, 197, 94, 0.12), transparent 34%),
    linear-gradient(to right, transparent calc(50% - 0.5px), rgba(148, 163, 184, 0.13) calc(50% - 0.5px), rgba(148, 163, 184, 0.13) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(148, 163, 184, 0.13) calc(50% - 0.5px), rgba(148, 163, 184, 0.13) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    rgba(15, 23, 42, 0.46);
}

[data-theme='dark'] .homeWorkbenchCategoryMatrix .axisY,
[data-theme='dark'] .homeWorkbenchCategoryMatrix .axisX,
[data-theme='dark'] .homeWorkbenchCategoryMatrix em,
[data-theme='dark'] .homeWorkbenchCategoryRow > span,
[data-theme='dark'] .homeWorkbenchCategoryBack,
[data-theme='dark'] .homeWorkbenchCategoryScope,
[data-theme='dark'] .homeWorkbenchCategoryScope button,
[data-theme='dark'] .homeWorkbenchCompetitorHero > span {
  background: rgba(15, 23, 42, 0.72);
}

[data-theme='dark'] .homeWorkbenchCommerceDonut span {
  background: #111827;
}

.homeWorkbenchChartGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.homeWorkbenchChartCard {
  grid-column: span 3;
  min-width: 0;
  min-height: 260px;
  display: grid;
  grid-template-rows: auto minmax(178px, 1fr);
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
}

.homeWorkbenchChartCard.span-full {
  grid-column: span 6;
}

.homeWorkbenchChartCard.span-two-thirds {
  grid-column: span 4;
}

.homeWorkbenchChartCard.span-half {
  grid-column: span 3;
}

.homeWorkbenchChartCard.span-third {
  grid-column: span 2;
  min-height: 226px;
  gap: 8px;
  padding: 10px;
}

.homeWorkbenchChartCardHeader {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.homeWorkbenchChartCardHeader > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.homeWorkbenchChartCardHeader strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

.homeWorkbenchChartCardHeader span,
.homeWorkbenchChartCardHeader em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.4;
}

.homeWorkbenchChartCardHeader em {
  flex: 0 0 auto;
  white-space: nowrap;
}

.homeWorkbenchChartCard.span-third .homeWorkbenchChartCardHeader {
  gap: 6px;
}

.homeWorkbenchChartCard.span-third .homeWorkbenchChartCardHeader strong {
  font-size: 12px;
}

.homeWorkbenchChartCard.span-third .homeWorkbenchChartCardHeader span {
  display: none;
}

.homeWorkbenchChartCard.span-third .homeWorkbenchChartCardHeader em {
  font-size: 10px;
}

.homeWorkbenchChartCanvas {
  min-width: 0;
  min-height: 178px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-canvas);
  padding: 6px 8px 2px;
}

.homeWorkbenchChartCard.span-third .homeWorkbenchChartCanvas {
  min-height: 146px;
  padding: 4px 5px 1px;
}

.compassChartState {
  height: 100%;
  min-height: 120px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 850;
}

.homeWorkbenchTemplateOption {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 10px;
}

.homeWorkbenchTemplateOption.isActive {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.homeWorkbenchTemplateOption label {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px 26px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.homeWorkbenchTemplateOption label > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-panel);
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
}

.homeWorkbenchTemplateOption strong,
.homeWorkbenchMetricOption strong,
.homeWorkbenchInsightOption strong,
.homeWorkbenchChartOption strong,
.homeWorkbenchAlertOption strong {
  display: block;
  overflow: hidden;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchTemplateOption p,
.homeWorkbenchMetricOption p,
.homeWorkbenchInsightOption p,
.homeWorkbenchChartOption p,
.homeWorkbenchAlertOption p {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchTemplateOption em {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchTemplateOption b {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-panel));
  color: var(--primary);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 4px 7px;
}

.homeWorkbenchTemplateOption button {
  min-height: 30px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel);
  color: var(--text-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 0 9px;
}

.homeWorkbenchTemplateForm,
.homeWorkbenchLibraryBlock {
  gap: 14px;
}

.homeWorkbenchFormGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 10px;
}

.homeWorkbenchFormField {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.homeWorkbenchFormField.wide {
  grid-column: 1 / -1;
}

.homeWorkbenchFormField span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
}

.homeWorkbenchFormField input,
.homeWorkbenchFormField textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  padding: 9px 10px;
}

.homeWorkbenchFormField textarea {
  min-height: 76px;
  resize: vertical;
}

.homeWorkbenchMetricGroup {
  display: grid;
  gap: 8px;
}

.homeWorkbenchTemplateForm .homeWorkbenchMetricLibrary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.homeWorkbenchInsightLibrary,
.homeWorkbenchChartLibrary,
.homeWorkbenchAlertEditor {
  display: grid;
  gap: 8px;
}

.homeWorkbenchInsightLibrary,
.homeWorkbenchChartLibrary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.homeWorkbenchContentOrderList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.homeWorkbenchContentOrderItem {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 88%, transparent);
  padding: 8px;
}

.homeWorkbenchContentOrderItem > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
}

.homeWorkbenchContentOrderItem > div {
  min-width: 0;
}

.homeWorkbenchContentOrderItem strong,
.homeWorkbenchContentOrderItem p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchContentOrderItem strong {
  display: block;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 950;
}

.homeWorkbenchContentOrderItem p,
.homeWorkbenchContentOrderEmpty {
  margin: 2px 0 0;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 780;
}

.homeWorkbenchContentOrderItem > div:last-child {
  display: flex;
  gap: 4px;
}

.homeWorkbenchContentOrderItem button {
  min-width: 28px;
  height: 26px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel);
  color: var(--text-2);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.homeWorkbenchContentOrderItem button:not(:disabled):hover {
  border-color: var(--primary-border);
  color: var(--primary);
}

.homeWorkbenchContentOrderItem button:disabled {
  cursor: default;
  opacity: 0.42;
}

.homeWorkbenchContentOrderEmpty {
  grid-column: 1 / -1;
  border: 1px dashed var(--line-dark);
  border-radius: 8px;
  padding: 10px;
}

.homeWorkbenchInsightOption,
.homeWorkbenchChartOption,
.homeWorkbenchAlertOption {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  cursor: pointer;
  padding: 10px;
}

.homeWorkbenchChartOption {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}

.homeWorkbenchInsightOption {
  grid-template-columns: 18px 18px minmax(0, 1fr) auto;
}

.homeWorkbenchInsightOption > span {
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 950;
  padding: 4px 7px;
  white-space: nowrap;
}

.homeWorkbenchChartOption label {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.homeWorkbenchAlertOption {
  grid-template-columns: 18px 8px minmax(0, 1fr);
}

.homeWorkbenchInsightOption:has(input:checked),
.homeWorkbenchInsightOption.isActive,
.homeWorkbenchChartOption:has(input:checked),
.homeWorkbenchAlertOption:has(input:checked) {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.homeWorkbenchChartOption.isActive {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.homeWorkbenchChartOption label > span {
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 950;
  padding: 4px 7px;
  text-transform: uppercase;
}

.homeWorkbenchChartLayoutControl {
  position: relative;
  isolation: isolate;
  width: 152px;
  height: 25px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-self: end;
  overflow: hidden;
  border: 1px solid rgba(219, 39, 119, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
  padding: 2px;
}

.homeWorkbenchChartLayoutControl::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / 4);
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 4px 10px rgba(219, 39, 119, 0.2);
  transform: translateX(0);
  transition: transform 0.18s ease;
}

.homeWorkbenchChartLayoutControl.value-two-thirds::before {
  transform: translateX(100%);
}

.homeWorkbenchChartLayoutControl.value-half::before {
  transform: translateX(200%);
}

.homeWorkbenchChartLayoutControl.value-third::before {
  transform: translateX(300%);
}

.homeWorkbenchChartLayoutControl button {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 19px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  padding: 0;
  transition: color 0.18s ease;
}

.homeWorkbenchChartLayoutControl button.active {
  color: #ffffff;
}

.homeWorkbenchAlertOption > span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
}

.homeWorkbenchAlertOption > span.tone-danger {
  background: #ef4444;
}

.homeWorkbenchAlertOption > span.tone-success {
  background: #22c55e;
}

.homeWorkbenchAlertOption > span.tone-warning {
  background: #f59e0b;
}

.homeWorkbenchTemplateFormActions,
.homeWorkbenchResetRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.homeWorkbenchResetRow p {
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: 12px;
}

.homeWorkbenchTemplatePreviewCard {
  width: var(--home-workbench-template-preview-width);
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  display: grid;
  gap: 14px;
  padding: 22px 28px;
  transform-origin: top left;
  zoom: var(--home-workbench-template-preview-scale);
}

.homeWorkbenchTemplatePreviewCard > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.homeWorkbenchTemplatePreviewCard > header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.homeWorkbenchTemplatePreviewCard h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 16px;
}

.homeWorkbenchTemplatePreviewCard .homeWorkbenchKpiGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.homeWorkbenchAgentMode {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}

.homeWorkbenchAgentColumn {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-workspace-shared.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy workspace shared CSS.
 *
 * Order-preserving shared workspace cards, old module hero panels, filters,
 * and transitional page primitives. Do not add new module styles here.
 */

.welcomePanel,
.moduleHeroPanel,
.usageBand {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.05)),
    var(--surface-panel);
  padding: 20px;
}

.welcomePanel > div:first-child,
.moduleHeroPanel > div:first-child,
.productDetailHero > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.welcomePanel h1,
.moduleHeroPanel h1,
.workspaceStatePanel h1 {
  margin: 0;
  color: var(--text-1);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.08;
}

.welcomePanel p,
.moduleHeroPanel p,
.usageBand p,
.workspaceStatePanel p,
.actionCard p,
.moduleEntryCard p,
.panelCard p {
  color: var(--text-2);
  line-height: 1.65;
}

.workspaceSummary,
.heroContextCard {
  width: 260px;
  flex: 0 0 auto;
  display: grid;
  gap: 7px;
  align-content: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 14px;
}

.workspaceSummary span,
.heroContextCard span,
.heroContextCard em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.workspaceSummary em {
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
}

.aiInsightBar {
  gap: 14px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  padding: 14px 16px;
}

.aiOrb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.aiInsightBar strong,
.aiInsightBar span {
  display: block;
}

.aiInsightBar strong {
  color: var(--text-1);
}

.aiInsightBar span {
  color: var(--text-2);
  font-size: 13px;
}

.aiPromptTags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.aiPromptTags span,
.usageTags span {
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--text-2);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
}

.alertStrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.alertChip {
  min-height: 38px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
}

.alertChip.red {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

.alertChip.amber {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
}

.alertChip.green {
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
}

.kpiGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.kpiCard {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  display: grid;
  align-content: space-between;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 16px;
}

.kpiCard::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--grad);
}

.kpiCard.cyan::after {
  background: linear-gradient(90deg, var(--accent), #0ea5e9);
}

.kpiCard.green::after {
  background: linear-gradient(90deg, var(--success), #22c55e);
}

.kpiCard.amber::after {
  background: linear-gradient(90deg, var(--warning), #f97316);
}

.kpiCard span,
.kpiCard strong,
.kpiCard em {
  display: block;
}

.kpiCard span {
  color: var(--text-2);
  font-size: 13px;
}

.kpiCard strong {
  margin-top: 12px;
  color: var(--text-1);
  font-size: 32px;
  line-height: 1;
}

.kpiCard em {
  margin-top: 12px;
  color: #34d399;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.dashboardGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
  gap: 16px;
}

.panelCard,
.actionCard,
.moduleEntryCard,
.workspaceStatePanel {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.panelCard {
  min-width: 0;
  padding: 16px;
}

.panelHeader {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panelHeader > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.panelHeader h2,
.usageBand h2,
.actionCard h2,
.moduleEntryCard h2,
.workspaceStatePanel h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 16px;
  line-height: 1.25;
}

.panelIcon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--primary-active-bg);
  color: #c4b5fd;
  font-weight: 900;
}

.productTable {
  display: grid;
  gap: 2px;
}

.productRow {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 90px minmax(130px, 0.5fr) 86px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.productRow.tableHead {
  min-height: 34px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.productNameCell {
  gap: 10px;
  min-width: 0;
}

.rankCell {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  font-weight: 900;
}

.productNameCell strong,
.productNameCell em {
  display: block;
}

.productNameCell strong {
  overflow: hidden;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.productNameCell em {
  margin-top: 4px;
  color: var(--text-3);
  font-style: normal;
}

.growthUp {
  color: #34d399;
  font-weight: 900;
}

.scoreCell {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.scoreCell::before {
  content: '';
  grid-column: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-panel-strong);
}

.scoreCell span {
  grid-column: 1;
  grid-row: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--grad);
}

.scoreCell em {
  grid-column: 2;
  grid-row: 1;
  color: var(--text-2);
  font-style: normal;
  font-weight: 900;
}

.statusPill {
  border: 1px solid var(--line-dark);
  color: var(--text-2);
  padding: 0 8px;
}

.statusPill.purple {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.statusPill.cyan {
  border-color: rgba(6, 182, 212, 0.32);
  background: rgba(6, 182, 212, 0.11);
  color: #67e8f9;
}

.statusPill.green {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
}

.statusPill.amber {
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
}

.statusPill.red {
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

.sidePanels {
  display: grid;
  gap: 16px;
}

.alertList {
  display: grid;
}

.alertItem {
  gap: 10px;
  border-bottom: 1px solid var(--row-line);
  padding: 12px 0;
}

.alertItem:last-child {
  border-bottom: 0;
}

.alertItem > span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
}

.alertItem.danger > span {
  background: var(--danger);
}

.alertItem.warning > span {
  background: var(--warning);
}

.alertItem.success > span {
  background: var(--success);
}

.alertItem strong,
.alertItem p,
.alertItem em {
  display: block;
}

.alertItem strong {
  color: var(--text-1);
  font-size: 13px;
}

.alertItem p {
  margin: 4px 0;
  font-size: 12px;
}

.alertItem em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
}

.chatMini {
  display: grid;
  gap: 10px;
}

.chatLine {
  width: fit-content;
  max-width: 92%;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.55;
}

.chatLine.user {
  justify-self: end;
  background: var(--primary-glow);
  color: var(--text-1);
}

.chatLine.ai {
  justify-self: start;
  background: var(--surface-panel-hover);
  color: var(--text-2);
}

.moduleEntryGrid,
.moduleActionGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.moduleEntryCard,
.actionCard {
  min-height: 136px;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px;
  text-decoration: none;
}

.moduleEntryCard:hover {
  border-color: var(--primary-border-strong);
  background: var(--primary-soft);
}

.moduleEntryCard.disabled {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(245, 158, 11, 0.065);
  color: var(--text-2);
}

.moduleEntryCard.disabled:hover {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(245, 158, 11, 0.065);
}

.moduleEntryCard p,
.actionCard p {
  margin: 0;
  font-size: 13px;
}

.usageBand {
  align-items: center;
}

.usageBand h2 {
  margin-top: 10px;
}

.usageBand p {
  margin: 8px 0 0;
}

.usageTags {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.moduleHeroPanel {
  align-items: stretch;
}

.placeholderKpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workspaceStatePanel {
  padding: 22px;
}

.workspaceStatePanel.compact {
  display: grid;
  gap: 10px;
}

.workspaceStatePanel.state-loading {
  border-color: rgba(6, 182, 212, 0.28);
  background: rgba(6, 182, 212, 0.07);
}

.workspaceStatePanel.state-empty {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.workspaceStatePanel.state-error,
.workspaceStatePanel.state-permission {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.07);
}

.workspaceStatePanel h1,
.workspaceStatePanel h2,
.workspaceStatePanel p {
  margin: 10px 0 0;
}

.productsPage,
.creatorsPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
}

.productHeroPanel {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(16, 185, 129, 0.06)),
    var(--surface-panel);
}

.creatorHeroPanel {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.08)),
    var(--surface-panel);
}

.productHeroTags,
.productTagList,
.productErrorMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.productHeroTags {
  margin-top: 14px;
}

.productHeroTags span,
.productTagList span,
.productErrorMeta span {
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--text-2);
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 800;
}

.productFilterPanel,
.creatorFilterPanel,
.liveHistoryFilterPanel,
.productListPanel {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.productFilterPanel,
.creatorFilterPanel,
.liveHistoryFilterPanel {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(128px, 1fr)) minmax(150px, 1fr) minmax(150px, 1.2fr) minmax(86px, 0.5fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
}

.creatorFilterPanel {
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(128px, 1fr)) minmax(86px, 0.5fr) auto;
}

.liveHistoryFilterPanel {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-lives.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy lives CSS.
 *
 * Order-preserving live search, live cards, live detail, schedule/history,
 * and warning-center styles. Do not add new rules here; put new scoped
 * live fixes in lives.css and prefer @compass/ui/shared components.
 */

.liveSearchFilterPanel {
  min-width: 0;
  display: grid;
  gap: 18px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 18px 22px;
}

.liveSearchMainSearch {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-dark);
}

.liveSearchSearchBox {
  min-width: 240px;
  max-width: 720px;
  flex: 1 1 520px;
  display: flex;
  align-items: center;
  min-height: 48px;
  overflow: hidden;
  border: 1px solid var(--primary-border-strong);
  border-radius: 999px;
  background: var(--control-bg);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.liveSearchSearchBox:focus-within {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.liveSearchSearchBox input {
  width: 100%;
  min-height: 46px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-1);
  padding: 0 18px;
  font-size: 14px;
  font-weight: 800;
}

.liveSearchSearchBox input::placeholder {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  opacity: 0.68;
}

.liveSearchSearchButton,
.liveSearchResetButton,
.liveSearchToolbarActions .productRetryButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.liveSearchSearchButton,
.liveSearchResetButton {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.liveSearchSearchButton {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 12px 24px var(--primary-glow);
}

.liveSearchResetButton {
  border-color: var(--line-dark);
  background: var(--tag-bg);
  color: var(--text-2);
}

.liveSearchFilterRow {
  min-width: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.liveSearchFilterLabel {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 900;
  line-height: 32px;
  white-space: nowrap;
}

.liveSearchChipScroller,
.liveSearchInlineSelects,
.liveSearchPagerControls {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.liveSearchChip {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.liveSearchChip:hover {
  background: var(--tag-bg);
  color: var(--text-1);
}

.liveSearchChip.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 20px var(--primary-glow);
}

.liveSearchStaticFilter,
.liveSearchFilterInput {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-1);
  padding: 0 12px;
  white-space: nowrap;
}

.liveSearchStaticFilter > span,
.liveSearchFilterInput > span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
}

.liveSearchStaticFilter > strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

/* 仅看我关注 / 全部直播 toggle on the live monitor page (Phase 1 watchlist). */
.liveMonitorWatchToggle {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-2);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms, color 120ms;
}

.liveMonitorWatchToggle:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.liveMonitorWatchToggle.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.liveMonitorWatchToggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.liveAlertFilterGroup {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--control-bg);
  padding: 2px;
  white-space: nowrap;
}

.liveAlertFilterButton {
  min-height: 28px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.liveAlertFilterButton:hover:not(:disabled) {
  color: var(--primary);
}

.liveAlertFilterButton.active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.liveAlertFilterButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
 * Phase 3a/3b — Live monitor card dashboard (watched_only view).
 * Each card surfaces a hero number (online_users), a sparkline,
 * and three supporting metrics. Click the card → opens detail.
 * Auto-refresh polls every 30s while the tab is visible.
 * ============================================================ */
.liveCardToolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 4px 12px;
}

.liveCardMetricPills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.liveCardMetricPill {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-dark);
  background: var(--control-bg);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}

.liveCardMetricPill:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.liveCardMetricPill.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.liveCardRefreshHint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-3);
}

.liveCardRefreshHint > em {
  font-style: normal;
  color: var(--text-2);
}

.liveCardRefreshDot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
  animation: liveCardPulseAnim 1.6s ease-in-out infinite;
}

.liveStatusDot {
  width: 0.5em;
  height: 0.5em;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
}

.liveCardGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.liveCard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--row-line);
  border-radius: 12px;
  background: var(--surface-panel);
  cursor: pointer;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
  outline: none;
}

.liveCard:hover,
.liveCard:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 18%, transparent);
  transform: translateY(-1px);
}

.liveCardHeader {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
}

.liveCardCover {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.liveCardCover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.liveCardTitle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.liveCardTitle > strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.liveCardTitle > em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.liveCardHeaderActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.liveCardInlineActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: -4px;
}

.liveCardTextButton {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, #facc15 42%, var(--line-dark));
  border-radius: 8px;
  background: color-mix(in srgb, #facc15 18%, transparent);
  color: #854d0e;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.liveCardTextButton:hover {
  background: color-mix(in srgb, #facc15 26%, transparent);
}

.liveCardIconButton {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  background: var(--control-bg);
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The ⚡ alert button keeps the default neutral state — it's a one-shot
 * action, not a stateful toggle, so no .active variant. */

.liveCardIconButton.active {
  /* Active state is reserved for the ★ watch toggle when watching. */
  border-color: #d97706;
  background: color-mix(in srgb, #d97706 16%, transparent);
  color: #d97706;
}

/* ⚡ alerted state: filled bright yellow. Clickable to cancel; hover dims
 * slightly so it reads as "click to release the lock". */
.liveCardIconButton.alerted {
  border-color: #ca8a04;
  background: color-mix(in srgb, #facc15 32%, transparent);
  color: #854d0e;
}

.liveCardIconButton:disabled {
  opacity: 0.6;
  cursor: progress;
}

.liveCardHero {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.liveCardHero > strong {
  color: var(--text-1);
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

.liveCardHeroMeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.liveCardHeroMeta > em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.liveCardPulse {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.liveCardPulse.delayed {
  color: #d97706;
}

.liveCardPulse.unavailable {
  color: var(--text-3);
}

@keyframes liveCardPulseAnim {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.liveCardSparklineWrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.liveCardSparkline {
  width: 100%;
  height: 52px;
  display: block;
}

.liveCardSparkline polyline.line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.liveCardSparkline polygon.fill {
  fill: color-mix(in srgb, var(--primary) 14%, transparent);
  stroke: none;
}

.liveCardSparkline circle.dot {
  fill: var(--primary);
  stroke: var(--surface-panel);
  stroke-width: 1.5;
}

.liveCardSparkline.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  border: 1px dashed var(--row-line);
  border-radius: 6px;
  background: transparent;
}

.liveCardSparklineMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}

.liveCardSparklineMeta > em {
  color: var(--text-3);
  font-style: normal;
  font-weight: 700;
}

.liveCardTrend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 900;
  letter-spacing: 0.3px;
}

.liveCardTrend.up {
  color: #16a34a;
}

.liveCardTrend.down {
  color: #dc2626;
}

.liveCardTrend.flat {
  color: var(--text-3);
}

.liveCardStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--row-line);
}

.liveCardStats > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.liveCardStats > span > strong {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 900;
}

.liveCardStats > span > em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

/* Phase 3d: 卡片网格下方的 "我关注的实时大盘 / TOP / 提醒" 三段。
 * 整体跟 liveCard 风格一致：圆角 12px、面板色背景、轻边框。 */
.watchedInsightStack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.watchedDashboard,
.watchedTopList,
.watchedAttention {
  border: 1px solid var(--row-line);
  border-radius: 12px;
  background: var(--surface-panel);
  padding: 16px 18px;
}

.watchedDashboardHeader,
.watchedTopHeader,
.watchedAttentionHeader {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.watchedDashboardHeader > strong,
.watchedTopHeader > strong,
.watchedAttentionHeader > strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
}

.watchedDashboardHeader > em,
.watchedTopHeader > em,
.watchedAttentionHeader > em {
  color: var(--text-3);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.watchedDashboardStats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 880px) {
  .watchedDashboardStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.watchedDashboardStat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.watchedDashboardStat > strong {
  color: var(--text-1);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.1;
}

.watchedDashboardStat > em {
  color: var(--text-3);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

/* 高亮 "预警进行中" 当 > 0：黄底，提醒用户去查通知中心 */
.watchedDashboardStat.alerted {
  background: color-mix(in srgb, #facc15 22%, transparent);
}

.watchedDashboardStat.alerted > strong {
  color: #854d0e;
}

.watchedTopRows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.watchedTopRow {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--control-bg);
  cursor: pointer;
  outline: none;
  transition: background 120ms, transform 120ms;
  /* 现在 .watchedTopRow 用 <button>，重置默认按钮样式 */
  width: 100%;
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
}

.watchedTopRow:hover,
.watchedTopRow:focus-visible {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  transform: translateX(2px);
}

.watchedTopRank {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-panel);
  border: 1px solid var(--line-dark);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 第 1 名给个金色徽章感。<button> 在 <li> 里，所以选择器从 :first-child
 * 移到对应的 <li>:first-child 下面。 */
.watchedTopRows > li:first-child .watchedTopRank {
  background: color-mix(in srgb, #facc15 26%, transparent);
  border-color: #ca8a04;
  color: #854d0e;
}

.watchedTopBody {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.watchedTopBody > strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.watchedTopBar {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-3) 18%, transparent);
  overflow: hidden;
}

.watchedTopBar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  transition: width 220ms ease-out;
}

.watchedTopValue {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 900;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.watchedTopEmpty {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 12px;
  border: 1px dashed var(--row-line);
  border-radius: 8px;
  text-align: center;
}

.watchedAttentionGroups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.watchedAttentionGroup {
  border-radius: 10px;
  border: 1px solid var(--row-line);
  background: var(--control-bg);
  padding: 12px 14px;
}

.watchedAttentionGroupHead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.watchedAttentionGroupHead > strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
}

.watchedAttentionGroupHead > em {
  color: var(--text-3);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.watchedAttentionDot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.watchedAttentionGroup.delayed .watchedAttentionDot {
  color: #d97706;
}

.watchedAttentionGroup.delayed {
  border-left: 3px solid #d97706;
}

.watchedAttentionGroup.ended .watchedAttentionDot {
  color: var(--text-3);
}

.watchedAttentionGroup.ended {
  border-left: 3px solid var(--text-3);
}

.watchedAttentionGroup.alerted .watchedAttentionDot {
  color: #ca8a04;
}

.watchedAttentionGroup.alerted {
  border-left: 3px solid #ca8a04;
}

.watchedAttentionRows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.watchedAttentionRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 6px;
}

.watchedAttentionRow:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.watchedAttentionLink {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.watchedAttentionLink:hover {
  color: var(--primary);
  text-decoration: underline;
}

.watchedAttentionAction {
  flex-shrink: 0;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line-dark);
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: border-color 120ms, color 120ms, background 120ms;
}

.watchedAttentionAction:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.watchedAttentionAction:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* 表格视图行内的数据新鲜度小标。卡片视图有 .liveCardPulse 占位，
 * 表格视图原本没有；这里给一个紧凑版让 fresh/delayed/unavailable 一眼
 * 可辨，颜色与卡片版对齐（绿/橙/灰）。 */
.liveTableFreshness {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.4;
}

.liveTableFreshness.fresh {
  color: #16a34a;
}

.liveTableFreshness.delayed {
  color: #d97706;
}

.liveTableFreshness.unavailable {
  color: #b91c1c;
}

/* Phase 3d 表格视图下方 4 块汇总。沿用 watchedDashboard 设计变量与
 * 排版，但只统计 status=live 的场次（与卡片视图区分）。 */
.liveSnapshotStack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.liveSnapshotCard {
  border: 1px solid var(--row-line);
  border-radius: 12px;
  background: var(--surface-panel);
  padding: 16px 18px;
}

.liveSnapshotHeader {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.liveSnapshotHeader > strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
}

.liveSnapshotHeader > em {
  color: var(--text-3);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.liveSnapshotStatsFour {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 880px) {
  .liveSnapshotStatsFour {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.liveSnapshotStat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.liveSnapshotStat > strong {
  color: var(--text-1);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.1;
}

.liveSnapshotStat > em {
  color: var(--text-3);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.liveSnapshotEmpty {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 12px;
  border: 1px dashed var(--row-line);
  border-radius: 8px;
  text-align: center;
}

.liveWarningJumpButton {
  min-height: 28px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 120ms, background 120ms;
}

.liveWarningJumpButton:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}

.liveWarningCenter,
.liveWarningTrendCard,
.liveWarningConclusionCard,
.liveWarningConditionCard,
.liveWarningFlowSection,
.liveWarningProcessCard {
  border: 1px solid var(--row-line);
  border-radius: 12px;
  background: var(--surface-panel);
}

.liveWarningCenter {
  padding: 16px 18px;
}

.liveWarningHeader,
.liveWarningFlowSection > header,
.liveWarningProcessCard > header,
.liveWarningTrendHeader,
.liveWarningConditionHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.liveWarningHeader {
  margin-bottom: 14px;
}

.liveWarningHeader > div,
.liveWarningTrendHeader > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.liveWarningHeader strong,
.liveWarningFlowSection h4,
.liveWarningProcessCard h4,
.liveWarningTrendHeader h4,
.liveWarningConditionCard h4,
.liveWarningDetailGrid h4,
.liveWarningActionCard h4 {
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 950;
}

.liveWarningHeader em,
.liveWarningFlowSection em,
.liveWarningProcessCard > header em,
.liveWarningTrendHeader em,
.liveWarningConditionHeader em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.45;
}

.liveWarningSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.liveWarningSummary > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-radius: 10px;
  background: var(--control-bg);
  padding: 10px 12px;
}

.liveWarningSummary strong {
  color: var(--text-1);
  font-size: 22px;
  font-weight: 950;
}

.liveWarningSummary em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.liveWarningSummary .critical strong,
.liveWarningSeverity.critical {
  color: #b91c1c;
}

.liveWarningSummary .warning strong,
.liveWarningSeverity.warning {
  color: #ca8a04;
}

.liveWarningSummary .info strong,
.liveWarningSeverity.info {
  color: var(--primary);
}

.liveWarningLedger {
  overflow: auto;
  border: 1px solid var(--row-line);
  border-radius: 10px;
}

.liveWarningLedgerRow {
  min-width: 920px;
  display: grid;
  grid-template-columns: 116px 1.5fr 1.35fr 150px 110px 138px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--row-line);
  padding: 12px;
}

.liveWarningLedgerRow:last-child {
  border-bottom: 0;
}

.liveWarningLedgerRow.head {
  background: var(--control-bg);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.liveWarningSeverity,
.liveWarningStatusPill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  border-radius: 999px;
  background: var(--control-bg);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.liveWarningLedgerTitle,
.liveWarningLedgerRule {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.liveWarningLedgerTitle strong,
.liveWarningLedgerRule strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveWarningLedgerTitle em,
.liveWarningLedgerRule em,
.liveWarningLedgerRow > span {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.liveWarningLedgerActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.liveWarningDetailPanel {
  display: grid;
  gap: 14px;
}

.liveWarningDetailHero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 14px;
  border: 1px solid var(--row-line);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  background: var(--control-bg);
  padding: 14px;
}

.liveWarningDetailHero.critical {
  border-left-color: #b91c1c;
}

.liveWarningDetailHero.warning {
  border-left-color: #ca8a04;
}

.liveWarningDetailHero > div {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.liveWarningDetailHero span,
.liveWarningTrendHeader > span {
  width: max-content;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 950;
}

.liveWarningDetailHero h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  line-height: 1.3;
}

.liveWarningDetailHero p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.65;
}

.liveWarningDetailHero dl,
.liveWarningDetailGrid dl {
  margin: 0;
  display: grid;
  gap: 9px;
}

.liveWarningDetailHero dl > div,
.liveWarningDetailGrid dl > div {
  display: grid;
  gap: 3px;
}

.liveWarningDetailHero dt,
.liveWarningDetailHero dd,
.liveWarningDetailGrid dt,
.liveWarningDetailGrid dd {
  margin: 0;
}

.liveWarningDetailHero dt,
.liveWarningDetailGrid dt {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.liveWarningDetailHero dd,
.liveWarningDetailGrid dd {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.liveWarningConclusionCard,
.liveWarningConditionCard,
.liveWarningFlowSection,
.liveWarningTrendCard,
.liveWarningProcessCard {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.liveWarningConclusionCard {
  grid-template-columns: 156px minmax(0, 1fr);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--row-line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 42%),
    var(--control-bg);
}

.liveWarningConclusionCard > div,
.liveWarningConditionGrid article,
.liveWarningDetailGrid article {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.liveWarningConclusionCard strong {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.45;
}

.liveWarningConclusionCard p,
.liveWarningActionCard li {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.6;
}

.liveWarningDetailMetricGrid,
.liveWarningConditionGrid,
.liveWarningDetailGrid,
.liveWarningImpactList,
.liveWarningProcessCard > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.liveWarningConditionGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.liveWarningDetailGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.liveWarningDetailMetricGrid > span,
.liveWarningImpactList > span,
.liveWarningProcessCard > div > span,
.liveWarningConditionGrid article,
.liveWarningDetailGrid article {
  border: 1px solid var(--row-line);
  border-radius: 10px;
  background: var(--control-bg);
  padding: 11px;
}

.liveWarningDetailMetricGrid em,
.liveWarningImpactList em,
.liveWarningProcessCard em,
.liveWarningConditionGrid span {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.liveWarningDetailMetricGrid strong,
.liveWarningImpactList strong,
.liveWarningProcessCard strong,
.liveWarningConditionGrid strong {
  display: block;
  margin-top: 4px;
  color: var(--text-1);
  font-size: 16px;
  font-weight: 950;
}

.liveWarningDetailMetricGrid b,
.liveWarningImpactList b {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
}

.liveWarningConditionGrid dl {
  margin: 8px 0 0;
  display: grid;
  gap: 6px;
}

.liveWarningConditionGrid dl > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.liveWarningConditionGrid dt,
.liveWarningConditionGrid dd {
  margin: 0;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
}

.liveWarningMiniTrendGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.liveWarningMiniTrendGrid article {
  display: grid;
  gap: 8px;
  border: 1px solid var(--row-line);
  border-radius: 10px;
  background: var(--control-bg);
  padding: 10px;
}

.liveWarningMiniTrendHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.liveWarningMiniTrendHead span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
}

.liveWarningMiniTrendHead i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.liveWarningMiniTrendHead strong {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 950;
}

.liveWarningMiniTrendGrid svg {
  width: 100%;
  height: 86px;
  display: block;
  overflow: visible;
}

.liveWarningMiniTrendGrid .axis {
  stroke: var(--row-line);
  stroke-width: 1;
}

.liveWarningMiniTrendGrid .trigger {
  stroke: #b91c1c;
  stroke-dasharray: 4 5;
  stroke-width: 1.5;
  opacity: 0.75;
}

.liveWarningMiniTrendMeta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 6px;
}

.liveWarningMiniTrendMeta span {
  overflow: hidden;
  border-radius: 7px;
  background: var(--control-bg);
  color: var(--text-2);
  padding: 5px 6px;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveWarningMiniTrendGrid article > em {
  display: block;
  margin-top: 7px;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.liveWarningTrendAxisNote {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.liveWarningTrendAxisNote span {
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 850;
}

.liveWarningActionCard ol {
  margin: 0;
  padding-left: 18px;
}

.liveWarningActionLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.liveSelectedDetail {
  display: grid;
  gap: 12px;
}

.liveSelectedDetailHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px 16px;
}

.liveSelectedDetailHeader > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.liveSelectedDetailHeader strong {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 950;
}

.liveSelectedDetailHeader em {
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveSelectedDetailHeader > span {
  flex: 0 0 auto;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
}

/* 健康度比例条 + 图例 + 延迟列表 */
.liveDataHealth.has-issue {
  border-left: 3px solid #d97706;
}

.liveHealthBar {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text-3) 14%, transparent);
}

.liveHealthBar > .seg {
  display: block;
  height: 100%;
}

.liveHealthBar > .seg.fresh {
  background: #16a34a;
}

.liveHealthBar > .seg.delayed {
  background: #d97706;
}

.liveHealthBar > .seg.unavailable {
  background: var(--text-3);
}

.liveHealthLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-2);
}

.liveHealthLegend > .legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.liveHealthLegend > .legend.fresh {
  color: #16a34a;
}

.liveHealthLegend > .legend.delayed {
  color: #d97706;
}

.liveHealthLegend > .legend.unavailable {
  color: var(--text-3);
}

.liveHealthDelayedList {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.liveHealthDelayedList > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, #d97706 6%, transparent);
}

.liveHealthDelayedList > li > em {
  color: var(--text-3);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

/* 新开播提醒 */
.liveNewlyStarted {
  border-left: 3px solid var(--primary);
}

.liveNewlyStartedRows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.liveNewlyStartedRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 6px;
}

.liveNewlyStartedRow:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.liveNewlyStartedBody {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.liveNewlyStartedBody > em {
  color: var(--text-3);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

/* 搜索页 4 块汇总（类目分布 / GMV 榜 / 达人榜 / 时段热力）。
 * 复用 liveSnapshotCard 容器风格，自身只补内部布局。 */
.searchInsightStack {
  /* 容器样式继承自 liveSnapshotStack；这里仅作语义化锚点 */
}

/* 共用：列容器小标题 */
.searchDistColumn > h4,
.searchEntityColumn > h4 {
  margin: 0 0 8px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.4px;
}

.searchDistEmpty {
  display: block;
  color: var(--text-3);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  padding: 8px;
  border: 1px dashed var(--row-line);
  border-radius: 6px;
  text-align: center;
}

/* 类目 & 地区分布 */
.searchDistGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 720px) {
  .searchDistGrid {
    grid-template-columns: 1fr;
  }
}

.searchDistColumn {
  display: flex;
  flex-direction: column;
}

.searchDistRow {
  display: grid;
  grid-template-columns: minmax(72px, 30%) 1fr 36px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 12px;
  font-weight: 800;
}

.searchDistRow > span {
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.searchDistRow > strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.searchDistBar {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-3) 14%, transparent);
  overflow: hidden;
}

.searchDistBar > span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 220ms ease-out;
}

.searchDistBar.accent > span {
  background: var(--accent, #06b6d4);
}

/* 带货 GMV 榜 TOP 10 */
.searchGmvRows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.searchGmvRow {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--control-bg);
}

.searchGmvRow:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.searchGmvRank {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-panel);
  border: 1px solid var(--line-dark);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.searchGmvRank.first {
  background: color-mix(in srgb, #facc15 26%, transparent);
  border-color: #ca8a04;
  color: #854d0e;
}

.searchGmvBody {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.searchGmvTitle {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.searchGmvTitle:hover {
  color: var(--primary);
  text-decoration: underline;
}

.searchGmvBody > em {
  color: var(--text-3);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.searchGmvValue {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 900;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* 达人 / 店铺 TOP 5 */
.searchEntityGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 720px) {
  .searchEntityGrid {
    grid-template-columns: 1fr;
  }
}

.searchEntityColumn > ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.searchEntityColumn > ol > li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
}

.searchEntityColumn > ol > li:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.searchEntityRank {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.searchEntityLink {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.searchEntityLink:hover {
  color: var(--primary);
  text-decoration: underline;
}

.searchEntityColumn > ol > li > em {
  color: var(--text-3);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* 24 小时开播热力 */
.searchHourHeat {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 4px;
  align-items: end;
  height: 96px;
  padding-bottom: 18px;
  position: relative;
}

.searchHourCol {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-3) 10%, transparent);
  overflow: visible;
}

.searchHourCol > span {
  display: block;
  width: 100%;
  background: var(--primary);
  border-radius: 4px 4px 0 0;
  min-height: 1px;
  transition: height 220ms ease-out;
}

.searchHourCol > em {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-3);
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
}

.liveSearchFilterInput > input {
  width: 108px;
  min-height: 32px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
}

.liveSearchFilterInput > input::placeholder {
  color: var(--text-3);
  font-weight: 800;
}

.liveSearchFilterInput:focus-within {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.liveSearchDropdown {
  position: relative;
  min-width: 0;
}

.liveSearchDropdownTrigger {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-1);
  padding: 0 11px 0 14px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.liveSearchDropdownTrigger span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.liveSearchDropdownTrigger strong {
  color: var(--text-1);
  font-size: 13px;
}

.liveSearchDropdownTrigger svg {
  color: var(--text-2);
}

.liveSearchInlineInput {
  min-width: 220px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-1);
  padding: 0 12px 0 14px;
}

.liveSearchInlineInput.compact {
  min-width: 178px;
}

.liveSearchInlineInput span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.liveSearchInlineInput input {
  width: 100%;
  min-width: 86px;
  min-height: 32px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
}

.liveSearchInlineInput input::placeholder {
  color: var(--text-3);
  font-weight: 800;
}

.liveSearchInlineInput:focus-within {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.liveSearchDropdown.open .liveSearchDropdownTrigger,
.liveSearchDropdownTrigger:focus-visible {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.liveSearchDropdownMenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 224px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  padding: 9px;
}

.liveSearchPagerControls .liveSearchDropdownMenu {
  top: auto;
  bottom: calc(100% + 8px);
}

.liveSearchDropdownMenu button {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

.liveSearchDropdownMenu button span {
  color: var(--text-1);
  font-weight: 900;
}

.liveSearchDropdownMenu button:hover {
  background: var(--tag-bg);
  color: var(--text-1);
}

.liveSearchDropdownMenu button.active {
  background: var(--primary-soft);
  color: var(--primary-light);
}

.liveSearchDropdownMenu button.active span {
  color: var(--primary-light);
}

.liveSearchResultPanel {
  gap: 16px;
}

.liveSearchTable .productListHead {
  color: var(--text-2);
  font-size: 13px;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.liveSearchTable .productListHead > span,
.liveSearchTable .productListHead > button {
  width: 100%;
  justify-self: center;
  text-align: center;
}

.liveSearchSortHeadingWithHelp {
  min-width: 0;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.liveSearchSortHeadingWithHelp .metricHelpLabel {
  flex: 0 0 auto;
}

.liveSearchTable .productListRow > * {
  align-self: center;
  justify-self: center;
  text-align: center;
}

.liveSearchTable .productListRow:not(.productListHead) > :first-child {
  justify-self: stretch;
  text-align: left;
}

.liveSearchTable .productListHead > :first-child {
  justify-self: stretch;
  text-align: center;
}

.liveSearchTable .liveSearchRoomCell {
  justify-self: stretch;
  text-align: left;
}

.liveSearchTable .liveSearchRoomCell .productTitleStack {
  align-items: start;
  text-align: left;
}

.liveSearchTable .productMetricCell,
.liveSearchTable .productStatusCell {
  align-items: center;
  justify-items: center;
  text-align: center;
}

.liveSearchTable .liveSearchActionCell {
  justify-content: center;
}

.liveSearchToolbarActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.liveSearchResultFilters {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  padding: 0 0 12px;
}

.liveSearchQuickRanges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.liveSearchQuickRanges button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  padding: 0 11px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.liveSearchQuickRanges button:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.liveSearchDateFields {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.liveSearchDateField {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  padding: 0 11px;
}

.liveSearchDateField > span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.liveSearchDateField > input {
  width: 164px;
  min-height: 36px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 800;
}

.liveSearchDateField > input::placeholder {
  color: var(--text-3);
  font-weight: 800;
}

.liveSearchCalendar {
  position: relative;
  display: inline-flex;
}

.liveSearchCalendarButton {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--tag-bg);
  color: var(--text-2);
}

.liveSearchCalendarButton:hover,
.liveSearchCalendar.open .liveSearchCalendarButton {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.liveSearchCalendarPanel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: 284px;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.2);
  padding: 14px;
}

.liveSearchCalendarHeader {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
}

.liveSearchCalendarHeader > button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--tag-bg);
  color: var(--text-2);
}

.liveSearchCalendarHeader > button:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.liveSearchCalendarTitle {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.liveSearchCalendarTitle label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.liveSearchCalendarTitle input {
  width: 76px;
  min-height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  outline: none;
  background: var(--control-bg);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.liveSearchCalendarTitle label input {
  width: 54px;
}

.liveSearchCalendarTitle label span {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 900;
}

.liveSearchCalendarTitle input:focus {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.liveSearchCalendarGrid button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
}

.liveSearchCalendarGrid button:hover {
  background: var(--tag-bg);
  color: var(--text-1);
}

.liveSearchCalendarGrid button.active {
  background: var(--primary);
  color: #fff;
}

.liveSearchCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.liveSearchCalendarGrid span,
.liveSearchCalendarGrid i,
.liveSearchCalendarGrid button {
  min-height: 30px;
  display: grid;
  place-items: center;
}

.liveSearchCalendarGrid span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.liveSearchDateDash {
  color: var(--text-3);
  font-weight: 900;
}

.liveSearchSortButton {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  font-weight: 900;
  text-align: center;
}

.liveSearchSortButton em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1;
}

.liveSearchSortButton.active {
  color: var(--primary-light);
}

.liveSearchSortButton.active em {
  color: var(--primary-light);
}

.liveSearchRoomCell {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.liveSearchCover {
  width: 54px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--tag-bg);
  color: var(--text-3);
}

.liveSearchCover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.liveRoomTitleLink {
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  display: block;
  color: inherit;
  text-decoration: none;
}

.liveRoomTitleLink:hover strong {
  color: var(--primary-light);
}

.liveCreatorLink {
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  display: block;
  color: inherit;
  text-decoration: none;
}

.liveCreatorLink:hover strong {
  color: var(--primary-light);
}

.liveCreatorId {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveSearchRow small {
  color: var(--text-3);
  font-size: 11px;
}

.liveSearchActionCell {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.liveSearchActionCell .productRetryButton {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.liveSearchActionCell .productRetryButton.secondary {
  border-color: var(--line-dark);
  background: var(--tag-bg);
  color: var(--text-2);
}

/* ⚡ "已预警 ✓" state on the table view — mirrors the .liveCardIconButton.alerted
 * palette so cards and table feel consistent across views. */
.productRetryButton.alerted {
  border-color: #ca8a04;
  background: color-mix(in srgb, #facc15 32%, transparent);
  color: #854d0e;
}

.productRetryButton.alerted:hover:not(:disabled) {
  background: color-mix(in srgb, #facc15 18%, transparent);
  border-color: #a16207;
}

/* +关注 / ✓已关注 pill — Phase 1 watchlist toggle. Used on search, history
 * (and any other live list row); CSS is not scoped to a single cell. */
.productRetryButton.liveWatchPill {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
}

.productRetryButton.liveWatchPill:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}

.productRetryButton.liveWatchPill.active {
  border-color: #16a34a;
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
}

.productRetryButton.liveWatchPill.active:hover:not(:disabled) {
  background: color-mix(in srgb, #16a34a 22%, transparent);
}

.productRetryButton.liveWatchPill:disabled {
  opacity: 0.6;
  cursor: progress;
}

.liveSearchTable .liveTableActionCell,
.liveTableActionCell {
  align-self: stretch;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: initial;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 100%;
  min-width: 0;
  text-align: center;
}

.liveTableActionGroup {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  white-space: nowrap;
}

.liveTableActionGroup .productRetryButton,
.liveTableActionGroup .liveWatchIconButton {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  align-self: center;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  overflow: visible;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 850;
  line-height: 32px;
  text-decoration: none;
  white-space: nowrap;
}

.liveTableActionGroup .liveWatchIconButton.active {
  border-color: #16a34a;
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
}

.liveTableActionGroup .productRetryButton:hover:not(:disabled),
.liveTableActionGroup .liveWatchIconButton:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}

.liveTableActionGroup .liveWatchIconButton.active:hover:not(:disabled) {
  background: color-mix(in srgb, #16a34a 22%, transparent);
}

.liveTableActionGroup .productRetryButton.alerted {
  border-color: #ca8a04;
  background: color-mix(in srgb, #facc15 24%, transparent);
  color: #854d0e;
}

.liveTableActionGroup .liveWarningDetailButton {
  border-color: color-mix(in srgb, #facc15 42%, var(--line-dark));
  background: color-mix(in srgb, #facc15 14%, transparent);
  color: #854d0e;
}

.liveTableActionGroup .liveWatchIconButton:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* History page nests the pill inside `.productStatusCell` (no dedicated action
 * column). Give it a little breathing room from the data-status label. */

.liveDetailPage {
  gap: 16px;
}

.liveDetailBreadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 900;
}

.liveDetailBreadcrumb a {
  color: var(--text-2);
  text-decoration: none;
}

.liveDetailBreadcrumb a:hover {
  color: var(--primary-light);
}

.liveDetailHeroGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: stretch;
}

.liveDetailHeroCard,
.liveDetailCreatorCard,
.liveDetailSection {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--card-shadow);
}

.liveDetailHeroCard {
  min-width: 0;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}

.liveDetailCover {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--tag-bg);
  color: var(--text-3);
}

.liveDetailCover.small {
  width: 120px;
  flex: 0 0 120px;
}

.liveDetailCover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.liveDetailHeroBody {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.liveDetailTitleRow {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.liveDetailTitleRow h1 {
  margin: 8px 0 0;
  color: var(--text-1);
  font-size: 22px;
  line-height: 1.25;
}

.liveDetailIconActions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

.liveDetailIconActions a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
}

.liveDetailIconActions a:hover {
  border-color: var(--primary-border);
  color: var(--primary-light);
}

/* Detail-page ★ watch toggle: visually heavier than the icon links because
 * it changes state, not just navigates. Shares the border-radius/height
 * with the other icon-action buttons so they line up. */
.liveDetailWatchButton {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms;
}

.liveDetailWatchButton > em {
  font-style: normal;
}

.liveDetailWatchButton:hover:not(:disabled) {
  border-color: var(--primary-border);
  color: var(--primary-light);
}

.liveDetailWatchButton.active {
  border-color: #d97706;
  background: color-mix(in srgb, #d97706 14%, transparent);
  color: #d97706;
}

.liveDetailWatchButton:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ⚡ 预警按钮：沿用 liveDetailWatchButton 基础态，alerted 用黄色（跟实时
 * 直播页卡片的 ⚡ 配色对齐）。 */

/* Hero 状态行：status pill + 数据新鲜度 + "X 分钟前更新" 拼一行 */
.liveDetailStatusRow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.liveDetailFreshness {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.3px;
}

.liveDetailFreshness.fresh {
  color: #16a34a;
}

.liveDetailFreshness.delayed {
  color: #d97706;
}

.liveDetailFreshness.unavailable {
  color: #b91c1c;
}

.liveDetailUpdatedAt {
  color: var(--text-3);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

/* 相似直播 tab 切换 */
.liveDetailSimilarTabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: var(--control-bg);
}

.liveDetailSimilarTabs > button {
  min-height: 28px;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  border-radius: 6px;
  transition: background 120ms, color 120ms;
}

.liveDetailSimilarTabs > button:hover:not(:disabled) {
  color: var(--primary);
}

.liveDetailSimilarTabs > button.active {
  background: var(--surface-panel);
  color: var(--text-1);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

.liveDetailSimilarTabs > button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.liveDetailSimilarFooter {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.liveDetailSimilarShuffle {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--line-dark-strong);
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.liveDetailSimilarShuffle:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 50%, var(--line-dark-strong));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-panel));
}

/* AI 诊断 */
.liveDetailDiagnosisBody {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.liveDetailDiagnosisHead {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.liveDetailDiagnosisHead > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.liveDetailDiagnosisHead > div > strong {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
}

.liveDetailDiagnosisOverall {
  color: var(--text-1);
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -0.5px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.liveDetailDiagnosisHead > em {
  color: var(--text-3);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  margin-left: auto;
}

.liveDetailDiagnosisGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 720px) {
  .liveDetailDiagnosisGrid {
    grid-template-columns: 1fr;
  }
}

.liveDetailDiagnosisDim {
  border: 1px solid var(--row-line);
  border-radius: 10px;
  background: var(--surface-panel);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.liveDetailDiagnosisDim > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.liveDetailDiagnosisDim > header > strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
}

.liveDetailDiagnosisScore {
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.liveDetailDiagnosisSummary {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  margin: 0;
  line-height: 1.5;
}

.liveDetailDiagnosisBullets {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.liveDetailDiagnosisBullets > strong {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.4px;
}

.liveDetailDiagnosisBullets.up > strong {
  color: #16a34a;
}

.liveDetailDiagnosisBullets.down > strong {
  color: #b91c1c;
}

.liveDetailDiagnosisBullets.info > strong {
  color: var(--primary);
}

.liveDetailDiagnosisBullets > ul {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}

.liveDetailInfoGrid {
  display: grid;
  gap: 8px;
  margin: 0;
}

.liveDetailInfoGrid div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.liveDetailInfoGrid dt {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 900;
}

.liveDetailInfoGrid dd {
  min-width: 0;
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
}

.liveDetailSoftTag {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-light);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
}

.liveDetailHeroMetrics {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) minmax(160px, 0.76fr) minmax(260px, 1fr);
  gap: 12px;
  border-top: 1px solid var(--row-line);
  padding-top: 12px;
}

.liveDetailHeroMetrics > span,
.liveDetailMetricCard,
.liveDetailCreatorStats,
.liveDetailTrendChart,
.liveDetailSimilarCard {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-panel-hover);
}

.liveDetailHeroMetrics > span {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 14px;
}

.liveDetailHeroMetrics strong,
.liveDetailMetricCard strong {
  color: var(--text-1);
  font-size: 24px;
  line-height: 1.1;
}

.liveDetailHeroMetrics em,
.liveDetailMetricCard em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.liveDetailTopProducts strong {
  font-size: 14px;
}

.liveDetailTopProducts em {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.liveDetailTopProducts span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveDetailTopProducts b {
  color: var(--text-1);
  font-size: 12px;
}

.liveDetailCreatorCard {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
  padding: 24px 16px;
  text-align: center;
}

.liveDetailCreatorCard h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
}

.liveDetailCreatorCard p {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
}

.liveDetailAvatar {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--primary-border);
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-light);
  font-size: 28px;
  font-weight: 950;
}

.liveDetailAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.liveDetailCreatorStats {
  width: 100%;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.liveDetailCreatorStats span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.liveDetailCreatorStats em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: left;
}

.liveDetailCreatorStats strong {
  color: var(--text-1);
  font-size: 15px;
}

.liveDetailStickyHeader {
  position: fixed;
  top: 60px;
  left: 264px;
  right: 24px;
  z-index: 30;
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 96%, transparent);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-18px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.liveDetailStickyHeader.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

[data-theme='dark'] .liveDetailStickyHeader {
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
}

.liveDetailStickySummary {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 8px;
}

.liveDetailStickyThumb {
  width: 58px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--tag-bg);
  color: var(--text-3);
}

.liveDetailStickyThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.liveDetailStickyTitle {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.liveDetailStickyTitle > strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 18px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveDetailStickyMeta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 900;
}

.liveDetailStickyMeta b {
  color: var(--text-1);
  font-weight: 950;
}

.liveDetailStickyActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.liveDetailStickyActions a {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
}

.liveDetailStickyActions a:hover {
  border-color: var(--primary-border);
  color: var(--primary-light);
}

.liveDetailTabs {
  display: flex;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid var(--line-dark);
  border-top: 1px solid var(--row-line);
  padding: 0 16px;
}

.liveDetailTabs a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 3px solid transparent;
  color: var(--text-2);
  font-weight: 950;
  text-decoration: none;
}

.liveDetailTabs a:hover {
  border-bottom-color: var(--primary);
  color: var(--text-1);
}

.liveDetailInlineTabs {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--card-shadow);
}

.liveDetailSection {
  scroll-margin-top: 132px;
  display: grid;
  gap: 16px;
  padding: 16px;
}

.liveDetailSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--row-line);
  padding-bottom: 12px;
}

.liveDetailSectionHeader h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 22px;
}

.liveDetailSectionHeader p {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
}

.liveDetailSectionActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.liveDetailSectionActions .productRetryButton {
  gap: 4px;
  white-space: nowrap;
}

.liveDetailMetricGroups {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.liveDetailMetricCard {
  min-height: 118px;
  display: grid;
  align-content: space-between;
  gap: 12px;
  padding: 16px;
}

.liveDetailMetricCard span {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 950;
}

.liveDetailTrendLegend {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 900;
}

.liveDetailTrendHeading {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.liveDetailTrendCoverage {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line-dark-strong);
  background: var(--surface-panel);
  color: var(--text-2);
}

.liveDetailTrendCoverage.ongoing {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.liveDetailTrendCoverage.partial {
  border-color: color-mix(in srgb, var(--warning) 60%, transparent);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
  cursor: help;
}

.liveDetailTrendLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.liveDetailTrendLegend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.liveDetailTrendLegend .pink {
  background: var(--primary);
}

.liveDetailTrendLegend .cyan {
  background: var(--accent);
}

.liveDetailTrendLegend .slotA {
  background: var(--primary);
}

.liveDetailTrendLegend .slotB {
  background: var(--accent);
}

.liveDetailTrendLegend b {
  color: var(--text-1);
  font-weight: 900;
}

.liveDetailTrendDimSelect {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}

.liveDetailDimPill {
  appearance: none;
  border: 1px solid var(--row-line);
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.liveDetailDimPill:hover:not(:disabled) {
  color: var(--text-1);
  border-color: var(--text-3);
}

.liveDetailDimPill.active {
  color: var(--text-1);
  border-color: currentColor;
}

.liveDetailDimPill.active.slotA {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-panel));
}

.liveDetailDimPill.active.slotB {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-panel));
}

.liveDetailDimPill:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.liveDetailTrendLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.liveDetailTrendChart {
  min-width: 0;
  padding: 16px;
}

.liveDetailTrendChart svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.liveDetailTrendChart line {
  stroke: var(--row-line);
  stroke-width: 1;
}

.liveDetailTrendChart polyline {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.liveDetailTrendChart polyline.slotA {
  stroke: var(--primary);
}

.liveDetailTrendChart polyline.slotB {
  stroke: var(--accent);
}

.liveDetailAxisLabel {
  fill: var(--text-3);
  font-size: 12px;
  font-weight: 700;
}

.liveDetailAxisLabel.slotA {
  fill: var(--primary);
}

.liveDetailAxisLabel.slotB {
  fill: var(--accent);
}

.liveDetailProductToggle {
  margin: 12px auto 0;
  display: flex;
}

.liveDetailStrategyGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.liveDetailProductTable {
  display: grid;
}

.liveDetailProductRow {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(130px, 0.5fr) minmax(90px, 0.32fr) minmax(120px, 0.38fr) minmax(100px, 0.28fr);
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.liveDetailProductRow.head {
  min-height: 42px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 950;
}

.liveDetailProductRow:last-child {
  border-bottom: 0;
}

.liveDetailProductCell {
  min-width: 0;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.liveDetailProductCell strong,
.liveDetailProductRow > strong {
  overflow: hidden;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveDetailProductCell em {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveDetailProductThumb {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--tag-bg);
  color: var(--text-3);
}

.liveDetailSimilarGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.liveDetailSimilarCard {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
}

.liveDetailSimilarCard h3 {
  margin: 0 0 8px;
  color: var(--text-1);
  font-size: 18px;
}

.liveDetailSimilarCard p {
  margin: 0 0 12px;
  color: var(--text-2);
  font-weight: 800;
}

.liveDetailSimilarityReasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.liveDetailSimilarityReasons span {
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-panel));
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
}

.liveDetailSimilarMetrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.liveDetailSimilarMetrics span {
  display: grid;
  gap: 4px;
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 10px;
}

.liveDetailSimilarMetrics strong {
  color: var(--text-1);
}

.liveDetailSimilarMetrics em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.liveDetailRequestMeta {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .liveDetailHeroGrid,
  .liveDetailTrendLayout,
  .liveDetailStrategyGrid,
  .liveDetailSimilarGrid {
    grid-template-columns: 1fr;
  }

  .liveDetailCreatorCard {
    justify-items: start;
    text-align: left;
  }

  .liveDetailCreatorCard {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .liveDetailCreatorStats {
    grid-column: 1 / -1;
  }

  .liveDetailMetricGroups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .liveDetailStickyHeader {
    left: 24px;
    right: 24px;
  }
}

@media (max-width: 760px) {
  .liveDetailHeroCard {
    grid-template-columns: 1fr;
  }

  .liveDetailCover {
    max-width: 220px;
  }

  .liveDetailTitleRow,
  .liveDetailSectionHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .liveDetailSectionActions {
    justify-content: flex-start;
    width: 100%;
  }

  .liveDetailInfoGrid div,
  .liveDetailHeroMetrics,
  .liveDetailCreatorCard,
  .liveDetailMetricGroups,
  .liveDetailSimilarMetrics {
    grid-template-columns: 1fr;
  }

  .liveDetailTabs {
    overflow-x: auto;
    gap: 14px;
    padding-inline: 10px;
  }

  .liveDetailStickySummary {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 10px;
  }

  .liveDetailStickyThumb {
    width: 46px;
  }

  .liveDetailStickyTitle > strong {
    font-size: 15px;
  }

  .liveDetailStickyMeta {
    gap: 6px 10px;
    font-size: 12px;
  }

  .liveDetailStickyActions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .liveDetailStickyHeader {
    left: 10px;
    right: 10px;
  }

  .liveSearchFilterPanel {
    gap: 14px;
    padding: 14px;
  }

  .liveSearchMainSearch {
    align-items: stretch;
  }

  .liveSearchSearchBox {
    max-width: none;
    min-width: 0;
    flex-basis: 100%;
  }

  .liveSearchSearchButton,
  .liveSearchResetButton {
    flex: 1 1 120px;
  }

  .liveSearchFilterRow {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .liveSearchFilterLabel {
    line-height: 1.2;
  }

  .liveSearchResultFilters {
    align-items: stretch;
    flex-direction: column;
  }

  .liveSearchDateFields {
    justify-content: flex-start;
  }

  .liveSearchDateField {
    width: 100%;
  }

  .liveSearchDateField > input {
    min-width: 0;
    width: 100%;
  }

  .liveSearchDateDash {
    display: none;
  }
}

.liveHistoryFilterPanel .historyKeywordField {
  grid-column: span 4;
}

.liveHistoryFilterPanel .historyCreatorField {
  grid-column: span 2;
}

.liveHistoryFilterPanel .historyIdField {
  grid-column: span 1;
}

.liveHistoryFilterPanel .historySortField {
  grid-column: span 3;
}

.liveHistoryFilterPanel .historyPageSizeField {
  grid-column: span 1;
}

.liveHistoryFilterPanel .historyTimeField {
  grid-column: span 3;
}

.liveHistoryFilterPanel .historyFilterActions {
  grid-column: span 6;
  align-self: end;
  justify-content: flex-end;
}

.scheduleFilterPanel .scheduleKeywordField {
  grid-column: span 3;
  order: 1;
}

.scheduleFilterPanel .scheduleCreatorField {
  grid-column: span 2;
  order: 2;
}

.scheduleFilterPanel .scheduleStatusField {
  grid-column: span 2;
  order: 3;
}

.scheduleFilterPanel .scheduleSortField {
  grid-column: span 3;
  order: 4;
}

.scheduleFilterPanel .schedulePageSizeField {
  grid-column: span 2;
  order: 5;
}

.scheduleFilterPanel .scheduleTimeField {
  grid-column: span 3;
  order: 6;
}

.scheduleFilterPanel .scheduleFilterActions {
  grid-column: span 6;
  align-self: end;
  justify-content: flex-end;
  order: 7;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-commerce-shared.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy commerce shared CSS.
 *
 * Read-only compatibility bridge for old cross-module list, filter, pager,
 * retry/action button, and status-row primitives. This exists so future work
 * can replace these surfaces with @compass/ui DataTable, Pagination,
 * SearchFilterFormPanel, Button, and StatusBadge without treating products.css
 * as the owner of shared controls.
 */

.productFilterField {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.productFilterField span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.productFilterField input,
.productFilterField select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  outline: none;
  background: var(--control-bg);
  color: var(--text-1);
  padding: 0 10px;
}

.productFilterField input::placeholder {
  color: var(--text-3);
}

.productFilterField input:focus,
.productFilterField select:focus {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.productFilterActions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

.productFilterActions button,
.productPager button,
.productRetryButton {
  flex: 0 0 auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-active-bg);
  color: var(--text-1);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.productFilterActions button:last-child,
.productPager button {
  border-color: var(--line-dark);
  background: var(--tag-bg);
  color: var(--text-2);
}

.productListPanel {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 14px;
}

.productListToolbar,
.productPager,
.productPager > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.productListToolbar {
  justify-content: space-between;
}

.productListToolbar > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.productListToolbar strong,
.productPager strong {
  color: var(--text-1);
}

.productListToolbar em,
.productPager span {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.productListTable {
  min-width: 0;
  display: grid;
}

.liveDataListTable.cuiDataList {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.liveDataListTable .cuiDataListBody {
  overflow-x: auto;
  overflow-y: hidden;
}

.liveDataListTable .cuiDataListBodyInner {
  display: grid;
}

.productListRow {
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(280px, 1.65fr) minmax(124px, 0.7fr) minmax(142px, 0.9fr) minmax(128px, 0.8fr) minmax(118px, 0.65fr) minmax(82px, 0.42fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
  padding: 10px 0;
}

.productListRow:last-child {
  border-bottom: 0;
}

.productListHead {
  min-height: 34px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.productIdentityCell {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.productAvatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-light);
  font-size: 18px;
  font-weight: 900;
}

.productTitleStack,
.productMetricCell,
.productStatusCell,
.productActionCell {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.productTitleStack strong,
.productMetricCell strong {
  overflow: hidden;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.productTitleStack em,
.productMetricCell em,
.productStatusCell em,
.productStatusCell small,
.productActionCell span {
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.productTagList {
  margin-top: 2px;
}

.productTagList span {
  padding: 4px 7px;
  font-size: 11px;
}

.productScoreCell {
  display: grid;
  grid-template-columns: minmax(50px, 1fr) auto;
  gap: 5px 8px;
  align-items: center;
}

.productScoreCell::before {
  content: '';
  grid-column: 1;
  grid-row: 1;
  height: 7px;
  border-radius: 999px;
  background: var(--surface-panel-strong);
}

.productScoreCell > span {
  grid-column: 1;
  grid-row: 1;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--success), var(--accent));
}

.productScoreCell strong {
  grid-column: 2;
  grid-row: 1;
  color: var(--text-1);
}

.productScoreCell em {
  grid-column: 1 / -1;
  color: #34d399;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.productStatusCell .statusPill {
  width: fit-content;
}

.productActionCell a {
  width: fit-content;
  border: 1px solid rgba(6, 182, 212, 0.34);
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.1);
  color: #67e8f9;
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.productErrorMeta {
  margin-top: 12px;
}

.productRetryButton {
  width: fit-content;
  margin-top: 12px;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-lives-search-results.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy live search results CSS.
 *
 * Read-only compatibility bridge for the old live search result panel,
 * quick ranges, calendar trigger, and local pagination overrides. Keep this
 * after legacy-commerce-shared.css to preserve the original cascade.
 */

.liveSearchResultPanel {
  border: 1px solid #eef1f5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(24, 32, 51, 0.06);
  padding: 0;
  overflow: hidden;
}

.liveSearchResultPanel > .productListToolbar {
  min-height: 72px;
  border-bottom: 1px solid #edf0f5;
  background: #fff;
  padding: 18px 22px;
}

.liveSearchResultPanel > .productListToolbar strong {
  color: #101828;
  font-size: 18px;
  font-weight: 950;
}

.liveSearchResultPanel > .productListToolbar em {
  color: #667085;
  font-size: 13px;
  font-weight: 700;
}

.liveSearchToolbarActions,
.liveSearchActionCell,
.productPager .cuiPaginationActions,
.productPager .cuiPaginationPages,
.liveSearchQuickRanges,
.liveSearchDateFields {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.liveSearchToolbarActions .productRetryButton,
.liveSearchResultFilters .productRetryButton,
.liveSearchActionCell .productRetryButton {
  margin-top: 0;
}

.liveSearchResultFilters {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  border-bottom: 1px solid #edf0f5;
  background: linear-gradient(180deg, #fbfdff, #ffffff);
  padding: 16px 22px;
}

.liveSearchQuickRanges {
  flex: 0 1 auto;
}

.liveSearchQuickRanges button,
.productPager .cuiPaginationActions button,
.productPager .cuiPaginationEllipsis,
.liveSearchCalendarButton,
.liveSearchActionCell .productRetryButton,
.liveSearchToolbarActions .productRetryButton,
.liveSearchResultFilters .productRetryButton {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #e8edf4;
  border-radius: 12px;
  background: #fff;
  color: #364152;
  box-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
  font-size: 14px;
  font-weight: 820;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.liveSearchQuickRanges button {
  min-width: 76px;
  padding: 0 14px;
}

.liveSearchQuickRanges button:not(:disabled):hover,
.productPager .cuiPaginationActions button:not(:disabled):hover,
.liveSearchCalendarButton:not(:disabled):hover,
.liveSearchActionCell .productRetryButton:not(:disabled):hover,
.liveSearchToolbarActions .productRetryButton:not(:disabled):hover,
.liveSearchResultFilters .productRetryButton:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--primary) 24%, #e8edf4);
  background: color-mix(in srgb, var(--primary) 6%, #ffffff);
  color: var(--primary);
}

.liveSearchDateFields {
  flex: 1 1 620px;
  justify-content: flex-end;
}

.liveSearchDateField {
  min-width: 224px;
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #e4e8ef;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
  padding: 0 8px 0 14px;
}

.liveSearchDateField:focus-within {
  border-color: color-mix(in srgb, var(--primary) 30%, #e4e8ef);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.liveSearchDateField > span {
  color: #667085;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.liveSearchDateField > input {
  min-width: 0;
  height: 40px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #101828;
  font-size: 14px;
  font-weight: 760;
  padding: 0;
}

.liveSearchDateField > input::placeholder {
  color: #98a2b3;
}

.liveSearchDateDash {
  color: #98a2b3;
  font-size: 14px;
  font-weight: 900;
}

.liveSearchCalendar {
  position: relative;
  flex: 0 0 auto;
}

.liveSearchCalendarButton {
  width: 34px;
  min-height: 34px;
  border-radius: 999px;
  padding: 0;
}

.liveSearchCalendarPanel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  width: 292px;
  border: 1px solid #e4e8ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.16);
  padding: 14px;
}

.liveSearchCalendarHeader {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
}

.liveSearchCalendarHeader > button,
.liveSearchCalendarGrid button {
  min-height: 34px;
  border: 1px solid #e8edf4;
  border-radius: 10px;
  background: #fff;
  color: #364152;
  font-size: 13px;
  font-weight: 850;
}

.liveSearchCalendarTitle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  align-items: center;
  gap: 8px;
}

.liveSearchCalendarTitle input {
  width: 100%;
  height: 34px;
  border: 1px solid #e8edf4;
  border-radius: 10px;
  background: #fff;
  color: #101828;
  text-align: center;
  box-shadow: none;
  padding: 0 8px;
}

.liveSearchCalendarTitle label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
}

.liveSearchCalendarTitle label span {
  color: #667085;
  font-size: 12px;
  font-weight: 850;
}

.liveSearchCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.liveSearchCalendarGrid span {
  color: #98a2b3;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.liveSearchCalendarGrid i {
  min-height: 34px;
}

.liveSearchCalendarGrid button.active {
  border-color: color-mix(in srgb, var(--primary) 36%, #e8edf4);
  background: color-mix(in srgb, var(--primary) 12%, #ffffff);
  color: var(--primary);
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-products.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy products CSS.
 *
 * Read-only compatibility bridge for old product detail page styles. New
 * product UI work belongs in products.css, and shared list/filter/table
 * controls should move toward @compass/ui.
 */

.productDetailPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
}

.productDetailHero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(6, 182, 212, 0.12), var(--primary-soft)),
    var(--surface-panel);
  padding: 20px;
}

.productDetailHero h1 {
  margin: 12px 0 0;
  color: var(--text-1);
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1.08;
}

.productDetailHero p {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--text-2);
  line-height: 1.65;
}

.productBackLink {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--tag-bg);
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.productBackLink:hover {
  border-color: var(--primary-border);
  color: var(--primary-light);
}

.productDetailKpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.productDetailGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.72fr);
  gap: 16px;
}

.productDetailGrid.equal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.productDetailGrid.historyTrendGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.diagnosisToolbar .diagnosisSelectorField {
  grid-column: span 6;
}

.diagnosisToolbar .diagnosisToolbarActions {
  grid-column: span 6;
}

.diagnosisReportPage {
  align-items: start;
}

.diagnosisMetricGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.diagnosisActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.diagnosisActions .productRetryButton {
  margin-top: 0;
}

.diagnosisDimensionGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.diagnosisDimensionCard {
  display: grid;
  gap: 12px;
}

.diagnosisDimensionCard p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.58;
}

.diagnosisScoreValue {
  min-width: 48px;
  color: var(--text-1);
  font-size: 2rem;
  line-height: 1;
  text-align: right;
}

.diagnosisListGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.diagnosisListGrid > div,
.diagnosisSuggestions {
  min-width: 0;
  display: grid;
  gap: 7px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px;
}

.diagnosisListGrid span,
.diagnosisSuggestions span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.diagnosisListGrid ul,
.diagnosisSuggestions ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-2);
  line-height: 1.55;
}

.diagnosisListGrid em,
.diagnosisSuggestions em,
.diagnosisDimensionCard small {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}

.productDetailPanel {
  min-width: 0;
}

.productDetailPanel.wide {
  min-height: 420px;
}

.productDetailSide {
  min-width: 0;
  display: grid;
  gap: 16px;
  align-content: start;
}

.productTrendChart {
  min-height: 190px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  align-items: end;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.trendBarColumn {
  min-width: 0;
  display: grid;
  gap: 6px;
  align-items: end;
  justify-items: center;
}

.trendBarTrack {
  width: 100%;
  height: 116px;
  display: flex;
  align-items: end;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  overflow: hidden;
}

.trendBarTrack span {
  width: 100%;
  display: block;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--accent), var(--primary));
}

.trendBarColumn strong {
  color: var(--text-1);
  font-size: 12px;
}

.trendBarColumn em,
.trendBarColumn small {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
}

.productTrendTable,
.productPriceHistory {
  display: grid;
  margin-top: 14px;
}

.productTrendRow,
.productPriceRow {
  min-height: 40px;
  display: grid;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.productTrendRow {
  grid-template-columns: 1fr 0.8fr 1fr 0.8fr 0.8fr 0.8fr;
}

.productPriceRow {
  grid-template-columns: 1fr 1fr 0.8fr 0.8fr 0.8fr;
}

.productTrendRow.head,
.productPriceRow.head {
  min-height: 32px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.productTrendRow:last-child,
.productPriceRow:last-child {
  border-bottom: 0;
}

.productInfoList {
  display: grid;
  gap: 10px;
  margin: 0;
}

.productInfoList div {
  min-width: 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.productInfoList dt {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.productInfoList dd {
  overflow: hidden;
  margin: 0;
  color: var(--text-1);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.productSkuList {
  display: grid;
  gap: 10px;
}

.productSkuItem {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.productSkuItem strong {
  overflow: hidden;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.productSkuItem span {
  color: #67e8f9;
  font-weight: 900;
}

.productSkuItem em {
  grid-column: 1 / -1;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.productRankGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.productRankGrid article {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.productRankGrid span,
.productRankGrid strong,
.productRankGrid em,
.productRankGrid small {
  display: block;
}

.productRankGrid span,
.productRankGrid em,
.productRankGrid small {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.6;
}

.productRankGrid strong {
  margin: 8px 0;
  color: var(--text-1);
  font-size: 28px;
  line-height: 1;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-creator-cards.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy creator card shared CSS.
 *
 * Read-only compatibility bridge for old creator-card primitives reused by
 * creator, CRM, live, and favorites surfaces. New UI should prefer @compass/ui
 * Avatar, MetricGrid, DataList, DataTable, or module-local styles.
 */

.creatorGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.creatorCard {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.creatorCardHead,
.creatorCardFoot {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.creatorCardHead {
  justify-content: space-between;
}

.creatorCardHead > div:nth-child(2) {
  min-width: 0;
  flex: 1 1 auto;
}

.creatorCardHead strong,
.creatorCardHead em,
.creatorCardFoot small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorCardHead strong {
  color: var(--text-1);
}

.creatorCardHead em,
.creatorCard p,
.creatorCardFoot small,
.creatorMetaNote {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.6;
}

.creatorCard p {
  min-height: 42px;
  margin: 0;
}

.creatorAvatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-light);
  font-size: 18px;
  font-weight: 900;
  overflow: hidden;
}

.creatorAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorMetricGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.creatorMetricGrid span {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 10px;
}

.creatorMetricGrid strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorMetricGrid em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-lives-history-mini.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy live history mini chart CSS.
 *
 * Read-only compatibility bridge for the old live history summary widget.
 * Keep this between creator card primitives and their action tail to preserve
 * the original cascade order.
 */

.liveHistoryMiniHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.liveHistoryMiniPeak {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
}

.liveHistoryMiniPeak em {
  font-style: normal;
  color: var(--text-3);
}

.liveHistoryMiniPeak strong {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-1);
}

.liveHistoryMiniPeak span {
  color: var(--text-3);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.liveHistoryMiniChart {
  width: 100%;
  height: 150px;
  display: block;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  margin-top: 8px;
}

.liveHistoryMiniGrid {
  stroke: var(--line-dark);
  stroke-width: 0.6;
  stroke-dasharray: 2 3;
}

.liveHistoryMiniAxisLabel {
  font-size: 9.5px;
  fill: var(--text-3);
  font-family: inherit;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.liveHistoryMiniArea {
  fill: var(--success);
  fill-opacity: 0.16;
}

.liveHistoryMiniLine {
  fill: none;
  stroke: var(--success);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.liveHistoryMiniDot {
  fill: var(--success);
  stroke: var(--surface-panel);
  stroke-width: 0.8;
}

.liveHistoryMiniCoverageLow {
  color: var(--warning);
}

.liveHistoryMiniCoverageBadge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warning) 60%, transparent);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
  font-size: 11px;
  font-weight: 500;
  vertical-align: middle;
  cursor: help;
}

.productTrendRow.liveProductSummaryRow {
  grid-template-columns: minmax(0, 1fr) minmax(88px, 0.4fr) minmax(118px, 0.5fr);
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-creator-card-actions.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy creator card action CSS.
 *
 * Read-only compatibility bridge for the old creator-card footer action link.
 * It stays separate only to preserve the original cascade order around the
 * live history mini chart block.
 */

.creatorCardFoot {
  justify-content: space-between;
}

.creatorCardFoot a {
  flex: 0 0 auto;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-light);
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-workspace-page-canvases.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy workspace page canvas CSS.
 *
 * Read-only compatibility bridge for early workspace page min-width and hero
 * background rules shared by creator, competitors, ChatBI, CRM, OpenAPI, and
 * live pages. New layout work belongs in the owning module CSS or shared shell
 * patterns, not in this file.
 */

.creatorDetailPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
}

.competitorsPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
}

.chatbiPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
}

.crmPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
}

.openapiPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
}

.livesPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
}

.competitorHeroPanel {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.08)),
    var(--surface-panel);
}

.liveHeroPanel {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.08)),
    var(--surface-panel);
}

.livesPage > .livePageHeader,
.livesPage > .liveHeroPanel,
.livesPage > .moduleHeroPanel {
  min-width: 0;
  display: block !important;
  grid-template-columns: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line-dark) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 0 14px !important;
  box-shadow: none !important;
}

.livesPage > .livePageHeader > div:first-child,
.livesPage > .liveHeroPanel > div:first-child,
.livesPage > .moduleHeroPanel > div:first-child {
  min-width: 0;
}

.livesPage > .livePageHeader .statusPill,
.livesPage > .livePageHeader .productHeroTags,
.livesPage > .livePageHeader .heroContextCard,
.livesPage > .liveHeroPanel .statusPill,
.livesPage > .liveHeroPanel .productHeroTags,
.livesPage > .liveHeroPanel .heroContextCard,
.livesPage > .moduleHeroPanel .statusPill,
.livesPage > .moduleHeroPanel .productHeroTags,
.livesPage > .moduleHeroPanel .heroContextCard {
  display: none !important;
}

.livesPage > .livePageHeader h1,
.livesPage > .liveHeroPanel h1,
.livesPage > .moduleHeroPanel h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0;
}

.livesPage > .livePageHeader p,
.livesPage > .liveHeroPanel p,
.livesPage > .moduleHeroPanel p {
  max-width: 820px;
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

.chatbiHeroPanel {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(16, 185, 129, 0.08)),
    var(--surface-panel);
}

.crmHeroPanel {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(16, 185, 129, 0.08)),
    var(--surface-panel);
}

.openapiHeroPanel {
  background:
    linear-gradient(135deg, rgba(6, 182, 212, 0.14), var(--primary-soft)),
    var(--surface-panel);
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-chatbi.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy ChatBI CSS.
 *
 * Read-only compatibility bridge for old ChatBI page styles. Product decisions
 * around ChatBI routes should be handled in app code; this file only preserves
 * existing cascade while the global stylesheet is being split.
 */

.chatbiLayout,
.chatbiResultGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 16px;
}

.chatbiResultGrid {
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr) minmax(280px, 0.8fr);
}

.chatbiQueryForm {
  display: grid;
  gap: 14px;
}

.chatbiQuestionField {
  display: grid;
  gap: 8px;
}

.chatbiQuestionField span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.chatbiQuestionField textarea {
  min-height: 132px;
  resize: vertical;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  padding: 12px 14px;
  font: inherit;
  line-height: 1.5;
  outline: none;
}

.chatbiQuestionField textarea:focus {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.chatbiFilterGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.chatbiSubmitButton {
  justify-self: start;
  border: 0;
  border-radius: 8px;
  background: var(--grad);
  color: white;
  padding: 11px 16px;
  font-weight: 900;
  cursor: pointer;
}

.chatbiSubmitButton:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.chatbiConversationList {
  display: grid;
  gap: 10px;
}

.chatbiConversationList article {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.chatbiConversationList strong,
.chatbiConversationList em,
.chatbiConversationList small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbiConversationList strong {
  color: var(--text-1);
}

.chatbiConversationList em,
.chatbiConversationList small {
  color: var(--text-3);
  font-style: normal;
}

.chatbiResultTable {
  min-width: 0;
  overflow-x: auto;
}

.chatbiResultRow {
  min-width: 360px;
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 10px;
  border-bottom: 1px solid var(--row-line);
  padding: 10px 0;
  color: var(--text-2);
  font-size: 13px;
}

.chatbiResultRow.head {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.chatbiResultRow span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbiInsightSummary {
  color: var(--text-2);
  line-height: 1.7;
}

.chatbiMetaList,
.chatbiSafetyGrid {
  display: grid;
  gap: 10px;
}

.chatbiMetaList span,
.chatbiSafetyGrid span {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 10px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbiSafetyGrid strong,
.chatbiSafetyGrid em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbiSafetyGrid strong {
  color: var(--text-1);
}

.chatbiSafetyGrid em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-live-card-state.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy live card state CSS.
 *
 * Read-only compatibility bridge for small live card selected/avatar state
 * rules that originally sat between ChatBI and competitor styles.
 */

.liveCard.selected {
  border-color: var(--primary-border-strong);
  box-shadow: 0 18px 36px var(--focus-ring);
}

.liveAvatar {
  background: var(--grad);
  color: #ffffff;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-competitors-lite.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy competitors lite CSS.
 *
 * Read-only compatibility bridge for pre-radar competitor forms, monitor lists,
 * events, and rule cards. New competitor radar work should use its module CSS
 * or shared @compass/ui data components.
 */

.competitorForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.competitorForm.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.competitorFormFeedback {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.competitorMonitorGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.competitorAvatar {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

.competitorEventList,
.competitorRuleList {
  display: grid;
  gap: 8px;
}

.competitorEventDataList.cuiDataList,
.crmFollowupDataList.cuiDataList,
.chatbiProtoMiniTableDataList.cuiDataList {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.competitorEventDataList .cuiDataListBody,
.crmFollowupDataList .cuiDataListBody,
.chatbiProtoMiniTableDataList .cuiDataListBody {
  overflow-x: auto;
}

.competitorEventRow {
  min-height: 42px;
  display: grid;
  grid-template-columns: 1fr 1.4fr 96px 118px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.competitorEventRow.head {
  min-height: 30px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.competitorEventRow:last-child,
.competitorEventList .cuiDataListTableRow:last-child .cuiDataListTableCell {
  border-bottom: 0;
}

.competitorEventRow strong,
.competitorEventRow .cuiDataListTableCell strong {
  color: var(--text-1);
}

.competitorEventRow em,
.competitorEventRow .cuiDataListTableCell em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.competitorRuleList article {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.competitorRuleList strong,
.competitorRuleList em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitorRuleList strong {
  color: var(--text-1);
}

.competitorRuleList em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-crm.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy CRM CSS.
 *
 * Read-only compatibility bridge for old CRM form, creator card extension,
 * follow-up list, and object metric styles.
 */

.crmForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.crmForm.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crmFormFeedback {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.crmCreatorGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.crmCreatorCard p {
  min-height: 42px;
}

.crmAvatar {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.crmFollowupList {
  display: grid;
  gap: 8px;
}

.crmFollowupRow {
  min-height: 42px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 128px 76px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.crmFollowupRow.head {
  min-height: 30px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.crmFollowupRow:last-child,
.crmFollowupList .cuiDataListTableRow:last-child .cuiDataListTableCell {
  border-bottom: 0;
}

.crmFollowupRow strong,
.crmFollowupRow .cuiDataListTableCell strong {
  color: var(--text-1);
}

.crmFollowupRow span,
.crmFollowupRow em,
.crmFollowupRow small,
.crmFollowupRow .cuiDataListTableHeadCell,
.crmFollowupRow .cuiDataListTableCell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crmFollowupRow em,
.crmFollowupRow small,
.crmFollowupRow .cuiDataListTableCell em,
.crmFollowupRow .cuiDataListTableCell small {
  color: var(--text-3);
  font-style: normal;
}

.crmDetailStack {
  display: grid;
  gap: 12px;
}

.crmObjectGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.crmObjectGrid span {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.crmObjectGrid strong,
.crmObjectGrid em {
  display: block;
}

.crmObjectGrid strong {
  color: var(--text-1);
  font-size: 20px;
}

.crmObjectGrid em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-openapi.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy OpenAPI CSS.
 *
 * Read-only compatibility bridge for old OpenAPI forms, key cards, secret
 * reveal, and log list styles. New OpenAPI UI should use openapi.css and
 * @compass/ui controls.
 */

.textButton {
  border: 0;
  background: transparent;
  color: var(--primary-light);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: 0;
}

.openapiForm {
  display: grid;
  gap: 12px;
}

.openapiScopePicker,
.openapiKeyList {
  display: grid;
  gap: 10px;
}

.openapiScopeOption {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 10px 12px;
}

.openapiScopeOption.disabled {
  opacity: 0.64;
}

.openapiScopeOption input {
  width: 16px;
  height: 16px;
}

.openapiScopeOption strong,
.openapiScopeOption em,
.openapiScopeOption small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openapiScopeOption strong {
  color: var(--text-1);
}

.openapiScopeOption em,
.openapiScopeOption small {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.openapiKeyCard {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.openapiKeyCard h2,
.openapiKeyCard p,
.openapiKeyCard .cuiDataListItemTitle,
.openapiKeyCard .cuiDataListItemDescription {
  margin: 8px 0 0;
}

.openapiKeyCard h2,
.openapiKeyCard .cuiDataListItemTitle {
  color: var(--text-1);
  font-size: 18px;
}

.openapiKeyCard p,
.openapiKeyCard .cuiDataListItemDescription,
.openapiSecretOnce code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.openapiKeyCard p,
.openapiKeyCard .cuiDataListItemDescription {
  color: #67e8f9;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.openapiSecretOnce {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(245, 158, 11, 0.26);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
  padding: 12px;
}

.openapiSecretOnce span {
  color: #fbbf24;
  font-size: 12px;
  font-weight: 900;
}

.openapiSecretOnce code {
  color: var(--text-1);
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.openapiLogList {
  display: grid;
  gap: 8px;
}

.openapiLogDataList.cuiDataList {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.openapiLogDataList .cuiDataListBody {
  overflow-x: auto;
}

.openapiLogRow {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(180px, 1.3fr) 80px 88px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.openapiLogRow.head {
  min-height: 30px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.openapiLogRow:last-child,
.openapiLogList .cuiDataListTableRow:last-child .cuiDataListTableCell {
  border-bottom: 0;
}

.openapiLogRow strong,
.openapiLogRow span,
.openapiLogRow em,
.openapiLogRow small,
.openapiLogRow .cuiDataListTableHeadCell,
.openapiLogRow .cuiDataListTableCell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openapiLogRow strong,
.openapiLogRow .cuiDataListTableCell strong {
  color: var(--text-1);
}

.openapiLogRow em,
.openapiLogRow small,
.openapiLogRow .cuiDataListTableCell em,
.openapiLogRow .cuiDataListTableCell small {
  color: var(--text-3);
  font-style: normal;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-notifications.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy notifications CSS.
 *
 * Read-only compatibility bridge for old notifications and task list cards.
 */

.notificationsPage {
  min-width: var(--workspace-canvas-min-width);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.notificationsHeroPanel {
  border-color: var(--primary-border);
}

.notificationActionGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.notificationButtonRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.notificationList,
.taskList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notificationItem,
.taskCard {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-panel-strong);
}

.notificationItem h2,
.notificationItem p,
.notificationItem small,
.notificationItem .cuiDataListItemTitle,
.notificationItem .cuiDataListItemDescription,
.taskCard h2,
.taskCard p,
.taskCard small,
.taskCard .cuiDataListItemTitle,
.taskCard .cuiDataListItemDescription {
  margin: 0;
}

.notificationItem h2,
.notificationItem .cuiDataListItemTitle,
.taskCard h2,
.taskCard .cuiDataListItemTitle {
  margin-top: 8px;
  color: var(--text-1);
  font-size: 16px;
}

.notificationItem p,
.notificationItem .cuiDataListItemDescription,
.taskCard p,
.taskCard .cuiDataListItemDescription {
  margin-top: 6px;
  color: var(--text-2);
  line-height: 1.6;
}

.notificationItem small,
.taskCard small {
  display: block;
  margin-top: 10px;
  color: var(--text-3);
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-creator-detail.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy creator detail CSS.
 *
 * Read-only compatibility bridge for old creator detail hero and match/object
 * summary widgets. New creator detail V2 styles stay in creators.css or the
 * later legacy creator-detail-v2 block until replaced.
 */

.creatorDetailHero {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.08)),
    var(--surface-panel);
}

.creatorMatchGrid,
.creatorDataObjectGrid {
  display: grid;
  gap: 10px;
}

.creatorMatchGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creatorMatchGrid article,
.creatorDataObjectGrid span {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.creatorMatchGrid strong,
.creatorMatchGrid span,
.creatorDataObjectGrid span {
  display: block;
}

.creatorMatchGrid strong {
  color: var(--text-1);
}

.creatorMatchGrid span,
.creatorDataObjectGrid span {
  overflow-wrap: anywhere;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.creatorMetaNote {
  margin: 12px 0 0;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-permission-state.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy permission state CSS.
 *
 * Read-only compatibility bridge for old no-permission and permission action
 * states. Some later permission matrix rules remain in legacy-workspace-core.css
 * until their surrounding account/favorites block is split safely.
 */

.noPermissionPanel {
  min-height: 260px;
  align-items: start;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.12), var(--primary-soft)),
    var(--surface-panel);
  padding: 22px;
}

.noPermissionPanel.compact {
  min-height: auto;
}

.noPermissionPanel.cuiInlineState {
  grid-template-columns: auto minmax(0, 1fr);
}

.noPermissionPanel .cuiInlineStateActions {
  grid-column: 2;
  justify-content: flex-start;
}

.noPermissionDetails {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.noPermissionIcon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  font-size: 22px;
  font-weight: 900;
}

.noPermissionPanel h1 {
  margin: 12px 0 8px;
  color: var(--text-1);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.12;
}

.noPermissionPanel p,
.noPermissionPanel small {
  color: var(--text-2);
  line-height: 1.65;
}

.noPermissionPanel p {
  max-width: 760px;
  margin: 0;
}

.noPermissionPanel small {
  display: block;
  margin-top: 12px;
  color: var(--text-3);
}

.permissionRequirementList,
.permissionCodeList,
.permissionActionGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.permissionRequirementList {
  margin-top: 16px;
}

.permissionRequirementList span,
.permissionRequirementList em,
.permissionCodeList span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  padding: 0 10px;
}

.permissionRequirementList span {
  border: 1px solid rgba(245, 158, 11, 0.26);
  background: rgba(245, 158, 11, 0.08);
  color: #fbbf24;
}

.permissionRequirementList em,
.permissionCodeList span {
  border: 1px solid var(--line-dark);
  background: var(--tag-bg);
  color: var(--text-2);
}

.permissionDashboardGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.88fr);
  gap: 16px;
}

.permissionCodeList {
  margin-top: 14px;
}

.permissionActionGrid {
  margin-top: 14px;
}

.permissionActionButton {
  min-height: 56px;
  display: grid;
  gap: 4px;
  flex: 1 1 150px;
  justify-items: start;
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.1);
  color: var(--text-1);
  padding: 10px 12px;
  text-align: left;
  font-weight: 850;
}

.permissionActionButton span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
}

.permissionActionButton.locked {
  border-color: rgba(245, 158, 11, 0.26);
  background: rgba(245, 158, 11, 0.07);
  color: #fbbf24;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-account-favorites.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy account and favorites CSS.
 *
 * Read-only compatibility bridge for old account security, profile, and
 * favorites page styles. New work belongs in account-team.css or shared
 * @compass/ui components.
 */

.accountSecurityPage {
  display: grid;
  gap: 16px;
}

.accountSecurityGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
  gap: 16px;
}

.accountMethodList,
.accountProviderGrid,
.accountIdentityList {
  display: grid;
  gap: 10px;
}

.accountMethodRow,
.accountIdentityRow {
  min-width: 0;
  min-height: 64px;
  display: grid;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
}

.accountMethodRow {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.accountIdentityRow {
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.7fr) auto;
}

.accountMethodIcon,
.accountIdentityAvatar,
.accountProviderButton span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--tag-bg);
  color: var(--text-1);
}

.accountIdentityAvatar {
  overflow: hidden;
}

.accountIdentityAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.accountMethodRow strong,
.accountMethodRow em,
.accountIdentityMain strong,
.accountIdentityMain em,
.accountIdentityMeta span,
.accountProviderButton strong,
.accountProviderButton em {
  display: block;
  min-width: 0;
}

.accountMethodRow strong,
.accountIdentityMain strong,
.accountProviderButton strong {
  overflow: hidden;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountMethodRow em,
.accountIdentityMain em,
.accountIdentityMeta span,
.accountProviderButton em,
.accountSecurityEmpty,
.accountSecurityHint {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.55;
}

.accountIdentityMain {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.accountIdentityMeta {
  display: grid;
  gap: 4px;
}

.accountProviderGrid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.accountProviderButton,
.accountSecurityButton,
.accountSecurityDangerButton {
  border-radius: 8px;
  font-weight: 850;
}

.accountProviderButton {
  min-height: 86px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(6, 182, 212, 0.3);
  background: rgba(6, 182, 212, 0.1);
  color: var(--text-1);
  padding: 12px;
  text-align: left;
}

.accountProviderButton em {
  grid-column: 2;
  margin-top: -8px;
}

.accountProviderButton:hover:not(:disabled),
.accountSecurityButton:hover:not(:disabled) {
  border-color: rgba(6, 182, 212, 0.48);
  background: rgba(6, 182, 212, 0.16);
}

.accountSecurityButton,
.accountSecurityDangerButton {
  min-height: 38px;
  border: 1px solid rgba(6, 182, 212, 0.32);
  background: rgba(6, 182, 212, 0.1);
  color: var(--text-1);
  padding: 0 12px;
}

.accountSecurityButton.cuiButton {
  min-height: 38px;
  border-color: rgba(6, 182, 212, 0.32);
  background: rgba(6, 182, 212, 0.1);
  color: var(--text-1);
}

.accountSecurityButton.cuiButtonPrimary {
  background: rgba(6, 182, 212, 0.18);
}

.accountSecurityButton.cuiButtonSecondary {
  background: var(--tag-bg);
}

.accountSecurityDangerButton {
  border-color: rgba(248, 113, 113, 0.32);
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
}

.accountSecurityDangerButton:hover:not(:disabled) {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.16);
}

.accountProviderButton:disabled,
.accountSecurityButton:disabled,
.accountSecurityDangerButton:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.accountSecurityEmpty,
.accountSecurityHint {
  margin: 0;
}

.accountProfilePage,
.favoritesPage {
  display: grid;
  gap: 18px;
  color: var(--text-1);
}

.accountProfilePanel {
  gap: 16px;
}

.accountProfileFields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.accountProfileFields div {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 14px;
}

.accountProfileFields span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}

.accountProfileFields strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Favorites page redesign === */

.favoritesPage {
  gap: 26px;
}

.favoritesHero.moduleHeroPanel {
  min-height: 238px;
  align-items: center;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.22), transparent 24%),
    radial-gradient(circle at 88% 0%, rgba(6, 182, 212, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(20, 25, 44, 0.92), rgba(13, 18, 33, 0.98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
  padding: 34px 36px;
}

[data-theme='light'] .favoritesHero.moduleHeroPanel {
  border-color: rgba(15, 23, 42, 0.08);
  background:
    radial-gradient(circle at 10% 15%, rgba(255, 255, 255, 0.96), transparent 28%),
    radial-gradient(circle at 85% 0%, rgba(6, 182, 212, 0.11), transparent 32%),
    linear-gradient(135deg, #f8fbff 0%, #edf4fb 100%);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.1);
}

.favoritesHero.moduleHeroPanel h1 {
  font-size: clamp(2.5rem, 4vw, 4.4rem);
  letter-spacing: 0;
}

.favoritesHero.moduleHeroPanel p {
  max-width: 680px;
  margin-top: 12px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.8;
}

.favoritesHeroStats {
  width: min(420px, 100%);
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.favoritesHeroStats div {
  min-width: 0;
  display: grid;
  min-height: 118px;
  gap: 8px;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.075);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  padding: 18px;
}

[data-theme='light'] .favoritesHeroStats div {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

.favoritesHeroStats span,
.favoritesHeroStats em {
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favoritesHeroStats strong {
  display: inline-flex;
  align-items: baseline;
  color: var(--text-1);
  font-size: 34px;
  font-weight: 760;
  line-height: 1;
}

.favoritesHeroStatsDenom {
  margin-left: 2px;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 800;
}

.favoriteCategoryPanelNew {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line-dark);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.045);
  padding: 18px;
}

[data-theme='light'] .favoriteCategoryPanelNew {
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.06);
}

.favoritePillNav {
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-dark-strong) transparent;
}

.favoritePill {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.favoritePill:hover:not(.empty):not(.active) {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.09);
  color: var(--text-1);
  transform: translateY(-1px);
}

.favoritePill.active {
  border-color: rgba(255, 255, 255, 0.3);
  background: #f8fafc;
  color: #111827;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);
}

.favoritePill.comingSoon {
  opacity: 0.62;
}

.favoritePill.comingSoon:hover {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-2);
}

.favoritePillIcon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-2);
}

.favoritePill.active .favoritePillIcon {
  background: #111827;
  color: #ffffff;
}

.favoritePillLabel {
  white-space: nowrap;
}

.favoritePillCount {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-1);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
}

.favoritePill.active .favoritePillCount {
  background: #e5e7eb;
  color: #111827;
}

.favoritePillCount.empty {
  background: transparent;
  color: var(--text-3);
}

.favoriteWorkbench {
  display: grid;
  gap: 18px;
  border: 0;
  background: transparent;
  padding: 0;
}

.favoriteWorkbench > .panelHeader {
  align-items: flex-end;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 2px 2px 0;
}

.favoriteWorkbenchHeaderMeta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.favoriteWorkbenchSubtitle {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.favoriteClearSearch {
  margin-left: 6px;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

.favoriteToolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--line-dark);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
  padding: 12px;
}

[data-theme='light'] .favoriteToolbar {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.055);
}

.favoriteSearchInputWrap {
  flex: 1 1 240px;
  min-width: 200px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-3);
  padding: 0 14px;
}

.favoriteSearchInputWrap:hover,
.favoriteSearchInputWrap:focus-within {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12);
}

.favoriteSearchInput {
  min-width: 0;
  flex: 1 1 auto;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-1);
  padding: 0;
}

.favoriteSearchInput:focus {
  box-shadow: none;
  outline: 0;
}

.favoriteSearchInput::placeholder {
  color: var(--text-3);
}

.favoriteSearchClear {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.14);
  color: var(--text-3);
  cursor: pointer;
}

.favoriteToolbarControls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.favoriteSortSelect {
  min-width: 132px;
}

.favoriteSortSelect .cuiDropdownSelectTrigger {
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  padding: 0 16px;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 760;
}

.favoriteSortSelect .cuiDropdownSelectChevron {
  color: var(--text-3);
}

.favoriteToolbarCta {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #f8fafc;
  color: #111827;
  font-size: 13px;
  font-weight: 760;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease;
}

.favoriteToolbarCta:hover {
  border-color: transparent;
  color: #111827;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
}

.favoriteWorkbench .workspaceStatePanel.compact {
  min-height: 220px;
  align-content: center;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)),
    var(--surface-panel);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.14);
  padding: 30px;
}

[data-theme='light'] .favoriteWorkbench .workspaceStatePanel.compact {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.favoriteWorkbench .workspaceStatePanel.compact .statusPill {
  width: max-content;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-2);
}

.favoriteWorkbench .workspaceStatePanel.compact h2 {
  max-width: 560px;
  margin-top: 8px;
  font-size: 24px;
  font-weight: 760;
}

.favoriteWorkbench .workspaceStatePanel.compact p {
  max-width: 640px;
  font-size: 14px;
}

.favoriteGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.favoriteCard {
  min-width: 0;
  display: grid;
  gap: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    var(--surface-panel);
  padding: 20px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.favoriteCard:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05)),
    var(--surface-panel);
  transform: translateY(-2px);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.22);
}

[data-theme='light'] .favoriteCard {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

[data-theme='light'] .favoriteCard:hover {
  border-color: rgba(15, 23, 42, 0.12);
  background: #ffffff;
  box-shadow: 0 26px 64px rgba(15, 23, 42, 0.12);
}

.favoriteCardHead {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.favoriteCardHead > .creatorAvatar {
  overflow: hidden;
}

.favoriteCardHead .creatorAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.favoriteCardHead > div {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 2px;
}

.favoriteCardHead strong {
  display: block;
  overflow: hidden;
  color: var(--text-1);
  font-size: 17px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favoriteCardHead em {
  display: block;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favoriteCardMeta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.favoriteCardMetrics {
  /* reuse .creatorMetricGrid layout; ensure 3-col works inside favorite card */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.favoriteCardMetrics > span {
  min-width: 0;
}

.favoriteCardMetrics strong {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.favoriteCardGrowth {
  color: var(--success);
}

.favoriteCardGrowthDown {
  color: var(--danger);
}

.favoriteCardFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--row-line);
}

.favoriteCardFooter > small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.favoriteCardActions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.favoriteCardAction {
  min-height: 34px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-1);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease;
}

.favoriteCardAction:hover {
  border-color: var(--primary-border);
  color: var(--primary-light);
  background: var(--primary-soft);
}

.favoriteCardAction.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-bg);
}

.favoriteEmptyCtaNote {
  display: inline-block;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
}

.accountSecurityHint {
  margin-top: 12px;
  color: #fbbf24;
}

@media (max-width: 1080px) {
  .favoritesHeroStats {
    width: 100%;
  }

  .favoriteToolbar {
    align-items: stretch;
  }

  .favoriteToolbarControls {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 720px) {
  .favoriteGrid {
    grid-template-columns: 1fr;
  }

  .favoriteCardMetrics {
    grid-template-columns: 1fr;
  }

  .favoritePill {
    padding: 0 10px 0 8px;
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-permission-matrix-state.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy permission matrix and app state CSS.
 *
 * Read-only compatibility bridge for old permission matrix, app state cards,
 * and late shared form-width overrides.
 */

.permissionMatrix {
  display: grid;
  margin-top: 14px;
}

.permissionMatrixRow {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) 96px 96px minmax(240px, 1fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.permissionMatrixRow.head {
  min-height: 34px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.permissionMatrixRow:last-child {
  border-bottom: 0;
}

.permissionMatrixRow strong,
.permissionMatrixRow em {
  display: block;
}

.permissionMatrixRow strong {
  color: var(--text-1);
}

.permissionMatrixRow em {
  margin-top: 4px;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.appStatePage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 10%, var(--primary-glow), transparent 26%),
    linear-gradient(180deg, var(--bg-deep), var(--bg));
  padding: 24px;
}

.appStateCard {
  width: min(480px, 100%);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  box-shadow: var(--shadow-dark);
  padding: 28px;
}

.appStateCard h1 {
  margin: 14px 0 8px;
  color: var(--text-1);
}

.appStateCard p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.65;
}

.appStateCard.error {
  border-color: rgba(239, 68, 68, 0.32);
}

.appStateCard.permission,
.appStateCard.warning,
.appStateCard.empty {
  border-color: rgba(245, 158, 11, 0.3);
}

.stateBlockActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.productFilterField.wide {
  grid-column: span 2;
}

.productFilterField textarea {
  min-height: 42px;
  resize: vertical;
}

@media (max-width: 1080px) {
  .authLayout {
    grid-template-columns: 1fr;
  }

  .authPromoPane {
    min-height: 100vh;
    border-right: none;
    border-bottom: 0;
  }

  .authFormPane {
    min-height: 100vh;
    justify-content: center;
    padding: 88px 32px 48px;
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-competitors-repeat.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy repeated competitors CSS.
 *
 * Read-only compatibility bridge for a repeated late live/competitor block
 * that appeared before the radar styles in the original cascade.
 */

.liveAvatar {
  background: var(--grad);
  color: #ffffff;
}

.competitorForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.competitorForm.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.competitorFormFeedback {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.competitorMonitorGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.competitorAvatar {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

.competitorEventList,
.competitorRuleList {
  display: grid;
  gap: 8px;
}

.competitorEventRow {
  min-height: 42px;
  display: grid;
  grid-template-columns: 1fr 1.4fr 96px 118px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.competitorEventRow.head {
  min-height: 30px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.competitorEventRow:last-child {
  border-bottom: 0;
}

.competitorEventRow strong {
  color: var(--text-1);
}

.competitorEventRow em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.competitorRuleList article {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.competitorRuleList strong,
.competitorRuleList em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitorRuleList strong {
  color: var(--text-1);
}

.competitorRuleList em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-radar-core.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy radar core CSS.
 *
 * Read-only compatibility bridge for the first large competitor radar style
 * block. Later radar append blocks remain split separately to preserve the
 * original cascade.
 */

.radarPage {
  gap: 18px;
}

.radarTopbar {
  display: grid;
  grid-template-columns: minmax(260px, auto) minmax(320px, 640px) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(5, 7, 20, 0.58);
  padding: 12px 16px;
}

.radarTopbar strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarSearch {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-3);
  padding: 0 12px;
}

.radarSearch input {
  width: 100%;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  outline: none;
}

.radarSearch input::placeholder {
  color: var(--text-3);
}

.radarModuleTabs,
.radarHeroActions,
.radarPanelActions,
.radarFormActions,
.radarModalActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.radarModuleTabs button,
.radarButton,
.radarTableActions button,
.radarShopFoot button,
.radarModalHead button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.radarModuleTabs button.active,
.radarButton.primary {
  border-color: rgba(34, 211, 197, 0.38);
  background: linear-gradient(135deg, #22d3ee, #2dd4bf);
  color: #041016;
}

.radarButton.soft,
.radarModuleTabs button:hover,
.radarTableActions button:hover,
.radarShopFoot button:hover {
  border-color: rgba(6, 182, 212, 0.3);
  background: rgba(6, 182, 212, 0.1);
  color: var(--text-1);
}

.radarButton.ghost {
  background: transparent;
  color: var(--text-2);
}

.radarHero,
.radarPanel {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.radarHero {
  position: relative;
  min-height: 164px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px auto;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  padding: 26px;
}

.radarHero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(6, 182, 212, 0.14), transparent 46%),
    radial-gradient(circle at 86% 28%, rgba(16, 185, 129, 0.22), transparent 28%);
  pointer-events: none;
}

.radarHero > * {
  position: relative;
  z-index: 1;
}

.radarHero h1 {
  margin: 12px 0 10px;
  color: var(--text-1);
  font-size: 34px;
  line-height: 1.08;
}

.radarHero p,
.radarPanel p,
.radarMetricCard em,
.radarDetailLine span,
.radarShopHead em,
.radarShopFoot span,
.radarRankList em,
.radarAlertList p,
.radarRuleList em,
.radarRuleList span,
.radarSelectedList em,
.radarTemplateList em,
.radarReportBody p,
.radarModal p {
  color: var(--text-2);
  line-height: 1.65;
}

.radarEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #67e8f9;
  font-size: 12px;
  font-weight: 950;
}

.radarEyebrow i,
.radarMetricDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22d3ee;
}

.radarHeroContext {
  min-width: 0;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(5, 7, 20, 0.36);
  padding: 14px;
}

.radarHeroContext span,
.radarHeroContext em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.radarHeroContext strong {
  color: var(--text-1);
}

.radarMetricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.radarMetricGrid.compact {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.radarMetricCard {
  position: relative;
  min-width: 0;
  min-height: 96px;
  display: grid;
  align-content: center;
  gap: 6px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 14px;
}

.radarMetricCard span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 850;
}

.radarMetricCard strong {
  color: var(--text-1);
  font-size: 26px;
  line-height: 1;
}

.radarMetricCard.interactive {
  width: 100%;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.radarMetricCard.interactive:hover {
  border-color: var(--primary-border-strong);
  transform: translateY(-1px);
}

.radarMetricCard.interactive:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.radarMetricCard em {
  min-width: 0;
  font-size: 12px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarMetricDot {
  position: absolute;
  top: 14px;
  right: 14px;
}

.radarMetricDot.green {
  background: var(--success);
}

.radarMetricDot.amber {
  background: var(--warning);
}

.radarMetricDot.red {
  background: var(--danger);
}

.radarMetricDot.purple {
  background: var(--primary-light);
}

.radarPanel {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.radarPanelHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.radarPanelHeader h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 21px;
  line-height: 1.2;
}

.radarPanelHeader p {
  margin: 6px 0 0;
  font-size: 13px;
}

.radarCoreSignals {
  grid-template-columns: minmax(260px, 0.75fr) repeat(3, minmax(0, 1fr));
  align-items: stretch;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.16), transparent 40%), var(--surface-panel);
}

.radarCoreIntro h2 {
  margin: 0 0 8px;
  color: var(--text-1);
  font-size: 24px;
}

.radarCoreSignals article {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 14px;
}

.radarModuleCardGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.radarModuleCardGrid article,
.radarSwotMini,
.radarSwotGrid article,
.radarTemplateList button,
.radarExportGrid span {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 14px;
}

.radarCardTitle,
.radarShopHead,
.radarShopFoot,
.radarAlertList article > div:first-child,
.radarSelectedList div,
.radarTemplateList button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.radarModuleCardGrid h3,
.radarSwotMini h3,
.radarTemplateList h3,
.radarReportBody h3,
.radarModal h2 {
  margin: 0;
  color: var(--text-1);
}

.radarModuleCardGrid ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 0 0 16px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
}

.radarModuleCardGrid li::marker {
  color: #2dd4bf;
}

.radarMonitorLayout,
.radarTwoColumn {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
  gap: 18px;
}

.radarTwoColumn.wideRight {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.8fr);
}

.radarSideStack {
  display: grid;
  align-content: start;
  gap: 18px;
}

.radarSegmented,
.radarCountPicker {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  padding: 4px;
}

.radarSegmented button,
.radarCountPicker button {
  min-width: 34px;
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.radarSegmented button.active,
.radarCountPicker button.active {
  background: #2dd4bf;
  color: #041016;
}

.radarTrendChart {
  height: 198px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.12), rgba(45, 212, 191, 0.04)),
    rgba(255, 255, 255, 0.025);
  padding: 18px;
}

.radarTrendBar {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.radarTrendBar strong,
.radarTrendBar em {
  color: var(--text-1);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.radarTrendBar em {
  color: var(--text-2);
}

.radarTrendBar span {
  width: 100%;
  max-width: 78px;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, #2dd4bf, #3b82f6);
}

.radarShopList,
.radarAlertList,
.radarRuleList,
.radarRankList,
.radarSelectedList,
.radarTemplateList,
.radarReportBody,
.radarStack {
  display: grid;
  gap: 10px;
}

.radarShopList article {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 14px;
}

.radarShopList article.paused {
  opacity: 0.68;
}

.radarAvatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #22d3ee, #2dd4bf);
  color: #041016;
  font-weight: 950;
}

.radarShopHead > div,
.radarShopFoot > span,
.radarSelectedList span,
.radarTemplateList span {
  min-width: 0;
}

.radarShopHead strong,
.radarRankList strong,
.radarAlertList strong,
.radarRuleList strong,
.radarSelectedList strong,
.radarTemplateList strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarShopHead em,
.radarRankList em,
.radarSelectedList em,
.radarTemplateList em {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarShopMetrics,
.radarTaskMetrics,
.radarSwotGrid,
.radarModalGrid,
.radarExportGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.radarShopMetrics span,
.radarTaskMetrics span {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 10px;
}

.radarShopMetrics em,
.radarTaskMetrics em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.radarShopMetrics strong,
.radarTaskMetrics strong {
  color: var(--text-1);
  font-size: 18px;
}

.radarShopFoot {
  align-items: flex-start;
}

.radarShopFoot > div,
.radarTableActions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.radarRankList button,
.radarRankList .cuiDataListActionItem {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.radarRankList button.active,
.radarRankList button:hover,
.radarRankList .cuiDataListActionItem.active,
.radarRankList .cuiDataListActionItem:hover {
  border-color: rgba(45, 212, 191, 0.42);
  background: rgba(45, 212, 191, 0.08);
}

.radarRankNo {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(14, 165, 233, 0.13);
  color: #93c5fd;
  font-weight: 950;
}

.radarTaskCard {
  background: #081120;
}

.radarTaskMetrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.radarDetailLine {
  min-width: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid var(--row-line);
  padding: 10px 0;
}

.radarDetailLine.wide {
  grid-column: 1 / -1;
}

.radarDetailLine strong {
  color: var(--text-1);
}

.radarCompareSummary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.4fr);
  gap: 16px;
}

.radarTableWrap {
  min-width: 0;
  overflow-x: auto;
}

.radarTable {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  color: var(--text-2);
  font-size: 13px;
}

.radarDataListTable.cuiDataList {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.radarDataListTable .cuiDataListBody {
  border: 0;
  background: transparent;
}

.radarDataListTable .cuiDataListBodyInner {
  min-width: 0;
}

.radarDataListTable .radarTable {
  display: grid;
}

.radarTable th,
.radarTable td,
.radarTable .cuiDataListTableHeadCell,
.radarTable .cuiDataListTableCell {
  border-bottom: 1px solid var(--row-line);
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
}

.radarTable th,
.radarTable .cuiDataListTableHeadCell {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.radarTable td:first-child,
.radarTable .cuiDataListTableCell:first-child {
  color: var(--text-1);
  font-weight: 850;
}

.radarField {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.radarField.wide {
  grid-column: 1 / -1;
}

.radarField span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.radarField input,
.radarField select,
.radarField textarea {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-1);
  font: inherit;
  outline: none;
  padding: 9px 11px;
}

.radarField textarea {
  min-height: 92px;
  resize: vertical;
}

.radarField input:focus,
.radarField select:focus,
.radarField textarea:focus {
  border-color: rgba(45, 212, 191, 0.48);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.13);
}

.radarCompareSlotGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.radarFilterBar {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 240px)) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.radarCategoryBar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radarCategoryBar button {
  min-height: 32px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-2);
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.radarCategoryBar button.active,
.radarCategoryBar button:hover {
  border-color: rgba(45, 212, 191, 0.42);
  background: rgba(45, 212, 191, 0.12);
  color: var(--text-1);
}

.radarSelectedList > div {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 11px;
}

.radarTemplateList button {
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.radarAlertList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radarAlertList article,
.radarRuleList article,
.radarRuleList .cuiDataListItem {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 14px;
}

.radarAlertMeta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text-3);
  font-size: 12px;
}

.radarReportPreview {
  padding: 0;
  overflow: hidden;
}

.radarReportCover {
  display: grid;
  gap: 14px;
  border-bottom: 1px solid var(--line-dark);
  background:
    linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(16, 185, 129, 0.1)),
    var(--surface-panel-hover);
  padding: 28px;
}

.radarReportCover span {
  color: #67e8f9;
  font-size: 12px;
  font-weight: 950;
}

.radarReportCover h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 30px;
}

.radarReportCover > div {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.radarReportBody {
  padding: 22px;
}

.radarModalBackdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 7, 20, 0.76);
  padding: 24px;
}

.radarModal {
  width: min(760px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  display: grid;
  gap: 14px;
  border: 1px solid var(--line-dark-strong);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: var(--shadow-dark);
  padding: 20px;
}

.radarModalHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.radarModalHead span {
  color: #67e8f9;
  font-size: 12px;
  font-weight: 950;
}

.radarModalGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radarExportGrid span {
  color: var(--text-2);
}

.radarToast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  max-width: 360px;
  box-shadow: var(--shadow-dark);
}

@media (max-width: 1280px) {
  .radarTopbar,
  .radarHero,
  .radarMonitorLayout,
  .radarTwoColumn,
  .radarTwoColumn.wideRight,
  .radarCompareSummary {
    grid-template-columns: 1fr;
  }

  .radarHeroContext {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .radarMetricGrid,
  .radarMetricGrid.compact,
  .radarModuleCardGrid,
  .radarCoreSignals,
  .radarAlertList,
  .radarShopMetrics,
  .radarTaskMetrics,
  .radarModalGrid,
  .radarExportGrid,
  .radarCompareSlotGrid {
    grid-template-columns: 1fr;
  }

  .radarTopbar,
  .radarHero,
  .radarPanel {
    padding: 14px;
  }
}

.radarPage {
  --radar-blue: #1677ff;
  --radar-blue-strong: #0f68e8;
  --radar-blue-soft: #eaf3ff;
  --radar-panel: rgba(255, 255, 255, 0.96);
  --radar-panel-soft: rgba(248, 251, 255, 0.92);
  --radar-line: #dbe7f3;
  --radar-line-soft: #edf3fa;
  --radar-text: #0f1b33;
  --radar-body: #41516a;
  --radar-muted: #7b8aa3;
  --radar-shadow: 0 16px 44px rgba(33, 72, 128, 0.08);
  gap: 14px;
  color: var(--radar-text);
}

.radarPage .statusPill {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border-color: var(--radar-line);
  background: #f5f8fc;
  color: var(--radar-body);
  font-size: 11px;
  line-height: 1;
}

.radarPage .statusPill.cyan,
.radarPage .statusPill.purple {
  border-color: rgba(22, 119, 255, 0.2);
  background: var(--radar-blue-soft);
  color: var(--radar-blue);
}

.radarPage .statusPill.green {
  border-color: rgba(16, 185, 129, 0.22);
  background: #eafaf3;
  color: #059669;
}

.radarPage .statusPill.amber {
  border-color: rgba(245, 158, 11, 0.22);
  background: #fff4e4;
  color: #d97706;
}

.radarPage .statusPill.red {
  border-color: rgba(239, 68, 68, 0.2);
  background: #fff0f1;
  color: #dc2626;
}

.radarTopbar {
  grid-template-columns: minmax(240px, auto) minmax(340px, 0.9fr) auto;
  border-color: var(--radar-line);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 28px rgba(33, 72, 128, 0.05);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
}

.radarTopbar strong,
.radarHero h1,
.radarPanelHeader h2,
.radarModuleCardGrid h3,
.radarSwotMini h3,
.radarTemplateList h3,
.radarReportBody h3,
.radarModal h2,
.radarShopHead strong,
.radarRankList strong,
.radarAlertList strong,
.radarRuleList strong,
.radarSelectedList strong,
.radarTemplateList strong,
.radarTable td:first-child,
.radarDetailLine strong {
  color: var(--radar-text);
}

.radarSearch,
.radarSegmented,
.radarCountPicker,
.radarField input,
.radarField select,
.radarField textarea {
  border-color: var(--radar-line);
  background: #f6f9fd;
  color: var(--radar-text);
}

.radarSearch input {
  color: var(--radar-text);
}

.radarSearch input::placeholder,
.radarHero p,
.radarPanel p,
.radarMetricCard em,
.radarDetailLine span,
.radarShopHead em,
.radarShopFoot span,
.radarRankList em,
.radarAlertList p,
.radarRuleList em,
.radarRuleList span,
.radarSelectedList em,
.radarTemplateList em,
.radarReportBody p,
.radarModal p {
  color: var(--radar-body);
}

.radarModuleTabs button,
.radarButton,
.radarTableActions button,
.radarShopFoot button,
.radarModalHead button {
  border-color: var(--radar-line);
  background: #ffffff;
  box-shadow: 0 5px 14px rgba(33, 72, 128, 0.05);
  color: var(--radar-body);
}

.radarModuleTabs button.active,
.radarButton.primary,
.radarSegmented button.active,
.radarCountPicker button.active {
  border-color: var(--radar-blue);
  background: var(--radar-blue);
  box-shadow: 0 12px 24px rgba(22, 119, 255, 0.2);
  color: #ffffff;
}

.radarButton.soft,
.radarModuleTabs button:hover,
.radarTableActions button:hover,
.radarShopFoot button:hover {
  border-color: rgba(22, 119, 255, 0.24);
  background: var(--radar-blue-soft);
  color: var(--radar-blue);
}

.radarButton.ghost {
  background: #ffffff;
  color: var(--radar-body);
}

.radarHero {
  min-height: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  border: 0;
  background: transparent;
  padding: 4px 2px 8px;
}

.radarHero::before {
  display: none;
}

.radarHeroContext {
  display: none;
}

.radarHero h1 {
  margin: 8px 0 8px;
  font-size: 32px;
  letter-spacing: 0;
}

.radarEyebrow,
.radarModalHead span,
.radarReportCover span {
  color: var(--radar-blue);
}

.radarEyebrow i {
  background: var(--radar-blue);
}

.radarPanel,
.radarMetricCard,
.radarModuleCardGrid article,
.radarSwotMini,
.radarSwotGrid article,
.radarTemplateList button,
.radarExportGrid span,
.radarShopList article,
.radarAlertList article,
.radarRuleList article,
.radarRuleList .cuiDataListItem,
.radarSelectedList > div {
  border-color: var(--radar-line);
  background: var(--radar-panel);
  box-shadow: var(--radar-shadow);
}

.radarPanel {
  gap: 15px;
}

.radarMetricCard {
  min-height: 116px;
  align-content: center;
  padding: 18px 82px 18px 20px;
}

.radarMetricCard span,
.radarPanelHeader p,
.radarField span,
.radarTable th,
.radarShopMetrics em,
.radarTaskMetrics em,
.radarTrendBar em {
  color: var(--radar-muted);
}

.radarMetricCard strong {
  color: var(--radar-text);
  font-size: 28px;
}

.radarMetricDot {
  top: 50%;
  right: 20px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--radar-blue-soft);
  transform: translateY(-50%);
}

.radarMetricDot.green {
  background: #dff8ee;
}

.radarMetricDot.amber {
  background: #fff0dc;
}

.radarMetricDot.red {
  background: #ffe4e7;
}

.radarMetricDot.purple {
  background: #efe9ff;
}

.radarMonitorLayout,
.radarTwoColumn {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.38fr);
}

.radarTwoColumn.wideRight {
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.5fr);
}

.radarTrendChart {
  border-color: var(--radar-line);
  background:
    repeating-linear-gradient(to top, transparent 0, transparent 39px, var(--radar-line-soft) 40px),
    #ffffff;
}

.radarTrendBar span {
  background: linear-gradient(180deg, #1677ff, #7db7ff);
}

.radarTrendBar strong {
  color: var(--radar-text);
}

.radarRankList button,
.radarRankList .cuiDataListActionItem {
  border-color: var(--radar-line);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(33, 72, 128, 0.04);
}

.radarRankList button.active,
.radarRankList button:hover,
.radarRankList .cuiDataListActionItem.active,
.radarRankList .cuiDataListActionItem:hover {
  border-color: rgba(22, 119, 255, 0.3);
  background: var(--radar-blue-soft);
}

.radarRankNo {
  background: #eff5ff;
  color: var(--radar-blue);
}

.radarTaskCard {
  background: var(--radar-panel);
}

.radarShopMetrics span,
.radarTaskMetrics span {
  border-color: var(--radar-line-soft);
  background: var(--radar-panel-soft);
}

.radarShopMetrics strong,
.radarTaskMetrics strong {
  color: var(--radar-text);
}

.radarAvatar {
  background: var(--radar-blue);
  color: #ffffff;
}

.radarTable {
  color: var(--radar-body);
}

.radarTable th,
.radarTable td {
  border-bottom-color: var(--radar-line-soft);
}

.radarTable tbody tr:hover {
  background: #f8fbff;
}

.radarLineChart {
  min-height: 230px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 18px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background:
    repeating-linear-gradient(to top, transparent 0, transparent 39px, var(--radar-line-soft) 40px),
    #ffffff;
  padding: 24px 18px 16px;
}

.radarLinePoint {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 5px;
}

.radarLinePoint span {
  min-height: 18px;
  border-radius: 999px 999px 6px 6px;
}

.radarLinePoint .critical {
  background: #ff4d4f;
}

.radarLinePoint .warning {
  background: #ff9f1a;
}

.radarLinePoint .info {
  background: #1677ff;
}

.radarLinePoint em {
  grid-column: 1 / -1;
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.radarDistribution,
.radarReportInsightGrid {
  display: grid;
  grid-template-columns: minmax(170px, 0.42fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.radarDonut {
  width: min(180px, 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle, #ffffff 0 43%, transparent 44%),
    conic-gradient(
      #1677ff 0 34%,
      #ff9f1a 34% 59%,
      #7bb8ff 59% 76%,
      #9f7aea 76% 92%,
      #10b981 92% 100%
    );
  justify-self: center;
  box-shadow: inset 0 0 0 1px var(--radar-line);
}

.radarDonut.report {
  background:
    radial-gradient(circle, #ffffff 0 43%, transparent 44%),
    conic-gradient(#1677ff 0 50%, #ff9f1a 50% 75%, #7bb8ff 75% 91%, #10b981 91% 100%);
}

.radarDonut strong,
.radarDonut span {
  grid-area: 1 / 1;
  color: var(--radar-text);
}

.radarDonut strong {
  margin-top: -16px;
  font-size: 30px;
  font-weight: 950;
}

.radarDonut span {
  margin-top: 36px;
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 850;
}

.radarDistributionList,
.radarSourceChecklist,
.radarReportBullets {
  display: grid;
  gap: 10px;
}

.radarDistributionList span,
.radarSourceChecklist label,
.radarHighlightRow {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.radarDistributionList i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--radar-blue);
}

.radarDistributionList i.orange {
  background: #ff9f1a;
}

.radarDistributionList i.cyan {
  background: #7bb8ff;
}

.radarDistributionList i.purple {
  background: #9f7aea;
}

.radarDistributionList i.green {
  background: #10b981;
}

.radarDistributionList em,
.radarSourceChecklist span,
.radarReportBullets span,
.radarHighlightRow strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-body);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarDistributionList strong {
  color: var(--radar-text);
  font-size: 13px;
}

.radarSourceChecklist {
  grid-column: 1 / -1;
}

.radarSourceChecklist label {
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  padding: 11px;
}

.radarSourceChecklist input {
  width: 16px;
  height: 16px;
}

.radarSourceChecklist em {
  border-radius: 999px;
  background: #eff5ff;
  color: var(--radar-blue);
  padding: 3px 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.radarReportPreviewCard {
  align-content: start;
}

.radarReportCoverMini {
  min-height: 210px;
  display: grid;
  align-content: center;
  gap: 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(22, 119, 255, 0.14), rgba(125, 183, 255, 0.45)), #eaf3ff;
  overflow: hidden;
  padding: 28px;
}

.radarReportCoverMini span,
.radarReportCoverMini em {
  color: var(--radar-blue);
  font-style: normal;
  font-weight: 900;
}

.radarReportCoverMini strong {
  color: var(--radar-text);
  font-size: 34px;
  line-height: 1.05;
}

.radarReportBullets {
  border: 1px solid var(--radar-line-soft);
  border-radius: 8px;
  background: #f8fbff;
  padding: 14px;
}

.radarReportBullets strong {
  color: var(--radar-text);
}

.radarReportInsightGrid {
  grid-template-columns: minmax(170px, 0.35fr) minmax(220px, 0.45fr) minmax(240px, 0.55fr);
}

.radarHighlightRow {
  grid-template-columns: 26px minmax(0, 1fr);
}

.radarHighlightRow span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #15233d;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

.radarReportCover {
  border-bottom-color: var(--radar-line);
  background: linear-gradient(135deg, rgba(22, 119, 255, 0.16), rgba(125, 183, 255, 0.42)), #edf6ff;
}

.radarReportCover h2 {
  color: var(--radar-text);
}

.radarModalBackdrop {
  background: rgba(15, 27, 51, 0.44);
}

.radarModal {
  border-color: var(--radar-line);
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 27, 51, 0.2);
}

@media (max-width: 1280px) {
  .radarMonitorLayout,
  .radarTwoColumn,
  .radarTwoColumn.wideRight,
  .radarReportInsightGrid,
  .radarDistribution {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .radarTopbar,
  .radarHero {
    grid-template-columns: 1fr;
  }

  .radarMetricCard {
    padding-right: 74px;
  }
}

.radarPage {
  max-width: none;
}

.radarTitleRow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.radarTitleRow h1 {
  margin: 0;
  color: var(--radar-text);
  font-size: 30px;
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: 0;
}

.radarTitleRow span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(22, 119, 255, 0.24);
  border-radius: 999px;
  background: #eaf3ff;
  color: #1677ff;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 950;
}

.radarHero {
  align-items: end;
}

.radarHero h1 {
  margin: 0;
}

.radarHero p {
  max-width: 880px;
  margin: 8px 0 0;
  color: #6d7d96;
  font-size: 14px;
}

.radarHeroActions,
.radarPanelActions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.radarPanel {
  border-radius: 14px;
  padding: 18px;
}

.radarPanelHeader {
  align-items: center;
}

.radarPanelHeader h2 {
  font-size: 18px;
  font-weight: 950;
}

.radarPanelHeader p {
  margin-top: 5px;
}

.radarMetricGrid {
  gap: 14px;
}

.radarMetricCard {
  min-height: 112px;
  border-radius: 14px;
  padding: 18px 82px 18px 20px;
}

.radarMetricCard strong {
  font-size: 29px;
  line-height: 1.02;
}

.radarMetricDot {
  display: grid;
  place-items: center;
  color: #1677ff;
}

.radarMetricDot.green {
  color: #10a76f;
}

.radarMetricDot.amber {
  color: #f97316;
}

.radarMetricDot.red {
  color: #ef4444;
}

.radarMetricDot.purple {
  color: #7c3aed;
}

.radarMonitorLayout {
  grid-template-columns: 1fr;
  align-items: start;
}

.radarMonitorMainStack {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.radarTwoColumn.wideRight {
  grid-template-columns: minmax(0, 1fr) 390px;
  align-items: start;
}

.radarTwoColumn.wideRight.radarCompareResultLayout {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: stretch;
}

.radarTwoColumn.wideRight.radarCompareResultLayout > .radarCompareCorePanel {
  min-height: 626px;
}

.radarCompareResultRail {
  min-height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 10px;
}

.radarCompareResultRail > .radarPanel {
  min-height: 0;
}

@media (min-width: 1281px) {
  .radarTwoColumn.wideRight.radarCompareConfigLayout {
    align-items: stretch;
  }

  .radarCompareConfigLayout > .radarCompareRightRail {
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
  }

  .radarCompareConfigLayout > .radarCompareRightRail > .radarPanel {
    min-height: 0;
  }

  .radarCompareConfigLayout > .radarStack > .radarCompareBuilder {
    height: 100%;
  }
}

.radarCompareResultConclusionPanel {
  gap: 12px;
  padding: 16px;
}

.radarCompareResultConclusionPanel .radarSwotGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.radarCompareResultConclusionPanel .radarSwotGrid article {
  min-height: 142px;
  gap: 8px;
  padding: 12px;
}

.radarCompareResultConclusionPanel .radarSwotGrid strong {
  font-size: 14px;
  line-height: 1.25;
}

.radarCompareResultConclusionPanel .radarSwotGrid span {
  font-size: 12px;
  line-height: 1.45;
}

.radarCompareResultDecisionPanel {
  align-content: start;
  gap: 14px;
  padding: 16px;
}

.radarCompareResultDecisionPanel .radarBullets {
  gap: 8px;
}

.radarCompareResultDecisionPanel .radarButton {
  align-self: end;
  margin-top: auto;
}

.radarMonitorBoard {
  min-height: 432px;
}

.radarTrendChart {
  height: 224px;
  padding: 18px 22px 14px;
}

.radarTrendBar {
  align-content: end;
}

.radarTrendBar span {
  max-width: 44px;
  border-radius: 8px 8px 3px 3px;
  box-shadow: 0 10px 20px rgba(22, 119, 255, 0.18);
}

.radarRankList {
  gap: 4px;
}

.radarRankList button,
.radarRankList .cuiDataListActionItem {
  min-height: 58px;
  grid-template-columns: 22px 36px minmax(0, 1fr) auto 15px;
  gap: 10px;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
  padding: 9px 0;
}

.radarRankList button:last-child,
.radarRankList .cuiDataListActionItem:last-child {
  border-bottom: 0;
}

.radarRankNo {
  width: auto;
  height: auto;
  background: transparent;
  color: #0f1b33;
  font-size: 18px;
}

.radarFocusLogo,
.radarAvatar.small,
.radarOwner span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #0f1b33;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

.radarFocusCopy {
  min-width: 0;
}

.radarQuickList {
  display: grid;
  gap: 12px;
}

.radarQuickEntry {
  min-width: 0;
  min-height: 74px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--radar-text);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(33, 72, 128, 0.04);
}

.radarQuickEntry:hover {
  border-color: rgba(22, 119, 255, 0.28);
  background: #f7fbff;
}

.radarQuickEntry > .radarQuickEntryIcon {
  grid-row: 1 / span 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eaf3ff;
  color: #1677ff;
}

.radarQuickEntry.red > .radarQuickEntryIcon {
  background: #fff0f1;
  color: #ef4444;
}

.radarQuickEntry.cyan > .radarQuickEntryIcon {
  background: #eaf8ff;
  color: #0284c7;
}

.radarQuickEntry strong,
.radarQuickEntry em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarQuickEntry em {
  color: var(--radar-body);
  font-size: 12px;
  font-style: normal;
}

.radarOwnStorePanel {
  overflow: hidden;
}

.radarOwnStoreCard {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1fr);
  gap: 14px;
  align-items: stretch;
}

.radarOwnStoreIdentity,
.radarOwnStoreInsight,
.radarOwnStoreMetrics span {
  min-width: 0;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(33, 72, 128, 0.04);
}

.radarOwnStoreIdentity {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.radarOwnStoreLogo {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #1677ff, #7db7ff);
  color: #ffffff;
  font-size: 20px;
  font-weight: 950;
  box-shadow: 0 12px 26px rgba(22, 119, 255, 0.22);
}

.radarOwnStoreIdentity strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 18px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarOwnStoreIdentity em {
  display: block;
  margin-top: 4px;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.radarOwnStoreMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.radarOwnStoreMetrics span {
  display: grid;
  gap: 6px;
  padding: 13px;
}

.radarOwnStoreMetrics em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.radarOwnStoreMetrics strong {
  color: var(--radar-text);
  font-size: 20px;
  line-height: 1;
}

.radarOwnStoreInsight {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  border-color: rgba(22, 119, 255, 0.18);
  background: #f2f7ff;
  padding: 14px;
}

.radarOwnStoreInsight strong {
  color: var(--radar-text);
  font-size: 14px;
}

.radarOwnStoreInsight p {
  margin: 0;
  color: var(--radar-body);
  font-size: 13px;
}

.radarTableToolbar {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.radarInlineSearch {
  min-height: 36px;
  min-width: 210px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 999px;
  background: #f7fbff;
  color: var(--radar-muted);
  padding: 0 12px;
}

.radarInlineSearch input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
}

.radarTableToolbar select,
.radarTableToolbar > button,
.radarTextLink {
  min-height: 36px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  padding: 0 12px;
}

.radarTableToolbar > button {
  width: 36px;
  display: grid;
  place-items: center;
  padding: 0;
}

.radarTextLink {
  border: 0;
  background: transparent;
  color: #1677ff;
  padding: 0;
}

.radarTable {
  min-width: 860px;
}

.radarTable th {
  background: #fbfdff;
  text-transform: none;
  letter-spacing: 0;
}

.radarTable td {
  color: #52627a;
}

.radarTable td:first-child {
  min-width: 230px;
}

.radarTable small {
  display: block;
  margin-top: 4px;
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 700;
}

.radarTableCheck {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.radarTableCheck input {
  width: 15px;
  height: 15px;
}

.radarShopIdentity {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.radarShopIdentity > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.radarShopIdentity strong {
  color: var(--radar-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarShopIdentity em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.radarOwner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--radar-text);
  font-weight: 850;
}

.radarOwner span {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe3c2, #f6a15a);
  color: #753b0b;
}

.radarTableActions button {
  width: 30px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  padding: 0;
}

.radarPager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  border-top: 1px solid var(--radar-line-soft);
  color: var(--radar-muted);
  padding-top: 12px;
  font-size: 12px;
  font-weight: 850;
}

.radarPager .cuiPaginationInfo {
  margin-right: auto;
}

.radarPager .cuiPaginationPages .cuiButton,
.radarPager .cuiPaginationEllipsis,
.radarPager .cuiPaginationJump input {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-body);
  padding: 0;
  text-align: center;
  font: inherit;
  font-weight: 900;
}

.radarPager .cuiPaginationPages .cuiButton.active,
.radarPager .cuiPaginationPages .cuiButton[aria-current='page'] {
  border-color: #1677ff;
  background: #1677ff;
  color: #ffffff;
}

.radarPager .cuiPaginationJump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.radarCompareConfig {
  display: grid;
  grid-template-columns: minmax(260px, 0.62fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: stretch;
}

.radarCompareCountBlock {
  display: grid;
  gap: 9px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: #ffffff;
  padding: 14px;
}

.radarCompareCountBlock strong {
  color: var(--radar-text);
}

.radarCompareCountBlock span {
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 800;
}

.radarSlotCards {
  display: grid;
  grid-template-columns: repeat(6, minmax(112px, 1fr));
  gap: 12px;
}

.radarSlotCard {
  min-width: 0;
  display: grid;
  gap: 7px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}

.radarSlotCard > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #1677ff;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

.radarSlotCard strong,
.radarSlotCard em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarSlotCard em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
}

.radarSlotCard select {
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  padding: 0 9px;
}

.radarCompareDataGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.radarCompareCharts {
  display: grid;
  gap: 12px;
}

.radarSparkChart,
.radarCategoryCompare {
  display: grid;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}

.radarSparkChart {
  gap: 6px;
}

.radarChartLegend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 850;
}

.radarChartLegend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.radarChartLegend span::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.radarChartLegend .blue {
  color: #1677ff;
}

.radarChartLegend .green {
  color: #10b981;
}

.radarChartLegend .orange {
  color: #f97316;
}

.radarChartLegend .red {
  color: #ef4444;
}

.radarChartLegend .muted {
  color: #93a4bc;
}

.radarSparkChart svg,
.radarLineChart svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.radarSparkChart svg line,
.radarLineChart svg line {
  stroke: #dfe8f4;
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.radarSparkChart svg text,
.radarLineChart svg text {
  fill: #8a99af;
  font-size: 11px;
  font-weight: 800;
}

.radarSparkChart polyline,
.radarLineChart polyline {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.radarSparkChart .blue,
.radarLineChart .blue {
  stroke: #1677ff;
  fill: #1677ff;
}

.radarSparkChart .green,
.radarLineChart .green {
  stroke: #10b981;
  fill: #10b981;
}

.radarSparkChart .orange,
.radarLineChart .orange {
  stroke: #f97316;
  fill: #f97316;
}

.radarLineChart .red {
  stroke: #ef4444;
  fill: #ef4444;
}

.radarLineChart .area {
  stroke: none;
  opacity: 0.12;
}

.radarLineChart .area.orange {
  opacity: 0.16;
}

.radarLineChart .area.blue {
  opacity: 0.1;
}

.radarCategoryCompare {
  min-height: 166px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
}

.radarCategoryCompare > div {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 3px;
}

.radarCategoryCompare span {
  min-height: 14px;
  border-radius: 4px 4px 1px 1px;
}

.radarCategoryCompare span:nth-child(1) {
  background: #1677ff;
}

.radarCategoryCompare span:nth-child(2) {
  background: #10b981;
}

.radarCategoryCompare span:nth-child(3) {
  background: #f97316;
}

.radarCategoryCompare em {
  grid-column: 1 / -1;
  min-width: 0;
  color: var(--radar-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarTemplateList {
  gap: 10px;
}

.radarTemplateList button {
  min-height: 86px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  border-radius: 12px;
}

.radarTemplateIcon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #eaf3ff;
  color: #1677ff;
}

.radarTemplateIcon.tone-2 {
  background: #fff2df;
  color: #f97316;
}

.radarTemplateIcon.tone-3 {
  background: #fff0f1;
  color: #ef4444;
}

.radarTemplateList b {
  border-radius: 7px;
  background: #1677ff;
  color: #ffffff;
  padding: 7px 10px;
  font-size: 12px;
}

.radarBullets {
  display: grid;
  gap: 9px;
  color: var(--radar-body);
  font-size: 13px;
  font-weight: 800;
}

.radarBullets span {
  position: relative;
  min-width: 0;
  padding-left: 14px;
}

.radarBullets span::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #1677ff;
}

.radarTwinPanels {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.72fr);
  gap: 16px;
}

.radarAlertsLayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.radarAlertsTopRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.radarAlertsTopRow > .radarPanel,
.radarAlertsTopRow > .radarSideStack {
  min-width: 0;
}

.radarAlertsLayout > .radarStack {
  gap: 14px;
}

.radarAlertsLayout .radarTwinPanels {
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.72fr);
  align-items: stretch;
}

@media (max-width: 1080px) {
  .radarAlertsTopRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .radarAlertsTopRow {
    grid-template-columns: 1fr;
  }
}

.radarLineChart {
  min-height: 260px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}

.radarLineChart .radarChartLegend {
  min-height: 24px;
}

.radarLineChart svg {
  display: block;
  width: 100%;
  height: 252px;
}

.radarDistribution {
  min-height: 260px;
}

.radarRuleBoard {
  display: grid;
  gap: 0;
}

.radarRuleBoard article {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--radar-line-soft);
  padding: 12px 0;
}

.radarRuleBoard article:last-child {
  border-bottom: 0;
}

.radarRuleBoard strong,
.radarRuleBoard em,
.radarRuleBoard small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarRuleBoard strong {
  color: var(--radar-text);
  font-size: 13px;
}

.radarRuleBoard em,
.radarRuleBoard small {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
}

.radarPriority {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #e9eef6;
  color: #51627c;
  font-size: 12px;
  font-weight: 950;
}

.radarPriority.p1 {
  background: #ef4444;
  color: #ffffff;
}

.radarPriority.p2 {
  background: #fb923c;
  color: #ffffff;
}

.radarPriority.p3 {
  background: #facc15;
  color: #7a4b00;
}

.radarSwitch {
  justify-self: end;
}

.radarSwitch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radarSwitch span {
  width: 36px;
  height: 20px;
  display: block;
  border-radius: 999px;
  background: #d7e2ee;
  padding: 2px;
}

.radarSwitch span::after {
  content: '';
  width: 16px;
  height: 16px;
  display: block;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 27, 51, 0.18);
}

.radarSwitch input:checked + span {
  background: #10b981;
}

.radarSwitch input:checked + span::after {
  transform: translateX(16px);
}

.radarMiniCardGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.radarMiniCardGrid .radarPanel {
  min-height: 190px;
  padding: 16px;
}

.radarChannelList {
  display: grid;
  gap: 10px;
}

.radarChannelList > span {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--radar-body);
  font-size: 13px;
  font-weight: 850;
}

.radarFloatingActions {
  position: sticky;
  bottom: 16px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 48px rgba(33, 72, 128, 0.14);
  padding: 12px;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.radarFloatingActions label {
  display: grid;
  gap: 5px;
}

.radarFloatingActions label span {
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 850;
}

.radarFloatingActions select {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  padding: 0 10px;
}

.radarFloatingActions .radarButton {
  width: 100%;
  justify-content: center;
}

.radarPage .radarHeroPrimaryLarge {
  min-height: 48px;
  border-radius: 14px;
  font-size: 14px;
  padding-inline: 18px;
}

.radarAlertList table td:first-child {
  min-width: 0;
}

.radarAlertTablePanel {
  overflow: hidden;
}

.radarAlertTablePanel .radarPanelHeader {
  align-items: start;
}

.radarAlertTable {
  min-width: 980px;
  table-layout: fixed;
}

.radarAlertTable th,
.radarAlertTable td,
.radarAlertTable .cuiDataListTableHeadCell,
.radarAlertTable .cuiDataListTableCell {
  padding: 13px 10px;
}

.radarAlertTable th:nth-child(1),
.radarAlertTable td:nth-child(1),
.radarAlertTable .cuiDataListTableHeadCell:nth-child(1),
.radarAlertTable .cuiDataListTableCell:nth-child(1) {
  width: 96px;
  min-width: 0;
}

.radarAlertTable th:nth-child(2),
.radarAlertTable td:nth-child(2),
.radarAlertTable .cuiDataListTableHeadCell:nth-child(2),
.radarAlertTable .cuiDataListTableCell:nth-child(2) {
  width: 260px;
}

.radarAlertTable th:nth-child(3),
.radarAlertTable td:nth-child(3),
.radarAlertTable .cuiDataListTableHeadCell:nth-child(3),
.radarAlertTable .cuiDataListTableCell:nth-child(3) {
  width: 122px;
}

.radarAlertTable th:nth-child(4),
.radarAlertTable td:nth-child(4),
.radarAlertTable .cuiDataListTableHeadCell:nth-child(4),
.radarAlertTable .cuiDataListTableCell:nth-child(4) {
  width: 152px;
}

.radarAlertTable th:nth-child(5),
.radarAlertTable td:nth-child(5),
.radarAlertTable .cuiDataListTableHeadCell:nth-child(5),
.radarAlertTable .cuiDataListTableCell:nth-child(5) {
  width: 148px;
}

.radarAlertTable th:nth-child(6),
.radarAlertTable td:nth-child(6),
.radarAlertTable th:nth-child(7),
.radarAlertTable td:nth-child(7),
.radarAlertTable .cuiDataListTableHeadCell:nth-child(6),
.radarAlertTable .cuiDataListTableCell:nth-child(6),
.radarAlertTable .cuiDataListTableHeadCell:nth-child(7),
.radarAlertTable .cuiDataListTableCell:nth-child(7) {
  width: 104px;
}

.radarAlertTable th:nth-child(8),
.radarAlertTable td:nth-child(8),
.radarAlertTable .cuiDataListTableHeadCell:nth-child(8),
.radarAlertTable .cuiDataListTableCell:nth-child(8) {
  width: 116px;
}

.radarAlertTitleCell {
  display: grid;
  gap: 3px;
}

.radarAlertTitleCell strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarAlertTable .radarTableActions button {
  width: auto;
  min-width: 42px;
  padding: 0 9px;
}

.radarAlertsLayout .radarFloatingActions {
  position: static;
  box-shadow: 0 12px 30px rgba(33, 72, 128, 0.1);
}

.radarMoreButton {
  justify-self: center;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: #1677ff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.radarReportInsightGrid {
  grid-template-columns:
    minmax(260px, 0.95fr)
    minmax(220px, 0.72fr)
    minmax(270px, 0.9fr)
    minmax(300px, 1fr);
  align-items: stretch;
}

.radarReportOverviewCard {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f9fcff);
  box-shadow: 0 12px 30px rgba(33, 72, 128, 0.06);
  padding: 16px;
}

.radarReportOverviewCard > strong,
.radarReportOverviewCard h3 {
  margin: 0;
  color: var(--radar-text);
  font-size: 15px;
  font-weight: 950;
}

.radarReportOverviewCard p {
  margin: 0;
  color: var(--radar-body);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.6;
}

.radarReportOverviewCard.visual {
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
}

.radarReportOverviewCard.visual .radarDonut {
  width: 150px;
}

.radarReportOverviewCard.visual > div:last-child {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.radarReportOverviewCard.visual > div:last-child strong {
  color: var(--radar-text);
  font-size: 16px;
  font-weight: 950;
}

.radarReportStatList {
  display: grid;
  gap: 8px;
}

.radarReportStatList span {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(74px, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  border-bottom: 1px solid var(--radar-line-soft);
  padding-bottom: 8px;
}

.radarReportStatList span:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.radarReportStatList em,
.radarReportStatList small {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarReportStatList b {
  color: var(--radar-text);
  font-size: 14px;
  font-weight: 950;
}

.radarReportStatList small {
  grid-column: 1 / -1;
  color: var(--radar-body);
}

.radarReportOverviewCard.top {
  gap: 10px;
}

.radarReportOverviewCard.top .radarHighlightRow {
  min-height: 30px;
  border-bottom: 1px solid var(--radar-line-soft);
  padding-bottom: 8px;
}

.radarReportOverviewCard.top .radarHighlightRow:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.radarReportTrendBars {
  display: grid;
  gap: 10px;
}

.radarReportTrendBars span {
  min-width: 0;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
}

.radarReportTrendBars em,
.radarReportTrendBars b {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-body);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarReportTrendBars b {
  color: var(--radar-text);
  text-align: right;
}

.radarReportTrendBars i {
  position: relative;
  height: 8px;
  display: block;
  border-radius: 999px;
  background: #1677ff;
}

.radarReportTrendBars span::before {
  content: '';
  grid-column: 2;
  grid-row: 1;
  height: 8px;
  border-radius: 999px;
  background: #edf3fa;
}

.radarReportTrendBars i {
  grid-column: 2;
  grid-row: 1;
}

.radarReportTrendBars .tone-green i {
  background: #10b981;
}

.radarReportTrendBars .tone-amber i {
  background: #ff9f1a;
}

.radarReportTrendBars .tone-blue i {
  background: #1677ff;
}

.radarReportActionList {
  display: grid;
  gap: 0;
  border: 1px solid var(--radar-line-soft);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.radarReportActionList article,
.radarReportActionList .cuiDataListItem {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 10px;
  border-bottom: 1px solid var(--radar-line-soft);
  padding: 12px;
}

.radarReportActionList article:last-child,
.radarReportActionList .cuiDataListItem:last-child {
  border-bottom: 0;
}

.radarReportActionList strong,
.radarReportActionList span,
.radarReportActionList em,
.radarReportActionList .cuiDataListItemTitle,
.radarReportActionList .cuiDataListItemDescription {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarReportActionList strong,
.radarReportActionList .cuiDataListItemTitle {
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
}

.radarReportActionList span,
.radarReportActionList em,
.radarReportActionList .cuiDataListItemDescription {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.radarReportActionList .statusPill {
  grid-column: 1 / -1;
  justify-self: start;
}

.radarPage .radarFlowStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.radarPage .radarFlowStrip span {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 3px 10px;
  align-items: center;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 34px rgba(33, 72, 128, 0.06);
  padding: 12px;
}

.radarPage .radarFlowStrip b {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #1677ff;
  color: #ffffff;
  font-size: 12px;
}

.radarPage .radarFlowStrip strong,
.radarPage .radarFlowStrip em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarFlowStrip strong {
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
}

.radarPage .radarFlowStrip em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.radarPage .radarWorkbenchLead {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(213, 223, 237, 0.82);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 48px rgba(45, 76, 123, 0.06);
  padding: 14px;
}

.radarPage .radarWorkbenchLead .radarMetricGrid {
  gap: 10px;
}

.radarPage .radarWorkbenchLead .radarMetricCard {
  min-height: 96px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: none;
  padding: 16px 72px 16px 18px;
}

.radarPage .radarWorkbenchLead .radarFlowStrip {
  gap: 10px;
}

.radarPage .radarWorkbenchLead .radarFlowStrip span {
  border-color: var(--radar-line-soft);
  border-radius: 13px;
  background: #ffffff;
  box-shadow: none;
  padding: 10px;
}

.radarPage .radarDecisionLayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.radarPage .radarWorkbenchMain,
.radarPage .radarWorkbenchSide {
  gap: 14px;
}

.radarPage .radarDecisionTodoPanel,
.radarPage .radarDecisionBattlePanel,
.radarPage .radarDecisionReportPanel {
  border-color: rgba(213, 223, 237, 0.88);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 42px rgba(45, 76, 123, 0.07);
  overflow: hidden;
}

.radarPage .radarDecisionTodoPanel .radarPanelHeader,
.radarPage .radarDecisionBattlePanel .radarPanelHeader,
.radarPage .radarDecisionReportPanel .radarPanelHeader {
  padding-bottom: 2px;
}

.radarPage .radarDecisionTodoPanel .radarTableWrap {
  border: 1px solid var(--radar-line-soft);
  border-radius: 14px;
  background: #ffffff;
}

.radarPage .radarDecisionTodoPanel .radarTable th,
.radarPage .radarDecisionTodoPanel .radarTable td,
.radarPage .radarDecisionTodoPanel .radarTable .cuiDataListTableHeadCell,
.radarPage .radarDecisionTodoPanel .radarTable .cuiDataListTableCell {
  padding: 10px 12px;
  white-space: nowrap;
}

.radarPage .radarDecisionTodoPanel .radarTable td:first-child,
.radarPage .radarDecisionTodoPanel .radarTable td:nth-child(6),
.radarPage .radarDecisionTodoPanel .radarTable .cuiDataListTableCell:first-child,
.radarPage .radarDecisionTodoPanel .radarTable .cuiDataListTableCell:nth-child(6) {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radarEventQueue,
.radarEventDetailPanel {
  overflow: hidden;
}

.radarEventList {
  display: grid;
  gap: 8px;
}

.radarEventItem {
  min-width: 0;
}

.radarEventList .radarEventRow {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 120px 88px 72px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: #ffffff;
  color: inherit;
  padding: 11px;
  text-align: left;
}

.radarEventList .radarEventRow.active,
.radarEventList .radarEventRow:hover {
  border-color: rgba(22, 119, 255, 0.34);
  background: #f7fbff;
  box-shadow: 0 10px 28px rgba(33, 72, 128, 0.08);
}

.radarEventItem.expanded .radarEventRow {
  border-color: rgba(22, 119, 255, 0.34);
  border-bottom-color: transparent;
  border-radius: 12px 12px 0 0;
  background: #f7fbff;
  box-shadow: none;
}

.radarEventItem .radarEventDetailPanel {
  border-top: 0;
  border-color: rgba(22, 119, 255, 0.34);
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 36%);
  box-shadow: inset 0 1px 0 rgba(22, 119, 255, 0.08);
  padding: 14px;
}

.radarEventItem .radarEventDetailPanel .radarPanelHeader {
  margin-bottom: 10px;
}

.radarEventLevel {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff4e4;
  color: #d97706;
  font-size: 11px;
  font-weight: 950;
}

.radarEventLevel.critical {
  background: #fff0f1;
  color: #dc2626;
}

.radarEventList strong,
.radarEventList em,
.radarEventMeta b,
.radarEventMeta em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarEventList strong {
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
}

.radarEventList em,
.radarEventMeta em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.radarEventMeta b {
  color: var(--radar-text);
  font-size: 12px;
}

.radarEventActions span {
  color: #1677ff;
  font-size: 12px;
  font-weight: 950;
}

.radarEventSummary {
  margin: 0;
  color: var(--radar-body);
  font-size: 14px;
  font-weight: 800;
}

.radarEvidenceGrid,
.radarImpactGrid,
.radarQualityGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.radarEvidenceGrid span,
.radarImpactGrid span,
.radarQualityGrid article {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: #ffffff;
  padding: 11px;
}

.radarEvidenceGrid em,
.radarImpactGrid em,
.radarQualityGrid span,
.radarQualityGrid em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.radarEvidenceGrid strong,
.radarImpactGrid strong,
.radarQualityGrid strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarActionDirective {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(22, 119, 255, 0.18);
  border-radius: 14px;
  background: #f4f9ff;
  padding: 14px;
}

.radarActionDirective strong {
  color: var(--radar-text);
  font-size: 14px;
}

.radarActionDirective p {
  margin: 0;
  color: var(--radar-body);
  font-weight: 850;
}

.radarActionDirective div,
.radarPanelActions.inline {
  justify-content: flex-start;
}

.radarPage .radarBattleGrid,
.radarPage .radarRecommendationList,
.radarPage .radarMappingGrid {
  display: grid;
  gap: 10px;
}

.radarPage .radarBattleGrid article,
.radarPage .radarRecommendationList article,
.radarPage .radarMappingGrid article {
  min-width: 0;
  display: grid;
  gap: 9px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}

.radarPage .radarBattleGrid article {
  grid-template-columns: minmax(0, 1fr) auto 88px;
  align-items: center;
}

.radarPage .radarBattleGrid strong,
.radarPage .radarRecommendationList strong,
.radarPage .radarMappingGrid strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarBattleGrid span,
.radarPage .radarBattleGrid em,
.radarPage .radarRecommendationList span,
.radarPage .radarRecommendationList em,
.radarPage .radarMappingGrid em,
.radarPage .radarMappingGrid p {
  margin: 0;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.5;
}

.radarPage .radarBattleMeta {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.radarPage .radarBattleGrid button {
  min-height: 32px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #f8fbff;
  color: #1677ff;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
}

.radarPage .radarDecisionBattlePanel .radarBattleGrid {
  gap: 9px;
}

.radarPage .radarDecisionBattlePanel .radarBattleGrid article {
  grid-template-columns: 1fr;
  gap: 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.radarPage .radarDecisionBattlePanel .radarBattleGrid strong,
.radarPage .radarDecisionBattlePanel .radarBattleGrid span,
.radarPage .radarDecisionBattlePanel .radarBattleGrid em {
  white-space: normal;
}

.radarPage .radarDecisionBattlePanel .radarBattleMeta {
  justify-items: start;
}

.radarPage .radarDecisionBattlePanel .radarBattleGrid button {
  width: 100%;
  min-height: 34px;
  border-color: rgba(22, 119, 255, 0.18);
  border-radius: 10px;
  background: #edf5ff;
}

.radarPage .radarDecisionReportPanel .radarRecommendationList article {
  border-radius: 14px;
  background: #ffffff;
}

.radarGoalGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.radarGoalGrid button {
  min-width: 0;
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--radar-body);
  padding: 10px;
  text-align: left;
}

.radarGoalGrid button.active,
.radarGoalGrid button:hover {
  border-color: rgba(22, 119, 255, 0.34);
  background: #eff6ff;
  color: var(--radar-text);
}

.radarGoalGrid strong,
.radarGoalGrid span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarGoalGrid strong {
  font-size: 13px;
  font-weight: 950;
}

.radarGoalGrid span {
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 800;
}

.radarPage .radarMappingGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radarPage .radarMappingGrid article {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radarPage .radarMappingGrid article p,
.radarPage .radarMappingGrid article .statusPill {
  grid-column: 1 / -1;
}

.radarPage .radarTaskTable {
  min-width: 1080px;
}

.radarReportCoverMini {
  position: relative;
  isolation: isolate;
  min-height: 210px;
  border: 1px solid #cfe0f5;
  color: #0f1b33;
}

.radarReportCoverMini::after {
  content: '';
  position: absolute;
  right: -42px;
  bottom: -52px;
  z-index: -1;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle at 36% 34%, #ffffff 0 18%, #77aefe 19% 46%, #1677ff 47% 100%);
  box-shadow: 0 18px 42px rgba(22, 119, 255, 0.24);
}

.radarExportActions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.radarExportActions button {
  min-height: 44px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.radarExportActions button:hover {
  border-color: rgba(22, 119, 255, 0.28);
  background: #f7fbff;
  color: #1677ff;
}

.radarReportPreviewCard .radarButton {
  justify-content: center;
}

.radarBackButton {
  justify-self: start;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-body);
  box-shadow: 0 6px 16px rgba(33, 72, 128, 0.05);
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.radarBackButton:hover {
  border-color: rgba(22, 119, 255, 0.28);
  background: var(--radar-blue-soft);
  color: var(--radar-blue);
}

.radarOwnStoreControls,
.radarOwnStoreAdd {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}

.radarOwnStoreControls {
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
}

.radarOwnStoreControls button,
.radarOwnStoreAdd button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0 12px;
  cursor: pointer;
}

.radarOwnStoreControls button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.radarOwnStoreAdd {
  grid-template-columns: repeat(3, minmax(140px, 1fr)) auto;
  align-items: end;
  border: 1px dashed var(--radar-line);
  border-radius: 12px;
  background: #f8fbff;
  padding: 12px;
}

.radarOwnStoreAdd label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.radarOwnStoreAdd span {
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 900;
}

.radarOwnStoreAdd input {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-text);
  font: inherit;
  padding: 0 10px;
}

.radarQuickEntry.green > .radarQuickEntryIcon {
  background: #eafaf3;
  color: #059669;
}

.radarSearchSelect {
  display: grid;
  gap: 7px;
}

.radarSearchSelect label {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-muted);
  padding: 0 9px;
}

.radarSearchSelect input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  outline: 0;
}

.radarSearchSelect select {
  width: 100%;
}

.radarFloatingQuickEntry {
  position: fixed;
  right: clamp(12px, 1.8vw, 28px);
  bottom: clamp(12px, 1.8vw, 28px);
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(4, minmax(54px, 1fr));
  gap: 8px;
  border: 1px solid rgba(219, 231, 243, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(33, 72, 128, 0.18);
  padding: 10px;
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
}

.radarFloatingQuickEntry button {
  min-width: 0;
  min-height: 48px;
  display: grid;
  justify-items: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--radar-body);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 8px;
  cursor: pointer;
}

.radarFloatingQuickEntry button.active,
.radarFloatingQuickEntry button:hover {
  border-color: rgba(22, 119, 255, 0.18);
  background: var(--radar-blue-soft);
  color: var(--radar-blue);
}

.radarFloatingQuickEntry span {
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1440px) {
  .radarSlotCards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .radarCompareDataGrid,
  .radarTwinPanels,
  .radarMiniCardGrid,
  .radarOwnStoreCard,
  .radarGoalGrid {
    grid-template-columns: 1fr;
  }

  .radarReportInsightGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .radarPage .radarDecisionLayout,
  .radarMonitorLayout,
  .radarTwoColumn.wideRight,
  .radarCompareConfig,
  .radarReportInsightGrid {
    grid-template-columns: 1fr;
  }

  .radarHeroActions {
    justify-content: flex-start;
  }

  .radarTwoColumn.wideRight.radarCompareResultLayout > .radarCompareCorePanel {
    min-height: 0;
  }
}

@media (max-width: 980px) {
  .radarOwnStoreControls,
  .radarOwnStoreAdd {
    grid-template-columns: 1fr;
  }

  .radarFloatingQuickEntry {
    grid-template-columns: repeat(4, 42px);
    gap: 5px;
    border-radius: 14px;
    padding: 7px;
  }

  .radarFloatingQuickEntry button {
    min-height: 40px;
    padding: 5px;
  }

  .radarFloatingQuickEntry span {
    display: none;
  }
}

@media (max-width: 760px) {
  .radarMetricGrid,
  .radarMetricGrid.compact,
  .radarSlotCards,
  .radarOwnStoreMetrics,
  .radarExportActions,
  .radarPage .radarFlowStrip,
  .radarEvidenceGrid,
  .radarImpactGrid,
  .radarQualityGrid,
  .radarPage .radarMappingGrid,
  .radarReportInsightGrid,
  .radarReportOverviewCard.visual {
    grid-template-columns: 1fr;
  }

  .radarEventList button,
  .radarPage .radarBattleGrid article,
  .radarPage .radarMappingGrid article {
    grid-template-columns: 1fr;
  }

  .radarPage .radarBattleMeta {
    justify-items: start;
  }

  .radarRankList button,
  .radarRankList .cuiDataListActionItem {
    grid-template-columns: 22px 36px minmax(0, 1fr);
  }

  .radarRankList button .statusPill,
  .radarRankList button .compassIcon,
  .radarRankList .cuiDataListActionItem .statusPill,
  .radarRankList .cuiDataListActionItem .compassIcon {
    display: none;
  }

  .radarPager {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .radarFloatingQuickEntry {
    right: 10px;
    bottom: 10px;
    grid-template-columns: repeat(2, 40px);
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-crm-repeat.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy repeated CRM CSS.
 *
 * Read-only compatibility bridge for a repeated CRM block that originally
 * followed the first radar block.
 */

.crmForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.crmForm.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crmFormFeedback {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.crmCreatorGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.crmCreatorCard p {
  min-height: 42px;
}

.crmAvatar {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.crmFollowupList {
  display: grid;
  gap: 8px;
}

.crmFollowupRow {
  min-height: 42px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 128px 76px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.crmFollowupRow.head {
  min-height: 30px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.crmFollowupRow:last-child {
  border-bottom: 0;
}

.crmFollowupRow strong {
  color: var(--text-1);
}

.crmFollowupRow span,
.crmFollowupRow em,
.crmFollowupRow small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crmFollowupRow em,
.crmFollowupRow small {
  color: var(--text-3);
  font-style: normal;
}

.crmDetailStack {
  display: grid;
  gap: 12px;
}

.crmObjectGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.crmObjectGrid span {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.crmObjectGrid strong,
.crmObjectGrid em {
  display: block;
}

.crmObjectGrid strong {
  color: var(--text-1);
  font-size: 20px;
}

.crmObjectGrid em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-openapi-repeat.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy repeated OpenAPI CSS.
 *
 * Read-only compatibility bridge for a repeated OpenAPI block that originally
 * followed the repeated CRM block.
 */

.textButton {
  border: 0;
  background: transparent;
  color: var(--primary-light);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: 0;
}

.openapiForm {
  display: grid;
  gap: 12px;
}

.openapiScopePicker,
.openapiKeyList {
  display: grid;
  gap: 10px;
}

.openapiScopeOption {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 10px 12px;
}

.openapiScopeOption.disabled {
  opacity: 0.64;
}

.openapiScopeOption input {
  width: 16px;
  height: 16px;
}

.openapiScopeOption strong,
.openapiScopeOption em,
.openapiScopeOption small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openapiScopeOption strong {
  color: var(--text-1);
}

.openapiScopeOption em,
.openapiScopeOption small {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.openapiKeyCard {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.openapiKeyCard h2,
.openapiKeyCard p {
  margin: 8px 0 0;
}

.openapiKeyCard h2 {
  color: var(--text-1);
  font-size: 18px;
}

.openapiKeyCard p,
.openapiSecretOnce code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.openapiKeyCard p {
  color: #67e8f9;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.openapiSecretOnce {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(245, 158, 11, 0.26);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
  padding: 12px;
}

.openapiSecretOnce span {
  color: #fbbf24;
  font-size: 12px;
  font-weight: 900;
}

.openapiSecretOnce code {
  color: var(--text-1);
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.openapiLogList {
  display: grid;
  gap: 8px;
}

.openapiLogRow {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(180px, 1.3fr) 80px 88px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.openapiLogRow.head {
  min-height: 30px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.openapiLogRow:last-child,
.openapiLogList .cuiDataListTableRow:last-child .cuiDataListTableCell {
  border-bottom: 0;
}

.openapiLogRow strong,
.openapiLogRow span,
.openapiLogRow em,
.openapiLogRow small,
.openapiLogRow .cuiDataListTableHeadCell,
.openapiLogRow .cuiDataListTableCell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openapiLogRow strong,
.openapiLogRow .cuiDataListTableCell strong {
  color: var(--text-1);
}

.openapiLogRow em,
.openapiLogRow small,
.openapiLogRow .cuiDataListTableCell em,
.openapiLogRow .cuiDataListTableCell small {
  color: var(--text-3);
  font-style: normal;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-notifications-workspace.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy notifications workspace CSS.
 *
 * Read-only compatibility bridge for the old notification center workspace,
 * category list, grouped records, and detail panel.
 */

.notificationsPage {
  min-width: var(--workspace-canvas-min-width);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.notificationsHeroPanel {
  border-color: var(--primary-border);
}

.notificationActionGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.notificationButtonRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.notificationList,
.taskList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notificationItem,
.taskCard {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-panel-strong);
}

.notificationItem h2,
.notificationItem p,
.notificationItem small,
.taskCard h2,
.taskCard p,
.taskCard small {
  margin: 0;
}

.notificationItem h2,
.taskCard h2 {
  margin-top: 8px;
  color: var(--text-1);
  font-size: 16px;
}

.notificationItem p,
.taskCard p {
  margin-top: 6px;
  color: var(--text-2);
  line-height: 1.6;
}

.notificationItem small,
.taskCard small {
  display: block;
  margin-top: 10px;
  color: var(--text-3);
}

.notificationPrototypePage {
  gap: 16px;
}

.notificationCenterHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 18px;
}

.notificationCenterHeader h1,
.notificationCenterHeader p {
  margin: 0;
}

.notificationCenterHeader h1 {
  margin-top: 8px;
  color: var(--text-1);
  font-size: 28px;
  line-height: 1.15;
}

.notificationCenterHeader p {
  max-width: 680px;
  margin-top: 8px;
  color: var(--text-2);
  line-height: 1.7;
}

.notificationSyncHint {
  display: inline-flex;
  width: fit-content;
  margin-top: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--surface-panel-strong);
  color: var(--text-3);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 800;
}

.notificationSyncHint.ready {
  border-color: rgba(16, 185, 129, 0.24);
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
}

.notificationSyncHint.fallback,
.notificationSyncHint.error {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
}

.notificationEyebrow,
.notificationHeaderActions,
.notificationGhostButton,
.notificationTextButton,
.notificationPrimaryButton,
.notificationSearchField,
.notificationCategoryList button,
.notificationListToolbar,
.notificationItemTitleRow,
.notificationItemMeta,
.notificationDetailTop,
.notificationAttachment,
.notificationDetailActions {
  display: flex;
  align-items: center;
}

.notificationEyebrow {
  gap: 8px;
  color: var(--primary-strong);
  font-size: 13px;
  font-weight: 900;
}

.notificationHeaderActions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.notificationGhostButton,
.notificationTextButton,
.notificationPrimaryButton,
.notificationAttachment button {
  border-radius: 8px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.notificationGhostButton {
  gap: 7px;
  border: 1px solid var(--line-dark);
  background: var(--surface-panel-strong);
  color: var(--text-1);
  padding: 10px 12px;
}

.notificationTextButton {
  border: 0;
  background: transparent;
  color: var(--primary-strong);
  padding: 4px 0;
}

.notificationPrimaryButton,
.notificationAttachment button {
  border: 0;
  background: var(--grad);
  color: #fff;
  padding: 10px 14px;
}

.notificationSummaryGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.notificationSummaryGrid article {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.notificationSummaryGrid span,
.notificationSummaryGrid em {
  display: block;
  color: var(--text-3);
  font-size: 12px;
}

.notificationSummaryGrid strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--text-1);
  font-size: 26px;
  line-height: 1;
}

.notificationWorkspace {
  display: grid;
  grid-template-columns: 250px minmax(420px, 1fr) minmax(340px, 0.82fr);
  gap: 14px;
  align-items: start;
}

.notificationSidebar,
.notificationMessageColumn,
.notificationDetailPanel {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.notificationSidebar {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.notificationSearchField {
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--text-3);
  padding: 0 12px;
}

.notificationSearchField input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
}

.notificationSearchField input::placeholder {
  color: var(--text-3);
}

.notificationCategoryList {
  display: grid;
  gap: 6px;
}

.notificationCategoryList button {
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  padding: 8px 10px;
  font: inherit;
  cursor: pointer;
}

.notificationCategoryList button span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notificationCategoryList button em {
  min-width: 26px;
  border-radius: 999px;
  background: var(--surface-panel-strong);
  color: var(--text-3);
  padding: 2px 7px;
  font-style: normal;
  font-size: 12px;
  text-align: center;
}

.notificationCategoryList button.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--text-1);
}

.notificationCategoryList button.active em {
  background: var(--primary-strong);
  color: #fff;
}

.notificationPreferencesPanel {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line-dark);
  padding-top: 12px;
}

.notificationPreferencesPanel div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 10px;
}

.notificationPreferencesPanel strong {
  color: var(--text-1);
  font-size: 13px;
}

.notificationPreferencesPanel span {
  color: var(--text-3);
  font-size: 12px;
}

.notificationMessageColumn {
  overflow: hidden;
}

.notificationListToolbar {
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-dark);
  padding: 14px;
}

.notificationListToolbar strong,
.notificationListToolbar span {
  display: block;
}

.notificationListToolbar strong {
  color: var(--text-1);
}

.notificationListToolbar span {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 12px;
}

/* Drill-down nav: when viewing a group's events, the toolbar shows a
 * "← 返回" pill and the group title. Sits inline with the existing title. */
.notificationBackButton {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 2px 10px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}

.notificationBackButton:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Group card: visually similar to a regular notification row but with a
 * "N 个事件" badge and a chevron at the right hinting drill-in. The base
 * .notificationUserItem grid is `8px 34px 1fr` — group items get a 4th
 * `auto` column so the chevron lands on the right, not wrapped to a new row. */
.notificationGroupItem {
  grid-template-columns: 8px 34px minmax(0, 1fr) auto;
}

.notificationGroupItem .groupBadge {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.notificationGroupChevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 22px;
  font-weight: 700;
  padding: 0 4px;
}

.notificationGroupItem:hover .notificationGroupChevron {
  color: var(--primary);
}

/* Pager at the bottom of a group's records list. */
.notificationGroupPager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px;
  border-top: 1px solid var(--line-dark);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
}

.notificationGroupPager .notificationTextButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.notificationUserList {
  display: grid;
}

.notificationUserItem {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 8px 34px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  color: inherit;
  padding: 13px 14px;
  text-align: left;
  cursor: pointer;
}

.notificationUserItem:last-child {
  border-bottom: 0;
}

.notificationUserItem.active {
  background: var(--primary-soft);
}

.notificationUserItem.unread {
  background: rgba(239, 68, 68, 0.035);
}

.notificationUserItem.unread::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #ef4444;
  content: '';
}

.notificationUserItem.unread .notificationUnreadDot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

.notificationUnreadDot {
  width: 9px;
  height: 9px;
  align-self: start;
  margin-top: 8px;
  border-radius: 999px;
  background: transparent;
}

.notificationItemIcon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--primary-strong);
}

.notificationItemBody {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.notificationItemBody > span:not(.notificationItemTitleRow):not(.notificationItemMeta) {
  color: var(--text-2);
  line-height: 1.45;
}

.notificationItemTitleRow {
  justify-content: space-between;
  gap: 12px;
}

.notificationItemTitleRow strong,
.notificationItemTitleRow em {
  min-width: 0;
}

.notificationItemTitleRow strong {
  overflow: hidden;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notificationUserItem.unread .notificationItemTitleRow strong {
  font-weight: 950;
}

.notificationItemTitleRow em {
  flex: 0 0 auto;
  color: var(--text-3);
  font-style: normal;
  font-size: 12px;
}

.notificationItemMeta {
  flex-wrap: wrap;
  gap: 6px;
}

.notificationItemMeta i {
  border-radius: 999px;
  background: var(--surface-panel-strong);
  color: var(--text-3);
  padding: 3px 8px;
  font-style: normal;
  font-size: 12px;
}

.notificationItemMeta i.tone-important {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.notificationItemMeta i.tone-urgent {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.notificationItemMeta i.unreadStatus {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.notificationDetailPanel {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.notificationDetailTop {
  justify-content: space-between;
  gap: 12px;
}

.notificationDetailTitle {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.notificationDetailTitle > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-strong);
}

.notificationDetailTitle h2,
.notificationDetailTitle p,
.notificationDetailContent {
  margin: 0;
}

.notificationDetailTitle h2 {
  color: var(--text-1);
  font-size: 21px;
  line-height: 1.25;
}

.notificationDetailTitle p {
  margin-top: 6px;
  color: var(--text-3);
  line-height: 1.5;
}

.notificationDetailContent {
  color: var(--text-2);
  line-height: 1.8;
}

.notificationFactGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.notificationFactGrid span {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 10px;
}

.notificationFactGrid em,
.notificationFactGrid strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notificationFactGrid em {
  color: var(--text-3);
  font-style: normal;
  font-size: 12px;
}

.notificationFactGrid strong {
  color: var(--text-1);
  font-size: 13px;
}

.notificationAttachment {
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 12px;
}

.notificationAttachment svg {
  flex: 0 0 auto;
  color: var(--primary-strong);
}

.notificationAttachment div {
  min-width: 0;
  flex: 1 1;
  display: grid;
  gap: 3px;
}

.notificationAttachment strong,
.notificationAttachment span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notificationAttachment strong {
  color: var(--text-1);
}

.notificationAttachment span {
  color: var(--text-3);
  font-size: 12px;
}

.notificationAttachment button {
  flex: 0 0 auto;
  padding: 8px 12px;
}

.notificationDetailActions {
  flex-wrap: wrap;
  gap: 10px;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-creator-permission-repeat.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy repeated creator and permission CSS.
 *
 * Read-only compatibility bridge for a repeated creator detail and permission
 * state block that appeared before the account settings styles.
 */

.creatorDetailHero {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.08)), var(--surface-panel);
}

.creatorMatchGrid,
.creatorDataObjectGrid {
  display: grid;
  gap: 10px;
}

.creatorMatchGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creatorMatchGrid article,
.creatorDataObjectGrid span {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.creatorMatchGrid strong,
.creatorMatchGrid span,
.creatorDataObjectGrid span {
  display: block;
}

.creatorMatchGrid strong {
  color: var(--text-1);
}

.creatorMatchGrid span,
.creatorDataObjectGrid span {
  overflow-wrap: anywhere;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.creatorMetaNote {
  margin: 12px 0 0;
}

.noPermissionPanel {
  min-height: 260px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.12), var(--primary-soft)), var(--surface-panel);
  padding: 22px;
}

.noPermissionPanel.compact {
  min-height: auto;
}

.noPermissionIcon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  font-size: 22px;
  font-weight: 900;
}

.noPermissionPanel h1 {
  margin: 12px 0 8px;
  color: var(--text-1);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.12;
}

.noPermissionPanel p,
.noPermissionPanel small {
  color: var(--text-2);
  line-height: 1.65;
}

.noPermissionPanel p {
  max-width: 760px;
  margin: 0;
}

.noPermissionPanel small {
  display: block;
  margin-top: 12px;
  color: var(--text-3);
}

.permissionRequirementList,
.permissionCodeList,
.permissionActionGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.permissionRequirementList {
  margin-top: 16px;
}

.permissionRequirementList span,
.permissionRequirementList em,
.permissionCodeList span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  padding: 0 10px;
}

.permissionRequirementList span {
  border: 1px solid rgba(245, 158, 11, 0.26);
  background: rgba(245, 158, 11, 0.08);
  color: #fbbf24;
}

.permissionRequirementList em,
.permissionCodeList span {
  border: 1px solid var(--line-dark);
  background: var(--tag-bg);
  color: var(--text-2);
}

.permissionDashboardGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.88fr);
  gap: 16px;
}

.permissionCodeList {
  margin-top: 14px;
}

.permissionActionGrid {
  margin-top: 14px;
}

.permissionActionButton {
  min-height: 56px;
  display: grid;
  gap: 4px;
  flex: 1 1 150px;
  justify-items: start;
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.1);
  color: var(--text-1);
  padding: 10px 12px;
  text-align: left;
  font-weight: 850;
}

.accountSettingsList .cuiDataListItemActions {
  flex: 0 0 auto;
  justify-content: flex-end;
  min-width: max-content;
}

.accountSettingsRow:last-child {
  border-bottom: 0;
}

.permissionActionButton span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
}

.permissionActionButton.locked {
  border-color: rgba(245, 158, 11, 0.26);
  background: rgba(245, 158, 11, 0.07);
  color: #fbbf24;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-account-settings.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy account/settings compatibility chunk.
 *
 * This file preserves the pre-split global cascade. Do not add new rules here;
 * put account, team, and organization updates in account-team.css or shared UI components.
 */
.accountSecurityPage {
  display: grid;
  gap: 16px;
}

.accountSecurityHeader {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 14px;
  align-items: stretch;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(
      135deg,
      rgba(6, 182, 212, 0.12),
      rgba(34, 197, 94, 0.08) 50%,
      rgba(245, 158, 11, 0.08)
    ),
    var(--surface-panel);
  padding: 18px;
}

.accountSecurityHeaderMain {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 10px;
}

.accountSecurityBackLink {
  width: fit-content;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.accountSecurityBackLink:hover {
  border-color: rgba(6, 182, 212, 0.38);
  color: var(--text-1);
}

.accountSecurityHeaderMain h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 36px;
  line-height: 1.05;
}

.accountSecurityHeaderMain p {
  max-width: 780px;
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
}

.accountSecurityAccountCard {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-content: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 84%, transparent);
  padding: 14px;
}

.accountSecurityAvatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--brand-grad);
  color: #ffffff;
  font-weight: 950;
}

.accountSecurityAccountCard span:not(.accountSecurityAvatar),
.accountSecurityAccountCard em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.accountSecurityAccountCard strong {
  display: block;
  overflow: hidden;
  color: var(--text-1);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountSecurityAccountCard em {
  grid-column: 1 / -1;
}

.accountSecuritySummary,
.accountSecurityContentGrid {
  display: grid;
  gap: 16px;
}

.accountSecuritySummary {
  grid-template-columns: minmax(0, 1.08fr) minmax(220px, 0.76fr) minmax(220px, 0.76fr);
}

.accountSecurityContentGrid {
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
  gap: 16px;
}

.accountSecurityScoreCard,
.accountSecurityQuickCard {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.accountSecurityScoreCard {
  display: grid;
  gap: 12px;
}

.accountSecurityScoreHeader,
.accountSecurityQuickCard {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.accountSecurityScoreHeader {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.accountSecuritySummaryIcon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(6, 182, 212, 0.28);
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.1);
  color: #67e8f9;
}

.accountSecuritySummaryIcon.green {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
}

.accountSecuritySummaryIcon.amber {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
}

.accountSecurityScoreHeader strong,
.accountSecurityQuickCard strong,
.accountSecurityEmptyState strong {
  display: block;
  overflow: hidden;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountSecurityScoreHeader em,
.accountSecurityQuickCard p {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.55;
}

.accountSecurityMeter {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--row-line);
}

.accountSecurityMeter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #06b6d4);
}

.accountSecurityFacts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.accountSecurityFacts span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--tag-bg);
  color: var(--text-2);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 800;
}

.accountSecurityPanel {
  min-width: 0;
}

.accountMethodList,
.accountProviderGrid,
.accountIdentityList {
  display: grid;
  gap: 10px;
}

.accountMethodRow,
.accountIdentityRow {
  min-width: 0;
  min-height: 64px;
  display: grid;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 88%, transparent);
  padding: 12px;
}

.accountMethodRow {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.accountMethodActions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.accountIdentityRow {
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.7fr) auto;
}

.accountMethodIcon,
.accountIdentityAvatar,
.accountProviderButton span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--tag-bg);
  color: var(--text-1);
}

.accountIdentityAvatar {
  overflow: hidden;
}

.accountIdentityAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.accountMethodRow strong,
.accountMethodRow em,
.accountIdentityMain strong,
.accountIdentityMain em,
.accountIdentityMeta span,
.accountProviderButton strong,
.accountProviderButton em {
  display: block;
  min-width: 0;
}

.accountMethodRow strong,
.accountIdentityMain strong,
.accountProviderButton strong {
  overflow: hidden;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountMethodRow em,
.accountIdentityMain em,
.accountIdentityMeta span,
.accountProviderButton em,
.accountSecurityEmpty,
.accountSecurityHint {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.55;
}

.accountIdentityMain {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.accountIdentityMeta {
  display: grid;
  gap: 4px;
}

.accountProviderGrid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.accountProviderButton,
.accountSecurityButton,
.accountSecurityDangerButton {
  border-radius: 8px;
  font-weight: 850;
}

.accountProviderButton {
  min-height: 82px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(6, 182, 212, 0.3);
  background: rgba(6, 182, 212, 0.1);
  color: var(--text-1);
  padding: 12px;
  text-align: left;
}

.accountProviderButton em {
  grid-column: 2;
  margin-top: -8px;
}

.accountProviderButton:hover:not(:disabled),
.accountSecurityButton:hover:not(:disabled) {
  border-color: rgba(6, 182, 212, 0.48);
  background: rgba(6, 182, 212, 0.16);
}

.accountSecurityButton,
.accountSecurityDangerButton {
  min-height: 38px;
  border: 1px solid rgba(6, 182, 212, 0.32);
  background: rgba(6, 182, 212, 0.1);
  color: var(--text-1);
  padding: 0 12px;
}

.accountSecurityButton.compact {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  white-space: nowrap;
}

.accountSecurityDangerButton {
  border-color: rgba(248, 113, 113, 0.32);
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
}

.accountSecurityDangerButton:hover:not(:disabled) {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.16);
}

.accountProviderButton:disabled,
.accountSecurityButton:disabled,
.accountSecurityDangerButton:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.accountSecurityNotice {
  margin: 0;
}

.accountSecurityEmptyState {
  min-height: 118px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed var(--line-dark-strong);
  border-radius: 8px;
  background: var(--tag-bg);
  padding: 18px;
  text-align: center;
}

.accountSecurityEmptyState.wide {
  min-height: 138px;
}

.accountSecurityEmptyState span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(6, 182, 212, 0.26);
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.08);
  color: #67e8f9;
}

.accountSecurityEmptyState p {
  max-width: 360px;
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.6;
}

.accountSecurityEmpty,
.accountSecurityHint {
  margin: 0;
}

.accountSecurityHint {
  margin-top: 12px;
  color: #fbbf24;
}

.accountContactPanel,
.accountContactList,
.accountContactForm {
  display: grid;
  gap: 12px;
}

.accountContactRow {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(170px, 0.45fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 88%, transparent);
  padding: 12px;
}

.accountContactMain,
.accountContactMeta {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.accountContactMain strong,
.accountContactMain em,
.accountContactMeta em,
.accountContactDialogHeader strong,
.accountContactDialogHeader em,
.accountContactField span {
  display: block;
  min-width: 0;
}

.accountContactMain strong,
.accountContactDialogHeader strong {
  overflow: hidden;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountContactMain em,
.accountContactMeta em,
.accountContactDialogHeader em,
.accountContactField span {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.55;
}

.accountContactMeta .statusPill {
  width: fit-content;
}

.accountContactRow .accountSecurityButton,
.accountContactCodeRow .accountSecurityButton,
.accountContactDialogActions .accountSecurityButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.accountSecurityButton.muted {
  border-color: var(--line-dark);
  background: var(--surface-panel-hover);
  color: var(--text-2);
}

.accountContactDialogOverlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(5, 7, 20, 0.78);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  padding: 20px;
}

.accountContactDialog {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid var(--line-dark-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 96%, #050714);
  box-shadow: var(--shadow-dark);
  padding: 16px;
}

.accountPasswordDialog {
  width: min(720px, 100%);
}

.accountContactDialogHeader {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-dark);
}

.accountContactDialogClose {
  min-height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
}

.accountContactDialogClose:hover {
  border-color: rgba(6, 182, 212, 0.38);
  color: var(--text-1);
}

.accountContactForm {
  margin-top: 14px;
}

.accountPasswordFormGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr);
  gap: 12px;
  align-items: stretch;
}

.accountPasswordFields,
.accountPasswordRules {
  display: grid;
  gap: 12px;
}

.accountContactField {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.accountContactField input,
.accountContactField select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  outline: 0;
  background: rgba(5, 7, 20, 0.46);
  color: var(--text-1);
  padding: 0 12px;
}

.accountContactField input:focus,
.accountContactField select:focus {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.accountPasswordRules {
  align-content: start;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 88%, transparent);
  padding: 12px;
}

.accountPasswordRuleGroup,
.accountPasswordAdvisory {
  display: grid;
  gap: 8px;
}

.accountPasswordAdvisory {
  border-top: 1px solid var(--row-line);
  padding-top: 10px;
}

.accountPasswordRuleTitle {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
}

.accountPasswordRule,
.accountPasswordAdvisoryMessage {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  color: var(--text-3);
}

.accountPasswordRule.is-valid,
.accountPasswordAdvisory.is-valid .accountPasswordAdvisoryMessage {
  color: #86efac;
}

.accountPasswordAdvisory.is-warning .accountPasswordAdvisoryMessage {
  color: #fbbf24;
}

.accountPasswordRule span,
.accountPasswordAdvisoryMessage span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--tag-bg);
}

.accountPasswordRule.is-valid span,
.accountPasswordAdvisory.is-valid .accountPasswordAdvisoryMessage span {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.1);
}

.accountPasswordAdvisory.is-warning .accountPasswordAdvisoryMessage span {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(245, 158, 11, 0.1);
}

.accountPasswordRule em,
.accountPasswordAdvisoryMessage em {
  min-width: 0;
  font-size: 12px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.5;
}

.accountPasswordAdvisoryMessage em {
  overflow-wrap: anywhere;
}

.accountPasswordMeter {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--row-line);
}

.accountPasswordMeter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6, #06b6d4, #22c55e);
}

.accountContactPhoneGrid {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.accountContactCodeRow {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.accountContactCodeRow .accountSecurityButton {
  min-width: 118px;
  min-height: 42px;
}

.accountContactMessage {
  margin: 0;
}

.accountContactDialogActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.accountIdentityUnbindForm,
.accountIdentityUnbindFields {
  display: grid;
  gap: 14px;
}

.accountIdentityUnbindTarget,
.accountIdentityUnbindMethod {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.accountIdentityUnbindTarget {
  border-left: 3px solid var(--danger-line);
  background: color-mix(in srgb, var(--danger-bg) 45%, transparent);
  padding: 10px 12px;
}

.accountIdentityUnbindTargetIcon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--danger-line);
  border-radius: 8px;
  color: #f87171;
}

.accountIdentityUnbindTarget > span:last-child,
.accountIdentityUnbindMethod > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.accountIdentityUnbindTarget small,
.accountIdentityUnbindMethod small,
.accountIdentityUnbindTarget em,
.accountIdentityUnbindStatus {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.accountIdentityUnbindTarget strong,
.accountIdentityUnbindMethod strong {
  color: var(--text-1);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.accountIdentityUnbindMethod {
  color: var(--text-2);
}

.accountIdentityUnbindStatus {
  margin: 0;
}

.accountIdentityUnbindCodeRow {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.accountIdentityUnbindCodeRow .cuiButton {
  min-width: 118px;
}

.accountIdentityUnbindActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.accountProfilePage {
  display: grid;
  gap: 16px;
}

.accountSettingsHub {
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
}

.accountSettingsRail,
.accountSettingsMain,
.accountSettingsRows,
.accountSettingsRailMeta,
.accountSettingsRailNav {
  display: grid;
}

.accountSettingsRail {
  position: sticky;
  top: 18px;
  gap: 16px;
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.08), transparent 34%), var(--surface-panel);
  padding: 16px;
}

.accountSettingsRailProfile {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  padding: 16px 8px 10px;
  text-align: center;
}

.accountSettingsRailProfile strong,
.accountSettingsRailProfile em,
.accountSettingsRailMeta strong,
.accountSettingsRailMeta span,
.accountSettingsHeader h1,
.accountSettingsHeader p,
.accountSettingsRow strong,
.accountSettingsRow span,
.accountSettingsRow em,
.accountSettingsTeamSummary span,
.accountSettingsTeamSummary strong,
.accountSettingsTeamSummary em,
.accountProfilePermissionList strong,
.accountProfilePermissionList span,
.accountProfilePreferenceList span,
.accountProfilePreferenceList strong {
  display: block;
  min-width: 0;
}

.accountSettingsRailProfile strong,
.accountSettingsRailMeta strong,
.accountSettingsRow strong,
.accountSettingsTeamSummary strong,
.accountProfilePreferenceList strong {
  overflow: hidden;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountSettingsRailProfile strong {
  font-size: 18px;
  line-height: 1.2;
}

.accountProfileNameRow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}

.accountProfileNameRow strong {
  flex: 0 1 auto;
  min-width: 0;
}

.accountProfileEditButton {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  border: 1px solid rgba(6, 182, 212, 0.34);
  border-radius: 999px;
  background: rgba(6, 182, 212, 0.09);
  color: #0891b2;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 0 8px;
  white-space: nowrap;
}

.accountProfileEditButton:hover,
.accountProfileEditButton:focus-visible {
  border-color: rgba(37, 99, 235, 0.46);
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary);
  outline: none;
}

.accountSettingsRailProfile em,
.accountSettingsRailMeta span,
.accountSettingsRow span,
.accountSettingsRow em,
.accountSettingsTeamSummary span,
.accountSettingsTeamSummary em,
.accountProfilePermissionList span,
.accountProfilePreferenceList span {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.55;
}

.accountProfileAvatar {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(6, 182, 212, 0.14));
  color: var(--text-1);
  font-size: 30px;
  font-weight: 950;
}

.accountNicknameRule {
  margin: -4px 0 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.accountSettingsRailNav {
  gap: 8px;
}

.accountSettingsRailNav a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 900;
  padding: 0 12px;
  text-decoration: none;
}

.accountSettingsRailNav a:hover,
.accountSettingsRailNav a:focus-visible,
.accountSettingsRailNav a.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.accountSettingsRailNav a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.accountSettingsRailMeta {
  gap: 8px;
}

.accountSettingsRailMeta div {
  min-width: 0;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 10px;
}

.accountSettingsMain {
  gap: 16px;
  min-width: 0;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.accountSettingsAnchor {
  display: block;
  height: 0;
  scroll-margin-top: 84px;
}

.accountSettingsHeader {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(6, 182, 212, 0.08) 52%, transparent),
    var(--surface-panel);
  padding: 18px;
  scroll-margin-top: 84px;
}

.accountSettingsHeader h1 {
  margin: 10px 0 0;
  color: var(--text-1);
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1;
  letter-spacing: 0;
}

.accountSettingsHeader p {
  max-width: 620px;
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.65;
}

.accountSettingsHeaderActions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.accountSettingsPanel {
  scroll-margin-top: 84px;
}

.accountSettingsRows {
  gap: 0;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--row-line);
  border-radius: 8px;
}

.accountSettingsRow {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(120px, max-content);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  background: color-mix(in srgb, var(--surface-panel-hover) 54%, transparent);
  padding: 13px 14px;
  text-decoration: none;
}

.accountSettingsRow:last-child {
  border-bottom: 0;
}

.accountSettingsRow > svg:first-child {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(6, 182, 212, 0.22);
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.08);
  color: var(--text-2);
  padding: 8px;
}

.accountSettingsRow strong {
  margin-top: 3px;
  font-size: 14px;
}

.accountSettingsRow em {
  justify-self: end;
  max-width: 220px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountExternalIdentityRow {
  grid-template-columns: 34px minmax(0, 1fr) minmax(180px, max-content) max-content;
}

.accountExternalIdentityRow > em {
  max-width: min(280px, 32vw);
}

.accountExternalIdentityRow .accountSecurityButton,
.accountExternalIdentityRow .accountSecurityDangerButton {
  justify-self: end;
  min-width: 96px;
}

.accountOnlineClientRow {
  grid-template-columns: 34px minmax(0, 1fr) minmax(180px, max-content) max-content;
}

.accountOnlineClientRow > em {
  max-width: min(260px, 30vw);
}

.accountOnlineClientRow .statusPill {
  justify-self: end;
}

.accountEffectiveSessions {
  margin-top: 12px;
}

.accountEffectiveSessions summary {
  display: flex;
  min-height: 42px;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  font-size: 13px;
  font-weight: 800;
  padding: 10px 12px;
}

.accountEffectiveSessions summary em {
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
}

.accountSettingsRow.is-link {
  grid-template-columns: 34px minmax(0, 1fr) minmax(120px, max-content) 18px;
}

.accountSettingsRow.is-link:hover,
.accountSettingsRow.is-link:focus-visible {
  background: var(--surface-panel-hover);
  color: var(--primary-light);
}

.accountSettingsRow.is-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

@media (max-width: 720px) {
  .accountPasswordFormGrid {
    grid-template-columns: 1fr;
  }

  .accountIdentityUnbindCodeRow {
    grid-template-columns: 1fr;
  }

  .accountIdentityUnbindCodeRow .cuiButton,
  .accountIdentityUnbindActions .cuiButton {
    width: 100%;
  }

  .accountOnlineClientRow,
  .accountExternalIdentityRow {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .accountOnlineClientRow > em,
  .accountOnlineClientRow .statusPill,
  .accountExternalIdentityRow > em,
  .accountExternalIdentityRow .accountSecurityButton,
  .accountExternalIdentityRow .accountSecurityDangerButton {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }
}

.accountProfileAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

.accountProfileSecurityMeter {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(6, 182, 212, 0.24);
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.08);
  padding: 12px;
}

.accountProfileSecurityMeter > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.accountProfileSecurityMeter span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
}

.accountProfileSecurityMeter strong {
  color: var(--text-1);
  font-size: 22px;
  line-height: 1;
}

.accountProfileMeterTrack {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-dark);
}

.accountProfileMeterTrack i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #06b6d4);
}

.accountProfileSecurityRows,
.accountProfilePermissionList,
.accountProfilePreferenceList {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.accountSettingsTeamSummary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.accountSettingsTeamSummary div,
.accountProfilePreferenceList div {
  min-width: 0;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
}

.accountProfilePermissionList strong {
  color: var(--text-1);
}

.accountProfilePermissionList span {
  margin-top: 4px;
}

.accountSettingsPermissionGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.accountSettingsPermissionGrid div {
  min-width: 0;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
}

.accountSettingsPermissionGrid svg {
  color: var(--primary-light);
}

.accountSettingsPreferenceStrip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.permissionMatrix {
  display: grid;
  margin-top: 14px;
}

.permissionMatrixRow {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) 96px 96px minmax(240px, 1fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.permissionMatrixRow.head {
  min-height: 34px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.settingsMembersRow.empty {
  grid-template-columns: 1fr;
}

.permissionMatrixRow:last-child {
  border-bottom: 0;
}

.permissionMatrixRow strong,
.permissionMatrixRow em {
  display: block;
}

.permissionMatrixRow strong {
  color: var(--text-1);
}

.permissionMatrixRow em {
  margin-top: 4px;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.appStatePage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 10%, var(--primary-glow), transparent 26%),
    linear-gradient(180deg, var(--bg-deep), var(--bg));
  padding: 24px;
}

.appStateCard {
  width: min(480px, 100%);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  box-shadow: var(--shadow-dark);
  padding: 28px;
}

.appStateCard h1 {
  margin: 14px 0 8px;
  color: var(--text-1);
}

.appStateCard p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.65;
}

.appStateCard.error {
  border-color: rgba(239, 68, 68, 0.32);
}

.appStateCard.permission,
.appStateCard.warning,
.appStateCard.empty {
  border-color: rgba(245, 158, 11, 0.3);
}

.stateBlockActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.stateActionButton {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-dark-strong);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--text-1);
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.stateActionButton:hover {
  border-color: var(--primary-border);
  background: var(--surface-panel-hover);
}

.stateActionButton.primary {
  border-color: transparent;
  background: var(--grad);
  color: #ffffff;
}

.productFilterField.wide {
  grid-column: span 2;
}

.productFilterField textarea {
  min-height: 42px;
  resize: vertical;
}

.settingsPageShell {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
}

.settingsPageHeader {
  display: grid;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0 0, rgba(6, 182, 212, 0.14), transparent 34%),
    linear-gradient(135deg, var(--primary-soft), transparent 58%), var(--surface-panel);
  padding: 18px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.05);
}

.settingsPageHeader span {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--surface-panel-hover);
  color: var(--text-3);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
}

.settingsPageHeader h1 {
  margin: 0;
  color: var(--text-1);
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.08;
}

.settingsPageHeader p {
  max-width: 720px;
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
}

.settingsLayout {
  display: grid;
  align-items: start;
  align-content: start;
  gap: 14px;
  min-height: 0;
}

.settingsTabNav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 92%, transparent);
  padding: 6px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}

.settingsTabLink {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-2);
  padding: 0 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.settingsTabLink:hover,
.settingsTabLink.is-active {
  border-color: var(--primary-border);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-active-bg) 82%, transparent),
      rgba(6, 182, 212, 0.08)
    ),
    var(--surface-panel-hover);
  color: var(--text-1);
}

.settingsTabLink:hover {
  transform: translateY(-1px);
}

.settingsTabIcon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--primary-light);
}

.settingsTabLink.is-active .settingsTabIcon {
  background: color-mix(in srgb, var(--primary-light) 12%, var(--surface-panel-hover));
  color: var(--primary);
}

.settingsTabContent {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 16px;
}

.settingsSubtitle,
.settingsReadonlyHint {
  margin: 0 0 14px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}

.settingsReadonlyHint {
  color: var(--text-3);
}

.settingsForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.settingsForm .productFilterActions {
  grid-column: 1 / -1;
}

.settingsForm .productFilterField textarea,
.settingsDialog .productFilterField textarea {
  width: 100%;
  min-height: 96px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  outline: none;
  background: var(--control-bg);
  color: var(--text-1);
  padding: 10px;
}

.settingsForm .productFilterField textarea:focus,
.settingsDialog .productFilterField textarea:focus {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.settingsFormRequired,
.settingsEnforcedHint {
  margin-left: 6px;
  color: #fbbf24;
  font-style: normal;
}

.settingsEnforcedHint {
  font-size: 11px;
  font-weight: 800;
}

.settingsLogoPreview {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
  color: var(--text-2);
  font-size: 13px;
}

.settingsLogoPreview img {
  width: 96px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--surface-panel-strong);
}

.settingsThemeColorPicker {
  grid-column: span 2;
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 10px;
}

.settingsThemeColorPicker legend {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
  padding: 0 6px;
}

.settingsThemeColorPresets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.settingsThemeColorSwatch {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  cursor: pointer;
}

.settingsThemeColorSwatch.is-active {
  border-color: var(--primary-border-strong);
  box-shadow:
    0 0 0 3px var(--focus-ring),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.settingsThemeColorCustom {
  max-width: 260px;
}

.settingsFeedback {
  grid-column: span 2;
  margin: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
}

.settingsFeedback.success {
  border-color: rgba(16, 185, 129, 0.32);
  color: #34d399;
}

.settingsFeedback.error {
  border-color: rgba(239, 68, 68, 0.32);
  color: #fca5a5;
}

.orgSettingsPage {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.orgSettingsBanner {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(420px, 1.8fr) auto;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-dark);
  padding: 20px;
}

.orgSettingsIdentity,
.orgSettingsTitleLine,
.orgSettingsBannerActions,
.orgSettingsPanelHeader,
.orgSettingsPanelHeader > div,
.orgSettingsPlanSummary,
.orgSettingsFeatureList span,
.orgSettingsQuickLink {
  display: flex;
  align-items: center;
}

.orgSettingsIdentity {
  min-width: 0;
  gap: 16px;
}

.orgSettingsAvatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  overflow: hidden;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.34), rgba(6, 182, 212, 0.22));
  color: var(--text-1);
  font-size: 32px;
  font-weight: 950;
}

.orgSettingsAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.orgSettingsTitleLine {
  min-width: 0;
  flex-wrap: wrap;
  gap: 10px;
}

.orgSettingsTitleLine h2 {
  margin: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 24px;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orgSettingsIdentity p {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.orgSettingsBannerMetrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  min-width: 0;
  border-left: 1px solid var(--line-dark);
  border-right: 1px solid var(--line-dark);
}

.orgSettingsBannerMetrics > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  border-right: 1px solid var(--line-dark);
  padding: 0 18px;
}

.orgSettingsBannerMetrics > span:last-child {
  border-right: 0;
}

.orgSettingsBannerMetrics em,
.orgSettingsBannerMetrics small,
.orgSettingsPlanSummary span,
.orgSettingsPlanSummary em,
.orgSettingsLifecycleGrid em,
.orgSettingsQuotaRow span,
.orgSettingsGovernanceList em,
.orgSettingsQuickLink em,
.orgSettingsQuickLink small,
.orgSettingsProfileMeta dt,
.orgSettingsProfileMeta dd {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}

.orgSettingsBannerMetrics strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 22px;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orgSettingsDangerText {
  color: #ef4444 !important;
}

.orgSettingsBannerActions {
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}

.orgSettingsBannerActions a,
.orgSettingsQuickLink {
  text-decoration: none;
}

.orgSettingsMainGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(340px, 0.78fr) minmax(320px, 0.7fr);
  gap: 16px;
  align-items: start;
}

.orgSettingsProfilePanel,
.orgSettingsUsagePanel,
.orgSettingsGovernancePanel,
.orgSettingsTeamsPanel,
.orgSettingsQuickPanel {
  min-width: 0;
}

.orgSettingsPanelHeader {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.orgSettingsPanelHeader > div {
  min-width: 0;
  gap: 9px;
}

.orgSettingsPanelHeader h2 {
  margin: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 16px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orgSettingsPanelHeader a {
  flex: 0 0 auto;
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.orgSettingsForm {
  grid-template-columns: 1fr;
}

.orgSettingsForm .productFilterField.wide,
.orgSettingsForm .settingsFeedback,
.orgSettingsForm .settingsLogoPreview,
.orgSettingsForm .productFilterActions {
  grid-column: 1 / -1;
}

.orgSettingsProfileMeta {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
}

.orgSettingsProfileMeta div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  border-top: 1px solid var(--line-dark);
  padding-top: 8px;
}

.orgSettingsProfileMeta dd {
  margin: 0;
  overflow: hidden;
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orgSettingsPlanSummary {
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
}

.orgSettingsPlanSummary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.orgSettingsPlanSummary strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orgSettingsLifecycleGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.orgSettingsLifecycleGrid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 10px 12px;
}

.orgSettingsLifecycleGrid strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orgSettingsQuotaList {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.orgSettingsQuotaRow {
  display: grid;
  gap: 8px;
}

.orgSettingsQuotaRow > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.orgSettingsQuotaRow strong {
  flex: 0 0 auto;
  color: var(--text-2);
  font-size: 12px;
}

.orgSettingsQuotaTrack {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-panel-strong);
}

.orgSettingsQuotaTrack span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
}

.orgSettingsFeatureList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 16px;
}

.orgSettingsFeatureList span {
  gap: 7px;
  min-width: 0;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
}

.orgSettingsFeatureList svg {
  flex: 0 0 auto;
  color: var(--success);
}

.orgSettingsGovernancePanel {
  display: grid;
  gap: 16px;
}

.orgSettingsGovernanceList {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
}

.orgSettingsGovernanceList > span {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line-dark);
  padding: 12px;
}

.orgSettingsGovernanceList > span:last-child {
  border-bottom: 0;
}

.orgSettingsGovernanceList svg {
  color: var(--primary-light);
}

.orgSettingsGovernanceList strong {
  color: var(--text-1);
  font-size: 13px;
}

.orgSettingsGovernanceList em {
  grid-column: 2 / 3;
}

.orgSettingsGovernanceList a {
  grid-column: 3 / 4;
  grid-row: 1 / span 2;
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.orgSettingsTeamsPanel {
  display: grid;
  gap: 14px;
}

.orgSettingsTeamsPanel .orgSettingsPanelHeader {
  margin-bottom: 0;
}

.orgSettingsTeamsIntro {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.orgSettingsTeamCreateForm {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: end;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
}

.orgSettingsTeamCreateForm .productFilterField {
  margin: 0;
}

.orgSettingsTeamCreateForm .settingsFeedback {
  grid-column: 1 / -1;
  margin: 0;
}

.orgSettingsTeamList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.orgSettingsTeamItem {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 14px;
}

.orgSettingsTeamItemHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.orgSettingsTeamItemHeader strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orgSettingsTeamMeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.orgSettingsTeamMeta span {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 9px 10px;
}

.orgSettingsTeamMeta em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.orgSettingsTeamMeta strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orgSettingsQuickPanel {
  padding-bottom: 12px;
}

.orgSettingsQuickGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  overflow: hidden;
}

.orgSettingsQuickLink {
  position: relative;
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  border-right: 1px solid var(--line-dark);
  color: var(--text-2);
  padding: 16px;
}

.orgSettingsQuickLink:last-child {
  border-right: 0;
}

.orgSettingsQuickLink:hover {
  background: var(--surface-panel-hover);
}

.orgSettingsQuickLink strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orgSettingsQuickLink small {
  color: var(--primary-light);
  font-weight: 900;
}

.settingsMembersBlock,
.settingsMembersTable {
  display: grid;
  gap: 10px;
}

.settingsMemberStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.settingsMemberStats span {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
}

.settingsMemberStats strong {
  color: var(--text-1);
  font-size: 22px;
  line-height: 1;
}

.settingsMemberStats em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.settingsMembersToolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.settingsMembersTable {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.settingsMembersTable.cuiDataList {
  box-shadow: none;
}

.settingsMembersTable .cuiDataListBody {
  overflow-x: auto;
}

.settingsToolbarActions,
.settingsRowActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settingsMembersRow {
  min-height: 56px;
  display: grid;
  grid-template-columns:
    minmax(180px, 1.2fr) minmax(150px, 0.9fr) minmax(118px, 0.7fr) minmax(130px, 0.8fr)
    minmax(130px, 0.78fr) minmax(104px, 0.52fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  padding: 10px 12px;
  font-size: 13px;
}

.settingsMembersRow .cuiDataListTableHeadCell,
.settingsMembersRow .cuiDataListTableCell {
  min-width: 0;
}

.settingsMembersRow:last-child {
  border-bottom: 0;
}

.settingsMembersRow.head {
  min-height: 38px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.settingsMembersRow.empty {
  grid-template-columns: 1fr;
}

.organizationSubscriptionPage {
  display: grid;
  gap: 16px;
}

.organizationSubscriptionHero,
.organizationSubscriptionQuotaPanel,
.organizationSubscriptionEntitlements {
  min-width: 0;
}

.organizationSubscriptionSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.organizationSubscriptionSummary > div,
.organizationSubscriptionNotice,
.organizationQuotaItem,
.organizationEntitlementList span {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
}

.organizationSubscriptionSummary span,
.organizationSubscriptionSummary em,
.organizationSubscriptionNotice p,
.organizationQuotaItem span,
.organizationQuotaItem footer,
.organizationEntitlementList em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.6;
}

.organizationSubscriptionSummary strong {
  display: block;
  margin: 6px 0 3px;
  overflow: hidden;
  color: var(--text-1);
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizationSubscriptionNotice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.organizationSubscriptionNotice p {
  display: grid;
  gap: 2px;
  margin: 0;
}

.organizationSubscriptionNotice strong {
  color: var(--text-1);
  font-size: 13px;
}

.organizationSubscriptionGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 16px;
}

.organizationQuotaList,
.organizationEntitlementList {
  display: grid;
  gap: 10px;
}

.organizationQuotaItem {
  display: grid;
  gap: 10px;
}

.organizationQuotaItem header,
.organizationQuotaItem footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.organizationQuotaItem strong,
.organizationEntitlementList strong {
  display: block;
  color: var(--text-1);
}

.organizationQuotaItem header em {
  flex: 0 0 auto;
  color: var(--primary-light);
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
}

.organizationQuotaTrack {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-panel-strong);
}

.organizationQuotaTrack span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #06b6d4);
}

.organizationEntitlementList span {
  display: grid;
  gap: 4px;
}

.organizationSubscriptionReadonly {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.organizationSubscriptionReadonly > p {
  margin: -2px 0 0;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.65;
}

.organizationSubscriptionReadonlyGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.organizationSubscriptionReadonlyItem {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
}

.organizationSubscriptionReadonlyItem > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.organizationSubscriptionReadonlyItem strong {
  color: var(--text-1);
  font-size: 13px;
}

.organizationSubscriptionReadonlyItem span:not(.panelIcon),
.organizationSubscriptionReadonlyItem em,
.organizationSubscriptionReadonlyItem small {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.65;
}

.organizationReadonlyHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.organizationReadonlyHeader em {
  flex: 0 0 auto;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--surface-panel-strong);
  color: var(--primary-light);
  padding: 2px 8px;
  font-weight: 800;
}

.organizationSnapshotList,
.organizationAuditList {
  display: grid;
  gap: 8px;
}

.organizationSnapshotList > span,
.organizationAuditList > span {
  min-width: 0;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 9px 10px;
}

.organizationSnapshotList strong,
.organizationAuditList strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizationSnapshotList em,
.organizationAuditList em,
.organizationAuditList small {
  overflow-wrap: anywhere;
}

.organizationUpgradeOverlay {
  position: fixed;
  inset: 0;
  z-index: 980;
  display: grid;
  place-items: center;
  background: rgba(2, 6, 23, 0.58);
  padding: 24px;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.organizationUpgradeDialog {
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid var(--line-dark-strong);
  border-radius: 8px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-light) 10%, transparent),
      transparent 38%
    ),
    var(--surface-panel);
  box-shadow: var(--shadow-dark);
}

.organizationUpgradeDialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line-dark);
  padding: 20px;
}

.organizationUpgradeDialog > header > div {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.organizationUpgradeDialog h2,
.organizationUpgradeDialog p {
  margin: 0;
}

.organizationUpgradeDialog h2 {
  color: var(--text-1);
  font-size: 20px;
  line-height: 1.25;
}

.organizationUpgradeDialog p {
  margin-top: 6px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.65;
}

.organizationUpgradeForm {
  display: grid;
  gap: 16px;
  padding: 18px 20px 20px;
}

.organizationUpgradeForm label {
  min-width: 0;
  display: grid;
  gap: 8px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
}

.organizationUpgradeForm input,
.organizationUpgradeForm textarea {
  width: 100%;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-1);
  font: inherit;
  font-size: 14px;
  outline: none;
}

.organizationUpgradeForm input {
  min-height: 42px;
  padding: 0 12px;
}

.organizationUpgradeForm textarea {
  min-height: 112px;
  resize: vertical;
  padding: 11px 12px;
  line-height: 1.6;
}

.organizationUpgradeForm input:focus,
.organizationUpgradeForm textarea:focus {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.organizationUpgradePlanGrid,
.organizationUpgradeFieldGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.organizationUpgradeFieldGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.organizationUpgradePlanOption {
  min-width: 0;
  display: grid;
  gap: 5px;
  min-height: 92px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 14px;
  text-align: left;
}

.organizationUpgradePlanOption[data-active='true'] {
  border-color: var(--primary-border-strong);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-light) 18%, transparent),
      rgba(6, 182, 212, 0.08)
    ),
    var(--surface-panel-hover);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-light) 18%, transparent);
}

.organizationUpgradePlanOption strong {
  color: var(--text-1);
  font-size: 15px;
}

.organizationUpgradePlanOption em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.55;
}

.organizationUpgradeResult {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  padding: 12px;
}

.organizationUpgradeResult[data-tone='success'] {
  border-color: color-mix(in srgb, var(--success) 36%, transparent);
  background: color-mix(in srgb, var(--success) 11%, var(--surface-panel-hover));
}

.organizationUpgradeResult[data-tone='error'] {
  border-color: var(--danger-line);
  background: var(--danger-bg);
}

.organizationUpgradeResult strong {
  color: var(--text-1);
  font-size: 13px;
}

.organizationUpgradeResult span,
.organizationUpgradeResult em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.organizationUpgradeForm footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.organizationUpgradeForm footer > button:not(.settingsPrimaryButton) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
}

.organizationUpgradeForm button:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.settingsMembersRow.active {
  background: var(--primary-active-bg);
}

.settingsMembersRow select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-1);
  padding: 0 8px;
}

.settingsMemberIdentity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.settingsMemberIdentity strong,
.settingsMemberIdentity em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settingsMemberIdentity strong {
  color: var(--text-1);
}

.settingsMemberIdentity em {
  color: var(--text-3);
  font-style: normal;
}

.settingsMemberAvatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--primary-active-bg);
  color: var(--primary-light);
  font-weight: 900;
}

.settingsMemberAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.settingsMemberSelfBadge {
  display: inline;
  color: var(--primary-light);
}

.settingsPrimaryButton,
.settingsSecondaryButton,
.settingsDangerButton,
.settingsDangerGhostButton,
.settingsLinkButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-active-bg);
  color: var(--text-1);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}

.settingsSecondaryButton {
  border-color: var(--line-dark);
  background: var(--surface-panel-hover);
}

.settingsDangerButton,
.settingsDangerGhostButton {
  border-color: rgba(239, 68, 68, 0.34);
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

.settingsDangerGhostButton {
  min-height: 32px;
  padding: 0 10px;
}

.settingsDangerButton:disabled,
.settingsDangerGhostButton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.settingsLinkButton {
  min-height: auto;
  border-color: transparent;
  background: transparent;
  color: var(--primary-light);
  padding: 0;
}

.settingsIconButton {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.settingsIconButton:hover {
  border-color: var(--primary-border);
  color: var(--primary-light);
}

.settingsInlineAction {
  margin-left: 8px;
}

.settingsSubPanel {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 14px;
}

.settingsBreakAll {
  word-break: break-all;
}

.settingsDialogBackdrop {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: grid;
  place-items: center;
  background: rgba(2, 6, 23, 0.66);
  padding: 18px;
}

.settingsDialog {
  width: min(560px, 100%);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-dark);
  padding: 16px;
}

.settingsDialogHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.settingsDialogHeader h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 16px;
}

.settingsDialogHeader p,
.settingsDialogHint {
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.6;
}

.settingsDialogClose {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.settingsInviteCodeResult {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(34, 211, 238, 0.28);
  border-radius: 8px;
  background: rgba(34, 211, 238, 0.08);
  padding: 12px;
}

.settingsInviteCodeResult span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.settingsInviteCodeResult strong {
  color: var(--text-1);
  font-size: 20px;
  letter-spacing: 0.08em;
}

.settingsInvitationPanel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.settingsInvitationPanel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.settingsInvitationPanel h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 16px;
}

.settingsInvitationPanel p {
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.6;
}

.settingsInvitationList {
  display: grid;
  gap: 8px;
}

.settingsInvitationItem {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(74px, 0.35fr) minmax(160px, 0.65fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 11px 12px;
}

.settingsInvitationItem span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.settingsInvitationItem strong {
  overflow: hidden;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settingsInvitationItem em {
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settingsPlaceholder {
  display: grid;
  gap: 8px;
  border: 1px dashed var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 14px;
  color: var(--text-2);
}

.settingsPlaceholder strong {
  color: var(--text-1);
}

.settingsPlaceholder em {
  color: var(--text-3);
  font-style: normal;
  line-height: 1.6;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-team-hub.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy team hub compatibility chunk.
 *
 * This file preserves the pre-split global cascade. Do not add new rules here;
 * put team/account updates in account-team.css or shared UI components.
 */
.teamHubPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
}

.teamHubHero {
  align-items: stretch;
}

.teamHubHeroContext {
  width: 280px;
  flex: 0 0 auto;
  display: grid;
  align-content: center;
  gap: 7px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 14px;
}

.teamHubHeroContext span,
.teamHubHeroContext em,
.teamHubHeroContext small {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.teamHubHeroContext strong {
  color: var(--text-1);
  font-size: 22px;
  line-height: 1.15;
}

.teamHubHeroContext small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamHubMetricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.teamHubMetric {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 5px 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.teamHubMetricIcon {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
}

.teamHubMetricIcon.green {
  color: #34d399;
}

.teamHubMetricIcon.cyan {
  color: #22d3ee;
}

.teamHubMetricIcon.amber {
  color: #fbbf24;
}

.teamHubMetricIcon.purple {
  color: #a78bfa;
}

.teamHubMetric span {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamHubMetric strong {
  color: var(--text-1);
  font-size: 25px;
  line-height: 1;
}

.teamHubMetric em {
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamHubLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.8fr);
  align-items: start;
  gap: 16px;
}

.teamHubPanel {
  display: grid;
  gap: 12px;
}

.teamHubPanelHeader {
  margin-bottom: 0;
}

.teamHubToolbar,
.teamHubRowActions,
.teamHubInvitationActions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.teamHubToolbar button,
.teamHubInvitationActions button,
.teamHubDialog .productFilterActions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.teamHubFeedback {
  margin: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 800;
}

.teamHubFeedback.success {
  border-color: rgba(16, 185, 129, 0.32);
  color: #34d399;
}

.teamHubFeedback.error {
  border-color: rgba(239, 68, 68, 0.32);
  color: #fca5a5;
}

.teamHubMemberList {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.teamHubMemberRow {
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(142px, 0.7fr) minmax(104px, 0.5fr) minmax(
      146px,
      0.7fr
    ) minmax(92px, 0.45fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--row-line);
  padding: 12px 14px;
  color: var(--text-2);
  font-size: 13px;
}

.teamHubMemberRow:last-child {
  border-bottom: 0;
}

.teamHubMemberRow.head {
  min-height: 38px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.teamHubMemberIdentity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.teamHubAvatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, 0.24);
  border-radius: 8px;
  background: rgba(34, 211, 238, 0.09);
  color: #22d3ee;
  font-weight: 950;
}

.teamHubAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teamHubMemberIdentity > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.teamHubMemberIdentity strong,
.teamHubMemberIdentity small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamHubMemberIdentity strong {
  color: var(--text-1);
}

.teamHubMemberIdentity strong em {
  margin-left: 6px;
  color: var(--primary-light);
  font-size: 11px;
  font-style: normal;
}

.teamHubMemberIdentity small,
.teamHubMuted {
  color: var(--text-3);
}

.teamHubRoleSelect {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  outline: none;
  background: var(--control-bg);
  color: var(--text-1);
  padding: 0 10px;
}

.teamHubRoleSelect:focus {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.teamHubSideStack {
  display: grid;
  gap: 16px;
}

.teamHubInviteCode {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  border: 1px solid rgba(34, 211, 238, 0.28);
  border-radius: 8px;
  background: rgba(34, 211, 238, 0.08);
  padding: 12px;
}

.teamHubInviteCode span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.teamHubInviteCode strong {
  grid-column: 1 / 2;
  color: var(--text-1);
  font-size: 22px;
  letter-spacing: 0.06em;
}

.teamHubInviteCode button {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: end;
}

.teamHubInvitationList {
  display: grid;
  gap: 8px;
}

.teamHubInvitationItem {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(58px, auto);
  gap: 8px 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 11px 12px;
}

.teamHubInvitationItem > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.teamHubInvitationItem strong,
.teamHubInvitationItem em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamHubInvitationItem strong {
  color: var(--text-1);
}

.teamHubInvitationItem em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.teamHubInvitationActions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.teamHubRoleGuide {
  display: grid;
  gap: 8px;
}

.teamHubRoleGuide article {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
}

.teamHubRoleGuide article.active {
  border-color: var(--primary-border);
  background: var(--primary-active-bg);
}

.teamHubRoleGuide p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.65;
}

.teamHubTimeline {
  display: grid;
  gap: 8px;
}

.teamHubTimeline article {
  min-width: 0;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 11px 12px;
}

.teamHubTimelineDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #22d3ee, #34d399);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.08);
}

.teamHubTimeline strong,
.teamHubTimeline p {
  margin: 0;
}

.teamHubTimeline strong {
  color: var(--text-1);
}

.teamHubTimeline p,
.teamHubTimeline time {
  color: var(--text-3);
  font-size: 12px;
}

.teamHubEmpty {
  display: grid;
  gap: 6px;
  border: 1px dashed var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 16px;
}

.teamHubEmpty.compact {
  padding: 12px;
}

.teamHubEmpty strong {
  color: var(--text-1);
}

.teamHubEmpty span {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.6;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-workspace-responsive-tail.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy workspace responsive tail compatibility chunk.
 *
 * This mixed multi-module block preserves old responsive overrides in cascade order.
 * Do not add new rules here; migrate fixes into the owning module CSS or shared UI components.
 */
@media (max-width: 720px) {
  .settingsTabNav,
  .settingsForm {
    grid-template-columns: 1fr;
  }

  .settingsTabLink {
    justify-content: flex-start;
  }

  .settingsForm .productFilterField.wide,
  .settingsLogoPreview,
  .settingsThemeColorPicker,
  .settingsFeedback,
  .settingsDialogHint,
  .settingsInviteCodeResult,
  .settingsForm .productFilterActions {
    grid-column: 1 / -1;
  }

  .settingsMemberStats {
    grid-template-columns: 1fr;
  }

  .settingsLogoPreview {
    align-items: flex-start;
    flex-direction: column;
  }

  .settingsThemeColorCustom {
    max-width: none;
  }

  .settingsMembersRow {
    min-width: 860px;
  }

  .settingsInvitationItem,
  .settingsInviteCodeResult {
    grid-template-columns: 1fr;
  }

  .settingsSubPanel {
    padding: 12px;
  }

  .settingsInlineAction {
    display: inline-flex;
    margin-top: 6px;
    margin-left: 0;
  }

  .settingsPageHeader h1 {
    font-size: 26px;
  }

  .orgSettingsBanner,
  .orgSettingsMainGrid,
  .orgSettingsQuickGrid,
  .orgSettingsFeatureList,
  .orgSettingsLifecycleGrid,
  .orgSettingsTeamCreateForm,
  .orgSettingsProfileMeta div {
    grid-template-columns: 1fr;
  }

  .orgSettingsBanner {
    padding: 14px;
  }

  .orgSettingsBannerMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line-dark);
    border-radius: 8px;
    overflow: hidden;
  }

  .orgSettingsBannerMetrics > span {
    border-right: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
    padding: 12px;
  }

  .orgSettingsBannerMetrics > span:nth-child(2n) {
    border-right: 0;
  }

  .orgSettingsBannerMetrics > span:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .orgSettingsBannerActions {
    justify-content: stretch;
  }

  .orgSettingsBannerActions a {
    justify-content: center;
    flex: 1 1;
  }

  .orgSettingsQuickLink {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .orgSettingsQuickLink:last-child {
    border-bottom: 0;
  }

  .settingsDialogBackdrop {
    align-items: start;
    padding: 12px;
  }

  .settingsDialog {
    max-height: calc(100vh - 24px);
    overflow: auto;
  }
}

@media (max-width: 1080px) {
  .settingsLayout {
    grid-template-columns: 1fr;
  }

  .settingsTabNav {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .settingsTabLink {
    justify-content: center;
    padding: 0 8px;
  }

  .settingsMembersTable {
    overflow-x: auto;
  }

  .organizationSubscriptionSummary,
  .organizationSubscriptionGrid,
  .organizationSubscriptionNotice,
  .organizationSubscriptionReadonlyGrid,
  .organizationUpgradePlanGrid,
  .organizationUpgradeFieldGrid {
    grid-template-columns: 1fr;
  }

  .organizationUpgradeOverlay {
    align-items: end;
    padding: 12px;
  }

  .organizationUpgradeDialog {
    max-height: calc(100vh - 24px);
  }

  .orgSettingsBanner,
  .orgSettingsMainGrid {
    grid-template-columns: 1fr;
  }

  .orgSettingsBannerMetrics {
    border-left: 0;
    border-right: 0;
  }

  .orgSettingsQuickGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .orgSettingsQuickLink {
    border-bottom: 1px solid var(--line-dark);
  }

  .orgSettingsQuickLink:nth-child(2n) {
    border-right: 0;
  }

  .settingsMembersRow {
    min-width: 920px;
  }

  .authLayout {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
  }

  .authPromoPane {
    min-height: 100vh;
    border-right: 1px solid var(--line-dark);
    border-bottom: 0;
  }

  .authFormPane {
    min-height: 100vh;
    justify-content: center;
    padding: 48px 32px;
  }

  .appShell {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .appShell:has(.appSidebar.is-rail-open) {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .appSidebar {
    position: sticky;
    top: 0;
    z-index: 920;
    min-height: 100vh;
    grid-template-rows: auto 1fr;
    gap: 12px;
    border-right: 1px solid var(--line-dark);
    border-bottom: 0;
    padding: 14px 10px;
    transition: width 160ms ease, box-shadow 160ms ease;
  }

  .appSidebar.is-rail-open {
    position: sticky;
    top: 0;
    left: auto;
    z-index: 920;
    width: auto;
    height: auto;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    box-shadow: none;
  }

  .sidebarLogo {
    justify-content: center;
  }

  .sidebarLogo > div:not(.brandMarkCompact),
  .workspaceSwitcher,
  .navSectionLabel,
  .navSectionToggle span,
  .navItem > span:not(.navIcon),
  .navStage {
    display: none;
  }

  .appSidebar.is-rail-open .sidebarLogo {
    justify-content: flex-start;
  }

  .appSidebar.is-rail-open .sidebarLogo > div:not(.brandMarkCompact),
  .appSidebar.is-rail-open .workspaceSwitcher,
  .appSidebar.is-rail-open .navSectionToggle span,
  .appSidebar.is-rail-open .navItem > span:not(.navIcon) {
    display: block;
  }

  .appSidebar.is-rail-open .navStage {
    display: inline-flex;
  }

  .appSidebar.is-rail-open .navSectionToggle,
  .appSidebar.is-rail-open .sidebarBottom {
    display: flex;
  }

  .sidebarNav {
    display: block;
    overflow-y: auto;
    padding: 0;
  }

  .navSection {
    gap: 6px;
    margin-bottom: 10px;
  }

  .navSectionToggle {
    display: none;
    justify-content: center;
    min-height: 36px;
    padding: 0;
  }

  .navSectionToggle.is-active {
    border-radius: 8px;
  }

  .navSectionChevron {
    width: 16px;
    height: 16px;
  }

  .navItem {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 40px;
    padding: 0;
  }

  .appSidebar.is-rail-open .navSectionToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: auto;
    padding: 4px 8px;
  }

  .appSidebar.is-rail-open .navSectionLabel:not(.navSectionToggle) {
    display: block;
  }

  .appSidebar.is-rail-open .navItem {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    justify-items: stretch;
    min-height: 38px;
    padding: 0 8px;
  }

  .navIcon {
    width: 28px;
    height: 28px;
  }

  .navBadge {
    position: absolute;
    top: 1px;
    right: 0;
    min-height: 16px;
    padding: 0 5px;
    font-size: 9px;
  }

  .appSidebar.is-rail-open .sidebarLogo {
    justify-content: flex-start;
  }

  .appSidebar.is-rail-open .sidebarLogo > div:not(.brandMarkCompact),
  .appSidebar.is-rail-open .workspaceSwitcher,
  .appSidebar.is-rail-open .navSectionToggle span,
  .appSidebar.is-rail-open .navItem > span:not(.navIcon) {
    display: block;
  }

  .appSidebar.is-rail-open .navStage {
    display: inline-flex;
  }

  .appSidebar.is-rail-open .navSectionToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: auto;
    padding: 4px 8px;
  }

  .appSidebar.is-rail-open .navSectionLabel:not(.navSectionToggle) {
    display: block;
  }

  .appSidebar.is-rail-open .navItem {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    justify-items: stretch;
    min-height: 38px;
    padding: 0 8px;
  }

  .appSidebar.is-rail-open .navBadge {
    position: static;
    min-height: 22px;
    padding: 0 7px;
    font-size: 11px;
  }

  .sidebarBottom {
    display: none;
  }

  .appTopbar {
    min-height: 60px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 16px;
  }

  .topbarLeft,
  .topbarRight {
    width: auto;
    flex-wrap: wrap;
  }

  .liveHistoryFilterPanel {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .liveHistoryFilterPanel .historyKeywordField,
  .liveHistoryFilterPanel .historyCreatorField,
  .liveHistoryFilterPanel .historySortField {
    grid-column: span 3;
  }

  .liveHistoryFilterPanel .historyIdField,
  .liveHistoryFilterPanel .historyPageSizeField {
    grid-column: span 2;
  }

  .liveHistoryFilterPanel .historyTimeField,
  .liveHistoryFilterPanel .historyFilterActions {
    grid-column: span 3;
  }

  .scheduleFilterPanel .scheduleKeywordField,
  .scheduleFilterPanel .scheduleCreatorField,
  .scheduleFilterPanel .scheduleStatusField,
  .scheduleFilterPanel .scheduleSortField,
  .scheduleFilterPanel .schedulePageSizeField,
  .scheduleFilterPanel .scheduleTimeField,
  .scheduleFilterPanel .scheduleFilterActions {
    grid-column: span 3;
  }

  .searchBox {
    width: min(360px, 38vw);
  }

  .dashboardGrid,
  .homeWorkbenchThreeZoneGrid,
  .homeWorkbenchAgentMode,
  .permissionDashboardGrid,
  .creatorGrid,
  .competitorMonitorGrid,
  .crmCreatorGrid,
  .productDetailGrid,
  .productDetailGrid.equal,
  .productDetailGrid.historyTrendGrid,
  .moduleEntryGrid,
  .moduleActionGrid {
    grid-template-columns: 1fr;
  }

  .kpiGrid,
  .productDetailKpis,
  .placeholderKpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .homeWorkbenchKpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .homeWorkbenchCommerceCard {
    grid-column: span 3;
  }

  .homeWorkbenchCommerceCard.wide {
    grid-column: span 6;
  }

  .homeWorkbenchCommerceCard--full {
    grid-column: span 6;
  }

  .homeWorkbenchBoardPanel {
    grid-row: auto;
  }

  .homeWorkbenchAgentColumn {
    min-height: 0;
  }

  .productRankGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creatorMatchGrid {
    grid-template-columns: 1fr;
  }

  .alertStrip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .authPromoPane,
  .authFormPane {
    padding: 40px 24px 24px;
  }

  .authFormPane {
    align-items: center;
    min-height: 100vh;
  }

  .authFormShell {
    width: min(420px, 100%);
    max-height: none;
  }

  .authPromoTop {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }

  .authPromoTop .workspacePreferencesTrigger {
    min-height: 34px;
    padding: 0 9px;
  }

  .authBrandRow {
    margin-left: auto;
  }

  .authBrandRow span {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .authPromoCaption {
    display: none;
  }

  .authCapabilityStrip {
    display: none;
  }

  .factsGrid {
    grid-template-columns: 1fr;
  }

  .authTabs,
  .authOAuthGrid,
  .authPhoneGrid,
  .authInvitePreview {
    grid-template-columns: 1fr;
  }

  .authStepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .authInlineActions,
  .authCodeSendRow {
    align-items: flex-start;
    flex-direction: column;
  }

  .workbenchShell {
    width: min(100% - 28px, 1120px);
  }

  .workbenchHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .homeWorkbenchThreeZoneGrid,
  .homeWorkbenchEditorShell,
  .homeWorkbenchEditorConfig,
  .homeWorkbenchKpiGrid,
  .homeWorkbenchToolboxGrid,
  .homeWorkbenchWidgetList,
  .homeWorkbenchChoiceGrid.compact,
  .homeWorkbenchTemplatePicker,
  .homeWorkbenchInsightLibrary,
  .homeWorkbenchChartLibrary,
  .homeWorkbenchContentOrderList,
  .homeWorkbenchTemplateForm .homeWorkbenchMetricLibrary,
  .homeWorkbenchContentGrid,
  .homeWorkbenchCommerceGrid,
  .homeWorkbenchChartGrid,
  .homeWorkbenchFormGrid {
    grid-template-columns: 1fr;
  }

  .homeWorkbenchOverview:not(.is-editing),
  .homeWorkbenchOverview:not(.is-editing) .homeWorkbenchThreeZoneGrid:not(.isPreview),
  .homeWorkbenchOverview:not(.is-editing) .homeWorkbenchThreeZoneGrid:not(.isPreview) .homeWorkbenchBoardPanel,
  .homeWorkbenchOverview:not(.is-editing) .homeWorkbenchThreeZoneGrid:not(.isPreview) .homeWorkbenchBoardScrollBody,
  .homeWorkbenchOverview:not(.is-editing) .homeWorkbenchThreeZoneGrid:not(.isPreview) .homeWorkbenchSideColumn {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .homeWorkbenchCommerceCard,
  .homeWorkbenchCommerceCard.wide,
  .homeWorkbenchCommerceCard--full {
    grid-column: auto;
  }

  .homeWorkbenchCommerceProduct,
  .homeWorkbenchInsightLayout,
  .homeWorkbenchAdDetail,
  .homeWorkbenchCreatorProfile,
  .homeWorkbenchCreatorFlow,
  .homeWorkbenchLiveRoom,
  .homeWorkbenchChannelMix,
  .homeWorkbenchStrategyGrid,
  .homeWorkbenchStrategyCardBody,
  .homeWorkbenchActionGrid,
  .homeWorkbenchActionSplit,
  .homeWorkbenchActionSignalGrid,
  .homeWorkbenchStructureList,
  .homeWorkbenchMismatchList button {
    grid-template-columns: 1fr;
  }

  .homeWorkbenchCommerceMedia img {
    width: min(180px, 100%);
    height: auto;
    aspect-ratio: 1;
  }

  .homeWorkbenchMiniStatGrid,
  .homeWorkbenchCreatorCopy,
  .homeWorkbenchVideoStrip,
  .homeWorkbenchInsightMediaStrip,
  .homeWorkbenchChannelLegend,
  .homeWorkbenchCompetitorProducts,
  .homeWorkbenchTierFocusGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .homeWorkbenchCategoryMatrix {
    min-height: 250px;
  }

  .homeWorkbenchChartCard,
  .homeWorkbenchChartCard.span-full,
  .homeWorkbenchChartCard.span-half,
  .homeWorkbenchChartCard.span-third {
    grid-column: auto;
  }

  .homeWorkbenchOverview.is-editing,
  .homeWorkbenchEditorShell {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .homeWorkbenchEditorConfig {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .homeWorkbenchDiySection.wide,
  .homeWorkbenchDiySection.full {
    grid-column: auto;
  }

  .homeWorkbenchDashboardHeader {
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
  }

  .homeWorkbenchSegmentedControl {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .homeWorkbenchHeaderActions,
  .homeWorkbenchEditButton {
    width: 100%;
  }

  .homeWorkbenchDiyActions {
    width: 100%;
    flex-wrap: wrap;
  }

  .homeWorkbenchDiyActions button {
    flex: 1 1 auto;
  }

  .homeWorkbenchMetricPicker {
    grid-template-columns: 1fr;
  }

  .homeWorkbenchEditorPreview {
    position: static;
    height: auto;
    overflow: visible;
  }

  .homeWorkbenchPreviewFrame {
    min-height: 520px;
  }

  .homeWorkbenchPreviewCanvas {
    --home-workbench-preview-scale: 0.34;
  }

  .homeWorkbenchChart {
    grid-template-columns: repeat(7, minmax(18px, 1fr));
    gap: 7px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .homeWorkbenchAgentColumn {
    min-height: 0;
  }

  .agentEmbeddedHeader {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .agentEmbeddedPanelBody {
    grid-template-columns: 1fr;
  }

  .agentEmbeddedWelcome {
    align-items: flex-start;
    gap: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .agentEmbeddedWelcomeQuestions {
    margin-left: 0;
  }

  .agentEmbeddedWelcome .agentWelcomeMascot {
    width: 78px;
    height: 64px;
  }

  .agentEmbeddedPanelBody .agentConversationSidebar {
    max-height: 150px;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  }

  .agentEmbeddedPanel .agentSuggestedQuestions {
    grid-template-columns: 1fr;
  }

  .workspacePanel {
    padding: 24px;
  }

  .appContent {
    padding-left: 14px;
    padding-right: 14px;
  }

  .appShell {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .appShell:has(.appSidebar.is-rail-open) {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .appSidebar {
    position: sticky;
    top: 0;
    min-height: 100vh;
    grid-template-rows: auto 1fr;
    gap: 12px;
    border-right: 1px solid var(--line-dark);
    border-bottom: 0;
    padding: 14px 10px;
  }

  .appSidebar.is-rail-open {
    position: sticky;
    top: 0;
    left: auto;
    z-index: 920;
    width: auto;
    height: auto;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    box-shadow: none;
  }

  .sidebarLogo {
    justify-content: center;
  }

  .sidebarLogo > div:not(.brandMarkCompact),
  .workspaceSwitcher,
  .navSectionToggle span,
  .navItem > span:not(.navIcon),
  .navStage {
    display: none;
  }

  .kpiGrid,
  .placeholderKpis {
    grid-template-columns: 1fr;
  }

  .sidebarNav {
    display: block;
    overflow-y: auto;
  }

  .navSection {
    gap: 6px;
    margin-bottom: 10px;
  }

  .navSectionToggle {
    display: none;
    justify-content: center;
    min-height: 36px;
    padding: 0;
  }

  .navItem {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 40px;
    padding: 0;
  }

  .navBadge {
    position: absolute;
    top: 1px;
    right: 0;
    min-height: 16px;
    padding: 0 5px;
    font-size: 9px;
  }

  .appSidebar.is-rail-open .sidebarLogo > div:not(.brandMarkCompact),
  .appSidebar.is-rail-open .workspaceSwitcher,
  .appSidebar.is-rail-open .navSectionToggle span,
  .appSidebar.is-rail-open .navItem > span:not(.navIcon) {
    display: block;
  }

  .appSidebar.is-rail-open .navSectionToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: auto;
    padding: 4px 8px;
  }

  .appSidebar.is-rail-open .navSectionLabel:not(.navSectionToggle) {
    display: block;
  }

  .appSidebar.is-rail-open .navStage {
    display: inline-flex;
  }

  .appSidebar.is-rail-open .navItem {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    justify-items: stretch;
    min-height: 38px;
    padding: 0 8px;
  }

  .appSidebar.is-rail-open .navBadge {
    position: static;
    min-height: 22px;
    padding: 0 7px;
    font-size: 11px;
  }

  .appTopbar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbarLeft,
  .topbarRight,
  .searchBox {
    width: 100%;
  }

  .dashboardGrid {
    grid-template-columns: 1fr;
  }

  .welcomePanel,
  .moduleHeroPanel,
  .productDetailHero,
  .usageBand {
    flex-direction: column;
  }

  .workspaceSummary,
  .heroContextCard {
    width: 100%;
  }

  .aiInsightBar {
    align-items: flex-start;
    flex-direction: column;
  }

  .aiPromptTags {
    margin-left: 0;
  }

  .productRow {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
    padding: 12px 0;
  }

  .productRow.tableHead {
    display: none;
  }

  .productDetailKpis,
  .productRankGrid,
  .creatorGrid,
  .creatorMetricGrid {
    grid-template-columns: 1fr;
  }

  .productTrendRow,
  .productPriceRow,
  .competitorEventRow {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 6px;
    padding: 10px 0;
  }

  .productTrendRow.head,
  .productPriceRow.head,
  .competitorEventRow.head {
    display: none;
  }

  .competitorForm,
  .competitorForm.compact,
  .crmForm,
  .crmForm.compact {
    grid-template-columns: 1fr;
  }

  .crmFollowupRow {
    grid-template-columns: 1fr;
  }

  .openapiScopeOption,
  .openapiLogRow,
  .accountSecurityGrid,
  .notificationActionGrid {
    grid-template-columns: 1fr;
  }

  .crmFollowupRow.head {
    display: none;
  }

  .openapiLogRow.head {
    display: none;
  }

  .crmObjectGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .productInfoList div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .permissionMatrixRow {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
    padding: 12px 0;
  }

  .accountIdentityRow {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .permissionMatrixRow.head {
    display: none;
  }

  .noPermissionPanel {
    grid-template-columns: 1fr;
  }

  .topbarRight {
    gap: 8px;
  }

  .workspacePreferences {
    max-width: 100%;
  }

  .workspacePreferencesTriggerText {
    max-width: 112px;
  }

  .userBadge {
    width: auto;
  }
}

/* Keep workspace canvases desktop-sized; use horizontal scrolling when needed. */
@media (max-width: 1180px) {
  .productListToolbar,
  .productPager,
  .productPager > div,
  .aiInsightBar,
  .creatorCardHead,
  .creatorCardFoot {
    flex-wrap: nowrap;
  }

  .appTopbar {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .topbarLeft,
  .topbarRight {
    flex-wrap: wrap;
    width: auto;
  }

  .searchBox {
    width: min(360px, 38vw);
  }

  .topbarChip,
  .topbarIcon,
  .topbarLogout,
  .workspacePreferencesTrigger,
  .userBadge,
  .productFilterActions button,
  .productPager button,
  .productRetryButton,
  .chatbiSubmitButton,
  .productBackLink,
  .productActionCell a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .welcomePanel,
  .moduleHeroPanel,
  .productDetailHero,
  .usageBand {
    flex-direction: row;
  }

  .workspaceSummary,
  .heroContextCard {
    width: 260px;
  }

  .aiInsightBar {
    align-items: center;
    flex-direction: row;
  }

  .aiPromptTags {
    margin-left: auto;
  }

  .dashboardGrid {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
  }

  .permissionDashboardGrid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.88fr);
  }

  .moduleEntryGrid,
  .moduleActionGrid,
  .placeholderKpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kpiGrid,
  .productDetailKpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .creatorMetricGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .alertStrip,
  .productRankGrid,
  .creatorMatchGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .creatorGrid,
  .competitorMonitorGrid,
  .crmCreatorGrid,
  .productDetailGrid.equal,
  .competitorForm,
  .competitorForm.compact,
  .crmForm,
  .crmForm.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .productDetailGrid {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.72fr);
  }

  .chatbiLayout {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  }

  .chatbiResultGrid {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr) minmax(280px, 0.8fr);
  }

  .productFilterPanel {
    grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(128px, 1fr)) minmax(150px, 1fr) minmax(150px, 1.2fr) minmax(86px, 0.5fr) auto;
  }

  .creatorFilterPanel {
    grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(128px, 1fr)) minmax(86px, 0.5fr) auto;
  }

  .chatbiFilterGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .productRow {
    grid-template-columns: minmax(220px, 1fr) 90px minmax(130px, 0.5fr) 86px;
    align-items: center;
    gap: 12px;
    padding: 0;
  }

  .productRow.tableHead {
    display: grid;
  }

  .productListRow {
    grid-template-columns: minmax(280px, 1.65fr) minmax(124px, 0.7fr) minmax(142px, 0.9fr) minmax(128px, 0.8fr) minmax(118px, 0.65fr) minmax(82px, 0.42fr);
  }

  .productTrendRow {
    grid-template-columns: 1fr 0.8fr 1fr 0.8fr 0.8fr 0.8fr;
  }

  .productPriceRow {
    grid-template-columns: 1fr repeat(4, minmax(88px, 0.7fr));
  }

  .competitorEventRow {
    grid-template-columns: 1fr 1.4fr 96px 118px;
  }

  .productTrendRow,
  .productPriceRow,
  .competitorEventRow {
    align-items: center;
    gap: 10px;
    padding: 0;
  }

  .productTrendRow.head,
  .productPriceRow.head,
  .competitorEventRow.head {
    display: grid;
  }

  .crmFollowupRow {
    grid-template-columns: 88px minmax(0, 1fr) 128px 76px;
  }

  .crmFollowupRow,
  .openapiLogRow,
  .permissionMatrixRow {
    align-items: center;
    gap: 10px;
    padding: 0;
  }

  .openapiScopeOption {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .openapiLogRow {
    grid-template-columns: minmax(120px, 0.9fr) minmax(180px, 1.3fr) 80px 88px;
  }

  .notificationActionGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .notificationButtonRow {
    flex-wrap: wrap;
  }

  .crmFollowupRow.head,
  .openapiLogRow.head {
    display: grid;
  }

  .permissionMatrixRow {
    grid-template-columns: minmax(220px, 1.1fr) 96px 96px minmax(240px, 1fr);
  }

  .permissionMatrixRow.head {
    display: grid;
  }

  .crmObjectGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .productInfoList div {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 8px;
  }

  .noPermissionPanel {
    grid-template-columns: 56px minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .appTopbar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbarLeft,
  .topbarRight,
  .searchBox {
    width: 100%;
  }

  .topbarRight {
    justify-content: flex-start;
  }
}

@media (max-width: 430px) {
  .authPromoPane,
  .authFormPane {
    padding-left: 18px;
    padding-right: 18px;
  }

  .authBackLink,
  .authPromoTop .workspacePreferencesTrigger {
    font-size: 12px;
  }

  .authPromoTop .workspacePreferencesTriggerText {
    max-width: 58px;
  }

  .authBrandRow {
    gap: 8px;
  }

  .authBrandMark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .authBrandRow strong {
    font-size: 14px;
  }

  .authBrandRow span {
    max-width: 116px;
    font-size: 11px;
  }

  .liveHistoryFilterPanel {
    grid-template-columns: 1fr;
  }

  .liveHistoryFilterPanel .historyKeywordField,
  .liveHistoryFilterPanel .historyCreatorField,
  .liveHistoryFilterPanel .historyIdField,
  .liveHistoryFilterPanel .historySortField,
  .liveHistoryFilterPanel .historyPageSizeField,
  .liveHistoryFilterPanel .historyTimeField,
  .liveHistoryFilterPanel .historyFilterActions {
    grid-column: 1;
  }

  .liveHistoryFilterPanel .historyFilterActions {
    justify-content: stretch;
  }

  .liveHistoryFilterPanel .historyFilterActions button {
    flex: 1 1;
  }

  .diagnosisToolbar .diagnosisSelectorField,
  .diagnosisToolbar .diagnosisToolbarActions {
    grid-column: 1;
  }

  .diagnosisDimensionGrid,
  .diagnosisMetricGrid,
  .diagnosisListGrid {
    grid-template-columns: 1fr;
  }

  .diagnosisActions {
    align-items: stretch;
  }

  .diagnosisActions .productRetryButton {
    width: 100%;
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-creator-search.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy creator search and ranking compatibility chunk.
 *
 * This file preserves the pre-split global cascade. Do not add new rules here;
 * put creator updates in creators.css or shared UI components.
 */
/* Creator ranking styles from selective creator integration. */
.creatorSearchPage {
  --creator-accent: var(--primary);
  --creator-accent-2: var(--accent);
  --creator-accent-soft: var(--primary-soft);
  --creator-text: var(--text-1);
  --creator-muted: var(--text-3);
  --creator-line: var(--line-dark);
  --creator-panel: #ffffff;
  --creator-popover-bg: #ffffff;
  --creator-popover-secondary-bg: #ffffff;
  --creator-select-bg: #ffffff;
  --creator-switch-off-bg: #e2e8f0;
  --creator-switch-off-border: #cbd5e1;
  --creator-switch-knob: #ffffff;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  row-gap: 24px;
  color: var(--creator-text);
}

[data-theme='dark'] .creatorSearchPage {
  --creator-panel: var(--surface-panel);
  --creator-popover-bg: var(--bg-sidebar);
  --creator-popover-secondary-bg: var(--surface-panel-strong);
  --creator-select-bg: rgba(255, 255, 255, 0.08);
  --creator-switch-off-bg: rgba(255, 255, 255, 0.12);
  --creator-switch-off-border: rgba(255, 255, 255, 0.18);
  --creator-switch-knob: #e2e8f0;
}

.creatorSearchHeader {
  min-height: 28px;
  display: flex;
  align-items: flex-start;
  margin: 0;
}

.creatorSearchHeader h1 {
  margin: 0;
  color: var(--creator-text);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
}

.creatorSearchPanel,
.creatorResultPanel {
  border: 1px solid var(--creator-line);
  border-radius: 8px;
  background: var(--creator-panel);
  box-shadow: var(--shadow-light);
}

.creatorSearchPanel {
  display: grid;
  gap: 0;
  overflow: visible;
  padding: 20px 24px;
}

.creatorResultPanel {
  overflow-x: auto;
}

.creatorResultPanel.cuiDataList {
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.creatorResultPanel .cuiDataListToolbar {
  justify-content: flex-end;
  border-bottom-color: var(--creator-line);
  background: var(--creator-panel);
  padding: 16px 18px;
}

.creatorResultPanel .cuiDataListToolbarSlot {
  flex: 0 1 auto;
}

.creatorResultPanel .cuiDataListBody {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: rgba(148, 163, 184, 0.65) rgba(148, 163, 184, 0.14);
  scrollbar-width: thin;
}

.creatorResultPanel .cuiDataListBody::-webkit-scrollbar {
  height: 16px;
}

.creatorResultPanel .cuiDataListBody::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
}

.creatorResultPanel .cuiDataListBody::-webkit-scrollbar-thumb {
  border: 4px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.7);
}

.creatorResultPanel .cuiDataListFooter {
  justify-content: center;
  border-top-color: var(--creator-line);
  padding: 16px 18px;
}

.creatorResultPanel .cuiDataListFooter > .creatorPager {
  padding: 0;
}

.creatorStandaloneLoading {
  min-height: 100vh;
  overflow-x: auto;
  background: var(--bg-app);
  padding: 24px;
}

.creatorSearchTop {
  display: flex;
  align-items: center;
  gap: 10px;
}

.creatorSearchBox {
  width: min(760px, 100%);
  min-width: 0;
  height: 54px;
  display: flex;
  align-items: center;
  overflow: visible;
  box-sizing: border-box;
  border: 2px solid var(--creator-accent);
  border-radius: 999px;
  background: #ffffff;
}

.creatorSearchBox *,
.creatorSearchBox *::before,
.creatorSearchBox *::after {
  animation: none !important;
  transition: none !important;
}

.creatorSearchKeywordInput,
.creatorSearchKeywordInput:hover,
.creatorSearchKeywordInput:focus,
.creatorSearchKeywordInput:active,
.creatorSearchKeywordInput.ant-input,
.creatorSearchKeywordInput.ant-input:hover,
.creatorSearchKeywordInput.ant-input:focus,
.creatorSearchKeywordInput.ant-input:active,
.creatorSearchKeywordInput.ant-input-borderless,
.creatorSearchKeywordInput.ant-input-borderless:hover,
.creatorSearchKeywordInput.ant-input-borderless:focus,
.creatorSearchKeywordInput.ant-input-borderless:active,
.creatorSearchBox:focus-within .creatorSearchKeywordInput {
  --ant-input-active-bg: #ffffff !important;
  --ant-input-hover-bg: #ffffff !important;
  --ant-input-color-bg-container: #ffffff !important;
  --ant-input-color-bg-container-disabled: #ffffff !important;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 22px;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--creator-text) !important;
  font-size: 14px;
  box-shadow: none !important;
  outline: 0 !important;
}

.creatorSearchKeywordInput:disabled,
.creatorSearchKeywordInput.ant-input-disabled {
  background: #ffffff !important;
  color: var(--creator-text) !important;
  opacity: 1;
  -webkit-text-fill-color: var(--creator-text);
}

.creatorSearchKeywordInput::placeholder {
  color: #a3afc2 !important;
}

.creatorSearchSubmit,
.creatorSearchSubmit:hover,
.creatorSearchSubmit:focus,
.creatorSearchSubmit:focus-visible,
.creatorSearchSubmit:active,
.creatorSearchSubmit.ant-btn-primary:not(:disabled):not(.ant-btn-disabled):hover,
.creatorSearchSubmit.ant-btn-primary:not(:disabled):not(.ant-btn-disabled):focus,
.creatorSearchSubmit.ant-btn-primary:not(:disabled):not(.ant-btn-disabled):active {
  flex: 0 0 72px;
  align-self: stretch;
  width: 72px;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  background: var(--creator-accent) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: none !important;
}

.creatorSearchSubmit::before,
.creatorSearchSubmit::after,
.creatorSearchSubmit[ant-click-animating-without-extra-node]::after,
.creatorSearchSubmit.ant-click-animating-node::after,
.creatorSearchSubmit .ant-wave {
  display: none !important;
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

.creatorSearchSubmit .anticon,
.creatorSearchSubmit svg {
  color: #ffffff !important;
}

.creatorCollectButton {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--creator-accent);
  color: #fff;
  font-weight: 900;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 13px;
  box-shadow: none;
}

.creatorSearchDivider {
  height: 1px;
  margin: 6px 0;
  background: var(--creator-line);
}

.creatorSearchFilterRow {
  display: flex;
  align-items: start;
  gap: 8px;
  min-width: 0;
  overflow: visible;
  padding: 7px 0;
}

.creatorSearchFilterRow.compact {
  align-items: center;
  flex-wrap: wrap;
}

.creatorSearchFilterRow > strong,
.creatorAdvancedRow > strong {
  width: 86px;
  min-width: 86px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--creator-muted);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.creatorSearchChipList {
  min-width: 0;
  flex: 1 1;
}

.creatorSearchChipList {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
}

.creatorAntSegmented.ant-segmented {
  max-width: 100%;
  background: transparent;
}

.creatorAntSegmented .ant-segmented-group {
  flex-wrap: wrap;
  gap: 7px 12px;
}

.creatorAntSegmented .ant-segmented-item {
  border-radius: 999px;
  color: var(--creator-text);
  font-size: 13px;
  font-weight: 800;
}

.creatorAntSegmented .ant-segmented-item-label {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  line-height: 30px;
}

.creatorAntSegmented .ant-segmented-thumb,
.creatorAntSegmented .ant-segmented-item-selected {
  border-radius: 999px;
  background: var(--creator-accent);
  color: var(--accent-on-primary, #ffffff);
}

.creatorAntSegmented em {
  margin-left: 4px;
  border-radius: 999px;
  background: var(--success);
  color: var(--accent-on-primary, #ffffff);
  padding: 1px 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.creatorSearchChipTrailing {
  display: inline-flex;
}

.creatorCommerceCategoryRow {
  align-items: flex-start;
}

.creatorCommerceCategoryPanel {
  min-width: 0;
  position: relative;
  overflow: visible;
  flex: 1 1;
}

.creatorCommerceCategoryHeader {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 16px;
}

.creatorCommerceCategoryHeader button,
.creatorCommerceCategoryMenu button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--creator-text);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 800;
}

.creatorCommerceCategoryHeader button.active,
.creatorCommerceCategoryMenu button.selected {
  background: var(--creator-accent);
  color: var(--accent-on-primary, #ffffff);
}

.creatorCommerceCategoryPanel .creatorCommerceCategoryPopover {
  width: min(520px, calc(100vw - 48px));
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 68px;
  display: grid;
  grid-template-columns: minmax(190px, 0.95fr) minmax(190px, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--creator-line);
  border-radius: 18px;
  background: var(--creator-popover-bg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.creatorCommerceCategoryMenu {
  min-width: 0;
  max-height: 260px;
  display: grid;
  align-content: start;
  overflow-y: auto;
  padding: 10px;
  scrollbar-color: rgba(148, 163, 184, 0.8) rgba(148, 163, 184, 0.16);
  scrollbar-width: thin;
}

.creatorCommerceCategoryMenu.secondary {
  border-left: 1px solid var(--creator-line);
  background: var(--surface-panel-strong);
}

.creatorCommerceCategoryMenu button {
  width: 100%;
  min-height: 42px;
  justify-content: space-between;
  border-radius: 8px;
  padding: 0 12px;
  text-align: left;
}

.creatorCommerceCategoryMenu button.active:not(.selected) {
  background: var(--surface-panel-strong);
  color: var(--creator-accent);
}

.creatorCommerceCategoryMenu.secondary button.active:not(.selected) {
  background: var(--creator-popover-secondary-bg);
}

.creatorCommerceCategoryMenu button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorSearchChip {
  min-height: 30px;
  position: relative;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--creator-text);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 750;
}

.creatorSearchChip.active {
  background: var(--creator-accent);
  color: var(--accent-on-primary, #ffffff);
  padding: 0 16px;
}

.creatorSearchChip em {
  position: absolute;
  top: -7px;
  right: -14px;
  border-radius: 999px;
  background: var(--success);
  color: var(--accent-on-primary, #ffffff);
  padding: 1px 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.creatorSwitch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--creator-text);
  font-size: 13px;
  font-weight: 750;
}

.creatorSwitch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.creatorSwitch span {
  width: 46px;
  height: 24px;
  position: relative;
  border: 1px solid var(--creator-accent);
  border-radius: 999px;
  background: var(--creator-accent);
}

.creatorSwitch span::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--creator-switch-knob, #fff);
}

.creatorSwitch input:not(:checked) + span {
  border-color: var(--creator-switch-off-border);
  background: var(--creator-switch-off-bg);
}

.creatorSwitch input:not(:checked) + span::after {
  right: auto;
  left: 3px;
}

.creatorSelectPill {
  --filter-select-border: var(--creator-line);
  --filter-select-bg: var(--creator-select-bg);
  --filter-select-hover-bg: var(--surface-panel-strong);
  position: relative;
  min-width: 142px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--filter-select-border);
  border-radius: var(--cui-radius-md);
  background: var(--filter-select-bg);
  color: var(--creator-text);
  padding: 0;
  font-size: 13px;
  font-weight: 780;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  z-index: 1;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.creatorSelectPill.open,
.creatorSelectPill:focus-within {
  border-color: color-mix(in srgb, var(--creator-accent) 56%, var(--creator-line));
  background: color-mix(in srgb, var(--creator-accent) 5%, var(--filter-select-bg));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--creator-accent) 14%, transparent);
  z-index: 45;
}

.filterSelect {
  position: relative;
  min-width: 0;
  display: inline-flex;
}

.filterSelectTrigger {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: inherit;
  outline: 0;
  background: transparent;
  color: var(--creator-text);
  font: inherit;
  padding: 0 10px 0 12px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.filterSelectTrigger:disabled {
  cursor: not-allowed;
}

.filterSelect.disabled {
  opacity: 0.6;
}

.filterSelectSelectedText {
  min-width: 0;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

.filterSelectLabel {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  color: #697891;
  font-size: 12px;
  font-weight: 820;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filterSelectValue {
  min-width: 0;
  flex: 0 0 auto;
  overflow: hidden;
  color: var(--creator-text);
  font-size: 13px;
  font-weight: 920;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filterSelectBadge {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--success);
  color: #ffffff;
  padding: 1px 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.filterSelectChevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #7c8ba1;
  transition: transform 160ms ease;
}

.filterSelect.open .filterSelectChevron {
  transform: rotate(180deg);
}

.creatorSearchTypePill {
  width: 190px;
  flex: 0 0 190px;
  min-width: 0;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: var(--control-bg);
  box-shadow: none;
  padding: 0;
}

.creatorSearchTypePill .filterSelectTrigger {
  min-height: 100%;
  padding: 0 16px 0 22px;
}

.creatorSearchTypePill .filterSelectSelectedText {
  display: flex;
}

.creatorSearchTypePill .filterSelectValue {
  max-width: 128px;
}

.creatorSearchTypePill .filterSelectLabel {
  display: none;
}

.creatorSortPill {
  min-height: 40px;
  border-radius: 999px;
  min-width: 154px;
}

.filterSelectMenu,
.creatorSelectMenu {
  width: max(100%, 188px);
  max-height: 260px;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  display: grid;
  gap: 3px;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--creator-line) 82%, var(--creator-accent));
  border-radius: 12px;
  background: var(--creator-popover-bg);
  padding: 6px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}

.filterSelectOption,
.creatorSelectMenu button {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--creator-text);
  font: inherit;
  padding: 0 9px 0 10px;
  text-align: left;
}

.filterSelectOption:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.creatorSelectMenu button:hover,
.creatorSelectMenu button:focus-visible,
.filterSelectOption:not(:disabled):not(.selected):hover,
.filterSelectOption:not(.selected):focus-visible,
.filterSelectOption.active:not(.selected) {
  outline: 0;
  background: color-mix(in srgb, var(--creator-accent) 6%, var(--surface-panel-strong));
}

.creatorSelectMenu button.selected,
.filterSelectOption.selected {
  border-color: color-mix(in srgb, var(--creator-accent) 24%, transparent);
  background: color-mix(in srgb, var(--creator-accent) 10%, var(--creator-popover-bg));
  color: var(--creator-accent);
}

.creatorSelectMenu button.selected:hover,
.filterSelectOption.selected:hover,
.filterSelectOption.selected.active,
.filterSelectOption.selected:focus-visible {
  background: color-mix(in srgb, var(--creator-accent) 10%, var(--creator-popover-bg));
  color: var(--creator-accent);
}

.creatorSelectMenu button span,
.filterSelectOptionCheck {
  width: 18px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  color: var(--creator-accent);
}

.filterSelectOptionMain {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.creatorSelectMenu button strong,
.filterSelectOptionLabel {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filterSelectOptionDescription {
  min-width: 0;
  overflow: hidden;
  color: var(--creator-muted);
  font-size: 12px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorInlineExpandButton {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.creatorInlineExpandButton:hover {
  background: rgba(20, 184, 166, 0.16);
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.12);
}

.creatorAdvancedRows {
  display: grid;
  gap: 0;
}

.creatorAdvancedRow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 7px 0;
}

.creatorAdvancedRow > strong {
  align-self: start;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.creatorAdvancedRow > div {
  min-width: 0;
  flex: 1 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.creatorAdvancedRow .creatorSelectPill {
  width: auto;
  justify-content: space-between;
}

.creatorSelectedBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--creator-line);
  padding-top: 13px;
  margin-top: 6px;
}

.creatorSelectedBar > strong {
  width: 86px;
  min-width: 86px;
  text-align: right;
  color: var(--creator-muted);
}

.creatorSelectedBar > div {
  flex: 1 1;
  min-width: 240px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.creatorSelectedTag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--creator-text);
  min-height: 34px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 800;
}

.creatorSelectedTag button {
  width: 18px;
  height: 18px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #98a2b3;
  padding: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.creatorSelectedTag button:hover,
.creatorSelectedTag button:focus-visible {
  outline: 0;
  background: rgba(148, 162, 179, 0.16);
  color: var(--creator-accent);
}

.creatorSelectedMuted {
  color: var(--creator-muted);
}

.creatorSelectedBar > button,
.creatorOutlineButton {
  min-height: 34px;
  border: 1px solid var(--creator-accent);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--creator-accent);
  padding: 0 15px;
  font-size: 13px;
  font-weight: 900;
}

.creatorResultPanel {
  display: grid;
  gap: 18px;
  padding: 30px;
  min-height: 260px;
}

.creatorEmptyResult {
  min-height: 430px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  background: var(--creator-panel);
  color: var(--creator-text);
  text-align: center;
}

.creatorEmptyIllustration {
  width: min(240px, 56vw);
  height: 160px;
  display: grid;
  place-items: center;
}

.creatorEmptyIllustration svg {
  width: 100%;
  height: 100%;
  display: block;
}

.creatorEmptyResult h2 {
  max-width: 720px;
  margin: 0;
  color: var(--creator-text);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.65;
}

.creatorEmptyActions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.creatorEmptyPrimary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 18%, transparent);
  cursor: pointer;
}

.creatorEmptyPrimary:hover,
.creatorEmptyPrimary:focus-visible {
  outline: 0;
  background: #f4145f;
}

.creatorEmptyHelp {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 999px;
  background: transparent;
  color: var(--creator-muted);
  padding: 0;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.creatorEmptyHelp:hover,
.creatorEmptyHelp:focus-visible {
  outline: 0;
  border-color: var(--creator-accent);
  color: var(--creator-accent);
}

.creatorResultToolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

.creatorResultActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.creatorResultActions > button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
  padding: 0 16px;
  font-weight: 900;
}

.creatorResultActions > button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.creatorTableScroller {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: rgba(148, 163, 184, 0.65) rgba(148, 163, 184, 0.14);
  scrollbar-width: thin;
}

.creatorTableScroller::-webkit-scrollbar {
  height: 16px;
}

.creatorTableScroller::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
}

.creatorTableScroller::-webkit-scrollbar-thumb {
  border: 4px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.7);
}

.creatorSearchTable {
  width: 1740px;
  display: grid;
}

.creatorSkeletonPanel {
  overflow: hidden;
}

.creatorSkeletonButton,
.creatorSkeletonAvatar,
.creatorSkeletonLine,
.creatorSkeletonCell i {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-panel-strong);
}

.creatorSkeletonButton::after,
.creatorSkeletonAvatar::after,
.creatorSkeletonLine::after,
.creatorSkeletonCell i::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
  animation: creatorSkeletonShimmer 1.25s infinite;
}

[data-theme='dark'] .creatorSkeletonButton::after,
[data-theme='dark'] .creatorSkeletonAvatar::after,
[data-theme='dark'] .creatorSkeletonLine::after,
[data-theme='dark'] .creatorSkeletonCell i::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

.creatorSkeletonButton {
  width: 86px;
  height: 34px;
}

.creatorSkeletonButton.wide {
  width: 112px;
}

.creatorSkeletonRow {
  pointer-events: none;
}

.creatorSkeletonAvatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
}

.creatorSkeletonIdentity {
  display: grid;
  gap: 10px;
}

.creatorSkeletonLine {
  height: 12px;
}

.creatorSkeletonLine.strong {
  width: 148px;
  height: 16px;
}

.creatorSkeletonLine.medium {
  width: 118px;
}

.creatorSkeletonLine.short {
  width: 82px;
}

.creatorSkeletonCell {
  display: flex;
  align-items: center;
}

.creatorSkeletonCell i {
  width: min(92px, 72%);
  height: 14px;
}

.creatorSkeletonCell i.chart {
  width: 150px;
  height: 52px;
}

.creatorSkeletonCell i.action {
  width: 32px;
  height: 32px;
  border-radius: 999px;
}

@keyframes creatorSkeletonShimmer {
  100% {
    transform: translateX(100%);
  }
}

.creatorSearchTableRow {
  min-height: 158px;
  display: grid;
  grid-template-columns:
    320px
    150px
    160px
    230px
    180px
    140px
    150px
    120px
    120px
    170px
    100px;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--creator-line);
  color: var(--creator-text);
  font-size: 14px;
}

.creatorSearchTableRow.head {
  min-height: 92px;
  background: var(--surface-panel-strong);
  color: var(--creator-text);
  font-weight: 900;
}

.creatorSearchTableRow > span,
.creatorSearchTableRow.head span,
.creatorSearchTableRow.head > button {
  padding: 0 18px;
  min-width: 0;
}

.creatorSortableHead {
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-weight: 900;
  text-align: left;
}

.creatorSortableHead::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

.creatorSortableHead.asc::after {
  border-top: 0;
  border-bottom: 6px solid currentColor;
}

.creatorSortableHead.active {
  color: var(--creator-accent);
  background: var(--surface-panel-strong);
}

.creatorSortableHead:disabled {
  cursor: wait;
  opacity: 0.72;
}

.commerceSortableHead {
  min-width: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font: inherit;
  font-weight: 900;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  white-space: normal;
}

.commerceSortableHead span {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.commerceSortableHead em {
  display: none;
}

.commerceSortableHead:not(:disabled):hover,
.commerceSortableHead.active {
  color: var(--creator-accent, var(--primary));
  background: transparent;
}

.commerceSortedColumnHead.active,
.commerceSortedColumnCell.active {
  background: color-mix(in srgb, var(--creator-accent, var(--primary)) 5%, #ffffff);
  color: var(--commerce-list-text, #101828);
}

.commerceSortedColumnCell.active strong {
  color: var(--commerce-list-text, #101828);
}

.creatorIdentityCell {
  min-width: 0;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding-left: 18px;
}

.creatorPhoto {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
  font-weight: 900;
}

.creatorPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorIdentityCell strong,
.creatorIdentityCell em,
.creatorIdentityCell small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorIdentityCell strong {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  color: var(--creator-text);
  font-weight: 900;
}

.creatorNameLink {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorNameLink:hover {
  color: var(--creator-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.creatorIdentityCell em,
.creatorIdentityCell small {
  color: var(--creator-muted);
  font-size: 12px;
  font-style: normal;
}

.creatorIdentityCell em {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 5px;
}

.creatorIdentityCell em button {
  width: 22px;
  height: 22px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--creator-muted);
}

.creatorIdentityCell em button:hover {
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
}

.creatorIdentityCell small {
  margin-top: 3px;
}

.creatorIdentityCell small b,
.creatorIdentityCell small i {
  color: var(--creator-muted);
  font-style: normal;
  font-weight: 700;
}

.creatorIdentityCell small b + i,
.creatorIdentityCell small i + b {
  margin-left: 7px;
}

.creatorFlagIcon,
.creatorFlagFallback {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.creatorFlagIcon {
  gap: 7px;
  color: var(--creator-text);
  font-weight: 850;
}

.creatorFlagIcon img {
  width: 20px;
  height: 14px;
  display: block;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.creatorFlagIcon.compact {
  margin-left: 8px;
}

.creatorFlagIcon.compact img {
  width: 18px;
  height: 12px;
}

.creatorFlagIcon b {
  color: inherit;
  font-weight: 850;
}

.creatorFlagFallback {
  margin-left: 8px;
  font-style: normal;
}

.creatorDetailFlagValue {
  display: inline-flex;
  align-items: center;
}

.creatorDetailFlagValue .creatorFlagFallback {
  margin-left: 0;
}

.creatorVerifyBadge {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 2px solid var(--creator-panel);
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3);
}

.creatorSourceIcons {
  display: inline-flex !important;
  gap: 5px;
  margin-left: 8px;
}

.creatorSourceIcons span {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--creator-line);
  border-radius: 999px;
  background: var(--surface-panel-strong);
  color: var(--creator-accent);
  font-size: 10px;
  font-weight: 900;
}

.creatorCommerceTags b,
.creatorCommerceTags em {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.creatorSalesMetric {
  min-height: 158px;
  display: flex;
  align-items: center;
  background: var(--surface-panel-strong);
  color: var(--creator-text);
  font-weight: 950;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}

.creatorLinkMetric {
  color: var(--creator-accent);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.creatorCommerceTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.creatorCommerceTags b {
  overflow: hidden;
  border: 1px solid rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.08);
  color: var(--primary);
  text-overflow: ellipsis;
}

.creatorCommerceTags em {
  border: 1px solid var(--creator-line);
  background: var(--surface-panel-strong);
  color: var(--creator-muted);
}

.creatorFavoriteAction {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--creator-line);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--creator-accent);
  cursor: pointer;
  text-decoration: none;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.creatorFavoriteAction:hover {
  border-color: var(--creator-accent);
  background: var(--creator-accent-soft);
}

.creatorFavoriteAction.active {
  border-color: var(--creator-accent);
  background: var(--creator-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(236, 72, 153, 0.22);
  animation: favoritePulse 320ms ease-out;
}

.creatorFavoriteAction.active svg {
  fill: currentColor;
}

@keyframes favoritePulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
  }
}

.creatorTrendCell svg {
  width: 150px;
  height: 86px;
  display: block;
  color: var(--creator-accent);
}

.creatorPager {
  --pager-accent: var(--creator-accent, #ec4899);
  --pager-accent-soft: var(--creator-accent-soft, rgba(236, 72, 153, 0.16));
  --pager-muted: var(--creator-muted, var(--text-3));
  --pager-text: var(--creator-text, var(--text-1));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--pager-muted);
}

.creatorPager button,
.creatorPager .cuiPaginationEllipsis {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--pager-muted);
  font-size: 15px;
  font-weight: 800;
}

.creatorPager button.active {
  background: var(--pager-accent);
  color: #fff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--pager-accent) 26%, transparent);
}

.creatorPager button:not(:disabled):hover {
  background: var(--pager-accent-soft);
  color: var(--pager-accent);
}

.creatorPagerArrow {
  color: var(--pager-text) !important;
}

.creatorPager .cuiPaginationEllipsis {
  letter-spacing: 2px;
}

.creatorPager button:disabled {
  color: #cbd5e1;
  cursor: not-allowed;
}

.creatorPager .cuiPaginationJump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--pager-muted);
  padding: 3px 4px 3px 10px;
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.creatorPager .cuiPaginationJump:focus-within {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.creatorPager .cuiPaginationJump input {
  width: 58px;
  height: 38px;
  border: 1px solid var(--creator-line, var(--line-dark));
  border-radius: 8px;
  outline: 0;
  background: var(--creator-select-bg, var(--surface-panel));
  color: var(--pager-text);
  padding: 0 10px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.03);
  font-weight: 850;
  text-align: center;
}

.creatorPager .cuiPaginationJump input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft), inset 0 0 0 1px rgba(15, 23, 42, 0.03);
}

[data-theme='dark'] .creatorPager .cuiPaginationJump input {
  border-color: var(--creator-line);
  background: var(--surface-panel);
}

[data-theme='dark'] .creatorPager .cuiPaginationJump:focus-within {
  border-color: var(--primary-light);
  background: color-mix(in srgb, var(--creator-accent) 18%, transparent);
  color: #fff;
  box-shadow: 0 0 0 3px var(--primary-soft);
}

[data-theme='dark'] .creatorPager .cuiPaginationJump input:focus {
  border-color: var(--primary-light);
  background: var(--surface-panel-strong);
  box-shadow: 0 0 0 3px var(--primary-soft), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.rankingPager {
  --pager-accent: var(--growth-rank-accent, #ec4899);
  --pager-accent-soft: var(--growth-rank-soft, rgba(236, 72, 153, 0.16));
  --pager-muted: var(--text-3);
  --pager-text: var(--text-1);
  margin-top: 8px;
}

.companyIntroCard {
  --company-card-accent: var(--primary);
  --company-card-accent-2: var(--accent);
  --company-card-soft: var(--primary-soft);
  --company-card-text: var(--text-1);
  --company-card-body: var(--text-2);
  --company-card-muted: var(--text-3);
  --company-card-line: rgba(15, 23, 42, 0.08);
  --company-card-panel: var(--surface-panel-strong, #ffffff);
  --company-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  --company-card-qr-bg: #f8fafc;
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) minmax(260px, 0.8fr) minmax(320px, 0.9fr);
  gap: 28px;
  align-items: start;
  border: 1px solid var(--company-card-line);
  border-radius: 8px;
  /* 不透明底 + 半透明面板叠加：避免透出页面紫色渐变，保证不同页面页脚亮度一致 */
  background-color: var(--bg);
  background-image: linear-gradient(var(--company-card-panel), var(--company-card-panel));
  box-shadow: var(--company-card-shadow);
  padding: 24px 28px;
}

[data-theme='dark'] .companyIntroCard {
  --company-card-line: var(--line-dark);
  --company-card-panel: var(--surface-panel-strong, #ffffff);
  --company-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  --company-card-qr-bg: var(--surface-panel-strong);
  background-color: var(--bg);
  background-image: linear-gradient(var(--surface-panel), var(--surface-panel));
}

.companyIntroCardMain {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.companyIntroCardLogo {
  display: flex;
  align-items: center;
  gap: 11px;
}

.companyIntroCardLogo > .companyIntroBrandLogo {
  width: 172px;
  height: 43px;
}

.companyIntroCardLogo > .companyIntroBrandLogo ~ span,
.companyIntroCardLogo > .companyIntroBrandLogo ~ div {
  display: none;
}

.companyIntroCardLogo > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--company-card-accent);
  color: #fff;
  font-size: 18px;
  font-weight: 950;
}

.companyIntroCardLogo strong,
.companyIntroCardLogo em {
  display: block;
}

.companyIntroCardLogo strong {
  color: var(--company-card-text);
  font-size: 19px;
  line-height: 1;
}

.companyIntroCardLogo em,
.companyIntroCardQr em {
  color: var(--company-card-muted);
  font-style: normal;
}

.companyIntroCardMain p {
  color: var(--company-card-body);
}

.companyIntroCardLogo em {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
}

.companyIntroCardMain p {
  max-width: 620px;
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

.companyIntroCardLinks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.companyIntroCardLinks div {
  display: grid;
  gap: 13px;
}

.companyIntroCardLinks strong {
  margin-bottom: 8px;
  color: var(--company-card-text);
  font-size: 14px;
}

.companyIntroCardLinks a {
  color: var(--company-card-body);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

.companyIntroCardLinks a:hover {
  color: var(--company-card-accent);
}

.companyIntroCardQrList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.companyIntroCardQr {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.companyIntroCardQr > span {
  width: 76px;
  aspect-ratio: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 4px;
  border: 8px solid var(--company-card-soft);
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--company-card-accent) 50%, transparent 0) 0 0 / 28px 14px,
    linear-gradient(var(--company-card-accent-2) 50%, transparent 0) 0 0 / 14px 28px,
    var(--company-card-qr-bg);
}

.companyIntroCardQr i {
  display: block;
  border-radius: 2px;
  background: var(--company-card-accent);
}

.companyIntroCardQr i:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.companyIntroCardQr i:nth-child(2) {
  grid-column: 4 / 6;
  grid-row: 1 / 3;
}

.companyIntroCardQr i:nth-child(3) {
  grid-column: 1 / 3;
  grid-row: 4 / 6;
}

.companyIntroCardQr i:nth-child(4) {
  grid-column: 4 / 5;
  grid-row: 4 / 5;
  background: var(--company-card-accent-2);
}

.companyIntroCardQr em {
  overflow: hidden;
  max-width: 100%;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.growthRankingPage {
  --growth-rank-accent: var(--primary);
  --growth-rank-accent-2: var(--accent);
  --growth-rank-soft: var(--primary-soft);
  --growth-rank-line: var(--line-dark);
  --growth-rank-panel: #ffffff;
  --growth-rank-flag-border: rgba(15, 23, 42, 0.12);
  --growth-rank-flag-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  row-gap: 24px;
  color: var(--text-1);
}

.commerceRankingPage,
.hotRankingPage,
.risingRankingPage {
  min-width: 0;
}

.growthRankingPage header {
  min-height: 28px;
  display: flex;
  align-items: flex-start;
  margin: 0;
}

[data-theme='dark'] .growthRankingPage {
  --growth-rank-panel: var(--surface-panel);
  --growth-rank-flag-border: var(--line-dark);
  --growth-rank-flag-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.growthRankingPage header h1 {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
}

.growthRankFilterPanel,
.growthRankTablePanel {
  position: relative;
  border: 1px solid var(--growth-rank-line);
  border-radius: 8px;
  background: var(--growth-rank-panel);
  box-shadow: var(--shadow-light);
}

.growthRankFilterPanel {
  display: grid;
  gap: 0;
  margin-top: 0;
  padding: 20px 24px;
}

.growthRankFilterRow {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 7px 0;
}

.growthRankFilterRow > strong {
  width: 92px;
  min-width: 92px;
  min-height: 30px;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  color: var(--text-3);
  font-size: 13px;
  white-space: nowrap;
}

.growthRankFilterRow > div {
  min-width: 0;
  display: flex;
  flex: 1 1;
  flex-wrap: wrap;
  gap: 7px 16px;
}

.growthRankFilterRow button {
  min-height: 30px;
  position: relative;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-1);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 850;
}

.growthRankFilterRow button.active {
  background: var(--growth-rank-accent);
  color: #fff;
  padding: 0 16px;
}

.growthRankFilterRow button em {
  position: absolute;
  top: -6px;
  right: -12px;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  padding: 1px 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.growthRankDateInput {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  background: var(--growth-rank-soft);
  color: var(--text-1);
  padding: 0 12px;
  font-weight: 900;
}

.growthRankDateInput input {
  width: 132px;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.growthRankDateInput span {
  color: var(--text-3);
}

.growthRankSelectPill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--growth-rank-line);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-1);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 850;
}

.growthRankSelectPill select {
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.growthRankExpandButton {
  position: absolute;
  right: 0;
  bottom: 48px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: var(--growth-rank-soft);
  color: var(--growth-rank-accent);
  padding: 0 18px;
  font-weight: 900;
}

.growthRankExpandButton span {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.growthRankTablePanel {
  display: grid;
  gap: 18px;
  padding: 30px;
  margin-top: 12px;
  min-height: 640px;
}

.growthRankToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.growthRankToolbar > span {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 850;
}

.growthRankToolbar button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: var(--growth-rank-soft);
  color: var(--growth-rank-accent);
  padding: 0 16px;
  font-weight: 900;
}

.growthRankFilterRow .growthRankAntSegmented + button,
.growthRankFilterRow .growthRankAntSegmented + button ~ button {
  display: none;
}

.growthRankAntSegmented.ant-segmented {
  max-width: 100%;
  background: transparent;
}

.growthRankAntSegmented .ant-segmented-group {
  flex-wrap: wrap;
  gap: 7px 12px;
}

.growthRankAntSegmented .ant-segmented-item {
  border-radius: 999px;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 850;
}

.growthRankAntSegmented .ant-segmented-item-label {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  line-height: 30px;
}

.growthRankAntSegmented .ant-segmented-thumb,
.growthRankAntSegmented .ant-segmented-item-selected {
  border-radius: 999px;
  background: var(--growth-rank-accent);
  color: #fff;
}

.growthRankAntSegmented em {
  margin-left: 4px;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  padding: 1px 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.growthRankTableFrame {
  min-width: 0;
  position: relative;
  overflow-x: auto;
  border-radius: 8px;
}

.growthRankTableFrame.refreshing .growthRankTable {
  opacity: 0.68;
}

.growthRankTableFrame.refreshing::before {
  content: '';
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: 999px;
  background: var(--growth-rank-soft);
}

.growthRankTableFrame.refreshing::after {
  content: '';
  width: 30%;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  border-radius: 999px;
  background: var(--growth-rank-accent);
  animation: growthRankRefreshBar 900ms ease-in-out infinite;
}

@keyframes growthRankRefreshBar {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(340%);
  }
}

.growthRankTable {
  min-width: 1080px;
  display: grid;
  overflow: hidden;
  border-radius: 8px;
}

.growthRankDataList.cuiDataList {
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.growthRankDataList .cuiDataListBody {
  overflow-x: auto;
}

.growthRankTable.commerce {
  min-width: 1120px;
}

.growthRankTable.hot {
  min-width: 1080px;
}

.growthRankTable.rising {
  min-width: 1360px;
}

.growthRankRow {
  min-height: 136px;
  display: grid;
  grid-template-columns: 110px minmax(250px, 1.15fr) minmax(150px, 0.7fr) minmax(170px, 0.8fr) minmax(150px, 0.7fr) minmax(130px, 0.6fr) minmax(120px, 0.55fr) minmax(132px, 0.5fr);
  align-items: center;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-1);
  font-size: 15px;
}

.growthRankTable.commerce .growthRankRow {
  grid-template-columns: 110px minmax(260px, 1.15fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr) minmax(210px, 0.9fr) minmax(132px, 0.5fr);
}

.growthRankTable.hot .growthRankRow {
  grid-template-columns: 110px minmax(260px, 1.15fr) minmax(150px, 0.7fr) minmax(170px, 0.78fr) minmax(150px, 0.68fr) minmax(150px, 0.68fr) minmax(132px, 0.5fr);
}

.growthRankTable.rising .growthRankRow {
  grid-template-columns: 110px minmax(280px, 1.15fr) minmax(180px, 0.78fr) minmax(150px, 0.65fr) minmax(150px, 0.65fr) minmax(150px, 0.65fr) minmax(180px, 0.78fr) minmax(120px, 0.52fr) minmax(132px, 0.5fr);
}

.growthRankRow.head {
  min-height: 68px;
  background: var(--surface-panel-strong);
  font-weight: 950;
}

.growthRankRow > span,
.growthRankRow.head > span,
.growthRankRow .cuiDataListTableHeadCell,
.growthRankRow .cuiDataListTableCell {
  padding: 0 18px;
}

.growthRankRow > span:nth-child(4),
.growthRankRow.head > span:nth-child(4),
.growthRankRow .cuiDataListTableHeadCell:nth-child(4),
.growthRankRow .cuiDataListTableCell:nth-child(4) {
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-panel-strong);
  font-weight: 950;
}

.growthRankTable.commerce .growthRankRow > span:nth-child(4),
.growthRankTable.commerce .growthRankRow.head > span:nth-child(4),
.growthRankTable.commerce .growthRankRow .cuiDataListTableHeadCell:nth-child(4),
.growthRankTable.commerce .growthRankRow .cuiDataListTableCell:nth-child(4) {
  min-height: auto;
  display: block;
  background: transparent;
  font-weight: inherit;
}

.growthRankTable.hot .growthRankRow > span:nth-child(4),
.growthRankTable.hot .growthRankRow.head > span:nth-child(4),
.growthRankTable.hot .growthRankRow .cuiDataListTableHeadCell:nth-child(4),
.growthRankTable.hot .growthRankRow .cuiDataListTableCell:nth-child(4) {
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-panel-strong);
  font-weight: 950;
}

.growthRankTable.hot .growthRankRow.head > span:nth-child(4),
.growthRankTable.hot .growthRankRow.head .cuiDataListTableHeadCell:nth-child(4) {
  color: var(--growth-rank-accent);
}

.growthRankTable.rising .growthRankRow > span:nth-child(4),
.growthRankTable.rising .growthRankRow.head > span:nth-child(4),
.growthRankTable.rising .growthRankRow .cuiDataListTableHeadCell:nth-child(4),
.growthRankTable.rising .growthRankRow .cuiDataListTableCell:nth-child(4) {
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-panel-strong);
  font-weight: 950;
}

.growthRankTable.rising .growthRankRow.head > span:nth-child(4),
.growthRankTable.rising .growthRankRow.head .cuiDataListTableHeadCell:nth-child(4) {
  color: var(--growth-rank-accent);
}

.growthRankTable.commerce .growthRankRow > span:nth-child(6),
.growthRankTable.commerce .growthRankRow.head > span:nth-child(6),
.growthRankTable.commerce .growthRankRow .cuiDataListTableHeadCell:nth-child(6),
.growthRankTable.commerce .growthRankRow .cuiDataListTableCell:nth-child(6) {
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-panel-strong);
  font-weight: 950;
}

.growthRankTable.commerce .growthRankRow.head > span:nth-child(6),
.growthRankTable.commerce .growthRankRow.head .cuiDataListTableHeadCell:nth-child(6) {
  color: var(--growth-rank-accent);
}

.growthRankRow.head > span:nth-child(4),
.growthRankRow.head .cuiDataListTableHeadCell:nth-child(4) {
  color: var(--growth-rank-accent);
}

.growthRankRow.head .active {
  gap: 6px;
}

.growthRankSortMenu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--growth-rank-accent);
  padding: 0;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

.growthRankSortMenu::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

.growthRankSortMenu.asc::after {
  border-top: 0;
  border-bottom: 6px solid currentColor;
}

.growthRankMedal {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 3px solid currentColor;
  border-radius: 999px;
  color: #fbbf24;
  font-size: 13px;
  font-weight: 950;
}

.growthRankMedal.top2 {
  color: #a7b7d8;
}

.growthRankMedal.top3 {
  color: #f59e7a;
}

.growthRankCreator {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.growthRankAvatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
  font-weight: 950;
}

.growthRankAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.growthRankCreator strong,
.growthRankCreator em,
.growthRankCreator small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.growthRankCreator strong {
  color: var(--text-1);
  font-size: 15px;
}

.growthRankCreator strong a {
  color: inherit;
  text-decoration: none;
}

.growthRankCreator strong a:hover {
  color: var(--growth-rank-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.growthRankCreator em {
  margin-top: 8px;
  color: var(--text-2);
  font-style: normal;
}

.growthRankCreator small {
  width: fit-content;
  max-width: 100%;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--growth-rank-soft);
  color: var(--text-2);
  padding: 3px 9px;
  font-size: 12px;
}

.growthRankRegion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 36px;
}

.growthRankFlag {
  width: 22px;
  height: 16px;
  display: block;
  border: 1px solid var(--growth-rank-flag-border);
  border-radius: 3px;
  object-fit: cover;
  box-shadow: var(--growth-rank-flag-shadow);
}

.growthRankFlagFallback {
  min-width: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 3px;
  background: var(--growth-rank-soft);
  color: var(--growth-rank-accent);
  padding: 1px 3px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.growthRankHighlight {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}

.growthRankHighlight strong,
.growthRankHighlight em {
  display: block;
  font-style: normal;
}

.growthRankHighlight em {
  margin-top: 4px;
  font-size: 12px;
}

.risingTagList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.risingTagList b,
.risingTagList em {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  background: var(--growth-rank-soft);
  color: var(--text-2);
  padding: 0 12px;
  font-size: 12px;
  font-style: normal;
}

.risingPotential b {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  border: 7px solid rgba(124, 58, 237, 0.28);
  border-radius: 999px;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
}

.growthRankAction {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-1);
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.growthRankAction:hover {
  border-color: var(--growth-rank-accent);
  color: var(--growth-rank-accent);
}

.growthRankAction.active {
  border-color: var(--growth-rank-accent);
  background: var(--growth-rank-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(236, 72, 153, 0.18);
  animation: favoritePulse 320ms ease-out;
}

.growthRankAction.active svg {
  fill: currentColor;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-creator-detail-v2-base.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy creator detail V2 base compatibility chunk.
 *
 * This file preserves the pre-split global cascade. Do not add new rules here;
 * migrate fixes into the owning module CSS or shared UI components.
 */
/* Creator detail V2 layout: keep the base grid from collapsing into a plain block flow. */
.creatorDetailPageV2 {
  --creator-detail-accent: var(--primary);
  --creator-detail-soft: var(--primary-soft);
  --creator-detail-line: var(--line-dark);
  --creator-detail-panel: #ffffff;
  --creator-detail-muted: var(--text-3);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  color: var(--text-1);
}

[data-theme='dark'] .creatorDetailPageV2 {
  --creator-detail-panel: var(--surface-panel);
}

.creatorDetailTitleBar {
  display: none;
  gap: 6px;
}

/* Creator detail sticky identity navigation */
.creatorDetailPageV2 > .creatorDetailTitleBar,
.creatorDetailPageV2 > .creatorDetailStickyHeader:not(.isDocked) {
  display: none;
}

.creatorDetailPageV2 > .creatorDetailStickyHeader {
  min-width: 0;
  position: sticky;
  top: 76px;
  z-index: 980;
}

/* Keep the FastMoss-style detail header in normal page flow instead of visually floating over the cards. */
.creatorDetailPageV2 {
  gap: 12px;
}

.creatorDetailPageV2 > .creatorDetailStickyHeader {
  margin: 0;
  position: relative;
  top: auto;
  z-index: 1;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background: var(--creator-detail-panel);
}

.creatorDetailPageV2 > .creatorDetailTopGrid {
  margin-top: 0;
}

.creatorDetailTopGrid,
.creatorDetailSection {
  scroll-margin-top: 154px;
}

@media (max-width: 1180px) {
  .creatorDetailStickyHeader {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "identity actions"
      "tabs tabs";
    gap: 10px 14px;
  }
}

@media (max-width: 720px) {
  .creatorDetailStickyHeader {
    top: 64px;
    margin: 0 -8px;
    border-radius: 0;
    padding: 10px 12px;
  }

  .creatorDetailStickyAvatar {
    width: 40px;
    height: 40px;
  }

  .creatorDetailStickyTabs {
    gap: 18px;
  }

  .creatorDetailStickyTabs button {
    min-height: 36px;
    font-size: 13px;
  }
}

.creatorDetailBreadcrumb {
  width: fit-content;
  color: var(--creator-detail-muted);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.creatorDetailBreadcrumb:hover {
  color: var(--creator-detail-accent);
}

.creatorDetailTitleBar h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: 0;
}

.creatorDetailTopGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(300px, 0.36fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.creatorDetailProfileCard,
.creatorDetailOverviewCard,
.creatorDetailDataPanel {
  min-width: 0;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--creator-detail-panel);
  box-shadow: var(--shadow-light);
}

.creatorDetailProfileCard {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 22px 22px 0;
  text-align: center;
}

.creatorDetailProfileActions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.creatorDetailProfileActions button,
.creatorDetailProfileActions a,
.creatorDetailNameBlock button {
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--creator-detail-muted);
  cursor: pointer;
}

.creatorDetailProfileActions button,
.creatorDetailProfileActions a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  text-decoration: none;
}

.creatorDetailProfileActions button {
  gap: 4px;
}

.creatorDetailProfileActions button.active {
  background: var(--creator-detail-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px var(--primary-shadow);
  animation: favoritePulse 320ms ease-out;
}

.creatorDetailProfileActions button.active svg {
  fill: currentColor;
}

.creatorDetailProfileActions button span {
  display: none;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.creatorDetailProfileActions button.isCopied,
.creatorDetailProfileActions button.isCopyFailed {
  width: auto;
  min-width: 62px;
  padding: 0 10px;
}

.creatorDetailProfileActions button.isCopied {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.creatorDetailProfileActions button.isCopyFailed {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.creatorDetailProfileActions button.isCopied span,
.creatorDetailProfileActions button.isCopyFailed span {
  display: inline;
}

.creatorDetailNameBlock button.isCopied {
  color: #047857;
}

.creatorDetailNameBlock button.isCopyFailed {
  color: #b91c1c;
}

.creatorDetailAvatar {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 999px;
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  font-size: 34px;
  font-weight: 950;
}

.creatorDetailAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorDetailNameBlock {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.creatorDetailNameBlock h2,
.creatorDetailNameBlock p,
.creatorDetailBio {
  margin: 0;
}

.creatorDetailNameBlock h2 {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-1);
  font-size: 20px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.creatorDetailNameBlock p {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--creator-detail-muted);
  font-size: 13px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.creatorDetailCategoryPills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.creatorDetailCategoryPills span,
.creatorDetailCategoryPills b {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 850;
}

.creatorDetailCategoryPills span {
  background: var(--tag-bg);
  color: var(--text-2);
}

.creatorDetailCategoryPills b {
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
}

.creatorDetailBio {
  max-width: 340px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}

.creatorDetailInfoList {
  width: calc(100% + 44px);
  display: grid;
  gap: 0;
  margin: 8px -22px 0;
  padding: 16px 22px;
  background: var(--surface-panel-strong);
  text-align: left;
}

.creatorDetailInfoList div {
  min-width: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--creator-detail-line);
}

.creatorDetailInfoList div:last-child {
  border-bottom: 0;
}

.creatorDetailInfoList dt,
.creatorDetailInfoList dd {
  margin: 0;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
}

.creatorDetailInfoList dt {
  color: var(--creator-detail-muted);
  font-weight: 850;
}

.creatorDetailInfoList dd {
  color: var(--text-1);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.creatorDetailInfoList dd a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.creatorDetailInfoList dd a:hover {
  color: var(--creator-detail-accent);
  text-decoration: underline;
}

.creatorDetailInfoList dd .creatorDetailTikTokLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4f7cff;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.35;
}

.creatorDetailTikTokLink svg {
  flex: 0 0 auto;
  color: #253047;
}

.creatorDetailOverviewCard {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.creatorDetailMetricGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.creatorDetailMetricCard {
  min-width: 0;
  min-height: 116px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 14px;
}

.creatorDetailMetricCard strong,
.creatorDetailMetricCard em,
.creatorDetailMetricCard span {
  min-width: 0;
}

.creatorDetailMetricCard strong {
  color: var(--text-1);
  font-size: 24px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.creatorDetailMetricCard em {
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-style: normal;
}

.creatorDetailMetricCard span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 850;
}

.creatorDetailMetricCard b {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--creator-detail-muted);
  font-size: 11px;
}

.creatorDetailSummaryGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 12px;
}

.creatorDetailSummaryGrid article {
  min-width: 0;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--creator-detail-panel);
  padding: 16px;
}

.creatorDetailSummaryGrid p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.6;
}

.creatorDetailSummaryGrid article > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.creatorDetailSummaryGrid article > div span {
  min-width: 0;
  display: block;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--text-2);
  padding: 12px;
  font-size: 13px;
  line-height: 1.65;
}

.creatorDetailSummaryGrid article > div b {
  display: block;
  margin-bottom: 4px;
  color: var(--text-1);
}

.creatorContactCard {
  display: grid;
  align-content: start;
  gap: 12px;
}

.creatorContactCard > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.creatorContactCard span {
  color: var(--text-1);
  font-weight: 900;
}

.creatorContactCard button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--creator-detail-accent);
  color: #fff;
  padding: 0 14px;
  font-weight: 900;
}

.creatorContactCard strong {
  color: var(--creator-detail-accent);
}

.creatorDetailTabsWrap {
  min-width: 0;
  position: sticky;
  top: 76px;
  z-index: 950;
  margin: 0 -22px;
  padding: 0 22px;
}

.creatorDetailTabs {
  min-width: 0;
  position: relative;
  z-index: 80;
  display: flex;
  gap: 28px;
  overflow-x: auto;
  border-bottom: 1px solid var(--creator-detail-line);
  background: color-mix(in srgb, var(--creator-detail-panel) 88%, transparent);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  margin: 0;
  padding: 4px 22px 0;
  scrollbar-width: thin;
}

.creatorDetailTabs button {
  min-height: 44px;
  position: relative;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--creator-detail-muted);
  padding: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.creatorDetailTabs button.active {
  color: var(--creator-detail-accent);
}

.creatorDetailTabs button.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--creator-detail-accent);
}

.creatorDetailSections {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.creatorDetailTopGrid,
.creatorDetailSections > section {
  scroll-margin-top: 140px;
}

.creatorDetailDataPanel {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.creatorDetailPanelHeader {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.creatorDetailPanelHeader h2,
.creatorDetailDataPanel h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  line-height: 1.35;
}

.creatorDetailPanelHeader span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--creator-detail-line);
  border-radius: 999px;
  color: var(--creator-detail-muted);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
}

.creatorDetailDataGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.creatorDetailDataGrid article {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 14px;
}

.creatorDetailDataGrid span {
  color: var(--creator-detail-muted);
  font-size: 13px;
  font-weight: 850;
}

.creatorDetailDataGrid strong {
  color: var(--text-1);
  font-size: 18px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.creatorDetailDataGrid em {
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.creatorDetailTwoColumn {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.creatorDetailSubPanel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--creator-detail-panel);
  padding: 16px;
}

.creatorDetailSubPanel h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.35;
}

.creatorDetailChartCard {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.creatorDetailChartCard svg {
  width: 100%;
  height: 180px;
  display: block;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--creator-detail-accent);
}

.creatorDetailChartCard polyline {
  fill: none;
  stroke: var(--creator-detail-line);
  stroke-width: 1;
}

.creatorDetailChartCard .line {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.creatorDetailChartCard circle {
  fill: #ffffff;
  stroke: currentColor;
  stroke-width: 2;
}

.creatorDetailChartAxis {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-weight: 750;
}

.creatorDetailBarList {
  display: grid;
  gap: 13px;
}

.creatorDetailBarList div {
  min-width: 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 10px;
}

.creatorDetailBarList span,
.creatorDetailBarList em {
  color: var(--text-2);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.creatorDetailBarList em {
  color: var(--text-1);
  text-align: right;
}

.creatorDetailBarList b {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-panel-strong);
}

.creatorDetailBarList i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--creator-detail-accent);
}

.creatorAudiencePanel {
  gap: 20px;
  background: color-mix(in srgb, var(--creator-detail-panel) 92%, var(--primary-soft));
}

.creatorAudiencePanel .creatorDetailPanelHeader h2 {
  color: var(--text-1);
}

.creatorAudiencePanel .creatorDetailPanelHeader span {
  border-color: var(--creator-detail-line);
  background: var(--creator-detail-panel);
  color: var(--creator-detail-muted);
}

.creatorAudienceLayout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.creatorAudienceStack {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 18px;
}

.creatorAudienceCard {
  min-width: 0;
  display: grid;
  gap: 18px;
  border-radius: 16px;
  border: 1px solid var(--creator-detail-line);
  background: var(--creator-detail-panel);
  padding: 22px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
}

.creatorAudienceCard header {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.creatorAudienceCard h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.35;
}

.creatorAudienceCard p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.6;
}

.creatorAudienceRows {
  display: grid;
  gap: 18px;
}

.creatorAudienceRow {
  min-width: 0;
  min-height: 60px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 64px minmax(128px, 0.55fr);
  align-items: center;
  gap: 22px;
  border-radius: 14px;
  background: var(--surface-panel-strong);
  padding: 0 22px;
}

.creatorAudienceRow span {
  min-width: 0;
  overflow: hidden;
  color: var(--creator-detail-muted);
  font-size: 16px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorAudienceRow em {
  color: var(--text-1);
  font-size: 18px;
  font-style: normal;
  font-weight: 760;
  text-align: right;
}

.creatorAudienceRow b {
  height: 26px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 999px;
}

.creatorAudienceRow i {
  width: 0;
  height: 100%;
  display: block;
  border-radius: 999px;
  background: var(--creator-detail-accent);
}

.creatorAudienceCard.compact {
  max-height: 432px;
  overflow-y: auto;
  scrollbar-color: rgba(148, 163, 184, 0.75) transparent;
  scrollbar-width: thin;
}

.creatorAudienceFanType {
  gap: 20px;
}

.creatorAudienceFanBody {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 0.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
}

.creatorAudienceDonut {
  width: 190px;
  height: 190px;
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
}

.creatorAudienceDonut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.creatorAudienceDonut circle {
  fill: none;
  stroke-width: 18;
}

.creatorAudienceDonut .track {
  stroke: var(--line-dark);
}

.creatorAudienceDonut .segment {
  stroke-linecap: butt;
}

.creatorAudienceDonut .segment.pink {
  stroke: var(--creator-detail-accent);
}

.creatorAudienceDonut .segment.green {
  stroke: var(--accent);
}

.creatorAudienceDonut .segment.blue {
  stroke: var(--success);
}

.creatorAudienceDonut strong {
  position: absolute;
  color: var(--creator-detail-accent);
  font-size: 42px;
  font-weight: 950;
  line-height: 1;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-agent-floating-panel-bridge.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy agent floating panel bridge compatibility chunk.
 *
 * This file preserves the pre-split global cascade. Do not add new rules here;
 * migrate fixes into the owning module CSS or shared UI components.
 */
.agentFloatingPanel {
  position: fixed;
  z-index: 1100;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 30px 90px rgba(15, 23, 42, 0.26),
    0 20px 54px color-mix(in srgb, var(--primary) 14%, transparent);
  color: #172033;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-creator-detail-v2-audience.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy creator detail V2 audience compatibility chunk.
 *
 * This file preserves the pre-split global cascade. Do not add new rules here;
 * migrate fixes into the owning module CSS or shared UI components.
 */
.creatorAudienceLegend {
  min-width: 0;
  display: grid;
  gap: 20px;
  border-radius: 14px;
  background: var(--surface-panel-strong);
  padding: 22px;
}

.creatorAudienceLegend div {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
}

.creatorAudienceLegend span {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 999px;
}

.creatorAudienceLegend span.pink {
  background: var(--creator-detail-accent);
}

.creatorAudienceLegend span.green {
  background: var(--accent);
}

.creatorAudienceLegend span.blue {
  background: var(--success);
}

.creatorAudienceLegend strong,
.creatorAudienceLegend em {
  color: var(--text-1);
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
}

.creatorAudienceLegend em {
  text-align: right;
}

.creatorAudienceLegend p {
  grid-column: 2 / -1;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

.creatorActivePanel {
  gap: 24px;
  background: #ffffff;
}

.creatorActiveHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  margin: -22px -22px 0;
  padding: 24px 22px;
}

.creatorActiveHeader h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1f2a44;
  font-size: 22px;
  font-weight: 950;
}

.creatorActiveHeader h2 span,
.creatorActiveInfoCard h3 span {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #cfd5df;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.creatorActiveRange {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #617895;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.creatorActiveRange button,
.creatorActiveRange strong {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 8px;
  background: #f7f8fa;
  color: #617895;
  padding: 0 12px;
  font: inherit;
}

.creatorActiveRange button.active {
  background: #ffe6ef;
  color: var(--primary);
}

.creatorActiveRange span {
  color: #94a3b8;
}

.creatorActiveChartCard {
  min-width: 0;
  display: grid;
  gap: 12px;
  border-radius: 18px;
  background: #ffffff;
  padding: 26px 18px 20px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
}

.creatorActiveChartCard h3 {
  margin: 0;
  color: #1f2a44;
  font-size: 17px;
  font-weight: 950;
}

.creatorActiveChartCard svg {
  width: 100%;
  height: 300px;
  display: block;
  overflow: visible;
}

.creatorActiveChartCard line {
  stroke: rgba(148, 163, 184, 0.14);
  stroke-dasharray: 4 8;
  stroke-width: 1;
}

.creatorActiveChartCard polygon {
  fill: color-mix(in srgb, var(--primary) 4%, transparent);
}

.creatorActiveChartCard polyline {
  fill: none;
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.creatorActiveChartCard circle {
  fill: var(--primary);
  stroke: #ffffff;
  stroke-width: 2;
}

.creatorActiveChartAxis {
  display: grid;
  grid-template-columns: repeat(24, minmax(34px, 1fr));
  gap: 6px;
  overflow-x: auto;
  color: #617895;
  font-size: 12px;
  font-weight: 800;
}

.creatorActiveChartAxis span {
  text-align: center;
  white-space: nowrap;
}

.creatorActiveCards {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.creatorActiveInfoCard {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 22px;
  border-radius: 16px;
  background: #ffffff;
  padding: 26px 30px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
}

.creatorActiveInfoCard h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1f2a44;
  font-size: 18px;
  font-weight: 950;
}

.creatorActiveInfoCard > div {
  display: grid;
  gap: 16px;
}

.creatorActiveInfoCard p {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin: 0;
  color: #526276;
  font-size: 16px;
  font-weight: 760;
}

.creatorActiveInfoCard strong,
.creatorActiveInfoCard em,
.creatorActiveInfoCard b {
  min-width: 0;
  color: #526276;
  font-style: normal;
  font-weight: 800;
}

.creatorActiveInfoCard em {
  text-align: right;
}

.creatorActiveInfoCard b {
  margin-top: 4px;
  color: #4b596b;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-agent-floating-resize-bridge.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy agent floating resize bridge compatibility chunk.
 *
 * This file preserves the pre-split global cascade. Do not add new rules here;
 * migrate fixes into the owning module CSS or shared UI components.
 */
.agentFloatingResizeHandle.se::after {
  content: '';
  width: 18px;
  height: 18px;
  position: absolute;
  right: 2px;
  bottom: 2px;
  background:
    linear-gradient(135deg, transparent 0 45%, rgba(100, 116, 139, 0.5) 46% 55%, transparent 56%),
    linear-gradient(135deg, transparent 0 65%, rgba(100, 116, 139, 0.5) 66% 75%, transparent 76%);
  opacity: 0.75;
  pointer-events: none;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-creator-detail-v2-tables.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy creator detail V2 tables compatibility chunk.
 *
 * This file preserves the pre-split global cascade. Do not add new rules here;
 * migrate fixes into the owning module CSS or shared UI components.
 */
.creatorActiveSummaryBody {
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.creatorActiveSummaryCard .creatorAudienceDonut {
  width: 116px;
  height: 116px;
}

.creatorActiveSummaryCard .creatorAudienceDonut circle {
  stroke-width: 15;
}

.creatorActiveSummaryCard .creatorAudienceDonut strong {
  display: none;
}

.creatorDetailHeatmap {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px repeat(5, minmax(88px, 1fr));
  gap: 8px;
  overflow-x: auto;
}

.creatorDetailHeatmap > b {
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.creatorDetailHeatmapRow {
  display: contents;
}

.creatorDetailHeatmapRow strong {
  min-height: 36px;
  display: grid;
  align-items: center;
  color: var(--text-2);
  font-size: 13px;
}

.creatorDetailHeatmapRow i {
  min-height: 36px;
  border-radius: 8px;
  background: var(--creator-detail-accent);
}

.creatorDetailTableWrap {
  min-width: 0;
  overflow-x: auto;
}

.creatorDetailTableWrap.cuiDataList {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.creatorDetailTableWrap .cuiDataListBody {
  overflow-x: auto;
}

.creatorDetailTable {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
}

.creatorDetailTable th,
.creatorDetailTable td,
.creatorDetailTable .cuiDataListTableHeadCell,
.creatorDetailTable .cuiDataListTableCell {
  border-bottom: 1px solid var(--creator-detail-line);
  color: var(--text-2);
  padding: 12px 10px;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  white-space: nowrap;
}

.creatorDetailTable th,
.creatorDetailTable .cuiDataListTableHeadCell {
  color: var(--creator-detail-muted);
  font-weight: 900;
}

.creatorDetailTable td,
.creatorDetailTable .cuiDataListTableCell {
  color: var(--text-1);
  font-weight: 750;
}

.creatorDetailTable .right {
  text-align: right;
}

.creatorSimilarGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.creatorSimilarGrid article {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 14px;
}

.creatorSimilarGrid article > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.creatorSimilarGrid span {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  font-weight: 950;
  overflow: hidden;
}

.creatorSimilarGrid span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorSimilarGrid strong {
  min-width: 0;
  color: var(--text-1);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.creatorSimilarGrid p,
.creatorDetailNote {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.creatorSimilarGrid dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.creatorSimilarGrid dt,
.creatorSimilarGrid dd {
  margin: 0;
  font-size: 12px;
}

.creatorSimilarGrid dt {
  color: var(--creator-detail-muted);
  font-weight: 800;
}

.creatorSimilarGrid dd {
  color: var(--text-1);
  font-weight: 900;
}

.creatorSimilarGrid button,
.creatorSimilarGrid article > a {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--creator-detail-accent);
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-agent-floating.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy agent floating and embedded panel compatibility chunk.
 *
 * This file preserves the pre-split global cascade. Do not add new rules here;
 * migrate Agent fixes into the owning module CSS or shared UI components.
 */
.agentFloatingOrb {
  width: 118px;
  height: 96px;
  position: fixed;
  top: calc(100vh - 168px);
  left: calc(100vw - 144px);
  z-index: 1100;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #ffffff;
  cursor: grab;
  font-size: 13px;
  font-weight: 950;
  overflow: visible;
  padding: 0;
  touch-action: none;
  transition: filter 0.18s ease, transform 0.18s ease;
  -webkit-user-select: none;
          user-select: none;
}

.agentFloatingTeaser {
  width: min(300px, calc(100vw - 32px));
  position: fixed;
  top: clamp(16px, calc(var(--agent-orb-top, calc(100vh - 168px)) + 4px), calc(100vh - 116px));
  z-index: 1099;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16), 0 10px 28px rgba(20, 184, 166, 0.12);
  color: var(--text-1);
  cursor: pointer;
  padding: 12px 14px;
  text-align: left;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.agentFloatingTeaser::after {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 20px;
  right: -6px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  border-right: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.94);
  content: '';
  transform: rotate(45deg);
}

.agentFloatingTeaser strong,
.agentFloatingTeaser span {
  position: relative;
  z-index: 1;
  display: block;
}

.agentFloatingTeaser strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.agentFloatingTeaser span {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}

.agentFloatingTeaser:hover {
  border-color: rgba(20, 184, 166, 0.24);
  transform: translateY(-1px);
}

.agentFloatingOrb .brandLogo-mark {
  width: 34px;
  height: 34px;
}

.agentFloatingOrb *,
.agentFloatingOrb img,
.agentFloatingOrb svg {
  -webkit-user-drag: none;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

.agentFloatingOrb-capsule {
  width: 152px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary) 0%, #f97316 100%);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--primary) 28%, transparent), 0 8px 18px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

.agentFloatingOrb-capsule > span:not(.brandLogo-mark) {
  max-width: 82px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentFloatingOrb-robot,
.agentFloatingOrb-pet,
.agentFloatingOrb-three_d {
  background: transparent;
}

.agentFloatingOrb:hover,
.agentFloatingOrb.is-hover {
  filter: drop-shadow(0 18px 26px rgba(15, 23, 42, 0.22));
  transform: translateY(-2px);
}

.agentFloatingOrb:active,
.agentFloatingOrb.is-dragging,
.agentFloatingOrb.dragging {
  cursor: grabbing;
  filter: drop-shadow(0 20px 30px rgba(15, 23, 42, 0.24));
  transform: scale(0.98);
}

.agentFloatingOrb.is-teaser {
  animation: chatbiOrbCall 1.9s ease-in-out infinite;
}

.agentFloatingOrb.is-settling {
  transition: left 0.24s ease, top 0.24s ease, filter 0.18s ease, transform 0.18s ease;
}

.agentFloatingOrb.nudging,
.agentFloatingOrb.is-nudging {
  animation: chatbiOrbNudge 1.4s ease-in-out;
}

.chatbiMascot {
  width: 112px;
  height: 92px;
  position: relative;
  display: block;
  color: #172033;
  filter: drop-shadow(0 14px 18px rgba(15, 23, 42, 0.22));
  transform-origin: 50% 92%;
  animation: chatbiMascotFloat 4.2s ease-in-out infinite;
}

.chatbiMascotGlow,
.chatbiMascotAntenna,
.chatbiMascotAntenna span,
.chatbiMascotHead,
.chatbiMascotVisor,
.chatbiMascotEye,
.chatbiMascotMouth,
.chatbiMascotEar,
.chatbiMascotBody,
.chatbiMascotCore,
.chatbiMascotLabel,
.chatbiMascotArm,
.chatbiMascotShadow {
  position: absolute;
  display: block;
}

.chatbiMascotGlow {
  inset: 22px 10px 6px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 0%, transparent));
  filter: blur(8px);
}

.chatbiMascotAntenna {
  width: 2px;
  height: 13px;
  top: 1px;
  left: 55px;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 65%, #ffffff), var(--primary));
}

.chatbiMascotAntenna span {
  width: 8px;
  height: 8px;
  top: -5px;
  left: -3px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 16px color-mix(in srgb, var(--primary) 55%, transparent);
}

.chatbiMascotHead {
  width: 62px;
  height: 42px;
  top: 12px;
  left: 25px;
  z-index: 3;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 20px 20px 18px 18px;
  background: linear-gradient(145deg, #ffffff 0%, #e0f2fe 55%, #bfdbfe 100%);
  box-shadow: inset 0 -8px 18px rgba(59, 130, 246, 0.12), 0 8px 18px rgba(15, 23, 42, 0.18);
}

.chatbiMascotVisor {
  width: 42px;
  height: 17px;
  top: 10px;
  left: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #172033 0%, #263554 100%);
  box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.18);
}

.chatbiMascotEye {
  width: 5px;
  height: 5px;
  top: 6px;
  border-radius: 999px;
  background: #67e8f9;
  box-shadow: 0 0 10px rgba(103, 232, 249, 0.9);
  animation: chatbiMascotEyeBlink 5s ease-in-out infinite;
}

.chatbiMascotEye.left {
  left: 11px;
}

.chatbiMascotEye.right {
  right: 11px;
}

.chatbiMascotMouth {
  width: 16px;
  height: 5px;
  left: 23px;
  bottom: 7px;
  border-bottom: 2px solid rgba(23, 32, 51, 0.42);
  border-radius: 0 0 999px 999px;
}

.chatbiMascotEar {
  width: 13px;
  height: 22px;
  top: 23px;
  z-index: 2;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 65%, #ffffff), var(--primary));
  box-shadow: 0 5px 14px color-mix(in srgb, var(--primary) 22%, transparent);
}

.chatbiMascotEar.left {
  left: 16px;
}

.chatbiMascotEar.right {
  right: 16px;
}

.chatbiMascotBody {
  width: 70px;
  height: 38px;
  left: 21px;
  top: 50px;
  z-index: 2;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 22px 22px 18px 18px;
  background: linear-gradient(155deg, #ffffff 0%, #f1f5f9 52%, #dbeafe 100%);
  box-shadow: inset 0 -7px 18px rgba(59, 130, 246, 0.1), 0 10px 18px rgba(15, 23, 42, 0.14);
}

/* 能量球:钢铁侠反应堆风格 —— 清晰同心环 + 青光,顶部居中 */
.chatbiMascotCore {
  width: 17px;
  height: 17px;
  top: 4px;
  left: 50%;
  margin-left: -8.5px;
  border: 1.5px solid rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  background: radial-gradient(
    circle at 50% 50%,
    #ffffff 0 16%,
    #bdf6ff 16% 28%,
    #22d3ee 28% 42%,
    rgba(34, 211, 238, 0.18) 42% 56%,
    #38bdf8 56% 70%,
    rgba(56, 189, 248, 0.12) 70% 100%
  );
  box-shadow:
    0 0 0 1px rgba(14, 165, 233, 0.45),
    0 0 9px 1px rgba(34, 211, 238, 0.85),
    inset 0 0 4px rgba(255, 255, 255, 0.85);
  animation: chatbiMascotCorePulse 1.8s ease-in-out infinite;
}

/* 文字:能量球下方居中,与球上下排列不重叠 */
.chatbiMascotLabel {
  top: auto;
  bottom: 4px;
  left: 0;
  right: 0;
  max-width: none;
  padding: 0 4px;
  overflow: hidden;
  text-align: center;
  color: #172033;
  font-size: 8.5px;
  font-weight: 950;
  letter-spacing: 0.02em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbiMascotArm {
  width: 12px;
  height: 30px;
  top: 53px;
  z-index: 1;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #bfdbfe 100%);
  transform-origin: 50% 10%;
}

.chatbiMascotArm.left {
  left: 13px;
  transform: rotate(18deg);
}

.chatbiMascotArm.right {
  right: 13px;
  transform: rotate(-18deg);
}

.chatbiMascotShadow {
  width: 70px;
  height: 13px;
  left: 21px;
  bottom: -1px;
  z-index: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.18);
  filter: blur(4px);
}

.chatbiMascot.is-hover,
.agentFloatingOrb:hover .chatbiMascot {
  animation-duration: 2.6s;
}

.chatbiMascot.is-teaser,
.chatbiMascot.isCalling {
  animation: chatbiMascotFloat 2.8s ease-in-out infinite, chatbiMascotTalkHead 1.2s ease-in-out infinite;
}

.chatbiMascot.is-teaser .chatbiMascotMouth,
.chatbiMascot.isCalling .chatbiMascotMouth {
  height: 7px;
  border-bottom-color: color-mix(in srgb, var(--primary) 58%, transparent);
}

.chatbiMascot.is-teaser .chatbiMascotArm.left,
.chatbiMascot.isCalling .chatbiMascotArm.left {
  animation: chatbiMascotTalkLeftArm 1.1s ease-in-out infinite;
}

.chatbiMascot.is-teaser .chatbiMascotArm.right,
.chatbiMascot.isCalling .chatbiMascotArm.right {
  animation: chatbiMascotTalkRightArm 1.35s ease-in-out infinite;
}

.chatbiMascot.is-dragging,
.chatbiMascot.is-settling {
  animation-play-state: paused;
}

.chatbiMascot.isNudging {
  animation: chatbiMascotNudge 1.4s ease-in-out;
}

.chatbiMascot-pet .chatbiMascotHead {
  border-radius: 26px 26px 18px 18px;
  background: linear-gradient(145deg, #fff7ed 0%, #fed7aa 100%);
}

.chatbiMascot-pet .chatbiMascotEar {
  height: 24px;
  border-radius: 14px 14px 999px 999px;
  background: linear-gradient(180deg, #fbbf24, color-mix(in srgb, var(--primary) 65%, #ffffff));
}

.chatbiMascot-pet .chatbiMascotVisor {
  background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
}

.chatbiMascot-threeD {
  filter: drop-shadow(0 18px 22px rgba(15, 23, 42, 0.24)) saturate(1.08);
  transform-style: preserve-3d;
}

.chatbiMascot-threeD .chatbiMascotHead,
.chatbiMascot-threeD .chatbiMascotBody {
  box-shadow: inset -8px -9px 18px rgba(59, 130, 246, 0.16), inset 8px 8px 18px rgba(255, 255, 255, 0.66), 0 12px 22px rgba(15, 23, 42, 0.18);
}

@keyframes chatbiOrbCall {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  35% {
    transform: translateY(-4px) rotate(-2deg);
  }

  70% {
    transform: translateY(-2px) rotate(2deg);
  }
}

@keyframes chatbiOrbNudge {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-3px);
  }
}

@keyframes chatbiMascotFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-5px) rotate(1deg);
  }
}

@keyframes chatbiMascotCorePulse {
  0%,
  100% {
    opacity: 0.78;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes chatbiMascotEyeBlink {
  0%,
  92%,
  100% {
    transform: translate(var(--agent-eye-x, 0px), var(--agent-eye-y, 0px)) scaleY(1);
  }

  95% {
    transform: translate(var(--agent-eye-x, 0px), var(--agent-eye-y, 0px)) scaleY(0.15);
  }
}

@keyframes chatbiMascotTalkHead {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  45% {
    transform: translateY(-2px) rotate(-2deg);
  }

  75% {
    transform: translateY(1px) rotate(2deg);
  }
}

@keyframes chatbiMascotTalkLeftArm {
  0%,
  100% {
    transform: rotate(18deg);
  }

  50% {
    transform: rotate(44deg) translateY(-2px);
  }
}

@keyframes chatbiMascotTalkRightArm {
  0%,
  100% {
    transform: rotate(-18deg);
  }

  50% {
    transform: rotate(-36deg) translateY(-1px);
  }
}

@keyframes chatbiMascotNudge {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }

  30% {
    transform: translateX(-4px) rotate(-3deg);
  }

  60% {
    transform: translateX(4px) rotate(3deg);
  }
}

.agentFloatingLogo .brandLogo-mark {
  width: 30px;
  height: 30px;
}

.agentFloatingPanel {
  position: fixed;
  z-index: 1100;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.26), 0 20px 54px color-mix(in srgb, var(--primary) 14%, transparent);
  color: #172033;
  transform-origin: bottom right;
  animation: agentPanelGrowIn 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.agentEmbeddedPanel {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: #ffffff;
  color: #172033;
}

.agentEmbeddedHeader {
  min-height: 60px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: #ffffff;
  padding: 10px 14px;
}

.agentEmbeddedHeader > div {
  min-width: 0;
}

.agentEmbeddedHeader strong {
  display: block;
  color: #172033;
  font-size: 16px;
  font-weight: 950;
}

.agentEmbeddedPanelBody {
  min-height: 0;
  overflow: hidden;
}

.agentEmbeddedWelcome {
  position: relative;
  align-items: center;
  justify-content: flex-start;
  min-height: 98px;
  gap: 72px;
  overflow: visible;
  padding: 14px 28px 8px;
}

.agentPromptWelcome--embedded {
  min-height: 180px;
  display: grid;
  grid-template-columns: 118px minmax(320px, 0.82fr) minmax(320px, 1fr);
  gap: 22px;
  padding: 18px 28px;
}

.agentPromptWelcome--floating {
  min-height: 132px;
  align-items: center;
  gap: 22px;
  padding: 18px 20px 12px;
}

.agentEmbeddedWelcome .agentWelcomeMascot {
  width: 92px;
  height: 72px;
  margin: 0;
}

.agentPromptWelcome--floating .agentWelcomeMascot {
  width: 86px;
  height: 72px;
  margin: 0;
}

.agentEmbeddedWelcomeMascot {
  position: relative;
}

.agentEmbeddedWelcomeMascot::after {
  position: absolute;
  top: 31px;
  right: -12px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 64%, #ffffff);
  box-shadow:
    9px 0 0 color-mix(in srgb, var(--primary) 42%, #ffffff),
    18px 0 0 color-mix(in srgb, var(--primary) 24%, #ffffff);
  content: '';
  opacity: 0;
  transform: translateX(-5px) scale(0.7);
}

.agentEmbeddedWelcomeMascot.is-speaking {
  animation: agentMascotSuggest 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.agentEmbeddedWelcomeMascot.is-speaking::after {
  animation: agentSpeechDots 920ms cubic-bezier(0.2, 0.8, 0.2, 1) 110ms both;
}

.agentEmbeddedEmptyHistory {
  display: grid;
  gap: 4px;
  border: 1px dashed rgba(148, 163, 184, 0.34);
  border-radius: 10px;
  color: #64748b;
  padding: 12px;
}

.agentEmbeddedEmptyHistory strong {
  color: #172033;
  font-size: 13px;
  font-weight: 900;
}

.agentEmbeddedEmptyHistory span {
  color: #64748b;
  font-size: 12px;
  font-weight: 760;
  white-space: normal;
}

.agentFloatingPanelHeader {
  min-height: 76px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.96);
  padding: 14px 18px;
  cursor: grab;
  touch-action: none;
}

.agentFloatingPanelHeader:active {
  cursor: grabbing;
}

.agentFloatingPanelHeader div {
  min-width: 0;
}

.agentFloatingPanelHeader strong {
  display: block;
  color: #172033;
  font-size: 15px;
  font-weight: 950;
}

.agentFloatingPanelHeader p {
  margin: 3px 0 0;
  overflow: hidden;
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentFloatingPanelHeader button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.agentFloatingLogo,
.agentBrand span,
.agentEmptyState span {
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-weight: 950;
  overflow: hidden;
}

.agentFloatingLogo {
  width: 36px;
  height: 36px;
  font-size: 18px;
}

/* 面板头部用会动的小机器人替代 logo:外层 span 缩放,不动 .chatbiMascot 自身的浮动动画 */
.agentFloatingLogo--mascot {
  position: relative;
  width: 48px;
  height: 42px;
  overflow: visible;
  background: transparent;
  flex: 0 0 auto;
}
.agentFloatingLogo--mascot .agentMascotScale {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 112px;
  height: 92px;
  margin: -46px 0 0 -56px;
  transform: scale(0.42);
  transform-origin: center center;
}

/* A:空状态招手机器人(靠右,与文字同排) */
.agentWelcomeMascot {
  display: block;
  width: 112px;
  height: 92px;
  flex: 0 0 auto;
  margin: 0 -6px 0 0;
}

/* B:面板从浮球方向"长出 / 收回" */
@keyframes agentPanelGrowIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.agentFloatingPanel.is-closing {
  animation: agentPanelShrinkOut 190ms ease forwards;
}
@keyframes agentPanelShrinkOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }
}

.agentComposerSend {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: var(--primary);
  color: #ffffff;
  cursor: pointer;
}

.agentFloatingPanelBody {
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  overflow: hidden;
  background: #ffffff;
}

.agentEmbeddedPanelBody {
  grid-template-columns: 220px minmax(0, 1fr);
}

.agentConversationSidebar {
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  border-right: 1px solid rgba(148, 163, 184, 0.18);
  background: #f8fafc;
  padding: 12px;
  overflow: hidden;
}

.agentConversationToolbar {
  min-width: 0;
  display: grid;
}

.agentNewConversationButton {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: var(--primary);
  color: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}

.agentConversationMeta {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.agentConversationList {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
}

.agentConversationList > div {
  position: relative;
  min-width: 0;
  display: grid;
}

.agentConversationSelect {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #172033;
  cursor: pointer;
  padding: 10px 42px 10px 10px;
  text-align: left;
}

.agentConversationList > div.active .agentConversationSelect,
.agentConversationSelect:hover {
  border-color: color-mix(in srgb, var(--primary) 18%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, #ffffff), #ffffff 56%),
    color-mix(in srgb, var(--primary) 6%, #ffffff);
}

.agentConversationActions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.agentConversationMore {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: rgba(241, 245, 249, 0.9);
  color: #64748b;
  cursor: pointer;
  padding: 0;
}

.agentConversationMenu {
  position: absolute;
  z-index: 3;
  right: 0;
  top: 30px;
  min-width: 78px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  padding: 4px;
}

.agentConversationMenu button {
  width: 100%;
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #ef4444;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  text-align: left;
}

.agentConversationSidebar strong,
.agentConversationSidebar span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentConversationSidebar strong {
  font-size: 13px;
  font-weight: 900;
}

.agentConversationSidebar span {
  color: #64748b;
  font-size: 12px;
  font-weight: 760;
}

.agentConversationMain {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.agentContextStrip {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: #ffffff;
  color: #172033;
  padding: 12px 28px 10px;
}

.agentContextStrip strong,
.agentContextStrip span,
.agentContextStrip p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agentContextStrip strong {
  font-size: 14px;
  font-weight: 950;
  line-height: 1.35;
}

.agentContextStrip span,
.agentContextStrip p {
  color: #64748b;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.45;
}

@media (max-width: 1320px) {
  .agentEmbeddedPanelBody {
    grid-template-columns: 200px minmax(0, 1fr);
  }
}

@media (max-width: 1080px) {
  .agentEmbeddedPanelBody {
    grid-template-columns: 1fr;
  }

  .agentFloatingPanelBody {
    grid-template-columns: 1fr;
  }

  .agentConversationSidebar {
    max-height: 170px;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  }

  .agentPromptWelcome--embedded {
    grid-template-columns: 1fr;
  }

  .agentPromptCommonQuestions {
    border-left: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    padding-top: 14px;
    padding-left: 0;
  }

  .agentPromptCommonQuestionGrid {
    grid-template-columns: 1fr;
  }

}

/* 滚动内容区(欢迎/建议/消息),输入框固定在它下方、仅占右列宽度 */
.agentConversationScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.agentFloatingWelcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
}

.agentWelcomeText {
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.agentFloatingWelcome h2 {
  margin: 0;
  color: #172033;
  font-size: 22px;
  font-weight: 950;
}

.agentFloatingWelcome p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.7;
}

.agentSuggestedQuestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 18px;
}

.agentEmbeddedPanel .agentSuggestedQuestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, min(340px, 1fr)));
  justify-content: start;
  gap: 10px 12px;
  padding: 0;
}

.agentEmbeddedWelcomeQuestions {
  flex: 1 1 auto;
  min-width: 0;
  align-content: center;
  margin-left: 18px;
}

.agentPromptWelcome--embedded .agentEmbeddedWelcomeQuestions {
  grid-template-columns: 1fr;
  margin-left: 0;
}

.agentPromptWelcome--floating .agentEmbeddedWelcomeQuestions {
  grid-template-columns: 1fr;
  margin-left: 4px;
}

.agentPromptWelcome--floating .agentEmbeddedWelcomeQuestions button {
  min-height: 32px;
  font-size: 12px;
}

.agentEmbeddedWelcomeQuestions.is-hidden {
  pointer-events: none;
}

.agentEmbeddedPanel .agentSuggestedQuestions button {
  justify-content: flex-start;
}

.agentPromptCommonQuestions {
  min-width: 0;
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 10px;
  border-left: 1px solid rgba(148, 163, 184, 0.18);
  padding-left: 22px;
}

.agentPromptCommonQuestions header {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #172033;
}

.agentPromptCommonQuestions header svg {
  color: var(--primary);
}

.agentPromptCommonQuestions strong {
  font-size: 13px;
  font-weight: 950;
}

.agentPromptCommonQuestionGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.agentPromptCommonQuestionGrid button {
  min-width: 0;
  min-height: 36px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: #ffffff;
  color: #172033;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  text-align: left;
}

.agentPromptCommonQuestionGrid button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 26%, rgba(148, 163, 184, 0.2));
  background: color-mix(in srgb, var(--primary) 5%, #ffffff);
  color: var(--primary);
}

.agentPromptCommonQuestionGrid button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.agentSuggestedQuestions button {
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, #ffffff), #ffffff 56%),
    color-mix(in srgb, var(--primary) 6%, #ffffff);
  color: var(--primary);
  cursor: pointer;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 850;
  animation: agentChipPop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.agentEmbeddedWelcomeQuestions button {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 7%, transparent);
  text-align: left;
  animation: agentSuggestionBubbleCycle 6.18s cubic-bezier(0.16, 1, 0.3, 1) both;
  white-space: normal;
}

.agentEmbeddedWelcomeQuestions button::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.72) 42%, transparent 70%);
  content: '';
  transform: translateX(-120%);
  animation: agentSuggestionSheen 6.18s ease-out both;
}

.agentSuggestedQuestions button:nth-child(1) {
  animation-delay: 40ms;
}
.agentSuggestedQuestions button:nth-child(2) {
  animation-delay: 120ms;
}
.agentSuggestedQuestions button:nth-child(3) {
  animation-delay: 200ms;
}
.agentSuggestedQuestions button:nth-child(n + 4) {
  animation-delay: 280ms;
}

.agentEmbeddedWelcomeQuestions button:nth-child(1) {
  animation-delay: 0ms;
}

.agentEmbeddedWelcomeQuestions button:nth-child(2) {
  animation-delay: 90ms;
}

.agentEmbeddedWelcomeQuestions button:nth-child(3) {
  animation-delay: 180ms;
}

.agentEmbeddedWelcomeQuestions button:nth-child(n + 4) {
  animation-delay: 270ms;
}

.agentEmbeddedWelcomeQuestions button:nth-child(1)::after {
  animation-delay: 120ms;
}

.agentEmbeddedWelcomeQuestions button:nth-child(2)::after {
  animation-delay: 210ms;
}

.agentEmbeddedWelcomeQuestions button:nth-child(3)::after {
  animation-delay: 300ms;
}

.agentEmbeddedWelcomeQuestions button:nth-child(n + 4)::after {
  animation-delay: 390ms;
}

@keyframes agentSuggestionBubbleCycle {
  0% {
    opacity: 0;
    transform: translateX(-12px) translateY(4px) scale(0.96);
    filter: blur(2px);
  }
  10% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0);
  }
  78% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateX(10px) translateY(-2px) scale(0.98);
    filter: blur(1px);
  }
}

@keyframes agentSuggestionSheen {
  0%,
  16% {
    opacity: 0;
    transform: translateX(-120%);
  }
  34% {
    opacity: 0.8;
  }
  58% {
    opacity: 0;
    transform: translateX(120%);
  }
  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

.agentSuggestedQuestions button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

/* E:建议气泡像机器人逐个"弹出来" */
@keyframes agentChipPop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* C:Agent 思考中——loading 气泡里的跳动圆点 */
.agentTypingDots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 2px 2px;
}

.agentTypingDots i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ff246b;
  opacity: 0.45;
  animation: agentTypingBounce 1.2s ease-in-out infinite;
}

.agentTypingDots i:nth-child(2) {
  animation-delay: 0.16s;
}

.agentTypingDots i:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes agentTypingBounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  30% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

.agentFloatingMessages {
  display: grid;
  gap: 10px;
  padding: 0 20px 18px;
}

.agentFloatingMessages article {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: #f8fafc;
  padding: 12px 14px;
}

.agentFloatingMessages article.user {
  width: fit-content;
  max-width: min(760px, 78%);
  margin-left: auto;
  justify-self: end;
  border-color: color-mix(in srgb, var(--primary) 20%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, #ffffff), #ffffff 56%),
    color-mix(in srgb, var(--primary) 6%, #ffffff);
}

.agentFloatingMessages article.assistant {
  margin-right: min(56px, 14%);
}

.agentFloatingMessages article.loading {
  opacity: 0.72;
}

.agentFloatingMessages article.error {
  border-color: rgba(239, 68, 68, 0.24);
  background: #fff1f2;
}

.agentFloatingMessages strong {
  display: block;
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
}

.agentFloatingMessages p {
  margin: 4px 0 0;
  color: #172033;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.6;
}

.agentFloatingMessages em {
  display: block;
  margin-top: 8px;
  color: #94a3b8;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.agentFloatingMessages em.agentExpertBadge {
  display: inline-block;
  margin: 0 0 0 8px;
  padding: 1px 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, #ffffff), #ffffff 56%),
    color-mix(in srgb, var(--primary) 6%, #ffffff);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
  vertical-align: middle;
}

.agentThinking {
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: #f8fafc;
}

.agentThinking summary {
  cursor: pointer;
  list-style: none;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
  -webkit-user-select: none;
          user-select: none;
}

.agentThinking summary::-webkit-details-marker {
  display: none;
}

.agentThinking summary::before {
  content: '🧠 ';
}

.agentThinking summary:hover {
  color: var(--primary);
}

.agentThinkingBody {
  margin-top: 8px;
  padding-top: 8px;
  max-height: 240px;
  overflow-y: auto;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  color: #64748b;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.62;
  white-space: pre-wrap;
}

.agentMarkdownContent {
  margin-top: 6px;
  color: #172033;
  font-size: 14px;
  line-height: 1.66;
}

.agentMarkdownContent > :first-child {
  margin-top: 0;
}

.agentMarkdownContent h3 {
  margin: 14px 0 8px;
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
}

.agentMarkdownContent h4 {
  margin: 12px 0 6px;
  color: var(--primary);
  font-size: 14.5px;
  font-weight: 900;
}

.agentMarkdownContent h5,
.agentMarkdownContent h6 {
  margin: 10px 0 6px;
  color: #334155;
  font-size: 13.5px;
  font-weight: 850;
}

.agentMarkdownContent p {
  margin: 6px 0;
  color: #172033;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.66;
}

.agentMarkdownContent ul,
.agentMarkdownContent ol {
  margin: 6px 0;
  padding-left: 20px;
}

.agentMarkdownContent li {
  margin: 3px 0;
  font-weight: 600;
  line-height: 1.6;
}

.agentMarkdownContent strong {
  color: #0f172a;
  font-weight: 900;
}

.agentMarkdownContent code {
  padding: 1px 6px;
  border-radius: 5px;
  background: #f1f5f9;
  color: var(--primary);
  font-size: 12.5px;
}

.agentMarkdownContent blockquote {
  margin: 8px 0;
  padding: 4px 12px;
  border-left: 3px solid color-mix(in srgb, var(--primary) 40%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, #ffffff), #ffffff 56%),
    color-mix(in srgb, var(--primary) 6%, #ffffff);
  color: #475569;
}

.agentMarkdownTableWrap {
  margin: 8px 0;
  overflow-x: auto;
}

.agentMarkdownContent table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.agentMarkdownContent th,
.agentMarkdownContent td {
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  text-align: left;
  font-weight: 700;
}

.agentMarkdownContent th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 900;
}

.agentReportActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.agentReportActions button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, rgba(148, 163, 184, 0.28));
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, #ffffff), #ffffff 58%),
    color-mix(in srgb, var(--primary) 6%, #ffffff);
  color: var(--primary);
  cursor: pointer;
  padding: 0 13px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.agentReportActions button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 38%, rgba(148, 163, 184, 0.28));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 10%, transparent);
}

.agentReportActions button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.agentReportActions svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.agentMessageSuggestions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.agentMessageSuggestionsLabel {
  display: block;
  margin-bottom: 6px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 850;
}

.agentMessageSuggestionsButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.agentMessageSuggestionsButtons button {
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, #ffffff), #ffffff 56%),
    color-mix(in srgb, var(--primary) 6%, #ffffff);
  color: var(--primary);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}

.agentMessageSuggestionsButtons button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 42%, transparent);
  background: color-mix(in srgb, var(--primary) 14%, #ffffff);
}

.agentMessageSuggestionsButtons button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.agentArtifact {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.agentArtifactThought {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px;
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
}

.agentArtifactThought svg {
  color: var(--primary);
}

.agentArtifactThought span {
  color: #172033;
  font-weight: 950;
  white-space: nowrap;
}

.agentArtifactThought p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #64748b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentToolCard {
  display: grid;
  gap: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: 12px;
  background: #ffffff;
  padding: 16px;
}

.agentToolCard header,
.agentToolCard header div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.agentToolCard header {
  justify-content: space-between;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  margin: -2px 0 0;
  padding-bottom: 12px;
  color: var(--primary);
}

.agentToolCard header strong {
  color: var(--primary);
  font-size: 15px;
  font-weight: 950;
}

.agentToolCard header span {
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 900;
}

.agentToolStatus {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  background: #ffffff;
  padding: 7px 12px 7px 7px;
  color: #64748b;
}

.agentToolStatus span {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

.agentToolStatus b {
  color: #172033;
  font-size: 13px;
  font-weight: 900;
}

.agentToolCard h3 {
  margin: 0;
  color: #172033;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.35;
}

.agentArtifactSubtitle {
  margin: -8px 0 0 !important;
  color: #344256 !important;
  font-size: 14px !important;
  font-weight: 820 !important;
}

.agentArtifactTable {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
}

.agentArtifactTable div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(118px, 0.38fr) minmax(0, 1fr);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.agentArtifactTable div:last-child {
  border-bottom: 0;
}

.agentArtifactTable span,
.agentArtifactTable strong,
.agentArtifactTable a {
  min-width: 0;
  padding: 11px 12px;
  color: #172033;
  font-size: 13px;
  font-weight: 860;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.agentArtifactTable span {
  border-right: 1px solid rgba(148, 163, 184, 0.12);
  background: #f8fafc;
  color: #344256;
  font-weight: 950;
}

.agentArtifactTable a {
  color: #3b6cff;
}

.agentArtifactChart {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: #ffffff;
  padding: 16px 14px 12px;
}

.agentArtifactChart h4,
.agentArtifactInsights h4 {
  margin: 0;
  color: #172033;
  font-size: 15px;
  font-weight: 950;
  text-align: center;
}

.agentArtifactChart > div {
  height: 230px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  align-items: end;
  gap: 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(180deg, transparent, rgba(248, 250, 252, 0.76));
  padding: 20px 18px 0;
}

.agentArtifactChart span {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: 8px;
}

.agentArtifactChart b,
.agentArtifactChart em {
  color: #8490a2;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-align: center;
}

.agentArtifactChart i {
  width: min(86px, 100%);
  align-self: end;
  height: var(--agent-bar-height);
  min-height: 4px;
  border-radius: 5px 5px 0 0;
  background: #5b8cf7;
  box-shadow: 0 8px 18px rgba(91, 140, 247, 0.22);
}

.agentArtifactInsights {
  display: grid;
  gap: 10px;
}

.agentArtifactInsights h4 {
  text-align: left;
}

.agentArtifactInsights ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.agentArtifactInsights li {
  color: #172033;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.7;
}

.agentArtifactInsights li::marker {
  color: #2f6df6;
  font-weight: 950;
}

.agentArtifactSummary {
  margin: 0 !important;
  color: #172033 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.agentArtifactSuggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.agentArtifactSuggestions button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, #ffffff), #ffffff 56%),
    color-mix(in srgb, var(--primary) 6%, #ffffff);
  color: var(--primary);
  cursor: pointer;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}

.agentFloatingComposer {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  background: #ffffff;
  padding: 12px 14px;
}

.agentFloatingComposer input {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  outline: 0;
  background: #f8fafc;
  color: #172033;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 780;
}

.agentFloatingComposer input:focus {
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}

.agentFloatingComposer input:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.agentFloatingComposer button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: var(--primary);
  color: #ffffff;
  cursor: pointer;
}

.agentFloatingComposer button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.agentFloatingResizeHandle {
  position: absolute;
  z-index: 2;
  border: 0;
  background: transparent;
  touch-action: none;
}

.agentFloatingResizeHandle.n,
.agentFloatingResizeHandle.s {
  height: 10px;
  left: 18px;
  right: 18px;
  cursor: ns-resize;
}

.agentFloatingResizeHandle.n {
  top: -3px;
}

.agentFloatingResizeHandle.s {
  bottom: -3px;
}

.agentFloatingResizeHandle.e,
.agentFloatingResizeHandle.w {
  width: 10px;
  top: 18px;
  bottom: 18px;
  cursor: ew-resize;
}

.agentFloatingResizeHandle.e {
  right: -3px;
}

.agentFloatingResizeHandle.w {
  left: -3px;
}

.agentFloatingResizeHandle.ne,
.agentFloatingResizeHandle.nw,
.agentFloatingResizeHandle.se,
.agentFloatingResizeHandle.sw {
  width: 18px;
  height: 18px;
}

.agentFloatingResizeHandle.ne {
  top: -3px;
  right: -3px;
  cursor: nesw-resize;
}

.agentFloatingResizeHandle.nw {
  top: -3px;
  left: -3px;
  cursor: nwse-resize;
}

.agentFloatingResizeHandle.se {
  right: -3px;
  bottom: -3px;
  cursor: nwse-resize;
}

.agentFloatingResizeHandle.sw {
  bottom: -3px;
  left: -3px;
  cursor: nesw-resize;
}

.agentFloatingResizeHandle.se::after {
  content: '';
  width: 18px;
  height: 18px;
  position: absolute;
  right: 2px;
  bottom: 2px;
  background: linear-gradient(135deg, transparent 0 45%, rgba(100, 116, 139, 0.5) 46% 55%, transparent 56%),
    linear-gradient(135deg, transparent 0 65%, rgba(100, 116, 139, 0.5) 66% 75%, transparent 76%);
  opacity: 0.75;
  pointer-events: none;
}

.agentCoreHeader {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  padding: 18px 22px;
}

.agentCoreHeader h2 {
  margin: 0;
  color: #172033;
  font-size: 20px;
  font-weight: 950;
}

.agentCoreHeader p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.agentCoreRanges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: #64748b;
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
}

.agentCoreRanges button {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: rgba(241, 245, 249, 0.92);
  color: #64748b;
  padding: 0 10px;
  font: inherit;
  cursor: pointer;
}

.agentCoreRanges button.active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}

.agentCoreRanges i {
  color: #94a3b8;
  font-style: normal;
}

.agentCoreSummary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 20px 0;
}

.agentCoreSummary span {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.agentCoreSummary strong {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 17px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentCoreState {
  min-height: 148px;
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 14px;
  font-weight: 850;
}

.agentCoreCharts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 18px 20px 20px;
}

.agentCoreChartCard {
  min-width: 0;
  overflow: visible;
  border-radius: 8px;
  background: #f8fafc;
  padding: 24px 20px 20px;
}

.agentCoreChartCard header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.agentCoreChartCard header > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #475569;
}

.agentCoreChartCard header strong {
  color: #334155;
  font-size: 15px;
  font-weight: 800;
}

.agentCoreChartCard header span {
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentMetricSelect {
  width: 150px;
  height: 34px;
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 999px;
  background: #ffffff;
  color: #1f2937;
}

/* label 文字与图表标题重复,且会和下拉值重叠,视觉隐藏(保留无障碍) */
.agentMetricSelect > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.agentMetricSelect:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}

.agentMetricSelect select {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  padding: 0 38px 0 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.agentMetricSelect svg {
  position: absolute;
  right: 12px;
  color: #9ca3af;
  pointer-events: none;
}

.agentMetricSelect option {
  background: #ffffff;
  color: #1f2937;
}

.agentCoreChartCanvas {
  height: 180px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: stretch;
}

.agentCoreYAxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #6b7280;
  font-size: 12px;
  font-weight: 650;
  text-align: right;
}

.agentCoreChartCanvas svg {
  width: 100%;
  height: 180px;
  overflow: visible;
}

.agentCoreChartCanvas line {
  stroke: rgba(148, 163, 184, 0.28);
  stroke-width: 1;
}

.agentCoreChartCanvas polyline {
  fill: none;
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.agentCoreChartCanvas circle {
  fill: var(--primary);
}

.agentCoreXAxis {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin: 8px 0 0 54px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 650;
}

.agentCoreXAxis span {
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-agent-page.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy agent page compatibility chunk.
 *
 * This file preserves the pre-split global cascade. Do not add new rules here;
 * migrate Agent page fixes into the owning module CSS or shared UI components.
 */
.agentPage {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  background: #f7f8fc;
  color: #172033;
}

[data-theme='dark'] .agentPage {
  background: #080b15;
  color: var(--text-1);
}

.agentSidebar {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  padding: 18px 14px;
}

[data-theme='dark'] .agentSidebar {
  border-color: var(--line-dark);
  background: #0b1020;
}

.agentBrand {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, max-content);
  align-items: center;
  column-gap: 10px;
  color: inherit;
  text-decoration: none;
}

.agentBrand span {
  width: 34px;
  height: 34px;
}

.agentBrand strong,
.agentBrand em {
  grid-column: 2;
  display: block;
}

.agentBrand strong {
  color: var(--primary);
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
}

.agentBrand em {
  color: var(--primary);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.agentNewChat {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #ffffff;
  color: #1f2937;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

[data-theme='dark'] .agentNewChat {
  border-color: var(--line-dark);
  background: var(--surface-panel);
  color: var(--text-1);
}

.agentNewChat span {
  font-size: 22px;
  line-height: 1;
}

.agentHistory {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.agentHistory > span {
  padding: 0 12px;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 900;
}

.agentHistory button {
  min-width: 0;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #475569;
  padding: 0 12px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.agentHistory button.active {
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  color: var(--primary);
}

[data-theme='dark'] .agentHistory button {
  color: var(--text-2);
}

.agentMain {
  min-width: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 66px minmax(0, 1fr);
}

.agentTopbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.82);
  padding: 0 28px;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

[data-theme='dark'] .agentTopbar {
  border-color: var(--line-dark);
  background: rgba(8, 11, 21, 0.82);
}

.agentTopbar a,
.agentTopActions span {
  color: #475569;
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
}

[data-theme='dark'] .agentTopbar a,
[data-theme='dark'] .agentTopActions span {
  color: var(--text-2);
}

.agentTopActions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.agentChatCanvas {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 34px 28px 18px;
}

.agentMessages {
  width: min(960px, 100%);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-self: center;
  overflow-y: auto;
  padding: 18px 0 40px;
}

.agentUserBubble {
  max-width: min(520px, 72%);
  align-self: flex-end;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
  color: #111827;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.6;
}

.agentAssistantBubble {
  width: min(780px, 100%);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: flex-start;
  gap: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #ffffff;
  padding: 18px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06);
}

.agentAssistantBubble.warning {
  border-color: rgba(245, 158, 11, 0.34);
  background: #fff9e9;
}

.agentAssistantBubble.error {
  border-color: rgba(239, 68, 68, 0.24);
  background: #fff5f5;
}

[data-theme='dark'] .agentUserBubble,
[data-theme='dark'] .agentAssistantBubble {
  border-color: var(--line-dark);
  background: var(--surface-panel-strong);
  color: var(--text-1);
}

.agentAssistantIcon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: #ffffff;
}

.agentAssistantBubble strong {
  display: block;
  color: #92400e;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.4;
}

.agentAssistantBubble.normal strong {
  color: #1f2937;
}

[data-theme='dark'] .agentAssistantBubble strong {
  color: var(--text-1);
}

.agentAssistantBubble p {
  margin: 6px 0 0;
  color: #334155;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.7;
}

[data-theme='dark'] .agentAssistantBubble p {
  color: var(--text-2);
}

.agentEmptyState {
  align-self: center;
  width: min(620px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.agentEmptyState span {
  width: 54px;
  height: 54px;
  font-size: 24px;
}

.agentEmptyState h1 {
  margin: 0;
  color: #111827;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: 0;
}

.agentEmptyState p {
  margin: 0;
  color: #64748b;
  font-size: 15px;
  line-height: 1.7;
}

[data-theme='dark'] .agentEmptyState h1 {
  color: var(--text-1);
}

.agentComposer {
  width: min(950px, 100%);
  min-height: 182px;
  justify-self: center;
  display: grid;
  grid-template-rows: minmax(84px, 1fr) 44px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  padding: 18px;
}

[data-theme='dark'] .agentComposer {
  border-color: var(--line-dark);
  background: #101625;
}

.agentComposer textarea {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: #172033;
  font-size: 16px;
  font-weight: 780;
  line-height: 1.6;
}

[data-theme='dark'] .agentComposer textarea {
  color: var(--text-1);
}

.agentComposer textarea::placeholder {
  color: #cbd5e1;
}

.agentComposerBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agentMentionButton {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--primary);
  font-size: 17px;
  font-weight: 900;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-radar-append-a.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy radar append A compatibility chunk.
 *
 * This file preserves the pre-split global cascade. Do not add new rules here;
 * migrate fixes into the owning module CSS or shared UI components.
 */
.radarPage .radarTableCheck,
.radarPage .radarShopIdentity,
.radarPage .radarOwner {
  max-width: 100%;
}

.radarPage .radarShopIdentity em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarTableActions {
  flex-wrap: nowrap;
}

.radarPage .radarTableActions button {
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  .radarPage .radarHero {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .radarPage .radarHeroActions {
    justify-content: flex-start;
  }
}

.radarPage .radarCompareBuilder {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(45, 76, 123, 0.08);
}

.radarPage .radarGoalGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.radarPage .radarGoalGrid button {
  min-height: 74px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.radarPage .radarGoalGrid button.active {
  border-color: rgba(22, 119, 255, 0.42);
  background: #eef6ff;
}

.radarPage .radarCompareConfig {
  grid-template-columns: minmax(260px, 0.5fr) minmax(360px, 1fr);
  gap: 14px;
}

.radarPage .radarCompareOwnStoreBlock {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  padding: 14px;
}

.radarPage .radarComparePrimaryActions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  white-space: nowrap;
}

.radarPage .radarSlotCards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.radarPage .radarSlotCard {
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.92)), #ffffff;
  box-shadow: 0 14px 34px rgba(45, 76, 123, 0.08);
  padding: 14px;
}

.radarPage .radarSearchSelect {
  position: relative;
  gap: 0;
}

.radarPage .radarSearchTrigger {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #f7fbff;
  color: var(--radar-body);
  padding: 7px 10px;
  text-align: left;
  cursor: pointer;
}

.radarPage .radarSearchTrigger strong,
.radarPage .radarSearchTrigger em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarSearchTrigger strong {
  color: var(--radar-text);
  font-size: 12px;
  font-weight: 900;
}

.radarPage .radarSearchTrigger em {
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.radarPage .radarSearchMenu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 55;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(207, 222, 240, 0.96);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 44px rgba(31, 62, 108, 0.18);
  padding: 10px;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.radarPage .radarSearchMenu label,
.radarTemplateSearch {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 999px;
  background: #f8fbff;
  color: var(--radar-muted);
  padding: 0 11px;
}

.radarPage .radarSearchMenu input,
.radarTemplateSearch input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
}

.radarPage .radarSearchOptions {
  max-height: 218px;
  overflow: auto;
  display: grid;
  gap: 4px;
}

.radarPage .radarSearchOptions button {
  min-width: 0;
  display: grid;
  gap: 2px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--radar-body);
  padding: 8px;
  text-align: left;
  cursor: pointer;
}

.radarPage .radarSearchOptions button:hover,
.radarPage .radarSearchOptions button.active {
  background: #eef6ff;
  color: #1677ff;
}

.radarPage .radarSearchOptions strong,
.radarPage .radarSearchOptions em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarSearchOptions strong {
  color: var(--radar-text);
  font-size: 12px;
  font-weight: 900;
}

.radarPage .radarSearchOptions em {
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.radarPage .radarCompareCorePanel {
  border-radius: 18px;
}

.radarPage .radarCompareDataGrid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.48fr);
  gap: 14px;
}

.radarPage .radarCompareMetricTable {
  min-width: 760px;
  table-layout: fixed;
}

.radarPage .radarCompareMetricTable th,
.radarPage .radarCompareMetricTable td {
  white-space: nowrap;
}

.radarPage .radarCompareMetricTable th:first-child,
.radarPage .radarCompareMetricTable td:first-child {
  width: 136px;
}

.radarPage .radarCompareMetricTable td:not(:first-child),
.radarPage .radarCompareMetricTable th:not(:first-child) {
  text-align: center;
}

.radarPage .radarCompareMetricTable tbody tr:hover td {
  background: #f8fbff;
}

.radarPage .radarSparkChart,
.radarPage .radarCategoryCompare {
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f9fcff);
}

.radarTemplateSheetBackdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(15, 27, 51, 0.22);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.radarTemplateSheet {
  width: min(760px, 52vw);
  min-width: 560px;
  height: 100%;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 16px;
  border-right: 1px solid rgba(207, 222, 240, 0.96);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 24px 0 64px rgba(31, 62, 108, 0.18);
  padding: 22px;
}

.radarTemplateSheetHead,
.radarTemplateEditorHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.radarTemplateSheetHead span {
  color: #1677ff;
  font-size: 12px;
  font-weight: 950;
}

.radarTemplateSheetHead h2 {
  margin: 2px 0 0;
  color: var(--radar-text);
  font-size: 28px;
}

.radarTemplateSheetHead button,
.radarTemplateEditorHead button,
.radarTemplateEditorActions button {
  min-height: 34px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0 12px;
  cursor: pointer;
}

.radarTemplateSheetGrid {
  display: grid;
  grid-template-columns: minmax(230px, 0.78fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.radarTemplateManageList,
.radarTemplateEditor,
.radarTemplateCompetitors {
  display: grid;
  gap: 10px;
}

.radarTemplateManageList {
  max-height: calc(100vh - 178px);
  overflow: auto;
}

.radarTemplateManageList > button {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--radar-body);
  padding: 11px;
  text-align: left;
  cursor: pointer;
}

.radarTemplateManageList > button.active,
.radarTemplateManageList > button:hover {
  border-color: rgba(22, 119, 255, 0.28);
  background: #f1f7ff;
}

.radarTemplateManageList strong,
.radarTemplateManageList em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarTemplateManageList strong {
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
}

.radarTemplateManageList em {
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.radarTemplatePin {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eef4fb;
  color: #7c8ba1;
}

.radarTemplatePin.active {
  background: #fff4d8;
  color: #f59e0b;
}

.radarTemplateEditor {
  border: 1px solid var(--radar-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 14px;
}

.radarTemplateEditorHead strong {
  color: var(--radar-text);
  font-size: 16px;
}

.radarTemplatePinToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--radar-body);
  font-size: 12px;
  font-weight: 850;
}

.radarTemplatePinToggle input {
  width: 18px;
  height: 18px;
}

.radarTemplateEditorActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.radarTemplateEditorActions button:last-child,
.radarTemplateEditorActions button:nth-last-child(2) {
  border-color: rgba(22, 119, 255, 0.22);
  background: #1677ff;
  color: #ffffff;
}

/* ── Alert Rule Manager redesigned sheet ── */
.radarAlertSheet {
  width: min(880px, 60vw);
  min-width: 620px;
  height: 100%;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 16px;
  border-right: 1px solid rgba(207, 222, 240, 0.96);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 24px 0 64px rgba(31, 62, 108, 0.18);
  padding: 22px;
}

.radarAlertSummary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.radarAlertSummaryCard {
  min-height: 68px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.radarAlertSummaryCard .label {
  font-size: 11px;
  color: var(--radar-muted);
  font-weight: 900;
}

.radarAlertSummaryCard .value {
  font-size: 22px;
  color: var(--radar-text);
  font-weight: 900;
}

.radarAlertSummaryCard .note {
  font-size: 11px;
  color: var(--radar-muted);
  font-weight: 700;
}

/* Alert Rule Left Sidebar */
.radarAlertRuleSidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.radarAlertRuleListToolbar {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.radarAlertRuleListToolbar .title {
  font-size: 15px;
  font-weight: 900;
  color: var(--radar-text);
}

.radarAlertFilterTabs {
  display: flex;
  gap: 5px;
}

.radarAlertFilterTab {
  height: 30px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #fff;
  color: #516077;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.radarAlertFilterTab.active {
  color: #075f5a;
  border-color: #bce8e3;
  background: #e7f8f6;
}

/* Rule Cards */
.radarAlertRuleCard {
  position: relative;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  padding: 12px 12px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  cursor: pointer;
}

.radarAlertRuleCard.active {
  border-color: #aee8e2;
  background: linear-gradient(90deg, rgba(231, 248, 246, 0.96), rgba(255, 255, 255, 0.95));
  box-shadow: 0 14px 28px rgba(20, 167, 158, 0.10);
}

.radarAlertRuleCard.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: #14a79e;
}

.radarAlertRuleCardIcon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #fff6e2;
  color: #f5a524;
}

.radarAlertRuleCardIcon.pink {
  color: #f0447e;
  background: #fff0f5;
}

.radarAlertRuleCardIcon.blue {
  color: #356df3;
  background: #eef3ff;
}

.radarAlertRuleCardIcon.green {
  color: #12a66a;
  background: #eaf8f1;
}

.radarAlertRuleCardBody {
  min-width: 0;
}

.radarAlertRuleCardName {
  color: var(--radar-text);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
  margin-bottom: 4px;
}

.radarAlertRuleCardMeta {
  color: #516176;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarAlertRuleCardBadge {
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #067f78;
  background: #e7f8f6;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.radarAlertRuleCardBadge.off {
  color: #8793a5;
  background: #f0f3f7;
}

.radarAlertSourceStrip {
  margin-top: auto;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 800;
  color: var(--radar-muted);
}

.radarAlertSourceStrip strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--radar-text);
}

.radarAlertSourceItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  border-top: 1px solid #edf2f7;
  font-size: 11px;
  font-weight: 800;
  color: var(--radar-muted);
}

.radarAlertSourceItem:first-of-type {
  border-top: 0;
}

.radarAlertSourceItem strong {
  color: #152239;
  font-size: 12px;
  margin-bottom: 0;
}

/* Alert Rule Right Editor */
.radarAlertEditor {
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 52px rgba(22, 39, 68, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.radarAlertEditorHead {
  height: 58px;
  padding: 0 16px;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #f9fbfd;
}

.radarAlertEditorHead .info strong {
  font-size: 18px;
  font-weight: 900;
  color: var(--radar-text);
}

.radarAlertEditorHead .info span {
  display: block;
  margin-top: 3px;
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 800;
}

.radarAlertEditorBody {
  padding: 14px 16px 10px;
  overflow: auto;
  flex: 1 1;
}

.radarAlertFieldRow {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 10px;
  margin-bottom: 10px;
}

.radarAlertFieldLabel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: #5d6d84;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 6px;
}

.radarAlertSectionTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 10px;
}

.radarAlertSectionTitle h2 {
  margin: 0;
  color: var(--radar-text);
  font-size: 16px;
  font-weight: 900;
}

.radarAlertSectionTitle span {
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 900;
}

/* Template tabs */
.radarAlertTemplateTabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}

.radarAlertTemplateTab {
  min-width: 0;
  height: 44px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #fff;
  color: #314159;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 900;
  cursor: pointer;
}

.radarAlertTemplateTab.active {
  color: #075f5a;
  border-color: #9be0d8;
  background: #e7f8f6;
  box-shadow: inset 0 0 0 1px rgba(20, 167, 158, 0.12);
}

/* Builder */
.radarAlertBuilder {
  border-top: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
  padding: 10px 0 12px;
  margin-bottom: 10px;
}

.radarAlertBuilderGrid {
  display: grid;
  grid-template-columns: 1fr 84px 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.radarAlertRangeRow {
  display: grid;
  grid-template-columns: 1fr 104px;
  gap: 12px;
  align-items: end;
  margin-bottom: 10px;
}

.radarAlertRangeLabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.radarAlertRangeLabel .title {
  color: #152239;
  font-size: 13px;
  font-weight: 900;
}

.radarAlertRangeLabel .bounds {
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 900;
}

.radarAlertRangeTrack {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #edf1f5;
  overflow: hidden;
}

.radarAlertRangeTrack input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.radarAlertRangeFill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #14a79e, #356df3);
}

.radarAlertRangeThumb {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 4px solid #14a79e;
  box-shadow: 0 2px 8px rgba(20, 167, 158, 0.28);
  pointer-events: none;
}

.radarAlertStepper {
  height: 44px;
  border: 1px solid #b7e5df;
  border-radius: 8px;
  background: #fff;
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  overflow: hidden;
}

.radarAlertStepper button {
  height: 100%;
  border: 0;
  background: #e7f8f6;
  color: #067f78;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}

.radarAlertStepper strong {
  text-align: center;
  color: #102139;
  font-size: 15px;
  font-weight: 900;
}

.radarAlertChipGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 6px;
}

.radarAlertChip {
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #41516a;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.radarAlertChip.active {
  color: #075f5a;
  border-color: #aee8e2;
  background: #e7f8f6;
}

.radarAlertChip .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

/* Policy + Mapping */
.radarAlertPolicyGrid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 12px;
  margin-bottom: 12px;
}

.radarAlertPolicyCard {
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  min-height: 90px;
}

.radarAlertPolicyCard .policy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #17243b;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 6px;
}

.radarAlertPolicyRow {
  height: 25px;
  border-top: 1px solid #edf2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 800;
}

.radarAlertPolicyRow:first-of-type {
  border-top: 0;
}

.radarAlertPolicyRow strong {
  color: #142139;
  font-size: 11px;
  white-space: nowrap;
}

/* Expression preview */
.radarAlertExpression {
  border: 1px solid #bce8e3;
  border-radius: 10px;
  background: linear-gradient(180deg, #f9fffe, #ffffff);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.radarAlertExpression .label {
  color: #075f5a;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 6px;
}

.radarAlertExpression .code {
  color: #142139;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 900;
}

.radarAlertExpression .code .hi {
  color: #14a79e;
}

/* Alert editor footer */
.radarAlertEditorFooter {
  margin-top: auto;
  padding: 10px 16px;
  border-top: 1px solid #edf2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fbfcfe;
}

@media (max-width: 1180px) {
  .radarPage .radarGoalGrid,
  .radarPage .radarCompareConfig,
  .radarPage .radarCompareOwnStoreBlock,
  .radarPage .radarCompareDataGrid {
    grid-template-columns: 1fr;
  }

  .radarPage .radarComparePrimaryActions {
    justify-content: flex-start;
  }

  .radarTemplateSheet {
    width: min(100vw, 720px);
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .radarTemplateSheet {
    width: 100%;
    padding: 16px;
  }

  .radarTemplateSheetGrid {
    grid-template-columns: 1fr;
  }
}

.radarPage .radarCompareDimensionTabs {
  flex: 0 0 auto;
}

.radarPage .radarCompareMetricMiniGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.radarPage .radarCompareMetricMiniGrid article {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(207, 222, 240, 0.86);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 12px 14px;
  overflow: hidden;
}

.radarPage .radarCompareMetricMiniGrid span,
.radarPage .radarCompareMetricMiniGrid em {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarCompareMetricMiniGrid strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 23px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarCompareMetricMiniGrid i {
  position: absolute;
  right: 13px;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #1677ff;
}

.radarPage .radarCompareMetricMiniGrid i.green {
  background: #10b981;
}

.radarPage .radarCompareMetricMiniGrid i.amber {
  background: #ff9f1a;
}

.radarPage .radarCompareMetricMiniGrid i.red {
  background: #ef4444;
}

.radarPage .radarCompareMetricMiniGrid i.purple {
  background: #8b5cf6;
}

.radarPage .radarCompareMetricTable {
  min-width: 980px;
}

.radarPage .radarCompareMetricTable th,
.radarPage .radarCompareMetricTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.radarPage .radarCompareMetricTable th:first-child,
.radarPage .radarCompareMetricTable td:first-child {
  width: 190px;
}

.radarPage .radarCompareMetricTable th:nth-child(2),
.radarPage .radarCompareMetricTable td:nth-child(2),
.radarPage .radarCompareMetricTable th:nth-child(3),
.radarPage .radarCompareMetricTable td:nth-child(3) {
  width: 170px;
}

.radarPage .radarCompareMetricTable th:nth-child(4),
.radarPage .radarCompareMetricTable td:nth-child(4) {
  width: 250px;
}

.radarPage .radarCompareMetricTable th:nth-child(5),
.radarPage .radarCompareMetricTable td:nth-child(5) {
  width: 150px;
}

.radarPage .radarCompareMetricTable th:nth-child(6),
.radarPage .radarCompareMetricTable td:nth-child(6) {
  width: 76px;
  text-align: center;
}

.radarPage .radarCompareMetricTable td:not(:first-child),
.radarPage .radarCompareMetricTable th:not(:first-child) {
  text-align: left;
}

.radarPage .radarCompareScore {
  min-width: 38px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #eef6ff;
  color: #1677ff;
  font-size: 12px;
  font-weight: 950;
}

.radarPage .radarCompareVisualStack {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.radarPage .radarCompareDimensionChart {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--radar-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f9fcff);
  padding: 14px;
}

.radarPage .radarCompareBarRows {
  display: grid;
  gap: 10px;
}

.radarPage .radarCompareBarRow {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
}

.radarPage .radarCompareBarRow strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-body);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarCompareBarRow span {
  position: relative;
  min-width: 0;
  height: 26px;
  display: block;
  border-radius: 999px;
  background: #edf3fa;
  overflow: hidden;
}

.radarPage .radarCompareBarRow i {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 18px;
  border-radius: inherit;
  background: #1677ff;
}

.radarPage .radarCompareBarRow i.competitor {
  background: #10b981;
}

.radarPage .radarCompareBarRow i.benchmark {
  background: #9aa8bb;
}

.radarPage .radarCompareBarRow b {
  position: relative;
  z-index: 1;
  display: block;
  color: #0f1b33;
  font-size: 11px;
  font-weight: 950;
  line-height: 26px;
  padding-right: 8px;
  text-align: right;
}

.radarPage .radarCompareFocus {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(22, 119, 255, 0.16);
  border-radius: 16px;
  background: #eef6ff;
  color: #1559a8;
  padding: 14px;
}

.radarPage .radarCompareFocus span {
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-agent-composer-send-bridge.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy agent composer send bridge compatibility chunk.
 *
 * This file preserves the pre-split global cascade. Do not add new rules here;
 * migrate fixes into the owning module CSS or shared UI components.
 */
.agentComposerSend {
  width: 42px;
  height: 42px;
}

.agentComposerSend:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-creator-responsive-tail.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy creator responsive tail compatibility chunk.
 *
 * This file preserves the pre-split global cascade. Do not add new rules here;
 * migrate fixes into the owning module CSS or shared UI components.
 */
@media (max-width: 1280px) {
  .creatorSearchPanel {
    padding: 20px;
  }

  .creatorSearchTop {
    align-items: stretch;
    flex-direction: column;
  }

  .creatorSearchBox {
    width: 100%;
  }

  .creatorSearchFilterRow > strong,
  .creatorAdvancedRow > strong,
  .creatorSelectedBar > strong {
    width: 86px;
    min-width: 86px;
    font-size: 14px;
  }

  .creatorSearchChipList {
    gap: 8px 12px;
  }

  .creatorSearchChip,
  .creatorSelectPill {
    font-size: 14px;
  }

  .companyIntroCard {
    grid-template-columns: minmax(0, 1fr);
  }

  .companyIntroCardQrList {
    width: min(360px, 100%);
  }

  .growthRankFilterPanel,
  .growthRankTablePanel {
    padding: 20px;
  }

  .growthRankFilterRow > strong {
    width: 86px;
    min-width: 86px;
  }

  .creatorDetailTopGrid,
  .creatorDetailSummaryGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .creatorDetailMetricGrid,
  .creatorDetailTwoColumn,
  .creatorSimilarGrid,
  .creatorDetailDataGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .agentFloatingOrb {
    width: 104px;
    height: 76px;
    top: calc(100vh - 144px);
    left: calc(100vw - 112px);
  }

  .chatbiMascot {
    width: 100px;
    height: 78px;
    transform: scale(0.92);
  }

  .agentFloatingPanel {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .agentFloatingPanelHeader {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 64px;
    padding: 12px 14px;
  }

  .agentCoreHeader {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }

  .agentCoreRanges {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .agentCoreSummary,
  .agentCoreCharts {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 14px;
    padding-right: 14px;
  }

  .agentCoreChartCard {
    padding: 18px 12px 16px;
  }

  .agentCoreChartCard header {
    align-items: stretch;
    flex-direction: column;
    margin-bottom: 18px;
  }

  .agentMetricSelect {
    width: 100%;
  }

  .agentCoreXAxis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .agentPage {
    grid-template-columns: minmax(0, 1fr);
  }

  .agentSidebar {
    display: none;
  }

  .agentTopbar {
    padding: 0 16px;
  }

  .agentChatCanvas {
    padding: 18px 12px 12px;
  }

  .agentMessages {
    padding-bottom: 22px;
  }

  .agentUserBubble {
    max-width: 88%;
  }

  .agentAssistantBubble {
    grid-template-columns: minmax(0, 1fr);
  }

  .agentComposer {
    min-height: 156px;
    border-radius: 18px;
  }

  .creatorSearchBox {
    height: 48px;
  }

  .creatorSearchTypePill {
    width: 154px;
    flex: 0 0 154px;
  }

  .creatorSearchTypePill .filterSelectTrigger {
    padding-left: 16px;
  }

  .creatorSearchTypePill .filterSelectValue {
    max-width: 96px;
  }

  .creatorSearchSubmit {
    flex-basis: 56px;
    width: 56px;
  }

  .creatorSearchFilterRow,
  .creatorAdvancedRow,
  .creatorSelectedBar {
    align-items: stretch;
    flex-direction: column;
  }

  .creatorEmptyResult {
    min-height: 360px;
    gap: 14px;
    padding: 24px 12px;
  }

  .creatorEmptyIllustration {
    width: min(210px, 72vw);
    height: 140px;
  }

  .creatorEmptyResult h2 {
    font-size: 15px;
  }

  .creatorCommerceCategoryPanel .creatorCommerceCategoryPopover {
    width: calc(100vw - 64px);
    grid-template-columns: minmax(0, 1fr);
    left: 0;
  }

  .creatorCommerceCategoryPanel {
    overflow: visible;
  }

  .creatorCommerceCategoryMenu.secondary {
    border-top: 1px solid var(--creator-line);
    border-left: 0;
  }

  .creatorSearchFilterRow.compact {
    align-items: flex-start;
  }

  .creatorAdvancedRow {
    grid-template-columns: minmax(0, 1fr);
  }

  .creatorAdvancedRow > div {
    flex-direction: column;
  }

  .creatorSearchFilterRow > strong,
  .creatorAdvancedRow > strong,
  .creatorSelectedBar > strong {
    width: auto;
    min-width: 0;
    justify-content: flex-start;
    text-align: left;
  }

  .creatorSelectedBar > div {
    min-width: 0;
  }

  .creatorDetailProfileCard,
  .creatorDetailOverviewCard,
  .creatorDetailDataPanel {
    padding: 18px;
  }

  .creatorDetailProfileCard {
    padding-bottom: 0;
  }

  .creatorDetailProfileActions {
    justify-content: center;
  }

  .creatorDetailInfoList {
    margin-right: -18px;
    margin-left: -18px;
    padding: 18px;
  }

  .creatorDetailInfoList div,
  .creatorDetailSummaryGrid article > div,
  .creatorDetailMetricGrid,
  .creatorDetailTwoColumn,
  .creatorAudienceLayout,
  .creatorAudienceFanBody,
  .creatorSimilarGrid,
  .creatorDetailDataGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .creatorAudienceCard {
    padding: 16px;
  }

  .creatorAudienceCard header {
    align-items: flex-start;
    flex-direction: column;
  }

  .creatorAudienceRow {
    grid-template-columns: minmax(0, 1fr) 54px minmax(82px, 0.48fr);
    gap: 10px;
    padding: 0 14px;
  }

  .creatorAudienceRow span {
    font-size: 14px;
  }

  .creatorAudienceRow em {
    font-size: 15px;
  }

  .creatorAudienceDonut {
    width: 160px;
    height: 160px;
  }

  .creatorActiveHeader {
    align-items: flex-start;
    flex-direction: column;
    margin: -18px -18px 0;
    padding: 18px;
  }

  .creatorActiveRange {
    width: 100%;
    overflow-x: auto;
  }

  .creatorActiveChartCard {
    padding: 18px 12px 16px;
  }

  .creatorActiveChartCard svg {
    height: 220px;
  }

  .creatorActiveCards,
  .creatorActiveSummaryBody {
    grid-template-columns: minmax(0, 1fr);
  }

  .creatorActiveInfoCard {
    padding: 20px 18px;
  }

  .creatorActiveSummaryCard .creatorAudienceDonut {
    width: 132px;
    height: 132px;
  }

  .creatorDetailMetricCard {
    min-height: 132px;
  }

  .creatorDetailTabs {
    gap: 18px;
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-radar-append-b.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy radar append B compatibility chunk.
 *
 * This file preserves the pre-split global cascade. Do not add new rules here;
 * migrate fixes into the owning module CSS or shared UI components.
 */
.radarPage .radarHero {
  min-height: 112px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(226, 236, 255, 0.94), rgba(245, 251, 255, 0.84)), #ffffff;
  box-shadow: 0 18px 48px rgba(45, 76, 123, 0.08);
  padding: 18px 22px;
}

.radarPage .radarHero::before {
  background:
    linear-gradient(120deg, rgba(22, 119, 255, 0.1), transparent 40%),
    radial-gradient(circle at 88% 12%, rgba(45, 212, 191, 0.16), transparent 30%);
}

.radarPage .radarHero h1 {
  margin: 0;
  font-size: clamp(26px, 2.1vw, 34px);
}

.radarPage .radarHero p {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.45;
}

.radarPage .radarHero-shops {
  min-height: 78px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-radius: 16px;
  padding: 14px 20px;
}

.radarPage .radarHero-shops .radarBackButton {
  margin-bottom: 8px;
}

.radarPage .radarHero-shops h1 {
  font-size: clamp(24px, 1.7vw, 30px);
}

.radarPage .radarHero-shops p {
  margin-top: 4px;
}

.radarPage .radarHero-shops .radarHeroActions {
  align-self: center;
}

.radarPage .radarBackButton {
  min-height: 28px;
  width: fit-content;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #38506c;
  box-shadow: 0 8px 22px rgba(31, 62, 108, 0.08);
  margin-bottom: 12px;
  padding: 0 11px 0 8px;
  font-size: 12px;
  font-weight: 850;
}

.radarPage .radarBackButton:hover {
  background: #ffffff;
  color: #1677ff;
  box-shadow: 0 12px 28px rgba(31, 62, 108, 0.12);
}

.radarPage .radarMonitorBoard {
  min-height: auto;
}

.radarPage .radarShopsPanel {
  gap: 12px;
  padding: 16px 18px 18px;
}

.radarPage .radarShopsPanel .radarPanelHeader {
  align-items: center;
}

.radarPage .radarShopsPanel .radarPanelHeader p {
  margin-top: 4px;
}

.radarPage .radarShopsPanel .radarFilterBar {
  margin-top: 2px;
}

.radarPage .radarShopTable {
  min-width: 1480px;
  table-layout: fixed;
}

.radarPage .radarShopTable th,
.radarPage .radarShopTable td,
.radarPage .radarShopTable .cuiDataListTableHeadCell,
.radarPage .radarShopTable .cuiDataListTableCell {
  padding: 12px 10px;
  white-space: nowrap;
}

.radarPage .radarShopTable th:nth-child(1),
.radarPage .radarShopTable td:nth-child(1),
.radarPage .radarShopTable .cuiDataListTableHeadCell:nth-child(1),
.radarPage .radarShopTable .cuiDataListTableCell:nth-child(1) {
  width: 245px;
}

.radarPage .radarShopTable th:nth-child(5),
.radarPage .radarShopTable td:nth-child(5),
.radarPage .radarShopTable .cuiDataListTableHeadCell:nth-child(5),
.radarPage .radarShopTable .cuiDataListTableCell:nth-child(5) {
  width: 150px;
}

.radarPage .radarShopTable th:nth-child(6),
.radarPage .radarShopTable td:nth-child(6),
.radarPage .radarShopTable .cuiDataListTableHeadCell:nth-child(6),
.radarPage .radarShopTable .cuiDataListTableCell:nth-child(6) {
  width: 180px;
}

.radarPage .radarShopTable th:nth-child(7),
.radarPage .radarShopTable td:nth-child(7),
.radarPage .radarShopTable .cuiDataListTableHeadCell:nth-child(7),
.radarPage .radarShopTable .cuiDataListTableCell:nth-child(7) {
  width: 310px;
}

.radarPage .radarShopTable th:nth-child(11),
.radarPage .radarShopTable td:nth-child(11),
.radarPage .radarShopTable .cuiDataListTableHeadCell:nth-child(11),
.radarPage .radarShopTable .cuiDataListTableCell:nth-child(11) {
  width: 170px;
}

.radarPage .radarShopTable th:nth-child(12),
.radarPage .radarShopTable td:nth-child(12),
.radarPage .radarShopTable .cuiDataListTableHeadCell:nth-child(12),
.radarPage .radarShopTable .cuiDataListTableCell:nth-child(12) {
  width: 112px;
}

.radarPage .radarShopTable td,
.radarPage .radarShopTable .cuiDataListTableCell {
  overflow: hidden;
  text-overflow: ellipsis;
}

.radarPage .radarTableCheck,
.radarPage .radarShopIdentity,
.radarPage .radarOwner {
  max-width: 100%;
}

.radarPage .radarShopIdentity em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarTableActions {
  flex-wrap: nowrap;
}

.radarPage .radarTableActions button {
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  .radarPage .radarHero {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .radarPage .radarHeroActions {
    justify-content: flex-start;
  }
}

.radarPage .radarCompareBuilder {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(45, 76, 123, 0.08);
}

.radarPage .radarGoalGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.radarPage .radarGoalGrid button {
  min-height: 74px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.radarPage .radarGoalGrid button.active {
  border-color: rgba(22, 119, 255, 0.42);
  background: #eef6ff;
}

.radarPage .radarCompareConfig {
  grid-template-columns: minmax(260px, 0.5fr) minmax(360px, 1fr);
  gap: 14px;
}

.radarPage .radarCompareOwnStoreBlock {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  padding: 14px;
}

.radarPage .radarComparePrimaryActions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  white-space: nowrap;
}

.radarPage .radarSlotCards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.radarPage .radarSlotCard {
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.92)), #ffffff;
  box-shadow: 0 14px 34px rgba(45, 76, 123, 0.08);
  padding: 14px;
}

.radarPage .radarSearchSelect {
  position: relative;
  gap: 0;
}

.radarPage .radarSearchTrigger {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #f7fbff;
  color: var(--radar-body);
  padding: 7px 10px;
  text-align: left;
  cursor: pointer;
}

.radarPage .radarSearchTrigger strong,
.radarPage .radarSearchTrigger em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarSearchTrigger strong {
  color: var(--radar-text);
  font-size: 12px;
  font-weight: 900;
}

.radarPage .radarSearchTrigger em {
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.radarPage .radarSearchMenu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 55;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(207, 222, 240, 0.96);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 44px rgba(31, 62, 108, 0.18);
  padding: 10px;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.radarPage .radarSearchMenu label,
.radarTemplateSearch {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 999px;
  background: #f8fbff;
  color: var(--radar-muted);
  padding: 0 11px;
}

.radarPage .radarSearchMenu input,
.radarTemplateSearch input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
}

.radarPage .radarSearchOptions {
  max-height: 218px;
  overflow: auto;
  display: grid;
  gap: 4px;
}

.radarPage .radarSearchOptions button {
  min-width: 0;
  display: grid;
  gap: 2px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--radar-body);
  padding: 8px;
  text-align: left;
  cursor: pointer;
}

.radarPage .radarSearchOptions button:hover,
.radarPage .radarSearchOptions button.active {
  background: #eef6ff;
  color: #1677ff;
}

.radarPage .radarSearchOptions strong,
.radarPage .radarSearchOptions em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarSearchOptions strong {
  color: var(--radar-text);
  font-size: 12px;
  font-weight: 900;
}

.radarPage .radarSearchOptions em {
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.radarPage .radarCompareCorePanel {
  border-radius: 18px;
}

.radarPage .radarCompareDataGrid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.48fr);
  gap: 14px;
}

.radarPage .radarCompareMetricTable {
  min-width: 760px;
  table-layout: fixed;
}

.radarPage .radarCompareMetricTable th,
.radarPage .radarCompareMetricTable td {
  white-space: nowrap;
}

.radarPage .radarCompareMetricTable th:first-child,
.radarPage .radarCompareMetricTable td:first-child {
  width: 136px;
}

.radarPage .radarCompareMetricTable td:not(:first-child),
.radarPage .radarCompareMetricTable th:not(:first-child) {
  text-align: center;
}

.radarPage .radarCompareMetricTable tbody tr:hover td {
  background: #f8fbff;
}

.radarPage .radarSparkChart,
.radarPage .radarCategoryCompare {
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f9fcff);
}

.radarTemplateSheetBackdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(15, 27, 51, 0.22);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.radarTemplateSheet {
  width: min(760px, 52vw);
  min-width: 560px;
  height: 100%;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 16px;
  border-right: 1px solid rgba(207, 222, 240, 0.96);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 24px 0 64px rgba(31, 62, 108, 0.18);
  padding: 22px;
}

.radarTemplateSheetHead,
.radarTemplateEditorHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.radarTemplateSheetHead span {
  color: #1677ff;
  font-size: 12px;
  font-weight: 950;
}

.radarTemplateSheetHead h2 {
  margin: 2px 0 0;
  color: var(--radar-text);
  font-size: 28px;
}

.radarTemplateSheetHead button,
.radarTemplateEditorHead button,
.radarTemplateEditorActions button {
  min-height: 34px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0 12px;
  cursor: pointer;
}

.radarTemplateSheetGrid {
  display: grid;
  grid-template-columns: minmax(230px, 0.78fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.radarTemplateManageList,
.radarTemplateEditor,
.radarTemplateCompetitors {
  display: grid;
  gap: 10px;
}

.radarTemplateManageList {
  max-height: calc(100vh - 178px);
  overflow: auto;
}

.radarTemplateManageList > button {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--radar-body);
  padding: 11px;
  text-align: left;
  cursor: pointer;
}

.radarTemplateManageList > button.active,
.radarTemplateManageList > button:hover {
  border-color: rgba(22, 119, 255, 0.28);
  background: #f1f7ff;
}

.radarTemplateManageList strong,
.radarTemplateManageList em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filterSelectMenu button small {
  min-width: 0;
  overflow: hidden;
  color: var(--creator-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filterSelectMenu button em {
  border-radius: 999px;
  background: var(--success);
  color: #ffffff;
  padding: 1px 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.radarPage .radarCompareFocus strong {
  color: #15365f;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.55;
}

.radarPage .radarAlertHistoryPanel .radarPanelHeader {
  align-items: start;
}

.radarPage .radarAlertFilterBar {
  min-width: min(100%, 720px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.radarPage .radarAlertFilterBar label,
.radarPage .radarAlertFilterBar select {
  min-height: 36px;
  border: 1px solid var(--radar-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.radarPage .radarAlertFilterBar label {
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.radarPage .radarAlertFilterBar input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
}

.radarPage .radarAlertFilterBar select {
  padding: 0 12px;
}

.radarPage .radarReportBuilderGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
  gap: 14px;
  align-items: start;
}

.radarPage .radarReportFormGrid {
  min-width: 0;
}

.radarPage .radarDateRangeField {
  position: relative;
}

.radarPage .radarDateRangeField > button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--radar-body);
  font: inherit;
  padding: 0 12px;
  cursor: pointer;
}

.radarPage .radarDateRangeField > button strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarDateRangePopover {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(207, 222, 240, 0.96);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 52px rgba(31, 62, 108, 0.18);
  padding: 12px;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.radarPage .radarCalendarHeader {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
}

.radarPage .radarCalendarHeader strong {
  color: var(--radar-text);
  font-size: 14px;
  font-weight: 950;
  text-align: center;
}

.radarPage .radarCalendarHeader button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #f8fbff;
  color: var(--radar-muted);
  cursor: pointer;
}

.radarPage .radarCalendarHeader button:hover {
  border-color: rgba(22, 119, 255, 0.42);
  background: #edf5ff;
  color: #1677ff;
}

.radarPage .radarDateInputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.radarPage .radarDateInputs label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.radarPage .radarDateInputs span {
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 900;
}

.radarPage .radarDateInputs input {
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #f8fbff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  padding: 0 8px;
}

.radarPage .radarCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.radarPage .radarCalendarGrid b,
.radarPage .radarCalendarGrid button {
  min-width: 0;
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 900;
}

.radarPage .radarCalendarGrid b {
  color: var(--radar-muted);
}

.radarPage .radarCalendarGrid button {
  border: 0;
  background: #f4f8fd;
  color: var(--radar-body);
  cursor: pointer;
}

.radarPage .radarCalendarGrid button.selected {
  background: #e8f2ff;
  color: #1677ff;
}

.radarPage .radarCalendarGrid button.edge {
  background: #1677ff;
  color: #ffffff;
}

.radarPage .radarReportBuilderAside,
.radarPage .radarTemplateConfigSummary {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 14px;
}

.radarPage .radarReportBuilderAside span,
.radarPage .radarTemplateConfigSummary span,
.radarPage .radarReportBuilderAside em,
.radarPage .radarTemplateConfigSummary em {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
}

.radarPage .radarReportBuilderAside strong,
.radarPage .radarTemplateConfigSummary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 16px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarReportBuilderAside .radarButton {
  justify-content: center;
}

.radarPage .radarReportTemplatePanel {
  overflow: hidden;
}

.radarPage .radarReportTemplateActions {
  display: grid;
  gap: 9px;
}

.radarPage .radarReportTemplateActions button,
.radarPage .radarReportTemplateActions label {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  border: 1px solid rgba(22, 119, 255, 0.16);
  border-radius: 12px;
  background: #f5f9ff;
  color: #1559a8;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  padding: 0 12px;
  cursor: pointer;
}

.radarPage .radarReportTemplateActions input {
  display: none;
}

.radarPage .radarReportCover {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.36fr);
  align-items: stretch;
}

.radarPage .radarReportCoverText {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 14px;
}

.radarPage .radarReportCoverStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.radarPage .radarReportCoverStats span {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  padding: 14px;
}

.radarPage .radarReportCoverStats strong {
  color: #ffffff;
  font-size: 30px;
  font-weight: 950;
}

.radarPage .radarReportCoverStats em {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.radarPage .radarReportSection {
  display: grid;
  gap: 14px;
  border: 1px solid var(--radar-line);
  border-radius: 16px;
  background: #ffffff;
  padding: 18px;
}

.radarPage .radarReportSection.hero,
.radarPage .radarReportSection.split {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  align-items: start;
}

.radarPage .radarReportConclusionTags {
  display: grid;
  gap: 8px;
}

.radarPage .radarReportConclusionTags span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(22, 119, 255, 0.16);
  border-radius: 999px;
  background: #eef6ff;
  color: #1559a8;
  font-size: 12px;
  font-weight: 950;
  padding: 0 12px;
}

.radarPage .radarReportEvidenceGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.radarPage .radarReportEvidenceGrid article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--radar-line-soft);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 14px;
}

.radarPage .radarReportEvidenceGrid strong,
.radarPage .radarReportEvidenceGrid span,
.radarPage .radarReportEvidenceGrid em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radarPage .radarReportEvidenceGrid strong {
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.35;
}

.radarPage .radarReportEvidenceGrid span,
.radarPage .radarReportEvidenceGrid em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.radarPage .radarCompareBodyGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.66fr);
  gap: 18px;
  align-items: start;
}

.radarPage .radarCompareCorePanel .radarPanelHeader {
  align-items: start;
}

.radarPage .radarCompareRangeSelect {
  min-height: 38px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 0 34px 0 12px;
}

.radarPage .radarCompareMetricBoard {
  min-width: 0;
}

.radarPage .radarCompareMetricTabs {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid var(--radar-line-soft);
  margin-bottom: 10px;
}

.radarPage .radarCompareMetricTabs .radarSegmented {
  gap: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.radarPage .radarCompareMetricTabs .radarSegmented button {
  min-height: 42px;
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--radar-muted);
  padding: 0;
  font-size: 15px;
  font-weight: 950;
}

.radarPage .radarCompareMetricTabs .radarSegmented button.active {
  color: #1677ff;
}

.radarPage .radarCompareMetricTabs .radarSegmented button.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: #1677ff;
}

.radarPage .radarCompareMetricTable {
  min-width: 840px;
  table-layout: fixed;
}

.radarPage .radarCompareMetricTable th,
.radarPage .radarCompareMetricTable td,
.radarPage .radarCompareMetricTable .cuiDataListTableHeadCell,
.radarPage .radarCompareMetricTable .cuiDataListTableCell {
  height: 50px;
  overflow: hidden;
  border-bottom-color: rgba(222, 231, 243, 0.86);
  color: #66758d;
  text-align: center;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.radarPage .radarCompareMetricTable th:first-child,
.radarPage .radarCompareMetricTable td:first-child,
.radarPage .radarCompareMetricTable .cuiDataListTableHeadCell:first-child,
.radarPage .radarCompareMetricTable .cuiDataListTableCell:first-child {
  width: 118px;
  color: #53627a;
  text-align: left;
}

.radarPage .radarCompareMetricTable th:not(:first-child),
.radarPage .radarCompareMetricTable td:not(:first-child),
.radarPage .radarCompareMetricTable .cuiDataListTableHeadCell:not(:first-child),
.radarPage .radarCompareMetricTable .cuiDataListTableCell:not(:first-child) {
  width: 124px;
}

.radarPage .radarCompareMetricTable th.highlight,
.radarPage .radarCompareMetricTable td.highlight,
.radarPage .radarCompareMetricTable .cuiDataListTableHeadCell.highlight,
.radarPage .radarCompareMetricTable .cuiDataListTableCell.highlight {
  background: rgba(235, 244, 255, 0.82);
}

.radarPage .radarCompareMetricTable th.highlight,
.radarPage .radarCompareMetricTable .cuiDataListTableHeadCell.highlight {
  border-radius: 12px 12px 0 0;
}

.radarPage .radarCompareMetricTable tbody tr:last-child td.highlight,
.radarPage .radarCompareMetricTable .cuiDataListTableRow:last-child .cuiDataListTableCell.highlight {
  border-radius: 0 0 12px 12px;
}

.radarPage .radarCompareMetricTable th span,
.radarPage .radarCompareMetricTable .cuiDataListTableHeadCell span {
  display: block;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: normal;
}

.radarPage .radarCompareMetricTable th em,
.radarPage .radarCompareMetricTable .cuiDataListTableHeadCell em {
  display: block;
  color: #1677ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.radarPage .radarCompareMetricTable td.highlight,
.radarPage .radarCompareMetricTable .cuiDataListTableCell.highlight {
  color: #263b5d;
  font-weight: 950;
}

.radarPage .radarCompareCorePanel .radarCompareCharts {
  gap: 16px;
}

.radarPage .radarCompareCorePanel .radarSparkChart,
.radarPage .radarCompareCorePanel .radarCategoryCompare {
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: 0 12px 28px rgba(31, 62, 108, 0.05);
  padding: 16px;
}

.radarPage .radarCompareCorePanel .radarCategoryCompare {
  min-height: 214px;
}

.radarPage .radarReportTopGrid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
  gap: 14px;
  align-items: stretch;
}

.radarPage .radarReportBuilderPanel,
.radarPage .radarReportTopGrid .radarReportTemplatePanel {
  min-height: 100%;
}

.radarPage .radarTemplateUpload {
  display: inline-flex;
  min-width: 0;
}

.radarPage .radarTemplateUpload .cuiUploadDropzone {
  min-height: 0;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-style: solid;
  border-radius: 999px;
  padding: 8px 12px;
  text-align: left;
}

.radarPage .radarTemplateUpload .cuiUploadIcon {
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 999px;
  font-size: 10px;
}

.radarPage .radarTemplateUpload .cuiUploadTitle {
  font-size: 12px;
  white-space: nowrap;
}

.radarPage .radarTemplateUpload .cuiUploadFiles {
  max-width: 180px;
}

.radarPage .radarReportFormGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radarPage .radarReportBuilderAside {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr) auto;
  align-items: center;
}

.radarPage .radarReportBuilderAside .radarButton {
  min-width: 170px;
}

@media (max-width: 1180px) {
  .radarPage .radarReportBuilderGrid,
  .radarPage .radarReportTopGrid,
  .radarPage .radarReportCover,
  .radarPage .radarReportSection.hero,
  .radarPage .radarReportSection.split,
  .radarPage .radarCompareBodyGrid {
    grid-template-columns: 1fr;
  }

  .radarPage .radarAlertFilterBar {
    justify-content: flex-start;
  }

  .radarPage .radarReportEvidenceGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .radarPage .radarCompareMetricMiniGrid,
  .radarPage .radarDateInputs,
  .radarPage .radarReportBuilderAside,
  .radarPage .radarReportCoverStats,
  .radarPage .radarReportEvidenceGrid {
    grid-template-columns: 1fr;
  }

  .radarPage .radarAlertFilterBar label {
    min-width: 100%;
  }

  .radarPage .radarAlertFilterBar select {
    flex: 1 1 140px;
  }
}

@media (max-width: 420px) {
  .authPageTab {
    padding-inline: 6px;
    font-size: 12px;
  }

  .formHeader h1,
  .workspacePanel h2,
  .authCheckCard h1 {
    font-size: 24px;
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-workspace-core.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy workspace core compatibility anchor.
 *
 * Historical rules from this file have been split into ordered legacy chunks.
 * Keep this import anchor for reviewed migrations that still depend on the old cascade.
 */

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-category-market.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Legacy category market CSS.
 *
 * Moved from legacy-workspace-core.css as an order-preserving compatibility
 * chunk. Do not add new rules here; put new scoped rules in category-market.css.
 */

.categoryMarketPage {
  min-width: 0;
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 24px;
  color: var(--text-1);
  padding: 24px;
}

.categoryMarketPage.isInsight {
  height: 100%;
  min-height: 0;
  align-content: stretch;
  row-gap: 24px;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.categoryMarketToolbarSlot {
  min-width: 0;
}

.categoryMarketToolbarSlot.isDocked {
  height: var(--toolbar-dock-height);
}

.categoryMarketTop {
  position: relative;
  z-index: 20;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  align-self: start;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface-panel) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px color-mix(in srgb, #020617 9%, transparent);
  min-height: 62px;
  overflow: visible;
  padding: 8px 10px;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    border-radius 180ms ease,
    box-shadow 180ms ease;
}

.categoryMarketTop.isDocked {
  position: fixed;
  z-index: 1100;
  top: var(--toolbar-dock-top);
  left: var(--toolbar-dock-left);
  width: var(--toolbar-dock-width);
  box-sizing: border-box;
  border-color: color-mix(in srgb, var(--line-dark) 88%, transparent);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 42%),
    var(--sticky-toolbar-bg);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: 0 10px 24px color-mix(in srgb, #020617 14%, transparent);
}

.categoryMarketDataState,
.categoryMarketDataBanner {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.categoryMarketDataState {
  min-height: 360px;
  display: grid;
  grid-template-columns: auto minmax(0, 560px) auto;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 34px;
}

.categoryMarketLoadingSkeleton {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.categoryMarketSkeletonSummary {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.categoryMarketSkeletonGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(360px, 0.72fr);
  gap: 16px;
  align-items: stretch;
}

.categoryMarketSkeletonSummary span,
.categoryMarketSkeletonPanel,
.categoryMarketSkeletonPanel span,
.categoryMarketSkeletonPanel i {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--surface-panel-hover) 72%, transparent) 0%,
      color-mix(in srgb, var(--primary) 8%, var(--surface-panel)) 45%,
      color-mix(in srgb, var(--surface-panel-hover) 72%, transparent) 100%
    );
  background-size: 220% 100%;
  animation: categoryMarketSkeletonPulse 1.35s ease-in-out infinite;
}

.categoryMarketSkeletonSummary span {
  min-height: 82px;
  border: 1px solid var(--line-dark);
}

.categoryMarketSkeletonPanel {
  border: 1px solid var(--line-dark);
  background-color: color-mix(in srgb, var(--surface-panel) 88%, transparent);
}

.categoryMarketSkeletonRank {
  min-height: 520px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
}

.categoryMarketSkeletonRank span {
  height: 74px;
}

.categoryMarketSkeletonMatrix {
  min-height: 520px;
}

.categoryMarketSkeletonMatrix i {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 999px;
}

.categoryMarketSkeletonMatrix i:nth-child(1) {
  top: 18%;
  right: 24%;
}

.categoryMarketSkeletonMatrix i:nth-child(2) {
  top: 42%;
  right: 44%;
}

.categoryMarketSkeletonMatrix i:nth-child(3) {
  bottom: 18%;
  left: 26%;
}

.categoryMarketSkeletonDetail {
  min-height: 520px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
}

.categoryMarketSkeletonDetail span {
  min-height: 86px;
}

@keyframes categoryMarketSkeletonPulse {
  0% {
    background-position: 120% 0;
  }

  100% {
    background-position: -120% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .categoryMarketSkeletonSummary span,
  .categoryMarketSkeletonPanel,
  .categoryMarketSkeletonPanel span,
  .categoryMarketSkeletonPanel i {
    animation: none;
  }
}

.categoryMarketDataStateIcon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-canvas));
  color: var(--primary);
}

.categoryMarketControls {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
}

.categoryMarketControlActions {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.categoryMarketFilterGroup {
  position: relative;
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 0;
}

.categoryMarketFilterGroup > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.categoryMarketPanelHeader .categoryMarketFilterGroup > span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: normal;
}

.categoryMarketCategoryFilterGroup {
  min-width: 0;
}

.categoryMarketTimeFilterGroup {
  justify-self: end;
  min-width: max-content;
}

.categoryMarketSegment {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  max-width: 100%;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 84%, transparent);
  padding: 4px;
}

.categoryMarketCategoryPicker {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(142px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-dark);
  border-radius: 0;
  background: color-mix(in srgb, var(--surface-panel) 84%, transparent);
  padding: 4px;
}

.categoryMarketCurrentScopeButton,
.categoryMarketQuickFilters button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}

.categoryMarketCurrentScopeButton {
  min-width: 0;
  justify-content: start;
  gap: 7px;
  background: transparent;
  color: var(--text-1);
  padding: 0 10px;
  text-align: left;
}

.categoryMarketCurrentScopeButton span,
.categoryMarketCurrentScopeButton strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketCurrentScopeButton span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
}

.categoryMarketCurrentScopeButton strong {
  max-width: 112px;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 920;
}

.categoryMarketCurrentScopeButton svg {
  flex: 0 0 auto;
  color: var(--primary);
}

.categoryMarketQuickFilters {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 24px), transparent 100%);
}

.categoryMarketQuickFilters::-webkit-scrollbar {
  display: none;
}

.categoryMarketQuickFilters button {
  flex: 0 0 auto;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 860;
  padding: 0 11px;
}

.categoryMarketQuickFilters button.active {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 20%, transparent);
}

.categoryMarketSegment button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 900;
  padding: 0 12px;
  white-space: nowrap;
}

.categoryMarketSegment.compact button {
  padding-inline: 10px;
}

.categoryMarketSegment button.active {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 24%, transparent);
}

.categoryMarketCategoryPopover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1120;
  display: grid;
  width: min(760px, calc(100vw - 96px));
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--primary-border) 36%, var(--line-dark));
  border-radius: 0;
  background: var(--surface-panel);
  box-shadow: 0 22px 48px color-mix(in srgb, #020617 18%, transparent);
  padding: 8px;
}

.categoryMarketCategoryPopover header {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 6px;
}

.categoryMarketCategoryPopover header strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 920;
}

.categoryMarketCategoryPopover header span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.categoryMarketCategoryPopover button {
  min-width: 0;
  min-height: 34px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 0;
  background: color-mix(in srgb, var(--surface-canvas) 68%, transparent);
  color: var(--text-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketCategoryPopover button.active {
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 22%, transparent);
}

.categoryMarketSummary {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.categoryMarketMetric {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--metric-color) 12%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface-panel) 88%, transparent);
  padding: 14px;
}

.categoryMarketMetric.tone-purple {
  --metric-color: #7c3aed;
}

.categoryMarketMetric.tone-green {
  --metric-color: #10b981;
}

.categoryMarketMetric.tone-cyan {
  --metric-color: #06b6d4;
}

.categoryMarketMetric.tone-amber {
  --metric-color: #f59e0b;
}

.categoryMarketMetric > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--metric-color) 16%, var(--surface-panel));
  color: var(--metric-color);
}

.categoryMarketMetric div {
  min-width: 0;
}

.categoryMarketMetric p,
.categoryMarketMetric em {
  margin: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketMetric strong {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--text-1);
  font-size: 24px;
  font-weight: 960;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketTabs {
  width: fit-content;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--primary-border) 22%, var(--line-dark));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-panel) 88%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 32%, transparent);
  padding: 4px;
}

.categoryMarketTabs button {
  min-height: 36px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
  font-weight: 940;
  padding: 0 20px;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.categoryMarketTabs button.active {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 24%, transparent);
}

.categoryMarketGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(360px, 0.72fr);
  align-items: start;
  gap: 16px;
}

.categoryMarketInsightLayout {
  grid-template-columns: minmax(520px, 1fr) minmax(420px, 0.56fr);
}

.categoryMarketPage.isInsight .categoryMarketInsightLayout {
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(620px, 1fr) minmax(500px, 0.56fr);
  align-items: stretch;
}

.categoryMarketMainColumn,
.categoryMarketSideColumn {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 16px;
}

.categoryMarketInsightRail {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 142px);
  overflow-y: auto;
  overflow-anchor: none;
  padding-right: 4px;
}

.categoryMarketPage.isInsight .categoryMarketMainColumn,
.categoryMarketPage.isInsight .categoryMarketSideColumn,
.categoryMarketPage.isInsight .categoryMarketOpportunityPanel,
.categoryMarketPage.isInsight .categoryMarketOpportunityBoard {
  min-height: 0;
  height: 100%;
  align-content: stretch;
}

.categoryMarketPage.isInsight .categoryMarketOpportunityPanel {
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.categoryMarketPage.isInsight .categoryMarketOperationStrip {
  align-self: end;
}

.categoryMarketPage.isInsight .categoryMarketInsightRail {
  position: static;
  top: auto;
  max-height: none;
  height: 100%;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-gutter: stable;
}

.categoryMarketPanel {
  min-width: 0;
  display: grid;
  gap: 14px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-panel-hover) 64%, transparent), transparent),
    color-mix(in srgb, var(--surface-panel) 88%, transparent);
  box-shadow: 0 18px 46px color-mix(in srgb, #020617 12%, transparent);
  padding: 16px;
}

.categoryMarketPanelHeader {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.categoryMarketPanelHeader > div:first-child {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.categoryMarketPanelHeader > div:first-child > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-panel));
  color: var(--primary-light);
}

.categoryMarketPanelHeader strong {
  display: block;
  overflow: hidden;
  color: var(--text-1);
  font-size: 16px;
  font-weight: 960;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketPanelHeader p {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketPanelAction {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.categoryMarketPanelAction a {
  color: var(--primary-light);
  text-decoration: none;
}

.categoryMarketPanelAction button {
  min-height: 28px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-panel-hover) 72%, transparent);
  color: var(--primary-light);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0 10px;
}

.categoryMarketPanelAction button:hover {
  border-color: color-mix(in srgb, var(--primary-border) 48%, var(--line-dark));
  background: color-mix(in srgb, var(--primary-active-bg) 18%, var(--surface-panel-hover));
}

.categoryMarketOpportunityPanel {
  gap: 14px;
}

.categoryMarketOpportunityBoard {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(270px, 0.34fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

.categoryMarketPage.isInsight .categoryMarketOpportunityBoard {
  grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
  min-height: 0;
}

.categoryMarketRankPane,
.categoryMarketMatrixPane {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
}

.categoryMarketRankPane {
  min-height: 0;
}

.categoryMarketPage.isInsight .categoryMarketRankPane {
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
}

.categoryMarketPage.isInsight .categoryMarketMatrixPane {
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
}

.categoryMarketPaneTitle {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.categoryMarketPaneTitle strong,
.categoryMarketPaneTitle a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketPaneTitle strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 950;
}

.categoryMarketPaneTitle a {
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.categoryMarketRankPane .categoryMarketOpportunityList {
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}

.categoryMarketPage.isInsight .categoryMarketRankPane .categoryMarketOpportunityList {
  height: 100%;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.categoryMarketMatrixPane .categoryMarketMatrix {
  height: 520px;
}

.categoryMarketPage.isInsight .categoryMarketMatrixPane .categoryMarketMatrix {
  height: 100%;
  min-height: 0;
}

.categoryMarketMatrix {
  position: relative;
  height: 360px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    conic-gradient(
      from 0deg at 50% 50%,
      color-mix(in srgb, #10b981 2.8%, transparent) 0deg 90deg,
      color-mix(in srgb, #0ea5e9 1.6%, transparent) 90deg 180deg,
      color-mix(in srgb, #64748b 1.2%, transparent) 180deg 270deg,
      color-mix(in srgb, #f59e0b 1.8%, transparent) 270deg 360deg
    ),
    color-mix(in srgb, var(--surface-panel-hover) 56%, var(--surface-panel));
  cursor: pointer;
  padding: 8px 10px 4px;
}

.categoryMarketMatrix::before,
.categoryMarketMatrix::after {
  content: none;
}

.categoryMarketMatrixQuadrant {
  position: absolute;
  z-index: 2;
  color: color-mix(in srgb, var(--text-3) 72%, transparent);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  transform: translateX(-50%);
  pointer-events: none;
}

.categoryMarketMatrixQuadrant--priority {
  top: 14px;
  left: 75%;
  color: color-mix(in srgb, var(--success) 78%, var(--text-3));
}

.categoryMarketMatrixQuadrant--attack {
  top: 14px;
  left: 25%;
}

.categoryMarketMatrixQuadrant--efficiency {
  left: 75%;
  bottom: 42px;
}

.categoryMarketMatrixQuadrant--watch {
  left: 25%;
  bottom: 42px;
}

.categoryMarketMatrixAxis {
  position: absolute;
  z-index: 2;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.categoryMarketMatrixAxis--top {
  top: 14px;
  left: 16px;
}

.categoryMarketMatrixAxis--bottom {
  bottom: 42px;
  left: 16px;
}

.categoryMarketMatrixAxis--left {
  bottom: 14px;
  left: 58px;
}

.categoryMarketMatrixAxis--right {
  right: 16px;
  bottom: 14px;
}

.categoryMarketMatrixScale {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 12px;
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  color: color-mix(in srgb, var(--text-3) 78%, transparent);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  transform: translateX(-50%);
  pointer-events: none;
}

.categoryMarketMatrixScale i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, #73bbb4 72%, transparent);
}

.categoryMarketMatrixScale i:nth-child(2) {
  width: 8px;
  height: 8px;
}

.categoryMarketMatrixScale i:nth-child(3) {
  width: 11px;
  height: 11px;
  margin-right: 3px;
}

.categoryMarketMatrixChart {
  height: 100%;
}

.categoryMarketDecisionGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.categoryMarketDecisionCard,
.categoryMarketChannelStack span {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 58%, transparent);
}

.categoryMarketDecisionCard {
  display: grid;
  gap: 7px;
  padding: 12px;
}

.categoryMarketDecisionCard > span,
.categoryMarketDecisionCard strong,
.categoryMarketDecisionCard p,
.categoryMarketChannelStack strong,
.categoryMarketChannelStack em {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  letter-spacing: 0;
  text-overflow: ellipsis;
}

.categoryMarketDecisionCard > span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.categoryMarketDecisionCard strong {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 950;
  white-space: nowrap;
}

.categoryMarketDecisionCard p {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.55;
}

.categoryMarketChannelStack {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.categoryMarketChannelStack.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.categoryMarketChannelStack span {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
}

.categoryMarketChannelStack b {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--segment-color);
}

.categoryMarketChannelStack strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 920;
  white-space: nowrap;
}

.categoryMarketChannelStack em {
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 920;
  white-space: nowrap;
}

.categoryMarketOperationStrip {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.categoryMarketOperationStrip article {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 6%, transparent), transparent 52%),
    color-mix(in srgb, var(--surface-panel-hover) 58%, transparent);
  padding: 6px 8px;
}

.categoryMarketOperationStrip img,
.categoryMarketOperationIcon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--surface-panel);
}

.categoryMarketOperationStrip img {
  display: block;
  object-fit: cover;
}

.categoryMarketOperationIcon {
  display: grid;
  place-items: center;
  color: var(--primary-light);
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-panel));
}

.categoryMarketOperationStrip div {
  min-width: 0;
}

.categoryMarketOperationStrip span,
.categoryMarketOperationStrip strong,
.categoryMarketOperationStrip p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketOperationStrip span {
  display: block;
  color: var(--primary-light);
  font-size: 10px;
  font-weight: 900;
}

.categoryMarketOperationStrip strong {
  display: block;
  margin-top: 2px;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 950;
}

.categoryMarketOperationStrip p {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 780;
}

.categoryMarketDetailPanel {
  gap: 16px;
}

.categoryMarketDetailHero {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 30%, transparent);
  padding: 2px 0;
}

.categoryMarketDetailHero > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.categoryMarketDetailHero strong,
.categoryMarketDetailHero p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.categoryMarketDetailHero strong {
  color: var(--text-1);
  font-size: 16px;
  font-weight: 960;
  white-space: nowrap;
}

.categoryMarketDetailHero p {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.4;
  white-space: nowrap;
}

.categoryMarketCommerceHero {
  min-width: 0;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary-border) 36%, var(--line-dark));
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 20%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-panel-hover) 58%, transparent);
  padding: 10px;
}

.categoryMarketCommerceHero figure {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  margin: 0;
  border-radius: 8px;
  background: var(--surface-panel);
}

.categoryMarketCommerceHero img,
.categoryMarketProductCard img,
.categoryMarketMediaCard img,
.categoryMarketCreatorProfileCard img,
.categoryMarketCreatorVideoCard img,
.categoryMarketShelfProduct img,
.categoryMarketShelfVideos img,
.categoryMarketActionProductPreview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.categoryMarketCommerceHero figcaption {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.74);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketCommerceHero > div {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 6px;
}

.categoryMarketCommerceHero span,
.categoryMarketCommerceHero strong,
.categoryMarketCommerceHero p,
.categoryMarketCommerceStats b,
.categoryMarketCommerceStats em {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketCommerceHero span {
  color: var(--primary-light);
  font-size: 11px;
  font-weight: 920;
}

.categoryMarketCommerceHero strong {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 960;
}

.categoryMarketCommerceHero p {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
}

.categoryMarketCommerceStats {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(44px, 0.6fr) minmax(0, 0.8fr) minmax(64px, 0.8fr);
  align-items: center;
  gap: 5px;
}

.categoryMarketCommerceStats b {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

.categoryMarketCommerceStats em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
}

.categoryMarketDetailMetrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.categoryMarketDetailBlock {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.categoryMarketDetailBlock h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 950;
}

.categoryMarketBlockTitle {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.categoryMarketBlockTitle h3,
.categoryMarketBlockTitle span,
.categoryMarketBlockTitle a {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketBlockTitle h3 {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 950;
}

.categoryMarketBlockTitle span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary-light);
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
}

.categoryMarketBlockTitle a {
  flex: 0 0 auto;
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.categoryMarketBlockTitle a:hover {
  color: var(--primary);
}

.categoryMarketMoveList,
.categoryMarketSampleGrid,
.categoryMarketMiniList,
.categoryMarketEvidenceGrid,
.categoryMarketDataTable,
.categoryMarketPriceBandList,
.categoryMarketPriceBandGrid,
.categoryMarketDetailChart,
.categoryMarketCreatorTierMini,
.categoryMarketCreatorTierTable {
  min-width: 0;
}

.categoryMarketMoveList {
  display: grid;
  gap: 8px;
}

.categoryMarketMoveList article {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 58%, transparent);
  padding: 10px;
}

.categoryMarketMoveList article > b {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-panel));
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 950;
}

.categoryMarketMoveList article > div,
.categoryMarketMiniList article > div {
  min-width: 0;
}

.categoryMarketMoveList strong,
.categoryMarketMoveList p,
.categoryMarketMoveList em,
.categoryMarketEvidenceGrid span,
.categoryMarketEvidenceGrid strong,
.categoryMarketEvidenceGrid p,
.categoryMarketMiniList strong,
.categoryMarketMiniList p,
.categoryMarketMiniList em {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.categoryMarketMoveList strong,
.categoryMarketEvidenceGrid strong,
.categoryMarketMiniList strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 930;
  white-space: nowrap;
}

.categoryMarketMoveList p,
.categoryMarketEvidenceGrid p,
.categoryMarketMiniList p {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
}

.categoryMarketMoveList em {
  grid-column: 2;
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 820;
  white-space: nowrap;
}

.categoryMarketEvidenceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.categoryMarketEvidenceGrid article {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 58%, transparent);
  padding: 10px;
}

.categoryMarketEvidenceGrid span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.categoryMarketSampleGrid {
  display: grid;
  gap: 8px;
}

.categoryMarketProductCardGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.categoryMarketProductCardGrid.compact {
  grid-template-columns: 1fr;
  gap: 8px;
}

.categoryMarketProductCard {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(92px, 1fr) auto auto;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 56%, transparent);
  padding: 8px;
}

.categoryMarketProductCardGrid.compact .categoryMarketProductCard {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
}

.categoryMarketProductCard > img {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-panel);
}

.categoryMarketProductCardGrid.compact .categoryMarketProductCard > img {
  width: 58px;
  height: 58px;
}

.categoryMarketProductCard > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.categoryMarketProductCard span,
.categoryMarketProductCard strong,
.categoryMarketProductCard p,
.categoryMarketProductCard em {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketProductCard span {
  color: var(--primary-light);
  font-size: 11px;
  font-weight: 900;
}

.categoryMarketProductCard strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 940;
}

.categoryMarketProductCard p {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 780;
}

.categoryMarketProductCard em {
  justify-self: start;
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 13%, transparent);
  color: var(--success);
  font-size: 11px;
  font-style: normal;
  font-weight: 930;
  padding: 4px 7px;
}

.categoryMarketProductCard em.down {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.categoryMarketProductCardGrid.compact .categoryMarketProductCard em {
  justify-self: end;
}

.categoryMarketMediaGrid,
.categoryMarketMediaCarousel,
.categoryMarketMediaTrack,
.categoryMarketMediaPage {
  min-width: 0;
}

.categoryMarketMediaCarousel {
  overflow: hidden;
  overflow-anchor: none;
}

.categoryMarketMediaTrack {
  display: flex;
  align-items: stretch;
  transition: transform 520ms cubic-bezier(0.2, 0.82, 0.2, 1);
  will-change: transform;
}

.categoryMarketMediaPage {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.categoryMarketMediaCard {
  min-width: 0;
  display: grid;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 54%, transparent);
  padding: 8px;
}

.categoryMarketCarouselDots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: 8px;
}

.categoryMarketCarouselDots button {
  width: 18px;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-3) 24%, transparent);
  cursor: pointer;
  padding: 0;
  transition:
    width 180ms ease,
    background-color 180ms ease;
}

.categoryMarketCarouselDots button.isActive {
  width: 28px;
  background: var(--primary);
}

.categoryMarketMediaCard figure {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  border-radius: 8px;
  background: var(--surface-panel);
}

.categoryMarketMediaCard figcaption {
  position: absolute;
  left: 6px;
  bottom: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 7px;
}

.categoryMarketMediaCard div {
  min-width: 0;
}

.categoryMarketMediaCard strong,
.categoryMarketMediaCard p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketMediaCard strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 930;
}

.categoryMarketMediaCard p {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 760;
}

.categoryMarketCreatorVideoCarousel {
  display: grid;
  gap: 8px;
  overflow-anchor: none;
}

.categoryMarketCreatorVideoPage {
  grid-template-columns: minmax(126px, 0.3fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.categoryMarketCreatorProfileCard,
.categoryMarketCreatorVideoCard,
.categoryMarketCreatorLiveCard {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 54%, transparent);
}

.categoryMarketCreatorProfileCard {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 8px;
}

.categoryMarketCreatorProfileCard figure,
.categoryMarketCreatorVideoCard figure {
  position: relative;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border-radius: 8px;
  background: var(--surface-panel);
}

.categoryMarketCreatorProfileCard figure {
  aspect-ratio: 1;
}

.categoryMarketCreatorProfileCard figcaption,
.categoryMarketCreatorVideoCard figcaption {
  position: absolute;
  left: 6px;
  bottom: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.74);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 7px;
}

.categoryMarketCreatorProfileCard > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.categoryMarketCreatorProfileCard span,
.categoryMarketCreatorProfileCard strong,
.categoryMarketCreatorProfileCard p,
.categoryMarketCreatorProfileCard dt,
.categoryMarketCreatorProfileCard dd,
.categoryMarketCreatorVideoCard strong,
.categoryMarketCreatorVideoCard p,
.categoryMarketCreatorLiveCard span,
.categoryMarketCreatorLiveCard strong,
.categoryMarketCreatorLiveCard p,
.categoryMarketCreatorLiveCard em {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.categoryMarketCreatorProfileCard span {
  color: var(--primary-light);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.categoryMarketCreatorProfileCard strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.categoryMarketCreatorProfileCard p {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 780;
  white-space: nowrap;
}

.categoryMarketCreatorProfileCard dl {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.categoryMarketCreatorProfileCard dl div {
  min-width: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 70%, transparent);
  padding: 7px;
}

.categoryMarketCreatorProfileCard dt {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.categoryMarketCreatorProfileCard dd {
  margin-top: 3px;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.categoryMarketCreatorVideoGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.categoryMarketCreatorVideoCard {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px;
}

.categoryMarketCreatorVideoCard figure {
  aspect-ratio: 4 / 5;
}

.categoryMarketCreatorVideoCard > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.categoryMarketCreatorVideoCard strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 930;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.categoryMarketCreatorVideoCard p {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
  white-space: nowrap;
}

.categoryMarketCreatorVideoMeta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.categoryMarketCreatorVideoMeta span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 880;
  line-height: 1;
  padding: 4px 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketCreatorLiveCard {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--danger) 8%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface-panel-hover) 56%, transparent);
  padding: 9px 10px;
}

.categoryMarketCreatorLiveCard span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--danger);
  font-size: 11px;
  font-weight: 930;
  white-space: nowrap;
}

.categoryMarketCreatorLiveCard strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.categoryMarketCreatorLiveCard p,
.categoryMarketCreatorLiveCard em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.4;
  white-space: nowrap;
}

.categoryMarketCreatorLiveCard em {
  color: var(--text-2);
}

.categoryMarketMiniList {
  display: grid;
  gap: 7px;
}

.categoryMarketMiniList article {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 52%, transparent);
  padding: 8px 9px;
}

.categoryMarketMiniList b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--warning) 18%, var(--surface-panel));
  color: var(--warning);
  font-size: 11px;
  font-weight: 950;
}

.categoryMarketMiniList em {
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 930;
  white-space: nowrap;
}

.categoryMarketMiniList em.up {
  color: var(--success);
}

.categoryMarketMiniList em.down {
  color: var(--danger);
}

.categoryMarketDataTable,
.categoryMarketCreatorTierTable {
  display: grid;
  gap: 6px;
}

.categoryMarketDataHead,
.categoryMarketDataRow {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(96px, 1.1fr) repeat(3, minmax(64px, 0.8fr));
  align-items: center;
  gap: 8px;
}

.categoryMarketDataTable.compact .categoryMarketDataRow {
  grid-template-columns: minmax(86px, 1fr) repeat(3, minmax(58px, 0.78fr));
}

.categoryMarketDataHead {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  padding: 0 8px;
}

.categoryMarketDataRow {
  min-height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 54%, transparent);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 820;
  padding: 0 8px;
}

.categoryMarketDataRow strong,
.categoryMarketDataRow span,
.categoryMarketDataRow em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketDataRow strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-1);
  font-weight: 930;
}

.categoryMarketDataRow strong i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--segment-color, var(--primary));
}

.categoryMarketDataRow em {
  font-style: normal;
  font-weight: 930;
}

.categoryMarketDataRow em.up {
  color: var(--success);
}

.categoryMarketDataRow em.down {
  color: var(--danger);
}

.categoryMarketDetailChart {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 40%),
    color-mix(in srgb, var(--surface-panel-hover) 42%, transparent);
  padding: 8px;
}

.categoryMarketChannelViz {
  min-height: 166px;
}

.categoryMarketPriceViz {
  min-height: 196px;
}

.categoryMarketPriceBandList {
  display: grid;
  gap: 7px;
}

.categoryMarketPriceBandGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.categoryMarketPriceBandGrid article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 46%, transparent);
  padding: 8px 9px;
}

.categoryMarketPriceBandGrid strong,
.categoryMarketPriceBandGrid span,
.categoryMarketPriceBandGrid em {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketPriceBandGrid strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 940;
}

.categoryMarketPriceBandGrid span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 820;
}

.categoryMarketPriceBandGrid em {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
  font-size: 11px;
  font-style: normal;
  font-weight: 930;
  padding: 4px 7px;
}

.categoryMarketPriceBandGrid em.down {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
}

.categoryMarketPriceBandList article {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 52%, transparent);
  padding: 8px 9px;
}

.categoryMarketPriceBandList strong,
.categoryMarketPriceBandList em,
.categoryMarketPriceBandList p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketPriceBandList strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 930;
}

.categoryMarketPriceBandList article > span {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-dark) 66%, transparent);
}

.categoryMarketPriceBandList article > span b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.categoryMarketPriceBandList em {
  font-size: 11px;
  font-style: normal;
  font-weight: 930;
  text-align: right;
}

.categoryMarketPriceBandList em.up {
  color: var(--success);
}

.categoryMarketPriceBandList em.down {
  color: var(--warning);
}

.categoryMarketPriceBandList p {
  grid-column: 2 / -1;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 760;
}

.categoryMarketCreatorTierMini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.categoryMarketCreatorTierMini article {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 54%, transparent);
  padding: 10px;
}

.categoryMarketCreatorTierMini strong,
.categoryMarketCreatorTierMini span,
.categoryMarketCreatorTierMini em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketCreatorTierMini strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 930;
}

.categoryMarketCreatorTierMini span {
  color: var(--text-2);
  font-size: 15px;
  font-weight: 950;
}

.categoryMarketCreatorTierMini em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.categoryMarketStrategyPanel {
  gap: 16px;
}

.categoryMarketStrategyGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.categoryMarketStrategyCard {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(78px, 96px) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-panel-hover) 54%, transparent);
  padding: 14px;
}

.categoryMarketStrategyCard .categoryMarketBlockTitle {
  grid-column: 1 / -1;
}

.categoryMarketStrategyCard .categoryMarketDataTable {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.categoryMarketStrategyCard .categoryMarketDataHead,
.categoryMarketStrategyCard .categoryMarketDataRow {
  grid-template-columns: minmax(68px, 1.12fr) minmax(66px, 1fr) minmax(42px, 0.64fr) minmax(44px, 0.72fr);
  gap: 6px;
}

.categoryMarketStrategyCard .categoryMarketDataHead {
  padding: 0 7px;
}

.categoryMarketStrategyCard .categoryMarketDataRow {
  min-height: 34px;
  font-size: 11px;
  padding: 0 7px;
}

.categoryMarketStackViz {
  width: 76px;
  height: 150px;
  justify-self: center;
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: 28px 28px 8px 8px;
  background: color-mix(in srgb, var(--line-dark) 46%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-dark) 80%, transparent);
}

.categoryMarketStackViz span {
  width: 100%;
  height: var(--segment-height);
  display: block;
  background: var(--segment-color);
  opacity: 0.72;
}

.categoryMarketStackViz.affiliate {
  border-radius: 8px 8px 28px 28px;
}

.categoryMarketStage {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stage-color) 14%, transparent);
  color: var(--stage-color);
  font-size: 11px;
  font-weight: 920;
  padding: 0 8px;
}

.categoryMarketStage--blue {
  --stage-color: #06b6d4;
}

.categoryMarketStage--scale {
  --stage-color: #10b981;
}

.categoryMarketStage--watch {
  --stage-color: #f59e0b;
}

.categoryMarketStage--pressure {
  --stage-color: #ef4444;
}

.categoryMarketSubTable {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.categoryMarketSubHead,
.categoryMarketSubRow {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) 100px 84px minmax(130px, 1fr) 110px;
  align-items: center;
  gap: 10px;
}

.categoryMarketSubHead {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  padding: 0 10px;
}

.categoryMarketSubRow {
  min-height: 48px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 58%, transparent);
  color: var(--text-2);
  font: inherit;
  padding: 0 10px;
  text-align: left;
}

.categoryMarketSubRow:hover {
  border-color: color-mix(in srgb, var(--primary-border) 52%, var(--line-dark));
  background: color-mix(in srgb, var(--primary-active-bg) 18%, var(--surface-panel-hover));
}

.categoryMarketSubRow strong,
.categoryMarketSubRow span,
.categoryMarketSubRow em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketSubRow strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 930;
}

.categoryMarketSubRow span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 820;
}

.categoryMarketSubRow .up,
.categoryMarketProductRow .up {
  color: var(--success);
}

.categoryMarketSubRow .down,
.categoryMarketProductRow .down {
  color: #ef4444;
}

.categoryMarketSubRow span:has(i) {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-dark) 68%, transparent);
}

.categoryMarketSubRow i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.categoryMarketSubRow em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.categoryMarketOpportunityList {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
}

.categoryMarketOpportunityItem {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.categoryMarketOpportunityRow {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 58%, transparent);
  color: inherit;
  font: inherit;
  padding: 8px 9px;
  text-align: left;
}

.categoryMarketOpportunityRow:hover,
.categoryMarketOpportunityRow.isActive {
  border-color: color-mix(in srgb, var(--primary-border) 54%, var(--line-dark));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface-panel-hover) 64%, transparent);
}

.categoryMarketOpportunityRow.isActive {
  box-shadow: inset 3px 0 0 var(--primary);
}

.categoryMarketOpportunityRow div {
  min-width: 0;
}

.categoryMarketOpportunityRow > b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning) 18%, var(--surface-panel));
  color: var(--warning);
  font-size: 11px;
  font-weight: 950;
}

.categoryMarketOpportunityRow strong,
.categoryMarketOpportunityRow p,
.categoryMarketOpportunityRow em {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  letter-spacing: 0;
  text-overflow: ellipsis;
}

.categoryMarketOpportunityRow strong {
  display: block;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.categoryMarketOpportunityRow p {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 780;
  white-space: nowrap;
}

.categoryMarketOpportunityRow em {
  grid-column: 2 / -1;
  color: var(--text-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.35;
  white-space: nowrap;
}

.categoryMarketSubcategoryLink {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 0;
  background: transparent;
  color: var(--primary-light);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  padding: 4px 5px 2px;
}

.categoryMarketSubcategoryLink:hover {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.categoryMarketStructureBoard {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.categoryMarketShareBar {
  height: 18px;
  display: flex;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-dark) 60%, transparent);
}

.categoryMarketShareBar span {
  flex: 0 0 var(--segment-width);
  min-width: 16px;
  background: var(--segment-color);
}

.categoryMarketStructureList {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.categoryMarketStructureItem {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 44px minmax(92px, 0.55fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 58%, transparent);
  padding: 11px 12px;
}

.categoryMarketStructureItem.isActive {
  border-color: color-mix(in srgb, var(--primary-border) 56%, var(--line-dark));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface-panel-hover) 64%, transparent);
  box-shadow: inset 3px 0 0 var(--primary);
}

.categoryMarketStructureItem > span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--segment-color);
}

.categoryMarketStructureItem div {
  min-width: 0;
}

.categoryMarketStructureItem strong,
.categoryMarketStructureItem p,
.categoryMarketStructureItem em {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketStructureItem strong {
  display: block;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 930;
}

.categoryMarketStructureItem p {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 760;
}

.categoryMarketStructureItem em {
  color: var(--text-2);
  font-size: 13px;
  font-style: normal;
  font-weight: 930;
  text-align: right;
}

.categoryMarketStructureItem b {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-dark) 66%, transparent);
}

.categoryMarketStructureItem i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.categoryMarketCommerceShelfPanel {
  gap: 16px;
}

.categoryMarketCommerceShelf {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr);
  gap: 12px;
}

.categoryMarketShelfProducts,
.categoryMarketShelfVideos {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.categoryMarketShelfProducts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.categoryMarketShelfProduct {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(118px, 1fr) auto auto;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-panel-hover) 70%, transparent), transparent),
    color-mix(in srgb, var(--surface-panel) 84%, transparent);
  padding: 9px;
}

.categoryMarketShelfProduct > img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-panel);
}

.categoryMarketShelfProduct div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.categoryMarketShelfProduct span,
.categoryMarketShelfProduct strong,
.categoryMarketShelfProduct p,
.categoryMarketShelfProduct em {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketShelfProduct span {
  color: var(--primary-light);
  font-size: 11px;
  font-weight: 900;
}

.categoryMarketShelfProduct strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 940;
}

.categoryMarketShelfProduct p {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 780;
}

.categoryMarketShelfProduct em {
  justify-self: start;
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
  font-size: 11px;
  font-style: normal;
  font-weight: 930;
  padding: 4px 7px;
}

.categoryMarketShelfProduct em.down {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.categoryMarketShelfVideos article {
  min-width: 0;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 56%, transparent);
  padding: 8px;
}

.categoryMarketShelfVideos img {
  display: block;
  width: 74px;
  height: 88px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--surface-panel);
}

.categoryMarketShelfVideos div {
  min-width: 0;
}

.categoryMarketShelfVideos strong,
.categoryMarketShelfVideos p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketShelfVideos strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 940;
}

.categoryMarketShelfVideos p {
  margin-top: 5px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 780;
}

.categoryMarketProductSplit {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 12px;
}

.categoryMarketProductList {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.categoryMarketProductRow {
  min-width: 0;
  min-height: 56px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 72px 72px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 62%, transparent);
  color: inherit;
  font: inherit;
  padding: 8px 10px;
  text-align: left;
}

.categoryMarketProductRow b {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #f59e0b;
  color: #ffffff;
  font-size: 12px;
}

.categoryMarketProductRow div {
  min-width: 0;
}

.categoryMarketProductRow strong,
.categoryMarketProductRow p,
.categoryMarketProductRow span,
.categoryMarketProductRow em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketProductRow strong {
  display: block;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 930;
}

.categoryMarketProductRow p {
  margin: 3px 0 0;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 760;
}

.categoryMarketProductRow span,
.categoryMarketProductRow em {
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.categoryMarketActionCard {
  min-width: 0;
  display: grid;
  align-content: space-between;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--primary-border) 44%, var(--line-dark));
  border-radius: 8px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 18%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface-panel-hover) 72%, transparent);
  padding: 14px;
}

.categoryMarketActionCard > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 920;
}

.categoryMarketActionCard h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 16px;
  font-weight: 930;
  line-height: 1.5;
}

.categoryMarketActionProductPreview {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 58%, transparent);
  padding: 8px;
}

.categoryMarketActionProductPreview img {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: var(--surface-panel);
}

.categoryMarketActionProductPreview figcaption {
  min-width: 0;
}

.categoryMarketActionProductPreview strong,
.categoryMarketActionProductPreview p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketActionProductPreview strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 930;
}

.categoryMarketActionProductPreview p {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 760;
}

.categoryMarketActionCard div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.categoryMarketActionCard a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-1);
  font-size: 12px;
  font-weight: 900;
  padding: 0 10px;
  text-decoration: none;
}

.categoryMarketPriceNotes {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.categoryMarketPriceNotes span {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 55%, transparent);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 780;
  padding: 8px;
}

.categoryMarketPriceNotes b {
  display: block;
  color: var(--text-1);
  font-size: 12px;
  margin-bottom: 3px;
}

.categoryMarketChannelBar {
  height: 16px;
  display: flex;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-panel-hover);
}

.categoryMarketChannelBar span {
  flex: 0 0 var(--segment-width);
  background: var(--segment-color);
}

.categoryMarketCreatorList,
.categoryMarketLiveList {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.categoryMarketCreatorList article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 34px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 58%, transparent);
  padding: 10px;
}

.categoryMarketCreatorList strong,
.categoryMarketCreatorList p,
.categoryMarketCreatorList span,
.categoryMarketLiveList strong,
.categoryMarketLiveList p,
.categoryMarketLiveList span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketCreatorList strong,
.categoryMarketLiveList strong {
  display: block;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 930;
}

.categoryMarketCreatorList p,
.categoryMarketLiveList p {
  margin: 3px 0 0;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 760;
}

.categoryMarketCreatorList span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
}

.categoryMarketCreatorList em {
  width: 34px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
  font-size: 12px;
  font-style: normal;
  font-weight: 930;
}

.categoryMarketLiveList article {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 58%, transparent);
  padding: 10px;
}

.categoryMarketLiveList span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 820;
}

.categoryMarketSignalStrip {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.categoryMarketSignalStrip span {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 58%, transparent);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 780;
  padding: 10px;
}

.categoryMarketSignalStrip b {
  display: block;
  overflow: hidden;
  color: var(--text-1);
  font-size: 16px;
  font-weight: 940;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketSignalList {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.categoryMarketSignalList article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 58%, transparent);
  padding: 10px;
}

.categoryMarketSignalList strong,
.categoryMarketSignalList span,
.categoryMarketSignalList p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  letter-spacing: 0;
  text-overflow: ellipsis;
}

.categoryMarketSignalList strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 930;
  white-space: nowrap;
}

.categoryMarketSignalList span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary-light);
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
  white-space: nowrap;
}

.categoryMarketSignalList p {
  grid-column: 1 / -1;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.55;
}

.categoryMarketActionGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.categoryMarketActionItem {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-panel-hover) 80%, transparent), transparent),
    color-mix(in srgb, var(--surface-panel) 84%, transparent);
  color: inherit;
  padding: 14px;
  text-decoration: none;
}

.categoryMarketActionItem:hover {
  border-color: color-mix(in srgb, var(--primary-border) 52%, var(--line-dark));
  background: color-mix(in srgb, var(--primary-active-bg) 18%, var(--surface-panel-hover));
}

.categoryMarketActionItem > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-panel));
  color: var(--primary-light);
}

.categoryMarketActionItem strong,
.categoryMarketActionItem p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  letter-spacing: 0;
  text-overflow: ellipsis;
}

.categoryMarketActionItem strong {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 940;
  white-space: nowrap;
}

.categoryMarketActionItem p {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.6;
}

.categoryMarketTimeline {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.categoryMarketTimeline article {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 58%, transparent);
  padding: 12px;
}

.categoryMarketTimeline span {
  width: 28px;
  height: 28px;
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 8px;
  background: var(--primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

.categoryMarketTimeline strong,
.categoryMarketTimeline p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  letter-spacing: 0;
  text-overflow: ellipsis;
}

.categoryMarketTimeline strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 930;
  white-space: nowrap;
}

.categoryMarketTimeline p {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.6;
}

@media (max-width: 1280px) {
  .categoryMarketGrid {
    grid-template-columns: 1fr;
  }

  .categoryMarketInsightLayout {
    grid-template-columns: 1fr;
  }

  .categoryMarketSideColumn {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .categoryMarketInsightRail {
    position: static;
    grid-template-columns: 1fr;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .categoryMarketActionGrid,
  .categoryMarketDecisionGrid,
  .categoryMarketStrategyGrid,
  .categoryMarketStructureList,
  .categoryMarketCommerceShelf,
  .categoryMarketOperationStrip,
  .categoryMarketSignalStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .categoryMarketTop {
    grid-template-columns: 1fr;
  }

  .categoryMarketControls {
    grid-template-columns: 1fr;
    justify-content: flex-start;
  }

  .categoryMarketTimeFilterGroup {
    justify-self: start;
  }

  .categoryMarketSummary,
  .categoryMarketSideColumn,
  .categoryMarketProductSplit,
  .categoryMarketCommerceShelf,
  .categoryMarketShelfProducts,
  .categoryMarketProductCardGrid,
  .categoryMarketOperationStrip,
  .categoryMarketActionGrid,
  .categoryMarketDecisionGrid,
  .categoryMarketDetailMetrics,
  .categoryMarketEvidenceGrid,
  .categoryMarketMediaGrid,
  .categoryMarketCreatorVideoPage,
  .categoryMarketCreatorVideoGrid,
  .categoryMarketStrategyGrid,
  .categoryMarketStrategyCard,
  .categoryMarketOpportunityBoard,
  .categoryMarketChannelStack.compact,
  .categoryMarketStructureList,
  .categoryMarketSignalStrip {
    grid-template-columns: 1fr;
  }

  .categoryMarketStackViz {
    width: 100%;
    height: 64px;
    display: flex;
    flex-direction: row;
    border-radius: 8px;
  }

  .categoryMarketStackViz span {
    width: var(--segment-height);
    height: 100%;
  }

  .categoryMarketCreatorTierMini {
    grid-template-columns: 1fr;
  }

  .categoryMarketOpportunityRow {
    grid-template-columns: 1fr;
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/compat/web-tail/web-tail-001.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Ordered read-only compatibility shard 001. Do not edit. */

/* Legacy web CSS after the workbench/category-market split. Do not add new module styles here. */

/* Final sidebar layout guard: keep hierarchy stable across rail and expanded modes. */

.appShell {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.appSidebar {
  width: 100%;
  min-width: 0;
  height: 100dvh;
  min-height: 0;
  max-width: 100%;
  max-height: 100dvh;
  align-self: stretch;
}

.appSidebar > * {
  min-width: 0;
  max-width: 100%;
}

.workspaceSwitcher {
  min-width: 0;
  overflow: hidden;
}

.workspaceSwitcherTeam,
.workspaceSwitcher em,
.workspaceSwitcher small {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.workspaceSwitcher .cuiStatusBadge {
  max-width: 100%;
}

.sidebarBottom {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.sidebarBottom > div {
  min-width: 0;
}

.sidebarBottom strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebarBottom .cuiStatusBadge,
.sidebarBottom .statusPill {
  max-width: 96px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appMain {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.appContent {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.sidebarNav {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow-x: hidden;
  padding: 6px 2px 12px;
  scrollbar-gutter: stable;
}

.navSection {
  min-width: 0;
  gap: 6px;
  margin-bottom: 0;
}

.navGroup {
  min-width: 0;
}

.navSection + .navSection {
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--line-dark) 70%, transparent);
}

.navSectionLabel {
  padding: 2px 10px 6px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}

.navSectionToggle {
  min-height: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  justify-content: normal;
  justify-items: stretch;
  border-radius: 6px;
  padding: 2px 8px 4px;
  color: var(--text-3);
  text-align: left;
}

.navSectionToggle span,
.navLabel {
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navItem {
  min-height: 40px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  justify-content: normal;
  justify-items: stretch;
  gap: 9px;
  border-radius: 7px;
  padding: 0 10px;
  text-align: left;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.navParent {
  grid-template-columns: 26px minmax(0, 1fr) 18px;
  width: 100%;
}

.navItem.has-active-child {
  border-color: transparent;
  background: transparent;
  color: var(--text-1);
}

.navItem.active {
  border-color: var(--primary-border);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary-glow-strong) 70%, transparent),
    color-mix(in srgb, var(--primary-glow) 20%, transparent)
  );
  box-shadow: inset 3px 0 0 var(--primary-light);
  color: var(--text-1);
}

.navIcon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-panel-hover) 82%, transparent);
  color: var(--text-2);
}

.navItem.active .navIcon,
.navItem.has-active-child .navIcon {
  background: color-mix(in srgb, var(--primary-active-bg) 72%, var(--surface-panel));
  color: var(--primary-light);
}

.navDisclosure {
  justify-self: end;
  width: 18px;
}

.navChildren {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 3px;
  margin: 2px 0 4px 27px;
  padding-left: 13px;
  border-left: 1px solid color-mix(in srgb, var(--line-dark) 85%, transparent);
}

.navChildren::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 5px;
  width: 1px;
  height: calc(100% - 10px);
  background: color-mix(in srgb, var(--primary-border) 38%, transparent);
  opacity: 0;
  transition: opacity 150ms ease;
}

.navItem.has-active-child + .navChildren::before,
.navChildren:has(.navSubItem.active)::before {
  opacity: 1;
}

.navSubItem {
  min-height: 34px;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 6px;
  padding: 0 8px 0 11px;
  color: var(--text-3);
  font-size: 13px;
}

.navSubItem .navLabel {
  font-weight: 760;
}

.navSubItem.active {
  border-color: color-mix(in srgb, var(--primary-border) 55%, transparent);
  background: color-mix(in srgb, var(--primary-active-bg) 68%, transparent);
  box-shadow: inset 3px 0 0 var(--primary-light);
  color: var(--text-1);
}

@media (min-width: 761px) {
  .appShell {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .appShell:has(.appSidebar.is-rail-open) {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .appSidebar,
  .appSidebar.is-rail-open {
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    width: 240px;
    min-width: 0;
    max-width: 240px;
    height: 100dvh;
    max-height: 100dvh;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 14px;
    box-shadow: none;
    padding: 16px 14px;
  }

  .sidebarLogo,
  .appSidebar.is-rail-open .sidebarLogo {
    justify-content: flex-start;
  }

  .sidebarLogo > div:not(.brandMarkCompact),
  .appSidebar.is-rail-open .sidebarLogo > div:not(.brandMarkCompact),
  .navSectionLabel,
  .appSidebar.is-rail-open .navSectionLabel:not(.navSectionToggle),
  .navSectionToggle span,
  .appSidebar.is-rail-open .navSectionToggle span,
  .navItem > span:not(.navIcon),
  .appSidebar.is-rail-open .navItem > span:not(.navIcon) {
    display: block;
  }

  .workspaceSwitcher,
  .appSidebar.is-rail-open .workspaceSwitcher,
  .sidebarNav,
  .appSidebar.is-rail-open .sidebarNav {
    display: grid;
  }

  .sidebarNav,
  .appSidebar.is-rail-open .sidebarNav {
    align-content: start;
    gap: 14px;
    padding: 6px 2px 12px;
  }

  .navSectionToggle,
  .appSidebar.is-rail-open .navSectionToggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    align-items: center;
    justify-content: normal;
    justify-items: stretch;
    min-height: 28px;
    padding: 2px 8px 4px;
    text-align: left;
  }

  .navItem,
  .appSidebar.is-rail-open .navItem {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    justify-content: normal;
    justify-items: stretch;
    min-height: 40px;
    padding: 0 10px;
    text-align: left;
  }

  .navParent,
  .appSidebar.is-rail-open .navParent {
    grid-template-columns: 26px minmax(0, 1fr) 18px;
  }

  .navChildren,
  .appSidebar.is-rail-open .navChildren {
    display: grid;
    margin: 2px 0 4px 27px;
    padding-left: 13px;
    border-left: 1px solid color-mix(in srgb, var(--line-dark) 85%, transparent);
  }

  .navSubItem,
  .appSidebar.is-rail-open .navSubItem {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 34px;
    padding: 0 8px 0 11px;
  }

  .navIcon,
  .appSidebar:not(.is-rail-open) .navIcon {
    width: 24px;
    height: 24px;
  }

  .navBadge,
  .appSidebar.is-rail-open .navBadge {
    position: static;
    min-height: 22px;
    padding: 0 7px;
    font-size: 11px;
  }

  .navStage,
  .appSidebar.is-rail-open .navStage {
    display: inline-flex;
  }

  .sidebarBottom,
  .appSidebar.is-rail-open .sidebarBottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (max-width: 760px) {
  .appShell:has(.appSidebar.is-rail-open) {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .appSidebar.is-rail-open {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1450;
    width: min(300px, calc(100vw - 20px));
    height: 100dvh;
    max-height: 100dvh;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    box-shadow: 22px 0 56px rgba(15, 23, 42, 0.18);
  }

  .appSidebar:not(.is-rail-open) .sidebarNav {
    gap: 8px;
    padding: 2px 0 10px;
  }

  .appSidebar:not(.is-rail-open) .navSection {
    gap: 6px;
  }

  .appSidebar:not(.is-rail-open) .navSection + .navSection {
    padding-top: 8px;
  }

  .appSidebar:not(.is-rail-open) .navSectionToggle,
  .appSidebar:not(.is-rail-open) .navSectionLabel:not(.navSectionToggle),
  .appSidebar:not(.is-rail-open) .navChildren {
    display: none;
  }

  .appSidebar:not(.is-rail-open) .navItem {
    grid-template-columns: 1fr;
    justify-items: start;
    min-height: 40px;
    padding: 0 10px;
  }

  .appSidebar:not(.is-rail-open) .navIcon {
    width: 28px;
    height: 28px;
  }

  .appSidebar.is-rail-open .sidebarNav {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 6px 2px 12px;
  }

  .appSidebar.is-rail-open .navSectionLabel:not(.navSectionToggle) {
    display: block;
    text-align: left;
  }

  .appSidebar.is-rail-open .navSectionToggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    align-items: center;
    justify-content: normal;
    justify-items: stretch;
    min-height: 28px;
    padding: 2px 8px 4px;
    text-align: left;
  }

  .appSidebar.is-rail-open .navItem {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    justify-content: normal;
    justify-items: stretch;
    min-height: 40px;
    padding: 0 10px;
    text-align: left;
  }

  .appSidebar.is-rail-open .navParent {
    grid-template-columns: 26px minmax(0, 1fr) 18px;
  }

  .appSidebar.is-rail-open .navSubItem {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 34px;
    padding: 0 8px 0 11px;
  }

  .appSidebar.is-rail-open .navChildren {
    margin: 2px 0 4px 27px;
    padding-left: 13px;
    border-left: 1px solid color-mix(in srgb, var(--line-dark) 85%, transparent);
  }

  .appSidebar.is-rail-open .navSectionToggle span,
  .appSidebar.is-rail-open .navItem > span:not(.navIcon) {
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 1080px) {
  .teamHubHero {
    flex-direction: column;
  }

  .teamHubHeroContext {
    width: auto;
  }

  .teamHubMetricGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teamHubLayout {
    grid-template-columns: 1fr;
  }

  .teamHubMemberList {
    overflow-x: auto;
  }

  .teamHubMemberRow {
    min-width: 860px;
  }
}

@media (max-width: 720px) {
  .teamHubPage {
    min-width: 0;
  }

  .teamHubMetricGrid {
    grid-template-columns: 1fr;
  }

  .teamHubMetric {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .teamHubPanelHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .teamHubToolbar {
    width: 100%;
  }

  .teamHubToolbar button {
    flex: 1 1 150px;
  }

  .teamHubMemberList {
    overflow: visible;
  }

  .teamHubMemberRow {
    min-width: 0;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .teamHubMemberRow.head {
    display: none;
  }

  .teamHubRowActions {
    justify-content: flex-start;
  }

  .teamHubInviteCode,
  .teamHubInvitationItem,
  .teamHubTimeline article {
    grid-template-columns: 1fr;
  }

  .teamHubInviteCode strong,
  .teamHubInviteCode button,
  .teamHubInvitationActions {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
  }

  .teamHubTimelineDot {
    display: none;
  }
}

/* Team center reference layout */

.teamHubPage {
  --team-card-bg: color-mix(in srgb, var(--surface-panel-hover) 94%, white 6%);
  --team-soft-bg: color-mix(in srgb, var(--surface-panel) 80%, white 20%);
  --team-line: color-mix(in srgb, var(--line-dark) 72%, transparent);
  --team-blue: #2563eb;
  --team-cyan: #0891b2;
  --team-purple: #6d28d9;
  --team-green: #059669;
  --team-amber: #d97706;
  min-width: 0;
  display: grid;
  gap: 16px;
  color: var(--text-1);
}

.teamHubPageHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0 8px;
}

.teamHubPageHeader h1 {
  margin: 6px 0 4px;
  color: var(--text-1);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0;
}

.teamHubPageHeader p,
.teamHubSummaryIdentity p,
.teamHubCardLead {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}

.teamHubEyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid rgba(8, 145, 178, 0.24);
  border-radius: 999px;
  background: rgba(8, 145, 178, 0.08);
  color: var(--team-cyan);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.teamHubPrimaryButton,
.teamHubSecondaryButton,
.teamHubIconButton,
.teamHubLinkButton,
.teamHubDangerLink,
.teamHubTabs button,
.teamHubInviteTabs button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.teamHubPrimaryButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: color-mix(in srgb, var(--team-purple) 26%, transparent);
  background: linear-gradient(135deg, #6d3ef2, #0ea5c6);
  color: white;
  padding: 0 16px;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.16);
}

.teamHubPrimaryButton.full {
  width: 100%;
}

.teamHubSecondaryButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: var(--team-line);
  background: var(--team-soft-bg);
  color: var(--team-blue);
  padding: 0 12px;
}

.teamHubPrimaryButton:disabled,
.teamHubSecondaryButton:disabled,
.teamHubIconButton:disabled,
.teamHubLinkButton:disabled,
.teamHubDangerLink:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.teamHubSummaryCard,
.teamHubCard {
  min-width: 0;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background: var(--team-card-bg);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.teamHubSummaryCard {
  display: grid;
  grid-template-columns: minmax(320px, 1.45fr) repeat(3, minmax(150px, 0.55fr));
  align-items: center;
  gap: 0;
  padding: 22px;
}

.teamHubSummaryIdentity {
  min-width: 0;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.teamHubTeamLogo {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6d28d9, #0891b2);
  color: white;
  font-size: 25px;
  font-weight: 950;
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.16);
}

.teamHubSummaryTitle {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.teamHubSummaryTitle h2 {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamHubSummaryTitle span {
  flex: 0 0 auto;
  border: 1px solid rgba(5, 150, 105, 0.22);
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--team-green);
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 900;
}

.teamHubSummaryMetric {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 6px;
  border-left: 1px solid var(--team-line);
  padding-left: 24px;
}

.teamHubSummaryMetric span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.teamHubSummaryMetric strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-1);
  font-size: 15px;
}

.teamHubMetricHint {
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.45;
}

.teamHubPage.cuiResourcePage {
  gap: 18px;
}

.teamHubPage .cuiResourceHeader {
  align-items: center;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(153, 246, 228, 0.45), rgba(239, 246, 255, 0.88) 58%, rgba(255, 255, 255, 0.96));
  padding: 22px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.teamHubPage .cuiResourceEyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid rgba(8, 145, 178, 0.24);
  border-radius: 999px;
  background: rgba(8, 145, 178, 0.08);
  color: var(--team-cyan);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.teamHubPage .cuiResourceTitle {
  color: var(--text-1);
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 0;
}

.teamHubPage .cuiResourceDescription {
  max-width: 720px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}

.teamHubResourceMeta {
  min-width: 0;
  display: inline-grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.teamHubResourceMeta > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.teamHubResourceMeta strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 950;
}

.teamHubResourceMeta small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamHubResourceMeta .teamHubTeamLogo {
  width: 52px;
  height: 52px;
  font-size: 20px;
}

.teamHubMetricGrid.cuiMetricGrid {
  gap: 14px;
}

.teamHubMetricGrid .cuiMetricCard {
  border-color: var(--team-line);
  border-radius: 8px;
  background: var(--team-card-bg);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.teamHubMetricGrid .cuiMetricCardIcon {
  border-radius: 8px;
  background: rgba(8, 145, 178, 0.08);
  color: var(--team-cyan);
}

.teamHubFeedback {
  margin: 0;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background: var(--team-soft-bg);
  padding: 10px 12px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 900;
}

.teamHubFeedback.success {
  border-color: rgba(5, 150, 105, 0.22);
  color: var(--team-green);
}

.teamHubFeedback.error {
  border-color: rgba(220, 38, 38, 0.26);
  color: var(--danger);
}

.teamHubFeedbackClose {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: currentColor;
  cursor: pointer;
}

.teamHubFeedbackClose:hover,
.teamHubFeedbackClose:focus-visible {
  border-color: color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
  outline: 0;
}

.teamHubMainGrid,
.teamHubBottomGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  align-items: start;
  gap: 16px;
}

.teamHubBottomGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.teamHubCard {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
}

.teamHubCard.cuiPanel {
  gap: 14px;
}

.teamHubCard .cuiPanelHeader {
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.teamHubCard .cuiPanelTitle {
  margin: 0;
  color: var(--text-1);
  font-size: 16px;
  line-height: 1.25;
}

.teamHubCard .cuiPanelBody {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.teamHubCard .cuiToolbar {
  flex-wrap: wrap;
  gap: 8px;
}

.teamHubPanelTitle {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.teamHubMembersCard {
  overflow: hidden;
}

.teamHubSideColumn {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.teamHubCardHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.teamHubCardHeader > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.teamHubCardHeader h2 {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--text-1);
  font-size: 16px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamHubCardIcon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(8, 145, 178, 0.2);
  border-radius: 8px;
  background: rgba(8, 145, 178, 0.08);
  color: var(--team-cyan);
}

.teamHubCardIcon.purple {
  border-color: rgba(109, 40, 217, 0.2);
  background: rgba(109, 40, 217, 0.08);
  color: var(--team-purple);
}

.teamHubTableToolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  align-items: center;
  gap: 12px;
}

.teamHubTabs,
.teamHubInviteTabs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.teamHubTabs.cuiSegmented,
.teamHubInviteTabs.cuiSegmented {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.teamHubTabs button,
.teamHubInviteTabs button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: var(--team-line);
  background: var(--team-soft-bg);
  color: var(--text-2);
  padding: 0 12px;
  white-space: nowrap;
}

.teamHubTabs button.active,
.teamHubInviteTabs button.active,
.teamHubTabs .cuiSegmentedButton[aria-pressed='true'],
.teamHubInviteTabs .cuiSegmentedButton[aria-pressed='true'] {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(37, 99, 235, 0.09);
  color: var(--team-blue);
}

.teamHubTabs .teamHubSegmentBadge {
  min-width: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--team-blue) 10%, transparent);
  color: inherit;
  padding: 1px 6px;
  font-size: 11px;
}

.teamHubSearch {
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-3);
  padding: 0 12px;
}

.teamHubSearch input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
}

.teamHubInviteCard {
  gap: 12px;
}

.teamHubInviteTabs {
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background: var(--team-soft-bg);
  padding: 4px;
}

.teamHubInviteTabs button {
  flex: 1 1;
  min-width: max-content;
  border-color: transparent;
  background: transparent;
  color: var(--text-3);
}

.teamHubInviteTabs button.active {
  border-color: var(--team-line);
  background: var(--surface-panel);
  color: var(--team-blue);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.teamHubInviteTabs .cuiSegmentedButton[aria-pressed='true'] {
  border-color: var(--team-line);
  background: var(--surface-panel);
  color: var(--team-blue);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.teamHubInviteForm {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.teamHubInlineFields {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, 0.42fr);
  gap: 10px;
}

.teamHubInlineFields.compact {
  grid-template-columns: minmax(0, 1fr) minmax(128px, 0.42fr);
}

.teamHubInlineFields.three {
  grid-template-columns: minmax(132px, 1fr) repeat(2, minmax(88px, 0.55fr));
}

.teamHubInlineFields label {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
}

.teamHubInlineFields .cuiField {
  min-width: 0;
}

.teamHubInlineFields .cuiFieldLabelRow {
  min-height: 18px;
}

.teamHubInlineFields .cuiFieldLabel {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.teamHubInlineFields label.wide {
  grid-column: span 1;
}

.teamHubInlineFields input,
.teamHubInlineFields select,
.teamHubInlineFields textarea {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  outline: 0;
  background: var(--control-bg);
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  padding: 0 11px;
}

.teamHubInlineFields textarea {
  min-height: 82px;
  resize: vertical;
  padding: 10px 11px;
  line-height: 1.5;
}

.teamHubInlineFields input:focus,
.teamHubInlineFields select:focus,
.teamHubInlineFields textarea:focus,
.teamHubSearch:focus-within {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.teamHubDialogField textarea {
  min-height: 124px;
}

.teamHubConfirmCopy {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
  word-break: break-all;
}

.teamHubProgress {
  display: grid;
  gap: 9px;
}

.teamHubProgress > span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.teamHubProgress > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.teamHubProgress article {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 5px;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background: var(--team-soft-bg);
  padding: 10px;
}

.teamHubProgress article svg {
  color: var(--team-cyan);
}

.teamHubProgress strong {
  color: var(--text-1);
  font-size: 20px;
  line-height: 1;
}

.teamHubProgress em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.teamHubInvitationList {
  display: grid;
  gap: 8px;
}

.teamHubInvitationItem {
  min-width: 0;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background: var(--team-soft-bg);
  padding: 10px;
}

.teamHubInvitationIcon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(8, 145, 178, 0.08);
  color: var(--team-cyan);
}

.teamHubInvitationItem .cuiDataListItemMain {
  min-width: 0;
}

.teamHubInvitationItem .cuiDataListItemHeader {
  align-items: center;
}

.teamHubInvitationItem .cuiDataListItemTitle,
.teamHubInvitationItem .cuiDataListItemDescription,
.teamHubInvitationError {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
}

.teamHubInvitationItem .cuiDataListItemTitle {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.teamHubInvitationItem .cuiDataListItemDescription,
.teamHubInvitationError {
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.45;
}

.teamHubInvitationError {
  color: var(--danger);
  white-space: normal;
}

.teamHubInvitationStatusStack {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.teamHubInvitationItem .cuiDataListItemActions {
  align-self: center;
}

.teamHubStatusCell {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.teamHubRoleCards,
.teamHubRecentList {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.teamHubRoleCards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.teamHubRoleCards article,
.teamHubRecentList article,
.teamHubAuditStrip {
  min-width: 0;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background: var(--team-soft-bg);
}

.teamHubRoleCards article {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
}

.teamHubRoleCards article.active {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(37, 99, 235, 0.08);
}

.teamHubRoleIcon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(8, 145, 178, 0.08);
  color: var(--team-cyan);
}

.teamHubRoleIcon.green {
  background: rgba(5, 150, 105, 0.1);
  color: var(--team-green);
}

.teamHubRoleIcon.amber {
  background: rgba(217, 119, 6, 0.1);
  color: var(--team-amber);
}

.teamHubRoleIcon.purple {
  background: rgba(109, 40, 217, 0.1);
  color: var(--team-purple);
}

.teamHubRoleCards h3,
.teamHubRoleCards p,
.teamHubRoleCards small {
  min-width: 0;
  margin: 0;
}

.teamHubRoleCards h3 {
  color: var(--text-1);
  font-size: 14px;
}

.teamHubRoleCards p,
.teamHubRoleCards small {
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.55;
}

.teamHubRecentList article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.teamHubRecentList article > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.teamHubRecentList strong,
.teamHubRecentList p {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
}

.teamHubRecentList strong {
  color: var(--text-1);
  font-size: 13px;
  white-space: nowrap;
}

.teamHubRecentList p {
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.5;
}

.teamHubAuditStrip {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.teamHubAuditStrip span,
.teamHubAuditStrip em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.teamHubAuditStrip strong {
  color: var(--text-1);
  font-size: 13px;
}

.teamHubLoadingPage {
  width: 100%;
  min-width: var(--workspace-canvas-min-width);
  min-height: calc(100vh - var(--workspace-topbar-height, 72px));
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vh, 64px);
}

.teamHubLoadingState {
  width: 100%;
  min-height: clamp(420px, 68vh, 720px);
  justify-self: center;
}

.radarTemplateManageList strong {
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
}

.radarTemplateManageList em {
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.radarTemplatePin {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eef4fb;
  color: #7c8ba1;
}

.radarTemplatePin.active {
  background: #fff4d8;
  color: #f59e0b;
}

.radarTemplateEditor {
  border: 1px solid var(--radar-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 14px;
}

.radarTemplateEditorHead strong {
  color: var(--radar-text);
  font-size: 16px;
}

.radarTemplatePinToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--radar-body);
  font-size: 12px;
  font-weight: 850;
}

.radarTemplatePinToggle input {
  width: 18px;
  height: 18px;
}

.radarTemplateEditorActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.radarTemplateEditorActions button:last-child,
.radarTemplateEditorActions button:nth-last-child(2) {
  border-color: rgba(22, 119, 255, 0.22);
  background: #1677ff;
  color: #ffffff;
}

@media (max-width: 1180px) {
  .radarPage .radarGoalGrid,
  .radarPage .radarCompareConfig,
  .radarPage .radarCompareOwnStoreBlock,
  .radarPage .radarCompareDataGrid {
    grid-template-columns: 1fr;
  }

  .radarPage .radarComparePrimaryActions {
    justify-content: flex-start;
  }

  .radarTemplateSheet {
    width: min(100vw, 720px);
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .radarTemplateSheet {
    width: 100%;
    padding: 16px;
  }

  .radarTemplateSheetGrid {
    grid-template-columns: 1fr;
  }
}

.radarPage .radarCompareDimensionTabs {
  flex: 0 0 auto;
}

.radarPage .radarCompareMetricMiniGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.radarPage .radarCompareMetricMiniGrid article {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(207, 222, 240, 0.86);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 12px 14px;
  overflow: hidden;
}

.radarPage .radarCompareMetricMiniGrid span,
.radarPage .radarCompareMetricMiniGrid em {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarCompareMetricMiniGrid strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 23px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarCompareMetricMiniGrid i {
  position: absolute;
  right: 13px;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #1677ff;
}

.radarPage .radarCompareMetricMiniGrid i.green {
  background: #10b981;
}

.radarPage .radarCompareMetricMiniGrid i.amber {
  background: #ff9f1a;
}

.radarPage .radarCompareMetricMiniGrid i.red {
  background: #ef4444;
}

.radarPage .radarCompareMetricMiniGrid i.purple {
  background: #8b5cf6;
}

.radarPage .radarCompareMetricTable {
  min-width: 980px;
}

.radarPage .radarCompareMetricTable th,
.radarPage .radarCompareMetricTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.radarPage .radarCompareMetricTable th:first-child,
.radarPage .radarCompareMetricTable td:first-child {
  width: 190px;
}

.radarPage .radarCompareMetricTable th:nth-child(2),
.radarPage .radarCompareMetricTable td:nth-child(2),
.radarPage .radarCompareMetricTable th:nth-child(3),
.radarPage .radarCompareMetricTable td:nth-child(3) {
  width: 170px;
}

.radarPage .radarCompareMetricTable th:nth-child(4),
.radarPage .radarCompareMetricTable td:nth-child(4) {
  width: 250px;
}

.radarPage .radarCompareMetricTable th:nth-child(5),
.radarPage .radarCompareMetricTable td:nth-child(5) {
  width: 150px;
}

.radarPage .radarCompareMetricTable th:nth-child(6),
.radarPage .radarCompareMetricTable td:nth-child(6) {
  width: 76px;
  text-align: center;
}

.radarPage .radarCompareMetricTable td:not(:first-child),
.radarPage .radarCompareMetricTable th:not(:first-child) {
  text-align: left;
}

.radarPage .radarCompareScore {
  min-width: 38px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #eef6ff;
  color: #1677ff;
  font-size: 12px;
  font-weight: 950;
}

.radarPage .radarCompareVisualStack {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.radarPage .radarCompareDimensionChart {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--radar-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f9fcff);
  padding: 14px;
}

.radarPage .radarCompareBarRows {
  display: grid;
  gap: 10px;
}

.radarPage .radarCompareBarRow {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
}

.radarPage .radarCompareBarRow strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-body);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarCompareBarRow span {
  position: relative;
  min-width: 0;
  height: 26px;
  display: block;
  border-radius: 999px;
  background: #edf3fa;
  overflow: hidden;
}

.radarPage .radarCompareBarRow i {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 18px;
  border-radius: inherit;
  background: #1677ff;
}

.radarPage .radarCompareBarRow i.competitor {
  background: #10b981;
}

.radarPage .radarCompareBarRow i.benchmark {
  background: #9aa8bb;
}

.radarPage .radarCompareBarRow b {
  position: relative;
  z-index: 1;
  display: block;
  color: #0f1b33;
  font-size: 11px;
  font-weight: 950;
  line-height: 26px;
  padding-right: 8px;
  text-align: right;
}

.radarPage .radarCompareFocus {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(22, 119, 255, 0.16);
  border-radius: 16px;
  background: #eef6ff;
  color: #1559a8;
  padding: 14px;
}

.radarPage .radarCompareFocus span {
  font-size: 12px;
  font-weight: 950;
}

.radarPage .radarCompareFocus strong {
  color: #15365f;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.55;
}

.radarPage .radarAlertHistoryPanel .radarPanelHeader {
  align-items: start;
}

.radarPage .radarAlertFilterBar {
  min-width: min(100%, 720px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.radarPage .radarAlertFilterBar label,
.radarPage .radarAlertFilterBar select {
  min-height: 36px;
  border: 1px solid var(--radar-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.radarPage .radarAlertFilterBar label {
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.radarPage .radarAlertFilterBar input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
}

.radarPage .radarAlertFilterBar select {
  padding: 0 12px;
}

.teamHubErrorState {
  min-height: clamp(360px, 58vh, 560px);
  display: grid;
  grid-template-columns: minmax(170px, 0.42fr) minmax(0, 0.58fr);
  align-items: center;
  gap: clamp(20px, 4vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(220, 38, 38, 0.07), rgba(8, 145, 178, 0.08) 52%, transparent),
    var(--team-card-bg);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
  padding: clamp(24px, 4vw, 44px);
}

.teamHubErrorState.permission {
  border-color: rgba(217, 119, 6, 0.22);
  background:
    linear-gradient(135deg, rgba(217, 119, 6, 0.08), rgba(8, 145, 178, 0.07) 54%, transparent),
    var(--team-card-bg);
}

.teamHubErrorVisual {
  position: relative;
  justify-self: center;
  display: grid;
  place-items: center;
  width: clamp(138px, 20vw, 190px);
  aspect-ratio: 1;
}

.teamHubErrorDial {
  position: absolute;
  border: 1px solid rgba(220, 38, 38, 0.22);
  border-radius: 999px;
  animation: teamHubErrorScan 2.4s ease-in-out infinite;
}

.teamHubErrorState.permission .teamHubErrorDial {
  border-color: rgba(217, 119, 6, 0.24);
}

.teamHubErrorDial.outer {
  inset: 0;
}

.teamHubErrorDial.inner {
  inset: 22%;
  animation-delay: 0.18s;
}

.teamHubErrorPing {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--danger);
  box-shadow: 0 0 0 8px rgba(220, 38, 38, 0.08);
  animation: teamHubErrorPing 1.35s ease-in-out infinite;
}

.teamHubErrorState.permission .teamHubErrorPing {
  background: var(--team-amber);
  box-shadow: 0 0 0 8px rgba(217, 119, 6, 0.09);
}

.teamHubErrorPing.one {
  top: 18%;
  right: 20%;
}

.teamHubErrorPing.two {
  bottom: 22%;
  left: 18%;
  animation-delay: 0.36s;
}

.teamHubErrorIcon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(220, 38, 38, 0.24);
  border-radius: 8px;
  background: color-mix(in srgb, var(--team-card-bg) 88%, white 12%);
  color: var(--danger);
  box-shadow: 0 18px 36px rgba(220, 38, 38, 0.12);
  animation: teamHubErrorFloat 2.8s ease-in-out infinite;
}

.teamHubErrorState.permission .teamHubErrorIcon {
  border-color: rgba(217, 119, 6, 0.24);
  color: var(--team-amber);
  box-shadow: 0 18px 36px rgba(217, 119, 6, 0.12);
}

.teamHubErrorCopy {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 12px;
}

.teamHubErrorEyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid rgba(220, 38, 38, 0.22);
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.08);
  color: var(--danger);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
}

.teamHubErrorState.permission .teamHubErrorEyebrow {
  border-color: rgba(217, 119, 6, 0.24);
  background: rgba(217, 119, 6, 0.09);
  color: var(--team-amber);
}

.teamHubErrorCopy h2,
.teamHubErrorCopy p {
  margin: 0;
}

.teamHubErrorCopy h2 {
  color: var(--text-1);
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.12;
}

.teamHubErrorCopy p {
  max-width: 560px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.65;
}

.teamHubErrorCopy small {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 850;
}

.teamHubRetryButton {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--team-line));
  border-radius: 8px;
  background: linear-gradient(135deg, #dc2626, #0f8aa6);
  color: white;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(220, 38, 38, 0.16);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.teamHubRetryButton:hover {
  transform: translateY(-1px);
}

.teamHubRetryButton:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.settingsStatePage {
  align-content: start;
  gap: 14px;
}

.settingsStateHeader {
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0 0, rgba(8, 145, 178, 0.12), transparent 35%), var(--team-card-bg);
  padding: 16px;
}

.settingsStateSummary {
  grid-template-columns: minmax(320px, 1.2fr) repeat(3, minmax(120px, 0.36fr));
  padding: 18px;
}

.settingsStateSkeletonGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 14px;
}

.settingsStateSkeletonCard {
  min-height: 220px;
  align-content: start;
}

.settingsStateError {
  min-height: clamp(320px, 46vh, 500px);
}

@keyframes teamHubErrorScan {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes teamHubErrorPing {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.86);
  }
  45% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@keyframes teamHubErrorFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .teamHubErrorDial,
  .teamHubErrorPing,
  .teamHubErrorIcon,
  .teamHubRetryButton:hover {
    animation: none;
    transform: none;
  }
}

.radarPage .radarReportBuilderGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
  gap: 14px;
  align-items: start;
}

.radarPage .radarReportFormGrid {
  min-width: 0;
}

.radarPage .radarDateRangeField {
  position: relative;
}

.radarPage .radarDateRangeField > button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--radar-body);
  font: inherit;
  padding: 0 12px;
  cursor: pointer;
}

.radarPage .radarDateRangeField > button strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarDateRangePopover {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(207, 222, 240, 0.96);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 52px rgba(31, 62, 108, 0.18);
  padding: 12px;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.radarPage .radarDateInputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.radarPage .radarDateInputs label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.radarPage .radarDateInputs span {
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 900;
}

.radarPage .radarDateInputs input {
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #f8fbff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  padding: 0 8px;
}

.radarPage .radarCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.radarPage .radarCalendarGrid b,
.radarPage .radarCalendarGrid button {
  min-width: 0;
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 900;
}

.radarPage .radarCalendarGrid b {
  color: var(--radar-muted);
}

.radarPage .radarCalendarGrid button {
  border: 0;
  background: #f4f8fd;
  color: var(--radar-body);
  cursor: pointer;
}

.radarPage .radarCalendarGrid button.selected {
  background: #e8f2ff;
  color: #1677ff;
}

.radarPage .radarCalendarGrid button.edge {
  background: #1677ff;
  color: #ffffff;
}

.radarPage .radarReportBuilderAside,
.radarPage .radarTemplateConfigSummary {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 14px;
}

.radarPage .radarReportBuilderAside span,
.radarPage .radarTemplateConfigSummary span,
.radarPage .radarReportBuilderAside em,
.radarPage .radarTemplateConfigSummary em {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
}

.radarPage .radarReportBuilderAside strong,
.radarPage .radarTemplateConfigSummary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 16px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamHubMemberRow {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(116px, 0.55fr) minmax(116px, 0.62fr) minmax(
      116px,
      0.58fr
    ) minmax(90px, 0.45fr) minmax(76px, 0.34fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--row-line);
  padding: 10px 12px;
  color: var(--text-2);
  font-size: 13px;
}

.radarPage .radarReportBuilderAside .radarButton {
  justify-content: center;
}

.radarPage .radarReportTemplatePanel {
  overflow: hidden;
}

.radarPage .radarReportTemplateActions {
  display: grid;
  gap: 9px;
}

.radarPage .radarReportTemplateActions button,
.radarPage .radarReportTemplateActions label {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  border: 1px solid rgba(22, 119, 255, 0.16);
  border-radius: 12px;
  background: #f5f9ff;
  color: #1559a8;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  padding: 0 12px;
  cursor: pointer;
}

.radarPage .radarReportTemplateActions input {
  display: none;
}

.radarPage .radarReportCover {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.36fr);
  align-items: stretch;
}

.radarPage .radarReportCoverText {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 14px;
}

.radarPage .radarReportCoverStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.radarPage .radarReportCoverStats span {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  padding: 14px;
}

.radarPage .radarReportCoverStats strong {
  color: #ffffff;
  font-size: 30px;
  font-weight: 950;
}

.radarPage .radarReportCoverStats em {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.radarPage .radarReportSection {
  display: grid;
  gap: 14px;
  border: 1px solid var(--radar-line);
  border-radius: 16px;
  background: #ffffff;
  padding: 18px;
}

.radarPage .radarReportSection.hero,
.radarPage .radarReportSection.split {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  align-items: start;
}

.radarPage .radarReportConclusionTags {
  display: grid;
  gap: 8px;
}

.radarPage .radarReportConclusionTags span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(22, 119, 255, 0.16);
  border-radius: 999px;
  background: #eef6ff;
  color: #1559a8;
  font-size: 12px;
  font-weight: 950;
  padding: 0 12px;
}

.teamHubResendAction {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.teamHubResendHint {
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
}

.teamHubIconButton {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  border-color: var(--team-line);
  background: var(--team-soft-bg);
  color: var(--text-2);
  padding: 0 8px;
}

.teamHubLinkButton,
.teamHubDangerLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(22, 119, 255, 0.16);
  border-radius: 999px;
  background: #eef6ff;
  color: #1559a8;
  font-size: 12px;
  font-weight: 950;
  padding: 0 12px;
}

.teamHubLinkButton.primary {
  border-color: rgba(8, 145, 178, 0.22);
  background: rgba(8, 145, 178, 0.1);
  color: #04799a;
}

.teamHubLinkButton.compact {
  min-height: 30px;
  padding: 0 11px;
}

.teamHubDangerLink {
  border-color: rgba(244, 63, 94, 0.2);
  background: rgba(255, 241, 242, 0.92);
  color: #be123c;
}

.teamHubActionUnavailable {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--team-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--team-soft-bg) 88%, white 12%);
  color: var(--text-3);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.teamHubActionUnavailable.busy {
  border-color: rgba(8, 145, 178, 0.22);
  background: rgba(8, 145, 178, 0.08);
  color: var(--team-cyan);
}

.teamHubRowActions.invite {
  display: grid;
  grid-template-columns: minmax(74px, 1fr) minmax(64px, 0.82fr);
  gap: 6px;
}

.teamHubRowActions.invite .teamHubResendAction,
.teamHubRowActions.invite .teamHubLinkButton,
.teamHubRowActions.invite .teamHubDangerLink {
  width: 100%;
}

.teamHubRowActions.invite .teamHubResendHint {
  grid-column: 1 / -1;
  justify-self: end;
  max-width: 100%;
}

.teamHubInvitationList {
  gap: 10px;
}

.teamHubInvitationItem {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, var(--team-card-bg), var(--team-soft-bg));
  padding: 12px;
}

.teamHubInvitationIcon {
  grid-row: 1 / span 2;
}

.teamHubInvitationBody {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.teamHubInvitationBody strong,
.teamHubInvitationBody p {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamHubInvitationBody strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 950;
}

.teamHubInvitationBody p {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}

.teamHubInvitationMeta {
  grid-column: 2 / 3;
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}

.teamHubInvitationItem .teamHubLinkButton.compact,
.teamHubInvitationChannel {
  grid-column: 3 / 4;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: center;
}

.teamHubInvitationChannel {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(8, 145, 178, 0.18);
  border-radius: 999px;
  background: rgba(8, 145, 178, 0.08);
  color: var(--team-cyan);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.radarPage .radarReportEvidenceGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.radarPage .radarReportEvidenceGrid article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--radar-line-soft);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 14px;
}

.radarPage .radarReportEvidenceGrid strong,
.radarPage .radarReportEvidenceGrid span,
.radarPage .radarReportEvidenceGrid em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radarPage .radarReportEvidenceGrid strong {
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.35;
}

.radarPage .radarReportEvidenceGrid span,
.radarPage .radarReportEvidenceGrid em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.radarPage .radarCompareBodyGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.66fr);
  gap: 18px;
  align-items: start;
}

.radarPage .radarCompareCorePanel .radarPanelHeader {
  align-items: start;
}

.radarPage .radarCompareRangeSelect {
  min-height: 38px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 0 34px 0 12px;
}

.radarPage .radarCompareMetricBoard {
  min-width: 0;
}

.radarPage .radarCompareMetricTabs {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid var(--radar-line-soft);
  margin-bottom: 10px;
}

.radarPage .radarCompareMetricTabs .radarSegmented {
  gap: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.radarPage .radarCompareMetricTabs .radarSegmented button {
  min-height: 42px;
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--radar-muted);
  padding: 0;
  font-size: 15px;
  font-weight: 950;
}

.radarPage .radarCompareMetricTabs .radarSegmented button.active {
  color: #1677ff;
}

.radarPage .radarCompareMetricTabs .radarSegmented button.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: #1677ff;
}

.radarPage .radarCompareMetricTable {
  min-width: 840px;
  table-layout: fixed;
}

.radarPage .radarCompareMetricTable th,
.radarPage .radarCompareMetricTable td {
  height: 50px;
  overflow: hidden;
  border-bottom-color: rgba(222, 231, 243, 0.86);
  color: #66758d;
  text-align: center;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.radarPage .radarCompareMetricTable th:first-child,
.radarPage .radarCompareMetricTable td:first-child {
  width: 118px;
  color: #53627a;
  text-align: left;
}

.radarPage .radarCompareMetricTable th:not(:first-child),
.radarPage .radarCompareMetricTable td:not(:first-child) {
  width: 124px;
}

.radarPage .radarCompareMetricTable th.highlight,
.radarPage .radarCompareMetricTable td.highlight {
  background: rgba(235, 244, 255, 0.82);
}

.radarPage .radarCompareMetricTable th.highlight {
  border-radius: 12px 12px 0 0;
}

.radarPage .radarCompareMetricTable tbody tr:last-child td.highlight {
  border-radius: 0 0 12px 12px;
}

.radarPage .radarCompareMetricTable th span {
  display: block;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: normal;
}

.radarPage .radarCompareMetricTable th em {
  display: block;
  color: #1677ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.radarPage .radarCompareMetricTable td.highlight {
  color: #263b5d;
  font-weight: 950;
}

.radarPage .radarCompareCorePanel .radarCompareCharts {
  gap: 16px;
}

.radarPage .radarCompareCorePanel .radarSparkChart,
.radarPage .radarCompareCorePanel .radarCategoryCompare {
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: 0 12px 28px rgba(31, 62, 108, 0.05);
  padding: 16px;
}

.radarPage .radarCompareCorePanel .radarCategoryCompare {
  min-height: 214px;
}

.radarPage .radarReportTopGrid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
  gap: 14px;
  align-items: stretch;
}

.radarPage .radarReportBuilderPanel,
.radarPage .radarReportTopGrid .radarReportTemplatePanel {
  min-height: 100%;
}

.radarPage .radarReportFormGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radarPage .radarReportBuilderAside {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr) auto;
  align-items: center;
}

.radarPage .radarReportBuilderAside .radarButton {
  min-width: 170px;
}

@media (max-width: 1180px) {
  .radarPage .radarReportBuilderGrid,
  .radarPage .radarReportTopGrid,
  .radarPage .radarReportCover,
  .radarPage .radarReportSection.hero,
  .radarPage .radarReportSection.split,
  .radarPage .radarCompareBodyGrid {
    grid-template-columns: 1fr;
  }

  .radarPage .radarAlertFilterBar {
    justify-content: flex-start;
  }

  .radarPage .radarReportEvidenceGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .radarPage .radarCompareMetricMiniGrid,
  .radarPage .radarDateInputs,
  .radarPage .radarReportBuilderAside,
  .radarPage .radarReportCoverStats,
  .radarPage .radarReportEvidenceGrid {
    grid-template-columns: 1fr;
  }

  .radarPage .radarAlertFilterBar label {
    min-width: 100%;
  }

  .radarPage .radarAlertFilterBar select {
    flex: 1 1 140px;
  }
}

/* Competitor radar preference bridge: keep radar pages aligned with shell language/theme/accent controls. */

.radarPage {
  --radar-blue: var(--primary);
  --radar-blue-strong: var(--primary-light);
  --radar-blue-soft: var(--primary-soft);
  --radar-panel: var(--surface-panel);
  --radar-panel-soft: var(--surface-panel-strong);
  --radar-line: var(--line-dark);
  --radar-line-soft: var(--row-line);
  --radar-text: var(--text-1);
  --radar-body: var(--text-2);
  --radar-muted: var(--text-3);
  --radar-shadow: var(--shadow-dark);
  --radar-control-bg: var(--control-bg);
  --radar-tag-bg: var(--tag-bg);
  --radar-active-bg: var(--primary-active-bg);
  --radar-accent-border: var(--primary-border);
  --radar-accent-border-strong: var(--primary-border-strong);
  --radar-accent-soft: color-mix(in srgb, var(--primary) 18%, transparent);
  --radar-accent-faint: color-mix(in srgb, var(--primary) 9%, transparent);
  --radar-gradient-soft: linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--accent) 12%, transparent));
  --radar-panel-gradient: linear-gradient(180deg, var(--radar-panel), var(--radar-panel-soft));
  color: var(--radar-text);
}

[data-theme='light'] .radarPage {
  --radar-panel: rgba(255, 255, 255, 0.9);
  --radar-panel-soft: rgba(248, 250, 252, 0.92);
  --radar-shadow: 0 18px 48px rgba(31, 62, 108, 0.08);
}

.radarPage .radarTopbar,
.radarPage .radarHero,
.radarPage .radarPanel,
.radarPage .radarMetricCard,
.radarPage .radarModuleCardGrid article,
.radarPage .radarSwotMini,
.radarPage .radarSwotGrid article,
.radarPage .radarTemplateList button,
.radarPage .radarExportGrid span,
.radarPage .radarShopList article,
.radarPage .radarAlertList article,
.radarPage .radarRuleList article,
.radarPage .radarRuleList .cuiDataListItem,
.radarPage .radarSelectedList > div,
.radarPage .radarCompareBuilder,
.radarPage .radarGoalGrid button,
.radarPage .radarGoalCustomCard,
.radarPage .radarCompareOwnStoreBlock,
.radarPage .radarSlotCard,
.radarPage .radarCompareMetricMiniGrid article,
.radarPage .radarReportBuilderAside,
.radarPage .radarTemplateConfigSummary,
.radarPage .radarReportSection,
.radarPage .radarReportEvidenceGrid article,
.radarPage .radarReportGenerateBar,
.radarPage .radarReportReadinessCard,
.radarPage .radarReportActionDraftList article {
  border-color: var(--radar-line);
  background: var(--radar-panel-gradient);
  box-shadow: var(--radar-shadow);
}

.radarPage .radarHero,
.radarPage .radarReportCover,
.radarPage .radarReportCoverMini {
  background:
    linear-gradient(135deg, var(--radar-accent-soft), color-mix(in srgb, var(--accent) 12%, transparent)),
    var(--radar-panel);
}

.radarPage .radarHero::before {
  background:
    linear-gradient(120deg, var(--radar-accent-soft), transparent 42%),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30%);
}

.radarPage .radarTopbar,
.radarPage .radarWorkbenchLead,
.radarPage .radarDecisionTodoPanel,
.radarPage .radarDecisionBattlePanel,
.radarPage .radarDecisionReportPanel,
.radarPage .radarDecisionLayout .radarOwnStorePanel,
.radarPage .radarTemplateSheet,
.radarPage .radarModal,
.radarPage .radarDateRangePopover {
  border-color: var(--radar-line);
  background: color-mix(in srgb, var(--radar-panel) 94%, transparent);
  box-shadow: var(--radar-shadow);
}

.radarPage .radarDecisionShortcutGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
  align-items: stretch;
}

.radarPage .radarDecisionShortcutGrid .radarQuickEntry {
  width: 100%;
  height: 100%;
  min-height: 84px;
}

.radarPage .radarSearch,
.radarPage .radarSegmented,
.radarPage .radarCountPicker,
.radarPage .radarField input,
.radarPage .radarField select,
.radarPage .radarField textarea,
.radarPage .radarInlineSearch,
.radarPage .radarTableToolbar select,
.radarPage .radarTableToolbar > button,
.radarPage .radarPager .cuiButton,
.radarPage .radarPager .cuiInput,
.radarPage .radarPager .cuiPaginationEllipsis,
.radarPage .radarSearchTrigger,
.radarPage .radarSearchMenu label,
.radarPage .radarTemplateSearch,
.radarPage .radarTemplateSheetHead button,
.radarPage .radarTemplateEditorHead button,
.radarPage .radarTemplateEditorActions button,
.radarPage .radarAlertFilterBar label,
.radarPage .radarAlertFilterBar select,
.radarPage .radarAlertFilterBar input,
.radarPage .radarDateRangeField > button,
.radarPage .radarDateInputs input,
.radarPage .radarReportTargetField select,
.radarPage .radarReportFormGrid .radarField select,
.radarPage .radarReportTemplateHeaderActions button,
.radarPage .radarReportTemplateHeaderActions label,
.radarPage .radarReportTemplateActions button,
.radarPage .radarReportTemplateActions label {
  border-color: var(--radar-line);
  background: var(--radar-control-bg);
  color: var(--radar-body);
}

.radarPage .radarModuleTabs button,
.radarPage .radarButton,
.radarPage .radarTableActions button,
.radarPage .radarShopFoot button,
.radarPage .radarModalHead button,
.radarPage .radarRankList button,
.radarPage .radarRankList .cuiDataListActionItem,
.radarPage .radarQuickEntry,
.radarPage .radarSourceChecklist label,
.radarPage .radarReportBuilderPanel .radarSourceChecklist label,
.radarPage .radarTemplateManageList > button,
.radarPage .radarGoalCustomCard .radarSearchOptions button {
  border-color: var(--radar-line);
  background: var(--radar-control-bg);
  color: var(--radar-body);
}

.radarPage .radarTopbar strong,
.radarPage .radarTitleRow h1,
.radarPage .radarHero h1,
.radarPage .radarPanelHeader h2,
.radarPage .radarModuleCardGrid h3,
.radarPage .radarSwotMini h3,
.radarPage .radarTemplateList h3,
.radarPage .radarReportBody h3,
.radarPage .radarModal h2,
.radarPage .radarShopHead strong,
.radarPage .radarRankList strong,
.radarPage .radarAlertList strong,
.radarPage .radarRuleList strong,
.radarPage .radarRuleList .cuiDataListItemTitle,
.radarPage .radarSelectedList strong,
.radarPage .radarTemplateList strong,
.radarPage .radarTable td:first-child,
.radarPage .radarDetailLine strong,
.radarPage .radarSearchTrigger strong,
.radarPage .radarSearchOptions strong,
.radarPage .radarTemplateManageList strong,
.radarPage .radarTemplateEditorHead strong,
.radarPage .radarReportBuilderPanel .radarPanelHeader h2,
.radarPage .radarReportOverviewPanel .radarPanelHeader h2,
.radarPage .radarReportBuilderAside strong,
.radarPage .radarTemplateConfigSummary strong,
.radarPage .radarReportBuilderPanel .radarSourceChecklist strong,
.radarPage .radarReportGenerateBar strong,
.radarPage .radarReportActionDraftList strong,
.radarPage .radarReportReadinessCard > strong,
.radarPage .radarReportEvidenceGrid strong,
.radarPage .radarCompareMetricMiniGrid strong,
.radarPage .radarCompareBarRow strong,
.radarPage .radarCompareFocus strong {
  color: var(--radar-text);
}

.radarPage .radarSearch input,
.radarPage .radarInlineSearch input,
.radarPage .radarSearchMenu input,
.radarPage .radarTemplateSearch input,
.radarPage .radarField input,
.radarPage .radarField select,
.radarPage .radarField textarea,
.radarPage .radarDateInputs input {
  background: transparent;
  color: var(--radar-text);
}

.radarPage input[type='checkbox'],
.radarPage input[type='radio'] {
  border-color: var(--app-control-line);
}

.radarPage .radarSearch input::placeholder,
.radarPage .radarInlineSearch input::placeholder,
.radarPage .radarSearchMenu input::placeholder,
.radarPage .radarTemplateSearch input::placeholder {
  color: var(--radar-muted);
}

.radarPage .radarHero p,
.radarPage .radarPanel p,
.radarPage .radarPanelHeader p,
.radarPage .radarMetricCard em,
.radarPage .radarMetricCard span,
.radarPage .radarDetailLine span,
.radarPage .radarShopHead em,
.radarPage .radarShopFoot span,
.radarPage .radarRankList em,
.radarPage .radarAlertList p,
.radarPage .radarRuleList em,
.radarPage .radarRuleList span,
.radarPage .radarRuleList .cuiDataListItemDescription,
.radarPage .radarSelectedList em,
.radarPage .radarTemplateList em,
.radarPage .radarReportBody p,
.radarPage .radarModal p,
.radarPage .radarTable th,
.radarPage .radarTable td,
.radarPage .radarCompareMetricTable th,
.radarPage .radarCompareMetricTable td,
.radarPage .radarCompareMetricTable th:first-child,
.radarPage .radarCompareMetricTable th span,
.radarPage .radarSearchTrigger em,
.radarPage .radarSearchOptions em,
.radarPage .radarTemplateManageList em,
.radarPage .radarReportBuilderPanel .radarPanelHeader p,
.radarPage .radarReportOverviewPanel .radarPanelHeader p,
.radarPage .radarReportTargetField > span em,
.radarPage .radarReportSourceHeader,
.radarPage .radarReportSourceHeader em,
.radarPage .radarReportBuilderPanel .radarSourceChecklist small,
.radarPage .radarReportGenerateBar em,
.radarPage .radarReportOverviewPills span,
.radarPage .radarReportActionDraftList span,
.radarPage .radarReportReadinessCard > span,
.radarPage .radarReportReadinessCard p,
.radarPage .radarReportReadinessBars em,
.radarPage .radarReportReadinessBars b,
.radarPage .radarReportReadinessCard > strong em,
.radarPage .radarCompareMetricMiniGrid span,
.radarPage .radarCompareMetricMiniGrid em,
.radarPage .radarCompareFocus span {
  color: var(--radar-body);
}

.radarPage .radarTable th,
.radarPage .radarShopMetrics span,
.radarPage .radarTaskMetrics span,
.radarPage .radarOwnStoreIdentity,
.radarPage .radarOwnStoreInsight,
.radarPage .radarOwnStoreMetrics span,
.radarPage .radarFlowStrip span,
.radarPage .radarEvidenceGrid span,
.radarPage .radarImpactGrid span,
.radarPage .radarQualityGrid article,
.radarPage .radarBattleGrid article,
.radarPage .radarRecommendationList article,
.radarPage .radarMappingGrid article,
.radarPage .radarReportBullets,
.radarPage .radarReportOverviewPills span,
.radarPage .radarReportActionDraftList article,
.radarPage .statusPill,
.radarPage .radarReportConclusionTags span,
.radarPage .radarCompareScore,
.radarPage .radarCompareFocus {
  background: var(--radar-tag-bg);
  color: var(--radar-body);
}

.radarPage .radarTable td,
.radarPage .radarCompareMetricTable td,
.radarPage .radarDecisionTodoPanel .radarTableWrap,
.radarPage .radarEventList .radarEventRow,
.radarPage .radarEventItem .radarEventDetailPanel,
.radarPage .radarSearchMenu,
.radarPage .radarTemplateEditor,
.radarPage .radarTrendChart,
.radarPage .radarLineChart,
.radarPage .radarSparkChart,
.radarPage .radarCategoryCompare,
.radarPage .radarCompareCorePanel .radarSparkChart,
.radarPage .radarCompareCorePanel .radarCategoryCompare,
.radarPage .radarCompareDimensionChart,
.radarPage .radarReportSection,
.radarPage .radarReportReadinessCard {
  border-color: var(--radar-line);
  background: var(--radar-panel-soft);
}

.radarPage .radarTable tbody tr:hover,
.radarPage .radarCompareMetricTable tbody tr:hover td,
.radarPage .radarRankList button.active,
.radarPage .radarRankList button:hover,
.radarPage .radarRankList .cuiDataListActionItem.active,
.radarPage .radarRankList .cuiDataListActionItem:hover,
.radarPage .radarQuickEntry:hover,
.radarPage .radarSearchOptions button:hover,
.radarPage .radarSearchOptions button.active,
.radarPage .radarGoalCustomCard .radarSearchOptions button:hover,
.radarPage .radarGoalCustomCard .radarSearchOptions button.active,
.radarPage .radarTemplateManageList > button.active,
.radarPage .radarTemplateManageList > button:hover,
.radarPage .radarCalendarGrid button.selected,
.radarPage .radarCompareMetricTable th.highlight,
.radarPage .radarCompareMetricTable td.highlight {
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
}

.radarPage .radarModuleTabs button.active,
.radarPage .radarButton.primary,
.radarPage .radarSegmented button.active,
.radarPage .radarCountPicker button.active,
.radarPage .radarPager .cuiButton.active,
.radarPage .radarPager .cuiButton[aria-current='page'],
.radarPage .radarCalendarGrid button.edge,
.radarPage .radarTemplateEditorActions button:last-child,
.radarPage .radarTemplateEditorActions button:nth-last-child(2),
.radarPage .radarFlowStrip b {
  border-color: var(--radar-accent-border-strong);
  background: var(--grad);
  color: #ffffff;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 24%, transparent);
}

.radarPage .radarButton.soft,
.radarPage .radarButton.ghost,
.radarPage .radarModuleTabs button:hover,
.radarPage .radarTableActions button:hover,
.radarPage .radarShopFoot button:hover,
.radarPage .radarBattleGrid button,
.radarPage .radarReportTemplateHeaderActions button,
.radarPage .radarReportTemplateHeaderActions label,
.radarPage .radarReportTemplateActions button,
.radarPage .radarReportTemplateActions label {
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
}

.radarPage .radarTitleRow span,
.radarPage .radarEyebrow,
.radarPage .radarModalHead span,
.radarPage .radarReportCover span,
.radarPage .radarTemplateSheetHead span,
.radarPage .radarEventActions span,
.radarPage .radarReportBuilderPanel .radarSourceChecklist em,
.radarPage .radarReportGenerateBar span,
.radarPage .radarReportActionDraftList em,
.radarPage .radarCompareMetricTable th em,
.radarPage .radarCompareMetricTabs .radarSegmented button.active,
.radarPage .radarReportReadinessCard > strong em {
  color: var(--radar-blue);
}

.radarPage .radarTitleRow span,
.radarPage .radarReportGenerateBar span,
.radarPage .radarReportActionDraftList em,
.radarPage .radarReportConclusionTags span,
.radarPage .statusPill.cyan,
.radarPage .statusPill.purple {
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
}

.radarPage .radarMetricDot,
.radarPage .radarAvatar,
.radarPage .radarFocusLogo,
.radarPage .radarOwner span,
.radarPage .radarOwnStoreLogo,
.radarPage .radarTrendBar span,
.radarPage .radarLinePoint .info,
.radarPage .radarCompareMetricMiniGrid i,
.radarPage .radarCompareBarRow i,
.radarPage .radarCompareMetricTabs .radarSegmented button.active::after,
.radarPage .radarReportActionDraftList .tone-2 i {
  background: var(--grad);
  color: #ffffff;
}

.radarPage .radarLineChart,
.radarPage .radarTrendChart {
  background:
    linear-gradient(var(--radar-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--radar-line-soft) 1px, transparent 1px),
    var(--radar-panel-soft);
}

.competitorEventDataList.cuiDataList,
.crmFollowupDataList.cuiDataList,
.chatbiProtoMiniTableDataList.cuiDataList,
.teamHubMemberTable.cuiDataList {
  background: transparent;
  box-shadow: none;
}

.competitorEventDataList .cuiDataListBody,
.crmFollowupDataList .cuiDataListBody,
.chatbiProtoMiniTableDataList .cuiDataListBody,
.teamHubMemberTable .cuiDataListBody {
  overflow-x: auto;
}

.competitorEventRow .cuiDataListTableHeadCell,
.competitorEventRow .cuiDataListTableCell,
.crmFollowupRow .cuiDataListTableHeadCell,
.crmFollowupRow .cuiDataListTableCell,
.teamHubMemberRow .cuiDataListTableHeadCell,
.teamHubMemberRow .cuiDataListTableCell {
  min-width: 0;
}

.chatbiProtoMiniTable {
  min-width: 720px;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel);
}

.chatbiProtoMiniTableRow {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(180px, 1.35fr) repeat(4, minmax(120px, 1fr));
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.chatbiProtoMiniTableRow.head {
  min-height: 34px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chatbiProtoMiniTableRow:last-child,
.chatbiProtoMiniTable .cuiDataListTableRow:last-child .cuiDataListTableCell {
  border-bottom: 0;
}

.chatbiProtoMiniTableRow .cuiDataListTableHeadCell,
.chatbiProtoMiniTableRow .cuiDataListTableCell {
  min-width: 0;
  overflow: hidden;
  padding: 0 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbiProtoMiniTableRow strong {
  color: var(--text-1);
}

.chatbiProtoMiniTableRow em {
  color: var(--text-3);
  font-style: normal;
}

.chatbiProtoMiniTableRow em.isUp {
  color: var(--success);
}

.chatbiProtoMiniTableRow em.isDown {
  color: var(--danger);
}

@media (max-width: 1180px) {
  .teamHubSummaryCard,
  .teamHubMainGrid,
  .teamHubBottomGrid,
  .settingsStateSkeletonGrid {
    grid-template-columns: 1fr;
  }

  .teamHubSummaryCard {
    gap: 14px;
  }

  .teamHubSummaryMetric {
    border-left: 0;
    border-top: 1px solid var(--team-line);
    padding: 14px 0 0;
  }

  .teamHubMemberTable {
    overflow-x: auto;
  }

  .teamHubMemberRow {
    min-width: 980px;
  }

  .teamHubRoleCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .teamHubPageHeader,
  .teamHubCardHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .teamHubPrimaryButton,
  .teamHubSecondaryButton {
    width: 100%;
  }

  .teamHubErrorState {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 22px;
  }

  .teamHubErrorVisual {
    width: 132px;
  }

  .teamHubRetryButton {
    width: 100%;
  }

  .teamHubSummaryCard,
  .teamHubTableToolbar,
  .teamHubInlineFields,
  .teamHubInlineFields.compact,
  .teamHubInlineFields.three,
  .teamHubProgressSteps,
  .teamHubRoleCards {
    grid-template-columns: 1fr;
  }

  .teamHubSummaryIdentity {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .teamHubTeamLogo {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }

  .teamHubResendAction {
    justify-items: start;
  }

  .teamHubResendHint {
    text-align: left;
    white-space: normal;
  }

  .teamHubInvitationItem,
  .teamHubRecentList article,
  .teamHubAuditStrip {
    grid-template-columns: 1fr;
  }
}

/* Final runtime status and topbar guard. */

.globalRuntimeDbStatus {
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 1600;
  width: auto;
  pointer-events: none;
}

.runtimeDbStatusWrap {
  position: relative;
  min-width: 0;
  pointer-events: auto;
}

.runtimeDbStatus {
  width: auto;
  max-width: min(260px, calc(100vw - 32px));
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 86%, transparent);
  color: var(--text-1);
  padding: 0 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.runtimeDbStatusDot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--text-3);
}

.runtimeDbStatusBadge.cuiStatusBadge {
  min-height: 22px;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.runtimeDbStatusTarget {
  max-width: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-family: var(--font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transition:
    max-width 160ms ease,
    opacity 160ms ease;
}

.runtimeDbStatus:hover .runtimeDbStatusTarget,
.runtimeDbStatus:focus-visible .runtimeDbStatusTarget {
  max-width: 180px;
  opacity: 1;
}

.runtimeDbStatus-green {
  border-color: rgba(34, 197, 94, 0.45);
  background: color-mix(in srgb, #22c55e 12%, var(--surface-panel));
}

.runtimeDbStatus-green .runtimeDbStatusDot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.runtimeDbStatus-amber,
.runtimeDbStatusLoading {
  border-color: rgba(245, 158, 11, 0.48);
  background: color-mix(in srgb, #f59e0b 12%, var(--surface-panel));
}

.runtimeDbStatus-amber .runtimeDbStatusDot,
.runtimeDbStatusLoading .runtimeDbStatusDot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.runtimeDbStatus-red {
  border-color: rgba(239, 68, 68, 0.5);
  background: color-mix(in srgb, #ef4444 12%, var(--surface-panel));
}

.runtimeDbStatus-red .runtimeDbStatusDot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.runtimeDbControlMenu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: min(260px, calc(100vw - 32px));
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 96%, #020617 8%);
  box-shadow: var(--shadow-dark);
  padding: 10px;
}

.runtimeDbControlMenu button {
  min-height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  font-weight: 850;
}

.runtimeDbControlMessage {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.5;
}

.regionSelector {
  position: relative;
  min-width: 0;
  display: inline-flex;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
}

.regionSelectorTrigger {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  padding: 0 10px;
  text-align: left;
}

.regionSelectorTrigger:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.regionSelectorTrigger:hover,
.regionSelector.is-open .regionSelectorTrigger {
  border-color: var(--primary-border);
  background: var(--theme-switcher-active-bg);
}

.regionSelectorTrigger > svg {
  flex: 0 0 auto;
  color: var(--text-2);
}

.regionSelectorText,
.regionSelectorOptionMain {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.regionSelectorLabel,
.regionSelectorValue,
.regionSelectorMeta,
.regionSelectorHint,
.regionSelectorOptionMain strong,
.regionSelectorOptionMain span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.regionSelectorLabel {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.regionSelectorValue {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
}

.regionSelectorMeta {
  max-width: 78px;
  flex: 0 1 auto;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.regionSelectorChevron {
  margin-left: auto;
  transition: transform 160ms ease;
}

.regionSelector.is-open .regionSelectorChevron {
  transform: rotate(180deg);
}

.regionSelectorHint {
  display: none;
  color: var(--text-2);
}

.regionSelectorMenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1200;
  width: min(280px, calc(100vw - 32px));
  display: grid;
  gap: 5px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 96%, #020617 8%);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  padding: 7px;
}

.regionSelectorOption {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  padding: 7px 10px;
  text-align: left;
}

.regionSelectorOption .regionSelectorOptionCheck {
  width: 18px;
  display: inline-grid;
  place-items: center;
}

.regionSelectorOption:hover,
.regionSelectorOption.active {
  border-color: var(--primary-border);
  background: var(--primary-active-bg);
  color: var(--text-1);
}

.regionSelectorOptionMain strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.regionSelectorOptionMeta {
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-3);
  margin-top: 3px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}

.regionSelectorOption svg {
  color: var(--primary-light);
}

.authRegionSelector.compact {
  flex: 0 1 196px;
  width: 196px;
}

.topbarRegionSelector.compact {
  flex: 0 1 172px;
  width: 172px;
}

.topbarRegionSelector.compact .regionSelectorLabel,
.topbarRegionSelector.compact .regionSelectorMeta {
  display: none;
}

.appTopbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
}

.topbarLeft,
.topbarRight {
  display: flex;
  align-items: center;
}

.topbarRight {
  max-width: 100%;
  overflow: visible;
}

.topbarRight .workspacePreferencesTrigger {
  max-width: 136px;
}

@media (max-width: 1280px) {
  .appTopbar {
    grid-template-columns: 1fr;
  }

  .topbarLeft,
  .topbarRight {
    width: 100%;
  }

  .topbarRight {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  .globalRuntimeDbStatus {
    right: 12px;
    bottom: 84px;
  }

  .topbarRegionSelector.compact {
    flex-basis: 100%;
    width: 100%;
  }
}

.radarPage .radarDonut {
  background:
    radial-gradient(circle, var(--radar-panel) 0 43%, transparent 44%),
    conic-gradient(var(--radar-blue) 0 34%, var(--warning) 34% 58%, var(--accent) 58% 82%, var(--success) 82% 100%);
}

.radarPage .radarDonut.report {
  background:
    radial-gradient(circle, var(--radar-panel) 0 43%, transparent 44%),
    conic-gradient(var(--radar-blue) 0 50%, var(--warning) 50% 75%, var(--accent) 75% 91%, var(--success) 91% 100%);
}

.radarPage .radarReportCover h2,
.radarPage .radarReportCoverStats strong,
.radarPage .radarReportCoverStats em {
  color: #ffffff;
}

.radarPage .radarReportCoverStats span {
  border-color: color-mix(in srgb, #ffffff 42%, transparent);
  background: color-mix(in srgb, #ffffff 18%, transparent);
}

.radarPage .radarTemplateSheetBackdrop,
.radarPage .radarModalBackdrop {
  background: color-mix(in srgb, var(--overlay-bg) 72%, transparent);
}

/* Alert Rule Sheet dark theme overrides */

.radarPage .radarAlertSheet {
  border-right-color: var(--radar-line);
  background: var(--radar-panel);
}

.radarPage .radarAlertSummaryCard {
  border-color: var(--radar-line);
  background: var(--radar-panel-soft);
}

.radarPage .radarAlertRuleCard {
  border-color: var(--radar-line);
  background: var(--radar-panel-soft);
}

.radarPage .radarAlertRuleCard.active {
  border-color: rgba(20, 167, 158, 0.42);
  background: linear-gradient(90deg, rgba(20, 167, 158, 0.08), var(--radar-panel-soft));
}

.radarPage .radarAlertFilterTab {
  border-color: var(--radar-line);
  background: var(--radar-surface);
  color: var(--radar-body);
}

.radarPage .radarAlertFilterTab.active {
  color: var(--radar-blue);
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
}

.radarPage .radarAlertTemplateTab {
  border-color: var(--radar-line);
  background: var(--radar-surface);
  color: var(--radar-body);
}

.radarPage .radarAlertTemplateTab.active {
  color: var(--radar-blue);
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
}

.radarPage .radarAlertChip {
  border-color: var(--radar-line);
  background: var(--radar-surface);
  color: var(--radar-body);
}

.radarPage .radarAlertChip.active {
  color: var(--radar-blue);
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
}

.radarPage .radarAlertEditor {
  border-color: var(--radar-line);
  background: var(--radar-panel);
}

.radarPage .radarAlertEditorHead {
  border-bottom-color: var(--radar-line);
  background: var(--radar-panel-soft);
}

.radarPage .radarAlertEditorFooter {
  border-top-color: var(--radar-line);
  background: var(--radar-panel-soft);
}

.radarPage .radarAlertSourceStrip {
  border-color: var(--radar-line);
  background: var(--radar-panel-soft);
}

.radarPage .radarAlertPolicyCard {
  border-color: var(--radar-line);
  background: var(--radar-surface);
}

.radarPage .radarAlertExpression {
  border-color: rgba(20, 167, 158, 0.32);
  background: var(--radar-panel-soft);
}

.radarPage .radarAlertStepper {
  background: var(--radar-surface);
}

.radarPage .radarAlertStepper button {
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
}

.radarPage .radarAlertRuleCardBadge {
  color: var(--radar-blue);
  background: var(--radar-accent-faint);
}

.radarPage .radarAlertRuleCardBadge.off {
  color: var(--radar-muted);
  background: var(--radar-panel-soft);
}

@media (max-width: 720px) {
  .orgSettingsQuickGrid {
    grid-template-columns: 1fr;
  }

  .orgSettingsQuickLink {
    border-right: 0;
  }
}

/* ===== FastMoss Product Module ===== */

.fastmossProductPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  gap: 10px;
}

/* ---- Page Head ---- */

.fmPageHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.05)),
    var(--surface-panel);
  padding: 20px;
}

.fmPageHead h1 {
  margin: 4px 0 4px;
  color: var(--text-1);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.15;
}

.fmPageHead p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}

.fmEyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.fmHeadActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ---- Buttons ---- */

.fmButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.fmButton:hover {
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.fmButtonPrimary {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.fmButtonPrimary:hover {
  border-color: var(--primary-border-strong);
  background: var(--primary-active-bg);
  color: #c4b5fd;
}

.fmButtonGhost {
  border-color: transparent;
  background: transparent;
  color: var(--text-3);
}

.fmButtonGhost:hover {
  background: var(--surface-dark-hover);
  color: var(--text-2);
}

.fmIconText {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.fmIconText:hover {
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

/* ---- Search Band ---- */

.fmSearchBand {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px 16px;
}

.fmFilters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.fmField {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.fmField > span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fmField > input,
.fmField > select {
  height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-dark);
  color: var(--text-1);
  font-size: 13px;
  padding: 0 10px;
  outline: none;
  transition: border-color 0.15s;
}

.fmField > input:focus,
.fmField > select:focus {
  border-color: var(--primary-border);
}

.fmField > input::placeholder {
  color: var(--text-3);
}

.fmField > select {
  padding-right: 28px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}

.fmFieldWide {
  flex: 1 1 220px;
  min-width: 180px;
}

.fmInputShell {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-dark);
  padding: 0 10px;
  transition: border-color 0.15s;
}

.fmInputShell:focus-within {
  border-color: var(--primary-border);
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/compat/web-tail/web-tail-002.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Ordered read-only compatibility shard 002. Do not edit. */

.fmInputShell input {
  flex: 1 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text-1);
  font-size: 13px;
  outline: none;
}

.fmInputShell input::placeholder {
  color: var(--text-3);
}

.fmInputShell svg {
  color: var(--text-3);
  flex-shrink: 0;
}

.fmFilterButtons {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.fmFilterButtons .fmButton {
  height: 36px;
}

/* Selected filters chips */

.fmSelected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-dark);
}

.fmSelected > span {
  color: var(--text-3);
  font-size: 12px;
  flex-shrink: 0;
}

.fmSelected button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-light);
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.fmSelected button:hover {
  background: var(--primary-active-bg);
}

.fmClear {
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: underline;
}

.fmClear:hover {
  color: var(--text-2);
}

/* ---- Stats Grid ---- */

.fmStatsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.fmMetric {
  min-height: 90px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.fmMetric::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--line-dark);
}

.fmMetric.green::after {
  background: linear-gradient(90deg, var(--success), #22c55e);
}

.fmMetric > span:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--primary-light);
  flex-shrink: 0;
}

.fmMetric > div {
  min-width: 0;
}

.fmMetric p {
  margin: 0 0 4px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fmMetric strong {
  display: block;
  color: var(--text-1);
  font-size: 1.3rem;
  font-weight: 800;
}

.fmMetric em {
  display: block;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  margin-top: 3px;
}

/* ---- Toolbar ---- */

.fmToolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fmSortGroup {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.fmSortGroup > span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
}

.fmSortGroup button {
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.fmSortGroup button:hover {
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.fmSortGroup button.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.fmBatchActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fmBatchActions > span {
  color: var(--text-3);
  font-size: 12px;
}

/* ---- Table ---- */

.fmTablePanel {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  overflow: hidden;
}

.fmTableScroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fmProductTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fmProductTable.cuiDataListTable {
  display: grid;
  min-width: 100%;
}

.fmProductTable thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.fmProductTable thead th,
.fmProductTable .cuiDataListTableHeadCell {
  background: var(--surface-panel-strong);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 11px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-dark-strong);
}

.fmProductTable tbody td,
.fmProductTable .cuiDataListTableCell {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--text-2);
  vertical-align: middle;
}

.fmProductTable tbody tr:last-child td,
.fmProductTable .cuiDataListTableRow:last-child .cuiDataListTableCell {
  border-bottom: 0;
}

.fmProductTable tbody tr:hover,
.fmProductTable .cuiDataListTableRow:not(.cuiDataListTableHead):hover {
  background: var(--surface-dark-hover);
}

.fmCompactTable thead th,
.fmCompactTable .cuiDataListTableHeadCell {
  font-size: 11px;
  padding: 8px 10px;
}

.fmCompactTable tbody td,
.fmCompactTable .cuiDataListTableCell {
  padding: 10px;
  font-size: 12px;
}

.fmCheckCol {
  width: 44px;
  text-align: center;
}

.fmCheckButton {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  margin: 0 auto;
  transition: color 0.15s;
}

.fmCheckButton:hover {
  color: var(--primary-light);
}

.fmRank {
  font-weight: 800;
  color: var(--text-1);
  text-align: center;
  width: 50px;
}

/* Product cell */

.fmProductCol {
  min-width: 260px;
}

.fmProductCell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fmProductImage {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: var(--surface-panel-strong);
  object-fit: cover;
  flex-shrink: 0;
}

.fmProductTitle {
  display: block;
  overflow: hidden;
  color: var(--text-1);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  max-width: 220px;
  transition: color 0.15s;
}

.fmProductTitle:hover {
  color: var(--primary-light);
}

.fmProductMeta {
  display: flex;
  gap: 8px;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 11px;
}

/* Country */

.fmCountry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.fmCountry img {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
}

/* Shop cell */

.fmShopCell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fmShopCell img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.fmShopCell strong {
  display: block;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmShopCell span {
  display: block;
  color: var(--text-3);
  font-size: 11px;
  margin-top: 2px;
}

/* Pill */

.fmPill {
  display: inline-block;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
}

/* Trend */

.fmTrend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  font-size: 13px;
}

.fmTrend.up {
  color: #34d399;
}

.fmTrend.down {
  color: #f87171;
}

.fmTrend.flat {
  color: var(--text-3);
}

/* Sparkline */

.fmSpark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 28px;
  width: 64px;
}

.fmSpark span {
  flex: 1 1;
  min-height: 2px;
  border-radius: 999px;
  background: var(--primary-soft);
}

.fmSpark span:nth-child(odd) {
  background: var(--primary);
}

/* Video thumb */

.fmVideoThumb {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fmVideoThumb img {
  width: 48px;
  height: 64px;
  border-radius: 5px;
  object-fit: cover;
}

.fmVideoThumb > span {
  position: absolute;
  top: 4px;
  left: 4px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
}

.fmVideoThumb em {
  color: var(--text-1);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

/* Row actions */

.fmRowActions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fmRowActions button,
.fmRowActions a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}

.fmRowActions button:hover,
.fmRowActions a:hover {
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.fmRowActions button.active,
.fmRowActions button.active:hover {
  color: #f87171;
}

/* Pagination */

.fmPagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line-dark);
  flex-wrap: wrap;
}

.fmPagination > span {
  color: var(--text-3);
  font-size: 12px;
}

.fmPagination select {
  height: 32px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-dark);
  color: var(--text-2);
  font-size: 12px;
  padding: 0 8px;
  cursor: pointer;
  outline: none;
}

.fmPagination button {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  padding: 0 8px;
  transition: all 0.15s;
}

.fmPagination button:hover:not(:disabled) {
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.fmPagination button.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.fmPagination button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---- Toast ---- */

.fmToast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  min-width: 260px;
  max-width: 400px;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: var(--shadow-dark);
  animation: fmToastIn 0.25s ease-out;
}

@keyframes fmToastIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== FastMoss Product Detail ===== */

.fmDetailPage {
  gap: 20px;
}

.fmDetailHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.fmBreadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 13px;
}

.fmBreadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}

.fmBreadcrumb a:hover {
  color: var(--primary-light);
}

.fmBreadcrumb > span {
  color: var(--text-2);
}

/* Detail Hero */

.fmDetailHero {
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(280px, 1fr);
  gap: 20px;
}

/* Gallery */

.fmGallery {
  display: grid;
  gap: 10px;
}

.fmHeroImage {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid var(--line-dark);
  background: var(--surface-panel);
  object-fit: cover;
}

.fmThumbStrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.fmThumbStrip button {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel);
  padding: 2px;
  cursor: pointer;
  transition: border-color 0.15s;
  overflow: hidden;
}

.fmThumbStrip button.active {
  border-color: var(--primary-border-strong);
}

.fmThumbStrip button img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

/* Detail Info */

.fmDetailInfo {
  display: grid;
  gap: 14px;
  align-content: start;
}

.fmDetailInfo h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}

.fmStatusLine {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-3);
}

.fmStatus {
  display: inline-block;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
}

.fmDetailMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--text-2);
}

.fmDetailMeta .fmCountry img {
  width: 20px;
  height: 14px;
}

.fmShopBanner {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px 14px;
}

.fmShopBanner img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

.fmShopBanner strong {
  display: block;
  color: var(--text-1);
  font-size: 14px;
}

.fmShopBanner span {
  display: block;
  color: var(--text-3);
  font-size: 11px;
  margin-top: 2px;
}

.fmShopBanner > div:nth-child(2) {
  flex: 1 1;
  min-width: 0;
}

.fmShopBanner button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}

.fmShopBanner button:hover {
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.fmPriceBlock {
  display: grid;
  gap: 4px;
}

.fmPriceBlock > span {
  color: var(--text-3);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.fmPriceBlock > strong {
  color: var(--text-1);
  font-size: 1.5rem;
  font-weight: 800;
}

/* Overview cards */

.fmOverviewCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.fmOverviewCards article {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
  display: grid;
  gap: 4px;
}

.fmOverviewCards article p {
  margin: 0;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fmOverviewCards article strong {
  color: var(--text-1);
  font-size: 1.15rem;
  font-weight: 800;
}

.fmOverviewCards article span {
  color: var(--text-3);
  font-size: 11px;
}

/* ---- Charts & Panels ---- */

.fmChartGrid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
}

.fmPanel {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  overflow: hidden;
}

.fmPanelHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-dark);
}

.fmPanelHead h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 700;
}

.fmPanelHead > div {
  display: flex;
  gap: 4px;
}

.fmPanelHead > div button {
  border: 1px solid var(--line-dark);
  border-radius: 5px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s;
}

.fmPanelHead > div button.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.fmPanelHead a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.fmPanelHead a:hover {
  color: var(--primary-light);
}

/* Line chart */

.fmTrendPanel {
  min-height: 220px;
}

.fmLineChart {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 180px;
  padding: 18px 16px 24px;
}

.fmLineChart > div {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}

.fmLineChart > div > span {
  width: 100%;
  max-width: 28px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--primary), var(--primary-soft));
  transition: height 0.3s;
}

.fmLineChart > div > em {
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
  margin-top: 6px;
}

.fmLineChart > div > strong {
  position: absolute;
  top: -16px;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
}

/* Donut */

.fmDonutWrap {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 16px;
}

.fmDonut {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    var(--primary) 0deg 202deg,
    var(--accent) 202deg 314deg,
    var(--surface-panel-strong) 314deg 360deg
  );
  flex-shrink: 0;
}

.fmDonutWrap ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.fmDonutWrap ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
}

.fmDonutWrap ul li span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.fmDonutWrap ul li:nth-child(1) span {
  background: var(--primary);
}

.fmDonutWrap ul li:nth-child(2) span {
  background: var(--accent);
}

.fmDonutWrap ul li:nth-child(3) span {
  background: var(--surface-panel-strong);
}

/* Tab buttons */

.fmTabButtons {
  display: flex;
  gap: 2px;
}

.fmTabButtons button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.fmTabButtons button:hover {
  background: var(--surface-dark-hover);
  color: var(--text-1);
}

.fmTabButtons button.active {
  background: var(--surface-panel-strong);
  color: var(--text-1);
}

/* Review grid */

.fmReviewGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding: 16px;
}

.fmReviewGrid article {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-dark);
  padding: 16px;
  text-align: center;
}

.fmReviewGrid article strong {
  display: block;
  color: #34d399;
  font-size: 1.8rem;
  font-weight: 800;
}

.fmReviewGrid article span {
  display: block;
  color: var(--text-3);
  font-size: 12px;
  margin-top: 4px;
}

.fmReviewGrid button {
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.fmReviewGrid button:hover {
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

/* Similar grid */

.fmSimilarGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  padding: 16px;
}

.fmSimilarGrid article {
  display: flex;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-dark);
  padding: 12px;
  transition: background 0.15s;
  cursor: pointer;
}

.fmSimilarGrid article:hover {
  background: var(--surface-dark-hover);
}

.fmSimilarGrid article img {
  width: 64px;
  height: 64px;
  border-radius: 7px;
  object-fit: cover;
  flex-shrink: 0;
}

.fmSimilarGrid article strong {
  display: block;
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmSimilarGrid article span {
  display: block;
  color: var(--text-3);
  font-size: 12px;
  margin-top: 3px;
}

.fmSimilarGrid article p {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 12px;
  display: flex;
  gap: 12px;
}

.fmSimilarGrid article p em {
  color: var(--text-3);
  font-style: normal;
}

/* Empty state */

.fmEmptyState {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-3);
}

.fmEmptyState svg {
  opacity: 0.4;
}

.fmEmptyState strong {
  color: var(--text-2);
  font-size: 14px;
}

.fmEmptyState span {
  font-size: 12px;
  max-width: 280px;
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
  .fmPageHead {
    flex-direction: column;
  }

  .fmHeadActions {
    flex-wrap: wrap;
    width: 100%;
  }

  .fmFilters {
    flex-direction: column;
  }

  .fmFieldWide {
    flex: auto;
  }

  .fmToolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .fmStatsGrid {
    grid-template-columns: 1fr 1fr;
  }

  .fmPagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .fmChartGrid {
    grid-template-columns: 1fr;
  }

  .fmDetailHero {
    grid-template-columns: 1fr;
  }
}

/* ---- Section Navigation Tabs ---- */

.fmSectionNav {
  display: flex;
  gap: 2px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 4px;
}

.fmSectionNav a {
  flex: 1 1;
  display: grid;
  place-items: center;
  height: 38px;
  border-radius: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
}

.fmSectionNav a:hover {
  background: var(--surface-dark-hover);
  color: var(--text-1);
}

.fmSectionNav a.active {
  background: var(--primary-soft);
  color: var(--primary-light);
  border: 1px solid var(--primary-border);
}

/* Overview cards in detail hero - full width */

.fmDetailHero .fmOverviewCards {
  grid-column: 1 / -1;
}

/* ---- Review Summary ---- */

.fmReviewSummary {
  display: flex;
  gap: 24px;
  padding: 20px 16px;
  border-bottom: 1px solid var(--line-dark);
  align-items: center;
  flex-wrap: wrap;
}

.fmReviewSummary > article {
  text-align: center;
  min-width: 100px;
}

.fmReviewSummary > article strong {
  display: block;
  color: var(--text-1);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
}

.fmStars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
}

.fmStars span {
  color: var(--text-3);
  font-size: 11px;
  margin-left: 8px;
}

.fmReviewSummary > article > span {
  display: block;
  color: var(--text-3);
  font-size: 12px;
  margin-top: 6px;
}

.fmReviewTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1;
}

.fmReviewTags button {
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--surface-dark);
  color: var(--text-2);
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.fmReviewTags button:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

/* ---- Review List ---- */

.fmReviewList {
  display: grid;
  gap: 0;
}

.fmReviewList > article {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-dark);
}

.fmReviewList > article:last-child {
  border-bottom: 0;
}

.fmReviewList > article p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
  padding-left: 36px;
}

/* ---- Section title ---- */

.fmSectionTitle {
  margin: 0 0 4px;
  color: var(--text-1);
  font-size: 22px;
  font-weight: 700;
}

/* ---- Horizontal bars ---- */

.fmHorizontalBars {
  display: grid;
  gap: 10px;
  padding: 16px 20px;
}

.fmHorizontalBars > div {
  display: grid;
  grid-template-columns: 60px 1fr 36px;
  align-items: center;
  gap: 10px;
}

.fmHorizontalBars > div > span:first-child {
  color: var(--text-2);
  font-size: 12px;
  text-align: right;
}

.fmHorizontalBars > div > div {
  height: 16px;
  border-radius: 999px;
  background: var(--surface-panel-strong);
  overflow: hidden;
}

.fmHorizontalBars > div > div > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s;
}

.fmHorizontalBars > div > em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

/* ---- Chart body ---- */

.fmChartBody {
  padding: 8px 0;
}

/* ---- Chip row (horizontal clickable filters) ---- */

.fmChipRow {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 10px;
}

.fmChipRow + .fmChipRow {
  border-top: 1px solid var(--line-dark);
}

.fmChipRow > span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  margin-right: 4px;
}

.fmChipRow button {
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.fmChipRow button:hover {
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.fmChipRow button.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

/* ---- Total count hint ---- */

.fmTotalHint {
  color: var(--text-3) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--line-dark);
}

/* ---- Refined chip row ---- */

.fmChipRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding-top: 8px;
}

.fmChipRow > span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 72px;
  white-space: nowrap;
}

.fmChipRow > span::after {
  content: '';
}

.fmChipRow button {
  flex-shrink: 0;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-dark);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.fmChipRow button:hover {
  background: var(--surface-dark-hover);
  color: var(--text-1);
  border-color: var(--line-dark-strong);
}

.fmChipRow button.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
  font-weight: 700;
}

/* ---- Search bar refinements ---- */

.fmSearchBand {
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: var(--surface-panel);
  padding: 16px;
}

.fmFilters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.fmInputShell {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-dark);
  padding: 0 12px;
  transition: border-color 0.15s;
}

.fmInputShell:focus-within {
  border-color: var(--primary-border);
}

.fmInputShell input {
  flex: 1 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text-1);
  font-size: 13px;
  outline: none;
}

.fmInputShell input::placeholder {
  color: var(--text-3);
}

.fmInputShell svg {
  color: var(--text-3);
  flex-shrink: 0;
}

/* ---- Selected tags ---- */

.fmSelected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-dark);
}

.fmSelected > span {
  color: var(--text-3);
  font-size: 12px;
  flex-shrink: 0;
}

.fmSelected > button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-light);
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.fmSelected > button:hover {
  background: var(--primary-active-bg);
}

.fmClear {
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: underline;
}

.fmClear:hover {
  color: var(--text-2);
}

/* ---- Search row ---- */

.fmSearchRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fmSearchRow .fmInputShell {
  flex: 1 1;
  min-width: 200px;
}

.fmInputClear {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-panel-strong);
  color: var(--text-3);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.fmInputClear:hover {
  background: var(--line-dark-strong);
  color: var(--text-2);
}

/* ---- Chip rows (refined) ---- */

.fmChipRow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
}

.fmChipRow > span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 72px;
  padding-top: 6px;
}

.fmChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1;
  min-width: 0;
}

.fmChips button {
  flex-shrink: 0;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-dark);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.fmChips button:hover {
  background: var(--surface-dark-hover);
  color: var(--text-1);
  border-color: var(--line-dark-strong);
}

.fmChips button.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
  font-weight: 700;
}

/* ---- Filter form rows (FastMoss style) ---- */

.fmFilterRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.fmFilterRow + .fmFilterRow {
  border-top: 1px solid transparent;
}

.fmFilterLabel {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 72px;
  line-height: 32px;
}

.fmRadioGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1;
  min-width: 0;
}

.fmRadioGroup button {
  flex-shrink: 0;
  height: 32px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-dark);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  padding: 0 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.fmRadioGroup button:hover {
  background: var(--surface-dark-hover);
  color: var(--text-1);
  border-color: var(--line-dark-strong);
}

.fmRadioGroup button.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
  font-weight: 700;
}

/* Search shell (full width in filter row) */

.fmSearchShell {
  flex: 1 1;
  min-width: 200px;
  height: 38px;
}

.fmInputClear {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-panel-strong);
  color: var(--text-3);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.fmInputClear:hover {
  background: var(--line-dark-strong);
  color: var(--text-2);
}

/* Selected filter tags */

.fmSelectedTags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1;
  min-width: 0;
}

.fmSelectedTags > button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-light);
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.fmSelectedTags > button:hover {
  background: var(--primary-active-bg);
}

.fmSearchBand {
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: var(--surface-panel);
  padding: 14px 16px;
}

.fmSearchPageTitle {
  margin: 0 0 -2px;
  color: var(--fm-text, #182033);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.fmSearchBandReplica {
  display: grid;
  gap: 0;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(24, 32, 51, 0.05);
  padding: 22px 28px 26px;
}

.fmReplicaSearchTop {
  display: flex;
  align-items: center;
  min-height: 50px;
}

.fmReplicaSearchBox {
  width: min(620px, 100%);
  height: 44px;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto 44px;
  align-items: center;
  overflow: hidden;
  border: 2px solid var(--fm-accent, #f43f78);
  border-radius: 999px;
  background: #fff;
}

.fmReplicaSearchBox input {
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: #1f2937;
  font: inherit;
  font-size: 14px;
  font-weight: 760;
  outline: none;
  padding: 0 22px;
}

.fmReplicaSearchBox input::placeholder {
  color: #a8afbd;
}

.fmReplicaSearchBox .fmInputClear {
  width: 26px;
  height: 26px;
  border: 0;
  background: #f7f8fb;
  color: #8b95a7;
}

.fmTranslateButton,
.fmImageSearchButton,
.fmReplicaSearchButton {
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 860;
  white-space: nowrap;
}

.fmTranslateButton {
  background: #fff;
  color: #1f2937;
  padding: 0 10px;
}

.fmTranslateButton:hover {
  color: var(--fm-accent, #f43f78);
}

.fmImageSearchButton {
  height: 34px;
  align-self: center;
  border-radius: 999px;
  background: var(--fm-accent, #f43f78);
  color: #fff;
  padding: 0 13px;
}

.fmImageSearchButton:hover,
.fmReplicaSearchButton:hover {
  background: var(--fm-accent-strong, #e92b69);
}

.fmReplicaSearchButton {
  width: 44px;
  background: var(--fm-accent, #f43f78);
  color: #fff;
}

.fmReplicaDivider {
  height: 1px;
  margin: 20px 0 18px;
  background: #edf0f5;
}

.fmReplicaFilterRow {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 45px;
}

.fmReplicaLabel {
  color: #4b5565;
  font-size: 14px;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.fmReplicaOptions {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.fmReplicaOptions.compact {
  gap: 10px 18px;
}

.fmReplicaOptions button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #1f2937;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 760;
  padding: 0 12px;
  white-space: nowrap;
}

.fmReplicaOptions button:hover {
  color: var(--fm-accent, #f43f78);
}

.fmReplicaOptions button.active {
  background: var(--fm-accent, #f43f78);
  color: #fff;
  font-weight: 920;
}

.fmReplicaOptions button em {
  min-height: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #20d6b0;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  padding: 0 4px;
}

.fmReplicaExpand {
  margin-left: auto;
  background: #fff0f5 !important;
  color: var(--fm-accent, #f43f78) !important;
}

.fmReplicaChecks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.fmReplicaChecks label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1f2937;
  cursor: pointer;
  font-size: 14px;
  font-weight: 760;
  white-space: nowrap;
}

.fmReplicaChecks input {
  width: 16px;
  height: 16px;
}

.fmDateRange {
  width: min(310px, 100%);
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  align-items: center;
  border: 1px solid #e4e8ef;
  border-radius: 999px;
  background: #fff;
  padding: 0 12px;
}

.fmDateRange input {
  min-width: 0;
  height: 34px;
  border: 0;
  background: transparent;
  color: #475467;
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  outline: none;
}

.fmDateRange span {
  color: #98a2b3;
  text-align: center;
}

.fmReplicaSelects {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  overflow: visible;
}

.fmPaginationSelect {
  --creator-accent: var(--primary);
  --creator-line: var(--line-dark, #e5e7eb);
  --creator-muted: var(--text-3, #667085);
  --creator-popover-bg: #ffffff;
  --creator-text: var(--text-1, #111827);
  --filter-select-bg: var(--surface-panel, #ffffff);
  --filter-select-hover-bg: color-mix(in srgb, var(--primary) 7%, #ffffff);
  flex: 0 0 124px;
  width: 124px;
  min-width: 124px;
}

.fmPaginationSelect .filterSelectTrigger {
  min-height: 32px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 0 8px 0 10px;
}

.fmPaginationSelect .filterSelectValue {
  flex: 1 1 auto;
  overflow: visible;
  font-size: 12px;
  font-weight: 800;
  text-overflow: clip;
}

.fmPaginationSelectMenu {
  width: 112px;
  min-width: 112px;
  z-index: 1200;
}

.fmReplicaFilterSelect {
  --creator-accent: var(--primary);
  --creator-line: #e4e8ef;
  --creator-muted: #667085;
  --creator-popover-bg: #ffffff;
  --creator-text: var(--text-1, #111827);
  --filter-select-bg: #ffffff;
  --filter-select-hover-bg: color-mix(in srgb, var(--primary) 7%, #ffffff);
  flex: 0 0 auto;
  width: clamp(138px, 10vw, 176px);
  min-width: 138px;
}

.fmReplicaFilterSelect .filterSelectTrigger {
  min-height: 38px;
  border: 1px solid var(--commerce-control-line);
  border-radius: var(--cui-radius-md);
  background: var(--commerce-control-bg);
  color: var(--text-1, #111827);
  padding: 0 10px 0 13px;
}

.fmReplicaFilterSelect.open .filterSelectTrigger,
.fmReplicaFilterSelect:focus-within .filterSelectTrigger {
  border-color: color-mix(in srgb, var(--primary) 36%, #e4e8ef);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.fmReplicaFilterSelect .filterSelectSelectedText {
  gap: 4px;
  flex-wrap: nowrap;
}

.fmReplicaFilterSelect .filterSelectLabel,
.fmReplicaFilterSelect .filterSelectValue {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1, #111827);
  font-size: 13px;
  font-weight: 860;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmReplicaFilterSelect .filterSelectLabel {
  flex: 1 1 auto;
  color: #344054;
}

.fmReplicaFilterSelect .filterSelectValue {
  flex: 0 0 auto;
  max-width: 42px;
  color: var(--primary);
}

.fmReplicaFilterSelectMenu {
  width: 128px;
  min-width: 128px;
  z-index: 1200;
}

.fmReplicaFilterSelectMenu .filterSelectOption {
  min-height: 34px;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .fmSearchBandReplica {
    padding: 18px;
  }

  .fmReplicaFilterRow {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .fmReplicaOptions {
    gap: 8px 12px;
  }
}

@media (max-width: 760px) {
  .fmReplicaSearchBox {
    grid-template-columns: minmax(80px, 1fr) 42px;
  }

  .fmTranslateButton,
  .fmImageSearchButton {
    display: none;
  }

  .fmReplicaFilterRow {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
    padding: 6px 0;
  }

  .fmReplicaLabel {
    text-align: left;
  }

  .fmReplicaSelects {
    align-items: stretch;
  }

  .fmReplicaFilterSelect {
    width: min(176px, 62vw);
    min-width: 136px;
  }
}

/* Product search screenshot alignment and workspace theme color pass. */

.fastmossProductPage {
  --fm-accent: var(--primary);
  --fm-accent-strong: var(--primary-light);
  --fm-accent-soft: color-mix(in srgb, var(--primary) 12%, #ffffff);
}

.fmSearchPageTitle {
  margin: 0 0 4px;
  padding-left: 0;
  color: var(--text-1, #111827);
  font-size: 20px;
  font-weight: 920;
}

.fmSearchBandReplica {
  min-height: 0;
  align-content: start;
  border-radius: 8px;
  background: #fff;
  padding: 22px 28px 24px;
}

.fmReplicaSearchTop {
  min-height: 50px;
}

.fmReplicaSearchBox {
  width: min(725px, 100%);
  height: 52px;
  grid-template-columns: minmax(220px, 1fr) 76px 118px 54px;
  border-color: var(--primary);
  border-radius: 999px;
}

.fmReplicaSearchBox input {
  font-size: 15px;
  padding-left: 26px;
}

.fmTranslateButton {
  color: var(--text-1, #111827);
  padding-inline: 8px;
}

.fmTranslateButton:hover {
  color: var(--primary);
}

.fmImageSearchButton {
  height: 38px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  padding-inline: 15px;
}

.fmReplicaSearchButton {
  width: 54px;
  background: var(--primary);
  color: #fff;
}

.fmImageSearchButton:hover,
.fmReplicaSearchButton:hover {
  background: var(--primary-light);
}

.fmReplicaDivider {
  margin: 20px 0 16px;
}

.fmReplicaFilterRow {
  grid-template-columns: 122px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  min-height: 42px;
}

.fmReplicaLabel {
  padding-top: 6px;
  color: #364152;
  font-size: 15px;
  font-weight: 900;
  text-align: right;
}

.fmReplicaOptions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, max-content));
  align-items: start;
  gap: 8px 26px;
}

.fmReplicaOptions.compact {
  grid-template-columns: repeat(auto-fit, minmax(72px, max-content));
  gap: 8px 22px;
}

.fmReplicaOptions button {
  min-width: 0;
  min-height: 36px;
  justify-content: center;
  color: var(--text-1, #111827);
  font-size: 15px;
  font-weight: 820;
  padding-inline: 13px;
}

.fmReplicaOptions button.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 22%, transparent);
}

.fmReplicaOptions button:hover {
  color: var(--primary);
}

.fmReplicaOptions button.active:hover {
  color: #fff;
}

.fmReplicaExpand {
  justify-self: end;
  margin-left: 0;
  background: var(--fm-accent-soft) !important;
  color: var(--primary) !important;
}

.fmReplicaChecks {
  min-height: 34px;
  gap: 22px;
  padding-top: 4px;
}

.fmReplicaChecks label {
  color: var(--text-1, #111827);
  font-size: 15px;
  font-weight: 820;
}

.fmReplicaChecks input {
  width: 18px;
  height: 18px;
}

.fmDateRange {
  width: 360px;
  min-height: 38px;
  margin-top: 0;
}

.fmDateRange input {
  height: 36px;
  font-size: 14px;
}

.fmReplicaSelects {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  overflow: visible;
}

@media (max-width: 1180px) {
  .fmReplicaOptions {
    grid-template-columns: repeat(auto-fit, minmax(82px, max-content));
    gap: 10px 16px;
  }

  .fmReplicaFilterRow {
    grid-template-columns: 104px minmax(0, 1fr);
  }
}

/* Product rank pages: FastMoss-style top filters for sales/new/hot ranks. */

.fmRankFilterBand {
  min-height: unset;
  height: max-content;
  align-self: start;
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid #eef1f5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(24, 32, 51, 0.05);
  padding: 14px 20px 12px;
}

.fmCoreRankPage {
  align-content: start;
  gap: 8px;
  row-gap: 8px;
}

.fmCoreRankPage .fmListPanel {
  margin-top: 0;
  border: 1px solid #eef1f5;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(24, 32, 51, 0.05);
}

.fmProductSection-new.fmCoreRankPage .fmListPanel,
.fmProductSection-hot.fmCoreRankPage .fmListPanel {
  margin-top: 0;
}

.fmCoreRankPage .fmRankFilterBand {
  margin-bottom: 0;
  padding-bottom: 12px;
}

.fmListPanel {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  border: 0;
  gap: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(24, 32, 51, 0.05);
  overflow: hidden;
}

.fmListPanel .cuiDataListToolbar {
  min-height: 52px;
  align-items: center;
  border-bottom-color: #eef1f5;
  background: #fff;
  padding: 10px 18px;
}

.fmCoreRankPage .fmListPanel > .cuiDataListToolbar {
  min-height: 52px;
}

.fmListPanel .fmSortGroup {
  gap: 10px;
}

.fmListPanel .fmSortGroup > span {
  color: #344054;
  font-size: 14px;
  font-weight: 850;
}

.fmListPanel .fmSortGroup button,
.fmListPanel .fmIconText {
  min-height: 38px;
  border: 1px solid #e8edf4;
  border-radius: 12px;
  background: #fff;
  color: #364152;
  box-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
  font-size: 14px;
  font-weight: 700;
}

.fmListPanel .fmSortGroup button {
  padding: 0 17px;
}

.fmListPanel .fmSortGroup button:hover,
.fmListPanel .fmIconText:hover {
  border-color: color-mix(in srgb, var(--primary) 24%, #e8edf4);
  background: color-mix(in srgb, var(--primary) 6%, #ffffff);
  color: var(--primary);
}

.fmListPanel .fmSortGroup button.active {
  border-color: color-mix(in srgb, var(--primary) 34%, #e8edf4);
  background: color-mix(in srgb, var(--primary) 12%, #ffffff);
  color: var(--primary);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 10%, transparent);
}

.fmListPanel .fmTotalHint {
  margin-left: 10px;
  color: #5f6b7a !important;
}

.fmListPanel .fmBatchActions {
  gap: 10px;
  flex-wrap: wrap;
}

.fmListPanel .fmBatchActions > span {
  color: #98a2b3;
  font-size: 13px;
}

.fmListPanel .fmIconText {
  padding: 0 16px;
}

.fmListPanel .cuiDataListBody {
  background: #fff;
}

.fmListPanel .cuiDataListFooter {
  border-top-color: #edf0f5;
  padding: 16px 20px;
}

.fmListPanel .fmProductTable thead th {
  border-top: 1px solid #eef1f5;
  border-bottom: 1px solid #eef1f5;
  background: #fff;
  color: #667085;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  padding: 18px 18px;
}

.fmListPanel .fmProductTable tbody td {
  border-bottom-color: #edf0f5;
  padding: 18px 18px;
}

.fmListPanel .fmProductTable tbody tr:hover {
  background: #fbfdff;
}

.fmListPanel .cuiDataListFooter > .fmPagination {
  width: 100%;
  border-top: 0;
  padding: 0;
}

.commerceDataListPanel.cuiDataList {
  --commerce-list-cell-x: 22px;
  --commerce-list-head-height: 78px;
  --commerce-list-row-height: 142px;
  --commerce-list-media: 64px;
  --commerce-list-secondary-media: 44px;
  --commerce-list-chart-width: 150px;
  --commerce-list-chart-height: 86px;
  --commerce-list-action-size: 36px;
  --commerce-list-line: #edf0f5;
  --commerce-list-text: #101828;
  --commerce-list-muted: #667085;
  border: 1px solid #eef1f5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(24, 32, 51, 0.06);
  overflow: hidden;
}

.commerceDataListPanel .cuiDataListHeader,
.commerceDataListPanel.shopResultsCard .cuiDataListHeader {
  min-height: var(--commerce-list-head-height);
  align-items: center;
  border-bottom-color: var(--commerce-list-line);
  background: #fff;
  padding: 18px var(--commerce-list-cell-x);
}

.commerceDataListPanel.shopResultsCard .cuiDataListTitle,
.commerceDataListPanel .cuiDataListTitle {
  color: var(--commerce-list-text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.25;
}

.commerceDataListPanel.shopResultsCard .cuiDataListDescription,
.commerceDataListPanel .cuiDataListDescription {
  color: var(--commerce-list-muted);
  font-size: 13px;
  font-weight: 700;
}

.commerceDataListPanel .cuiDataListToolbar {
  min-height: 64px;
  align-items: center;
  border-bottom-color: var(--commerce-list-line);
  background: #fff;
  padding: 14px var(--commerce-list-cell-x);
}

.commerceDataListPanel .cuiDataListBody {
  background: #fff;
}

.commerceDataListPanel .cuiDataListFooter {
  border-top-color: var(--commerce-list-line);
  padding: 18px var(--commerce-list-cell-x);
}

.commerceDataListPanel .commerceSearchTableRow,
.commerceDataListPanel .cuiDataListTableRow {
  min-height: var(--commerce-list-row-height);
  gap: 0;
  border-bottom-color: var(--commerce-list-line);
  color: #344054;
  font-size: 14px;
  padding: 0;
}

.commerceDataListPanel .commerceSearchTableRow.head,
.commerceDataListPanel .cuiDataListTableHead {
  min-height: var(--commerce-list-head-height);
  border-bottom: 1px solid var(--commerce-list-line);
  background: #fff;
  color: var(--commerce-list-text);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: none;
}

.commerceDataListPanel .commerceSearchTableRow > span,
.commerceDataListPanel .commerceSearchTableRow.head span,
.commerceDataListPanel .commerceSearchTableRow.head > button,
.commerceDataListPanel .commerceSearchTableRow > div,
.commerceDataListPanel .cuiDataListTableHeadCell,
.commerceDataListPanel .cuiDataListTableCell {
  min-width: 0;
  padding: 0 var(--commerce-list-cell-x);
}

.commerceDataListPanel.fmListPanel .fmProductTable,
.commerceDataListPanel.shopResultsCard .shopSearchTable {
  border-collapse: collapse;
  color: var(--commerce-list-text);
  font-size: 14px;
}

.commerceDataListPanel.fmListPanel .fmProductTable thead th,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableHeadCell,
.commerceDataListPanel.shopResultsCard .shopSearchTable thead th,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableHeadCell {
  height: var(--commerce-list-head-height);
  border-bottom: 1px solid var(--commerce-list-line);
  background: #fff;
  color: var(--commerce-list-text);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0;
  padding: 0 var(--commerce-list-cell-x);
  text-transform: none;
  vertical-align: middle;
}

.commerceDataListPanel.fmListPanel .fmProductTable tbody tr,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableRow:not(.cuiDataListTableHead),
.commerceDataListPanel.shopResultsCard .shopSearchTable tbody tr,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableRow:not(.cuiDataListTableHead) {
  height: var(--commerce-list-row-height);
}

.commerceDataListPanel.fmListPanel .fmProductTable tbody td,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableCell,
.commerceDataListPanel.shopResultsCard .shopSearchTable tbody td,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableCell {
  border-bottom: 1px solid var(--commerce-list-line);
  color: #344054;
  font-size: 14px;
  line-height: 1.45;
  padding: 24px var(--commerce-list-cell-x);
  vertical-align: middle;
}

.commerceDataListPanel.fmListPanel .fmProductTable tbody tr:hover,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableRow:not(.cuiDataListTableHead):hover,
.commerceDataListPanel.shopResultsCard .shopSearchTable tbody tr:hover,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableRow:not(.cuiDataListTableHead):hover {
  background: #fbfdff;
}

.commerceDataListPanel.fmListPanel .fmCheckCol {
  width: 64px;
  min-width: 64px;
}

.commerceDataListPanel.fmListPanel .fmProductCol,
.commerceDataListPanel.shopResultsCard .shopSearchTable th:first-child,
.commerceDataListPanel.shopResultsCard .shopSearchTable td:first-child,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableHeadCell:first-child,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableCell:first-child {
  width: 320px;
  min-width: 320px;
}

.commerceDataListPanel.fmListPanel .fmProductCell,
.commerceDataListPanel.shopResultsCard .shopInfoCell {
  min-width: 0;
  gap: 18px;
}

.commerceDataListPanel.fmListPanel .fmProductImage,
.commerceDataListPanel.creatorResultPanel .creatorPhoto,
.commerceDataListPanel.shopResultsCard .shopAvatar {
  width: var(--commerce-list-media);
  height: var(--commerce-list-media);
  flex: 0 0 var(--commerce-list-media);
}

.commerceDataListPanel.fmListPanel .fmProductImage,
.commerceDataListPanel.shopResultsCard .shopAvatar {
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(24, 32, 51, 0.08);
}

.commerceDataListPanel.creatorResultPanel .creatorPhoto {
  border-radius: 999px;
  font-size: 16px;
}

.commerceDataListPanel.fmListPanel .fmProductTitle,
.commerceDataListPanel.shopResultsCard .shopInfoCell strong,
.commerceDataListPanel.creatorResultPanel .creatorIdentityCell strong {
  color: var(--commerce-list-text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.35;
}

.commerceDataListPanel.fmListPanel .fmProductTitle {
  max-width: 250px;
}

.commerceDataListPanel.fmListPanel .fmProductMeta,
.commerceDataListPanel.fmListPanel .fmShopCell span,
.commerceDataListPanel.creatorResultPanel .creatorIdentityCell em,
.commerceDataListPanel.creatorResultPanel .creatorIdentityCell small,
.commerceDataListPanel.shopResultsCard .shopInfoCell small {
  margin-top: 5px;
  color: var(--commerce-list-muted);
  font-size: 12px;
  line-height: 1.4;
}

.commerceDataListPanel.fmListPanel .fmProductCell {
  align-items: center;
}

.commerceDataListPanel.fmListPanel .fmProductInfo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.commerceDataListPanel.fmListPanel .fmProductTitleRow {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.commerceDataListPanel.fmListPanel .fmProductTranslate {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--commerce-list-line);
  border-radius: 6px;
  background: #fff;
  color: var(--commerce-list-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.commerceDataListPanel.fmListPanel .fmProductTranslate:hover {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
}

.commerceDataListPanel.fmListPanel .fmProductPrice {
  color: var(--commerce-list-muted);
  font-size: 12px;
  line-height: 1.3;
}

.commerceDataListPanel.fmListPanel .fmProductTags {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.commerceDataListPanel.fmListPanel .fmFlag {
  width: 20px;
  height: 14px;
  flex: 0 0 20px;
  border-radius: 3px;
  object-fit: cover;
}

.commerceDataListPanel.fmListPanel .fmCategoryText {
  overflow: hidden;
  color: var(--commerce-list-text);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerceDataListPanel.fmListPanel .fmRatingBadge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  background: rgba(245, 158, 11, 0.16);
  color: #d97706;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
}

.commerceDataListPanel.fmListPanel .fmProductSub {
  display: flex;
  align-items: center;
  gap: 8px;
}

.commerceDataListPanel.fmListPanel .fmCommissionText {
  color: var(--commerce-list-muted);
  font-size: 12px;
}

.commerceDataListPanel.fmListPanel .fmSkuBadge {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--fm-accent) 30%, transparent);
  border-radius: 999px;
  background: var(--fm-accent-soft);
  color: var(--fm-accent);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  cursor: pointer;
}

.commerceDataListPanel.fmListPanel .fmShopCell {
  gap: 12px;
}

.commerceDataListPanel.fmListPanel .fmShopCell img {
  width: var(--commerce-list-secondary-media);
  height: var(--commerce-list-secondary-media);
  border-radius: 12px;
}

.commerceDataListPanel.fmListPanel .fmSpark,
.commerceDataListPanel.creatorResultPanel .creatorTrendCell svg,
.commerceDataListPanel.shopResultsCard .shopTrendSvg {
  width: var(--commerce-list-chart-width);
  height: var(--commerce-list-chart-height);
}

.commerceDataListPanel.fmListPanel .fmRowActions button,
.commerceDataListPanel.fmListPanel .fmRowActions a,
.commerceDataListPanel.creatorResultPanel .creatorFavoriteAction,
.commerceDataListPanel.shopResultsCard .shopSearchTable td > button,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableCell > button {
  width: var(--commerce-list-action-size);
  height: var(--commerce-list-action-size);
  border: 1px solid #e8edf4;
  border-radius: 999px;
  background: #fff;
  color: var(--commerce-list-muted);
  box-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
}

.commerceDataListPanel.fmListPanel .fmRowActions button.active,
.commerceDataListPanel.fmListPanel .fmRowActions button.active:hover {
  border-color: color-mix(in srgb, #f87171 28%, #e8edf4);
  background: rgba(248, 113, 113, 0.1);
  color: #ef4444;
}

.commerceDataListPanel.fmListPanel .fmProductTable tbody td,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableCell {
  display: flex;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom: 0;
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableRow {
  align-items: stretch;
}

.commerceDataListPanel.fmListPanel .fmProductTable tbody tr,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableRow:not(.cuiDataListTableHead) {
  height: 116px;
  border-bottom: 1px solid var(--commerce-list-line);
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableHeadCell,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableCell {
  justify-content: center;
  text-align: center;
}

.commerceDataListPanel.fmListPanel .fmProductTable .fmCheckCol,
.commerceDataListPanel.fmListPanel .fmProductTable .fmProductCol,
.commerceDataListPanel.fmListPanel .fmProductTable .fmShopCol {
  justify-content: flex-start;
  text-align: left;
}

.commerceDataListPanel.fmListPanel .fmProductTable .fmProductInfo {
  gap: 2px;
}

.commerceDataListPanel.fmListPanel .fmProductTable .fmProductPrice,
.commerceDataListPanel.fmListPanel .fmProductTable .fmProductTags,
.commerceDataListPanel.fmListPanel .fmProductTable .fmProductSub {
  line-height: 1.2;
}

.commerceDataListPanel.fmListPanel .fmProductTable .fmSpark {
  width: 96px;
  height: 34px;
  gap: 3px;
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableHeadCell {
  display: flex;
  align-items: center;
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead {
  gap: 4px;
  white-space: nowrap;
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead > span {
  overflow: visible;
  white-space: nowrap;
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead > em {
  display: inline-flex;
  align-items: center;
  color: var(--commerce-list-muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1;
  transition: color 0.15s, transform 0.15s;
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead:not(:disabled):hover,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead:not(:disabled):hover > em {
  color: var(--fm-accent);
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead.active,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead.active > em {
  color: var(--fm-accent);
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead.active.asc > em {
  transform: rotate(180deg);
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead.active {
  align-self: stretch;
  background: var(--fm-accent-soft);
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortedCell.active {
  display: flex;
  align-items: center;
  align-self: stretch;
  background: var(--fm-accent-soft);
  color: inherit;
}

.commerceDataListPanel.fmListPanel .fmProductTable thead th,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableHeadCell,
.commerceDataListPanel.fmListPanel .fmProductTable tbody td,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableCell {
  padding-left: 14px;
  padding-right: 14px;
}

.commerceDataListPanel.shopResultsCard .shopSearchTable td > button.collected,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableCell > button.collected {
  border-color: color-mix(in srgb, #f59e0b 28%, #e8edf4);
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.commerceDataListPanel.creatorResultPanel .cuiDataListToolbar {
  justify-content: flex-end;
}

.commerceDataListPanel.creatorResultPanel .creatorResultActions,
.commerceDataListPanel.shopResultsCard .shopResultsActions {
  gap: 10px;
}

.commerceDataListPanel.creatorResultPanel .creatorResultActions > button,
.commerceDataListPanel.shopResultsCard .shopResultsActions > button {
  min-height: 38px;
  border: 1px solid #e8edf4;
  border-radius: 12px;
  background: #fff;
  color: #364152;
  box-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
  font-size: 14px;
  font-weight: 700;
}

.commerceDataListPanel.creatorResultPanel .creatorResultActions > button:not(:disabled):hover,
.commerceDataListPanel.shopResultsCard .shopResultsActions > button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--primary) 24%, #e8edf4);
  background: color-mix(in srgb, var(--primary) 6%, #ffffff);
  color: var(--primary);
}

.commerceDataListPanel.creatorResultPanel .creatorSearchTable {
  width: 1740px;
}

.commerceDataListPanel.creatorResultPanel .creatorSearchTableRow {
  grid-template-columns:
    320px
    150px
    160px
    230px
    180px
    140px
    150px
    120px
    120px
    170px
    100px;
}

.commerceDataListPanel.creatorResultPanel .creatorSearchTableRow.head {
  border-top: 1px solid var(--commerce-list-line);
}

.commerceDataListPanel.creatorResultPanel .creatorIdentityCell {
  grid-template-columns: calc(var(--commerce-list-media) + 18px) minmax(0, 1fr);
  gap: 18px;
  padding-left: var(--commerce-list-cell-x);
}

.commerceDataListPanel.creatorResultPanel .creatorSourceIcons span {
  width: 20px;
  height: 20px;
}

.commerceDataListPanel.creatorResultPanel .creatorCommerceTags {
  padding-right: 8px;
}

.commerceDataListPanel.creatorResultPanel .creatorCommerceTags b,
.commerceDataListPanel.creatorResultPanel .creatorCommerceTags em,
.commerceDataListPanel.shopResultsCard .shopTags em {
  min-height: 26px;
  padding: 0 9px;
  font-size: 12px;
}

.commerceDataListPanel.creatorResultPanel .creatorSalesMetric {
  min-height: var(--commerce-list-row-height);
  background: color-mix(in srgb, var(--creator-accent) 5%, #ffffff);
  color: var(--commerce-list-text);
  font-weight: 950;
}

.commerceDataListPanel.fmListPanel .cuiDataListFooter > .fmPagination,
.commerceDataListPanel.creatorResultPanel .cuiDataListFooter > .creatorPager {
  width: 100%;
  justify-content: center;
  padding: 0;
}

.commerceDataListPanel.fmListPanel .fmPagination button,
.commerceDataListPanel.creatorResultPanel .creatorPager button,
.commerceDataListPanel.creatorResultPanel .creatorPager .cuiPaginationEllipsis {
  width: 40px;
  height: 40px;
  border: 1px solid #e8edf4;
  border-radius: 10px;
  background: #fff;
  color: var(--commerce-list-muted);
  font-size: 14px;
}

.commerceDataListPanel.fmListPanel .fmPagination button.active,
.commerceDataListPanel.creatorResultPanel .creatorPager button.active {
  border-color: color-mix(in srgb, var(--primary) 34%, #e8edf4);
  background: color-mix(in srgb, var(--primary) 12%, #ffffff);
  color: var(--primary);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 10%, transparent);
}

.commerceDataListPanel.fmListPanel .fmPagination > span,
.commerceDataListPanel.creatorResultPanel .creatorPager .cuiPaginationJump {
  color: var(--commerce-list-muted);
  font-size: 14px;
}

.commerceDataListPanel.fmListPanel .fmPagination .cuiPaginationActions,
.commerceDataListPanel.fmListPanel .fmPagination .cuiPaginationPages {
  display: flex;
  align-items: center;
  gap: 8px;
}

.commerceDataListPanel.fmListPanel .fmPagination .cuiPaginationActions > button {
  width: auto;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 14px;
}

.commerceDataListPanel.fmListPanel .fmPaginationSelect {
  width: 124px;
  min-width: 124px;
  flex: 0 0 124px;
}

.commerceDataListPanel.fmListPanel .fmPaginationSelect .filterSelectTrigger {
  min-height: 40px;
  height: 40px;
  border-radius: 10px;
}

.commerceDataListPanel.creatorResultPanel .creatorPager .cuiPaginationJump {
  margin-left: 16px;
}

.commerceDataListPanel.creatorResultPanel .creatorPager .cuiPaginationJump input {
  width: 58px;
  height: 38px;
}

.commerceDataListPanel.liveSearchDataListTable {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.commerceDataListPanel.liveSearchDataListTable .cuiDataListBody {
  background: #fff;
  scrollbar-color: rgba(148, 163, 184, 0.65) rgba(148, 163, 184, 0.14);
  scrollbar-width: thin;
}

.commerceDataListPanel.liveSearchDataListTable .cuiDataListBody::-webkit-scrollbar {
  height: 16px;
}

.commerceDataListPanel.liveSearchDataListTable .cuiDataListBody::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
}

.commerceDataListPanel.liveSearchDataListTable .cuiDataListBody::-webkit-scrollbar-thumb {
  border: 4px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.7);
}

.commerceDataListPanel.liveSearchDataListTable .liveSearchTable {
  color: var(--commerce-list-text);
  font-size: 14px;
}

.commerceDataListPanel.liveSearchDataListTable .liveSearchRow:hover {
  background: #fbfdff;
}

.commerceDataListPanel.liveSearchDataListTable .liveSearchRoomCell {
  display: grid;
  grid-template-columns: var(--commerce-list-media) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.commerceDataListPanel.liveSearchDataListTable .liveSearchCover {
  width: var(--commerce-list-media);
  height: var(--commerce-list-media);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #ffffff), transparent 58%),
    #f3f7fb;
  color: var(--primary);
  box-shadow: 0 8px 18px rgba(24, 32, 51, 0.08);
}

.commerceDataListPanel.liveSearchDataListTable .liveSearchCover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.commerceDataListPanel.liveSearchDataListTable .productTitleStack strong,
.commerceDataListPanel.liveSearchDataListTable .productMetricCell strong {
  color: var(--commerce-list-text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.35;
}

.commerceDataListPanel.liveSearchDataListTable .productTitleStack em,
.commerceDataListPanel.liveSearchDataListTable .productMetricCell em,
.commerceDataListPanel.liveSearchDataListTable .productMetricCell small,
.commerceDataListPanel.liveSearchDataListTable .productStatusCell em {
  margin-top: 2px;
  color: var(--commerce-list-muted);
  font-size: 12px;
  line-height: 1.45;
}

.commerceDataListPanel.liveSearchDataListTable .productTitleStack .statusPill {
  width: min(100%, 220px);
  min-height: 28px;
  justify-content: center;
  margin-top: 4px;
}

.commerceDataListPanel.liveSearchDataListTable .productStatusCell .statusPill {
  width: fit-content;
  min-height: 30px;
  padding: 0 12px;
}

.liveSearchSortButton {
  width: 100%;
  min-width: 0;
  justify-self: start;
  padding: 0;
}

.liveSearchSortButton span {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.liveSearchSortButton em {
  display: none;
}

.liveSearchSortButton.active {
  color: var(--primary);
  background: color-mix(in srgb, var(--creator-accent, var(--primary)) 5%, #ffffff);
}

.commerceDataListPanel.liveSearchDataListTable .liveSearchSortableCell {
  min-height: var(--commerce-list-row-height);
  align-content: center;
}

.commerceDataListPanel.liveSearchDataListTable .liveSearchSortableCell.active {
  background: color-mix(in srgb, var(--creator-accent, var(--primary)) 5%, #ffffff);
}

.liveSearchActionCell {
  justify-content: flex-start;
  align-content: center;
}

.liveSearchActionCell .productRetryButton {
  min-height: 34px;
  border-radius: 999px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 900;
}

.liveSearchActionCell .productRetryButton.secondary {
  border-color: color-mix(in srgb, var(--primary) 28%, #e8edf4);
  background: color-mix(in srgb, var(--primary) 10%, #ffffff);
  color: var(--primary);
}

.liveSearchResultPanel > .productPager {
  justify-content: space-between;
  border-top: 1px solid #edf0f5;
  background: #fff;
  padding: 18px 22px;
}

.liveSearchResultPanel > .productPager .cuiPaginationActions {
  justify-content: flex-end;
}

.liveSearchResultPanel > .productPager .liveSearchDropdown {
  min-width: 132px;
}

.liveSearchResultPanel > .productPager .cuiPaginationActions button,
.liveSearchResultPanel > .productPager .cuiPaginationEllipsis {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 10px;
  padding: 0;
}

.liveSearchResultPanel > .productPager .cuiPaginationPages button.active {
  border-color: color-mix(in srgb, var(--primary) 34%, #e8edf4);
  background: color-mix(in srgb, var(--primary) 12%, #ffffff);
  color: var(--primary);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 10%, transparent);
}

.liveSearchResultPanel > .productPager .cuiPaginationEllipsis {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: #98a2b3;
}

.liveSearchResultPanel > .productPager .cuiPaginationJump {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--commerce-list-muted);
  font-size: 13px;
  font-weight: 760;
}

.liveSearchResultPanel > .productPager .cuiPaginationJump input {
  width: 58px;
  height: 38px;
  border: 1px solid #e8edf4;
  border-radius: 10px;
  background: #fff;
  color: var(--commerce-list-text);
  text-align: center;
  box-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
  padding: 0 8px;
}

.fmRankFilterRow {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

.fmRankTimeRow {
  grid-template-columns: 92px auto 176px minmax(0, 1fr);
  align-items: center;
}

.fmRankFilterLabel {
  color: #344054;
  font-size: 14px;
  font-weight: 850;
  line-height: 32px;
  text-align: left;
  white-space: nowrap;
}

.fmRankPeriodGroup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fmRankPeriodGroup button,
.fmRankOptions button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #182033;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 820;
  padding: 0 14px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.fmRankPeriodGroup button:hover,
.fmRankOptions button:hover {
  background: color-mix(in srgb, var(--primary) 6%, #ffffff);
  color: var(--primary);
}

.fmRankPeriodGroup button.active,
.fmRankOptions button.active {
  background: var(--primary);
  color: #fff;
  font-weight: 920;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 22%, transparent);
}

.fmRankPeriodGroup button.active:hover,
.fmRankOptions button.active:hover {
  color: #fff;
}

.fmRankDateControl {
  width: 176px;
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  border: 1px solid #e8edf4;
  border-radius: 14px;
  background: #fff;
  color: #8b95a7;
  padding: 0 12px;
}

.fmRankDateControl input {
  min-width: 0;
  height: 34px;
  border: 0;
  background: transparent;
  color: #182033;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  outline: none;
}

.fmRankDateControl input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0;
}

.fmRankDateControl svg {
  pointer-events: none;
}

.fmRankOptions {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.fmRankOptions button em {
  min-height: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #20d6b0;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  padding: 0 4px;
}

.fmRankCategoryOptions .fmRankExpand {
  margin-left: auto;
  background: color-mix(in srgb, var(--primary) 8%, #ffffff);
  color: var(--primary);
}

.fmRankCategoryOptions .fmRankExpand:hover {
  background: color-mix(in srgb, var(--primary) 13%, #ffffff);
}

.fmRankStoreOptions {
  gap: 6px 8px;
}

@media (max-width: 1280px) {
  .fmCoreRankPage .fmListPanel {
    margin-top: 0;
  }

  .fmProductSection-new.fmCoreRankPage .fmListPanel,
  .fmProductSection-hot.fmCoreRankPage .fmListPanel {
    margin-top: 0;
  }

  .fmRankFilterBand {
    padding: 12px 16px 10px;
  }

  .fmRankOptions {
    gap: 6px 8px;
  }

  .fmRankPeriodGroup button,
  .fmRankOptions button {
    padding-inline: 12px;
  }
}

@media (max-width: 860px) {
  .fmCoreRankPage .fmListPanel {
    margin-top: 0;
  }

  .fmRankFilterBand {
    border-radius: 16px;
    padding: 16px;
  }

  .fmRankFilterRow,
  .fmRankTimeRow {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .fmRankFilterLabel {
    line-height: 1.2;
    text-align: left;
  }

  .fmRankDateControl {
    width: min(188px, 100%);
  }

  .fmRankCategoryOptions .fmRankExpand {
    margin-left: 0;
  }
}

/* Restored login chrome from the pre-component-library auth page. */

.authPage {
  --auth-brand-color: var(--primary);
  --auth-brand-accent: color-mix(in srgb, var(--auth-brand-color) 62%, #06b6d4);
  --auth-brand-grad: linear-gradient(135deg, var(--auth-brand-color), var(--auth-brand-accent));
  --auth-brand-contrast: #ffffff;
  --auth-brand-soft: color-mix(in srgb, var(--auth-brand-color) 12%, transparent);
  --auth-login-content-width: min(1180px, calc(100vw - 96px));
  --auth-top-bg: rgba(15, 23, 42, 0.34);
  --auth-top-bg-hover: rgba(15, 23, 42, 0.46);
  --auth-top-border: rgba(255, 255, 255, 0.18);
  --auth-top-ink: rgba(248, 250, 252, 0.94);
  --auth-top-muted: rgba(226, 232, 240, 0.72);
  --auth-top-icon: color-mix(in srgb, var(--auth-brand-color) 42%, #ffffff);
  --auth-top-shadow: 0 14px 34px rgba(2, 6, 23, 0.18);
  min-height: 100vh;
  overflow-x: hidden;
  background:
    var(--auth-page-overlay),
    var(--auth-login-bg),
    var(--auth-page-bg);
  background-position: center;
  background-size: cover;
  color: var(--text-1);
}

[data-theme='light'] .authPage {
  --auth-top-bg: rgba(255, 255, 255, 0.78);
  --auth-top-bg-hover: rgba(255, 255, 255, 0.92);
  --auth-top-border: rgba(15, 23, 42, 0.12);
  --auth-top-ink: #0f172a;
  --auth-top-muted: #475569;
  --auth-top-icon: color-mix(in srgb, var(--auth-brand-color) 72%, #0f172a);
  --auth-top-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.authPage[data-brand-bg='on'] {
  --auth-page-overlay:
    linear-gradient(90deg, rgba(5, 10, 18, 0.7) 0%, rgba(5, 10, 18, 0.42) 48%, rgba(5, 10, 18, 0.68) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--auth-brand-color) 10%, rgba(5, 7, 20, 0.46)), rgba(5, 7, 20, 0.74));
  --auth-promo-overlay:
    radial-gradient(circle at 22% 16%, color-mix(in srgb, var(--auth-brand-color) 34%, transparent), transparent 32%),
    linear-gradient(180deg, rgba(7, 11, 24, 0.38), rgba(7, 11, 24, 0.72));
}

[data-theme='light'] .authPage[data-brand-bg='on'] {
  --auth-page-overlay:
    linear-gradient(90deg, rgba(15, 23, 42, 0.52) 0%, rgba(15, 23, 42, 0.24) 48%, rgba(15, 23, 42, 0.5) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--auth-brand-color) 8%, rgba(15, 23, 42, 0.18)), rgba(15, 23, 42, 0.42));
  --auth-promo-overlay:
    radial-gradient(circle at top left, color-mix(in srgb, var(--auth-brand-color) 26%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(248, 250, 252, 0.6));
}

.authPage .authLayout {
  position: static;
  width: var(--auth-login-content-width);
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 480px);
  align-items: stretch;
  gap: clamp(32px, 5vw, 76px);
  margin: 0 auto;
}

.authPage .authPromoPane,
.authPage .authFormPane {
  grid-area: auto;
  min-width: 0;
  min-height: 100vh;
}

.authPage .authPromoPane {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 32px;
  overflow: hidden;
  border-right: 0;
  background: transparent;
  padding: 48px 0;
}

.authPage .authPromoTop {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.authPage .authBackLink,
.authPage .workspacePreferencesTrigger,
.authPage .authRegionSelector {
  min-height: 42px;
  border: 1px solid var(--auth-top-border);
  border-radius: 8px;
  background: var(--auth-top-bg);
  color: var(--auth-top-ink);
  box-shadow: var(--auth-top-shadow);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.authPage .authBackLink {
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.authPage .authBackLink:hover,
.authPage .workspacePreferencesTrigger:hover,
.authPage .workspacePreferencesTrigger[aria-expanded='true'],
.authPage .authRegionSelector:focus-within {
  border-color: color-mix(in srgb, var(--auth-brand-color) 34%, var(--auth-top-border));
  background: var(--auth-top-bg-hover);
  color: var(--auth-top-ink);
}

.authPage .authBackLink svg,
.authPage .workspacePreferencesTrigger > svg,
.authPage .regionSelectorTrigger > svg,
.authPage .regionSelectorOption svg {
  color: var(--auth-top-icon);
  stroke-width: 2.3;
}

.authPage .workspacePreferences {
  min-width: 0;
}

.authPage .workspacePreferencesTrigger {
  max-width: 154px;
  padding: 0 10px;
}

.authPage .workspacePreferencesTriggerText {
  max-width: 82px;
  color: var(--auth-top-ink);
}

.authPage .workspacePreferencesTriggerSwatch {
  border: 1px solid rgba(255, 255, 255, 0.46);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--auth-top-ink) 18%, transparent);
}

.authPage .authRegionSelector {
  flex: 0 1 192px;
  width: 192px;
  min-width: 168px;
  max-width: 212px;
}

.authPage .regionSelectorTrigger {
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--auth-top-ink);
  padding: 0 10px;
  box-shadow: none;
}

.authPage .regionSelectorTrigger:hover,
.authPage .regionSelector.is-open .regionSelectorTrigger {
  background: transparent;
}

.authPage .regionSelectorLabel {
  display: none;
}

.authPage .regionSelectorValue {
  color: var(--auth-top-ink);
  font-size: 13px;
}

.authPage .regionSelectorMeta {
  max-width: 54px;
  border-color: color-mix(in srgb, var(--auth-top-ink) 16%, transparent);
  background: color-mix(in srgb, var(--auth-top-ink) 8%, transparent);
  color: var(--auth-top-muted);
}

.authPage .regionSelectorMenu {
  width: 260px;
  border-color: var(--auth-top-border);
  background: color-mix(in srgb, #0f172a 88%, transparent);
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.38);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

[data-theme='light'] .authPage .regionSelectorMenu {
  background: color-mix(in srgb, #ffffff 94%, transparent);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
}

.authPage .regionSelectorOption {
  color: var(--auth-top-muted);
}

.authPage .regionSelectorOption:hover,
.authPage .regionSelectorOption.active {
  border-color: color-mix(in srgb, var(--auth-brand-color) 32%, var(--auth-top-border));
  background: color-mix(in srgb, var(--auth-brand-color) 16%, transparent);
}

.authPage .regionSelectorOptionMain strong {
  color: var(--auth-top-ink);
}

.authPage .regionSelectorOptionMain span {
  color: var(--auth-top-muted);
}

.authPage .authPromoStage {
  min-height: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 22px;
  padding-block: clamp(72px, 14vh, 160px) clamp(40px, 9vh, 100px);
}

.authPage .authPromoPoster {
  display: none;
  position: relative;
  width: min(620px, 100%);
  aspect-ratio: 1.38;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #ffffff 18%, var(--auth-brand-color));
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 40%),
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--auth-brand-color) 28%, transparent), transparent 30%),
    var(--auth-login-bg),
    linear-gradient(145deg, color-mix(in srgb, var(--auth-brand-color) 16%, #101827), #0c1220);
  background-position: center;
  background-size: cover;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.authPage[data-brand-bg='on'] .authPromoPoster {
  border-color: color-mix(in srgb, var(--auth-brand-color) 36%, rgba(255, 255, 255, 0.18));
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 40%),
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--auth-brand-color) 28%, transparent), transparent 30%),
    var(--auth-login-bg),
    linear-gradient(145deg, color-mix(in srgb, var(--auth-brand-color) 16%, #101827), #0c1220);
  background-position: center;
  background-size: cover;
}

.authPage .authPromoPoster::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 32%),
    linear-gradient(135deg, rgba(8, 13, 27, 0.08), rgba(8, 13, 27, 0.42));
}

.authPage .authPromoPoster::after {
  content: '';
  position: absolute;
  inset: 16px;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  pointer-events: none;
}

.authPage .authPromoPoster span,
.authPage .authPromoPoster i {
  position: absolute;
  z-index: 1;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.authPage .authPromoPoster span:nth-child(1) {
  inset: 42px 42px auto 42px;
  height: 48px;
}

.authPage .authPromoPoster span:nth-child(2) {
  left: 42px;
  bottom: 42px;
  width: 46%;
  height: 120px;
}

.authPage .authPromoPoster span:nth-child(3) {
  right: 42px;
  bottom: 42px;
  width: 34%;
  height: 190px;
}

.authPage .authPromoPoster i {
  inset: 132px 42px auto;
  height: 44px;
  border-color: color-mix(in srgb, var(--auth-brand-color) 34%, rgba(255, 255, 255, 0.14));
  background: color-mix(in srgb, var(--auth-brand-color) 46%, rgba(255, 255, 255, 0.18));
}

.authPage .authPromoCaption {
  width: min(650px, 100%);
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 18px;
  color: rgba(226, 232, 240, 0.72);
}

.authPage .authPromoCaption strong {
  max-width: 620px;
  color: #f8fafc;
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

.authPage .authPromoCaption span {
  max-width: 560px;
  color: rgba(241, 245, 249, 0.76);
  font-size: 16px;
  line-height: 1.75;
}

.authPage .authPromoCaption .authPromoCaptionTag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: none;
  min-height: 34px;
  margin-top: 0;
  border-color: color-mix(in srgb, var(--auth-brand-color) 30%, rgba(15, 23, 42, 0.12));
  background: color-mix(in srgb, var(--auth-brand-color) 14%, rgba(255, 255, 255, 0.86));
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--auth-brand-color) 12%, transparent);
}

[data-theme='dark'] .authPage .authPromoCaption .authPromoCaptionTag,
:root .authPage .authPromoCaption .authPromoCaptionTag {
  background: color-mix(in srgb, var(--auth-brand-color) 18%, rgba(15, 23, 42, 0.78));
  color: #f8fafc;
}

[data-theme='light'] .authPage .authPromoCaption .authPromoCaptionTag {
  background: color-mix(in srgb, var(--auth-brand-color) 14%, rgba(255, 255, 255, 0.86));
  color: #0f172a;
}

.authPage .authCapabilityStrip {
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.authPage .authCapabilityStrip span {
  border-color: color-mix(in srgb, var(--auth-brand-color) 24%, var(--line-dark));
  background: color-mix(in srgb, var(--auth-brand-color) 10%, var(--surface-panel));
}

.authPage .authFormPane {
  position: relative;
  z-index: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--auth-brand-color) 3%, transparent), transparent 42%),
    transparent;
  color: var(--auth-panel-ink);
  padding: 48px 0;
  pointer-events: auto;
}

.authPage .authFormShell {
  width: min(432px, 100%);
  max-height: none;
  overflow: visible;
  border-color: color-mix(in srgb, #ffffff 12%, var(--auth-brand-color) 18%);
  border-radius: 8px;
  background: color-mix(in srgb, #0f172a 88%, transparent);
  color: #f8fafc;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(22px) saturate(128%);
  -webkit-backdrop-filter: blur(22px) saturate(128%);
  padding: 30px;
  pointer-events: auto;
}

[data-theme='light'] .authPage .authFormShell {
  border-color: color-mix(in srgb, #ffffff 82%, var(--auth-brand-color) 18%);
  background: color-mix(in srgb, #ffffff 94%, transparent);
  color: #0f172a;
}

.authPage[data-auth-mode='login'] .authContextStack {
  display: none;
}

.authPage[data-auth-mode='login'] .authFormShell {
  align-self: center;
}

.authPage .authPrototypeShell {
  gap: 0;
}

.authPage .authFormBrandLockup {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  overflow: hidden;
}

.authPage .authFormBrandLogo {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--auth-brand-contrast);
  font-size: 18px;
  font-weight: 950;
  box-shadow: none;
}

.authPage .authFormBrandLogo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.authPage .authFormBrandLockup strong {
  min-width: 0;
  overflow: hidden;
  color: var(--auth-panel-ink);
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.authPage .formHeader {
  margin-bottom: 18px;
}

.authPage .authFormShell .formHeader h1 {
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: 0;
}

.authPage .authFormShell .formHeader p {
  color: var(--auth-panel-muted);
  font-size: 14px;
  line-height: 1.6;
}

.authPage .authTabs,
.authPage .authSegmentedControl {
  border-color: var(--auth-panel-control-border);
  background: color-mix(in srgb, var(--auth-panel-control-bg) 86%, transparent);
}

.authPage .authPageTab.active,
.authPage .authSegmentedControl button.active,
.authPage .authStepper button.active {
  background: color-mix(in srgb, var(--auth-brand-color) 88%, #ffffff 12%);
  color: var(--auth-brand-contrast);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--auth-brand-color) 22%, transparent);
}

.authPage .authInputWithIcon,
.authPage .authField input,
.authPage .authField select,
.authPage .authField textarea {
  border-color: var(--auth-panel-input-border);
  background: var(--auth-panel-input-bg);
}

.authPage .authInputWithIcon:focus-within,
.authPage .authField input:focus,
.authPage .authField select:focus,
.authPage .authField textarea:focus {
  border-color: color-mix(in srgb, var(--auth-brand-color) 58%, var(--auth-panel-input-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-brand-color) 18%, transparent);
}

.authPage .authSubmitButton {
  background: color-mix(in srgb, var(--auth-brand-color) 88%, #ffffff 12%);
  color: var(--auth-brand-contrast);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--auth-brand-color) 28%, transparent);
}

.authPage .authSwitchLink,
.authPage .authEyebrow {
  color: color-mix(in srgb, var(--auth-brand-color) 72%, #8b5cf6);
}

.cuiAgencyThemeScope[data-compass-theme-surface] .authPage {
  --auth-panel-bg: var(--cui-surface);
  --auth-panel-border: var(--cui-line);
  --auth-panel-shadow: var(--cui-shadow-md);
  --auth-panel-ink: var(--cui-text);
  --auth-panel-soft: var(--cui-text);
  --auth-panel-muted: var(--cui-text-muted);
  --auth-panel-faint: var(--cui-text-muted);
  --auth-panel-control-bg: var(--cui-surface-subtle);
  --auth-panel-control-border: var(--cui-line);
  --auth-panel-input-bg: var(--cui-input-bg);
  --auth-panel-input-border: var(--cui-line);
  --auth-panel-input-ink: var(--cui-text);
}

.cuiAgencyThemeScope[data-compass-theme-surface] .authPage .authFormShell {
  border-color: var(--cui-line);
  border-radius: var(--cui-card-radius);
  background-color: var(--cui-surface) !important;
  color: var(--cui-text);
  box-shadow: var(--cui-shadow-md);
}

.cuiAgencyThemeScope[data-compass-theme-surface] .authPage :is(.authTabs, .authSegmentedControl, .authInputWithIcon, .authField input, .authField select, .authField textarea, .authSubmitButton) {
  border-radius: var(--cui-radius-md);
}

.cuiAgencyThemeScope[data-compass-theme-surface] .authPage :is(.authInputWithIcon, .authField input, .authField select, .authField textarea) {
  border-color: var(--cui-line);
  background-color: var(--cui-input-bg) !important;
  color: var(--cui-text);
}

.cuiAgencyThemeScope[data-compass-theme-surface] .authPage :is(.authInputWithIcon:focus-within, .authField input:focus, .authField select:focus, .authField textarea:focus) {
  border-color: var(--cui-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cui-focus) 35%, transparent);
}

.cuiAgencyThemeScope[data-compass-theme-surface] .authPage .authSubmitButton {
  background-color: var(--cui-button-primary-bg) !important;
  background-image: none !important;
  box-shadow: var(--cui-shadow-md);
}

.cuiAgencyThemeScope[data-compass-theme-surface] .authPage .authSubmitButton:hover:not(:disabled) {
  background-color: var(--cui-button-primary-hover-bg) !important;
  filter: none;
}

@media (max-width: 1080px) {
  .authPage .authLayout {
    width: min(920px, calc(100vw - 48px));
    grid-template-columns: 1fr;
    gap: 0;
  }

  .authPage .authPromoPane,
  .authPage .authFormPane {
    min-height: auto;
  }

  .authPage .authPromoPane {
    padding: 28px 0 0;
  }

  .authPage .authPromoStage {
    padding-block: 32px 20px;
  }

  .authPage .authFormPane {
    justify-content: center;
    padding: 20px 0 36px;
  }
}

@media (max-width: 720px) {
  .authPage {
    --auth-login-content-width: calc(100vw - 36px);
    min-height: 100dvh;
  }

  .authPage .authLayout {
    width: var(--auth-login-content-width);
    min-height: 100dvh;
  }

  .authPage .authPromoPane {
    padding: 20px 0 0;
  }

  .authPage .authPromoTop {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
  }

  .authPage .authBackLink,
  .authPage .workspacePreferencesTrigger,
  .authPage .authRegionSelector {
    width: 100%;
    max-width: none;
  }

  .authPage .workspacePreferencesTrigger,
  .authPage .authRegionSelector {
    justify-content: flex-start;
  }

  .authPage .workspacePreferencesTriggerText {
    max-width: none;
  }

  .authPage .authPromoStage {
    justify-items: stretch;
    padding-block: 22px 12px;
  }

  .authPage .authPromoCaption {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .authPage .authPromoCaption strong {
    font-size: clamp(32px, 10vw, 46px);
  }

  .authPage .authPromoCaptionTag {
    width: fit-content;
  }

  .authPage .authCapabilityStrip {
    display: none;
  }

  .authPage .authFormPane {
    padding: 12px 0 28px;
  }

  .authPage .authFormShell {
    width: 100%;
    padding: 22px;
  }

  .authPage .authFormShell .formHeader h1 {
    font-size: 30px;
  }
}

/* ===== Shop Search / Ranking / Detail ===== */

.shopSearchPage {
  --shop-accent: var(--primary, #6d35d8);
  --shop-accent-strong: color-mix(in srgb, var(--shop-accent) 84%, #111827);
  --shop-accent-soft: color-mix(in srgb, var(--shop-accent) 10%, #ffffff);
  --shop-bg: var(--surface-panel, #ffffff);
  --shop-bg-soft: var(--surface-panel-strong, #f8fafc);
  --shop-line: var(--line-dark, #e5e7eb);
  --shop-line-strong: color-mix(in srgb, var(--shop-line) 72%, var(--shop-accent));
  --shop-text: var(--text-1, #111827);
  --shop-muted: var(--text-3, #64748b);
  --shop-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  align-content: start;
  gap: 18px;
  color: var(--shop-text);
}

.shopRankPage,
.shopDetailPage {
  gap: 18px;
}

.shopRankFilterCard {
  align-content: start;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/compat/web-tail/web-tail-003.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Ordered read-only compatibility shard 003. Do not edit. */

.shopSearchHeader,
.shopDetailTitleRow,
.shopRankSummary,
.shopSearchCard,
.shopResultsCard,
.shopDetailSection,
.shopDetailProfileCard,
.shopDetailRatingCard,
.shopDetailChartCard {
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-bg);
  box-shadow: var(--shop-shadow);
}

.shopSearchHeader,
.shopDetailTitleRow {
  min-height: 144px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  overflow: hidden;
  padding: 26px 28px;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--shop-accent) 18%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--shop-accent) 12%, #ffffff), #ffffff 58%);
}

.shopSearchHeader span,
.shopDetailTitleRow span,
.shopRankSummary span,
.shopRankFilterHeader span,
.shopRankFilterSectionTitle {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.shopSearchHeader h1,
.shopDetailTitleRow h1 {
  margin: 8px 0 0;
  color: var(--shop-text);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: 0;
}

.shopSearchHeader p,
.shopDetailTitleRow p,
.shopRankSummary p,
.shopResultsHeader p,
.shopDetailSectionHeader p {
  margin: 10px 0 0;
  color: var(--shop-muted);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.65;
}

.shopSearchHeaderMeta,
.shopDetailUpdate {
  min-width: 128px;
  display: grid;
  justify-items: end;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 18%, var(--shop-line));
  border-radius: 8px;
  background: color-mix(in srgb, #ffffff 76%, var(--shop-accent) 8%);
  padding: 12px 14px;
}

.shopSearchHeaderMeta strong,
.shopDetailUpdate strong {
  color: var(--shop-accent-strong);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.shopSearchCard,
.shopResultsCard,
.shopDetailSection {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.shopSearchBar {
  width: min(760px, 100%);
  min-height: 50px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--shop-accent);
  border-radius: 999px;
  background: #ffffff;
  padding: 0 6px 0 18px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--shop-accent) 10%, transparent);
}

.shopSearchBar svg {
  color: var(--shop-muted);
}

.shopSearchBar input {
  min-width: 0;
  height: 46px;
  border: 0;
  background: transparent;
  color: var(--shop-text);
  font: inherit;
  font-size: 14px;
  font-weight: 780;
  outline: 0;
}

.shopSearchBar input::placeholder {
  color: color-mix(in srgb, var(--shop-muted) 72%, transparent);
}

.shopSearchBar button,
.shopResultsHeader button,
.shopRankFilterHeader button,
.shopRankSelected button,
.shopRankQuickFilters button,
.shopDetailProfileActions button,
.shopDetailSectionTools button,
.shopDetailFilterLine button,
.shopDetailRefreshButton,
.shopRankPagination button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--shop-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--shop-text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 0 14px;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.shopSearchBar button,
.shopRankQuickFilters button.active,
.shopRankPagination button.active {
  border-color: var(--shop-accent);
  background: var(--shop-accent);
  color: #ffffff;
}

.shopSearchBar button:hover,
.shopResultsHeader button:hover,
.shopRankFilterHeader button:hover,
.shopRankSelected button:hover,
.shopRankQuickFilters button:hover,
.shopDetailProfileActions button:hover,
.shopDetailSectionTools button:hover,
.shopDetailFilterLine button:hover,
.shopDetailRefreshButton:hover,
.shopRankPagination button:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 44%, var(--shop-line));
  background: var(--shop-accent-soft);
  color: var(--shop-accent-strong);
}

.shopSearchBar button:hover,
.shopRankQuickFilters button.active:hover,
.shopRankPagination button.active:hover {
  background: var(--shop-accent-strong);
  color: #ffffff;
}

.shopFilterBlock {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--shop-line);
  padding-top: 14px;
}

.shopFilterRow {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.shopFilterRow > span,
.shopFilterGrid label > span,
.shopAdvancedGrid label > span {
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 34px;
}

.shopFilterRow > div,
.shopRankQuickFilters,
.shopDetailSectionTools,
.shopDetailFilterLine {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.shopFilterRow button {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--shop-text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 820;
  padding: 0 14px;
}

.shopFilterRow button:hover {
  background: var(--shop-bg-soft);
}

.shopFilterRow button.active,
.shopDetailSectionTools button.active {
  border-color: var(--shop-accent);
  background: var(--shop-accent);
  color: #ffffff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--shop-accent) 18%, transparent);
}

.shopRankingDatePicker {
  position: relative;
  min-width: 0;
}

.shopRankingDateButton {
  display: inline-grid !important;
  grid-template-columns: 16px minmax(112px, 1fr) 16px;
  align-items: center;
  justify-items: center;
  min-height: 34px;
  width: 190px;
  max-width: 100%;
  border-color: color-mix(in srgb, var(--shop-accent) 18%, var(--shop-line)) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--shop-bg-soft) 92%, #ffffff),
      color-mix(in srgb, var(--shop-accent) 6%, var(--shop-bg))
    ) !important;
  color: var(--shop-text) !important;
  column-gap: 8px;
  padding: 0 12px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.shopRankingDateButton .compassIcon:first-child {
  justify-self: start;
}

.shopRankingDateButton .compassIcon:last-child {
  justify-self: end;
}

.shopRankingDateButton:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 44%, var(--shop-line)) !important;
  background: var(--shop-accent-soft) !important;
  color: var(--shop-accent-strong) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--shop-accent) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transform: translateY(-1px);
}

.shopRankingDateButton strong {
  justify-self: center;
  min-width: 0;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopRankingCalendarPanel {
  --ranking-calendar-accent: var(--shop-accent, var(--primary, #6d28d9));
  --ranking-calendar-accent-strong: var(--shop-accent-strong, var(--primary-light, #7c3aed));
  --ranking-calendar-accent-soft: var(--shop-accent-soft, color-mix(in srgb, var(--ranking-calendar-accent) 10%, #ffffff));
  --ranking-calendar-text: var(--shop-text, var(--text-1, #111827));
  --ranking-calendar-muted: var(--shop-muted, var(--text-3, #8a94a6));
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 90;
  width: 324px;
  border: 1px solid color-mix(in srgb, var(--ranking-calendar-accent) 18%, var(--shop-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--shop-bg) 88%, #ffffff);
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.16), 0 2px 6px color-mix(in srgb, var(--ranking-calendar-accent) 10%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  padding: 12px;
}

.shopRankingCalendarHeader {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ranking-calendar-accent) 7%, var(--shop-bg-soft));
  padding: 4px;
}

.shopRankingCalendarHeader strong {
  min-width: 0;
  color: var(--ranking-calendar-text);
  font-size: 14px;
  font-weight: 950;
  text-align: center;
}

.shopRankingCalendarHeader button,
.shopRankingCalendarGrid button,
.shopRankingMonthGrid button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ranking-calendar-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
}

.shopRankingCalendarHeader button:not(:disabled):hover,
.shopRankingCalendarGrid button:not(:disabled):hover,
.shopRankingMonthGrid button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--ranking-calendar-accent) 22%, transparent);
  background: color-mix(in srgb, var(--ranking-calendar-accent) 10%, transparent);
  color: var(--ranking-calendar-accent-strong);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--ranking-calendar-accent) 9%, transparent);
  transform: translateY(-1px);
}

.shopRankingCalendarHeader button:disabled,
.shopRankingCalendarGrid button:disabled,
.shopRankingMonthGrid button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.shopRankingCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-top: 12px;
}

.shopRankingCalendarGrid span {
  color: var(--ranking-calendar-muted);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.shopRankingCalendarGrid button {
  padding: 0;
}

.shopRankingCalendarGrid button.muted {
  color: #aeb7c4;
}

.shopRankingCalendarGrid button.active,
.shopRankingMonthGrid button.active {
  border-color: var(--ranking-calendar-accent);
  background: var(--ranking-calendar-accent);
  color: var(--accent-on-primary, #ffffff);
  box-shadow: 0 9px 18px color-mix(in srgb, var(--ranking-calendar-accent) 28%, transparent);
}

.shopRankingCalendarGrid button.active:not(:disabled):hover,
.shopRankingMonthGrid button.active:not(:disabled):hover {
  background: var(--ranking-calendar-accent-strong);
  color: var(--accent-on-primary, #ffffff);
  box-shadow: 0 11px 22px color-mix(in srgb, var(--ranking-calendar-accent) 32%, transparent);
}

.shopRankingCalendarGrid.weekMode button {
  border-radius: 0;
  border-left-color: transparent;
  border-right-color: transparent;
}

.shopRankingCalendarGrid.weekMode button.weekStart {
  border-left-color: transparent;
  border-radius: 8px 0 0 8px;
}

.shopRankingCalendarGrid.weekMode button.weekEnd {
  border-right-color: transparent;
  border-radius: 0 8px 8px 0;
}

.shopRankingCalendarGrid.weekMode button.active {
  border-color: color-mix(in srgb, var(--ranking-calendar-accent) 12%, transparent);
  background: color-mix(in srgb, var(--ranking-calendar-accent) 13%, transparent);
  color: var(--ranking-calendar-accent-strong);
  box-shadow: none;
}

.shopRankingCalendarGrid.weekMode button.active.weekStart,
.shopRankingCalendarGrid.weekMode button.active.weekEnd {
  background: var(--ranking-calendar-accent);
  color: var(--accent-on-primary, #ffffff);
  box-shadow: 0 9px 18px color-mix(in srgb, var(--ranking-calendar-accent) 24%, transparent);
}

.shopRankingCalendarGrid.weekMode button:not(:disabled):hover {
  box-shadow: none;
  transform: none;
}

.shopRankingCalendarGrid.weekMode button.weekHover {
  border-color: color-mix(in srgb, var(--ranking-calendar-accent) 12%, transparent);
  background: color-mix(in srgb, var(--ranking-calendar-accent) 10%, transparent);
  color: var(--ranking-calendar-accent-strong);
  box-shadow: none;
  transform: none;
}

.shopRankingCalendarGrid.weekMode button.weekHover.weekStart {
  border-left-color: color-mix(in srgb, var(--ranking-calendar-accent) 22%, transparent);
  border-radius: 8px 0 0 8px;
  background: color-mix(in srgb, var(--ranking-calendar-accent) 16%, transparent);
}

.shopRankingCalendarGrid.weekMode button.weekHover.weekEnd {
  border-right-color: color-mix(in srgb, var(--ranking-calendar-accent) 22%, transparent);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--ranking-calendar-accent) 16%, transparent);
}

.shopRankingCalendarGrid.weekMode button.active:not(:disabled):hover {
  background: color-mix(in srgb, var(--ranking-calendar-accent) 18%, transparent);
  color: var(--ranking-calendar-accent-strong);
}

.shopRankingCalendarGrid.weekMode button.active.weekStart:not(:disabled):hover,
.shopRankingCalendarGrid.weekMode button.active.weekEnd:not(:disabled):hover {
  background: var(--ranking-calendar-accent-strong);
  color: var(--accent-on-primary, #ffffff);
}

.shopRankingMonthGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.shopRankingMonthGrid button {
  min-height: 38px;
}

.shopFilterGrid,
.shopAdvancedGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, max-content));
  align-items: center;
  gap: 10px 14px;
}

.shopFilterGrid label,
.shopAdvancedGrid label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.shopFilterGrid select,
.shopAdvancedGrid input,
.shopRankFooter input,
.shopDetailSection select,
.shopDetailSection input,
.shopDetailSection textarea {
  min-width: 0;
  height: 38px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-text);
  font: inherit;
  font-size: 13px;
  font-weight: 820;
  outline: 0;
}

.shopFilterGrid select {
  min-width: 132px;
  padding: 0 32px 0 12px;
}

.shopAdvancedGrid label > div {
  display: grid;
  grid-template-columns: minmax(82px, 1fr) auto minmax(82px, 1fr);
  align-items: center;
  gap: 6px;
}

.shopAdvancedGrid input {
  width: 100%;
  padding: 0 10px;
}

.shopAdvancedGrid em {
  color: var(--shop-muted);
  font-style: normal;
}

.shopFilterGrid select:focus,
.shopAdvancedGrid input:focus,
.shopDetailSection select:focus,
.shopDetailSection input:focus,
.shopDetailSection textarea:focus {
  border-color: color-mix(in srgb, var(--shop-accent) 58%, var(--shop-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-accent) 14%, transparent);
}

.shopMetricGrid,
.shopDetailMetricGrid,
.shopDetailMiniMetricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.shopMetricGrid article,
.shopDetailMetricGrid article,
.shopDetailMiniMetricGrid article {
  min-width: 0;
  display: grid;
  gap: 6px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-bg);
  padding: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.shopMetricGrid span,
.shopDetailMetricGrid span,
.shopDetailMiniMetricGrid span {
  min-width: 0;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 850;
}

.shopMetricGrid strong,
.shopDetailMetricGrid strong,
.shopDetailMiniMetricGrid strong {
  min-width: 0;
  color: var(--shop-text);
  font-size: 24px;
  font-weight: 950;
  line-height: 1.1;
}

.shopMetricGrid em,
.shopDetailMetricGrid em {
  min-width: 0;
  color: var(--shop-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.shopPhase4Panel {
  display: grid;
  gap: 14px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-bg);
  box-shadow: var(--shop-shadow);
  padding: 18px;
}

.shopPhase4Header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.shopPhase4Header > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.shopPhase4Header span,
.shopPhase4Grid span {
  min-width: 0;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 850;
}

.shopPhase4Header h2 {
  margin: 0;
  color: var(--shop-text);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.15;
}

.shopPhase4Header > strong {
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, #22c55e 12%, #ffffff);
  color: #15803d;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 8px 10px;
}

.shopPhase4Grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.shopPhase4Grid article {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--shop-line) 82%, var(--shop-accent));
  border-radius: 8px;
  background: var(--shop-bg-soft);
  padding: 12px;
}

.shopPhase4Grid strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--shop-text);
  font-size: 18px;
  font-weight: 950;
}

.shopPhase4Grid em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--shop-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.shopExportStatus {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  border: 1px solid color-mix(in srgb, #22c55e 28%, var(--shop-line));
  border-radius: 8px;
  background: color-mix(in srgb, #22c55e 8%, #ffffff);
  padding: 10px 12px;
}

.shopExportStatus strong {
  color: #15803d;
  font-size: 13px;
  font-weight: 900;
}

.shopExportStatus span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 820;
}

.shopExportStatus em {
  color: var(--shop-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.shopResultsHeader,
.shopRankFilterHeader,
.shopRankFooter,
.shopRankSelected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.shopResultsHeader h2 {
  margin: 0;
  color: var(--shop-text);
  font-size: 22px;
  font-weight: 950;
}

.shopResultsHeader > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shopResultsCard.cuiDataList {
  gap: 0;
  padding: 0;
}

.shopResultsCard .cuiDataListHeader {
  align-items: flex-start;
  border-bottom-color: var(--shop-line);
  padding: 18px;
}

.shopResultsCard .cuiDataListTitle {
  color: var(--shop-text);
  font-size: 22px;
  font-weight: 950;
}

.shopResultsCard .cuiDataListDescription {
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 760;
}

.shopResultsActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shopResultsCard .cuiDataListBody {
  background: #ffffff;
}

.shopDataListScroller,
.shopTableWrap {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
}

.shopDataListScroller.cuiDataList,
.shopTableWrap.cuiDataList {
  box-shadow: none;
}

.shopDataListScroller .cuiDataListBody,
.shopTableWrap .cuiDataListBody {
  background: #ffffff;
}

.shopSearchTable {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  color: var(--shop-text);
}

.shopSearchTable th,
.shopSearchTable td,
.shopSearchTable .cuiDataListTableHeadCell,
.shopSearchTable .cuiDataListTableCell {
  border-bottom: 1px solid var(--shop-line);
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.shopSearchTable th,
.shopSearchTable .cuiDataListTableHeadCell {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #ffffff;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 900;
}

.shopSearchTable tbody tr:hover,
.shopSearchTable .cuiDataListTableRow:not(.cuiDataListTableHead):hover {
  background: color-mix(in srgb, var(--shop-accent) 4%, #ffffff);
}

.shopSearchTable b,
.shopSearchTable .cuiDataListTableCell b {
  color: var(--shop-text);
  font-weight: 920;
}

.shopInfoLink {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.shopInfoCellShell {
  position: relative;
  min-width: 260px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: start;
  gap: 8px;
}

.shopInfoCellShell .shopInfoLink:hover strong {
  color: var(--shop-accent-strong);
}

.shopNameTranslateButton {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 20%, var(--shop-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--shop-bg-soft) 88%, #ffffff);
  color: var(--shop-muted);
  cursor: pointer;
  padding: 0;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
}

.shopNameTranslateButton:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 44%, var(--shop-line));
  background: var(--shop-accent-soft);
  color: var(--shop-accent-strong);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--shop-accent) 12%, transparent);
  transform: translateY(-1px);
}

.shopTranslateOverlay {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.24);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.shopTranslateDialog {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  display: grid;
  gap: 18px;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 18%, var(--shop-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--shop-bg) 94%, #ffffff);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
  padding: 28px;
}

.shopTranslateClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--shop-muted);
  cursor: pointer;
  padding: 0;
}

.shopTranslateClose:hover {
  background: var(--shop-bg-soft);
  color: var(--shop-text);
}

.shopTranslatePreview {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding-right: 28px;
}

.shopTranslatePreview .shopAvatar {
  width: 58px;
  height: 58px;
  font-size: 18px;
}

.shopTranslatePreview strong {
  display: block;
  color: var(--shop-text);
  font-size: 18px;
  font-weight: 950;
}

.shopTranslatePreview p {
  margin: 6px 0 0;
  color: var(--shop-muted);
  font-size: 14px;
  line-height: 1.55;
}

.shopTranslateLanguage {
  width: 132px;
  display: grid;
  gap: 7px;
}

.shopTranslateLanguage span,
.shopTranslateResult span {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 850;
}

.shopTranslateLanguage select {
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 28%, var(--shop-line));
  border-radius: 999px;
  background: #ffffff;
  color: var(--shop-text);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  outline: 0;
  padding: 0 14px;
}

.shopTranslateLanguage select:focus {
  border-color: var(--shop-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-accent) 14%, transparent);
}

.shopTranslateResult {
  position: relative;
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 28%, var(--shop-line));
  border-radius: 8px;
  background: #ffffff;
  padding: 14px 82px 14px 14px;
}

.shopTranslateResult p {
  min-height: 48px;
  margin: 0;
  color: var(--shop-text);
  font-size: 15px;
  font-weight: 820;
  line-height: 1.6;
}

.shopTranslateResult button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 30px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  padding: 0 12px;
}

.shopTranslateResult button:hover {
  border-color: var(--shop-accent);
  color: var(--shop-accent-strong);
}

.shopInfoCell,
.shopDetailProfileTop,
.shopDetailAccountList article,
.shopDetailSimilarGrid article {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.shopAvatar,
.shopDetailAvatar,
.shopDetailSmallAvatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--shop-accent) 82%, #ffffff), #22c55e);
  color: #ffffff;
  font-weight: 950;
}

.shopAvatar {
  width: 42px;
  height: 42px;
}

.shopInfoCell > div:last-child,
.shopDetailProfileTop > div,
.shopDetailAccountList article > div:last-child,
.shopDetailSimilarGrid article > div:last-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.shopInfoCell strong,
.shopDetailProfileTop h2,
.shopDetailAccountList strong,
.shopDetailSimilarGrid strong {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--shop-text);
  font-size: 14px;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopInfoCell strong span {
  margin-left: 6px;
  border-radius: 999px;
  background: var(--shop-accent-soft);
  color: var(--shop-accent-strong);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 900;
}

.shopTags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.shopTags em {
  border-radius: 999px;
  background: var(--shop-bg-soft);
  color: var(--shop-muted);
  padding: 2px 6px;
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.shopInfoCell small,
.shopDetailAccountList span,
.shopDetailSimilarGrid span,
.shopDetailSimilarGrid p,
.shopDetailSimilarGrid em {
  min-width: 0;
  overflow: hidden;
  color: var(--shop-muted);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopTrendSvg {
  width: 136px;
  height: 46px;
  display: block;
}

.shopTrendSvg path {
  fill: color-mix(in srgb, var(--shop-accent) 12%, transparent);
}

.shopTrendSvg polyline {
  fill: none;
  stroke: var(--shop-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.shopSearchTable td > button,
.shopSearchTable .cuiDataListTableCell > button,
.shopSearchTable .collected {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-muted);
  cursor: pointer;
}

.shopSearchTable .collected,
.shopSearchTable .cuiDataListTableCell > button.collected {
  border-color: color-mix(in srgb, #f59e0b 28%, var(--shop-line));
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.shopRankSummary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
}

.shopRankSummary strong {
  display: block;
  margin-top: 4px;
  color: var(--shop-text);
  font-size: 18px;
  font-weight: 950;
}

.shopRankFilterHeader strong {
  display: block;
  color: var(--shop-text);
  font-size: 16px;
  font-weight: 950;
}

.shopRankSelected {
  border-top: 1px solid var(--shop-line);
  padding-top: 12px;
}

.shopRankSelected > span {
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 850;
}

.shopRankSelected > div {
  min-width: 0;
  flex: 1 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shopRankSelected em,
.shopRankStateStrip span,
.shopRankChange,
.shopRankMedal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-style: normal;
  font-weight: 850;
}

.shopRankSelected em {
  min-height: 30px;
  background: var(--shop-bg-soft);
  color: var(--shop-text);
  padding: 0 10px;
  font-size: 12px;
}

.shopRankMedal {
  width: 30px;
  height: 30px;
  background: var(--shop-bg-soft);
  color: var(--shop-text);
}

.shopRankMedal.rank-1,
.shopRankMedal.rank-2,
.shopRankMedal.rank-3 {
  background: var(--shop-accent);
  color: #ffffff;
}

.shopRankChange {
  min-height: 28px;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  padding: 0 9px;
  font-size: 12px;
}

.shopRankChange.positive {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.shopRankStateStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--shop-line);
  padding-top: 12px;
}

.shopRankStateStrip span {
  min-height: 30px;
  background: var(--shop-bg-soft);
  color: var(--shop-muted);
  padding: 0 10px;
  font-size: 12px;
}

.shopRankFooter {
  border-top: 1px solid var(--shop-line);
  padding-top: 12px;
}

.shopRankFooter span {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 850;
}

.shopRankFooter strong {
  display: block;
  margin-top: 4px;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 850;
}

.shopRankPagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shopDetailBreadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 800;
}

.shopDetailBreadcrumb a {
  color: var(--shop-accent-strong);
  text-decoration: none;
}

.shopDetailHeroGrid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
}

.shopDetailProfileCard,
.shopDetailRatingCard,
.shopDetailChartCard {
  padding: 18px;
}

.shopDetailAvatar {
  width: 58px;
  height: 58px;
  font-size: 22px;
}

.shopDetailProfileList {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
}

.shopDetailProfileList div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--shop-line);
  padding-bottom: 8px;
}

.shopDetailProfileList dt,
.shopDetailProfileList dd {
  margin: 0;
  color: var(--shop-muted);
  font-size: 12px;
}

.shopDetailProfileList dd {
  color: var(--shop-text);
  font-weight: 850;
}

.shopDetailProfileActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.shopDetailHeroMain {
  display: grid;
  gap: 14px;
}

.shopDetailRatingCard {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.shopDetailRatingCard > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.shopDetailRatingCard strong {
  color: var(--shop-text);
  font-size: 18px;
  font-weight: 950;
}

.shopDetailRatingItem {
  border-left: 1px solid var(--shop-line);
  padding-left: 12px;
}

.shopDetailAnchorNav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  box-shadow: var(--shop-shadow);
}

.shopDetailAnchorNav a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 850;
  padding: 0 12px;
  text-decoration: none;
}

.shopDetailAnchorNav a:hover {
  background: var(--shop-accent-soft);
  color: var(--shop-accent-strong);
}

.shopDetailSectionHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.shopDetailSectionHeader h2,
.shopDetailChartCard h3 {
  margin: 0;
  color: var(--shop-text);
  font-size: 18px;
  font-weight: 950;
}

.shopDetailSectionTools span {
  flex: 1 1;
}

.shopDetailTwoColumn {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.shopDetailBarList {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.shopDetailPage .shopDetailBarList .shopBarRow {
  display: grid;
  grid-template-columns: minmax(96px, 0.9fr) minmax(140px, 2.6fr) minmax(60px, auto) minmax(42px, auto);
  align-items: center;
  gap: 14px;
  padding: 7px 10px;
  border-radius: 12px;
  transition: background 220ms ease, opacity 220ms ease;
}

.shopDetailPage .shopDetailBarList .shopBarRow.is-active {
  background: color-mix(in srgb, var(--bar-color) 9%, transparent);
}

.shopDetailPage .shopDetailBarList .shopBarRow.is-dimmed {
  opacity: 0.5;
}

.shopDetailPage .shopBarLabel {
  min-width: 0;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shopDetailPage .shopBarTrack {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: var(--shop-bg-soft);
  overflow: hidden;
}

.shopDetailPage .shopBarFill {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bar-color) 52%, #ffffff), var(--bar-color));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--bar-color) 32%, transparent);
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--bar-delay, 0ms);
}

.shopDetailPage .shopBarValue {
  text-align: right;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 900;
}

.shopDetailPage .shopBarPct {
  text-align: right;
  color: var(--bar-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.shopDetailTableWrap.cuiDataList {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shopDetailTableWrap .cuiDataListBody {
  overflow-x: auto;
}

.shopDetailTable {
  width: 100%;
  border-collapse: collapse;
}

.shopDetailTable th,
.shopDetailTable td,
.shopDetailTable .cuiDataListTableHeadCell,
.shopDetailTable .cuiDataListTableCell {
  border-bottom: 1px solid var(--shop-line);
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
}

.shopDetailTable th,
.shopDetailTable .cuiDataListTableHeadCell {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 900;
}

.shopDetailTable td,
.shopDetailTable .cuiDataListTableCell {
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 760;
}

.shopDetailAccountList,
.shopDetailSimilarGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.shopDetailAccountList article,
.shopDetailSimilarGrid article {
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.shopDetailSmallAvatar {
  width: 38px;
  height: 38px;
}

.shopDetailFilterGroup,
.shopDetailDateRange,
.shopDetailNumberRange {
  min-width: 0;
  display: inline-grid;
  align-items: center;
  gap: 5px;
}

.shopDetailDateRange,
.shopDetailNumberRange {
  grid-template-columns: auto minmax(132px, 1fr) auto minmax(132px, 1fr);
}

.shopDetailFilterGroup {
  grid-template-columns: auto minmax(150px, 1fr);
}

.shopDetailFilterGroup > span,
.shopDetailDateRange > span,
.shopDetailNumberRange > span {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.shopDetailDateRange input,
.shopDetailNumberRange input,
.shopDetailFilterGroup select {
  width: 100%;
  padding: 0 10px;
}

.shopDetailDateRange input.is-empty,
.shopDetailDateRange input.is-empty::-webkit-datetime-edit,
.shopDetailDateRange input.is-empty::-webkit-datetime-edit-fields-wrapper,
.shopDetailDateRange input.is-empty::-webkit-datetime-edit-text,
.shopDetailDateRange input.is-empty::-webkit-datetime-edit-month-field,
.shopDetailDateRange input.is-empty::-webkit-datetime-edit-day-field,
.shopDetailDateRange input.is-empty::-webkit-datetime-edit-year-field {
  color: transparent;
}

.shopDetailDateRange em,
.shopDetailNumberRange em {
    color: var(--shop-faint);
    font-style: normal;
    font-weight: 900;
}

.shopDetailProductFilters {
    display: grid;
    gap: 12px;
    border: 1px solid var(--shop-line);
    border-radius: 8px;
    background: var(--shop-bg-soft);
    padding: 14px;
}

.shopDetailProductListHeader,
.shopDetailProductFilterRow,
.shopDetailProductFilterSelects {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.shopDetailProductListHeader {
    justify-content: space-between;
}

.shopDetailProductListHeader h3 {
    margin: 0;
    color: var(--shop-text);
    font-size: 14px;
    font-weight: 950;
}

.shopDetailProductListHeader button,
.shopDetailProductFilterRow button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--shop-line);
    border-radius: 8px;
    background: var(--shop-bg);
    color: var(--shop-muted);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    padding: 0 11px;
    white-space: nowrap;
}

.shopDetailProductListHeader button:hover,
.shopDetailProductFilterRow button:hover,
.shopDetailProductFilterRow button.active {
    border-color: color-mix(in srgb, var(--shop-accent) 46%, var(--shop-line));
    background: var(--shop-accent-soft);
    color: var(--shop-accent-strong);
}

.shopDetailProductFilterRow > span {
    flex: 0 0 74px;
    color: var(--shop-muted);
    font-size: 12px;
    font-weight: 950;
}

.shopDetailProductChipGroup,
.shopDetailProductDatePresets {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.shopDetailProductChipGroup button em {
    color: var(--shop-faint);
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
}

.shopDetailProductFilterSelects .shopDetailFilterGroup {
    min-width: 196px;
}

.shopDetailAccountStats {
    display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.shopDetailAccountStats em {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--shop-line);
  border-radius: 999px;
  background: var(--shop-bg-soft);
  color: var(--shop-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  padding: 0 8px;
}

@media (max-width: 1280px) {
  .shopSearchHeader,
  .shopDetailTitleRow,
  .shopRankSummary,
  .shopResultsHeader,
  .shopRankFooter,
  .shopRankSelected {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .shopMetricGrid,
  .shopDetailMetricGrid,
  .shopDetailMiniMetricGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shopDetailHeroGrid,
  .shopDetailTwoColumn {
    grid-template-columns: minmax(0, 1fr);
  }

  .shopDetailRatingCard,
  .shopDetailAccountList,
  .shopDetailSimilarGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .shopSearchPage {
    min-width: 0;
  }

  .shopSearchHeader,
  .shopDetailTitleRow,
  .shopSearchCard,
  .shopResultsCard,
  .shopDetailSection {
    padding: 16px;
  }

  .shopSearchBar {
    grid-template-columns: 20px minmax(0, 1fr);
    border-radius: 8px;
    padding: 10px 12px;
  }

  .shopSearchBar button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .shopFilterRow,
  .shopFilterGrid,
  .shopAdvancedGrid,
  .shopMetricGrid,
  .shopDetailMetricGrid,
  .shopDetailMiniMetricGrid,
  .shopDetailRatingCard,
  .shopDetailAccountList,
  .shopDetailSimilarGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shopDetailFilterGroup,
  .shopDetailDateRange,
  .shopDetailNumberRange {
      width: 100%;
      grid-template-columns: minmax(0, 1fr);
  }

  .shopDetailProductListHeader,
  .shopDetailProductFilterRow,
  .shopDetailProductFilterSelects,
  .shopDetailProductFilterSelects .shopDetailFilterGroup {
      width: 100%;
  }

  .shopDetailProductFilterRow > span {
      flex-basis: 100%;
  }

  .shopDetailDateRange em,
  .shopDetailNumberRange em {
      display: none;
  }
}

.commerceSearchFilterPanel.cuiSearchFilterPanel {
  --commerce-control-line: #e4e8ef;
  --commerce-control-line-hover: color-mix(in srgb, var(--primary) 30%, var(--commerce-control-line));
  --commerce-control-focus: color-mix(in srgb, var(--primary) 12%, transparent);
  --commerce-control-bg: #ffffff;
  --commerce-control-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
  --cui-search-filter-accent: var(--primary);
  --cui-search-filter-accent-soft: var(--primary-soft);
  --cui-search-filter-line: var(--commerce-control-line);
  --cui-search-filter-text: var(--text-1);
  --cui-search-filter-muted: var(--text-3);
  --cui-search-filter-label-width: 104px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-light);
}

.commerceSearchFilterPanel .cuiSearchFilterTop {
  align-items: center;
}

.commerceSearchFilterPanel .cuiSearchFilterBox {
  width: min(760px, 100%);
  border-color: var(--primary);
}

.commerceSearchFilterPanel .cuiSearchFilterRow {
  padding: 7px 0;
}

.commerceSearchFilterPanel .shopFilterRow.cuiSearchFilterRow {
  display: flex;
  grid-template-columns: none;
  align-items: flex-start;
  gap: 8px;
}

.commerceSearchFilterPanel .shopFilterRow > .cuiSearchFilterRowBody {
  min-width: 0;
  display: block;
  flex: 1 1 auto;
}

.commerceSearchFilterPanel .cuiSearchFilterChipList,
.commerceSearchFilterPanel .fmReplicaOptions,
.commerceSearchFilterPanel .liveSearchChipScroller {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
}

.commerceSearchFilterPanel .cuiSearchFilterChip,
.commerceSearchFilterPanel .fmReplicaOptions button,
.commerceSearchFilterPanel .shopFilterChip,
.commerceSearchFilterPanel .liveSearchChip {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-1);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 780;
  box-shadow: none;
}

.commerceSearchFilterPanel .cuiSearchFilterChipActive,
.commerceSearchFilterPanel .cuiSearchFilterChipActive:hover,
.commerceSearchFilterPanel .fmReplicaOptions button.active,
.commerceSearchFilterPanel .shopFilterChip.cuiSearchFilterChipActive,
.commerceSearchFilterPanel .liveSearchChip.cuiSearchFilterChipActive {
  background: var(--primary);
  color: #ffffff;
  padding: 0 16px;
}

.commerceSearchFilterPanel .cuiSearchFilterChipBadge {
  background: var(--success);
}

.commerceSearchFilterPanel .fmReplicaSearchBox,
.commerceSearchFilterPanel .shopSearchBar,
.commerceSearchFilterPanel .liveSearchSearchBox {
  min-width: 0;
}

.commerceSearchFilterPanel .fmReplicaSearchBox input,
.commerceSearchFilterPanel .shopSearchBar input,
.commerceSearchFilterPanel .liveSearchSearchBox input {
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.commerceSearchFilterPanel .fmReplicaSearchButton,
.commerceSearchFilterPanel .liveSearchSearchButton {
  flex: 0 0 72px;
  align-self: stretch;
  width: 72px;
  min-height: 0;
  border: 0;
  border-radius: 0 999px 999px 0;
  background: var(--primary);
  color: #ffffff;
  padding: 0;
}

.commerceSearchFilterPanel .shopSearchBar button {
  flex: 0 0 auto;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #ffffff;
  padding: 0 18px;
}

.commerceSearchFilterPanel .fmTranslateButton,
.commerceSearchFilterPanel .fmImageSearchButton,
.commerceSearchFilterPanel .liveSearchResetButton {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--commerce-control-line);
  border-radius: 999px;
  background: var(--commerce-control-bg);
  color: var(--primary);
  box-shadow: var(--commerce-control-shadow);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 900;
}

.commerceSearchFilterPanel .fmReplicaExpand {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}

.commerceSearchFilterPanel .fmReplicaChecks,
.commerceSearchFilterPanel .liveSearchInlineSelects,
.commerceSearchFilterPanel .shopFilterGrid,
.commerceSearchFilterPanel .fmReplicaSelects {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.commerceSearchFilterPanel .shopAdvancedGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
  gap: 10px;
}

.commerceSearchFilterPanel .fmReplicaChecks label {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 780;
}

.commerceSearchFilterPanel .fmReplicaChecks input {
  width: 18px;
  height: 18px;
  appearance: none;
  display: inline-grid;
  place-content: center;
  border: 1px solid var(--commerce-control-line);
  border-radius: 5px;
  background: var(--commerce-control-bg);
  box-shadow: var(--commerce-control-shadow);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.commerceSearchFilterPanel .fmReplicaChecks input::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: #ffffff;
  transform: scale(0);
  transition: transform 120ms ease;
}

.commerceSearchFilterPanel .fmReplicaChecks input:hover {
  border-color: var(--commerce-control-line-hover);
}

.commerceSearchFilterPanel .fmReplicaChecks input:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--commerce-control-focus);
}

.commerceSearchFilterPanel .fmReplicaChecks input:checked {
  border-color: var(--primary);
  background: var(--primary);
}

.commerceSearchFilterPanel .fmReplicaChecks input:checked::before {
  transform: scale(1);
}

.commerceSearchFilterPanel .fmDateRange {
  width: min(420px, 100%);
  min-height: 40px;
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--commerce-control-line);
  border-radius: 999px;
  background: var(--commerce-control-bg);
  box-shadow: var(--commerce-control-shadow);
  padding: 0 14px;
}

.commerceSearchFilterPanel .fmDateRange:focus-within {
  border-color: var(--commerce-control-line-hover);
  box-shadow: 0 0 0 3px var(--commerce-control-focus);
}

.commerceSearchFilterPanel .fmDateRange input {
  min-width: 0;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 800;
}

.commerceSearchFilterPanel .fmReplicaFilterSelect,
.commerceSearchFilterPanel .shopFilterSelect,
.commerceSearchFilterPanel .liveSearchDropdown {
  --creator-line: var(--commerce-control-line);
  --filter-select-border: var(--commerce-control-line);
  --filter-select-bg: var(--commerce-control-bg);
  min-width: 154px;
  min-height: 40px;
  border-radius: 999px;
  box-shadow: var(--commerce-control-shadow);
}

.commerceSearchFilterPanel .fmReplicaFilterSelect .filterSelectTrigger,
.commerceSearchFilterPanel .shopFilterSelect .filterSelectTrigger,
.commerceSearchFilterPanel .liveSearchDropdown .filterSelectTrigger {
  min-height: 40px;
  border: 1px solid var(--commerce-control-line);
  border-radius: var(--cui-radius-md);
  background: var(--commerce-control-bg);
  box-shadow: none;
}

.commerceSearchFilterPanel .fmReplicaFilterSelect.open .filterSelectTrigger,
.commerceSearchFilterPanel .fmReplicaFilterSelect:focus-within .filterSelectTrigger,
.commerceSearchFilterPanel .shopFilterSelect.open .filterSelectTrigger,
.commerceSearchFilterPanel .shopFilterSelect:focus-within .filterSelectTrigger,
.commerceSearchFilterPanel .liveSearchDropdown.open .filterSelectTrigger,
.commerceSearchFilterPanel .liveSearchDropdown:focus-within .filterSelectTrigger {
  border-color: var(--commerce-control-line-hover);
  box-shadow: 0 0 0 3px var(--commerce-control-focus);
}

.commerceSearchFilterPanel .shopAdvancedGrid label {
  min-width: 0;
  display: grid;
  gap: 6px;
  border: 1px solid var(--commerce-control-line);
  border-radius: 10px;
  background: var(--commerce-control-bg);
  box-shadow: var(--commerce-control-shadow);
  padding: 8px 10px;
}

.commerceSearchFilterPanel .shopAdvancedGrid label > span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 820;
}

.commerceSearchFilterPanel .shopAdvancedGrid label > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.commerceSearchFilterPanel .shopAdvancedGrid input {
  min-width: 0;
  height: 34px;
  border: 1px solid var(--commerce-control-line);
  border-radius: 8px;
  background: var(--commerce-control-bg);
  color: var(--text-1);
  font-size: 12px;
  padding: 0 8px;
}

.commerceSearchFilterPanel .shopAdvancedGrid input:focus {
  border-color: var(--commerce-control-line-hover);
  outline: 0;
  box-shadow: 0 0 0 3px var(--commerce-control-focus);
}

.commerceDataListPanel {
  --commerce-control-line: #e4e8ef;
  --commerce-control-line-hover: color-mix(in srgb, var(--primary) 30%, var(--commerce-control-line));
  --commerce-control-focus: color-mix(in srgb, var(--primary) 12%, transparent);
  --commerce-control-bg: #ffffff;
  --commerce-control-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
}

.commerceDataListPanel.fmListPanel .fmCheckButton {
  width: 28px;
  height: 28px;
  border: 1px solid var(--commerce-control-line);
  border-radius: 8px;
  background: var(--commerce-control-bg);
  color: #667085;
  box-shadow: var(--commerce-control-shadow);
}

.commerceDataListPanel.fmListPanel .fmCheckButton:hover,
.commerceDataListPanel.fmListPanel .fmCheckButton:focus-visible {
  border-color: var(--commerce-control-line-hover);
  background: color-mix(in srgb, var(--primary) 6%, #ffffff);
  color: var(--primary);
  outline: 0;
}

.commerceDataListPanel.fmListPanel .fmCheckButton.is-checked {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.commerceDataListPanel.fmListPanel .fmCheckButton.is-checked:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  color: #ffffff;
}

.commerceDataListPanel.fmListPanel .fmCheckButton:focus-visible {
  box-shadow: 0 0 0 3px var(--commerce-control-focus);
}

.commerceDataListPanel.fmListPanel .fmSortGroup button,
.commerceDataListPanel.fmListPanel .fmIconText,
.commerceDataListPanel.fmListPanel .fmPagination button,
.commerceDataListPanel.fmListPanel .fmPaginationSelect .filterSelectTrigger,
.commerceDataListPanel.creatorResultPanel .creatorPager button,
.commerceDataListPanel.creatorResultPanel .creatorPager .cuiPaginationEllipsis,
.commerceDataListPanel.creatorResultPanel .creatorResultActions > button,
.commerceDataListPanel.shopResultsCard .shopResultsActions > button,
.commerceDataListPanel.shopResultsCard .shopSearchTable td > button,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableCell > button {
  border-color: var(--commerce-control-line);
  background: var(--commerce-control-bg);
  box-shadow: var(--commerce-control-shadow);
}

.commerceDataListPanel.fmListPanel .fmSortGroup button:hover,
.commerceDataListPanel.fmListPanel .fmIconText:hover,
.commerceDataListPanel.fmListPanel .fmPagination button:not(:disabled):hover,
.commerceDataListPanel.fmListPanel .fmPaginationSelect.open .filterSelectTrigger,
.commerceDataListPanel.fmListPanel .fmPaginationSelect:focus-within .filterSelectTrigger,
.commerceDataListPanel.creatorResultPanel .creatorPager button:not(:disabled):hover,
.commerceDataListPanel.creatorResultPanel .creatorResultActions > button:not(:disabled):hover,
.commerceDataListPanel.shopResultsCard .shopResultsActions > button:not(:disabled):hover,
.commerceDataListPanel.shopResultsCard .shopSearchTable td > button:hover,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableCell > button:hover {
  border-color: var(--commerce-control-line-hover);
}

@media (max-width: 860px) {
  .commerceSearchFilterPanel.cuiSearchFilterPanel {
    padding: 16px;
  }

  .commerceSearchFilterPanel .cuiSearchFilterTop,
  .commerceSearchFilterPanel .cuiSearchFilterRow {
    align-items: stretch;
    flex-direction: column;
  }

  .commerceSearchFilterPanel .cuiSearchFilterLabel {
    width: auto;
    min-width: 0;
    justify-content: flex-start;
  }
}

.radarPage .commerceDataListPanel.radarDataListTable.cuiDataList {
  --commerce-list-cell-x: 22px;
  --commerce-list-head-height: 78px;
  --commerce-list-row-height: 142px;
  --commerce-list-line: #edf0f5;
  --commerce-list-text: #101828;
  --commerce-list-muted: #667085;
  border: 1px solid #eef1f5;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 14px 38px rgba(24, 32, 51, 0.06);
  overflow: hidden;
}

.radarPage .commerceDataListPanel.radarDataListTableCompact.cuiDataList {
  --commerce-list-cell-x: 16px;
  --commerce-list-head-height: 56px;
  --commerce-list-row-height: 64px;
  border-radius: 14px;
  box-shadow: none;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTableWrap {
  border: 0;
  border-radius: 0;
  background: #ffffff;
  overflow-x: auto;
  scrollbar-color: rgba(148, 163, 184, 0.65) rgba(148, 163, 184, 0.14);
  scrollbar-width: thin;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTableWrap::-webkit-scrollbar {
  height: 16px;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTableWrap::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTableWrap::-webkit-scrollbar-thumb {
  border: 4px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.7);
}

.radarPage .commerceDataListPanel.radarDataListTable .cuiDataListBody,
.radarPage .commerceDataListPanel.radarDataListTable .cuiDataListBodyInner {
  border: 0;
  background: #ffffff;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTable {
  width: 100%;
  min-width: 0;
  display: grid;
  border-collapse: collapse;
  color: var(--commerce-list-text);
  font-size: 14px;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTableRow,
.radarPage .commerceDataListPanel.radarDataListTable .cuiDataListTableRow {
  min-height: var(--commerce-list-row-height);
  align-items: center;
  gap: 0;
  border-bottom-color: var(--commerce-list-line);
  color: #344054;
  font-size: 14px;
  padding: 0;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTableRow.head,
.radarPage .commerceDataListPanel.radarDataListTable .cuiDataListTableHead {
  min-height: var(--commerce-list-head-height);
  border-bottom: 1px solid var(--commerce-list-line);
  background: #ffffff;
  color: var(--commerce-list-text);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: none;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTable th,
.radarPage .commerceDataListPanel.radarDataListTable .radarTable td,
.radarPage .commerceDataListPanel.radarDataListTable .radarTable .cuiDataListTableHeadCell,
.radarPage .commerceDataListPanel.radarDataListTable .radarTable .cuiDataListTableCell {
  min-width: 0;
  height: auto;
  border-bottom: 1px solid var(--commerce-list-line);
  color: inherit;
  font-size: 14px;
  line-height: 1.45;
  padding: 24px var(--commerce-list-cell-x);
  text-align: left;
  text-transform: none;
  vertical-align: middle;
  white-space: normal;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTable .cuiDataListTableHeadCell {
  color: var(--commerce-list-text);
  font-size: 14px;
  font-weight: 950;
  padding-top: 0;
  padding-bottom: 0;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTable .cuiDataListTableCell:first-child {
  color: var(--commerce-list-text);
  font-weight: 950;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTable .cuiDataListTableRow:not(.cuiDataListTableHead):hover {
  background: #fbfdff;
}

.radarPage .commerceDataListPanel.radarDataListTableCompact .radarTable .cuiDataListTableHeadCell,
.radarPage .commerceDataListPanel.radarDataListTableCompact .radarTable .cuiDataListTableCell {
  overflow: hidden;
  padding: 12px var(--commerce-list-cell-x);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .commerceDataListPanel.radarDataListTableCompact .radarTable .cuiDataListTableHeadCell:not(:first-child),
.radarPage .commerceDataListPanel.radarDataListTableCompact .radarTable .cuiDataListTableCell:not(:first-child) {
  text-align: center;
}

.radarPage .commerceDataListPanel.radarDataListTableCompact .radarCompareMetricTable .cuiDataListTableHeadCell.highlight,
.radarPage .commerceDataListPanel.radarDataListTableCompact .radarCompareMetricTable .cuiDataListTableCell.highlight {
  background: color-mix(in srgb, var(--primary) 7%, #ffffff);
  color: #263b5d;
  font-weight: 950;
}

/* ===== merged from develop: 队友页面基础样式(shop/creator 等),Phase 2 组件化时收敛 ===== */

.accountSettingsRail,
.accountSettingsMain,
.accountSettingsRows,
.accountSettingsRailMeta,
.accountSettingsRailNav {
  display: grid;
}

.creatorSearchTypeSelect {
  flex: 0 0 186px;
  width: 186px;
  min-width: 0;
  height: 100%;
  border-right: 1px solid var(--creator-line);
  background: #ffffff;
}

.creatorSearchTypeSelect.ant-select,
.creatorSearchTypeSelect .ant-select-selector,
.creatorSearchTypeSelect .ant-select-selection-wrap,
.creatorSearchTypeSelect .ant-select-selection-item {
  height: 100% !important;
}

.creatorSearchTypeSelect .ant-select-selector {
  padding: 0 16px 0 30px !important;
  border: 0 !important;
  border-radius: 999px 0 0 999px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.creatorSearchTypeSelect.ant-select-focused .ant-select-selector,
.creatorSearchTypeSelect.ant-select-open .ant-select-selector,
.creatorSearchTypeSelect .ant-select-selector:hover,
.creatorSearchTypeSelect .ant-select-selector:focus,
.creatorSearchTypeSelect .ant-select-selector:active {
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.creatorSearchTypeSelect .ant-select-selection-item {
  display: flex;
  align-items: center;
  color: var(--creator-text) !important;
  font-size: 14px;
  font-weight: 900;
}

.creatorSearchTypeSelect.ant-select-disabled .ant-select-selection-item {
  color: var(--creator-text) !important;
  opacity: 1;
}

.creatorSearchTypeSelect .ant-select-arrow {
  color: #9aa7b8;
}

.creatorAntSelectPill {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--creator-line);
  border-radius: 8px;
  background: var(--creator-select-bg);
  color: var(--creator-text);
  padding: 0 6px 0 12px;
  font-size: 13px;
  font-weight: 750;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
}

.creatorAntSelectPill > span {
  flex: 0 0 auto;
  color: var(--creator-muted);
}

.creatorAntSelectPill .ant-select {
  min-width: 82px;
}

.creatorSearchTypePill.creatorAntSelectPill {
  width: 148px;
  min-width: 148px;
  height: 100%;
  min-height: 40px;
  align-self: stretch;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: var(--control-bg);
  box-shadow: none;
  padding: 0 8px 0 18px;
}

.creatorSearchTypePill.creatorAntSelectPill .ant-select-selector {
  height: 100% !important;
  border-radius: 999px 0 0 999px !important;
  background: transparent !important;
  color: var(--creator-text) !important;
  box-shadow: none !important;
}

.creatorSearchTypePill.creatorAntSelectPill .ant-select-selection-item {
  color: var(--creator-text) !important;
}

.creatorSearchTypePill.creatorAntSelectPill .ant-select-selection-wrap,
.creatorSearchTypePill.creatorAntSelectPill .ant-select-selection-item {
  height: 100%;
  line-height: 40px;
}

.creatorPager button,
.creatorPagerEllipsis {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--pager-muted);
  font-size: 15px;
  font-weight: 800;
}

.creatorPagerEllipsis {
  letter-spacing: 2px;
}

.creatorPagerJump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--pager-muted);
  padding: 3px 4px 3px 10px;
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.creatorPagerJump:focus-within {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.creatorPagerJump input {
  width: 58px;
  height: 38px;
  border: 1px solid var(--creator-line, var(--line-dark));
  border-radius: 8px;
  outline: 0;
  background: var(--creator-select-bg, var(--surface-panel));
  color: var(--pager-text);
  padding: 0 10px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.03);
  font-weight: 850;
  text-align: center;
}

.creatorPagerJump input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft), inset 0 0 0 1px rgba(15, 23, 42, 0.03);
}

[data-theme='dark'] .creatorPagerJump input {
  border-color: var(--creator-line);
  background: var(--surface-panel);
}

[data-theme='dark'] .creatorPagerJump:focus-within {
  border-color: var(--primary-light);
  background: color-mix(in srgb, var(--creator-accent) 18%, transparent);
  color: #fff;
  box-shadow: 0 0 0 3px var(--primary-soft);
}

[data-theme='dark'] .creatorPagerJump input:focus {
  border-color: var(--primary-light);
  background: var(--surface-panel-strong);
  box-shadow: 0 0 0 3px var(--primary-soft), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.teamHubProgressHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.teamHubProgressSteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  position: relative;
}

.teamHubProgressIcon {
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(8, 145, 178, 0.18);
  border-radius: 8px;
  background: rgba(8, 145, 178, 0.08);
  color: var(--team-cyan);
}

.teamHubProgress article.waiting .teamHubProgressIcon {
  border-color: rgba(217, 119, 6, 0.22);
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.teamHubProgress article.bound .teamHubProgressIcon {
  border-color: rgba(5, 150, 105, 0.22);
  background: rgba(16, 185, 129, 0.1);
  color: var(--team-green);
}

.teamHubProgressHeader span,
.teamHubProgressHeader em,
.teamHubProgress em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.shopSearchHeader h1,
.shopResultsHeader h2,
.shopDetailTitleRow h1,
.shopDetailTitleRow h3,
.shopDetailSectionHeader h2,
.shopChartCardHeader h3 {
  margin: 0;
  color: var(--shop-text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.25;
  letter-spacing: 0;
}

.shopSearchHeader p,
.shopResultsHeader p,
.shopDetailSectionHeader p,
.shopChartCardHeader p,
.shopRankSummary p {
  margin: 5px 0 0;
  color: var(--shop-muted);
  font-size: 13px;
  line-height: 1.55;
}

.shopMetricGrid article,
.shopDetailMetricGrid article,
.shopDetailMiniMetricGrid article,
.shopDetailSimilarCard,
.shopDetailChartCard,
.shopDetailProfileCard,
.shopDetailRatingCard,
.shopSearchCard,
.shopResultsCard,
.shopDetailSection {
  min-width: 0;
  border: 1px solid var(--shop-line);
  border-radius: 14px;
  background: var(--shop-panel);
  box-shadow: var(--shop-shadow);
}

.shopSearchBar button,
.shopResultsHeader button,
.shopRankPagination button,
.shopDetailProfileActions button,
.shopDetailRefreshButton,
.shopDetailRangeButtons button,
.shopDetailSectionTools button,
.shopDetailFilterLine button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--shop-line);
  border-radius: 9px;
  background: var(--shop-panel);
  color: var(--shop-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0 12px;
  white-space: nowrap;
}

.shopSearchBar button:hover,
.shopResultsHeader button:hover,
.shopRankPagination button:hover,
.shopDetailProfileActions button:hover,
.shopDetailRefreshButton:hover,
.shopDetailRangeButtons button:hover,
.shopDetailSectionTools button:hover,
.shopDetailFilterLine button:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 32%, var(--shop-line));
  color: var(--shop-accent);
}

.shopFilterSectionHead,
.shopRankFilterHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shopFilterSectionHead strong,
.shopRankFilterHeader strong,
.shopRankFilterSectionTitle {
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 950;
}

.shopFilterSectionHead button,
.shopRankFilterHeader button,
.shopRankSelected > button,
.shopSearchSelected > button {
  border: 0;
  background: transparent;
  color: var(--shop-accent);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.shopFilterRow > div,
.shopFilterChipGrid,
.shopRankQuickFilters,
.shopRankPagination,
.shopDetailFilterLine,
.shopDetailSectionTools,
.shopDetailChartLegend {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.shopRankSelected,
.shopSearchSelected {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--shop-line);
  padding-top: 12px;
}

.shopRankSelected > span,
.shopSearchSelected > span {
  color: var(--shop-faint);
  font-size: 12px;
  font-weight: 900;
}

.shopRankSelected > div,
.shopSearchSelected > div {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.shopRankSelected em,
.shopSearchSelected em,
.shopTags em,
.shopDetailSimilarTags em,
.shopDetailRegionTag {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--shop-accent-soft);
  color: var(--shop-accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  padding: 0 8px;
}

.shopResultsHeader > div:last-child,
.shopDetailProfileActions,
.shopDetailStickyActions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.shopInfoCell,
.shopDetailStickyLeft,
.shopDetailProfileTop,
.shopDetailSimilarCardTop {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.shopAvatar,
.shopDetailAvatar,
.shopDetailStickyAvatar,
.shopDetailSmallAvatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 20%, var(--shop-line));
  border-radius: 10px;
  background: linear-gradient(135deg, var(--shop-accent-soft), #ffffff);
  color: var(--shop-accent);
  font-weight: 950;
}

.shopAvatar,
.shopDetailStickyAvatar,
.shopDetailSmallAvatar {
  width: 34px;
  height: 34px;
}

.shopInfoCell strong,
.shopInfoCell small,
.shopDetailStickyMeta strong,
.shopDetailStickyMeta span,
.shopDetailProfileTop h2,
.shopDetailProfileTop span {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopInfoCell strong,
.shopDetailStickyMeta strong,
.shopDetailProfileTop h2 {
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 950;
}

.shopInfoCell small,
.shopDetailStickyMeta span,
.shopDetailProfileTop span {
  color: var(--shop-faint);
  font-size: 12px;
}

.shopTrendSvg .animate,
.shopTrendLine.animate {
  animation: shopLineDraw 1.1s ease both;
}

.shopMetricCardIcon,
.shopMetricCardNote,
.shopMetricCardLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.shopMetricCardLink {
  color: var(--shop-accent);
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.shopRatingMain {
  min-width: 180px;
  display: grid;
  gap: 6px;
}

.shopRatingMain strong {
  color: var(--shop-text);
  font-size: 24px;
}

.shopRatingDivider {
  align-self: stretch;
  width: 1px;
  background: var(--shop-line);
}

.shopStarRating {
  position: relative;
  width: max-content;
  color: #d8dee8;
  font-size: 17px;
  letter-spacing: 1px;
}

.shopStarRatingFilled {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: #f59e0b;
  white-space: nowrap;
}

.shopDetailStickyHeader {
  position: fixed;
  top: 0;
  left: var(--workspace-sidebar-width, 0);
  right: 0;
  z-index: 900;
  padding: 10px 18px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.shopDetailStickyHeader.visible {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.shopDetailStickyPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--shop-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.12);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  padding: 10px 12px;
}

.shopDetailStickyIdentity {
  min-width: 0;
  display: grid;
  gap: 9px;
}

.shopDetailStickyTabs,
.shopDetailAnchorNav {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
}

.shopDetailStickyTabs a,
.shopDetailAnchorNav a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 900;
  padding: 0 11px;
  text-decoration: none;
  white-space: nowrap;
}

.shopDetailStickyTabs a:hover,
.shopDetailStickyTabs a.active,
.shopDetailAnchorNav a:hover,
.shopDetailAnchorNav a.active {
  background: var(--shop-accent-soft);
  color: var(--shop-accent);
}

.shopDetailTrendChart {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.shopDetailTrendSvg {
  width: 100%;
  min-height: 280px;
}

.shopTrendPlotBg {
  fill: var(--shop-panel-soft);
}

.shopChartGridLabel,
.shopTrendTooltipTitle {
  fill: var(--shop-faint);
  font-size: 11px;
  font-weight: 800;
}

.shopTrendLine {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.shopTrendGuideLine {
  stroke: var(--shop-line-strong);
  stroke-dasharray: 4 4;
}

.shopTrendActiveDot {
  fill: #ffffff;
  stroke-width: 3;
}

.shopTrendTooltip rect,
.shopTrendDateBadge rect {
  fill: rgba(15, 23, 42, 0.86);
}

.shopTrendTooltip text,
.shopTrendDateBadge text {
  fill: #ffffff;
  font-size: 11px;
  font-weight: 850;
}

/* Trend: static metric fields (below the date range) */

.shopDetailPage .shopTrendMetricFields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 2px 0 6px;
}

.shopDetailPage .shopTrendMetricField {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid var(--shop-line);
  border-radius: 999px;
  background: var(--shop-panel-soft);
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 850;
}

.shopDetailPage .shopTrendMetricField i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--field-color, var(--shop-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-color, var(--shop-accent)) 20%, transparent);
}

/* Trend: chart/table toggle — table view */

.shopDetailPage .shopTrendTableView {
  display: grid;
  gap: 14px;
  margin-top: 4px;
  animation: shopDistReveal 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shopDetailPage .shopTrendTableWrap {
  border: 1px solid var(--shop-line);
  border-radius: 14px;
  overflow: auto;
}

.shopDetailPage .shopTrendTable {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.shopDetailPage .shopTrendTable th {
  padding: 15px 18px;
  text-align: left;
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 900;
  background: var(--shop-panel-soft);
  border-bottom: 1px solid var(--shop-line);
  white-space: nowrap;
}

.shopDetailPage .shopTrendTable td {
  padding: 15px 18px;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 750;
  border-bottom: 1px solid var(--shop-line);
  white-space: nowrap;
}

.shopDetailPage .shopTrendTable tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--shop-bg-soft) 55%, transparent);
}

.shopDetailPage .shopTrendTable tbody tr:last-child td {
  border-bottom: 0;
}

.shopDetailPage .shopTrendTable tbody tr {
  transition: background 150ms ease;
}

.shopDetailPage .shopTrendTable tbody tr:hover {
  background: color-mix(in srgb, var(--shop-accent) 6%, transparent);
}

.shopDetailPage .shopTrendTableFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.shopDetailPage .shopTrendPagination {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.shopDetailPage .shopTrendPagination button {
  min-width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--shop-line);
  border-radius: 9px;
  background: #ffffff;
  color: var(--shop-text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 0 10px;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.shopDetailPage .shopTrendPagination button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--shop-accent) 40%, var(--shop-line));
  color: var(--shop-accent-strong);
}

.shopDetailPage .shopTrendPagination button.active {
  border-color: var(--shop-accent);
  background: var(--shop-accent);
  color: #ffffff;
}

.shopDetailPage .shopTrendPagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.shopDetailPage .shopTrendPageArrow {
  color: var(--shop-muted);
}

.shopDetailPage .shopTrendJump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 850;
}

.shopDetailPage .shopTrendJump input {
  width: 54px;
  min-height: 34px;
  border: 1px solid var(--shop-line);
  border-radius: 9px;
  background: #ffffff;
  color: var(--shop-text);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  text-align: center;
  padding: 0 6px;
}

.shopDetailPage .shopTrendExportBtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: var(--shop-accent);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 0 20px;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--shop-accent) 22%, transparent);
  transition: background 160ms ease, transform 160ms ease;
}

.shopDetailPage .shopTrendExportBtn:hover {
  background: var(--shop-accent-strong);
  transform: translateY(-1px);
}

.shopDetailAccountList strong,
.shopDetailSimilarCard strong {
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 950;
}

.shopDetailAccountList span,
.shopDetailSimilarCard p {
  color: var(--shop-muted);
  font-size: 12px;
  line-height: 1.45;
}

.shopDetailSimilarCard {
  display: grid;
  gap: 12px;
  color: inherit;
  padding: 14px;
  text-decoration: none;
}

.shopDetailSimilarCard:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 28%, var(--shop-line));
}

.shopDetailSimilarStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.shopDetailSimilarStats span {
  display: grid;
  gap: 4px;
  border-radius: 10px;
  background: var(--shop-panel-soft);
  color: var(--shop-faint);
  font-size: 11px;
  font-weight: 850;
  padding: 8px;
}

.shopDetailSimilarStats strong {
  color: var(--shop-text);
  font-size: 12px;
}

/* ===== merged from WJY: chatbi 原型样式,Phase 2 收敛 ===== */

.chatbiProtoThinkingTrace {
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(16, 185, 129, 0.06));
  padding: 12px 14px;
}

.chatbiProtoThinkingTrace summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.chatbiProtoThinkingTrace summary::-webkit-details-marker {
  display: none;
}

.chatbiProtoThinkingTrace summary span,
.chatbiProtoThinkingTrace summary em {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chatbiProtoThinkingTrace summary span {
  color: var(--ink);
  font-weight: 800;
}

.chatbiProtoThinkingTrace summary em {
  border: 1px solid rgba(16, 185, 129, 0.24);
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 4px 9px;
}

.chatbiProtoThinkingMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chatbiProtoThinkingMeta span {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
}

.chatbiProtoThinkingEvents {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.chatbiProtoThinkingEvents article {
  border-left: 3px solid #2563eb;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  padding: 9px 11px;
}

.chatbiProtoThinkingEvents strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  margin-bottom: 4px;
}

.chatbiProtoThinkingEvents p {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

/* ReAct Agent 时间线（复用 chatbiProtoThinkingTrace 视觉风格） */

.chatbiProtoReactRounds {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.chatbiProtoReactRound {
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.78);
  padding: 9px 11px;
}

.chatbiProtoReactRound > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.chatbiProtoReactRound > summary::-webkit-details-marker {
  display: none;
}

.chatbiProtoReactRound > summary strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.chatbiProtoReactRound > summary small {
  color: var(--muted);
  font-size: 11px;
}

.chatbiProtoReactThought {
  margin-top: 8px;
}

.chatbiProtoReactThought span {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 3px;
}

.chatbiProtoReactThought p {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

.chatbiProtoReactReasoning {
  margin-top: 8px;
  border-left: 3px solid rgba(37, 99, 235, 0.4);
  padding-left: 9px;
}

.chatbiProtoReactReasoning > summary {
  cursor: pointer;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}

.chatbiProtoReactReasoning > summary::-webkit-details-marker {
  display: none;
}

.chatbiProtoReactReasoning pre {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.chatbiProtoReactTool {
  margin-top: 9px;
  border-left: 3px solid #10b981;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.06);
  padding: 9px 11px;
}

.chatbiProtoReactTool.isFailed {
  border-left-color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
}

.chatbiProtoReactToolHead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.chatbiProtoReactToolHead span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.chatbiProtoReactToolHead code {
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
}

.chatbiProtoReactToolHead em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.chatbiProtoReactBlock {
  margin-top: 7px;
}

.chatbiProtoReactBlockHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chatbiProtoReactBlock small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.chatbiProtoReactBlock pre {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.chatbiProtoReactError pre {
  color: #b91c1c;
}

.chatbiProtoReactCopy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  cursor: pointer;
}

.chatbiProtoReactCopy:hover {
  color: var(--ink);
  border-color: rgba(37, 99, 235, 0.32);
}

.chatbiProtoReactReflection {
  margin-top: 7px;
}

.chatbiProtoReactReflection small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 3px;
}

.chatbiProtoReactReflection p {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

/* ===== feature 达人页样式覆盖 (合并自 feature) ===== */

.productsPage,
.creatorsPage,
.creatorDetailPage,
.competitorsPage,
.chatbiPage,
.crmPage,
.openapiPage,
.livesPage,
.notificationsPage,
.companyProfilePage,
.accountProfilePage,
.favoritesPage,
.accountSecurityPage,
.productDetailPage {
  min-width: var(--workspace-canvas-min-width);
}

.growthUp {
  color: #34d399;
  font-weight: 900;
}

.productsPage,
.creatorsPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
}

.creatorHeroPanel {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.08)),
    var(--surface-panel);
}

.productFilterPanel,
.creatorFilterPanel,
.liveHistoryFilterPanel,
.productListPanel {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.productFilterPanel,
.creatorFilterPanel,
.liveHistoryFilterPanel {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(128px, 1fr)) minmax(150px, 1fr) minmax(150px, 1.2fr) minmax(86px, 0.5fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
}

.creatorFilterPanel {
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(128px, 1fr)) minmax(86px, 0.5fr) auto;
}

.creatorGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.creatorCard {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.creatorCardHead,
.creatorCardFoot {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.creatorCardHead {
  justify-content: space-between;
}

.creatorCardHead > div:nth-child(2) {
  min-width: 0;
  flex: 1 1 auto;
}

.creatorCardHead strong,
.creatorCardHead em,
.creatorCardFoot small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorCardHead strong {
  color: var(--text-1);
}

.creatorCardHead em,
.creatorCard p,
.creatorCardFoot small,
.creatorMetaNote {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.6;
}

.creatorCard p {
  min-height: 42px;
  margin: 0;
}

.creatorAvatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-light);
  font-size: 18px;
  font-weight: 900;
  overflow: hidden;
}

.creatorAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorMetricGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.creatorMetricGrid span {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 10px;
}

.creatorMetricGrid strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorMetricGrid em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.creatorCardFoot {
  justify-content: space-between;
}

.creatorCardFoot a {
  flex: 0 0 auto;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-light);
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.creatorDetailPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
}

.creatorDetailHero {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.08)),
    var(--surface-panel);
}

.creatorMatchGrid,
.creatorDataObjectGrid {
  display: grid;
  gap: 10px;
}

.creatorMatchGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creatorMatchGrid article,
.creatorDataObjectGrid span {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.creatorMatchGrid strong,
.creatorMatchGrid span,
.creatorDataObjectGrid span {
  display: block;
}

.creatorMatchGrid strong {
  color: var(--text-1);
}

.creatorMatchGrid span,
.creatorDataObjectGrid span {
  overflow-wrap: anywhere;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.creatorMetaNote {
  margin: 12px 0 0;
}

.accountProfilePage,
.favoritesPage {
  display: grid;
  gap: 18px;
  color: var(--text-1);
}

/* === Favorites page redesign === */

.favoritesPage {
  gap: 26px;
}

.favoritesHero.moduleHeroPanel {
  min-height: 238px;
  align-items: center;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.22), transparent 24%),
    radial-gradient(circle at 88% 0%, rgba(6, 182, 212, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(20, 25, 44, 0.92), rgba(13, 18, 33, 0.98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
  padding: 34px 36px;
}

[data-theme='light'] .favoritesHero.moduleHeroPanel {
  border-color: rgba(15, 23, 42, 0.08);
  background:
    radial-gradient(circle at 10% 15%, rgba(255, 255, 255, 0.96), transparent 28%),
    radial-gradient(circle at 85% 0%, rgba(6, 182, 212, 0.11), transparent 32%),
    linear-gradient(135deg, #f8fbff 0%, #edf4fb 100%);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.1);
}

.favoritesHero.moduleHeroPanel h1 {
  font-size: clamp(2.5rem, 4vw, 4.4rem);
  letter-spacing: 0;
}

.favoritesHero.moduleHeroPanel p {
  max-width: 680px;
  margin-top: 12px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.8;
}

.favoritesHeroStats {
  width: min(420px, 100%);
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.favoritesHeroStats div {
  min-width: 0;
  display: grid;
  min-height: 118px;
  gap: 8px;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.075);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  padding: 18px;
}

[data-theme='light'] .favoritesHeroStats div {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

.favoritesHeroStats span,
.favoritesHeroStats em {
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favoritesHeroStats strong {
  display: inline-flex;
  align-items: baseline;
  color: var(--text-1);
  font-size: 34px;
  font-weight: 760;
  line-height: 1;
}

.favoritesHeroStatsDenom {
  margin-left: 2px;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 800;
}

.favoriteCategoryPanelNew {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  background: var(--surface-panel);
  padding: 16px 18px 18px;
}

[data-theme='light'] .favoriteCategoryPanelNew {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.favoritesPage .panelHeader {
  margin-bottom: 0;
}

.favoritesPage .panelIcon {
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-panel));
  color: var(--primary);
}

.favoritesPage .panelIcon svg {
  stroke-width: 2.4;
}

.favoritePillNav {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: none;
  scrollbar-color: var(--line-dark-strong) transparent;
}

.favoritePill {
  flex: 0 0 auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.favoritePill:hover:not(.empty):not(.active) {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line-dark));
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--text-1);
  transform: none;
}

.favoritePill.active {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line-dark));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-panel));
  color: var(--primary);
  box-shadow: none;
}

.favoritePill.comingSoon {
  opacity: 0.5;
}

.favoritePill.comingSoon:hover {
  border-color: rgba(148, 163, 184, 0.24);
  background: transparent;
  color: var(--text-2);
}

.favoritePillIcon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: currentColor;
}

.favoritePill.active .favoritePillIcon {
  background: transparent;
  color: var(--primary);
}

.favoritePillLabel {
  white-space: nowrap;
}

.favoritePillCount {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-1);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/compat/web-tail/web-tail-004.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Ordered read-only compatibility shard 004. Do not edit. */

.favoritePill.active .favoritePillCount {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
}

.favoritePillCount.empty {
  background: transparent;
  color: var(--text-3);
}

.favoriteWorkbench {
  display: grid;
  gap: 18px;
  border: 0;
  background: transparent;
  padding: 0;
}

.favoriteWorkbench > .panelHeader {
  align-items: flex-end;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 2px 2px 0;
}

.favoriteWorkbenchHeaderMeta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.favoriteWorkbenchSubtitle {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.favoriteClearSearch {
  margin-left: 6px;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

.favoriteToolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--line-dark);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
  padding: 12px;
}

[data-theme='light'] .favoriteToolbar {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.055);
}

.favoriteToolbarControls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.favoriteSortSelect {
  min-width: 132px;
}

.favoriteSortSelect .ant-select-selector {
  height: 46px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
}

.favoriteSortSelect .ant-select-selection-item {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 760;
}

.favoriteSortSelect .ant-select-arrow {
  color: var(--text-3);
}

.favoriteToolbarCta {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #f8fafc;
  color: #111827;
  font-size: 13px;
  font-weight: 760;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease;
}

.favoriteToolbarCta:hover {
  border-color: transparent;
  color: #111827;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
}

.favoriteWorkbench .workspaceStatePanel.compact {
  min-height: 220px;
  align-content: center;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)),
    var(--surface-panel);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.14);
  padding: 30px;
}

[data-theme='light'] .favoriteWorkbench .workspaceStatePanel.compact {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.favoriteWorkbench .workspaceStatePanel.compact .statusPill {
  width: max-content;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-2);
}

.favoriteWorkbench .workspaceStatePanel.compact h2 {
  max-width: 560px;
  margin-top: 8px;
  font-size: 24px;
  font-weight: 760;
}

.favoriteWorkbench .workspaceStatePanel.compact p {
  max-width: 640px;
  font-size: 14px;
}

.favoriteTableWrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  background: var(--surface-panel);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}

.favoriteTable {
  min-width: 980px;
  display: grid;
}

.favoriteTableRow {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) minmax(170px, 0.9fr) minmax(110px, 0.45fr) minmax(120px, 0.5fr) minmax(120px, 0.5fr) minmax(160px, 0.6fr);
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--row-line);
  padding: 0 18px;
}

.favoriteTableRow:last-child {
  border-bottom: 0;
}

.favoriteTableRow.head {
  min-height: 46px;
  background: color-mix(in srgb, var(--surface-panel-hover) 72%, transparent);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.favoriteTableCreator {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.favoriteTableCreator .creatorAvatar {
  overflow: hidden;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.favoriteTableCreator .creatorAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.favoriteTableCreator > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.favoriteTableCreator strong {
  display: block;
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favoriteTableCreator em {
  display: block;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favoriteTableTags,
.favoriteTableActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.favoriteTableTags b {
  max-width: 130px;
  overflow: hidden;
  border: 1px solid var(--row-line);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favoriteTableNumber,
.favoriteTableMuted {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 850;
}

.favoriteTableMuted {
  color: var(--text-3);
}

.favoriteCardGrowth,
.favoriteCardGrowthDown {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 13px;
  font-weight: 900;
}

.favoriteCardGrowth {
  color: var(--success);
}

.favoriteCardGrowthDown {
  color: var(--danger);
}

.favoriteCardAction {
  min-height: 34px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-1);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease;
}

.favoriteCardAction:hover {
  border-color: var(--primary-border);
  color: var(--primary-light);
  background: var(--primary-soft);
}

.favoriteCardAction.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-bg);
}

.favoriteEmptyCtaNote {
  display: inline-block;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
}

/* Creator ranking styles from selective creator integration. */

.creatorSearchPage {
  --creator-accent: var(--primary);
  --creator-accent-2: var(--accent);
  --creator-accent-soft: var(--primary-soft);
  --creator-text: var(--text-1);
  --creator-muted: var(--text-3);
  --creator-line: var(--line-dark);
  --creator-panel: #ffffff;
  --creator-popover-bg: #ffffff;
  --creator-popover-secondary-bg: #ffffff;
  --creator-select-bg: #ffffff;
  --creator-switch-off-bg: #e2e8f0;
  --creator-switch-off-border: #cbd5e1;
  --creator-switch-knob: #ffffff;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  row-gap: 24px;
  color: var(--creator-text);
}

[data-theme='dark'] .creatorSearchPage {
  --creator-panel: var(--surface-panel);
  --creator-popover-bg: var(--bg-sidebar);
  --creator-popover-secondary-bg: var(--surface-panel-strong);
  --creator-select-bg: rgba(255, 255, 255, 0.08);
  --creator-switch-off-bg: rgba(255, 255, 255, 0.12);
  --creator-switch-off-border: rgba(255, 255, 255, 0.18);
  --creator-switch-knob: #e2e8f0;
}

.creatorSearchHeader {
  min-height: 28px;
  display: flex;
  align-items: flex-start;
  margin: 0;
}

.creatorSearchHeader h1 {
  margin: 0;
  color: var(--creator-text);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
}

.creatorSearchPanel,
.creatorResultPanel {
  border: 1px solid var(--creator-line);
  border-radius: 8px;
  background: var(--creator-panel);
  box-shadow: var(--shadow-light);
}

.creatorSearchPanel {
  display: grid;
  gap: 0;
  overflow: visible;
  padding: 20px 24px;
}

.creatorResultPanel {
  overflow-x: auto;
}

.creatorStandaloneLoading {
  min-height: 100vh;
  overflow-x: auto;
  background: var(--bg-app);
  padding: 24px;
}

.creatorSearchTop {
  display: flex;
  align-items: center;
  gap: 10px;
}

.creatorSearchBox {
  width: min(760px, 100%);
  min-width: 0;
  height: 52px;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  border: 1.5px solid var(--creator-line);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.creatorSearchBox:hover {
  border-color: #cbd5e1;
}

.creatorSearchBox:focus-within {
  border-color: var(--creator-accent);
  box-shadow: 0 0 0 3px var(--creator-accent-soft), 0 4px 14px rgba(15, 23, 42, 0.06);
}

.creatorSearchBox *,
.creatorSearchBox *::before,
.creatorSearchBox *::after {
  animation: none !important;
  transition: none !important;
}

.creatorSearchTypeSelect {
  flex: 0 0 178px;
  width: 178px;
  min-width: 0;
  height: 100%;
  position: relative;
  background: #ffffff;
}

.creatorSearchTypeSelect::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: var(--creator-line);
}

.creatorSearchTypeSelect.ant-select,
.creatorSearchTypeSelect .ant-select-selector,
.creatorSearchTypeSelect .ant-select-selection-wrap,
.creatorSearchTypeSelect .ant-select-selection-item {
  height: 100% !important;
}

.creatorSearchTypeSelect .ant-select-selector {
  padding: 0 16px 0 30px !important;
  border: 0 !important;
  border-radius: 999px 0 0 999px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.creatorSearchTypeSelect.ant-select-focused .ant-select-selector,
.creatorSearchTypeSelect.ant-select-open .ant-select-selector,
.creatorSearchTypeSelect .ant-select-selector:hover,
.creatorSearchTypeSelect .ant-select-selector:focus,
.creatorSearchTypeSelect .ant-select-selector:active {
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.creatorSearchTypeSelect .ant-select-selection-item {
  display: flex;
  align-items: center;
  color: var(--creator-text) !important;
  font-size: 14px;
  font-weight: 600;
}

.creatorSearchTypeSelect.ant-select-disabled .ant-select-selection-item {
  color: var(--creator-text) !important;
  opacity: 1;
}

.creatorSearchTypeSelect .ant-select-arrow {
  color: #9aa7b8;
}

.creatorSearchKeywordInput,
.creatorSearchKeywordInput:hover,
.creatorSearchKeywordInput:focus,
.creatorSearchKeywordInput:active,
.creatorSearchKeywordInput.ant-input,
.creatorSearchKeywordInput.ant-input:hover,
.creatorSearchKeywordInput.ant-input:focus,
.creatorSearchKeywordInput.ant-input:active,
.creatorSearchKeywordInput.ant-input-borderless,
.creatorSearchKeywordInput.ant-input-borderless:hover,
.creatorSearchKeywordInput.ant-input-borderless:focus,
.creatorSearchKeywordInput.ant-input-borderless:active,
.creatorSearchBox:focus-within .creatorSearchKeywordInput {
  --ant-input-active-bg: #ffffff !important;
  --ant-input-hover-bg: #ffffff !important;
  --ant-input-color-bg-container: #ffffff !important;
  --ant-input-color-bg-container-disabled: #ffffff !important;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 22px;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--creator-text) !important;
  font-size: 14px;
  box-shadow: none !important;
  outline: 0 !important;
}

.creatorSearchKeywordInput:disabled,
.creatorSearchKeywordInput.ant-input-disabled {
  background: #ffffff !important;
  color: var(--creator-text) !important;
  opacity: 1;
  -webkit-text-fill-color: var(--creator-text);
}

.creatorSearchKeywordInput::placeholder {
  color: #a3afc2 !important;
}

.creatorSearchSubmit,
.creatorSearchSubmit:hover,
.creatorSearchSubmit:focus,
.creatorSearchSubmit:focus-visible,
.creatorSearchSubmit:active,
.creatorSearchSubmit.ant-btn-primary:not(:disabled):not(.ant-btn-disabled):hover,
.creatorSearchSubmit.ant-btn-primary:not(:disabled):not(.ant-btn-disabled):focus,
.creatorSearchSubmit.ant-btn-primary:not(:disabled):not(.ant-btn-disabled):active {
  flex: 0 0 72px;
  align-self: stretch;
  width: 72px;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  background: var(--creator-accent) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: none !important;
}

.creatorSearchSubmit::before,
.creatorSearchSubmit::after,
.creatorSearchSubmit[ant-click-animating-without-extra-node]::after,
.creatorSearchSubmit.ant-click-animating-node::after,
.creatorSearchSubmit .ant-wave {
  display: none !important;
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

.creatorSearchSubmit .anticon,
.creatorSearchSubmit svg {
  color: #ffffff !important;
}

.creatorSearchSubmit:not(:disabled):hover {
  filter: brightness(1.08);
}

.creatorCollectButton {
  height: 52px;
  border: 1.5px solid var(--creator-accent);
  border-radius: 999px;
  background: #ffffff;
  color: var(--creator-accent);
  font-weight: 700;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: none;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.creatorCollectButton svg {
  transition: color 0.2s ease;
}

.creatorCollectButton:hover:not(:disabled) {
  background: var(--creator-accent);
  color: #ffffff;
  box-shadow: 0 4px 14px var(--creator-accent-soft);
}

.creatorCollectButton:hover:not(:disabled) svg {
  color: #ffffff;
}

.creatorCollectButton:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.creatorCollectOverlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: rgba(15, 23, 42, 0.28);
}

.creatorCollectModal {
  position: relative;
  width: min(850px, calc(100vw - 32px));
  min-height: 218px;
  padding: 42px 52px 46px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}

.creatorCollectClose {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8b95a5;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}

.creatorCollectClose:hover {
  color: #1f2937;
}

.creatorCollectModal h2 {
  margin: 0 0 26px;
  color: #111827;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.creatorCollectForm {
  display: flex;
  align-items: stretch;
  min-height: 56px;
  overflow: hidden;
  border-radius: 8px;
  background: #f6f7f9;
}

.creatorCollectForm input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #273449;
  font-size: 16px;
  font-weight: 600;
  outline: 0;
  padding: 0 22px;
}

.creatorCollectForm input::placeholder {
  color: #9aa4b2;
  font-weight: 600;
}

.creatorCollectForm input:disabled {
  cursor: not-allowed;
}

.creatorCollectForm button {
  flex: 0 0 78px;
  width: 78px;
  border: 0;
  background: #ff1f63;
  color: #ffffff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 22px;
}

.creatorCollectForm button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.creatorCollectFeedback {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.creatorCollectFeedback.error {
  color: #e11d48;
}

.creatorCollectFeedback.success {
  color: #059669;
}

.creatorSearchDivider {
  height: 1px;
  margin: 6px 0;
  background: var(--creator-line);
}

.creatorSearchFilterRow {
  display: flex;
  align-items: start;
  gap: 8px;
  min-width: 0;
  overflow: visible;
  padding: 7px 0;
}

.creatorSearchFilterRow.compact {
  align-items: center;
  flex-wrap: wrap;
}

.creatorSearchFilterRow > strong,
.creatorAdvancedRow > strong {
  width: 86px;
  min-width: 86px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--creator-muted);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.creatorSearchChipList {
  min-width: 0;
  flex: 1 1;
}

.creatorSearchChipList {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
}

.creatorAntSegmented.ant-segmented {
  max-width: 100%;
  background: transparent;
}

.creatorAntSegmented .ant-segmented-group {
  flex-wrap: wrap;
  gap: 7px 12px;
}

.creatorAntSegmented .ant-segmented-item {
  border-radius: 999px;
  color: var(--creator-text);
  font-size: 13px;
  font-weight: 800;
}

.creatorAntSegmented .ant-segmented-item-label {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  line-height: 30px;
}

.creatorAntSegmented .ant-segmented-thumb,
.creatorAntSegmented .ant-segmented-item-selected {
  border-radius: 999px;
  background: var(--creator-accent);
  color: var(--accent-on-primary, #ffffff);
}

.creatorAntSegmented em {
  margin-left: 4px;
  border-radius: 999px;
  background: var(--success);
  color: var(--accent-on-primary, #ffffff);
  padding: 1px 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.creatorSearchChipTrailing {
  display: inline-flex;
}

.creatorCommerceCategoryRow {
  align-items: flex-start;
}

.creatorCommerceCategoryPanel {
  min-width: 0;
  position: relative;
  overflow: visible;
  flex: 1 1;
}

.creatorCommerceCategoryHeader {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 16px;
}

.creatorCommerceCategoryHeader button,
.creatorCommerceCategoryMenu button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--creator-text);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 800;
}

.creatorCommerceCategoryHeader button.active,
.creatorCommerceCategoryMenu button.selected {
  background: var(--creator-accent);
  color: var(--accent-on-primary, #ffffff);
}

.creatorCommerceCategoryPanel .creatorCommerceCategoryPopover {
  width: min(520px, calc(100vw - 48px));
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 68px;
  display: grid;
  grid-template-columns: minmax(190px, 0.95fr) minmax(190px, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--creator-line);
  border-radius: 18px;
  background: var(--creator-popover-bg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.creatorCommerceCategoryMenu {
  min-width: 0;
  max-height: 260px;
  display: grid;
  align-content: start;
  overflow-y: auto;
  padding: 10px;
  scrollbar-color: rgba(148, 163, 184, 0.8) rgba(148, 163, 184, 0.16);
  scrollbar-width: thin;
}

.creatorCommerceCategoryMenu.secondary {
  border-left: 1px solid var(--creator-line);
  background: var(--surface-panel-strong);
}

.creatorCommerceCategoryMenu button {
  width: 100%;
  min-height: 42px;
  justify-content: space-between;
  border-radius: 8px;
  padding: 0 12px;
  text-align: left;
}

.creatorCommerceCategoryMenu button.active:not(.selected) {
  background: var(--surface-panel-strong);
  color: var(--creator-accent);
}

.creatorCommerceCategoryMenu.secondary button.active:not(.selected) {
  background: var(--creator-popover-secondary-bg);
}

.creatorCommerceCategoryMenu button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorSearchChip {
  min-height: 30px;
  position: relative;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--creator-text);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 750;
}

.creatorSearchChip.active {
  background: var(--creator-accent);
  color: var(--accent-on-primary, #ffffff);
  padding: 0 16px;
}

.creatorSearchChip em {
  position: absolute;
  top: -7px;
  right: -14px;
  border-radius: 999px;
  background: var(--success);
  color: var(--accent-on-primary, #ffffff);
  padding: 1px 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.creatorSwitch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--creator-text);
  font-size: 13px;
  font-weight: 750;
}

.creatorSwitch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.creatorSwitch span {
  width: 46px;
  height: 24px;
  position: relative;
  border: 1px solid var(--creator-accent);
  border-radius: 999px;
  background: var(--creator-accent);
}

.creatorSwitch span::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--creator-switch-knob, #fff);
}

.creatorSwitch input:not(:checked) + span {
  border-color: var(--creator-switch-off-border);
  background: var(--creator-switch-off-bg);
}

.creatorSwitch input:not(:checked) + span::after {
  right: auto;
  left: 3px;
}

/* 注:旧版 .creatorSelectPill(原生 select 时代,带 ::after 画箭头)已删除——
   它在合并中被重复带入,叠加在新 DropdownSelect 组件渲染的 chevron 上造成"双箭头"。
   现统一用上方(组件化基线)的 .creatorSelectPill 定义。 */

.creatorAntSelectPill {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--creator-line);
  border-radius: 8px;
  background: var(--creator-select-bg);
  color: var(--creator-text);
  padding: 0 6px 0 12px;
  font-size: 13px;
  font-weight: 750;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
}

.creatorAntSelectPill > span {
  flex: 0 0 auto;
  color: var(--creator-muted);
}

.creatorAntSelectPill .ant-select {
  min-width: 82px;
}

.creatorSearchTypePill.creatorAntSelectPill {
  width: 148px;
  min-width: 148px;
  height: 100%;
  min-height: 40px;
  align-self: stretch;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: var(--control-bg);
  box-shadow: none;
  padding: 0 8px 0 18px;
}

.creatorSearchTypePill.creatorAntSelectPill .ant-select-selector {
  height: 100% !important;
  border-radius: 999px 0 0 999px !important;
  background: transparent !important;
  color: var(--creator-text) !important;
  box-shadow: none !important;
}

.creatorSearchTypePill.creatorAntSelectPill .ant-select-selection-item {
  color: var(--creator-text) !important;
}

.creatorSearchTypePill.creatorAntSelectPill .ant-select-selection-wrap,
.creatorSearchTypePill.creatorAntSelectPill .ant-select-selection-item {
  height: 100%;
  line-height: 40px;
}

.creatorSearchTypePill .ant-select {
  min-width: 72px;
}

.creatorSearchTypePill > span {
  display: none;
}

.creatorSearchTypePill {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 40px;
  align-self: stretch;
  justify-self: stretch;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: var(--control-bg);
  box-shadow: none;
  padding: 0 28px 0 20px;
}

.creatorSearchTypePill > button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creatorSortPill {
  min-height: 40px;
  border-radius: 999px;
}

.creatorSelectMenu {
  width: max(100%, 168px);
  max-height: 260px;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  display: grid;
  gap: 4px;
  overflow-y: auto;
  border: 1px solid var(--creator-line);
  border-radius: 8px;
  background: var(--creator-popover-bg);
  padding: 6px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.creatorSelectMenu button {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--creator-text);
  padding: 0 9px;
  text-align: left;
}

.creatorSelectMenu button:hover,
.creatorSelectMenu button:focus-visible {
  outline: 0;
  background: var(--surface-panel-strong);
}

.creatorSelectMenu button.selected {
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
}

.creatorSelectMenu button span {
  width: 18px;
  display: inline-grid;
  place-items: center;
}

.creatorSelectMenu button strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorInlineExpandButton {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.creatorInlineExpandButton:hover {
  background: rgba(20, 184, 166, 0.16);
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.12);
}

.creatorAdvancedRows {
  display: grid;
  gap: 0;
}

.creatorAdvancedRow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 7px 0;
}

.creatorAdvancedRow > strong {
  align-self: start;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.creatorAdvancedRow > div {
  min-width: 0;
  flex: 1 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.creatorAdvancedRow .creatorSelectPill {
  width: auto;
  justify-content: space-between;
}

.creatorSelectedBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--creator-line);
  padding-top: 13px;
  margin-top: 6px;
}

.creatorSelectedBar > strong {
  width: 86px;
  min-width: 86px;
  text-align: right;
  color: var(--creator-muted);
}

.creatorSelectedBar > div {
  flex: 1 1;
  min-width: 240px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.creatorSelectedTag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--creator-text);
  min-height: 34px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 800;
}

.creatorSelectedTag button {
  width: 18px;
  height: 18px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #98a2b3;
  padding: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.creatorSelectedTag button:hover,
.creatorSelectedTag button:focus-visible {
  outline: 0;
  background: rgba(148, 162, 179, 0.16);
  color: var(--creator-accent);
}

.creatorSelectedMuted {
  color: var(--creator-muted);
}

.creatorSelectedBar > button,
.creatorOutlineButton {
  min-height: 34px;
  border: 1px solid var(--creator-accent);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--creator-accent);
  padding: 0 15px;
  font-size: 13px;
  font-weight: 900;
}

.creatorResultPanel {
  display: grid;
  gap: 18px;
  padding: 30px;
  min-height: 260px;
}

.creatorEmptyResult {
  min-height: 430px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  background: var(--creator-panel);
  color: var(--creator-text);
  text-align: center;
}

.creatorEmptyIllustration {
  width: min(240px, 56vw);
  height: 160px;
  display: grid;
  place-items: center;
}

.creatorEmptyIllustration svg {
  width: 100%;
  height: 100%;
  display: block;
}

.creatorEmptyResult h2 {
  max-width: 720px;
  margin: 0;
  color: var(--creator-text);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.65;
}

.creatorEmptyActions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.creatorEmptyPrimary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 18%, transparent);
  cursor: pointer;
}

.creatorEmptyPrimary:hover,
.creatorEmptyPrimary:focus-visible {
  outline: 0;
  background: #f4145f;
}

.creatorEmptyHelp {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 999px;
  background: transparent;
  color: var(--creator-muted);
  padding: 0;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.creatorEmptyHelp:hover,
.creatorEmptyHelp:focus-visible {
  outline: 0;
  border-color: var(--creator-accent);
  color: var(--creator-accent);
}

.creatorResultToolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.creatorSelectionSummary,
.creatorSelectionInline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--creator-muted, var(--text-3));
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

.creatorSelectionSummary button,
.creatorSelectionInline button {
  min-height: 28px;
  border: 0;
  border-radius: 8px;
  background: var(--creator-accent-soft, var(--primary-soft));
  color: var(--creator-accent, var(--primary));
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.creatorResultActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.creatorResultActions > button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
  padding: 0 16px;
  font-weight: 900;
}

.creatorResultActions > button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.creatorTableScroller {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: rgba(148, 163, 184, 0.65) rgba(148, 163, 184, 0.14);
  scrollbar-width: thin;
}

.creatorTableScroller::-webkit-scrollbar {
  height: 16px;
}

.creatorTableScroller::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
}

.creatorTableScroller::-webkit-scrollbar-thumb {
  border: 4px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.7);
}

.creatorSearchTable {
  width: 1796px;
  display: grid;
}

.creatorSkeletonPanel {
  overflow: hidden;
}

.creatorSkeletonButton,
.creatorSkeletonAvatar,
.creatorSkeletonLine,
.creatorSkeletonCell i {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-panel-strong);
}

.creatorSkeletonButton::after,
.creatorSkeletonAvatar::after,
.creatorSkeletonLine::after,
.creatorSkeletonCell i::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
  animation: creatorSkeletonShimmer 1.25s infinite;
}

[data-theme='dark'] .creatorSkeletonButton::after,
[data-theme='dark'] .creatorSkeletonAvatar::after,
[data-theme='dark'] .creatorSkeletonLine::after,
[data-theme='dark'] .creatorSkeletonCell i::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

.creatorSkeletonButton {
  width: 86px;
  height: 34px;
}

.creatorSkeletonButton.wide {
  width: 112px;
}

.creatorSkeletonRow {
  pointer-events: none;
}

.creatorSkeletonAvatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
}

.creatorSkeletonIdentity {
  display: grid;
  gap: 10px;
}

.creatorSkeletonLine {
  height: 12px;
}

.creatorSkeletonLine.strong {
  width: 148px;
  height: 16px;
}

.creatorSkeletonLine.medium {
  width: 118px;
}

.creatorSkeletonLine.short {
  width: 82px;
}

.creatorSkeletonCell {
  display: flex;
  align-items: center;
}

.creatorSkeletonCell i {
  width: min(92px, 72%);
  height: 14px;
}

.creatorSkeletonCell i.chart {
  width: 150px;
  height: 52px;
}

.creatorSkeletonCell i.action {
  width: 32px;
  height: 32px;
  border-radius: 999px;
}

.creatorSearchTableRow {
  min-height: 158px;
  display: grid;
  grid-template-columns:
    56px
    320px
    150px
    160px
    230px
    180px
    140px
    150px
    120px
    120px
    170px
    100px;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--creator-line);
  color: var(--creator-text);
  font-size: 14px;
}

.creatorSearchTableRow.head {
  min-height: 92px;
  background: var(--surface-panel-strong);
  color: var(--creator-text);
  font-weight: 900;
}

.creatorSearchTableRow > span,
.creatorSearchTableRow.head span,
.creatorSearchTableRow.head > button {
  padding: 0 18px;
  min-width: 0;
}

.creatorSortableHead {
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-weight: 900;
  text-align: left;
}

.creatorSearchTableRow.head button.creatorSortableHead {
  cursor: pointer;
}

.creatorSearchTableRow.head span.creatorSortableHead {
  cursor: default;
}

.creatorSearchTableRow.head button.creatorSortableHead::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

.creatorSearchTableRow.head button.creatorSortableHead.asc::after {
  border-top: 0;
  border-bottom: 6px solid currentColor;
}

.creatorSortableHead.active {
  color: var(--creator-accent);
  background: var(--surface-panel-strong);
}

.creatorSortableHead:disabled {
  cursor: wait;
  opacity: 0.72;
}

.creatorIdentityCell {
  min-width: 0;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding-left: 18px;
}

.creatorPhoto {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
  font-weight: 900;
}

.creatorPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorIdentityCell strong,
.creatorIdentityCell em,
.creatorIdentityCell small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorIdentityCell strong {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  color: var(--creator-text);
  font-weight: 900;
}

.creatorNameLink {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorNameLink:hover {
  color: var(--creator-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.creatorIdentityCell em,
.creatorIdentityCell small {
  color: var(--creator-muted);
  font-size: 12px;
  font-style: normal;
}

.creatorIdentityCell em {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 5px;
}

.creatorIdentityCell em button {
  width: 22px;
  height: 22px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--creator-muted);
}

.creatorIdentityCell em button:hover {
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
}

.creatorIdentityCell small {
  margin-top: 3px;
}

.creatorIdentityCell small b,
.creatorIdentityCell small i {
  color: var(--creator-muted);
  font-style: normal;
  font-weight: 700;
}

.creatorIdentityCell small b + i,
.creatorIdentityCell small i + b {
  margin-left: 7px;
}

.creatorFlagIcon,
.creatorFlagFallback {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.creatorFlagIcon {
  gap: 7px;
  color: var(--creator-text);
  font-weight: 850;
}

.creatorFlagIcon img {
  width: 20px;
  height: 14px;
  display: block;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.creatorFlagIcon.compact {
  margin-left: 8px;
}

.creatorFlagIcon.compact img {
  width: 18px;
  height: 12px;
}

.creatorFlagIcon b {
  color: inherit;
  font-weight: 850;
}

.creatorFlagFallback {
  margin-left: 8px;
  font-style: normal;
}

.creatorDetailFlagValue {
  display: inline-flex;
  align-items: center;
}

.creatorDetailFlagValue .creatorFlagFallback {
  margin-left: 0;
}

.creatorVerifyBadge {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 2px solid var(--creator-panel);
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3);
}

.creatorSourceIcons {
  display: inline-flex !important;
  gap: 5px;
  margin-left: 8px;
}

.creatorSourceIcons span {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--creator-line);
  border-radius: 999px;
  background: var(--surface-panel-strong);
  color: var(--creator-accent);
  font-size: 10px;
  font-weight: 900;
}

.creatorCommerceTags b,
.creatorCommerceTags em {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.creatorSalesMetric {
  min-height: 158px;
  display: flex;
  align-items: center;
  background: var(--surface-panel-strong);
  color: var(--creator-text);
  font-weight: 950;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}

.creatorLinkMetric {
  color: var(--creator-accent);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.creatorCommerceTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.creatorCommerceTags b {
  overflow: hidden;
  border: 1px solid rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.08);
  color: var(--primary);
  text-overflow: ellipsis;
}

.creatorCommerceTags em {
  border: 1px solid var(--creator-line);
  background: var(--surface-panel-strong);
  color: var(--creator-muted);
}

.creatorFavoriteAction {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--creator-line);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--creator-accent);
  cursor: pointer;
  text-decoration: none;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.creatorFavoriteAction:hover {
  border-color: var(--creator-accent);
  background: var(--creator-accent-soft);
}

.creatorFavoriteAction.active {
  border-color: var(--creator-accent);
  background: var(--creator-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(236, 72, 153, 0.22);
  animation: favoritePulse 320ms ease-out;
}

.creatorFavoriteAction.active svg {
  fill: currentColor;
}

.creatorTrendCell svg {
  width: 150px;
  height: 86px;
  display: block;
  color: var(--creator-accent);
}

.creatorPager {
  --pager-accent: var(--creator-accent, #ec4899);
  --pager-accent-soft: var(--creator-accent-soft, rgba(236, 72, 153, 0.16));
  --pager-muted: var(--creator-muted, var(--text-3));
  --pager-text: var(--creator-text, var(--text-1));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--pager-muted);
}

.creatorPager button,
.creatorPagerEllipsis {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--pager-muted);
  font-size: 15px;
  font-weight: 800;
}

.creatorPager button.active {
  background: var(--pager-accent);
  color: #fff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--pager-accent) 26%, transparent);
}

.creatorPager button:not(:disabled):hover {
  background: var(--pager-accent-soft);
  color: var(--pager-accent);
}

.creatorPagerArrow {
  color: var(--pager-text) !important;
}

.creatorPagerEllipsis {
  letter-spacing: 2px;
}

.creatorPager button:disabled {
  color: #cbd5e1;
  cursor: not-allowed;
}

.creatorPagerJump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--pager-muted);
  padding: 3px 4px 3px 10px;
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.creatorPagerJump:focus-within {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.creatorPagerJump input {
  width: 58px;
  height: 38px;
  border: 1px solid var(--creator-line, var(--line-dark));
  border-radius: 8px;
  outline: 0;
  background: var(--creator-select-bg, var(--surface-panel));
  color: var(--pager-text);
  padding: 0 10px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.03);
  font-weight: 850;
  text-align: center;
}

.creatorPagerJump input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft), inset 0 0 0 1px rgba(15, 23, 42, 0.03);
}

[data-theme='dark'] .creatorPagerJump input {
  border-color: var(--creator-line);
  background: var(--surface-panel);
}

[data-theme='dark'] .creatorPagerJump:focus-within {
  border-color: var(--primary-light);
  background: color-mix(in srgb, var(--creator-accent) 18%, transparent);
  color: #fff;
  box-shadow: 0 0 0 3px var(--primary-soft);
}

[data-theme='dark'] .creatorPagerJump input:focus {
  border-color: var(--primary-light);
  background: var(--surface-panel-strong);
  box-shadow: 0 0 0 3px var(--primary-soft), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.creatorSelectCell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.creatorSelectCell input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.creatorSelectCell input:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.creatorPager.favoritePager {
  --pager-accent: var(--primary);
  --pager-accent-soft: var(--primary-soft);
  --pager-muted: var(--text-3);
  --pager-text: var(--text-1);
}

.rankingPager {
  --pager-accent: var(--growth-rank-accent, #ec4899);
  --pager-accent-soft: var(--growth-rank-soft, rgba(236, 72, 153, 0.16));
  --pager-muted: var(--text-3);
  --pager-text: var(--text-1);
  margin-top: 8px;
}

.growthRankingPage {
  --growth-rank-accent: var(--primary);
  --growth-rank-accent-2: var(--accent);
  --growth-rank-soft: var(--primary-soft);
  --growth-rank-line: var(--line-dark);
  --growth-rank-panel: #ffffff;
  --growth-rank-flag-border: rgba(15, 23, 42, 0.12);
  --growth-rank-flag-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  row-gap: 24px;
  color: var(--text-1);
}

.commerceRankingPage,
.hotRankingPage,
.risingRankingPage {
  min-width: 0;
}

.growthRankingPage header {
  min-height: 28px;
  display: flex;
  align-items: flex-start;
  margin: 0;
}

[data-theme='dark'] .growthRankingPage {
  --growth-rank-panel: var(--surface-panel);
  --growth-rank-flag-border: var(--line-dark);
  --growth-rank-flag-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.growthRankingPage header h1 {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
}

.growthRankFilterPanel,
.growthRankTablePanel {
  position: relative;
  border: 1px solid var(--growth-rank-line);
  border-radius: 8px;
  background: var(--growth-rank-panel);
  box-shadow: var(--shadow-light);
}

.growthRankFilterPanel {
  display: grid;
  gap: 0;
  margin-top: 0;
  padding: 20px 24px;
}

.growthRankFilterRow {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 7px 0;
}

.growthRankFilterRow > strong {
  width: 92px;
  min-width: 92px;
  min-height: 30px;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  color: var(--text-3);
  font-size: 13px;
  white-space: nowrap;
}

.growthRankFilterRow > div {
  min-width: 0;
  display: flex;
  flex: 1 1;
  flex-wrap: wrap;
  gap: 7px 16px;
}

.growthRankFilterRow button {
  min-height: 30px;
  position: relative;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-1);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 850;
}

.growthRankFilterRow button.active {
  background: var(--growth-rank-accent);
  color: #fff;
  padding: 0 16px;
}

.growthRankFilterRow button em {
  position: absolute;
  top: -6px;
  right: -12px;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  padding: 1px 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.growthRankDatePicker {
  min-height: 34px;
  min-width: 132px;
}

.growthRankDatePicker .cuiDatePickerTrigger {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: var(--growth-rank-soft);
  color: var(--text-1);
  padding: 0 12px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 900;
}

.growthRankDatePicker .cuiDatePickerTrigger:hover,
.growthRankDatePicker .cuiDatePickerTrigger:focus {
  border: 0;
  background: var(--growth-rank-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--growth-rank-accent) 18%, transparent);
}

.growthRankDatePicker .cuiDatePickerValue {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
}

.growthRankDatePicker .cuiDatePickerIcon,
.growthRankDatePicker .cuiDatePickerClear {
  color: var(--text-3);
}

.growthRankSelectPill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--growth-rank-line);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-1);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 850;
}

.growthRankSelectPill select {
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.growthRankExpandButton {
  position: absolute;
  right: 0;
  bottom: 48px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: var(--growth-rank-soft);
  color: var(--growth-rank-accent);
  padding: 0 18px;
  font-weight: 900;
}

.growthRankExpandButton span {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.growthRankTablePanel {
  display: grid;
  gap: 18px;
  padding: 30px;
  margin-top: 12px;
  min-height: 640px;
}

.growthRankToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.growthRankToolbar > span {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 850;
}

.growthRankToolbar button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: var(--growth-rank-soft);
  color: var(--growth-rank-accent);
  padding: 0 16px;
  font-weight: 900;
}

.growthRankFilterRow .growthRankAntSegmented + button,
.growthRankFilterRow .growthRankAntSegmented + button ~ button {
  display: none;
}

.growthRankAntSegmented.ant-segmented {
  max-width: 100%;
  background: transparent;
}

.growthRankAntSegmented .ant-segmented-group {
  flex-wrap: wrap;
  gap: 7px 12px;
}

.growthRankAntSegmented .ant-segmented-item {
  border-radius: 999px;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 850;
}

.growthRankAntSegmented .ant-segmented-item-label {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  line-height: 30px;
}

.growthRankAntSegmented .ant-segmented-thumb,
.growthRankAntSegmented .ant-segmented-item-selected {
  border-radius: 999px;
  background: var(--growth-rank-accent);
  color: #fff;
}

.growthRankAntSegmented em {
  margin-left: 4px;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  padding: 1px 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.growthRankTableFrame {
  min-width: 0;
  position: relative;
  overflow-x: auto;
  border-radius: 8px;
}

.growthRankTableFrame.refreshing .growthRankTable {
  opacity: 0.68;
}

.growthRankTableFrame.refreshing::before {
  content: '';
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: 999px;
  background: var(--growth-rank-soft);
}

.growthRankTableFrame.refreshing::after {
  content: '';
  width: 30%;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  border-radius: 999px;
  background: var(--growth-rank-accent);
  animation: growthRankRefreshBar 900ms ease-in-out infinite;
}

.growthRankTable {
  min-width: 1136px;
  display: grid;
  overflow: hidden;
  border-radius: 8px;
}

.growthRankTable.commerce {
  min-width: 1176px;
}

.growthRankTable.hot {
  min-width: 1136px;
}

.growthRankTable.rising {
  min-width: 1416px;
}

.growthRankRow {
  min-height: 136px;
  display: grid;
  grid-template-columns: 56px 110px minmax(250px, 1.15fr) minmax(150px, 0.7fr) minmax(170px, 0.8fr) minmax(150px, 0.7fr) minmax(130px, 0.6fr) minmax(120px, 0.55fr) minmax(132px, 0.5fr);
  align-items: center;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-1);
  font-size: 15px;
}

.growthRankTable.commerce .growthRankRow {
  grid-template-columns: 56px 110px minmax(260px, 1.15fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr) minmax(210px, 0.9fr) minmax(132px, 0.5fr);
}

.growthRankTable.hot .growthRankRow {
  grid-template-columns: 56px 110px minmax(260px, 1.15fr) minmax(150px, 0.7fr) minmax(170px, 0.78fr) minmax(150px, 0.68fr) minmax(150px, 0.68fr) minmax(132px, 0.5fr);
}

.growthRankTable.rising .growthRankRow {
  grid-template-columns: 56px 110px minmax(280px, 1.15fr) minmax(180px, 0.78fr) minmax(150px, 0.65fr) minmax(150px, 0.65fr) minmax(150px, 0.65fr) minmax(180px, 0.78fr) minmax(120px, 0.52fr) minmax(132px, 0.5fr);
}

.growthRankRow.head {
  min-height: 68px;
  background: var(--surface-panel-strong);
  font-weight: 950;
}

.growthRankRow > span,
.growthRankRow.head > span {
  padding: 0 18px;
}

.growthRankRow > span:nth-child(5),
.growthRankRow.head > span:nth-child(5) {
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-panel-strong);
  font-weight: 950;
}

.growthRankTable.commerce .growthRankRow > span:nth-child(5),
.growthRankTable.commerce .growthRankRow.head > span:nth-child(5) {
  min-height: auto;
  display: block;
  background: transparent;
  font-weight: inherit;
}

.growthRankTable.hot .growthRankRow > span:nth-child(5),
.growthRankTable.hot .growthRankRow.head > span:nth-child(5) {
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-panel-strong);
  font-weight: 950;
}

.growthRankTable.hot .growthRankRow.head > span:nth-child(5) {
  color: var(--growth-rank-accent);
}

.growthRankTable.rising .growthRankRow > span:nth-child(5),
.growthRankTable.rising .growthRankRow.head > span:nth-child(5) {
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-panel-strong);
  font-weight: 950;
}

.growthRankTable.rising .growthRankRow.head > span:nth-child(5) {
  color: var(--growth-rank-accent);
}

.growthRankTable.commerce .growthRankRow > span:nth-child(7),
.growthRankTable.commerce .growthRankRow.head > span:nth-child(7) {
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-panel-strong);
  font-weight: 950;
}

.growthRankTable.commerce .growthRankRow.head > span:nth-child(7) {
  color: var(--growth-rank-accent);
}

.growthRankRow.head > span:nth-child(5) {
  color: var(--growth-rank-accent);
}

.growthRankRow.head .active {
  gap: 6px;
}

.growthRankSkeletonRow {
  pointer-events: none;
}

.growthRankSkeletonRow > span {
  min-width: 0;
}

.growthRankSkeletonBar,
.growthRankSkeletonCreator i,
.growthRankSkeletonCreator em {
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.16), rgba(148, 163, 184, 0.34), rgba(148, 163, 184, 0.16));
  background-size: 240% 100%;
  animation: growthRankSkeletonPulse 1.2s ease-in-out infinite;
}

.growthRankSkeletonBar {
  width: min(118px, 76%);
  height: 16px;
}

.growthRankSkeletonRow > span:first-child .growthRankSkeletonBar,
.growthRankSkeletonRow > span:last-child .growthRankSkeletonBar {
  width: 38px;
  height: 38px;
}

.growthRankSkeletonCreator {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.growthRankSkeletonCreator i {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
}

.growthRankSkeletonCreator b {
  min-width: 0;
  display: grid;
  gap: 10px;
  flex: 1 1;
}

.growthRankSkeletonCreator em:first-child {
  width: min(150px, 72%);
  height: 18px;
}

.growthRankSkeletonCreator em:last-child {
  width: min(210px, 88%);
  height: 14px;
}

.growthRankSortMenu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--growth-rank-accent);
  padding: 0;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

.growthRankSortMenu::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

.growthRankSortMenu.asc::after {
  border-top: 0;
  border-bottom: 6px solid currentColor;
}

.growthRankMedal {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 3px solid currentColor;
  border-radius: 999px;
  color: #fbbf24;
  font-size: 13px;
  font-weight: 950;
}

.growthRankMedal.top2 {
  color: #a7b7d8;
}

.growthRankMedal.top3 {
  color: #f59e7a;
}

.growthRankCreator {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.growthRankAvatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
  font-weight: 950;
}

.growthRankAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.growthRankCreator strong,
.growthRankCreator em,
.growthRankCreator small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.growthRankCreator strong {
  color: var(--text-1);
  font-size: 15px;
}

.growthRankCreator strong a {
  color: inherit;
  text-decoration: none;
}

.growthRankCreator strong a:hover {
  color: var(--growth-rank-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.growthRankCreator em {
  margin-top: 8px;
  color: var(--text-2);
  font-style: normal;
}

.growthRankCreator small {
  width: fit-content;
  max-width: 100%;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--growth-rank-soft);
  color: var(--text-2);
  padding: 3px 9px;
  font-size: 12px;
}

.growthRankRegion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 36px;
}

.growthRankFlag {
  width: 22px;
  height: 16px;
  display: block;
  border: 1px solid var(--growth-rank-flag-border);
  border-radius: 3px;
  object-fit: cover;
  box-shadow: var(--growth-rank-flag-shadow);
}

.growthRankFlagFallback {
  min-width: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 3px;
  background: var(--growth-rank-soft);
  color: var(--growth-rank-accent);
  padding: 1px 3px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.growthRankHighlight {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}

.growthRankHighlight strong,
.growthRankHighlight em {
  display: block;
  font-style: normal;
}

.growthRankHighlight em {
  margin-top: 4px;
  font-size: 12px;
}

.risingTagList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.risingTagList b,
.risingTagList em {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  background: var(--growth-rank-soft);
  color: var(--text-2);
  padding: 0 12px;
  font-size: 12px;
  font-style: normal;
}

.risingPotential b {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  border: 7px solid rgba(124, 58, 237, 0.28);
  border-radius: 999px;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
}

.growthRankAction {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-1);
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.growthRankAction:hover {
  border-color: var(--growth-rank-accent);
  color: var(--growth-rank-accent);
}

.growthRankAction.active {
  border-color: var(--growth-rank-accent);
  background: var(--growth-rank-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(236, 72, 153, 0.18);
  animation: favoritePulse 320ms ease-out;
}

.growthRankAction.active svg {
  fill: currentColor;
}

/* 达人详情 V2 页面布局，避免缺少基础网格时退化为纵向块级流。?*/

.creatorDetailPageV2 {
  --creator-detail-accent: var(--primary);
  --creator-detail-soft: var(--primary-soft);
  --creator-detail-line: var(--line-dark);
  --creator-detail-panel: #ffffff;
  --creator-detail-muted: var(--text-3);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  color: var(--text-1);
}

[data-theme='dark'] .creatorDetailPageV2 {
  --creator-detail-panel: var(--surface-panel);
}

.creatorDetailTitleBar {
  display: grid;
  gap: 6px;
}

.creatorDetailBreadcrumb {
  width: fit-content;
  color: var(--creator-detail-muted);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.creatorDetailBreadcrumb:hover {
  color: var(--creator-detail-accent);
}

.creatorDetailTitleBar h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: 0;
}

.creatorDetailTopGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(300px, 0.36fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  scroll-margin-top: 82px;
}

.creatorDetailProfileCard,
.creatorDetailOverviewCard,
.creatorDetailDataPanel {
  min-width: 0;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--creator-detail-panel);
  box-shadow: var(--shadow-light);
}

.creatorDetailProfileCard {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 22px 22px 0;
  text-align: center;
}

.creatorDetailProfileActions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.creatorDetailProfileActions button,
.creatorDetailProfileActions a,
.creatorDetailNameBlock button {
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--creator-detail-muted);
  cursor: pointer;
}

.creatorDetailProfileActions button,
.creatorDetailProfileActions a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  text-decoration: none;
}

.creatorDetailProfileActions button {
  gap: 4px;
}

.creatorDetailProfileActions button.active {
  background: var(--creator-detail-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px var(--primary-shadow);
  animation: favoritePulse 320ms ease-out;
}

.creatorDetailProfileActions button.active svg {
  fill: currentColor;
}

.creatorDetailProfileActions button span {
  display: none;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.creatorDetailProfileActions button.isCopied,
.creatorDetailProfileActions button.isCopyFailed {
  width: auto;
  min-width: 62px;
  padding: 0 10px;
}

.creatorDetailProfileActions button.isCopied {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.creatorDetailProfileActions button.isCopyFailed {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.creatorDetailProfileActions button.isCopied span,
.creatorDetailProfileActions button.isCopyFailed span {
  display: inline;
}

.creatorDetailNameBlock button.isCopied {
  color: #047857;
}

.creatorDetailNameBlock button.isCopyFailed {
  color: #b91c1c;
}

.creatorDetailAvatar {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 999px;
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  font-size: 34px;
  font-weight: 950;
}

.creatorDetailAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorDetailNameBlock {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.creatorDetailNameBlock h2,
.creatorDetailNameBlock p,
.creatorDetailBio {
  margin: 0;
}

.creatorDetailNameBlock h2 {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-1);
  font-size: 20px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.creatorDetailNameBlock p {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--creator-detail-muted);
  font-size: 13px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.creatorDetailCategoryPills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.creatorDetailCategoryPills span,
.creatorDetailCategoryPills b {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 850;
}

.creatorDetailCategoryPills span {
  background: var(--tag-bg);
  color: var(--text-2);
}

.creatorDetailCategoryPills b {
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
}

.creatorDetailBio {
  max-width: 340px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}

.creatorDetailInfoList {
  width: calc(100% + 44px);
  display: grid;
  gap: 0;
  margin: 8px -22px 0;
  padding: 16px 22px;
  background: var(--surface-panel-strong);
  text-align: left;
}

.creatorDetailInfoList div {
  min-width: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--creator-detail-line);
}

.creatorDetailInfoList div:last-child {
  border-bottom: 0;
}

.creatorDetailInfoList dt,
.creatorDetailInfoList dd {
  margin: 0;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
}

.creatorDetailInfoList dt {
  color: var(--creator-detail-muted);
  font-weight: 850;
}

.creatorDetailInfoList dd {
  color: var(--text-1);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.creatorDetailInfoList dd a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.creatorDetailInfoList dd a:hover {
  color: var(--creator-detail-accent);
  text-decoration: underline;
}

.creatorDetailInfoList dd .creatorDetailTikTokLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4f7cff;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.35;
}

.creatorDetailTikTokLink svg {
  flex: 0 0 auto;
  color: #253047;
}

.creatorDetailOverviewCard {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.creatorDetailMetricGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.creatorDetailMetricCard {
  min-width: 0;
  min-height: 116px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 14px;
}

.creatorDetailMetricCard strong,
.creatorDetailMetricCard em,
.creatorDetailMetricCard span {
  min-width: 0;
}

.creatorDetailMetricCard strong {
  color: var(--text-1);
  font-size: 24px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.creatorDetailMetricCard em {
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-style: normal;
}

.creatorDetailMetricCard span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 850;
}

.creatorDetailMetricCard b {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--creator-detail-muted);
  font-size: 11px;
}

.creatorDetailSummaryGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 12px;
}

.creatorDetailSummaryGrid article {
  min-width: 0;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--creator-detail-panel);
  padding: 16px;
}

.creatorDetailSummaryGrid p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.6;
}

.creatorDetailSummaryGrid article > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.creatorDetailSummaryGrid article > div span {
  min-width: 0;
  display: block;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--text-2);
  padding: 12px;
  font-size: 13px;
  line-height: 1.65;
}

.creatorDetailSummaryGrid article > div b {
  display: block;
  margin-bottom: 4px;
  color: var(--text-1);
}

.creatorContactCard {
  display: grid;
  align-content: start;
  gap: 12px;
}

.creatorContactCard > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.creatorContactCard span {
  color: var(--text-1);
  font-weight: 900;
}

.creatorContactCard button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--creator-detail-accent);
  color: #fff;
  padding: 0 14px;
  font-weight: 900;
}

.creatorContactCard strong {
  color: var(--creator-detail-accent);
}

.creatorDetailTabsWrap {
  display: none;
  min-width: 0;
  position: sticky;
  top: 76px;
  z-index: 950;
  margin: 0;
  padding: 0;
}

.creatorDetailStickyHeader {
  min-width: 0;
  position: sticky;
  top: 76px;
  z-index: 980;
  display: grid;
  grid-template-columns: minmax(220px, max-content) minmax(0, 1fr) auto;
  grid-template-areas:
    "identity tabs actions";
  align-items: center;
  gap: 22px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--creator-detail-panel) 96%, transparent);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  padding: 12px 16px;
}

.creatorDetailStickyIdentity {
  grid-area: identity;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.creatorDetailStickyAvatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  font-size: 18px;
  font-weight: 950;
}

.creatorDetailStickyAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorDetailStickyText {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.creatorDetailStickyText strong,
.creatorDetailStickyText small {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorDetailStickyText strong {
  color: var(--text-1);
  font-size: 16px;
  font-weight: 950;
}

.creatorDetailStickyText small {
  color: var(--creator-detail-muted);
  font-size: 13px;
  font-weight: 800;
}

.creatorDetailStickyText button {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--creator-detail-muted);
  cursor: pointer;
}

.creatorDetailStickyText button.isCopied {
  color: #047857;
}

.creatorDetailStickyText button.isCopyFailed {
  color: #b91c1c;
}

.creatorDetailStickyTabs {
  grid-area: tabs;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.creatorDetailStickyTabs button {
  min-height: 40px;
  position: relative;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--creator-detail-muted);
  padding: 0 0 8px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.creatorDetailStickyTabs button.active {
  color: var(--creator-detail-accent);
}

.creatorDetailStickyTabs button.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--creator-detail-accent);
}

.creatorDetailStickyActions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 8px;
}

.creatorDetailStickyActions button,
.creatorDetailStickyActions a {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--creator-detail-line);
  border-radius: 9px;
  background: var(--creator-detail-panel);
  color: var(--creator-detail-muted);
  text-decoration: none;
  cursor: pointer;
}

.creatorDetailStickyActions button.active {
  border-color: rgba(255, 45, 105, 0.24);
  background: rgba(255, 45, 105, 0.12);
  color: #ff2d69;
}

.creatorDetailStickyActions button.active svg {
  fill: currentColor;
}

.creatorDetailTabs {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  overflow: visible;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--creator-detail-panel) 88%, transparent);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  margin: 0;
  padding: 6px 22px 0;
  scrollbar-width: none;
}

.creatorDetailTabs button {
  min-height: 44px;
  position: relative;
  flex: 0 1 auto;
  border: 0;
  background: transparent;
  color: var(--creator-detail-muted);
  padding: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.creatorDetailTabs button.active {
  color: var(--creator-detail-accent);
}

.creatorDetailTabs button.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--creator-detail-accent);
}

.creatorDetailSections {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.creatorDetailTopGrid,
.creatorDetailSections > section {
  scroll-margin-top: 140px;
}

.creatorDetailDataPanel {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.creatorDetailPanelHeader {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.creatorDetailPanelHeader h2,
.creatorDetailDataPanel h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  line-height: 1.35;
}

.creatorDetailPanelHeader span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--creator-detail-line);
  border-radius: 999px;
  color: var(--creator-detail-muted);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
}

.creatorDetailDataGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.creatorDetailDataGrid article {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 14px;
}

.creatorDetailDataGrid span {
  color: var(--creator-detail-muted);
  font-size: 13px;
  font-weight: 850;
}

.creatorDetailDataGrid strong {
  color: var(--text-1);
  font-size: 18px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.creatorDetailDataGrid em {
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.creatorDetailTwoColumn {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.creatorDetailSubPanel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--creator-detail-panel);
  padding: 16px;
}

.creatorDetailSubPanel h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.35;
}

.creatorDetailChartCard {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.creatorDetailChartCard svg {
  width: 100%;
  height: 180px;
  display: block;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--creator-detail-accent);
}

.creatorDetailChartCard polyline {
  fill: none;
  stroke: var(--creator-detail-line);
  stroke-width: 1;
}

.creatorDetailChartCard .line {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.creatorDetailChartCard circle {
  fill: #ffffff;
  stroke: currentColor;
  stroke-width: 2;
}

.creatorDetailChartAxis {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-weight: 750;
}

.creatorDetailBarList {
  display: grid;
  gap: 13px;
}

.creatorDetailBarList div {
  min-width: 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 10px;
}

.creatorDetailBarList span,
.creatorDetailBarList em {
  color: var(--text-2);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.creatorDetailBarList em {
  color: var(--text-1);
  text-align: right;
}

.creatorDetailBarList b {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-panel-strong);
}

.creatorDetailBarList i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--creator-detail-accent);
}

.creatorAudiencePanel {
  gap: 20px;
  background: color-mix(in srgb, var(--creator-detail-panel) 92%, var(--primary-soft));
}

.creatorAudiencePanel .creatorDetailPanelHeader h2 {
  color: var(--text-1);
}

.creatorAudiencePanel .creatorDetailPanelHeader span {
  border-color: var(--creator-detail-line);
  background: var(--creator-detail-panel);
  color: var(--creator-detail-muted);
}

.creatorAudienceLayout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.creatorAudienceStack {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 18px;
}

.creatorAudienceCard {
  min-width: 0;
  display: grid;
  gap: 18px;
  border-radius: 16px;
  border: 1px solid var(--creator-detail-line);
  background: var(--creator-detail-panel);
  padding: 22px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
}

.creatorAudienceCard header {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.creatorAudienceCard h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.35;
}

.creatorAudienceCard p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.6;
}

.creatorAudienceRows {
  display: grid;
  gap: 18px;
}

.creatorAudienceRow {
  min-width: 0;
  min-height: 60px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 64px minmax(128px, 0.55fr);
  align-items: center;
  gap: 22px;
  border-radius: 14px;
  background: var(--surface-panel-strong);
  padding: 0 22px;
}

.creatorAudienceRow span {
  min-width: 0;
  overflow: hidden;
  color: var(--creator-detail-muted);
  font-size: 16px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorAudienceRow em {
  color: var(--text-1);
  font-size: 18px;
  font-style: normal;
  font-weight: 760;
  text-align: right;
}

.creatorAudienceRow b {
  height: 26px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 999px;
}

.creatorAudienceRow i {
  width: 0;
  height: 100%;
  display: block;
  border-radius: 999px;
  background: var(--creator-detail-accent);
}

.creatorAudienceCard.compact {
  max-height: 432px;
  overflow-y: auto;
  scrollbar-color: rgba(148, 163, 184, 0.75) transparent;
  scrollbar-width: thin;
}

.creatorAudienceFanType {
  gap: 20px;
}

.creatorAudienceFanBody {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 0.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
}

.creatorAudienceDonut {
  width: 190px;
  height: 190px;
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
}

.creatorAudienceDonut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.creatorAudienceDonut circle {
  fill: none;
  stroke-width: 18;
}

.creatorAudienceDonut .track {
  stroke: var(--line-dark);
}

.creatorAudienceDonut .segment {
  stroke-linecap: butt;
}

.creatorAudienceDonut .segment.pink {
  stroke: var(--creator-detail-accent);
}

.creatorAudienceDonut .segment.green {
  stroke: var(--accent);
}

.creatorAudienceDonut .segment.blue {
  stroke: var(--success);
}

.creatorAudienceDonut strong {
  position: absolute;
  color: var(--creator-detail-accent);
  font-size: 42px;
  font-weight: 950;
}

.creatorAudienceLegend {
  min-width: 0;
  display: grid;
  gap: 20px;
  border-radius: 14px;
  background: var(--surface-panel-strong);
  padding: 22px;
}

.creatorAudienceLegend div {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
}

.creatorAudienceLegend span {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 999px;
}

.creatorAudienceLegend span.pink {
  background: var(--creator-detail-accent);
}

.creatorAudienceLegend span.green {
  background: var(--accent);
}

.creatorAudienceLegend span.blue {
  background: var(--success);
}

.creatorAudienceLegend strong,
.creatorAudienceLegend em {
  color: var(--text-1);
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
}

.creatorAudienceLegend em {
  text-align: right;
}

.creatorAudienceLegend p {
  grid-column: 2 / -1;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

.creatorActivePanel {
  gap: 24px;
  background: #ffffff;
}

.creatorActiveHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  margin: -22px -22px 0;
  padding: 24px 22px;
}

.creatorActiveHeader h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1f2a44;
  font-size: 22px;
  font-weight: 950;
}

.creatorActiveHeader h2 span,
.creatorActiveInfoCard h3 span {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #cfd5df;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.creatorActiveRange {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #617895;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.creatorActiveRange button,
.creatorActiveRange strong {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 8px;
  background: #f7f8fa;
  color: #617895;
  padding: 0 12px;
  font: inherit;
}

.creatorActiveRange button {
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.creatorActiveRange button:hover {
  background: var(--surface-dark-hover);
  color: var(--primary);
}

.creatorActiveRange button.active {
  background: var(--primary-active-bg);
  color: var(--primary);
}

.creatorActiveRange span {
  color: #94a3b8;
}

.creatorActiveChartCard {
  min-width: 0;
  display: grid;
  gap: 12px;
  border-radius: 18px;
  background: #ffffff;
  padding: 26px 18px 20px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
}

.creatorActiveChartCard h3 {
  margin: 0;
  color: #1f2a44;
  font-size: 17px;
  font-weight: 950;
}

.creatorActiveChartCard svg {
  width: 100%;
  height: 300px;
  display: block;
  overflow: visible;
}

.creatorActiveChartCard line {
  stroke: rgba(148, 163, 184, 0.14);
  stroke-dasharray: 4 8;
  stroke-width: 1;
}

.creatorActiveChartCard polygon {
  fill: var(--primary-soft);
  opacity: 0.18;
}

.creatorActiveChartCard polyline {
  fill: none;
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.creatorActiveChartCard circle {
  fill: var(--primary);
  stroke: #ffffff;
  stroke-width: 2;
}

.creatorActiveChartAxis {
  display: grid;
  grid-template-columns: repeat(24, minmax(34px, 1fr));
  gap: 6px;
  overflow-x: auto;
  color: #617895;
  font-size: 12px;
  font-weight: 800;
}

.creatorActiveChartAxis span {
  text-align: center;
  white-space: nowrap;
}

.creatorActiveCards {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.creatorActiveInfoCard {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 22px;
  border-radius: 16px;
  background: #ffffff;
  padding: 26px 30px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
}

.creatorActiveInfoCard h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1f2a44;
  font-size: 18px;
  font-weight: 950;
}

.creatorActiveInfoCard > div {
  display: grid;
  gap: 16px;
}

.creatorActiveInfoCard p {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin: 0;
  color: #526276;
  font-size: 16px;
  font-weight: 760;
}

.creatorActiveInfoCard strong,
.creatorActiveInfoCard em,
.creatorActiveInfoCard b {
  min-width: 0;
  color: #526276;
  font-style: normal;
  font-weight: 800;
}

.creatorActiveInfoCard em {
  text-align: right;
}

.creatorActiveInfoCard b {
  margin-top: 4px;
  color: #4b596b;
  font-size: 16px;
}

.creatorActiveSummaryBody {
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.creatorActiveSummaryCard .creatorAudienceDonut {
  width: 116px;
  height: 116px;
}

.creatorActiveSummaryCard .creatorAudienceDonut circle {
  stroke-width: 15;
}

.creatorActiveSummaryCard .creatorAudienceDonut strong {
  display: none;
}

.creatorDetailHeatmap {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px repeat(5, minmax(88px, 1fr));
  gap: 8px;
  overflow-x: auto;
}

.creatorDetailHeatmap > b {
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.creatorDetailHeatmapRow {
  display: contents;
}

.creatorDetailHeatmapRow strong {
  min-height: 36px;
  display: grid;
  align-items: center;
  color: var(--text-2);
  font-size: 13px;
}

.creatorDetailHeatmapRow i {
  min-height: 36px;
  border-radius: 8px;
  background: var(--creator-detail-accent);
}

.creatorDetailTableWrap {
  min-width: 0;
  overflow-x: auto;
}

.creatorDetailTable {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
}

.creatorDetailTable th,
.creatorDetailTable td {
  border-bottom: 1px solid var(--creator-detail-line);
  color: var(--text-2);
  padding: 12px 10px;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  white-space: nowrap;
}

.creatorDetailTable th {
  color: var(--creator-detail-muted);
  font-weight: 900;
}

.creatorDetailTable td {
  color: var(--text-1);
  font-weight: 750;
}

.creatorDetailTable .right {
  text-align: right;
}

.creatorExpansionMapShell {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(280px, 340px);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}

.creatorExpansionMap {
  min-height: 440px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--creator-detail-accent) 12%, transparent), transparent 34%),
    var(--surface-panel-strong);
  overflow: hidden;
}

.creatorExpansionOrbit {
  position: absolute;
  border: 1px dashed color-mix(in srgb, var(--creator-detail-accent) 28%, transparent);
  border-radius: 999px;
  pointer-events: none;
}

.creatorExpansionOrbit.one {
  width: 210px;
  height: 210px;
}

.creatorExpansionOrbit.two {
  width: 330px;
  height: 330px;
}

.creatorExpansionCenter {
  width: 132px;
  min-height: 132px;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--creator-detail-accent) 34%, var(--creator-detail-line));
  border-radius: 999px;
  background: var(--surface-panel);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--creator-detail-accent) 18%, transparent);
  padding: 14px;
  text-align: center;
}

.creatorExpansionCenter span,
.creatorExpansionInsightHeader > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  font-size: 18px;
  font-weight: 950;
  overflow: hidden;
}

.creatorExpansionCenter img,
.creatorExpansionInsightHeader img,
.creatorExpansionNode img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorExpansionCenter strong {
  max-width: 104px;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.creatorExpansionCenter em,
.creatorExpansionNode em,
.creatorExpansionInsightHeader em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.creatorExpansionNode {
  --node-color: var(--creator-detail-accent);
  width: var(--node-size);
  height: var(--node-size);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--node-color) 40%, #ffffff);
  border-radius: 999px;
  background: var(--surface-panel);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  color: var(--text-1);
  cursor: pointer;
  padding: 0;
  transform: translate(-50%, -50%) rotate(var(--map-angle)) translateY(-148px) rotate(calc(var(--map-angle) * -1));
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.creatorExpansionNode.category {
  --node-color: #2563eb;
}

.creatorExpansionNode.market {
  --node-color: #059669;
}

.creatorExpansionNode.growth {
  --node-color: #d97706;
}

.creatorExpansionNode.commerce {
  --node-color: #dc2626;
}

.creatorExpansionNode.engagement {
  --node-color: #7c3aed;
}

.creatorExpansionNode.scale {
  --node-color: var(--creator-detail-accent);
}

.creatorExpansionNode:hover,
.creatorExpansionNode.active {
  border-color: var(--node-color);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--node-color) 28%, transparent);
  transform: translate(-50%, -50%) rotate(var(--map-angle)) translateY(-154px) rotate(calc(var(--map-angle) * -1));
}

.creatorExpansionNode span {
  width: calc(var(--node-size) - 14px);
  height: calc(var(--node-size) - 14px);
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--node-color) 12%, var(--surface-panel));
  color: var(--node-color);
  font-size: 18px;
  font-weight: 950;
  overflow: hidden;
}

.creatorExpansionNode b {
  min-width: 28px;
  position: absolute;
  top: -7px;
  right: -8px;
  border-radius: 999px;
  background: var(--node-color);
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
  line-height: 20px;
  padding: 0 6px;
}

.creatorExpansionNode em {
  max-width: 72px;
  position: absolute;
  bottom: -22px;
  color: var(--node-color);
  white-space: nowrap;
}

.creatorExpansionInsight {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 16px;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/compat/web-tail/web-tail-005.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Ordered read-only compatibility shard 005. Do not edit. */

.creatorExpansionInsightHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.creatorExpansionInsightHeader div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.creatorExpansionInsightHeader strong {
  color: var(--text-1);
  font-size: 16px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.creatorExpansionInsight dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.creatorExpansionInsight dl div,
.creatorExpansionReason {
  border-radius: 8px;
  background: var(--creator-detail-soft);
  padding: 10px;
}

.creatorExpansionInsight dt,
.creatorExpansionInsight dd {
  margin: 0;
}

.creatorExpansionInsight dt {
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-weight: 850;
}

.creatorExpansionInsight dd {
  margin-top: 4px;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 950;
}

.creatorExpansionReason {
  display: grid;
  gap: 6px;
}

.creatorExpansionReason strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

.creatorExpansionReason p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.creatorExpansionInsight > a {
  min-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--creator-detail-accent);
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
}

.creatorSimilarGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.creatorSimilarGrid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creatorSimilarGrid article {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 14px;
}

.creatorSimilarGrid article > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.creatorSimilarGrid span {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  font-weight: 950;
  overflow: hidden;
}

.creatorSimilarGrid span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorSimilarGrid strong {
  min-width: 0;
  color: var(--text-1);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.creatorSimilarGrid p,
.creatorDetailNote {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.creatorSimilarGrid dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.creatorSimilarGrid dt,
.creatorSimilarGrid dd {
  margin: 0;
  font-size: 12px;
}

.creatorSimilarGrid dt {
  color: var(--creator-detail-muted);
  font-weight: 800;
}

.creatorSimilarGrid dd {
  color: var(--text-1);
  font-weight: 900;
}

.creatorSimilarGrid button,
.creatorSimilarGrid article > a {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--creator-detail-accent);
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
}

/* ===== 相似达人 · 相似度环卡(方案 C · 头像居中) ===== */

.simRecoHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.simRecoHeader h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-1);
}

.simShuffleBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--creator-detail-accent) 35%, var(--creator-detail-line));
  background: color-mix(in srgb, var(--creator-detail-accent) 8%, transparent);
  color: var(--creator-detail-accent);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.simShuffleBtn:hover {
  background: var(--creator-detail-accent);
  border-color: var(--creator-detail-accent);
  color: #ffffff;
}

.simShuffleIcon {
  font-size: 15px;
  line-height: 1;
  transition: transform 0.4s ease;
}

.simShuffleBtn:hover .simShuffleIcon {
  transform: rotate(180deg);
}

.creatorSimilarCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.creatorSimilarCards .simCard {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 20px 18px 18px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--creator-detail-accent) 5%, transparent), transparent 58%),
    var(--surface-panel-strong);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.creatorSimilarCards .simCard::before {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--creator-detail-accent), transparent);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.creatorSimilarCards .simCard:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--creator-detail-accent) 45%, var(--creator-detail-line));
  box-shadow: 0 14px 32px -16px color-mix(in srgb, var(--creator-detail-accent) 60%, transparent);
}

.creatorSimilarCards .simCard:hover::before {
  opacity: 0.9;
}

/* 头像 + 环绕的相似度进度环 */

.creatorSimilarCards .simCardAvatarWrap {
  position: relative;
  width: 78px;
  height: 78px;
  flex: 0 0 auto;
  margin-top: 2px;
  border-radius: 50%;
  padding: 5px;
  box-sizing: border-box;
  background: conic-gradient(
    var(--creator-detail-accent) calc(var(--p, 0) * 1%),
    color-mix(in srgb, var(--creator-detail-accent) 15%, transparent) 0
  );
}

.creatorSimilarCards .simCardAvatar {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  background: linear-gradient(135deg, var(--creator-detail-accent), color-mix(in srgb, var(--creator-detail-accent) 55%, #000000));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #ffffff 18%, transparent),
    0 5px 12px -5px color-mix(in srgb, var(--creator-detail-accent) 65%, transparent);
}

.creatorSimilarCards .simCardAvatarWrap .simCardAvatar {
  width: 100%;
  height: 100%;
  font-size: 20px;
  border: 3px solid var(--surface-panel-strong);
  box-shadow: none;
}

.creatorSimilarCards .simCardAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorSimilarCards .simCardSim {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--creator-detail-accent);
  border: 2px solid var(--surface-panel-strong);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.5;
}

.creatorSimilarCards .simCardName {
  margin-top: 6px;
  max-width: 100%;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creatorSimilarCards .simCardMeta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-2);
}

.creatorSimilarCards .simCardChips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.creatorSimilarCards .simCardChips em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--creator-detail-accent);
  background: color-mix(in srgb, var(--creator-detail-accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--creator-detail-accent) 20%, transparent);
  padding: 2px 9px;
  border-radius: 999px;
}

.creatorSimilarCards .simCardStats {
  display: flex;
  justify-content: center;
  gap: 32px;
  width: 100%;
  margin: 2px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--creator-detail-line);
}

.creatorSimilarCards .simCardStats dt {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--creator-detail-muted);
}

.creatorSimilarCards .simCardStats dd {
  margin: 3px 0 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-1);
}

.creatorSimilarCards .simCardStats dd.up {
  color: #16a34a;
}

.creatorSimilarCards .simCardLink {
  align-self: stretch;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--creator-detail-accent) 10%, transparent);
  color: var(--creator-detail-accent);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}

.creatorSimilarCards .simCardLink span {
  transition: transform 0.16s ease;
}

.creatorSimilarCards .simCardLink:hover {
  background: var(--creator-detail-accent);
  color: #ffffff;
}

.creatorSimilarCards .simCardLink:hover span {
  transform: translateX(3px);
}

@media (max-width: 1180px) {
  .creatorSimilarCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .creatorSimilarCards {
    grid-template-columns: 1fr;
  }
}

/* ===== 达人搜索框 UI 优化(重设计) ===== */

.creatorSearchTop { gap: 14px; align-items: center; }

.creatorSearchBox {
  align-items: center;
  height: 52px;
  padding: 0 6px;
  gap: 0;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.creatorSearchBox:hover {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

.creatorSearchBox:focus-within {
  border-color: rgba(139, 92, 246, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

.creatorSearchBox .ant-select { height: 40px; align-self: center; position: relative; }

.creatorSearchBox .ant-select .ant-select-selector {
  height: 40px !important;
  padding-inline: 14px !important;
  display: flex;
  align-items: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.creatorSearchBox .ant-select-selection-item { color: #e8edf5 !important; font-weight: 750; }

.creatorSearchBox .ant-select-arrow { color: #97a3b6 !important; }

.creatorSearchBox .ant-select::after {
  content: '';
  position: absolute;
  right: 0;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.creatorSearchBox .ant-input {
  padding-inline: 16px !important;
  background: transparent !important;
  color: #f4f7fb !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

.creatorSearchBox .ant-input::placeholder { color: #8a97a9 !important; }

.creatorSearchBox .ant-btn-primary {
  height: 40px !important;
  min-width: 78px;
  align-self: center;
  border-radius: 10px !important;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4) !important;
}

.creatorCollectButton { align-self: center; width: auto; min-width: 0; flex: 0 0 auto; }

/* 类型下拉透明融入搜索框 */

.creatorSearchBox .ant-select,
.creatorSearchBox .ant-select * {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ===== company 关于我们页样式(合并自 feature,配色跟随主题) ===== */

.productsPage,
.creatorsPage,
.creatorDetailPage,
.competitorsPage,
.chatbiPage,
.crmPage,
.openapiPage,
.livesPage,
.notificationsPage,
.companyProfilePage,
.accountProfilePage,
.favoritesPage,
.accountSecurityPage,
.productDetailPage {
  min-width: var(--workspace-canvas-min-width);
}

.companyIntroCard {
  --company-card-accent: var(--primary);
  --company-card-accent-2: var(--accent);
  --company-card-soft: var(--primary-soft);
  --company-card-text: var(--text-1);
  --company-card-body: var(--text-2);
  --company-card-muted: var(--text-3);
  --company-card-line: rgba(15, 23, 42, 0.08);
  --company-card-panel: var(--surface-panel-strong, #ffffff);
  --company-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  --company-card-qr-bg: #f8fafc;
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) minmax(260px, 0.8fr) minmax(320px, 0.9fr);
  gap: 28px;
  align-items: start;
  border: 1px solid var(--company-card-line);
  border-radius: 8px;
  background: var(--company-card-panel);
  box-shadow: var(--company-card-shadow);
  padding: 24px 28px;
}

[data-theme='dark'] .companyIntroCard {
  --company-card-line: var(--line-dark);
  --company-card-panel: var(--surface-panel-strong, #ffffff);
  --company-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  --company-card-qr-bg: var(--surface-panel-strong);
  background: var(--surface-panel);
}

.companyIntroCardMain {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.companyIntroCardLogo {
  display: flex;
  align-items: center;
  gap: 11px;
}

.companyIntroCardLogo > .companyIntroBrandLogo {
  width: 172px;
  height: 43px;
}

.companyIntroCardLogo > .companyIntroBrandLogo ~ span,
.companyIntroCardLogo > .companyIntroBrandLogo ~ div {
  display: none;
}

.companyIntroCardLogo > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--company-card-accent);
  color: #fff;
  font-size: 18px;
  font-weight: 950;
}

.companyIntroCardLogo strong,
.companyIntroCardLogo em {
  display: block;
}

.companyIntroCardLogo strong {
  color: var(--company-card-text);
  font-size: 19px;
  line-height: 1;
}

.companyIntroCardLogo em,
.companyIntroCardQr em {
  color: var(--company-card-muted);
  font-style: normal;
}

.companyIntroCardMain p {
  color: var(--company-card-body);
}

.companyIntroCardLogo em {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
}

.companyIntroCardMain p {
  max-width: 620px;
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

.companyIntroCardLinks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.companyIntroCardLinks div {
  display: grid;
  gap: 13px;
}

.companyIntroCardLinks strong {
  margin-bottom: 8px;
  color: var(--company-card-text);
  font-size: 14px;
}

.companyIntroCardLinks a {
  color: var(--company-card-body);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

.companyIntroCardLinks a:hover {
  color: var(--company-card-accent);
}

.companyIntroCardQrList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.companyIntroCardQr {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.companyIntroCardQr > span {
  width: 76px;
  aspect-ratio: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 4px;
  border: 8px solid var(--company-card-soft);
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--company-card-accent) 50%, transparent 0) 0 0 / 28px 14px,
    linear-gradient(var(--company-card-accent-2) 50%, transparent 0) 0 0 / 14px 28px,
    var(--company-card-qr-bg);
}

.companyIntroCardQr i {
  display: block;
  border-radius: 2px;
  background: var(--company-card-accent);
}

.companyIntroCardQr i:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.companyIntroCardQr i:nth-child(2) {
  grid-column: 4 / 6;
  grid-row: 1 / 3;
}

.companyIntroCardQr i:nth-child(3) {
  grid-column: 1 / 3;
  grid-row: 4 / 6;
}

.companyIntroCardQr i:nth-child(4) {
  grid-column: 4 / 5;
  grid-row: 4 / 5;
  background: var(--company-card-accent-2);
}

.companyIntroCardQr em {
  overflow: hidden;
  max-width: 100%;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.companyProfilePage {
  display: grid;
  gap: 18px;
}

.companyProfileHero {
  align-items: stretch;
}

.companyProfileHero h1 {
  letter-spacing: 0;
}

.companyProfileHeroCard strong {
  color: var(--text-1);
  font-size: 28px;
  letter-spacing: 0;
}

.companyProfileKpiGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.companyProfileKpi {
  gap: 8px;
  padding: 18px;
}

.companyProfileKpi > span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.companyProfileKpi > strong {
  color: var(--text-1);
  font-size: 20px;
  font-weight: 950;
}

.companyProfileKpi > p {
  margin: 0;
  font-size: 13px;
}

.companyProfileGrid {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
}

.companyProfileStory,
.companyProfileBelief,
.companyProfileFlow {
  border-radius: 8px;
}

.companyProfileStory p,
.companyProfileBelief p {
  margin: 0;
  font-size: 14px;
}

.companyProfileStory {
  gap: 16px;
}

.companyProfileBelief {
  gap: 12px;
}

.companyProfileBelief .panelHeader {
  margin-bottom: 0;
}

.companyProfileFlow {
  gap: 16px;
}

.companyProfileFlowGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.companyProfileFlowGrid article {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 16px;
}

.companyProfileFlowGrid article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 950;
}

.companyProfileFlowGrid article > strong {
  color: var(--text-1);
  font-size: 16px;
  font-weight: 950;
}

.companyProfileFlowGrid article > p {
  margin: 0;
  font-size: 13px;
}

/* ============================================================
   Company About Page (in-system, FastMoss-style hero + timeline)
   ============================================================ */

.companyAboutPage {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.companyAboutTitle {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 0;
}

/* Hero banner — branded gradient with rounded bottom */

.companyAboutHero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 3.5rem 2rem 5rem;
  text-align: center;
  border-radius: 20px;
  background: var(--grad);
  overflow: hidden;
}

.companyAboutHero::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -42%;
  width: 130%;
  height: 60%;
  transform: translateX(-50%);
  background: var(--bg);
  border-radius: 50% 50% 0 0;
}

.companyAboutHeroLogo {
  position: relative;
  z-index: 1;
}

.companyAboutHeroLogo svg {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
}

.companyAboutHero h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.5rem;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

.companyAboutHero p {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0;
  font-size: 0.95rem;
  line-height: 2;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}

/* Timeline card */

.companyTimelineCard {
  margin-top: -2.5rem;
  position: relative;
  z-index: 2;
  padding: 2.5rem 1rem;
  background: var(--surface-panel);
  border: 1px solid var(--line-dark);
  border-radius: 20px;
  box-shadow: var(--shadow-dark);
}

.companyTimelineScroller {
  overflow-x: auto;
  padding: 0 1rem;
  scrollbar-width: thin;
}

.companyTimelineTrack {
  position: relative;
  display: flex;
  align-items: center;
  min-width: max-content;
  padding: 0 1rem;
}

/* Horizontal axis line */

.companyTimelineLine {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--line-dark-strong);
}

.companyTimelineNode {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 232px;
  flex: 0 0 232px;
  min-height: 232px;
}

.companyTimelineNode .companyTimelineContent {
  width: 100%;
  padding: 0 0.5rem;
}

.companyTimelineNode.top {
  justify-content: flex-start;
}

.companyTimelineNode.top .companyTimelineContent {
  margin-bottom: 2.25rem;
}

.companyTimelineNode.bottom {
  justify-content: flex-end;
}

.companyTimelineNode.bottom .companyTimelineContent {
  order: 2;
  margin-top: 2.25rem;
}

.companyTimelineContent strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 0.625rem;
}

.companyTimelineContent ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.companyTimelineContent li {
  position: relative;
  padding-left: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-2);
}

.companyTimelineContent li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: var(--text-3);
}

/* Dot on the axis */

.companyTimelineDot {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  width: 11px;
  height: 11px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--primary-soft);
  z-index: 1;
}

/* Connector from dot to content */

.companyTimelineNode.top .companyTimelineContent::after,
.companyTimelineNode.bottom .companyTimelineContent::after {
  content: '';
  position: absolute;
  left: calc(0.75rem + 5px);
  width: 1px;
  background: var(--line-dark-strong);
}

.companyTimelineNode.top .companyTimelineContent::after {
  top: 100%;
  bottom: auto;
  height: 2.25rem;
}

.companyTimelineNode.bottom .companyTimelineContent::after {
  bottom: 100%;
  height: 2.25rem;
}

/* KPI grid */

.companyAboutKpiGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.companyAboutKpi {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  background: var(--surface-panel);
  border: 1px solid var(--line-dark);
  border-radius: 14px;
}

.companyAboutKpi span {
  font-size: 0.8125rem;
  color: var(--text-3);
}

.companyAboutKpi strong {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-1);
}

.companyAboutKpi p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-2);
}

/* Services */

.companyAboutServices {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.companyAboutServices header {
  text-align: center;
}

.companyAboutServices header h2 {
  margin: 0 0 0.5rem;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-1);
}

.companyAboutServices header p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-2);
}

.companyAboutServicesGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.companyAboutServicesGrid article {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem;
  background: var(--surface-panel);
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.companyAboutServicesGrid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.companyAboutServiceIndex {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-light);
  opacity: 0.6;
}

.companyAboutServiceIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary-light);
}

.companyAboutServicesGrid strong {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-1);
}

.companyAboutServicesGrid p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-2);
}

/* ===== 达人对比 ===== */

.creatorRowActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.growthRankActions {
  justify-content: flex-start;
  padding: 0;
}

.creatorCompareAction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.creatorCompareAction.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.creatorCompareAction:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.favoriteCardAction.isComparing {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

/* 底部对比篮浮条 */

.creatorCompareBar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 16px;
  border: 1px solid var(--line-dark, rgba(124, 124, 150, 0.25));
  background: var(--surface-panel-strong, rgba(20, 20, 30, 0.92));
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  max-width: calc(100vw - 40px);
}

.creatorCompareBarLabel {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-1);
  white-space: nowrap;
}

.creatorCompareBarItems {
  display: flex;
  align-items: center;
  gap: 8px;
}

.creatorCompareBarChip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
  font-weight: 800;
  font-size: 13px;
}

.creatorCompareBarChip img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

.creatorCompareBarChip em {
  font-style: normal;
}

.creatorCompareBarChip button {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--surface-panel, #ffffff);
  border-radius: 999px;
  background: var(--text-1);
  color: var(--surface-panel, #ffffff);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.creatorCompareBarAction,
.creatorCompareBarClear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.creatorCompareBarAction {
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.creatorCompareBarAction[aria-disabled='true'] {
  opacity: 0.55;
  pointer-events: none;
}

.creatorCompareBarClear {
  border: 1px solid var(--line-dark, rgba(124, 124, 150, 0.25));
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.agentFloatingPanelBody .agentConversationMain,
.agentEmbeddedPanelBody .agentConversationMain {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.agentFloatingPanelBody .agentConversationScroll,
.agentEmbeddedPanelBody .agentConversationScroll {
  min-height: 0;
  overflow: auto;
}

.agentFloatingPanelBody .agentFloatingComposer,
.agentEmbeddedPanelBody .agentFloatingComposer {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

[data-theme='dark'] .growthRankFilterPanel .cuiSegmentedButton[aria-pressed='false'] {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.42);
  color: rgba(241, 245, 249, 0.88);
}

[data-theme='dark'] .growthRankFilterPanel .cuiSegmentedButton[aria-pressed='false']:hover {
  border-color: rgba(167, 139, 250, 0.44);
  background: rgba(88, 28, 135, 0.34);
  color: #ffffff;
}

[data-theme='dark'] .growthRankFilterPanel .cuiSegmentedButton[aria-pressed='true'] {
  border-color: var(--growth-rank-accent);
  background: color-mix(in srgb, var(--growth-rank-accent) 24%, rgba(255, 255, 255, 0.08));
  color: var(--growth-rank-accent);
}

/* Creator gray-test fixes: keep comparison chips and ranking filters stable. */

.creatorCompareShell {
  display: grid;
  gap: 18px;
  color: var(--text-1);
}

.creatorCompareHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.creatorCompareHeader h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}

.creatorCompareHeader p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.creatorCompareBack {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-1);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.creatorCompareChips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.creatorCompareChip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-1);
  padding: 5px 8px 5px 5px;
  font-size: 13px;
  font-weight: 850;
}

.creatorCompareChipAvatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  color: #ffffff;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.creatorCompareChipAvatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.creatorCompareChip button {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-2);
  cursor: pointer;
  line-height: 1;
}

.creatorCompareChip.isEmpty {
  padding: 0 15px;
  text-decoration: none;
  color: var(--primary);
  border-style: dashed;
}

.creatorCompareGrid {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
  gap: 16px;
  align-items: start;
}

.creatorComparePanel {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-light);
  padding: 18px;
}

.creatorComparePanel h3 {
  margin: 0 0 14px;
  font-size: 16px;
}

.creatorCompareRadarBody {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.creatorCompareRadar {
  width: min(100%, 320px);
  height: auto;
}

.creatorCompareLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--text-2);
  font-size: 12px;
}

.creatorCompareLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.creatorCompareLegend i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.creatorCompareTableScroll {
  overflow-x: auto;
}

.creatorCompareTable {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13px;
}

.creatorCompareTable th,
.creatorCompareTable td {
  border-bottom: 1px solid var(--line-dark);
  padding: 10px 12px;
  text-align: left;
}

.creatorCompareTable thead th,
.creatorCompareGroupRow td {
  color: var(--text-2);
  font-weight: 900;
}

.creatorCompareTable .isBest {
  color: var(--primary);
  font-weight: 900;
}

.bestStar {
  margin-left: 4px;
}

@media (max-width: 980px) {
  .creatorCompareHeader {
    display: grid;
  }

  .creatorCompareGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =============================================================== */

/* Shop search page — conservative layout polish (微调, 2026-06-26) */

/* Append-only; every rule is scoped to .shopSearchPage so the      */

/* shared .shopDetailTitleRow / .shopRank* rules are never touched.  */

/* =============================================================== */

/* Fix undefined shop tokens (referenced but never declared): card  */

/* surfaces relied on var(--shop-panel) -> transparent fill, and     */

/* --shop-faint label color was broken. Map to the defined tokens.   */

.shopSearchPage {
  --shop-panel: var(--shop-bg);
  --shop-panel-soft: var(--shop-bg-soft);
  --shop-faint: var(--shop-muted);
}

/* Header renders only an <h1>, but the rule shared with             */

/* .shopDetailTitleRow forces min-height:144px + align-items:end,    */

/* leaving a tall empty gradient with the title pinned to the bottom.*/

/* Right-size it on desktop; the <=1280px collapse still applies.    */

@media (min-width: 1281px) {
  .shopSearchPage .shopSearchHeader {
    min-height: 96px;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: 22px 28px;
  }
}

/* A later rule pins the header h1 to 18px (too small for a hero);   */

/* restore a sensible, responsive title size.                        */

.shopSearchPage .shopSearchHeader h1 {
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
}

/* Advanced range filters used auto-fit minmax(190px, max-content),  */

/* sizing columns to content -> ragged right edge. Even them out.    */

.shopSearchPage .shopAdvancedGrid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.shopSearchPage .shopAdvancedSelectGrid {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

.shopSearchPage .shopAdvancedSelectGrid label {
  gap: 6px;
}

.shopSearchPage .shopAdvancedSelectGrid select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-text);
  font: inherit;
  font-size: 13px;
  font-weight: 820;
  outline: 0;
  padding: 0 32px 0 12px;
}

.shopSearchPage .shopAdvancedSelectGrid select:focus {
  border-color: color-mix(in srgb, var(--shop-accent) 58%, var(--shop-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-accent) 14%, transparent);
}

/* Filter rows: center each label against its chips, and add a       */

/* little breathing room below the search bar.                       */

.shopSearchPage .shopFilterRow {
  align-items: center;
}

.shopSearchPage .shopFilterBlock {
  padding-top: 18px;
}

/* Overview cards: match the 16px in-card rhythm, and add a 3-col    */

/* step so 4 fixed columns don't drop straight to 2 on mid widths.   */

.shopSearchPage .shopMetricGrid {
  gap: 14px;
}

@media (max-width: 1180px) and (min-width: 721px) {
  .shopSearchPage .shopMetricGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =============================================================== */

/* Shop DETAIL page fixes (2026-06-26)                              */

/* (1) Sticky header was cramming/stacking because                  */

/*     .shopDetailStickyMeta / .shopDetailStickyIdentity lacked      */

/*     flex layout. (2) The distribution donut had NO CSS at all, so */

/*     its 120x120 SVG scaled to fill the whole card ("过大").       */

/* Scoped to .shopDetailPage (root carries shopSearchPage +          */

/* shopDetailPage), append-only — cannot regress other pages.        */

/* =============================================================== */

/* ---- (1) Sticky header: restore a single compact row ---- */

.shopDetailPage .shopDetailStickyIdentity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.shopDetailPage .shopDetailStickyMeta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.shopDetailPage .shopDetailStickyMeta > div {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.shopDetailPage .shopDetailStickyMeta > div > strong {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopDetailPage .shopDetailStickyMeta > span,
.shopDetailPage .shopDetailStickyMeta em {
  flex: 0 0 auto;
}

.shopDetailPage .shopDetailStickyMeta em {
  color: var(--shop-faint);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.shopDetailPage .shopDetailStickyMeta button,
.shopDetailPage .shopDetailStickyActions button {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-panel, #ffffff);
  color: var(--shop-muted);
  cursor: pointer;
}

.shopDetailPage .shopDetailStickyActions button {
  width: 32px;
  height: 32px;
}

.shopDetailPage .shopDetailStickyMeta button:hover,
.shopDetailPage .shopDetailStickyActions button:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 32%, var(--shop-line));
  color: var(--shop-accent);
}

/* ---- (2) Distribution donut + pie/bar toggle (was entirely unstyled) ---- */

.shopDetailPage .shopDistChart {
  display: grid;
  gap: 18px;
}

.shopDetailPage .shopDistToggle {
  position: relative;
  display: inline-flex;
  width: min(210px, 100%);
  justify-self: end;
  align-self: start;
  gap: 0;
  padding: 3px;
  border: 1px solid var(--shop-line);
  border-radius: 999px;
  background: var(--shop-bg-soft);
}

.shopDetailPage .shopDistToggleThumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--shop-accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--shop-accent) 30%, transparent);
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shopDetailPage .shopDistToggle[data-view='bar'] .shopDistToggleThumb {
  transform: translateX(100%);
}

.shopDetailPage .shopDistToggle button {
  position: relative;
  z-index: 1;
  flex: 1 1;
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--shop-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  padding: 0 12px;
  text-align: center;
  transition: color 220ms ease;
}

.shopDetailPage .shopDistToggle button.active {
  color: #ffffff;
}

.shopDetailPage .shopDistBody {
  animation: shopDistReveal 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes shopDistReveal {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.shopDetailPage .shopDonutWrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 26px;
}

.shopDetailPage .shopDonut {
  position: relative;
  flex: 0 0 auto;
  width: 178px;
  height: 178px;
}

.shopDetailPage .shopDonut svg {
  display: block;
  width: 100%;
  height: 100%;
}

.shopDetailPage .shopDonutCenter {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
}

.shopDetailPage .shopDonutCenter strong {
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
}

.shopDetailPage .shopDonutCenter span {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 800;
}

.shopDetailPage .shopDonutLegend {
  flex: 1 1 190px;
  min-width: 0;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shopDetailPage .shopDonutLegend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 4px 6px;
  cursor: pointer;
}

.shopDetailPage .shopDonutLegend li.is-active {
  background: var(--shop-bg-soft);
}

.shopDetailPage .shopDonutLegend li > i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.shopDetailPage .shopDonutLegend li > span {
  min-width: 0;
  overflow: hidden;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopDetailPage .shopDonutLegend li > em {
  color: var(--shop-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.shopDetailPage .shopDonutLegend li > strong {
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 920;
}

.shopDetailPage .shopDonutTip {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -120%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  background: #0f172a;
  color: #ffffff;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.shopDetailPage .shopDonutTip i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* ---- (3) Detail "shop not found / load failed" state ---- */

.shopDetailNotFound {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: 320px;
  border: 1px solid var(--shop-line);
  border-radius: 14px;
  background: var(--shop-bg);
  box-shadow: var(--shop-shadow);
  padding: 48px 24px;
  text-align: center;
}

.shopDetailNotFound strong {
  color: var(--shop-text);
  font-size: 20px;
  font-weight: 950;
}

.shopDetailNotFound p {
  max-width: 440px;
  margin: 0;
  color: var(--shop-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.shopDetailNotFoundBack {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--shop-accent);
  border-radius: 999px;
  background: var(--shop-accent);
  color: #ffffff;
  text-decoration: none;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 850;
}

.shopDetailNotFoundBack:hover {
  background: var(--shop-accent-strong);
}

/* Detail title banner: show shop name (banner was empty after the title removal) */

.shopDetailPage .shopDetailTitleRow {
  min-height: 104px;
  align-items: center;
}

.shopDetailPage .shopDetailTitleMain {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: center;
}

.shopDetailPage .shopDetailTitleRow h1 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .notificationWorkspace {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .notificationDetailPanel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .notificationCenterHeader,
  .notificationWorkspace,
  .notificationSummaryGrid {
    grid-template-columns: 1fr;
  }

  .notificationHeaderActions {
    justify-content: flex-start;
  }

  .notificationUserItem {
    grid-template-columns: 8px 30px minmax(0, 1fr);
    padding: 12px;
  }

  .notificationItemTitleRow {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .notificationItemTitleRow strong,
  .notificationItemTitleRow em {
    width: 100%;
  }

  .notificationAttachment,
  .notificationDetailActions {
    align-items: stretch;
    flex-direction: column;
  }

  .notificationFactGrid {
    grid-template-columns: 1fr;
  }

  .notificationAttachment button,
  .notificationDetailActions button,
  .notificationHeaderActions button {
    justify-content: center;
    width: 100%;
  }
}

/* ===== 合并保留:wjy 独有选择器块(openapi/account/错误提示等,零核心重叠追加) ===== */

.authServiceStatusMessage {
  flex: 1 1 auto;
  min-width: 0;
}

.authServiceStatusTraceCopy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-family: var(--font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace);
  border: 1px solid var(--auth-panel-control-border);
  background: var(--auth-panel-control-bg);
  border-radius: 4px;
  cursor: pointer;
}

.authServiceStatusDetail {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace);
  opacity: 0.75;
  word-break: break-all;
}

/* W1 可观测体系（PRD §6.2）：通用 ErrorToast trace 复制 + dev-only detail。
   与 AuthServiceStatus 的样式保持同族，但用于 FeedbackMessage 等通用容器内部。 */

.errorToastBody {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.errorToastMessage {
  flex: 1 1 auto;
  min-width: 0;
}

.errorToastTraceCopy {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: var(--font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace);
  border: 1px solid var(--auth-panel-control-border, #d9d9d9);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  cursor: pointer;
  color: inherit;
  white-space: nowrap;
}

.errorToastDetail {
  display: block;
  width: 100%;
  padding: 1px 4px;
  font-size: 11px;
  font-family: var(--font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace);
  opacity: 0.7;
  word-break: break-all;
  color: inherit;
}

/* 订阅中心 / 套餐 独立全屏页：脱离设置 Tab chrome，仅保留页面内容与返回栏。 */

/* Subscription center / plans full-screen shell: no settings tab chrome, only content and a back bar. */

.settingsFullscreenShell {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
}

.settingsFullscreenBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.settingsFullscreenBack {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.settingsFullscreenBack:hover {
  color: var(--text-1);
}

/* 席位已满时邀请卡被替换为只读说明 + 升级引导。 */

/* When seats are full the invite card is replaced by a read-only notice and an upgrade call to action. */

.teamHubSeatFullCard {
  display: grid;
  gap: 14px;
  align-content: start;
}

.teamHubSeatFullHint {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.teamHubInviteForm label,
.teamHubInlineFields label {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
}

.teamHubInviteForm label.wide {
  grid-column: 1 / -1;
}

.teamHubInviteForm input,
.teamHubInviteForm select,
.teamHubInviteForm textarea,
.teamHubInlineFields input,
.teamHubInlineFields select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  outline: none;
  background: var(--team-soft-bg);
  color: var(--text-1);
  font: inherit;
  padding: 0 11px;
}

.teamHubInviteForm textarea {
  min-height: 108px;
  resize: vertical;
  padding: 10px 11px;
  line-height: 1.5;
}

.teamHubInviteForm input:focus,
.teamHubInviteForm select:focus,
.teamHubInviteForm textarea:focus,
.teamHubInlineFields input:focus,
.teamHubInlineFields select:focus,
.teamHubRoleSelect:focus,
.teamHubSearch:focus-within {
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.teamHubProgress article em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 头部订阅指标内的"订阅中心"入口，与上方文案保持间距且不占满整行。 */

/* The subscription-center entry inside the header metric keeps spacing and does not stretch full width. */

.teamHubSummaryMetric .teamHubLinkButton.compact {
  justify-self: start;
  margin-top: 2px;
}

/* 成员表内邀请行的内联邀请码 + 复制按钮，沿用 code 风格但更紧凑。 */

/* Inline invite code + copy button inside member-table invitation rows, reusing code styling but more compact. */

.teamHubInviteCodeInline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.teamHubInviteCodeInline code {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(34, 211, 238, 0.28);
  border-radius: 6px;
  background: rgba(34, 211, 238, 0.08);
  color: var(--text-1);
  padding: 2px 8px;
  font-family: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* 待审批加入申请区：整体复用卡片设计语言。 */

/* Pending join requests section: reuse the card design language. */

.teamHubJoinRequestsCard {
  gap: 12px;
}

.teamHubJoinRequestList {
  display: grid;
  gap: 10px;
}

.teamHubJoinRequestItem {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--team-card-bg), var(--team-soft-bg));
  padding: 12px;
}

.teamHubJoinRequestItem .cuiDataListItemActions {
  grid-column: 3 / 4;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: center;
}

.teamHubJoinRequestItem .teamHubMuted {
  font-size: 12px;
}

.teamHubJoinRequestActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 紧凑主按钮，用于审批通过等行内操作。 */

/* Compact primary button for inline actions such as approve. */

.teamHubPrimaryButton.compact {
  min-height: 30px;
  padding: 0 12px;
  box-shadow: none;
}

/* 加入团队页：单列布局，居中收窄，沿用团队卡片体系。 */

/* Join-team page: single-column centered layout reusing the team card system. */

.teamJoinPage {
  max-width: 720px;
  margin: 0 auto;
}

.teamJoinCard {
  gap: 14px;
}

.teamJoinForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px 12px;
}

.teamJoinField {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.teamJoinField > span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

/* 预览卡：与成员卡同色系，强调团队信息与加入方式。 */

/* Preview card: same color system as member cards, emphasizing team info and join mode. */

.teamJoinPreview {
  display: grid;
  gap: 14px;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--team-card-bg), var(--team-soft-bg));
  padding: 16px;
}

.teamJoinPreviewHeader {
  min-width: 0;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.teamJoinPreviewHeader .teamHubTeamLogo {
  width: 56px;
  height: 56px;
  font-size: 21px;
}

.teamJoinPreviewHeader > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.teamJoinPreviewHeader h3 {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--text-1);
  font-size: 16px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamJoinPreviewHeader p {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamJoinPreviewMeta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  border-top: 1px solid var(--team-line);
  padding-top: 12px;
}

.teamJoinPreviewMeta > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.teamJoinPreviewMeta dt {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.teamJoinPreviewMeta dd {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamJoinPreviewHint {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}

.teamSwitchImpact,
.teamSwitchPending {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--team-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning) 8%, var(--team-card-bg));
  padding: 12px;
  color: var(--text-1);
}

.teamSwitchImpact > div,
.teamSwitchPending > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.teamSwitchImpact p,
.teamSwitchPending span {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.teamSwitchPending {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.teamSwitchConfirmSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.teamSwitchConfirmSummary > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid var(--team-line);
  border-radius: 6px;
  padding: 10px;
}

.teamSwitchConfirmSummary dt {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}

.teamSwitchConfirmSummary dd {
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.teamSwitchStepUpForm {
  display: grid;
  gap: 14px;
}

.teamSwitchStepUpMethod,
.teamSwitchStepUpActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.teamSwitchStepUpActions {
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .teamHubPageHeader,
  .teamHubCardHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .teamHubPrimaryButton,
  .teamHubSecondaryButton {
    width: 100%;
  }

  .teamHubErrorState {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 22px;
  }

  .teamHubErrorVisual {
    width: 132px;
  }

  .teamHubRetryButton {
    width: 100%;
  }

  .teamHubSummaryCard,
  .teamHubTableToolbar,
  .teamHubInlineFields,
  .teamHubInlineFields.compact,
  .teamHubInlineFields.three,
  .teamHubProgressSteps,
  .teamHubRoleCards {
    grid-template-columns: 1fr;
  }

  .teamHubSummaryIdentity {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .teamHubTeamLogo {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }

  .teamHubResendAction {
    justify-items: start;
  }

  .teamHubResendHint {
    text-align: left;
    white-space: normal;
  }

  .teamHubInvitationItem,
  .teamHubRecentList article,
  .teamHubAuditStrip {
    grid-template-columns: 1fr;
  }

  .teamJoinForm,
  .teamJoinPreviewHeader,
  .teamJoinPreviewMeta,
  .teamSwitchConfirmSummary {
    grid-template-columns: 1fr;
  }

  .teamSwitchPending {
    grid-template-columns: 1fr;
  }

  .teamSwitchPending .cuiButton,
  .teamSwitchStepUpActions .cuiButton {
    width: 100%;
  }

  .teamSwitchStepUpActions {
    align-items: stretch;
    flex-direction: column;
  }

  .teamHubJoinRequestItem {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .teamHubJoinRequestItem .cuiDataListItemActions {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: stretch;
  }

  .teamHubJoinRequestActions {
    width: 100%;
  }

  .teamHubJoinRequestActions .teamHubPrimaryButton,
  .teamHubJoinRequestActions .teamHubDangerLink {
    flex: 1 1 auto;
  }
}

/* Team center workbench refresh: keep the existing data flow, align the surface with /workbench. */

.teamHubPage {
  --team-card-bg: var(--surface-panel);
  --team-soft-bg: var(--surface-panel-hover);
  --team-line: var(--line-dark);
  --team-blue: var(--primary);
  --team-cyan: var(--accent);
  --team-purple: var(--primary);
  --team-green: var(--success);
  --team-amber: var(--warning);
  width: 100%;
  min-width: 0;
  align-content: start;
  gap: 16px;
}

.teamHubPage.cuiResourcePage {
  gap: 16px;
}

.teamHubPage .cuiResourceHeader {
  min-width: 0;
  align-items: center;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px 16px;
  box-shadow: none;
}

.teamHubPage .cuiResourceTitleBlock {
  gap: 5px;
}

.teamHubPage .cuiResourceEyebrow {
  width: fit-content;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--team-cyan) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--team-cyan) 9%, transparent);
  color: var(--team-cyan);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.teamHubPage .cuiResourceTitle {
  color: var(--text-1);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: 0;
}

.teamHubPage .cuiResourceDescription {
  max-width: 660px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}

.teamHubPage .cuiResourceActions {
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.teamHubCommandTitle {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.teamHubCommandTitle > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamHubCommandMeta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.teamHubCommandMeta > span:not(.teamHubRoleBadge) {
  min-height: 26px;
  max-width: 220px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--team-line);
  border-radius: 999px;
  background: var(--team-soft-bg);
  color: var(--text-2);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamHubResourceMeta {
  width: fit-content;
  min-width: 0;
  display: inline-grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background: var(--team-soft-bg);
  padding: 8px 10px;
}

.teamHubResourceMeta .teamHubTeamLogo,
.teamHubTeamLogo {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--team-blue), var(--team-cyan));
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
  box-shadow: none;
}

.teamHubResourceMeta strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

.teamHubResourceMeta small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamHubMetricGrid.cuiMetricGrid {
  gap: 10px;
}

.teamHubMetricGrid .cuiMetricCard {
  min-height: 92px;
  border-color: var(--team-line);
  border-radius: 8px;
  background: var(--team-card-bg);
  box-shadow: none;
  padding: 14px;
}

.teamHubMetricGrid .cuiMetricCardIcon {
  border-color: color-mix(in srgb, var(--team-cyan) 20%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--team-cyan) 9%, transparent);
  color: var(--team-cyan);
}

.teamHubMetricGrid .cuiMetricCardValue {
  font-size: 24px;
}

.teamHubMetricGrid .cuiMetricCardDescription {
  color: var(--text-3);
}

.teamHubMainGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.78fr) minmax(320px, 0.72fr);
  align-items: start;
  gap: 16px;
}

.teamHubBottomGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.teamHubBottomGridSingle {
  grid-template-columns: minmax(0, 1fr);
}

.teamHubCard {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background: var(--team-card-bg);
  box-shadow: none;
  padding: 16px;
}

.teamHubCard.cuiPanel {
  gap: 14px;
}

.teamHubCard .cuiPanelHeader {
  min-width: 0;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--team-line);
  padding-bottom: 12px;
}

.teamHubCard .cuiPanelTitle {
  color: var(--text-1);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.25;
}

.teamHubCard .cuiPanelBody {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.teamHubMembersCard {
  overflow: hidden;
}

.teamHubSideColumn {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 16px;
}

.teamHubAnchor {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.teamHubPanelTitle {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.teamHubCardIcon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--team-cyan) 20%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--team-cyan) 9%, transparent);
  color: var(--team-cyan);
}

.teamHubCardIcon.purple {
  border-color: color-mix(in srgb, var(--team-blue) 22%, transparent);
  background: color-mix(in srgb, var(--team-blue) 9%, transparent);
  color: var(--team-blue);
}

.teamHubPrimaryButton,
.teamHubSecondaryButton,
.teamHubIconButton,
.teamHubLinkButton,
.teamHubDangerLink {
  min-height: 34px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
}

.teamHubPrimaryButton {
  border-color: color-mix(in srgb, var(--team-blue) 72%, transparent);
  background: var(--team-blue);
  color: #ffffff;
  box-shadow: none;
}

.teamHubSecondaryButton,
.teamHubIconButton {
  border-color: var(--team-line);
  background: var(--team-soft-bg);
  color: var(--text-1);
}

.teamHubLinkButton {
  border-color: color-mix(in srgb, var(--team-blue) 18%, transparent);
  background: color-mix(in srgb, var(--team-blue) 8%, transparent);
  color: var(--team-blue);
}

.teamHubDangerLink {
  border-color: color-mix(in srgb, var(--danger) 24%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  color: var(--danger);
}

.teamHubRowActions.member {
  position: relative;
  align-items: center;
  justify-content: center;
}

.teamHubActionHeader {
  justify-content: center;
  text-align: center;
}

.teamHubRowActions.member .cuiActionMenu {
  display: inline-flex;
}

.teamHubMemberActionTrigger {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
}

.teamHubMemberActionMenu.cuiMenu {
  min-width: 112px;
}

.teamHubMemberActionMenuItem.cuiMenuItem {
  justify-content: flex-start;
}

.teamHubPrimaryButton.full {
  width: 100%;
}

.teamHubInviteForm .teamHubPrimaryButton.full > span:not(.cuiButtonSpinner) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.teamHubInviteForm .teamHubPrimaryButton.full svg {
  flex: 0 0 auto;
}

.teamHubTableToolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  align-items: center;
  gap: 12px;
}

.teamHubContentTabs,
.teamHubContentTabPanel {
  min-width: 0;
}

.teamHubContentTabs .cuiTabsList {
  flex-wrap: wrap;
  overflow: visible;
}

.teamHubContentTabs .cuiTabsTab {
  flex: 0 0 auto;
  font-weight: 900;
  white-space: nowrap;
}

.teamHubContentTabPanel {
  display: grid;
  gap: 14px;
}

.teamHubMemberTable .cuiDataListFooter {
  border-top: 1px solid var(--team-line);
  padding-top: 12px;
}

.teamHubMemberTable .cuiPagination {
  min-width: 0;
}

.teamHubTabs.cuiSegmented,
.teamHubInviteTabs.cuiSegmented {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background: var(--team-soft-bg);
  padding: 4px;
  scrollbar-width: thin;
}

.teamHubTabs .cuiSegmentedButton,
.teamHubInviteTabs .cuiSegmentedButton {
  flex: 0 0 auto;
  min-height: 30px;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  padding: 0 10px;
  white-space: nowrap;
}

.teamHubTabs .cuiSegmentedButton[aria-pressed='true'],
.teamHubInviteTabs .cuiSegmentedButton[aria-pressed='true'] {
  border-color: var(--team-line);
  background: var(--surface-panel);
  color: var(--team-blue);
  box-shadow: none;
}

.teamHubSegmentBadge {
  min-width: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 950;
}

.teamHubSearch,
.teamHubInviteForm input,
.teamHubInviteForm select,
.teamHubInviteForm textarea,
.teamHubInlineFields input,
.teamHubInlineFields select,
.teamHubInlineFields textarea {
  border-color: var(--team-line);
  border-radius: 8px;
  background: var(--control-bg);
}

.teamHubProgress {
  display: grid;
  gap: 10px;
}

.teamHubProgressHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.teamHubProgressSteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background: var(--team-soft-bg);
  padding: 10px;
}

.teamHubProgress article {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 4px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.teamHubProgress article + article {
  border-left: 1px solid var(--team-line);
  padding-left: 10px;
  margin-left: 10px;
}

.teamHubProgressIcon {
  grid-row: 1 / span 2;
}

.teamHubProgress strong {
  color: var(--text-1);
  font-size: 20px;
  line-height: 1;
}

.teamHubProgressHeader span,
.teamHubProgressHeader em,
.teamHubProgress em {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamHubInvitationItem,
.teamHubJoinRequestItem,
.teamHubRecentList article,
.teamHubRoleCards article,
.teamHubAuditStrip,
.teamHubEmpty {
  border-color: var(--team-line);
  border-radius: 8px;
  background: var(--team-soft-bg);
}

.teamHubInvitationItem,
.teamHubJoinRequestItem {
  box-shadow: none;
}

.teamHubInvitationItem {
  min-height: 76px;
  align-items: start;
  overflow: visible;
}

.teamHubInvitationItem .cuiDataListItemMedia {
  align-self: start;
  padding-top: 2px;
}

.teamHubInvitationItem .cuiDataListItemMain {
  align-self: center;
  overflow: visible;
}

.teamHubInvitationItem .cuiDataListItemHeader {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.teamHubInvitationItem .cuiDataListItemTitleBlock {
  flex: 1 1 120px;
}

.teamHubInvitationItem .cuiDataListItemDescription {
  margin-top: 2px;
}

.teamHubInvitationItem .cuiDataListItemMeta {
  min-width: 0;
  white-space: normal;
}

.teamHubInvitationStatusStack {
  align-items: center;
  justify-content: flex-start;
}

.teamHubInvitationItem .cuiDataListItemActions {
  align-self: center;
  justify-self: end;
}

.teamHubJoinRequestItem {
  grid-template-columns: 40px minmax(0, 1fr);
}

.teamHubJoinRequestItem .cuiDataListItemActions {
  grid-column: 1 / -1;
  grid-row: auto;
  justify-self: stretch;
}

.teamHubJoinRequestActions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.teamHubJoinRequestActions .teamHubPrimaryButton,
.teamHubJoinRequestActions .teamHubDangerLink {
  width: 100%;
}

.teamHubEmbeddedJoinRequests .teamHubJoinRequestItem {
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

.teamHubEmbeddedJoinRequests .teamHubJoinRequestItem .cuiDataListItemActions {
  grid-column: auto;
  grid-row: 1;
  align-self: center;
  justify-self: end;
}

.teamHubEmbeddedJoinRequests .teamHubJoinRequestActions {
  width: auto;
  display: flex;
}

.teamHubEmbeddedJoinRequests .teamHubJoinRequestActions .teamHubPrimaryButton,
.teamHubEmbeddedJoinRequests .teamHubJoinRequestActions .teamHubDangerLink {
  width: auto;
}

.teamHubRoleCards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.teamHubRoleCards article {
  padding: 12px;
}

.teamHubRoleCards article.active {
  border-color: color-mix(in srgb, var(--team-blue) 26%, transparent);
  background: color-mix(in srgb, var(--team-blue) 8%, var(--team-soft-bg));
}

.teamHubAuditStrip {
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) auto;
}

.teamHubSummaryCard {
  grid-template-columns: minmax(280px, 1.25fr) repeat(3, minmax(128px, 0.52fr)) minmax(132px, 0.42fr);
}

.teamHubSummaryActions {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
  border-left: 1px solid var(--team-line);
  padding-left: 18px;
}

.teamHubSummaryActions .teamHubPrimaryButton,
.teamHubSummaryActions .teamHubSecondaryButton {
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.teamHubSummaryActions .teamHubPrimaryButton > span:not(.cuiButtonSpinner),
.teamHubSummaryActions .teamHubSecondaryButton > span:not(.cuiButtonSpinner) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.teamHubSummaryActions svg {
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  .teamHubSummaryCard,
  .teamHubMainGrid,
  .teamHubBottomGrid {
    grid-template-columns: 1fr;
  }

  .teamHubSummaryActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 0;
    border-top: 1px solid var(--team-line);
    padding: 14px 0 0;
  }

  .teamHubMetricGrid.cuiMetricGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teamHubRoleCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .teamHubPage .cuiResourceHeader {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

  .teamHubPage .cuiResourceTitle {
    font-size: 18px;
  }

  .teamHubPage .cuiResourceActions,
  .teamHubResourceMeta {
    width: 100%;
  }

  .teamHubResourceMeta {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .teamHubSummaryActions {
    grid-template-columns: 1fr;
  }

  .teamHubResourceMeta .teamHubTeamLogo,
  .teamHubTeamLogo {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .teamHubMetricGrid.cuiMetricGrid,
  .teamHubTableToolbar,
  .teamHubInlineFields,
  .teamHubInlineFields.compact,
  .teamHubInlineFields.three,
  .teamHubProgressSteps,
  .teamHubRoleCards {
    grid-template-columns: 1fr;
  }

  .teamHubPrimaryButton,
  .teamHubSecondaryButton,
  .teamHubLinkButton,
  .teamHubDangerLink {
    width: 100%;
  }

  .teamHubCommandTitle {
    width: 100%;
  }

  .teamHubCommandMeta > span:not(.teamHubRoleBadge) {
    max-width: 100%;
  }

  .teamHubProgressSteps {
    gap: 8px;
  }

  .teamHubProgress article + article {
    border-left: 0;
    border-top: 1px solid var(--team-line);
    margin-left: 0;
    padding-left: 0;
    padding-top: 8px;
  }

  .teamHubInvitationItem,
  .teamHubJoinRequestItem,
  .teamHubRecentList article,
  .teamHubAuditStrip {
    grid-template-columns: 1fr;
  }

  .teamHubInvitationItem .cuiDataListItemActions,
  .teamHubJoinRequestItem .cuiDataListItemActions {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: stretch;
  }

  .teamHubEmbeddedJoinRequests .teamHubJoinRequestItem {
    grid-template-columns: 1fr;
  }

  .teamHubEmbeddedJoinRequests .teamHubJoinRequestItem .cuiDataListItemActions {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: stretch;
  }

  .teamHubEmbeddedJoinRequests .teamHubJoinRequestActions {
    width: 100%;
    display: grid;
  }

  .teamHubEmbeddedJoinRequests .teamHubJoinRequestActions .teamHubPrimaryButton,
  .teamHubEmbeddedJoinRequests .teamHubJoinRequestActions .teamHubDangerLink {
    width: 100%;
  }

  .teamHubInvitationStatusStack,
  .teamHubJoinRequestActions {
    justify-content: flex-start;
  }
}

/* ===== merged from develop: 队友页面基础样式(shop/creator 等),Phase 2 组件化时收敛 ===== */

.accountSettingsRail,
.accountSettingsMain,
.accountSettingsRows,
.accountSettingsRailMeta,
.accountSettingsRailNav {
  display: grid;
}

/* Open API 用量展示（P1-a）：密钥用量内联块 + 按日用量列表。 */

.openapiKeyUsage {
  display: grid;
  gap: 8px;
}

.openapiUsageBuckets {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.openapiUsageBuckets li {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-2);
}

.openapiUsageBuckets li strong {
  color: var(--text-1);
  font-size: 13px;
}

.openapiUsageBuckets li em {
  color: #67e8f9;
  font-style: normal;
}

/* Open API 控制台（@compass/ui 重建）：标签页 / 表单 / 凭证 / Webhook 列表的表现层样式。 */

.openapiRequestIdNote {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--text-3);
  font-size: 12px;
}

.openapiRequestIdNote code,
.openapiCodeText {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text-2);
}

.openapiErrorActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--text-3);
  font-size: 12px;
}

.openapiTabBar {
  width: min(100%, 384px);
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  overflow-x: auto;
}

.openapiSegmented {
  width: 100%;
  max-width: 100%;
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.openapiSegmentedButton {
  min-width: 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
}

.openapiTabStack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.openapiLogPager {
  margin-top: 12px;
}

.openapiLogPageSize {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.openapiLogPageSize span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}

.openapiFormDivider {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-dark);
}

.openapiFormRow {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.openapiField {
  min-width: 0;
}

.openapiFieldWide {
  grid-column: 1 / -1;
}

.openapiFormActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.openapiFormActionsStart {
  justify-content: flex-start;
}

.openapiScopeGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.openapiScopeCard {
  min-width: 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 10px 12px;
}

.openapiScopeCard.is-disabled {
  opacity: 0.64;
}

.openapiScopeCardBody {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.openapiScopeCardBody strong {
  color: var(--text-1);
  font-size: 13px;
}

.openapiScopeCardBody small {
  color: var(--text-3);
  font-size: 11px;
}

.openapiScopeTags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.openapiSecretReveal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #67e8f9;
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.08);
  padding: 12px 14px;
}

.openapiSecretRevealTag {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 600;
}

.openapiSecretRevealValue {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: #67e8f9;
  overflow-wrap: anywhere;
}

.openapiSecretRevealHint {
  color: var(--text-3);
  font-size: 12px;
}

.openapiKeyList,
.openapiWebhookList {
  display: grid;
  gap: 10px;
}

.openapiKeyItem,
.openapiWebhookItem {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.openapiKeyItemBadges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.openapiKeyMetricRow {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.openapiKeyMetricRow span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.openapiKeyMetricRow strong {
  color: var(--text-1);
  font-size: 13px;
}

.openapiKeyMetricRow em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
}

.openapiInlineStats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--text-2);
  font-size: 12px;
}

.openapiInlineStats strong {
  color: var(--text-1);
}

.openapiMutedNote {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
}

.openapiEventGrid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.openapiWebhookMeta {
  color: var(--text-3);
  font-size: 12px;
}

.openapiActionBar {
  display: flex;
  justify-content: flex-end;
}

.openapiDocsLink,
.openapiDocsPrimaryButton {
  min-height: 40px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(20, 184, 166, 0.42);
  border-radius: 8px;
  background: linear-gradient(135deg, #14b8a6, #38bdf8);
  color: #06151b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  padding: 0 16px;
  white-space: nowrap;
}

.openapiDocsLink:hover,
.openapiDocsPrimaryButton:hover:not(:disabled) {
  filter: brightness(1.04);
}

.openapiDocsPrimaryButton:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.openapiDocsPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 12px;
  color: var(--text-1);
}

.openapiDocsBackBar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.openapiDocsBackLink {
  min-height: 36px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(20, 184, 166, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #0f766e;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  padding: 0 14px 0 12px;
  box-shadow: 0 8px 22px rgba(15, 118, 110, 0.08);
}

.openapiDocsBackLink:hover {
  border-color: rgba(20, 184, 166, 0.58);
  background: #ecfeff;
  color: #0891b2;
}

.openapiDocsBackLink:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.45);
  outline-offset: 2px;
}

.openapiDocsMuted {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}

.openapiDocsKicker {
  color: #0f9f8f;
  font-size: 12px;
  font-weight: 800;
}

.openapiDocsInfoBand > div {
  min-width: 0;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.openapiDocsInfoBand svg {
  flex: 0 0 auto;
  color: #0f9f8f;
}

.openapiDocsInfoBand span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
}

.openapiDocsInfoBand strong {
  min-width: 0;
  color: var(--text-1);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: normal;
}

.openapiDocsLayout {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(320px, 380px);
  align-items: start;
}

.openapiDocsSidebar,
.openapiDocsDebugPanel {
  position: sticky;
  top: 16px;
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.openapiDocsSidebarTitle,
.openapiDocsDebugParamsTitle {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
}

.openapiDocsEndpointList {
  display: grid;
  gap: 8px;
}

.openapiDocsEndpointItem {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--text-1);
  text-align: left;
  padding: 10px;
}

.openapiDocsEndpointItem.is-active {
  border-color: rgba(20, 184, 166, 0.62);
  background: rgba(20, 184, 166, 0.12);
}

.openapiDocsEndpointMethod {
  border-radius: 6px;
  background: rgba(20, 184, 166, 0.16);
  color: #0f766e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 6px;
}

.openapiDocsEndpointText {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.openapiDocsEndpointText strong,
.openapiDocsEndpointText small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openapiDocsEndpointText strong {
  font-size: 13px;
}

.openapiDocsEndpointText small,
.openapiDocsSidebarNote {
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.6;
}

.openapiDocsDetail {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.openapiDocsDetailHeader,
.openapiDocsSection {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 16px;
}

.openapiDocsDetailHeader {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.openapiDocsDetailHeader h1,
.openapiDocsSection h2 {
  margin: 0;
  color: var(--text-1);
}

.openapiDocsDetailHeader h1 {
  margin-top: 4px;
  font-size: 24px;
}

.openapiDocsDetailHeader p {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}

.openapiDocsMethodPath {
  min-width: 220px;
  display: grid;
  gap: 6px;
  justify-items: start;
  border: 1px solid rgba(56, 189, 248, 0.26);
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.08);
  padding: 10px;
}

.openapiDocsMethodPath span {
  color: #0284c7;
  font-size: 12px;
  font-weight: 800;
}

.openapiDocsMethodPath code,
.openapiDocsParamRow code,
.openapiDocsHeaderList code,
.openapiDocsErrorMeta strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.openapiDocsMethodPath code {
  max-width: 100%;
  color: var(--text-1);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.openapiDocsInfoBand {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  padding: 10px 12px;
}

.openapiDocsInfoBand > div + div {
  padding-left: 18px;
  border-left: 1px solid rgba(15, 23, 42, 0.1);
}

.openapiDocsSection {
  display: grid;
  gap: 12px;
}

.openapiDocsSection h2 {
  font-size: 17px;
}

.openapiDocsGuideGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.openapiDocsGuideItem {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: 8px;
  background: rgba(20, 184, 166, 0.07);
  padding: 10px 12px;
}

.openapiDocsGuideItem span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
}

.openapiDocsGuideItem strong {
  min-width: 0;
  color: var(--text-1);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.openapiDocsBulletList {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.65;
}

.openapiDocsHeaderTable,
.openapiDocsFaqList {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
}

.openapiDocsHeaderTable > div,
.openapiDocsFaqList > div {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

.openapiDocsHeaderTable > div {
  grid-template-columns: minmax(150px, 0.6fr) minmax(0, 1fr);
}

.openapiDocsHeaderTable > div + div,
.openapiDocsFaqList > div + div {
  border-top: 1px solid var(--line-dark);
}

.openapiDocsHeaderTable code {
  color: var(--text-1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.openapiDocsHeaderTable span,
.openapiDocsFaqList span {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.openapiDocsFaqList strong {
  color: var(--text-1);
  font-size: 13px;
}

.openapiDocsParamTable {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
}

.openapiDocsParamHead,
.openapiDocsParamRow {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(120px, 0.8fr) minmax(90px, 0.5fr) minmax(0, 2fr);
  align-items: center;
  padding: 10px 12px;
}

.openapiDocsParamHead {
  background: rgba(15, 23, 42, 0.04);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
}

.openapiDocsParamRow + .openapiDocsParamRow {
  border-top: 1px solid var(--line-dark);
}

.openapiDocsParamRow {
  color: var(--text-2);
  font-size: 12px;
}

.openapiDocsCodeBlock {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: #0f172a;
}

.openapiDocsCodeHeader {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px 0 12px;
}

.openapiDocsCopyButton {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(45, 212, 191, 0.38);
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.12);
  color: #ccfbf1;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 0 10px;
  white-space: nowrap;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.openapiDocsCopyButton:hover {
  border-color: rgba(94, 234, 212, 0.72);
  background: rgba(20, 184, 166, 0.2);
  color: #f0fdfa;
  transform: translateY(-1px);
}

.openapiDocsCopyButton.is-copied {
  border-color: rgba(134, 239, 172, 0.72);
  background: rgba(34, 197, 94, 0.18);
  color: #dcfce7;
}

.openapiDocsCodeBlock pre {
  max-height: 360px;
  margin: 0;
  overflow: auto;
  padding: 12px;
}

.openapiDocsCodeBlock code {
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre;
}

.openapiDocsIconButton {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-2);
}

.openapiDocsErrorList {
  display: grid;
  gap: 12px;
}

.openapiDocsErrorItem {
  display: grid;
  gap: 8px;
}

.openapiDocsErrorMeta,
.openapiDocsDebugResultMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--text-2);
  font-size: 12px;
}

.openapiDocsStatus {
  min-width: 42px;
  display: inline-flex;
  justify-content: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
}

.openapiDocsStatus-success {
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}

.openapiDocsStatus-warning {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.openapiDocsStatus-danger {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

.openapiDocsStatus-neutral {
  background: rgba(100, 116, 139, 0.14);
  color: #475569;
}

.openapiDocsDebugHeader {
  display: grid;
  gap: 4px;
}

.openapiDocsDebugHeader strong {
  color: var(--text-1);
  font-size: 17px;
}

.openapiDocsDebugHeader code {
  color: var(--text-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.openapiDocsDebugForm,
.openapiDocsDebugParams,
.openapiDocsDebugResult {
  display: grid;
  gap: 12px;
}

.openapiDocsField {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.openapiDocsField > span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
}

.openapiDocsField b {
  color: #dc2626;
}

.openapiDocsField input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-1);
  font-size: 13px;
  padding: 0 12px;
}

.openapiDocsField small {
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.5;
}

.openapiDocsSecretInput {
  position: relative;
}

.openapiDocsSecretInput input {
  padding-right: 48px;
}

.openapiDocsSecretToggle {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(236, 253, 245, 0.9));
  color: #0f766e;
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.12);
}

.openapiDocsSecretToggle:hover {
  border-color: rgba(20, 184, 166, 0.5);
  background: #ecfeff;
  color: #0891b2;
}

.openapiDocsSecretToggle:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.45);
  outline-offset: 2px;
}

.openapiDocsDebugNotice,
.openapiDocsDebugError {
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  padding: 10px 12px;
}

.openapiDocsDebugNotice {
  border: 1px solid rgba(56, 189, 248, 0.24);
  background: rgba(56, 189, 248, 0.08);
  color: var(--text-2);
}

.openapiDocsDebugError {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(239, 68, 68, 0.26);
  background: rgba(239, 68, 68, 0.08);
  color: #991b1b;
}

.openapiDocsDebugError code,
.openapiDocsDebugError small {
  color: #7f1d1d;
}

.openapiDocsHeaderList {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
}

.openapiDocsHeaderList > div {
  min-width: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1fr);
  color: var(--text-2);
  font-size: 12px;
  padding: 9px 10px;
}

.openapiDocsHeaderList > div + div {
  border-top: 1px solid var(--line-dark);
}

.openapiDocsHeaderList span,
.openapiDocsHeaderList code {
  min-width: 0;
  overflow-wrap: anywhere;
}

.openapiDocsSpin {
  animation: openapiDocsSpin 0.8s linear infinite;
}

@keyframes openapiDocsSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 720px) {
  .openapiFormRow {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1280px) {
  .openapiDocsLayout {
    grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
  }

  .openapiDocsDebugPanel {
    position: static;
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .openapiDocsDetailHeader,
  .openapiDocsLayout {
    grid-template-columns: minmax(0, 1fr);
  }

  .openapiDocsMethodPath {
    min-width: 0;
  }

  .openapiDocsSidebar {
    position: static;
  }

  .openapiDocsInfoBand {
    gap: 8px 14px;
  }

  .openapiDocsInfoBand > div + div {
    border-left: 0;
    padding-left: 0;
  }

  .openapiDocsGuideGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .openapiActionBar {
    justify-content: stretch;
  }

  .openapiDocsLink,
  .openapiDocsPrimaryButton {
    width: 100%;
  }

  .openapiDocsDetailHeader,
  .openapiDocsSection,
  .openapiDocsSidebar,
  .openapiDocsDebugPanel {
    padding: 12px;
  }

  .openapiDocsParamHead {
    display: none;
  }

  .openapiDocsParamRow,
  .openapiDocsHeaderTable > div,
  .openapiDocsHeaderList > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== 恢复:ChatBI 原型页样式(guliym bea24ad 回补,antd-free) ===== */

/* ===== ChatBI 原型样式(从 9197082 找回,合并时丢失) ===== */

.chatbiProtoPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
  color: var(--text-1);
}

.chatbiProtoHeader,
.chatbiProtoPipeline,
.chatbiProtoPanel,
.chatbiProtoAskPanel {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.12);
}

.chatbiProtoHeader {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
}

.chatbiProtoHeader h1,
.chatbiProtoHeader p,
.chatbiProtoHeader strong,
.chatbiProtoHeader span,
.chatbiProtoHeader em,
.chatbiProtoPanel h2,
.chatbiProtoPanel p {
  margin: 0;
}

.chatbiProtoHeader h1 {
  margin-top: 10px;
  color: var(--text-1);
  font-size: 34px;
  line-height: 1.16;
  letter-spacing: 0;
}

.chatbiProtoHeader p {
  max-width: 780px;
  margin-top: 10px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.7;
}

.chatbiProtoEyebrow,
.chatbiProtoSectionKicker,
.chatbiProtoPanelTitle,
.chatbiProtoActionRow,
.chatbiProtoSqlFooter,
.chatbiProtoChartTypeList,
.chatbiProtoToolbar,
.chatbiProtoInsightTabs,
.chatbiProtoActionCards {
  display: flex;
  align-items: center;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/compat/web-tail/web-tail-006.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Ordered read-only compatibility shard 006. Do not edit. */

.chatbiProtoEyebrow,
.chatbiProtoSectionKicker {
  width: fit-content;
  gap: 8px;
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 900;
}

.chatbiProtoContext {
  width: 304px;
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 16px;
}

.chatbiProtoContext span,
.chatbiProtoContext em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.chatbiProtoContext strong {
  color: var(--text-1);
  font-size: 16px;
}

.chatbiProtoPipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.chatbiProtoPipelineStep {
  min-width: 0;
  min-height: 68px;
  position: relative;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: inherit;
  padding: 12px 36px 12px 12px;
  text-align: left;
}

.chatbiProtoPipelineStep span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.chatbiProtoPipelineStep strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbiProtoPipelineStep small,
.chatbiProtoPipelineStep em {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbiProtoPipelineStep em {
  width: fit-content;
  border-radius: 999px;
  background: var(--tag-bg);
  padding: 3px 7px;
}

.chatbiProtoPipelineStep svg {
  position: absolute;
  right: 12px;
  top: 26px;
  color: var(--text-3);
}

.chatbiProtoPipelineStep:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.chatbiProtoPipelineStep.current {
  border-color: var(--primary-border-strong);
  background: linear-gradient(135deg, var(--primary-active-bg), var(--primary-soft));
}

.chatbiProtoPipelineStep.current em {
  background: var(--primary-active-bg);
  color: var(--primary-light);
}

.chatbiProtoPipelineStep.done {
  border-color: rgba(16, 185, 129, 0.36);
}

.chatbiProtoPipelineStep.done em {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
}

.chatbiProtoPipelineStep.review {
  border-color: rgba(245, 158, 11, 0.36);
}

.chatbiProtoPipelineStep.review em {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
}

.chatbiProtoPipelineStep.ready {
  border-color: var(--primary-border);
}

.chatbiProtoPipelineStep.waiting {
  opacity: 0.72;
}

.chatbiProtoAskPanel,
.chatbiProtoIntentGrid,
.chatbiProtoSqlSafetyGrid,
.chatbiProtoResultPanel,
.chatbiProtoInsightPanel {
  scroll-margin-top: 16px;
}

.chatbiProtoMainGrid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
}

.chatbiProtoSidebar,
.chatbiProtoComposer,
.chatbiProtoResultArea,
.chatbiProtoBottomGrid {
  display: grid;
  gap: 16px;
}

.chatbiProtoPanel,
.chatbiProtoAskPanel {
  min-width: 0;
  padding: 16px;
}

.chatbiProtoPanelTitle {
  gap: 8px;
  margin-bottom: 14px;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
}

.chatbiProtoPanelTitle.spaceBetween {
  justify-content: space-between;
}

.chatbiProtoPanelTitle.spaceBetween > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chatbiProtoPanelTitle em {
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 5px 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.chatbiProtoPanelTitle button {
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 850;
}

.chatbiProtoHistoryList,
.chatbiProtoSuggestionList,
.chatbiProtoRuleList,
.chatbiProtoNoticeList,
.chatbiProtoSafetyList {
  display: grid;
  gap: 10px;
}

.chatbiProtoHistoryItem,
.chatbiProtoHistoryItem > button,
.chatbiProtoSuggestionList button {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 10px;
  text-align: left;
}

.chatbiProtoHistoryItem {
  display: grid;
  gap: 5px;
}

.chatbiProtoHistoryItem > button {
  display: grid;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 0;
}

.chatbiProtoHistoryItem.active,
.chatbiProtoHistoryItem:hover,
.chatbiProtoHistoryItem > button:hover,
.chatbiProtoSuggestionList button:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.chatbiProtoHistoryItem span,
.chatbiProtoHistoryItem em,
.chatbiProtoHistoryItem small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbiProtoHistoryItem span {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 850;
}

.chatbiProtoHistoryItem em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.chatbiProtoHistoryItem small {
  width: fit-content;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--text-3);
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 850;
}

.chatbiProtoHistoryActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chatbiProtoHistoryActions button {
  min-height: 24px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
}

.chatbiProtoHistoryActions button:hover {
  border-color: var(--primary-border);
  color: var(--text-1);
}

.chatbiProtoHistoryActions button.active {
  border-color: var(--primary-border);
  background: var(--primary-active-bg);
  color: var(--text-1);
}

.chatbiProtoSuggestionList button {
  font-size: 12px;
  line-height: 1.5;
}

.chatbiProtoRuleList span,
.chatbiProtoNoticeList span {
  display: block;
  border-left: 2px solid var(--primary-border);
  color: var(--text-2);
  padding-left: 10px;
  font-size: 12px;
  line-height: 1.5;
}

.chatbiProtoAskTop {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.chatbiProtoAskTop h2 {
  margin: 8px 0 0;
  color: var(--text-1);
  font-size: 22px;
  letter-spacing: 0;
}

.chatbiProtoScenarioSwitch {
  flex: 0 0 auto;
  display: inline-grid;
  grid-auto-flow: column;
  gap: 6px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 4px;
}

.chatbiProtoScenarioSwitch button,
.chatbiProtoInsightTabs button {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
}

.chatbiProtoScenarioSwitch button.active,
.chatbiProtoInsightTabs button.active {
  border-color: var(--primary-border);
  background: var(--primary-active-bg);
  color: var(--text-1);
}

.chatbiProtoQuestionBox {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.chatbiProtoQuestionBox span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.chatbiProtoQuestionBox textarea {
  min-height: 118px;
  resize: vertical;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-1);
  padding: 14px;
  font: inherit;
  line-height: 1.55;
  outline: none;
}

.chatbiProtoQuestionBox textarea:focus {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.chatbiProtoActionRow {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.chatbiProtoActionRow span,
.chatbiProtoSqlFooter span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}

.chatbiProtoPrimaryButton,
.chatbiProtoSecondaryButton,
.chatbiProtoIconButton,
.chatbiProtoSqlFooter button,
.chatbiProtoToolbar button,
.chatbiProtoChartTypeList button,
.chatbiProtoActionCards button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-weight: 900;
}

.chatbiProtoPrimaryButton {
  border: 0;
  background: var(--grad);
  color: #ffffff;
  padding: 0 14px;
}

.chatbiProtoIconButton,
.chatbiProtoSecondaryButton,
.chatbiProtoSqlFooter button,
.chatbiProtoToolbar button,
.chatbiProtoChartTypeList button,
.chatbiProtoActionCards button {
  border: 1px solid var(--line-dark);
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 0 10px;
}

.chatbiProtoIconButton,
.chatbiProtoToolbar button,
.chatbiProtoChartTypeList button {
  width: 36px;
  padding: 0;
}

.chatbiProtoSecondaryButton {
  width: auto;
  padding: 0 12px;
}

.chatbiProtoIconButton.active,
.chatbiProtoToolbar button.active {
  border-color: var(--primary-border);
  background: var(--primary-active-bg);
  color: var(--text-1);
}

.chatbiProtoQueryState {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 10px;
}

.chatbiProtoQueryState span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 900;
}

.chatbiProtoQueryState strong,
.chatbiProtoQueryState em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.chatbiProtoQueryState p {
  flex: 1 1 100%;
  color: var(--danger);
  font-size: 12px;
  line-height: 1.5;
}

.chatbiProtoQueryState.error {
  border-color: rgba(239, 68, 68, 0.34);
  background: rgba(239, 68, 68, 0.08);
}

.chatbiProtoOrchestrationGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 16px;
}

.chatbiProtoContextFlow,
.chatbiProtoExecutionGrid,
.chatbiProtoBusinessChecklist {
  display: grid;
  gap: 10px;
}

.chatbiProtoContextFlow span,
.chatbiProtoExecutionGrid span,
.chatbiProtoBusinessChecklist span {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 10px;
  font-size: 12px;
  line-height: 1.5;
}

.chatbiProtoBusinessChecklist span {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.chatbiProtoBusinessChecklist svg {
  color: var(--success);
}

.chatbiProtoExecutionGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chatbiProtoExecutionGrid small {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.chatbiProtoExecutionGrid strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbiProtoIntentGrid,
.chatbiProtoSqlSafetyGrid,
.chatbiProtoResultArea,
.chatbiProtoBottomGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.chatbiProtoSqlSafetyGrid {
  grid-template-columns: minmax(0, 1.16fr) minmax(360px, 0.84fr);
}

.chatbiProtoResultArea {
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.8fr);
}

.chatbiProtoIntentCards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.chatbiProtoIntentCards span {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 10px;
}

.chatbiProtoIntentCards small {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.chatbiProtoIntentCards strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbiProtoSensitivity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
}

.chatbiProtoSensitivity p {
  grid-column: 2;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.chatbiProtoStatusDot {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 999px;
  margin-top: 4px;
}

.chatbiProtoStatusDot.green {
  background: var(--success);
}

.chatbiProtoStatusDot.amber {
  background: var(--warning);
}

.chatbiProtoStatusDot.red {
  background: var(--danger);
}

.chatbiProtoStatusDot.cyan {
  background: var(--accent);
}

.chatbiProtoSqlPanel pre {
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(5, 7, 20, 0.62);
  color: #dbeafe;
  padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
}

[data-theme='light'] .chatbiProtoSqlPanel pre {
  background: #0f172a;
  color: #e2e8f0;
}

.chatbiProtoSqlFooter {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.chatbiProtoSafetySummary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  border: 1px solid rgba(16, 185, 129, 0.32);
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.08);
  padding: 12px;
}

.chatbiProtoSafetySummary svg {
  grid-row: span 2;
  color: var(--success);
}

.chatbiProtoSafetySummary strong {
  color: var(--text-1);
}

.chatbiProtoSafetySummary span {
  color: var(--text-3);
  font-size: 12px;
}

.chatbiProtoSafetyList {
  margin-top: 12px;
}

.chatbiProtoSafetyList div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 10px;
}

.chatbiProtoSafetyList p {
  grid-column: 2 / 4;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.55;
}

.chatbiProtoSafetyList em {
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.chatbiProtoChartHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.chatbiProtoChartHeader h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 21px;
}

.chatbiProtoChartHeader p {
  margin: 6px 0 0;
  color: var(--text-3);
  font-size: 12px;
}

.chatbiProtoChartTypeList,
.chatbiProtoToolbar,
.chatbiProtoInsightTabs {
  gap: 6px;
}

.chatbiProtoChartTypeList button.active,
.chatbiProtoChartTypeList button:hover,
.chatbiProtoToolbar button:hover {
  border-color: var(--primary-border);
  background: var(--primary-active-bg);
  color: var(--text-1);
}

.chatbiProtoBars {
  height: 320px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(180deg, transparent 0, transparent 24%, var(--row-line) 25%, transparent 26%),
    linear-gradient(180deg, transparent 0, transparent 49%, var(--row-line) 50%, transparent 51%),
    linear-gradient(180deg, transparent 0, transparent 74%, var(--row-line) 75%, transparent 76%),
    var(--surface-panel-hover);
  padding: 24px;
}

.chatbiProtoBars span {
  min-height: 24px;
  display: flex;
  align-items: end;
}

.chatbiProtoBars i {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, var(--accent), var(--primary-light));
}

.chatbiProtoBars.lineMode {
  align-items: center;
}

.chatbiProtoBars.lineMode span {
  align-items: center;
  min-height: 100%;
}

.chatbiProtoBars.lineMode i {
  height: 8px;
  border-radius: 999px;
}

.chatbiProtoPieWrap {
  min-height: 320px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 24px;
}

.chatbiProtoPie {
  width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#14b8a6 0 40%, #6366f1 40% 65%, #f59e0b 65% 83%, #ef4444 83% 94%, #64748b 94% 100%);
  box-shadow: inset 0 0 0 28px var(--surface-panel-hover);
}

.chatbiProtoLegend {
  display: grid;
  gap: 10px;
}

.chatbiProtoLegend span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
}

.chatbiProtoLegend i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
}

.chatbiProtoMiniTableRow strong,
.chatbiProtoMiniTableRow span,
.chatbiProtoMiniTableRow em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbiProtoInsightSummary {
  display: grid;
  gap: 8px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.08));
  padding: 14px;
}

.chatbiProtoInsightSummary span,
.chatbiProtoInsightSummary em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.chatbiProtoInsightSummary strong {
  color: var(--text-1);
  line-height: 1.55;
}

.chatbiProtoInsightBusinessGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.chatbiProtoInsightBusinessGrid span {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 10px;
}

.chatbiProtoInsightBusinessGrid small,
.chatbiProtoInsightBusinessGrid em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.45;
}

.chatbiProtoInsightBusinessGrid strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-1);
  font-size: 13px;
  line-height: 1.4;
}

.chatbiProtoInsightTrace {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chatbiProtoInsightTrace span,
.chatbiProtoInsightTrace button,
.chatbiProtoTraceFooter span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--text-3);
  padding: 0 9px;
  font-size: 11px;
  font-weight: 850;
}

.chatbiProtoInsightTrace button {
  cursor: pointer;
}

.chatbiProtoInsightTrace button:hover,
.chatbiProtoInsightMetaGrid button:hover,
.chatbiProtoStageItem:hover,
.chatbiProtoFeedbackPanel button:hover,
.chatbiProtoRecommendationList button:hover {
  border-color: var(--primary-border);
  background: var(--theme-switcher-active-bg);
  color: var(--text-1);
}

.chatbiProtoInsightTrace .chatbiProtoTraceBadge.fresh {
  border-color: rgba(245, 158, 11, 0.36);
  color: var(--warning);
}

.chatbiProtoInsightTrace .chatbiProtoTraceBadge.cached {
  border-color: rgba(6, 182, 212, 0.32);
  color: var(--accent);
}

.chatbiProtoInsightMetaGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.chatbiProtoInsightMetaGrid span,
.chatbiProtoInsightMetaGrid button,
.chatbiProtoTaskGrid span {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: inherit;
  padding: 9px;
  text-align: left;
}

.chatbiProtoInsightMetaGrid small,
.chatbiProtoTaskGrid small {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 850;
}

.chatbiProtoInsightMetaGrid strong,
.chatbiProtoTaskGrid strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-1);
  font-size: 12px;
  line-height: 1.35;
}

.chatbiProtoInsightMetaGrid button.active,
.chatbiProtoStageItem.active,
.chatbiProtoFeedbackPanel button.active,
.chatbiProtoRecommendationList button.active {
  border-color: var(--primary-border-strong);
  background: var(--primary-active-bg);
}

.chatbiProtoStageList {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.chatbiProtoStageItem {
  display: grid;
  grid-template-columns: auto minmax(86px, 0.42fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: inherit;
  padding: 8px 10px;
  text-align: left;
}

.chatbiProtoStageItem strong {
  color: var(--text-1);
  font-size: 12px;
}

.chatbiProtoStageItem span:not(.chatbiProtoStatusDot) {
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.45;
}

.chatbiProtoSelectionHint {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  padding: 10px;
}

.chatbiProtoSelectionHint span {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
}

.chatbiProtoSelectionHint strong {
  color: var(--text-1);
}

.chatbiProtoInsightTabs {
  margin-top: 14px;
}

.chatbiProtoInsightDetail {
  min-height: 116px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 14px;
}

.chatbiProtoInsightDetail svg {
  color: var(--primary-light);
}

.chatbiProtoInsightDetail.anomaly svg {
  color: var(--warning);
}

.chatbiProtoInsightDetail p {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}

.chatbiProtoAlertCard {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: inherit;
  padding: 12px;
  text-align: left;
  width: 100%;
}

.chatbiProtoAlertHead {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chatbiProtoAlertCard strong {
  color: var(--text-1);
  font-size: 13px;
}

.chatbiProtoAlertMeta {
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.55;
}

.chatbiProtoAlertCard em {
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
  line-height: 1.55;
}

.chatbiProtoAlertCard.red {
  border-color: rgba(239, 68, 68, 0.34);
}

.chatbiProtoAlertCard.red svg {
  color: var(--danger);
}

.chatbiProtoAlertCard.amber {
  border-color: rgba(245, 158, 11, 0.34);
}

.chatbiProtoAlertCard.amber svg {
  color: var(--warning);
}

.chatbiProtoAlertCard.green svg {
  color: var(--success);
}

.chatbiProtoActionCards {
  gap: 8px;
  margin-top: 12px;
}

.chatbiProtoActionCards button {
  width: 100%;
  min-width: 0;
}

.chatbiProtoTaskPanel,
.chatbiProtoFeedbackPanel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
}

.chatbiProtoTaskGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.chatbiProtoTaskPanel p,
.chatbiProtoTaskPanel em {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.chatbiProtoTaskPanel em {
  color: var(--success);
  font-style: normal;
  font-weight: 850;
}

.chatbiProtoFeedbackPanel strong {
  color: var(--text-1);
  font-size: 13px;
}

.chatbiProtoFeedbackPanel div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chatbiProtoFeedbackPanel button,
.chatbiProtoRecommendationList button,
.chatbiProtoCreateTaskButton {
  min-height: 30px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--text-2);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
}

.chatbiProtoFeedbackPanel p {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
}

.chatbiProtoRecommendationList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chatbiProtoCreateTaskButton {
  width: fit-content;
  border-color: var(--primary-border);
  color: var(--text-1);
}

.chatbiProtoTraceFooter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Consumer insights */

.consumerInsightPage {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.consumerInsightFacade {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary-border) 24%, var(--line-dark));
  border-radius: 8px;
  background:
    radial-gradient(circle at 24% 10%, color-mix(in srgb, var(--primary-active-bg) 82%, transparent), transparent 34%),
    radial-gradient(circle at 78% 2%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-panel) 96%, var(--primary-active-bg)), var(--surface-panel));
  box-shadow: var(--shadow-sm);
}

.consumerInsightFacadeInner {
  max-width: 980px;
  display: grid;
  justify-items: center;
  gap: 14px;
  margin: 0 auto;
  padding: 54px 28px 42px;
  text-align: center;
}

.consumerInsightEyebrow,
.consumerInsightPanelHead span,
.consumerSectionHead span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 900;
}

.consumerInsightFacade h1,
.consumerInsightFacade p,
.consumerInsightHero h1,
.consumerInsightHero p,
.consumerInsightPanel h2,
.consumerInsightPanel p,
.consumerSectionHead h2,
.consumerExampleCard h3 {
  margin: 0;
}

.consumerInsightFacade h1 {
  color: var(--text-1);
  font-size: 42px;
  line-height: 1.16;
  letter-spacing: 0;
}

.consumerInsightFacade p {
  max-width: 780px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.75;
}

.consumerInsightSearchShell {
  width: min(820px, 100%);
  min-height: 54px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary-border) 44%, var(--line-dark));
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: 0 16px 36px rgb(0 0 0 / 10%);
}

.consumerPlatformButton,
.consumerSearchButton,
.consumerSectionHead button,
.consumerExampleCard button,
.consumerInsightRange button,
.consumerInsightTabs button,
.consumerInsightPanelHead button,
.consumerActionButtons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.consumerPlatformButton {
  min-width: 112px;
  border: 0;
  border-right: 1px solid var(--line-dark);
  border-radius: 0;
  background: var(--surface-panel);
  color: var(--text-1);
}

.consumerInsightSearchShell input {
  min-width: 0;
  border: 0;
  background: var(--surface-panel);
  color: var(--text-1);
  padding: 0 16px;
  font: inherit;
  outline: none;
}

.consumerInsightSearchShell input::placeholder {
  color: var(--text-3);
}

.consumerSearchButton {
  min-width: 116px;
  border: 0;
  border-radius: 0;
  background: var(--primary);
  color: var(--accent-on-primary, #ffffff);
}

.consumerInsightQuota {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 850;
}

.consumerInsightQuota button {
  border: 0;
  background: transparent;
  color: var(--primary-light);
  font: inherit;
  font-weight: 900;
}

.consumerExampleSection,
.consumerInsightReport,
.consumerInsightHero,
.consumerInsightPanel,
.consumerInsightSummaryGrid article,
.consumerInsightTabs {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-sm);
}

.consumerExampleSection,
.consumerInsightReport {
  padding: 18px;
}

.consumerSectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.consumerSectionHead h2 {
  margin-top: 4px;
  color: var(--text-1);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0;
}

.consumerSectionHead > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.consumerSectionHead button {
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 0 12px;
}

.consumerExampleGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.consumerExampleCard {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
}

.consumerExampleCover {
  position: relative;
  aspect-ratio: 1.38;
  overflow: hidden;
  background: var(--surface-muted);
}

.consumerExampleCover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.consumerExampleCover span {
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 88%, black);
  color: var(--accent-on-primary, #ffffff);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.consumerExampleCard > div:last-child {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.consumerExampleCard em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.consumerExampleCard h3 {
  min-height: 40px;
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0;
}

.consumerExampleCard button {
  width: 100%;
  border-color: color-mix(in srgb, var(--primary-border) 48%, var(--line-dark));
  background: var(--primary-active-bg);
  color: var(--text-1);
}

.consumerInsightReport {
  display: grid;
  gap: 16px;
  scroll-margin-top: 16px;
}

.consumerInsightHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.62fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.consumerInsightHero h1 {
  margin-top: 8px;
  color: var(--text-1);
  font-size: 28px;
  line-height: 1.24;
  letter-spacing: 0;
}

.consumerInsightHero p {
  max-width: 720px;
  margin-top: 8px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.65;
}

.consumerInsightControls {
  display: grid;
  gap: 10px;
}

.consumerInsightControls label {
  display: grid;
  gap: 7px;
}

.consumerInsightControls label span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.consumerInsightControls select {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-1);
  padding: 0 12px;
  font: inherit;
  outline: none;
}

.consumerInsightRange,
.consumerInsightTabs,
.consumerActionButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.consumerInsightRange button,
.consumerInsightTabs button,
.consumerInsightPanelHead button,
.consumerActionButtons button {
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 0 12px;
}

.consumerInsightRange button.active,
.consumerInsightTabs button.active,
.consumerInsightRange button:hover,
.consumerInsightTabs button:hover,
.consumerInsightPanelHead button:hover,
.consumerActionButtons button:hover,
.consumerSectionHead button:hover,
.consumerExampleCard button:hover {
  border-color: var(--primary-border);
  background: var(--primary-active-bg);
  color: var(--text-1);
}

.consumerInsightSummaryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.consumerInsightSummaryGrid article {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.consumerInsightSummaryGrid span,
.consumerInsightSummaryGrid em,
.consumerInsightTag span,
.consumerInsightPanelHead em,
.consumerCompareTable .head,
.consumerCompareTable em,
.consumerQuoteList em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.consumerInsightSummaryGrid strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consumerInsightTabs {
  padding: 8px;
}

.consumerInsightLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

.consumerInsightMain {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.consumerInsightPanel {
  min-width: 0;
  padding: 16px;
}

.consumerInsightPanel.sticky {
  position: sticky;
  top: 14px;
}

.consumerInsightPanelHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.consumerInsightPanelHead.compact {
  margin-bottom: 10px;
}

.consumerInsightPanelHead h2 {
  margin-top: 4px;
  color: var(--text-1);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0;
}

.consumerInsightTwoCol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.consumerInsightList {
  display: grid;
  gap: 10px;
}

.consumerInsightTag {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-left: 3px solid var(--primary-border);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
}

.consumerInsightTag.green {
  border-left-color: var(--success);
}

.consumerInsightTag.red {
  border-left-color: var(--danger);
}

.consumerInsightTag.amber {
  border-left-color: var(--warning);
}

.consumerInsightTag.cyan {
  border-left-color: var(--accent);
}

.consumerInsightTag > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.consumerInsightTag strong,
.consumerCompareTable strong {
  color: var(--text-1);
}

.consumerInsightTag p {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.62;
}

.consumerCompareTable {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
}

.consumerCompareTable > div {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(90px, 0.55fr));
  gap: 12px;
  border-bottom: 1px solid var(--row-line);
  padding: 12px 14px;
}

.consumerCompareTable > div:last-child {
  border-bottom: 0;
}

.consumerCompareTable span {
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consumerQuoteList {
  display: grid;
  gap: 10px;
}

.consumerQuoteList blockquote {
  display: grid;
  gap: 8px;
  margin: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
}

.consumerQuoteList blockquote div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.consumerQuoteList span {
  color: var(--warning);
  font-size: 12px;
  letter-spacing: 0;
}

.consumerQuoteList p,
.consumerActionList li {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.65;
}

.consumerActionList {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

.consumerActionButtons {
  margin-top: 14px;
}

.consumerActionButtons button {
  width: 100%;
}

@media (max-width: 1280px) {
  .consumerExampleGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .consumerInsightHero,
  .consumerInsightLayout {
    grid-template-columns: 1fr;
  }

  .consumerInsightPanel.sticky {
    position: static;
  }
}

@media (max-width: 860px) {
  .consumerInsightFacadeInner {
    padding: 40px 16px 32px;
  }

  .consumerInsightFacade h1 {
    font-size: 32px;
  }

  .consumerInsightSearchShell {
    grid-template-columns: 1fr;
  }

  .consumerPlatformButton,
  .consumerSearchButton {
    min-height: 44px;
    border: 0;
    border-radius: 0;
  }

  .consumerPlatformButton {
    border-bottom: 1px solid var(--line-dark);
  }

  .consumerInsightSearchShell input {
    min-height: 46px;
    text-align: center;
  }

  .consumerSectionHead {
    display: grid;
  }

  .consumerExampleGrid,
  .consumerInsightSummaryGrid,
  .consumerInsightTwoCol {
    grid-template-columns: 1fr;
  }

.consumerCompareTable > div {
    grid-template-columns: minmax(150px, 1fr) repeat(3, minmax(70px, 0.5fr));
  }
}

/* Product detail V2 compatibility */

.fmDetailPage .fmDetailHero {
  grid-template-columns: minmax(190px, 210px) minmax(0, 1fr);
  align-items: stretch;
}

.fmDetailPage .fmGallery {
  display: flex;
  flex-direction: column;
}

.fmDetailPage .fmHeroImage {
  aspect-ratio: auto;
  height: 180px;
}

.fmGalleryRating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.fmGalleryRating .fmStars {
  display: inline-flex;
  gap: 1px;
}

.fmGalleryRating strong {
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.16);
  color: #d97706;
  font-size: 13px;
  font-weight: 800;
  padding: 2px 8px;
}

.fmGalleryReviews {
  color: var(--text-3);
  font-size: 12px;
}

.fmGenVideoBtn {
  width: 100%;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--fm-accent), var(--fm-accent-strong));
  color: #fff;
  font-weight: 700;
  padding: 11px 14px;
}

.fmDetailCard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  background: var(--surface-panel);
  padding: 18px 20px;
}

.fmDetailCardTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.fmDetailTitleWrap {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.fmDetailTitleWrap h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
}

.fmDetailBadges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fmDetailBadges .fmCountry {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}

.fmDetailBadges .fmCountry img {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
}

.fmDetailBadge {
  border: 1px solid color-mix(in srgb, var(--fm-accent) 28%, transparent);
  border-radius: 6px;
  background: var(--fm-accent-soft);
  color: var(--fm-accent);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}

.fmDetailCardIcons {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.fmDetailCardIcons button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.fmDetailCardIcons button:hover {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
}

.fmMetricTiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.fmMetricTile {
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: var(--surface-panel-strong);
  padding: 14px 16px;
}

.fmMetricTile strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-1);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}

.fmMetricTile span {
  display: block;
  margin-top: 6px;
  color: var(--text-3);
  font-size: 12px;
}

.fmMetricTile.tone-gold {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.12);
}

.fmMetricTile.tone-gold strong {
  color: #d97706;
}

.fmMetricTile.tone-pink {
  border-color: rgba(236, 72, 153, 0.28);
  background: rgba(236, 72, 153, 0.1);
}

.fmMetricTile.tone-pink strong {
  color: #db2777;
}

.fmRankIcon {
  font-size: 14px;
  font-style: normal;
}

.fmDetailInfoRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  border-top: 1px solid var(--line-dark);
  padding-top: 14px;
}

.fmDetailInfoRow > div {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.fmDetailInfoRow label {
  color: var(--text-3);
}

.fmDetailInfoRow b {
  color: var(--text-1);
  font-weight: 700;
}

.fmDetailInfoRow .fmPriceNow {
  color: var(--fm-accent);
}

.fmDetailInfoRow s {
  color: var(--text-3);
  font-size: 12px;
}

.fmDetailShop {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: transparent;
  padding: 6px 12px;
  cursor: pointer;
}

.fmDetailShop img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
}

.fmDetailShop strong {
  display: block;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 700;
}

.fmDetailShop em {
  display: block;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
}

.fmDetailTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 2px;
}

.fmDetailTabs button {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--text-2);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s;
}

.fmDetailTabs button:hover {
  color: var(--text-1);
}

.fmDetailTabs button.active {
  color: var(--fm-accent);
  font-weight: 800;
}

.fmDetailTabs button.active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--fm-accent);
}

@media (max-width: 980px) {
  .fmDetailPage .fmDetailHero {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmMetricTiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =============================================================== */

/* ZSYQ shop/competitor final-pass styles merged 2026-07-01       */

/* =============================================================== */

/* STICKY_NAV_REDESIGN_20260628 : clean sticky detail nav (identity | tabs | actions + back-to-top) */

.shopDetailPage .shopDetailStickyPanel {
  display: flex;
  align-items: center;
  gap: 14px;
}

.shopDetailPage .shopDetailStickyLeft {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 260px;
}

.shopDetailPage .shopDetailStickyMeta {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.shopDetailPage .shopDetailStickyMeta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--shop-text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.shopDetailPage .shopDetailStickyMeta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.shopDetailPage .shopDetailStickyTabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.shopDetailPage .shopDetailStickyTabs a {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--shop-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.shopDetailPage .shopDetailStickyTabs a:hover {
  background: var(--shop-bg-soft);
  color: var(--shop-text);
}

.shopDetailPage .shopDetailStickyTabs a.active {
  background: var(--shop-accent);
  color: #ffffff;
}

.shopDetailPage .shopDetailStickyActions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.shopDetailPage .shopDetailStickyActions button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--shop-line);
  border-radius: 9px;
  background: var(--shop-panel, #ffffff);
  color: var(--shop-muted);
  cursor: pointer;
}

.shopDetailPage .shopDetailStickyActions button:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 36%, var(--shop-line));
  color: var(--shop-accent);
}

.shopDetailPage .shopDetailStickyActions button.shopDetailBackTop {
  border-color: var(--shop-accent);
  background: var(--shop-accent);
  color: #ffffff;
}

.shopDetailPage .shopDetailStickyActions button.shopDetailBackTop:hover {
  background: var(--shop-accent-strong);
  color: #ffffff;
}

/* DONUT_LEGEND_REDESIGN_20260628 : balanced donut + compact legend rows */

.shopSearchPage { --shop-pink: var(--shop-accent); }

.shopDetailPage .shopDonutWrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 16px 28px;
}

.shopDetailPage .shopDonutLegend {
  flex: 1 1 210px;
  max-width: 380px;
  min-width: 0;
  align-self: center;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shopDetailPage .shopDonutLegend li {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 7px 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.shopDetailPage .shopDonutLegend li:hover,
.shopDetailPage .shopDonutLegend li.is-active {
  background: var(--shop-bg-soft);
}

.shopDetailPage .shopDonutLegend li > i {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.shopDetailPage .shopDonutLegend li > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 760;
}

.shopDetailPage .shopDonutLegend li > em {
  flex: 0 0 auto;
  width: 44px;
  text-align: right;
  color: var(--shop-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.shopDetailPage .shopDonutLegend li > strong {
  flex: 0 0 auto;
  min-width: 78px;
  text-align: right;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 920;
}

/* === RADAR_REPORT_LAYOUT_FIX_20260628 : 竞品报告生成 header toolbar + generate bar, no overlap === */

.radarPage .radarReportBuilderPanel .radarPanelActions {
  flex: 1 1 100%;
  min-width: 0;
}

.radarPage .radarReportTemplateHeaderActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.radarPage .radarReportTemplateHeaderActions button,
.radarPage .radarReportTemplateHeaderActions label {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

.radarPage .radarReportTemplateHeaderActions label > span {
  pointer-events: none;
}

.radarPage .radarReportTemplateHeaderActions input[type='file'] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.radarPage .radarReportBuilderGrid {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.radarPage .radarReportGenerateBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  padding: 14px 16px;
}

.radarPage .radarReportGenerateBar > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.radarPage .radarReportGenerateBar .radarButton {
  min-width: 150px;
  flex: 0 0 auto;
}

.radarPage .radarReportSourceHeader {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

@media (max-width: 760px) {
  .radarPage .radarReportGenerateBar {
    flex-direction: column;
    align-items: stretch;
  }
  .radarPage .radarReportGenerateBar .radarButton {
    width: 100%;
  }
  .radarPage .radarReportTemplateHeaderActions {
    justify-content: flex-start;
  }
}

/* === RADAR_REPORT_LAYOUT_FIX_20260629 : narrow 生成报告 builder, widen 报告数据概览 rail === */

.radarPage .radarReportTopGrid {
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.58fr);
  gap: 16px;
}

@media (max-width: 1180px) {
  .radarPage .radarReportTopGrid {
    grid-template-columns: 1fr;
  }
}

/* === RADAR_REPORT_RAIL_OVERFLOW_FIX_20260629 : keep right-rail overview content inside its cards === */

.radarPage .radarReportOverviewPanel .radarReportInsightGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
  align-items: stretch;
}

.radarPage .radarReportOverviewPanel .radarReportOverviewCard {
  min-width: 0;
}

.radarPage .radarReportOverviewPanel .radarReportOverviewCard p,
.radarPage .radarReportOverviewPanel .radarReportOverviewCard strong,
.radarPage .radarReportOverviewPanel .radarReportOverviewCard span,
.radarPage .radarReportOverviewPanel .radarReportOverviewCard em {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.radarPage .radarReportOverviewPanel .radarReportOverviewCard.visual {
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.radarPage .radarReportOverviewPanel .radarReportOverviewCard.visual .radarDonut {
  flex: 0 0 auto;
  width: 116px;
  max-width: 116px;
}

.radarPage .radarReportOverviewPanel .radarReportOverviewCard.visual > div:last-child {
  min-width: 0;
}

.radarPage .radarReportOverviewCard.action {
  gap: 12px;
}

.radarPage .radarReportOverviewCard.action > div {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.radarPage .radarReportActionDraftList {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.radarPage .radarReportActionDraftList article {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 8px 10px;
}

.radarPage .radarReportActionDraftList article > i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--radar-line);
}

.radarPage .radarReportActionDraftList article > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.radarPage .radarReportActionDraftList article > div strong {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.4;
}

.radarPage .radarReportActionDraftList article > div span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.35;
}

.radarPage .radarReportActionDraftList article > em {
  flex: 0 0 auto;
  align-self: start;
  white-space: nowrap;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 850;
  font-style: normal;
}

.radarPage .radarReportReadinessCard {
  min-width: 0;
  display: grid;
  gap: 8px;
  border-radius: 12px;
  padding: 12px 14px;
}

.radarPage .radarReportReadinessCard > strong {
  font-size: 24px;
  font-weight: 950;
  line-height: 1.1;
}

.radarPage .radarReportReadinessBars {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.radarPage .radarReportReadinessBars span {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
}

.radarPage .radarReportReadinessBars span em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-size: 12px;
}

.radarPage .radarReportReadinessBars span::before {
  content: '';
  grid-column: 2;
  grid-row: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--radar-line);
}

.radarPage .radarReportReadinessBars span i {
  grid-column: 2;
  grid-row: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--radar-blue);
}

.radarPage .radarReportReadinessBars span b {
  grid-column: 3;
  grid-row: 1;
  text-align: right;
  font-size: 12px;
  font-weight: 900;
}

/* === RADAR_REPORT_3COL_RESTRUCTURE_20260629 :
   顶部三列「生成报告(收窄) | 报告数据概览 | 行动项草稿」;
   概览内部纵向堆叠 + 报告覆盖居中 + 动态圆环 === */

/* 顶部四列:生成报告(收窄,自身高度) | 报告数据概览 | 预警与结论 | 行动项草稿 */

.radarPage .radarReportTopGrid {
  grid-template-columns:
    minmax(0, 0.86fr) minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 0.82fr);
  gap: 16px;
  align-items: start;
}

/* 右侧三列等高、底边对齐;生成报告保持自身较矮高度 */

.radarPage .radarReportOverviewPanel,
.radarPage .radarReportConclusionPanel,
.radarPage .radarReportActionPanel {
  align-self: stretch;
}

/* 生成报告:宽、高都收窄——左列贴顶、内部更紧凑 */

.radarPage .radarReportBuilderPanel {
  min-height: 0;
  align-self: start;
}

.radarPage .radarReportBuilderGrid {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.radarPage .radarReportFormGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.radarPage .radarReportGenerateBar {
  padding: 12px 14px;
  gap: 10px;
}

.radarPage .radarReportGenerateBar .radarButton {
  min-width: 128px;
}

.radarPage .radarReportBuilderPanel .radarSourceChecklist label {
  padding: 9px 10px;
}

/* 报告数据概览:内部改为纵向单列堆叠(覆盖前面的 auto-fit 规则) */

.radarPage .radarReportOverviewPanel .radarReportInsightGrid {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/* 报告覆盖:圆环在上、文字在正下方、整卡居中 */

.radarPage .radarReportOverviewPanel .radarReportOverviewCard.visual {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: 12px;
}

.radarPage .radarReportCoverageBody {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
}

.radarPage .radarReportCoverageBody strong {
  font-size: 16px;
  font-weight: 950;
  color: var(--radar-text);
}

/* 动态圆环(分段悬浮显示数据) */

.radarPage .radarReportCoverageDonut {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
}

.radarPage .radarReportCoverageDonut svg {
  display: block;
  width: 132px;
  height: 132px;
}

.radarPage .radarReportCoverageTrack {
  stroke: var(--radar-line);
  opacity: 0.55;
}

.radarPage .radarReportCoverageArc {
  cursor: pointer;
  transition: stroke-width 0.16s ease, opacity 0.16s ease;
}

.radarPage .radarReportCoverageDonutCenter {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  pointer-events: none;
}

.radarPage .radarReportCoverageDonutCenter strong {
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
  color: var(--radar-text);
}

.radarPage .radarReportCoverageDonutCenter span {
  font-size: 11px;
  font-weight: 850;
  color: var(--radar-muted);
}

.radarPage .radarReportCoverageTip {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid var(--radar-line);
  background: var(--radar-panel);
  box-shadow: 0 8px 22px rgba(33, 72, 128, 0.16);
  padding: 6px 10px;
  pointer-events: none;
}

.radarPage .radarReportCoverageTip i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.radarPage .radarReportCoverageTip b {
  font-size: 12px;
  font-weight: 900;
  color: var(--radar-text);
}

.radarPage .radarReportCoverageTip span {
  font-size: 12px;
  font-weight: 800;
  color: var(--radar-muted);
}

/* 预警与结论:新中间列面板(两张卡纵向堆叠) */

.radarPage .radarReportConclusionPanel {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

/* 行动项草稿:最右列面板 */

.radarPage .radarReportActionPanel {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

/* 响应式:窄屏优雅折叠 */

@media (max-width: 1280px) {
  .radarPage .radarReportTopGrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 880px) {
  .radarPage .radarReportTopGrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .radarPage .radarReportActionPanel {
    grid-column: auto;
  }
  .radarPage .radarReportFormGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Shop detail/search final pass: dropdown filters, rating alignment, taller bars, clickable media rows. */

.shopSearchPage .shopAdvancedSelectGrid {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

.shopSearchPage .shopAdvancedSelectGrid label {
  gap: 6px;
}

.shopSearchPage .shopAdvancedSelectGrid select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-text);
  font: inherit;
  font-size: 13px;
  font-weight: 820;
  outline: 0;
  padding: 0 32px 0 12px;
}

.shopSearchPage .shopAdvancedSelectGrid select:focus {
  border-color: color-mix(in srgb, var(--shop-accent) 58%, var(--shop-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-accent) 14%, transparent);
}

.shopDetailPage .shopDetailRatingCard {
  grid-template-columns: minmax(180px, 1.2fr) 1px repeat(2, minmax(120px, 0.75fr)) minmax(240px, 1.35fr);
  align-items: stretch;
}

.shopDetailPage .shopDetailRatingPair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shopDetailPage .shopDetailRatingPair > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.shopDetailPage .shopDetailBarList {
  gap: 14px;
  margin-top: 10px;
}

.shopDetailPage .shopDetailBarList div {
  grid-template-columns: minmax(120px, 0.9fr) minmax(220px, 2.8fr) minmax(72px, auto);
  gap: 12px;
}

.shopDetailPage .shopDetailBarList i {
  height: 12px;
  min-width: 160px;
}

.shopDetailPage .shopDetailBarList i::before {
  min-width: 26px;
}

.shopDetailPage .shopBarTrack {
  height: 16px;
}

.shopDetailPage .shopDetailChartCard {
  padding: 16px 18px;
}

.shopDetailPage .shopChartCardHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 12px;
  margin-bottom: 14px;
}

.shopDetailPage .shopChartCardHeader .shopDetailRangeButtons {
  justify-self: end;
  margin-top: 4px;
}

.shopDetailPage .shopChartCardHeader .shopDetailRangeButtons button {
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
}

.shopDetailPage .shopDetailChartCard .shopDetailSectionTools {
  margin-top: 8px;
}

.shopDetailPage .shopDetailChartCard .shopDetailSectionTools + .shopDistChart {
  margin-top: 10px;
}

@media (max-width: 720px) {
  .shopDetailPage .shopChartCardHeader {
    grid-template-columns: 1fr;
  }

  .shopDetailPage .shopChartCardHeader .shopDetailRangeButtons,
  .shopDetailPage .shopDistToggle {
    justify-self: start;
  }
}

.shopDetailMediaTable .shopDetailClickableRow {
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.shopDetailMediaTable .shopDetailClickableRow:hover {
  background: color-mix(in srgb, var(--shop-accent) 6%, #ffffff);
}

.shopDetailMediaTable .shopDetailClickableRow:hover .shopDetailEntityLink strong {
  color: var(--shop-accent-strong);
}

.shopDetailEntityLink {
  min-width: 220px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.shopDetailThumb {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-bg-soft);
  color: var(--shop-accent);
  font-size: 14px;
  font-weight: 950;
}

.shopDetailThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shopDetailEntityLink strong {
  max-width: 260px;
  overflow: hidden;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 150ms ease;
}

@media (max-width: 1280px) {
  .shopDetailPage .shopDetailRatingCard,
  .shopDetailPage .shopDetailRatingPair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Creator dropdown restore from latest guliym branch. */

.creatorSearchPanel .creatorSelectPill,
.creatorResultPanel .creatorSelectPill {
  position: relative;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--creator-line);
  border-radius: 8px;
  background: var(--creator-select-bg);
  color: var(--creator-text);
  padding: 0 34px 0 12px;
  font-size: 13px;
  font-weight: 750;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
  z-index: 1;
  cursor: pointer;
}

.creatorSearchPanel .creatorSelectPill.disabled,
.creatorResultPanel .creatorSelectPill.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.creatorSearchPanel .creatorSelectPill.open,
.creatorSearchPanel .creatorSelectPill:focus-within,
.creatorResultPanel .creatorSelectPill.open,
.creatorResultPanel .creatorSelectPill:focus-within {
  border-color: rgba(20, 184, 166, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
  z-index: 45;
}

.creatorSearchPanel .creatorSelectPill > span,
.creatorResultPanel .creatorSelectPill > span {
  flex: 0 0 auto;
  color: var(--creator-muted);
}

.creatorSearchPanel .creatorSelectPill > button,
.creatorResultPanel .creatorSelectPill > button {
  min-width: 68px;
  min-height: 34px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--creator-text);
  font: inherit;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.creatorSearchPanel .creatorSelectPill > button:disabled,
.creatorResultPanel .creatorSelectPill > button:disabled {
  cursor: not-allowed;
}

.creatorSearchPanel .creatorSelectMenu,
.creatorResultPanel .creatorSelectMenu {
  width: max(100%, 168px);
  max-height: 260px;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  display: grid;
  gap: 4px;
  overflow-y: auto;
  border: 1px solid var(--creator-line);
  border-radius: 8px;
  background: var(--creator-popover-bg);
  padding: 6px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.creatorSearchPanel .creatorSelectMenu button,
.creatorResultPanel .creatorSelectMenu button {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--creator-text);
  padding: 0 9px;
  text-align: left;
}

.creatorSearchPanel .creatorSelectMenu button:hover,
.creatorSearchPanel .creatorSelectMenu button:focus-visible,
.creatorResultPanel .creatorSelectMenu button:hover,
.creatorResultPanel .creatorSelectMenu button:focus-visible {
  outline: 0;
  background: var(--surface-panel-strong);
}

.creatorSearchPanel .creatorSelectMenu button.selected,
.creatorResultPanel .creatorSelectMenu button.selected {
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
}

.creatorSearchPanel .creatorSelectMenu button span,
.creatorResultPanel .creatorSelectMenu button span {
  width: 18px;
  display: inline-grid;
  place-items: center;
}

.creatorSearchPanel .creatorSelectMenu button strong,
.creatorResultPanel .creatorSelectMenu button strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Live search result restore from latest liujia branch. */

.liveSearchResultPanel {
  min-width: 0;
  display: grid;
  gap: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

.liveSearchResultPanel > .productListToolbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  padding: 14px 18px;
}

.liveSearchResultPanel > .productListToolbar > div:first-child {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.liveSearchResultPanel > .productListToolbar strong {
  color: var(--text-1);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.2;
}

.liveSearchResultPanel > .productListToolbar em {
  color: var(--text-3);
  font-size: 13px;
  font-style: normal;
  font-weight: 760;
}

.liveSearchResultPanel .liveSearchToolbarActions,
.liveSearchResultPanel .liveSearchActionCell,
.liveSearchResultPanel .productPager .cuiPaginationActions,
.liveSearchResultPanel .productPager .cuiPaginationPages,
.liveSearchResultPanel .liveSearchQuickRanges,
.liveSearchResultPanel .liveSearchDateFields {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.liveSearchResultPanel .liveSearchResultFilters {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  padding: 14px 18px;
}

.liveSearchResultPanel .liveSearchQuickRanges {
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 8px;
}

.liveSearchResultPanel .liveSearchQuickRanges button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  box-shadow: none;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.liveSearchResultPanel .liveSearchQuickRanges button:not(:disabled):hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.liveSearchResultPanel .liveSearchDateFields {
  flex: 1 1 560px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.liveSearchResultPanel .liveSearchDateField {
  min-width: 224px;
  min-height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  box-shadow: none;
  padding: 0 8px 0 12px;
}

.liveSearchResultPanel .liveSearchDateField:focus-within {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.liveSearchResultPanel .liveSearchDateField > span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.liveSearchResultPanel .liveSearchDateField > input {
  min-width: 0;
  width: 100%;
  min-height: 36px;
  border: 0 !important;
  outline: none;
  background: transparent !important;
  color: var(--text-1);
  box-shadow: none !important;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
}

.liveSearchResultPanel .liveSearchCalendar {
  position: relative;
  flex: 0 0 auto;
}

.liveSearchResultPanel .liveSearchCalendarButton {
  width: 28px;
  height: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--tag-bg);
  color: var(--text-2);
  padding: 0;
}

.liveSearchResultPanel .liveSearchCalendarButton:not(:disabled):hover,
.liveSearchResultPanel .liveSearchCalendar.open .liveSearchCalendarButton {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.liveSearchResultPanel .liveSearchTable {
  min-width: 0;
  display: grid;
  padding: 0 18px;
}

.liveSearchResultPanel .liveSearchTable .productListHead {
  min-height: 40px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.liveSearchResultPanel .liveSearchSortButton,
.liveSearchTable .liveSearchSortButton {
  width: auto;
  justify-self: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  padding: 0;
}

.liveSearchResultPanel .liveSearchSortButton span,
.liveSearchTable .liveSearchSortButton span {
  white-space: nowrap;
}

.liveSearchResultPanel .liveSearchSortButton em,
.liveSearchTable .liveSearchSortButton em {
  display: inline;
  color: var(--text-3);
}

.liveSearchResultPanel .liveSearchSortButton.active,
.liveSearchTable .liveSearchSortButton.active {
  background: transparent;
  color: var(--primary-light);
  box-shadow: none;
}

.liveSearchResultPanel .liveSearchSortButton.active em,
.liveSearchTable .liveSearchSortButton.active em {
  color: var(--primary-light);
}

.liveSearchResultPanel .liveSearchTable .productListRow {
  min-height: 72px;
  gap: 12px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
  padding: 8px 0;
}

.liveSearchResultPanel .liveSearchTable .productListRow > * {
  align-self: center;
  justify-self: center;
  text-align: center;
}

.liveSearchResultPanel .liveSearchTable .productListRow:not(.productListHead) > :first-child,
.liveSearchResultPanel .liveSearchTable .liveSearchRoomCell {
  justify-self: stretch;
  text-align: left;
}

.liveSearchResultPanel .liveSearchTable .liveSearchRoomCell .productTitleStack {
  align-items: start;
  text-align: left;
}

.liveSearchResultPanel .liveSearchTable .productMetricCell,
.liveSearchResultPanel .liveSearchTable .productStatusCell {
  align-items: center;
  justify-items: center;
  text-align: center;
}

.liveSearchResultPanel .liveSearchCover {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--tag-bg);
  color: var(--text-3);
}

.liveSearchResultPanel .liveSearchCover > svg,
.liveSearchResultPanel .liveSearchCover img {
  grid-area: 1 / 1;
}

.liveSearchResultPanel .liveSearchCover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.liveSearchResultPanel .liveSearchActionCell {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 8px;
}

.liveSearchResultPanel .productRetryButton,
.liveSearchResultPanel .liveSearchActionCell .productRetryButton {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 8px;
  margin-top: 0;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.liveSearchResultPanel .liveSearchActionCell .productRetryButton.secondary {
  border-color: var(--line-dark);
  background: var(--tag-bg);
  color: var(--text-2);
}

.liveSearchResultPanel > .productPager {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line-dark);
  background: transparent;
  padding: 12px 18px;
}

.liveSearchResultPanel > .productPager > span {
  color: var(--text-3);
  font-size: 13px;
  font-style: normal;
}

.liveSearchResultPanel .liveSearchPagerControls,
.liveSearchResultPanel .liveSearchPageNumbers {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.liveSearchResultPanel .liveSearchPageArrow,
.liveSearchResultPanel .liveSearchPageNumber,
.liveSearchResultPanel .liveSearchPageEllipsis {
  width: 34px;
  height: 34px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  padding: 0;
}

.liveSearchResultPanel .liveSearchPageNumber.active,
.liveSearchResultPanel .liveSearchPageNumber[aria-current='page'] {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.liveSearchResultPanel .liveSearchPageJump {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 760;
}

.liveSearchResultPanel .liveSearchPageJump input {
  width: 54px;
  height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-1);
  text-align: center;
  padding: 0 8px;
}

.liveDetailTrendChart path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.liveDetailTrendChart path.slotA {
  stroke: var(--primary);
}

.liveDetailTrendChart path.slotB {
  stroke: var(--accent);
}

.liveDetailProductPager {
  margin-top: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .liveSearchResultPanel .liveSearchResultFilters {
    align-items: stretch;
    flex-direction: column;
  }

  .liveSearchResultPanel .liveSearchDateFields {
    flex-basis: auto;
    justify-content: flex-start;
  }

  .liveSearchResultPanel .liveSearchDateField {
    width: 100%;
  }

  .liveSearchResultPanel .liveSearchDateDash {
    display: none;
  }
}

/* Shop and competitor layout restore from latest zsyq branch. */

.radarMonitorLayout {
  grid-template-columns: 1fr;
  align-items: start;
}

.radarTwoColumn.wideRight.radarCompareResultLayout {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: stretch;
}

.radarTwoColumn.wideRight.radarCompareResultLayout > .radarCompareCorePanel {
  min-height: 626px;
}

.radarCompareResultRail {
  min-height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 10px;
}

.radarCompareResultRail > .radarPanel {
  min-height: 0;
}

.radarCompareResultConclusionPanel {
  gap: 12px;
  padding: 16px;
}

.radarCompareResultConclusionPanel .radarSwotGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.radarCompareResultConclusionPanel .radarSwotGrid article {
  min-height: 142px;
  gap: 8px;
  padding: 12px;
}

.radarCompareResultConclusionPanel .radarSwotGrid strong {
  font-size: 14px;
  line-height: 1.25;
}

.radarCompareResultConclusionPanel .radarSwotGrid span {
  font-size: 12px;
  line-height: 1.45;
}

.radarCompareResultDecisionPanel {
  align-content: start;
  gap: 14px;
  padding: 16px;
}

.radarCompareResultDecisionPanel .radarBullets {
  gap: 8px;
}

.radarCompareResultDecisionPanel .radarButton {
  align-self: end;
  margin-top: auto;
}

.radarAlertsLayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.radarAlertsTopRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.radarAlertsTopRow > .radarPanel,
.radarAlertsTopRow > .radarSideStack {
  min-width: 0;
}

.radarPage .radarDecisionLayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.shopDataListScroller,
.shopTableWrap {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
}

.shopDataListScroller.cuiDataList,
.shopTableWrap.cuiDataList {
  box-shadow: none;
}

.shopDataListScroller .cuiDataListBody,
.shopTableWrap .cuiDataListBody {
  background: #ffffff;
}

.shopDetailFilterGroup,
.shopDetailDateRange,
.shopDetailNumberRange {
  min-width: 0;
  display: inline-grid;
  align-items: center;
  gap: 5px;
}

.shopDetailDateRange,
.shopDetailNumberRange {
  grid-template-columns: auto minmax(132px, 1fr) auto minmax(132px, 1fr);
}

.shopDetailFilterGroup {
  grid-template-columns: auto minmax(150px, 1fr);
}

.shopDetailFilterGroup > span,
.shopDetailDateRange > span,
.shopDetailNumberRange > span {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.shopDetailDateRange input,
.shopDetailNumberRange input,
.shopDetailFilterGroup select {
  width: 100%;
  padding: 0 10px;
}

.shopDetailDateRange em,
.shopDetailNumberRange em {
  color: var(--shop-faint);
  font-style: normal;
  font-weight: 900;
}

.shopDetailProductFilters {
  display: grid;
  gap: 12px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-bg-soft);
  padding: 14px;
}

.shopDetailProductListHeader,
.shopDetailProductFilterRow,
.shopDetailProductFilterSelects {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.shopDetailProductListHeader {
  justify-content: space-between;
}

.shopDetailProductListHeader h3 {
  margin: 0;
  color: var(--shop-text);
  font-size: 14px;
  font-weight: 950;
}

.shopDetailProductListHeader button,
.shopDetailProductFilterRow button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-bg);
  color: var(--shop-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0 11px;
  white-space: nowrap;
}

.shopDetailProductListHeader button:hover,
.shopDetailProductFilterRow button:hover,
.shopDetailProductFilterRow button.active {
  border-color: color-mix(in srgb, var(--shop-accent) 46%, var(--shop-line));
  background: var(--shop-accent-soft);
  color: var(--shop-accent-strong);
}

.shopDetailProductFilterRow > span {
  flex: 0 0 74px;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 950;
}

.shopDetailProductChipGroup,
.shopDetailProductDatePresets {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.shopDetailProductChipGroup button em {
  color: var(--shop-faint);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.shopDetailProductFilterSelects .shopDetailFilterGroup {
  min-width: 196px;
}

.shopDetailAccountStats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.shopDetailAccountStats em {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--shop-line);
  border-radius: 999px;
  background: var(--shop-bg-soft);
  color: var(--shop-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  padding: 0 8px;
}

.shopTrendLine {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

@media (max-width: 1080px) {
  .radarAlertsTopRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .radarAlertsTopRow {
    grid-template-columns: 1fr;
  }
}

/* Shop and competitor latest zsyq branch restore. */

@media (min-width: 1281px) {
  .radarTwoColumn.wideRight.radarCompareConfigLayout {
    align-items: stretch;
  }

  .radarCompareConfigLayout > .radarCompareRightRail {
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
  }

  .radarCompareConfigLayout > .radarCompareRightRail > .radarPanel {
    min-height: 0;
  }

  .radarCompareConfigLayout > .radarStack > .radarCompareBuilder {
    height: 100%;
  }
}

.radarAlertSheet {
  width: min(880px, 60vw);
  min-width: 620px;
  height: 100%;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 16px;
  border-right: 1px solid rgba(207, 222, 240, 0.96);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 24px 0 64px rgba(31, 62, 108, 0.18);
  padding: 22px;
}

.radarAlertSummary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.radarAlertSummaryCard,
.radarAlertPolicyCard,
.radarAlertEditor,
.radarAlertSourceStrip {
  border: 1px solid var(--radar-line);
  background: rgba(255, 255, 255, 0.94);
}

.radarAlertSummaryCard {
  min-height: 68px;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.radarAlertSummaryCard .label,
.radarAlertSummaryCard .note,
.radarAlertFieldLabel,
.radarAlertSectionTitle span {
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 900;
}

.radarAlertSummaryCard .value {
  color: var(--radar-text);
  font-size: 22px;
  font-weight: 900;
}

.radarAlertRuleSidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.radarAlertRuleListToolbar,
.radarAlertFieldLabel,
.radarAlertSectionTitle,
.radarAlertEditorFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.radarAlertRuleListToolbar {
  min-height: 38px;
}

.radarAlertRuleListToolbar .title {
  color: var(--radar-text);
  font-size: 15px;
  font-weight: 900;
}

.radarAlertFilterTabs,
.radarAlertChipGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.radarAlertFilterTab,
.radarAlertTemplateTab,
.radarAlertChip {
  border: 1px solid var(--radar-line);
  background: #fff;
  color: #41516a;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.radarAlertFilterTab {
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  white-space: nowrap;
}

.radarAlertFilterTab.active,
.radarAlertTemplateTab.active,
.radarAlertChip.active {
  color: #075f5a;
  border-color: #9be0d8;
  background: #e7f8f6;
}

.radarAlertRuleCard {
  position: relative;
  min-height: 68px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  padding: 12px;
}

.radarAlertRuleCard.active {
  border-color: #aee8e2;
  background: linear-gradient(90deg, rgba(231, 248, 246, 0.96), rgba(255, 255, 255, 0.95));
  box-shadow: 0 14px 28px rgba(20, 167, 158, 0.10);
}

.radarAlertRuleCard.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: #14a79e;
}

.radarAlertRuleCardIcon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #fff6e2;
  color: #f5a524;
}

.radarAlertRuleCardIcon.pink {
  color: #f0447e;
  background: #fff0f5;
}

.radarAlertRuleCardIcon.blue {
  color: #356df3;
  background: #eef3ff;
}

.radarAlertRuleCardIcon.green {
  color: #12a66a;
  background: #eaf8f1;
}

.radarAlertRuleCardBody,
.radarAlertEditor {
  min-width: 0;
}

.radarAlertRuleCardName {
  color: var(--radar-text);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
  margin-bottom: 4px;
}

.radarAlertRuleCardMeta {
  color: #516176;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarAlertRuleCardBadge {
  height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #e7f8f6;
  color: #067f78;
  font-size: 10px;
  font-weight: 900;
  padding: 0 7px;
  white-space: nowrap;
}

.radarAlertRuleCardBadge.off {
  color: #8793a5;
  background: #f0f3f7;
}

.radarAlertSourceStrip {
  margin-top: auto;
  border-radius: 10px;
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 800;
  padding: 12px 14px;
}

.radarAlertSourceStrip strong {
  display: block;
  margin-bottom: 6px;
  color: var(--radar-text);
  font-size: 13px;
}

.radarAlertSourceItem,
.radarAlertPolicyRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #edf2f7;
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 800;
}

.radarAlertSourceItem {
  padding: 4px 0;
}

.radarAlertSourceItem:first-of-type,
.radarAlertPolicyRow:first-of-type {
  border-top: 0;
}

.radarAlertSourceItem strong,
.radarAlertPolicyRow strong {
  color: #152239;
  font-size: 12px;
  margin-bottom: 0;
}

.radarAlertEditor {
  border-radius: 12px;
  box-shadow: 0 20px 52px rgba(22, 39, 68, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.radarAlertEditorHead {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #edf2f7;
  background: #f9fbfd;
  padding: 0 16px;
}

.radarAlertEditorHead .info strong {
  color: var(--radar-text);
  font-size: 18px;
  font-weight: 900;
}

.radarAlertEditorHead .info span {
  display: block;
  margin-top: 3px;
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 800;
}

.radarAlertEditorBody {
  flex: 1 1;
  overflow: auto;
  padding: 14px 16px 10px;
}

.radarAlertFieldRow,
.radarAlertBuilderGrid {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.radarAlertFieldRow {
  grid-template-columns: 1fr 140px;
}

.radarAlertBuilderGrid {
  grid-template-columns: 1fr 84px 1fr;
}

.radarAlertSectionTitle {
  margin: 4px 0 10px;
}

.radarAlertSectionTitle h2 {
  margin: 0;
  color: var(--radar-text);
  font-size: 16px;
  font-weight: 900;
}

.radarAlertTemplateTabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}

.radarAlertTemplateTab {
  min-width: 0;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  padding: 0 6px;
  text-align: center;
}

.radarAlertBuilder {
  border-top: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
  margin-bottom: 10px;
  padding: 10px 0 12px;
}

.radarAlertRangeRow {
  display: grid;
  grid-template-columns: 1fr 104px;
  gap: 12px;
  align-items: end;
  margin-bottom: 10px;
}

.radarAlertRangeLabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.radarAlertRangeLabel .title {
  color: #152239;
  font-size: 13px;
  font-weight: 900;
}

.radarAlertRangeLabel .bounds {
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 900;
}

.radarAlertRangeTrack {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #edf1f5;
  overflow: hidden;
}

.radarAlertRangeTrack input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.radarAlertRangeFill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #14a79e, #356df3);
}

.radarAlertRangeThumb {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 4px solid #14a79e;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 167, 158, 0.28);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.radarAlertStepper {
  height: 44px;
  border: 1px solid #b7e5df;
  border-radius: 8px;
  background: #fff;
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  overflow: hidden;
}

.radarAlertStepper button {
  height: 100%;
  border: 0;
  background: #e7f8f6;
  color: #067f78;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
}

.radarAlertStepper strong {
  color: #102139;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.radarAlertChip {
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  white-space: nowrap;
}

.radarAlertChip .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.radarAlertPolicyGrid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 12px;
  margin-bottom: 12px;
}

.radarAlertPolicyCard {
  min-height: 90px;
  border-radius: 10px;
  padding: 10px 12px;
}

.radarAlertPolicyCard .policy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #17243b;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 6px;
}

.radarAlertPolicyRow {
  height: 25px;
}

.radarAlertExpression {
  border: 1px solid #bce8e3;
  border-radius: 10px;
  background: linear-gradient(180deg, #f9fffe, #ffffff);
  margin-bottom: 8px;
  padding: 10px 12px;
}

.radarAlertExpression .label {
  color: #075f5a;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 6px;
}

.radarAlertExpression .code {
  color: #142139;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.55;
}

.radarAlertExpression .code .hi {
  color: #14a79e;
}

.radarAlertEditorFooter {
  margin-top: auto;
  border-top: 1px solid #edf2f7;
  background: #fbfcfe;
  padding: 10px 16px;
}

.shopRankingDatePicker {
  position: relative;
  min-width: 0;
}

.shopRankingDateButton {
  width: 190px;
  max-width: 100%;
  min-height: 34px;
  display: inline-grid !important;
  grid-template-columns: 16px minmax(112px, 1fr) 16px;
  align-items: center;
  justify-items: center;
  column-gap: 8px;
  border-color: color-mix(in srgb, var(--shop-accent) 18%, var(--shop-line)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--shop-bg-soft) 92%, #ffffff), color-mix(in srgb, var(--shop-accent) 6%, var(--shop-bg))) !important;
  color: var(--shop-text) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  padding: 0 12px !important;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.liveDetailProductJump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}

.liveDetailProductJump input {
  width: 56px;
  height: 30px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-1);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  outline: none;
}

.liveDetailProductJump input:focus {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

@media (max-width: 760px) {
  .liveSearchResultPanel .liveSearchResultFilters {
    align-items: stretch;
    flex-direction: column;
  }
}

.shopRankingDateButton .compassIcon:first-child {
  justify-self: start;
}

.shopRankingDateButton .compassIcon:last-child {
  justify-self: end;
}

.shopRankingDateButton:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 44%, var(--shop-line)) !important;
  background: var(--shop-accent-soft) !important;
  color: var(--shop-accent-strong) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--shop-accent) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transform: translateY(-1px);
}

.shopRankingDateButton strong {
  min-width: 0;
  justify-self: center;
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/compat/web-tail/web-tail-007.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Ordered read-only compatibility shard 007. Do not edit. */

.shopRankingCalendarPanel {
  --ranking-calendar-accent: var(--shop-accent, var(--primary, #6d28d9));
  --ranking-calendar-accent-strong: var(--shop-accent-strong, var(--primary-light, #7c3aed));
  --ranking-calendar-text: var(--shop-text, var(--text-1, #111827));
  --ranking-calendar-muted: var(--shop-muted, var(--text-3, #8a94a6));
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 90;
  width: 324px;
  border: 1px solid color-mix(in srgb, var(--ranking-calendar-accent) 18%, var(--shop-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--shop-bg) 88%, #ffffff);
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.16), 0 2px 6px color-mix(in srgb, var(--ranking-calendar-accent) 10%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  padding: 12px;
}

.shopRankingCalendarHeader {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ranking-calendar-accent) 7%, var(--shop-bg-soft));
  padding: 4px;
}

.shopRankingCalendarHeader strong {
  min-width: 0;
  color: var(--ranking-calendar-text);
  font-size: 14px;
  font-weight: 950;
  text-align: center;
}

.shopRankingCalendarHeader button,
.shopRankingCalendarGrid button,
.shopRankingMonthGrid button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ranking-calendar-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
}

.shopRankingCalendarHeader button:not(:disabled):hover,
.shopRankingCalendarGrid button:not(:disabled):hover,
.shopRankingMonthGrid button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--ranking-calendar-accent) 22%, transparent);
  background: color-mix(in srgb, var(--ranking-calendar-accent) 10%, transparent);
  color: var(--ranking-calendar-accent-strong);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--ranking-calendar-accent) 9%, transparent);
  transform: translateY(-1px);
}

.shopRankingCalendarHeader button:disabled,
.shopRankingCalendarGrid button:disabled,
.shopRankingMonthGrid button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.shopRankingCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-top: 12px;
}

.shopRankingCalendarGrid span {
  color: var(--ranking-calendar-muted);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.shopRankingCalendarGrid button {
  padding: 0;
}

.shopRankingCalendarGrid button.muted {
  color: #aeb7c4;
}

.shopRankingCalendarGrid button.active,
.shopRankingMonthGrid button.active {
  border-color: var(--ranking-calendar-accent);
  background: var(--ranking-calendar-accent);
  color: var(--accent-on-primary, #ffffff);
  box-shadow: 0 9px 18px color-mix(in srgb, var(--ranking-calendar-accent) 28%, transparent);
}

.shopRankingCalendarGrid.weekMode button {
  border-radius: 0;
  border-left-color: transparent;
  border-right-color: transparent;
}

.shopRankingCalendarGrid.weekMode button.weekStart {
  border-radius: 8px 0 0 8px;
}

.shopRankingCalendarGrid.weekMode button.weekEnd {
  border-radius: 0 8px 8px 0;
}

.shopRankingCalendarGrid.weekMode button.weekHover,
.shopRankingCalendarGrid.weekMode button.active {
  border-color: color-mix(in srgb, var(--ranking-calendar-accent) 12%, transparent);
  background: color-mix(in srgb, var(--ranking-calendar-accent) 12%, transparent);
  color: var(--ranking-calendar-accent-strong);
  box-shadow: none;
}

.shopRankingCalendarGrid.weekMode button.active.weekStart,
.shopRankingCalendarGrid.weekMode button.active.weekEnd {
  background: var(--ranking-calendar-accent);
  color: var(--accent-on-primary, #ffffff);
  box-shadow: 0 9px 18px color-mix(in srgb, var(--ranking-calendar-accent) 24%, transparent);
}

.shopRankingMonthGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.shopRankingMonthGrid button {
  min-height: 38px;
}

.shopTranslateOverlay {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.24);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.shopTranslateDialog {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  display: grid;
  gap: 18px;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 18%, var(--shop-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--shop-bg) 94%, #ffffff);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
  padding: 28px;
}

.shopTranslateClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--shop-muted);
  cursor: pointer;
  padding: 0;
}

.shopTranslateClose:hover {
  background: var(--shop-bg-soft);
  color: var(--shop-text);
}

.shopTranslatePreview {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding-right: 28px;
}

.shopTranslatePreview .shopAvatar {
  width: 58px;
  height: 58px;
  font-size: 18px;
}

.shopTranslatePreview strong {
  display: block;
  color: var(--shop-text);
  font-size: 18px;
  font-weight: 950;
}

.shopTranslatePreview p {
  margin: 6px 0 0;
  color: var(--shop-muted);
  font-size: 14px;
  line-height: 1.55;
}

.shopTranslateLanguage {
  width: 132px;
  display: grid;
  gap: 7px;
}

.shopTranslateLanguage span,
.shopTranslateResult span {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 850;
}

.shopTranslateLanguage select {
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 28%, var(--shop-line));
  border-radius: 999px;
  background: #ffffff;
  color: var(--shop-text);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  outline: 0;
  padding: 0 14px;
}

.shopTranslateLanguage select:focus {
  border-color: var(--shop-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-accent) 14%, transparent);
}

.shopTranslateResult {
  position: relative;
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 28%, var(--shop-line));
  border-radius: 8px;
  background: #ffffff;
  padding: 14px 82px 14px 14px;
}

.shopTranslateResult p {
  min-height: 48px;
  margin: 0;
  color: var(--shop-text);
  font-size: 15px;
  font-weight: 820;
  line-height: 1.6;
}

.shopTranslateResult button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 30px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  padding: 0 12px;
}

.shopTranslateResult button:hover {
  border-color: var(--shop-accent);
  color: var(--shop-accent-strong);
}

.shopDetailPage .shopBarTrack {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: var(--shop-bg-soft);
  overflow: hidden;
}

.shopDetailPage .shopBarFill {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bar-color) 52%, #ffffff), var(--bar-color));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--bar-color) 32%, transparent);
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--bar-delay, 0ms);
}

.shopDetailPage .shopBarLabel,
.shopDetailPage .shopBarValue,
.shopDetailPage .shopBarPct {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 850;
}

.shopDetailPage .shopTrendTableView {
  display: grid;
  gap: 14px;
  margin-top: 4px;
  animation: shopDistReveal 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shopDetailPage .shopTrendTableWrap {
  border: 1px solid var(--shop-line);
  border-radius: 14px;
  overflow: auto;
}

.shopDetailPage .shopTrendTable {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.shopDetailPage .shopTrendTable th,
.shopDetailPage .shopTrendTable td {
  border-bottom: 1px solid var(--shop-line);
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 800;
  padding: 13px 18px;
  text-align: left;
}

.shopDetailPage .shopTrendTable th {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 950;
}

.shopDetailPage .shopTrendTableFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.shopDetailPage .shopTrendPagination {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.shopDetailPage .shopTrendPagination button {
  min-width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--shop-line);
  border-radius: 9px;
  background: #ffffff;
  color: var(--shop-text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 0 10px;
}

.shopDetailPage .shopTrendPagination button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--shop-accent) 40%, var(--shop-line));
  color: var(--shop-accent-strong);
}

.shopDetailPage .shopTrendPagination button.active {
  border-color: var(--shop-accent);
  background: var(--shop-accent);
  color: #ffffff;
}

.shopDetailPage .shopTrendPagination button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.shopDetailPage .shopTrendPageArrow {
  color: var(--shop-muted);
}

.shopDetailPage .shopTrendJump,
.shopDetailPage .shopTrendExportBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 850;
}

.shopDetailPage .shopTrendJump input,
.shopDetailPage .shopTrendMetricField select {
  min-height: 34px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-text);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.shopDetailPage .shopTrendJump input {
  width: 54px;
  padding: 0 8px;
}

.shopDetailPage .shopTrendMetricFields {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.shopDetailPage .shopTrendMetricField {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.shopDetailPage .shopTrendExportBtn {
  min-height: 34px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  padding: 0 12px;
}

.shopDetailPage .shopTrendExportBtn:hover {
  border-color: var(--shop-accent);
  color: var(--shop-accent-strong);
}

.shopDetailPage .shopDistBody {
  animation: shopDistReveal 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes shopDistReveal {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.shopDistToggleThumb {
  transition: transform 180ms ease;
}

.shopDetailPage .shopInfoCellShell,
.shopDetailPage .shopNameTranslateButton {
  min-width: 0;
}

.creatorDetailMetricCard .creatorMetricHint {
  cursor: help;
  outline: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.creatorDetailMetricCard .creatorMetricHint:hover,
.creatorDetailMetricCard .creatorMetricHint:focus-visible {
  background: color-mix(in srgb, var(--primary) 18%, var(--tag-bg));
  color: var(--primary);
}

/* Final live-module empty-state normalization.
   Keep no-data views inside the same compact panels used by populated lists. */

.livesPage {
  align-content: start;
}

.livesPage > .livePageHeader,
.livesPage > .liveHeroPanel,
.livesPage > .moduleHeroPanel {
  min-height: 0 !important;
  align-content: start !important;
  padding: 0 0 14px !important;
}

.livesPage > .livePageHeader h1,
.livesPage > .liveHeroPanel h1,
.livesPage > .moduleHeroPanel h1 {
  font-size: 24px !important;
  line-height: 1.25 !important;
}

.livesPage > .livePageHeader p,
.livesPage > .liveHeroPanel p,
.livesPage > .moduleHeroPanel p {
  max-width: 860px !important;
  margin-top: 6px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.livesPage .liveSearchFilterPanel {
  min-height: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  padding: 16px 18px !important;
}

.livesPage .liveSearchFilterPanel .liveSearchMainSearch {
  min-height: 0 !important;
  align-items: center !important;
  padding-bottom: 12px !important;
}

.livesPage .liveSearchFilterPanel .liveSearchFilterRow {
  min-height: 0 !important;
  align-items: center !important;
  gap: 10px 12px !important;
}

.livesPage .liveSearchFilterPanel .liveSearchInlineSelects {
  align-items: center !important;
  gap: 8px !important;
}

.livesPage .liveSearchSearchBox {
  min-height: 44px !important;
}

.livesPage .liveSearchSearchBox input {
  min-height: 42px !important;
}

.livesPage .liveSearchSearchButton,
.livesPage .liveSearchResetButton {
  min-height: 40px !important;
}

.livesPage .productListPanel,
.livesPage .liveSearchResultPanel,
.livesPage .liveHistoryFilterPanel {
  align-content: start !important;
}

.livesPage .productListPanel > .workspaceStatePanel.compact,
.livesPage .liveSearchResultPanel > .workspaceStatePanel.compact,
.livesPage .liveHistoryFilterPanel > .workspaceStatePanel.compact,
.livesPage > .workspaceStatePanel.compact {
  min-height: 132px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 8px !important;
  border: 0 !important;
  border-top: 1px solid var(--line-dark) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 22px 22px !important;
}

.livesPage .productListPanel > .workspaceStatePanel.compact:first-child,
.livesPage .liveSearchResultPanel > .workspaceStatePanel.compact:first-child,
.livesPage .liveHistoryFilterPanel > .workspaceStatePanel.compact:first-child,
.livesPage > .workspaceStatePanel.compact:first-child {
  border-top: 0 !important;
}

.livesPage .workspaceStatePanel.compact.state-empty {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 62%),
    transparent !important;
}

.livesPage .workspaceStatePanel.compact .cuiInlineStateMeta {
  margin: 0 !important;
}

.livesPage .workspaceStatePanel.compact.state-empty .cuiInlineStateLabel {
  display: none !important;
}

.livesPage .workspaceStatePanel.compact .cuiInlineStateCopy {
  display: grid !important;
  gap: 4px !important;
}

.livesPage .workspaceStatePanel.compact h2 {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
}

.livesPage .workspaceStatePanel.compact p {
  max-width: 720px !important;
  margin: 0 !important;
  color: var(--text-2) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.livesPage .workspaceStatePanel.compact .cuiInlineStateActions,
.livesPage .workspaceStatePanel.compact .stateBlockActions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px !important;
}

.livesPage .productListToolbar + .workspaceStatePanel.compact,
.livesPage .liveSearchResultFilters + .workspaceStatePanel.compact {
  border-top: 0 !important;
}

@media (max-width: 900px) {
  .livesPage .liveSearchFilterPanel .liveSearchFilterRow {
    grid-template-columns: 1fr !important;
  }

  .livesPage .liveSearchFilterLabel {
    line-height: 1.4 !important;
  }
}

@media (max-width: 640px) {
  .livesPage .productListPanel > .workspaceStatePanel.compact,
  .livesPage .liveSearchResultPanel > .workspaceStatePanel.compact,
  .livesPage .liveHistoryFilterPanel > .workspaceStatePanel.compact,
  .livesPage > .workspaceStatePanel.compact {
    min-height: 116px !important;
    padding: 18px 16px !important;
  }
}

/* LIVE_SEARCH_LIUJIA_CSS_MERGE_START
 * Generated from feat/live-search-liujia styles on top of current develop.
 * Keep this scoped to live/notification selectors so non-live develop CSS stays authoritative.
 */

.notificationTopbarButton {
  cursor: pointer;
  position: relative;
  overflow: visible;
}

.notificationTopbarButton.has-unread {
  color: #fca5a5;
}

.notificationTopbarButton span {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--surface-app);
  border-radius: 999px;
  background: #fee2e2;
  color: #ef4444;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.productFilterPanel,
.creatorFilterPanel,
.liveHistoryFilterPanel {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.5fr) repeat(4, minmax(128px, 1fr)) minmax(150px, 1fr)
    minmax(150px, 1.2fr) minmax(86px, 0.5fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
}

.liveMonitorWatchToggle {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-2);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 120ms,
    border-color 120ms,
    color 120ms;
}

.liveAlertFilterGroup {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--control-bg);
  padding: 2px;
  white-space: nowrap;
}

.liveAlertFilterButton {
  min-height: 28px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition:
    background 120ms,
    color 120ms;
}

.liveAlertFilterButton:hover:not(:disabled) {
  color: var(--primary);
}

.liveAlertFilterButton.active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.liveAlertFilterButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.liveCardMetricPill {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-dark);
  background: var(--control-bg);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color 120ms,
    background 120ms,
    color 120ms;
}

.liveCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--row-line);
  border-radius: 12px;
  background: var(--surface-panel);
  cursor: pointer;
  transition:
    border-color 120ms,
    box-shadow 120ms,
    transform 120ms;
  outline: none;
}

.liveCardInlineActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: -4px;
}

.liveCardTextButton {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, #facc15 42%, var(--line-dark));
  border-radius: 8px;
  background: color-mix(in srgb, #facc15 18%, transparent);
  color: #854d0e;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.liveCardTextButton:hover {
  background: color-mix(in srgb, #facc15 26%, transparent);
}

.liveCardIconButton {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  background: var(--control-bg);
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 120ms,
    color 120ms,
    border-color 120ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.watchedTopRow {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--control-bg);
  cursor: pointer;
  outline: none;
  transition:
    background 120ms,
    transform 120ms;
  /* Reset button defaults for .watchedTopRow. */
  width: 100%;
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
}

.watchedAttentionAction {
  flex-shrink: 0;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line-dark);
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition:
    border-color 120ms,
    color 120ms,
    background 120ms;
}

.liveWarningJumpButton {
  min-height: 28px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color 120ms,
    background 120ms;
}

.liveWarningJumpButton:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}

.liveWarningCenter {
  border: 1px solid var(--row-line);
  border-radius: 12px;
  background: var(--surface-panel);
  padding: 16px 18px;
}

.liveWarningHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.liveWarningHeader > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.liveWarningHeader strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 950;
}

.liveWarningHeader em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.liveWarningSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.liveWarningSummary > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-radius: 10px;
  background: var(--control-bg);
  padding: 10px 12px;
}

.liveWarningSummary strong {
  color: var(--text-1);
  font-size: 22px;
  font-weight: 950;
}

.liveWarningSummary em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.liveWarningDetailPanel {
  display: grid;
  gap: 14px;
}

.liveWarningDetailHero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 14px;
  border: 1px solid var(--row-line);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  background: var(--control-bg);
  padding: 14px;
}

.liveWarningDetailHero.critical {
  border-left-color: #b91c1c;
}

.liveWarningDetailHero.warning {
  border-left-color: #ca8a04;
}

.liveWarningDetailHero > div {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.liveWarningDetailHero span {
  width: max-content;
  border-radius: 999px;
  background: color-mix(in srgb, #facc15 20%, transparent);
  color: #854d0e;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 950;
}

.liveWarningDetailHero.critical span {
  background: color-mix(in srgb, #b91c1c 12%, transparent);
  color: #b91c1c;
}

.liveWarningDetailHero.info span {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.liveWarningDetailHero h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  line-height: 1.3;
}

.liveWarningDetailHero p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.65;
}

.liveWarningDetailHero dl,
.liveWarningDetailGrid dl {
  margin: 0;
  display: grid;
  gap: 9px;
}

.liveWarningDetailHero dl > div,
.liveWarningDetailGrid dl > div {
  display: grid;
  gap: 3px;
}

.liveWarningDetailHero dt,
.liveWarningDetailHero dd,
.liveWarningDetailGrid dt,
.liveWarningDetailGrid dd {
  margin: 0;
}

.liveWarningDetailHero dt,
.liveWarningDetailGrid dt {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.liveWarningDetailHero dd,
.liveWarningDetailGrid dd {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.liveWarningConclusionCard {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--row-line));
  border-radius: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 42%),
    var(--control-bg);
  padding: 14px;
}

.liveWarningConclusionCard h4 {
  margin: 0;
  color: var(--primary);
  font-size: 13px;
  font-weight: 950;
}

.liveWarningConclusionCard > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.liveWarningConclusionCard strong {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.45;
}

.liveWarningConclusionCard p {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.6;
}

.liveWarningFlowSection {
  display: grid;
  gap: 12px;
  border: 1px solid var(--row-line);
  border-radius: 12px;
  background: var(--control-bg);
  padding: 13px;
}

.liveWarningFlowSection > header,
.liveWarningProcessCard > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.liveWarningFlowSection h4,
.liveWarningProcessCard h4 {
  margin: 0;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

.liveWarningFlowSection em,
.liveWarningProcessCard > header em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.45;
}

.liveWarningDetailMetricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.liveWarningDetailMetricGrid > span,
.liveWarningImpactList > span {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid var(--row-line);
  border-radius: 10px;
  background: var(--control-bg);
  padding: 11px 12px;
}

.liveWarningDetailMetricGrid em,
.liveWarningImpactList em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.liveWarningDetailMetricGrid strong,
.liveWarningImpactList strong {
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
}

.liveWarningDetailMetricGrid b,
.liveWarningImpactList b {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.liveWarningConditionCard,
.liveWarningTrendCard {
  border: 1px solid var(--row-line);
  border-radius: 12px;
  background: var(--control-bg);
  padding: 13px;
}

.liveWarningConditionHeader,
.liveWarningTrendHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.liveWarningConditionHeader h4,
.liveWarningTrendHeader h4 {
  margin: 0;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

.liveWarningConditionHeader em,
.liveWarningTrendHeader em {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.liveWarningTrendHeader span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, #facc15 16%, transparent);
  color: #854d0e;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 900;
}

.liveWarningTrendAxisNote {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.liveWarningTrendAxisNote span {
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 850;
}

.liveWarningConditionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.liveWarningConditionGrid article {
  display: grid;
  gap: 8px;
  border: 1px solid var(--row-line);
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  background: var(--surface-panel);
  padding: 11px;
}

.liveWarningConditionGrid article.critical {
  border-left-color: #b91c1c;
}

.liveWarningConditionGrid article.warning {
  border-left-color: #ca8a04;
}

.liveWarningConditionGrid article > span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.liveWarningConditionGrid article > strong {
  color: var(--text-1);
  font-size: 20px;
  font-weight: 950;
}

.liveWarningConditionGrid dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.liveWarningConditionGrid dl > div {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 8px;
}

.liveWarningConditionGrid dt,
.liveWarningConditionGrid dd {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

.liveWarningConditionGrid dt {
  color: var(--text-3);
  font-weight: 900;
}

.liveWarningConditionGrid dd {
  color: var(--text-1);
  font-weight: 750;
}

.liveWarningTrendCard svg {
  width: 100%;
  height: 86px;
  display: block;
  overflow: visible;
}

.liveWarningTrendCard svg .axis {
  stroke: var(--row-line);
  stroke-width: 1;
}

.liveWarningTrendCard svg .threshold {
  stroke: #ca8a04;
  stroke-dasharray: 6 6;
  stroke-width: 1.5;
  opacity: 0.7;
}

.liveWarningTrendCard svg .trigger {
  stroke: #b91c1c;
  stroke-dasharray: 4 5;
  stroke-width: 1.5;
  opacity: 0.75;
}

.liveWarningTrendLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.liveWarningTrendLegend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 850;
}

.liveWarningTrendLegend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.liveWarningMiniTrendGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.liveWarningMiniTrendGrid article {
  border: 1px solid var(--row-line);
  border-radius: 10px;
  background: var(--surface-panel);
  padding: 10px;
}

.liveWarningMiniTrendHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.liveWarningMiniTrendHead span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
}

.liveWarningMiniTrendHead i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.liveWarningMiniTrendHead strong {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 950;
}

.liveWarningMiniTrendMeta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 6px;
}

.liveWarningMiniTrendMeta span {
  border-radius: 7px;
  background: var(--control-bg);
  color: var(--text-2);
  padding: 5px 6px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.liveWarningMiniTrendGrid article > em {
  display: block;
  margin-top: 7px;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.liveWarningDetailGrid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 12px;
}

.liveWarningDetailGrid > article {
  border: 1px solid var(--row-line);
  border-radius: 12px;
  background: var(--control-bg);
  padding: 13px;
}

.liveWarningDetailGrid h4 {
  margin: 0 0 10px;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

.liveWarningImpactList {
  display: grid;
  gap: 8px;
}

.liveWarningActionCard ol {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.55;
}

.liveWarningActionLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.liveWarningActionLinks a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  color: var(--primary);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.liveWarningActionLinks a:hover {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}

.liveWarningProcessCard {
  display: grid;
  gap: 12px;
  border: 1px solid var(--row-line);
  border-radius: 12px;
  background: var(--control-bg);
  padding: 13px;
}

.liveWarningProcessCard > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.liveWarningProcessCard > div > span {
  display: grid;
  gap: 5px;
  border: 1px solid var(--row-line);
  border-radius: 10px;
  background: var(--surface-panel);
  padding: 10px 11px;
}

.liveWarningProcessCard strong {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.liveWarningProcessCard > div em {
  color: var(--text-1);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.45;
}

.liveWarningLedger {
  overflow-x: auto;
  border: 1px solid var(--row-line);
  border-radius: 12px;
  background: var(--control-bg);
}

.liveWarningLedgerRow {
  min-width: 920px;
  min-height: 70px;
  display: grid;
  grid-template-columns: 110px minmax(220px, 1.15fr) minmax(260px, 1.25fr) 140px 96px 160px;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--row-line);
  padding: 12px 14px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 760;
}

.liveWarningLedgerRow:last-child {
  border-bottom: 0;
}

.liveWarningLedgerRow.head {
  min-height: 42px;
  background: var(--surface-panel);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 950;
}

.liveWarningSeverity {
  width: max-content;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 950;
}

.liveWarningSeverity.critical {
  border-color: color-mix(in srgb, #b91c1c 36%, var(--row-line));
  background: color-mix(in srgb, #b91c1c 10%, transparent);
  color: #b91c1c;
}

.liveWarningSeverity.warning {
  border-color: color-mix(in srgb, #ca8a04 40%, var(--row-line));
  background: color-mix(in srgb, #ca8a04 12%, transparent);
  color: #a16207;
}

.liveWarningLedgerTitle {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.liveWarningLedgerTitle strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.35;
}

.liveWarningLedgerTitle em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.35;
}

.liveWarningLedgerRule {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.liveWarningLedgerRule strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
}

.liveWarningLedgerRule em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.45;
}

.liveWarningLedgerLive {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.liveWarningLedgerLive:hover {
  color: var(--primary);
}

.liveWarningStatusPill {
  width: max-content;
  border-radius: 999px;
  background: color-mix(in srgb, #facc15 18%, transparent);
  color: #854d0e;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 900;
}

.liveWarningLedgerActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.liveSearchResultFilters {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  padding: 0 0 12px;
}

.liveSearchQuickRanges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.liveSearchQuickRanges button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  padding: 0 11px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.liveSearchDateFields {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.liveSearchDateField {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  padding: 0 11px;
}

.liveSearchDateField > span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.liveSearchDateField > input {
  width: 164px;
  min-height: 36px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 800;
}

.liveSearchDateField > input::placeholder {
  color: var(--text-3);
  font-weight: 800;
}

.liveSearchCalendar {
  position: relative;
  display: inline-flex;
}

.liveSearchCalendarButton {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--tag-bg);
  color: var(--text-2);
}

.liveSearchActionCell .productRetryButton.secondary {
  border: 1px solid var(--line-dark);
  background: var(--tag-bg);
  color: var(--text-2);
}

.liveTableActionGroup .liveWarningDetailButton {
  border-color: color-mix(in srgb, #facc15 42%, var(--line-dark));
  background: color-mix(in srgb, #facc15 14%, transparent);
  color: #854d0e;
}

.liveDetailWatchButton {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color 120ms,
    color 120ms,
    background 120ms;
}

.liveDetailSimilarTabs > button {
  min-height: 28px;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  border-radius: 6px;
  transition:
    background 120ms,
    color 120ms;
}

.liveDetailSimilarShuffle {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--line-dark-strong);
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 120ms,
    color 120ms,
    border-color 120ms;
}

.liveDetailDimPill {
  appearance: none;
  border: 1px solid var(--row-line);
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

.liveDetailProductPager > span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}

.liveDetailProductJump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}

.liveDetailProductJump input {
  width: 56px;
  height: 30px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-1);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  outline: none;
}

.liveDetailProductJump input:focus {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.liveDetailProductRow {
  min-height: 76px;
  display: grid;
  grid-template-columns:
    minmax(280px, 1fr) minmax(130px, 0.5fr) minmax(90px, 0.32fr) minmax(120px, 0.38fr)
    minmax(100px, 0.28fr);
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.liveSelectedDetail {
  display: grid;
  gap: 12px;
}

.liveSelectedDetailHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px 16px;
}

.liveSelectedDetailHeader > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.liveSelectedDetailHeader strong {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 950;
}

.liveSelectedDetailHeader em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.hotVideoPage {
  --hot-video-accent: var(--primary);
  --hot-video-soft: color-mix(in srgb, var(--primary) 12%, transparent);
  --hot-video-border: var(--line-dark);
  --hot-video-panel: var(--surface-panel);
  --hot-video-panel-strong: var(--surface-panel-strong);
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 14px;
  padding: 22px;
  color: var(--text-1);
}

.hotVideoTitleBar h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 0;
}

.hotVideoTitleBar {
  padding: 0 0 14px;
}

.hotVideoFilterPanel,
.hotVideoListPanel {
  min-width: 0;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--hot-video-panel);
  box-shadow: var(--shadow-light);
}

.hotVideoFilterPanel {
  display: grid;
  gap: 16px;
  padding: 22px 24px 24px;
}

.hotVideoSearch {
  width: min(610px, 100%);
  height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--control-bg);
}

.hotVideoSearch input {
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  padding: 0 18px;
  font-size: 14px;
  font-weight: 820;
}

.hotVideoSearch input::placeholder {
  color: var(--text-3);
}

.hotVideoSearch button {
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--hot-video-accent);
  color: #ffffff;
}

.hotVideoDivider {
  height: 1px;
  background: var(--hot-video-border);
}

.hotVideoFilterRow,
.hotVideoConditionRow {
  min-width: 0;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.hotVideoFilterRow strong,
.hotVideoConditionRow strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 920;
  text-align: right;
}

.hotVideoFilterRow > div,
.hotVideoConditionRow {
  min-width: 0;
}

.hotVideoFilterRow > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.hotVideoFilterRow button {
  position: relative;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 760;
}

.hotVideoFilterRow button.active {
  background: var(--hot-video-accent);
  color: #ffffff;
  padding-inline: 17px;
}

.hotVideoFilterRow button em {
  position: absolute;
  top: -8px;
  right: -12px;
  border-radius: 5px;
  background: var(--accent);
  color: #ffffff;
  padding: 1px 4px;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.2;
}

.hotVideoFilterRow .hotVideoExpand {
  margin-left: auto;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  padding-inline: 14px;
}

.hotVideoFilterRow .hotVideoExpand svg {
  transition: transform 160ms ease;
}

.hotVideoFilterRow .hotVideoExpand.expanded svg {
  transform: rotate(180deg);
}

.hotVideoConditionRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 102px;
}

.hotVideoConditionRow strong {
  width: 102px;
  margin-left: -102px;
}

.hotVideoConditionRow select {
  min-width: 128px;
  height: 34px;
  border: 1px solid var(--hot-video-border);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-1);
  outline: 0;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 820;
}

.hotVideoRangeFilter {
  position: relative;
  min-width: 178px;
}

.hotVideoRangeFilter > button {
  width: 100%;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--hot-video-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-1);
  padding: 0 12px 0 14px;
  font-size: 13px;
  font-weight: 820;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-1) 5%, transparent);
}

.hotVideoRangeFilter > button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotVideoRangeFilter > button svg {
  flex: 0 0 auto;
  color: var(--text-2);
  transition: transform 160ms ease;
}

.hotVideoRangeFilter.open > button {
  border-color: var(--hot-video-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot-video-accent) 12%, transparent);
}

.hotVideoRangeFilter.open > button svg {
  transform: rotate(180deg);
}

.hotVideoRangeMenu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  width: 240px;
  overflow: hidden;
  border: 1px solid var(--hot-video-border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 14px 32px color-mix(in srgb, var(--text-1) 16%, transparent);
  padding: 6px;
}

.hotVideoRangeMenu > button {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-1);
  padding: 0 11px;
  font-size: 13px;
  font-weight: 760;
  text-align: left;
}

.hotVideoRangeMenu > button:hover,
.hotVideoRangeMenu > button.active {
  background: color-mix(in srgb, var(--hot-video-accent) 9%, #ffffff);
  color: var(--hot-video-accent);
}

.hotVideoRangeCustom {
  display: grid;
  gap: 7px;
  margin-top: 6px;
  border-top: 1px solid var(--hot-video-border);
  padding: 9px 5px 4px;
}

.hotVideoRangeCustom > span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 860;
}

.hotVideoRangeCustom > div:not(.hotVideoRangeActions) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

.hotVideoRangeCustom input {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--hot-video-border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-1);
  padding: 0 7px;
  font-size: 12px;
  font-weight: 760;
  outline: 0;
}

.hotVideoRangeCustom input:focus {
  border-color: var(--hot-video-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot-video-accent) 12%, transparent);
}

.hotVideoRangeCustom em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
  text-align: center;
}

.hotVideoRangeActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.hotVideoRangeActions button {
  height: 32px;
  border: 1px solid var(--hot-video-border);
  border-radius: 7px;
  background: #ffffff;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 880;
}

.hotVideoRangeActions button:last-child {
  border-color: var(--hot-video-accent);
  background: var(--hot-video-accent);
  color: #ffffff;
}

.hotVideoConditionRow > select {
  min-width: 170px;
  height: auto;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-1) 5%, transparent);
}

.hotVideoListPanel {
  display: grid;
  gap: 12px;
  padding: 0;
  overflow: hidden;
}

.hotVideoListToolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--hot-video-border);
  padding: 14px 22px;
}

.hotVideoListToolbar > span,
.hotVideoListToolbar > div > span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 820;
}

.hotVideoListToolbar > div,
.hotVideoPeriod {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hotVideoPeriod button,
.hotVideoExport {
  min-height: 32px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 950;
}

.hotVideoPeriod button.active,
.hotVideoExport {
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.hotVideoExport {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hotVideoTablePanel {
  min-width: 0;
  --commerce-list-row-height: 150px;
  --commerce-list-head-height: 62px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListTableRow:not(.cuiDataListTableHead) {
  min-height: 150px;
  height: 150px;
  border-bottom: 1px solid var(--commerce-list-line);
}

.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListTableRow:last-child {
  border-bottom: 0;
}

.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListTableCell,
.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListSortedCell {
  min-height: 150px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListTableHead {
  min-height: 58px;
  border-bottom: 1px solid var(--commerce-list-line);
  background: var(--surface-muted);
}

.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListTableHeadCell {
  min-height: 58px;
  background: var(--surface-muted);
}

.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListSortableHead.active {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-muted));
}

.hotVideoTable .cuiDataListTableHead,
.hotVideoTable .cuiDataListTableRow {
  min-height: inherit;
}

.hotVideoTable .cuiDataListTableRow:not(.cuiDataListTableHead) {
  align-items: stretch;
}

.hotVideoTable .cuiDataListTableHead > *,
.hotVideoTable .cuiDataListTableRow > * {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}

.hotVideoTable .cuiDataListTableHead > *:first-child,
.hotVideoTable .cuiDataListTableRow > *:first-child,
.hotVideoTable .cuiDataListTableHead > *:nth-child(2),
.hotVideoTable .cuiDataListTableRow > *:nth-child(2) {
  justify-content: flex-start;
}

.hotVideoTable .cuiDataListSortableHead.active,
.hotVideoTable .cuiDataListSortedCell.active {
  color: var(--hot-video-accent);
}

.hotVideoTable .cuiDataListSortedCell.active {
  background: var(--hot-video-panel-strong);
}

.hotVideoTable .cuiDataListSortedCell.active,
.hotVideoTable .cuiDataListSortedCell.active * {
  color: var(--hot-video-accent);
}

.hotVideoTable .cuiDataListSortableHead {
  gap: 5px;
  color: var(--text-1);
}

.hotVideoContentCell,
.hotVideoCreatorCell,
.hotVideoActions {
  min-width: 0;
  display: flex;
  align-items: center;
}

.hotVideoContentCell {
  gap: 18px;
  align-self: stretch;
}

.hotVideoCover {
  position: relative;
  width: 64px !important;
  height: 114px !important;
  flex: 0 0 64px !important;
  min-width: 64px;
  max-width: 64px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--tag-bg);
}

.hotVideoCover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hotVideoCreatorCell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hotVideoCover b {
  position: absolute;
  top: 6px;
  left: 4px;
  border-radius: 5px;
  background: var(--danger);
  color: #ffffff;
  padding: 3px 5px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.hotVideoContentCell div,
.hotVideoCreatorCell div {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.hotVideoContentCell strong,
.hotVideoCreatorCell strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotVideoTitleLine {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hotVideoCommerceBadge {
  min-height: 20px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--hot-video-accent) 22%, var(--hot-video-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--hot-video-accent) 8%, var(--surface));
  color: var(--hot-video-accent);
  padding: 0 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.hotVideoContentCell span,
.hotVideoCreatorCell span {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotVideoCreatorCell {
  gap: 14px;
}

.hotVideoCreatorLink {
  color: inherit;
  text-decoration: none;
}

.hotVideoCreatorLink:hover strong {
  color: var(--hot-video-accent);
}

.hotVideoCreatorCell img {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 999px;
}

.hotVideoCreatorCell em {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--text-2);
  padding: 0 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
}

.hotVideoActions {
  justify-content: center;
  gap: 8px;
}

.hotVideoActions button,
.hotVideoActions a {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
  text-decoration: none;
}

.hotMusicFilterPanel {
  gap: 20px;
}

.hotMusicListPanel {
  padding: 0;
}

.commerceDataListPanel.hotMusicTablePanel {
  --commerce-list-row-height: 116px;
  --commerce-list-head-height: 58px;
}

.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListTableHead {
  min-height: 58px;
  border-bottom: 1px solid var(--commerce-list-line);
  background: var(--surface-muted);
}

.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListTableHeadCell {
  min-height: 58px;
  background: var(--surface-muted);
}

.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListTableRow:not(.cuiDataListTableHead) {
  min-height: 116px;
  height: 116px;
  border-bottom: 1px solid var(--commerce-list-line);
}

.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListTableRow:last-child {
  border-bottom: 0;
}

.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListTableCell,
.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListSortedCell {
  min-height: 116px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.hotMusicTable .cuiDataListTableHead > *,
.hotMusicTable .cuiDataListTableRow > * {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}

.hotMusicTable .cuiDataListTableHead > *:first-child,
.hotMusicTable .cuiDataListTableRow > *:first-child {
  justify-content: flex-start;
}

.hotMusicTable .cuiDataListSortableHead.active,
.hotMusicTable .cuiDataListSortedCell.active,
.hotMusicTable .cuiDataListSortedCell.active * {
  color: var(--hot-video-accent);
}

.hotMusicTable .cuiDataListSortableHead.active {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-muted));
}

.hotMusicTable .cuiDataListSortedCell.active {
  background: var(--hot-video-panel-strong);
}

.hotMusicCell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hotMusicCell img {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: block;
  border-radius: 8px;
  background: var(--tag-bg);
  object-fit: cover;
}

.hotMusicCell div {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.hotMusicCell strong,
.hotMusicCreatorName {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotMusicCell span,
.hotMusicCell em {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 13px;
  font-style: normal;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotVideoCountryFlag {
  width: 18px !important;
  height: 13px !important;
  flex: 0 0 auto;
  margin-left: 5px;
  border-radius: 2px !important;
  object-fit: cover;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-1) 10%, transparent);
  vertical-align: -2px;
}

.hotMusicCell span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hotMusicCell em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hotMusicCell .hotVideoCountryFlag {
  width: 18px !important;
  height: 13px !important;
  flex: 0 0 auto;
  margin-left: 0;
}

.hotTagTitleBar {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.hotTagTitleBar span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 760;
}

.hotTagFilterPanel {
  gap: 16px;
}

.hotTagAdvancedRow select {
  min-width: 150px;
}

.hotTagAdvancedRow .hotVideoRangeFilter {
  min-width: 190px;
}

.hotTagAdvancedRow .hotVideoRangeMenu {
  width: 242px;
}

.hotTagListPanel {
  padding: 0;
}

.commerceDataListPanel.hotTagTablePanel {
  --commerce-list-row-height: 116px;
  --commerce-list-head-height: 58px;
}

.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListTableHead {
  min-height: 58px;
  border-bottom: 1px solid var(--commerce-list-line);
  background: var(--surface-muted);
}

.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListTableHeadCell {
  min-height: 58px;
  background: var(--surface-muted);
}

.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListTableRow:not(.cuiDataListTableHead) {
  min-height: 116px;
  height: 116px;
  border-bottom: 1px solid var(--commerce-list-line);
}

.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListTableRow:last-child {
  border-bottom: 0;
}

.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListTableCell,
.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListSortedCell {
  min-height: 116px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.hotTagTable .cuiDataListTableHead > *,
.hotTagTable .cuiDataListTableRow > * {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}

.hotTagTable .cuiDataListTableHead > *:first-child,
.hotTagTable .cuiDataListTableRow > *:first-child {
  justify-content: flex-start;
}

.hotTagTable .cuiDataListSortableHead.active,
.hotTagTable .cuiDataListSortedCell.active,
.hotTagTable .cuiDataListSortedCell.active * {
  color: var(--hot-video-accent);
}

.hotTagTable .cuiDataListSortableHead.active {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-muted));
}

.hotTagTable .cuiDataListSortedCell.active {
  background: var(--hot-video-panel-strong);
}

.hotTagName {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 850;
}

.hotTagName button {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text-3);
  padding: 0;
}

.hotTagPreviewList {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hotTagPreviewList img {
  width: 58px;
  height: 82px;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--tag-bg);
  object-fit: cover;
}

.aiCommerceFilterPanel {
  gap: 16px;
}

.aiCommerceDateInput {
  width: 176px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-1);
  padding: 0 10px;
}

.aiCommerceDateInput input {
  min-width: 0;
  flex: 1 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.aiCommerceRankPanel {
  min-width: 0;
  display: grid;
  gap: 16px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--hot-video-panel);
  box-shadow: var(--shadow-light);
  padding: 18px 16px 16px;
}

.aiCommerceRankPanel > header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--hot-video-border);
  margin: -18px -16px 0;
  padding: 18px 16px;
}

.aiCommerceRankPanel h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
}

.aiCommerceRankPanel > header button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}

.aiCommerceTabs {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.aiCommerceTabs button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
}

.aiCommerceTabs button.active {
  border-color: var(--primary-border);
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.aiCommerceGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  gap: 16px;
}

.aiCommerceCard {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.aiCommerceCover {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--tag-bg);
  box-shadow: var(--shadow-light);
}

.aiCommerceCover > img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
}

.aiCommerceCover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 7, 20, 0.22), transparent 36%, rgba(5, 7, 20, 0.84));
}

.aiCommerceBadges,
.aiCommerceQuickActions,
.aiCommerceMetrics,
.aiCommerceProduct {
  position: absolute;
  z-index: 1;
}

.aiCommerceBadges,
.aiCommerceQuickActions {
  top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.aiCommerceBadges {
  left: 12px;
}

.aiCommerceQuickActions {
  right: 12px;
}

.aiCommerceBadges span,
.aiCommerceQuickActions button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.52);
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.aiCommerceQuickActions button {
  background: rgba(255, 255, 255, 0.88);
  color: #111827;
}

.aiCommerceMetrics {
  right: 12px;
  bottom: 112px;
  left: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.aiCommerceMetrics span,
.aiCommerceProduct {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(5, 7, 20, 0.62);
  color: #ffffff;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.aiCommerceMetrics span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
}

.aiCommerceMetrics strong {
  font-size: 13px;
  font-weight: 950;
}

.aiCommerceMetrics em {
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.aiCommerceProduct {
  right: 12px;
  bottom: 18px;
  left: 12px;
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
}

.aiCommerceProduct img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
}

.aiCommerceProduct div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.aiCommerceProduct strong,
.aiCommerceProduct em,
.aiCommerceProduct span b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiCommerceProduct strong {
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.aiCommerceProduct em,
.aiCommerceProduct span b {
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.aiCommerceProduct span {
  min-width: 76px;
  display: grid;
  justify-items: end;
  gap: 4px;
}

.aiCommerceActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.aiCommerceActions button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  background: var(--hot-video-accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 920;
}

.aiCommerceActions button:last-child {
  background: var(--grad);
}

.videoMonitorPage {
  gap: 10px;
  padding: 16px 22px;
}

.videoMonitorPage > .videoMonitorTabs,
.videoMonitorPage > .videoMonitorPanel {
  width: min(1180px, 100%);
  justify-self: center;
}

.videoMonitorTabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  border-bottom: 1px solid var(--hot-video-border);
  background: transparent;
}

.videoMonitorTabs button {
  position: relative;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  padding: 0 4px;
  font-size: 15px;
  font-weight: 900;
}

.videoMonitorTabs button.active {
  color: var(--hot-video-accent);
}

.videoMonitorTabs button.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--hot-video-accent);
}

.videoMonitorPanel {
  display: grid;
  gap: 14px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--hot-video-panel);
  box-shadow: var(--shadow-light);
  padding: 20px 28px 18px;
}

.videoMonitorCreatePanel {
  width: 100% !important;
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  row-gap: 18px;
  padding: 20px 28px 22px;
}

.videoMonitorCreatePanel .videoMonitorHero {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  border-bottom: 1px solid var(--hot-video-border);
  padding-bottom: 16px;
}

.videoMonitorCreatePanel .videoMonitorHero p {
  max-width: 860px;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/compat/web-tail/web-tail-008.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Ordered read-only compatibility shard 008. Do not edit. */

.videoMonitorCreatePanel .videoMonitorBlock {
  min-height: 194px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.videoMonitorCreatePanel .videoMonitorBlock:first-of-type {
  grid-column: 1;
  grid-row: 2;
}

.videoMonitorCreatePanel .videoMonitorDurationBlock {
  grid-column: 1;
  grid-row: 3;
  min-height: 116px;
}

.videoMonitorCreatePanel .videoMonitorFooter {
  grid-column: 1;
  grid-row: 4;
}

.videoMonitorCreatePanel .videoMonitorLivePanel {
  grid-column: 1 / -1;
}

.videoMonitorAccountBlock {
  order: 1;
}

.videoMonitorScheduleBlock {
  order: 2;
}

.videoMonitorDurationBlock {
  order: 3;
}

.videoMonitorFooter {
  order: 4;
}

.videoMonitorHero {
  max-width: 720px;
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0 auto;
  text-align: center;
}

.videoMonitorHero > span {
  width: 0;
  height: 0;
  display: none;
  place-items: center;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.videoMonitorHero h1,
.videoMonitorHistoryHeader h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 22px;
  font-weight: 950;
  letter-spacing: 0;
}

.videoMonitorHero p,
.videoMonitorHistoryHeader p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}

.videoMonitorModeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(716px, 100%);
  margin: 4px auto 0;
}

.videoMonitorModeGrid button,
.videoMonitorDurationGrid button {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
  padding: 13px 16px;
  text-align: left;
}

.videoMonitorModeGrid button {
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
}

.videoMonitorModeGrid button svg {
  margin-top: 1px;
  color: var(--text-3);
}

.videoMonitorModeGrid button strong,
.videoMonitorDurationGrid button span {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 930;
}

.videoMonitorModeGrid button span {
  grid-column: 2;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.videoMonitorModeGrid button.active,
.videoMonitorDurationGrid button.active {
  border-color: var(--primary-border);
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  box-shadow: inset 0 0 0 1px var(--primary-border);
}

.videoMonitorModeGrid button.active svg,
.videoMonitorModeGrid button.active strong,
.videoMonitorDurationGrid button.active span {
  color: var(--hot-video-accent);
}

.videoMonitorBlock {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--hot-video-border);
  padding-top: 14px;
}

.videoMonitorBlock > header {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
}

.videoMonitorBlock h2 {
  position: relative;
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 950;
}

.videoMonitorBlock h2::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: var(--hot-video-accent);
  opacity: 0.72;
}

.videoMonitorBlock > header span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
  display: none;
}

.videoMonitorSearch {
  height: 46px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-self: stretch;
  overflow: hidden;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--control-bg);
}

.videoMonitorSearch input {
  min-width: 0;
  flex: 1 1;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
}

.videoMonitorSearch button {
  width: 56px;
  height: 100%;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--hot-video-border);
  background: var(--hot-video-accent);
  color: #ffffff;
}

.videoMonitorPreview {
  min-height: 132px;
  display: grid;
  place-items: center;
  gap: 5px;
  border: 1px dashed #d8dde6;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--text-3);
  padding: 16px 20px;
  text-align: center;
}

.videoMonitorPreview > strong {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 900;
}

.videoMonitorPreview > span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.videoMonitorPreview.hasVideo {
  min-height: 74px;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  place-items: stretch;
  align-items: center;
  border-style: solid;
  background: var(--hot-video-panel);
  text-align: left;
}

.videoMonitorPreviewCover {
  width: 72px;
  height: 96px;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  background: #eef1f5;
}

.videoMonitorPreviewIcon {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.videoMonitorPreview.hasVideo div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.videoMonitorPreview.hasVideo p {
  overflow: hidden;
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoMonitorPreview.hasVideo button,
.videoMonitorHistoryHeader button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 850;
}

.videoMonitorDurationGrid {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 38px;
  flex-wrap: wrap;
}

.videoMonitorDurationGrid button {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
  padding: 0;
}

.videoMonitorDurationGrid button::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 1px solid var(--hot-video-border);
  border-radius: 999px;
  background: var(--control-bg);
}

.videoMonitorDurationGrid button.active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.videoMonitorDurationGrid button.active::before {
  border: 4px solid var(--hot-video-accent);
  background: #ffffff;
}

.videoMonitorDurationGrid button small {
  display: none;
}

.videoMonitorScheduleBlock {
  padding-top: 14px;
}

.videoMonitorScheduleBlock .videoMonitorBlock > header span,
.videoMonitorScheduleBlock header span {
  display: inline;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.videoMonitorDateRange {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.videoMonitorDateRange label {
  min-width: 190px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--hot-video-border);
  color: var(--text-2);
}

.videoMonitorDateRange label span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
  white-space: nowrap;
}

.videoMonitorDateRange input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  font-size: 12px;
  font-weight: 820;
}

.videoMonitorDateRange em {
  color: var(--text-2);
  font-style: normal;
  font-weight: 900;
}

.videoMonitorDateRange svg {
  color: var(--text-3);
}

.videoMonitorFooter {
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border: 0;
  border-top: 1px solid var(--hot-video-border);
  border-radius: 0;
  background: transparent;
  padding: 16px 0 0;
}

.videoMonitorPrimary {
  min-width: 112px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  background: var(--hot-video-accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 930;
}

.videoMonitorPrimary:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.videoMonitorFooter span {
  flex-basis: 100%;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.5;
  text-align: left;
}

.videoMonitorHistoryPanel {
  gap: 16px;
  width: 100% !important;
  max-width: none;
  align-content: start;
  padding: 16px 20px 18px;
}

.videoMonitorHistoryHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--hot-video-border);
  margin: 0;
  padding: 0 0 14px;
}

.videoMonitorHistoryHeader > div {
  display: grid;
  gap: 8px;
}

.videoMonitorHistoryList {
  display: grid;
  gap: 12px;
}

.videoMonitorHistoryItem {
  display: grid;
  gap: 14px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--control-bg);
  padding: 16px;
}

.videoMonitorHistoryItem > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.videoMonitorHistoryItem strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 930;
}

.videoMonitorHistoryItem span {
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoMonitorHistoryItem dl {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.videoMonitorHistoryItem dl div {
  display: grid;
  gap: 4px;
  border-radius: 8px;
  background: var(--hot-video-soft);
  padding: 9px 10px;
}

.videoMonitorHistoryItem dt,
.videoMonitorHistoryItem dd {
  margin: 0;
}

.videoMonitorHistoryItem dt {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 760;
}

.videoMonitorHistoryItem dd {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 900;
}

.hotVideoActions button.active,
.hotTagName button.active {
  border-color: var(--primary-border);
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.aiCommerceQuickActions button.active {
  background: var(--hot-video-accent);
  color: #ffffff;
}

.aiCommerceActions button.active {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.42);
}

.aiCommerceAnalysis {
  display: grid;
  gap: 6px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--hot-video-soft);
  padding: 10px 12px;
}

.aiCommerceAnalysis strong {
  color: var(--hot-video-accent);
  font-size: 13px;
  font-weight: 930;
}

.aiCommerceAnalysis span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.55;
}

.mediaActionToast {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 80;
  min-width: 180px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-medium);
  color: var(--text-1);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 880;
}

.hotVideoTitleLink {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotVideoTitleLink:hover {
  color: var(--hot-video-accent);
}

.mediaVideoDetailPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
  padding: 22px;
  color: var(--text-1);
}

.mediaVideoBreadcrumb,
.mediaVideoDetailTabs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mediaVideoBreadcrumb {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 820;
}

.mediaVideoBreadcrumb a {
  color: var(--text-3);
  text-decoration: none;
}

.mediaVideoBreadcrumb strong,
.mediaVideoBreadcrumb a:hover {
  color: var(--text-1);
}

.mediaVideoDetailTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mediaVideoDetailTitle h1 {
  min-width: 0;
  margin: 0;
  color: var(--text-1);
  font-size: 22px;
  font-weight: 950;
  letter-spacing: 0;
}

.mediaVideoReplicaPrimary {
  flex: 0 0 auto;
  min-width: 136px;
  min-height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 8px;
  background: var(--hot-video-accent, var(--primary));
  color: #ffffff !important;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none !important;
}

.mediaVideoReplicaPrimary:hover {
  color: #ffffff !important;
  filter: brightness(0.95);
}

.mediaVideoDetailHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;
}

.mediaVideoDetailMain,
.mediaVideoCreatorCard,
.mediaVideoDetailPanel {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-light);
}

.mediaVideoDetailMain {
  position: relative;
  min-height: 360px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding: 16px;
}

.mediaVideoPoster {
  position: relative;
  width: 206px;
  height: 274px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--tag-bg);
}

.mediaVideoPoster img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mediaVideoPoster span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.18);
}

.mediaVideoCopy {
  width: 206px;
  min-height: 40px;
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  background: var(--hot-video-accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 920;
}

.mediaVideoCopy.copied {
  background: var(--success);
}

.mediaVideoMeta {
  min-width: 0;
  display: grid;
  gap: 18px;
  padding-top: 18px;
}

.mediaVideoMeta h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 930;
}

.mediaVideoMeta p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 780;
}

.mediaVideoMeta b {
  color: var(--text-3);
  font-weight: 820;
}

.mediaVideoMeta a {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hot-video-accent);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.mediaVideoHeroActions {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  gap: 8px;
}

.mediaVideoHeroActions button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
}

.mediaVideoHeroActions button.active {
  border-color: var(--primary-border);
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.mediaVideoCreatorCard {
  overflow: hidden;
}

.mediaVideoCreatorCard header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
}

.mediaVideoCreatorCard img {
  width: 86px;
  height: 86px;
  border-radius: 999px;
  object-fit: cover;
}

.mediaVideoCreatorCard h2 {
  margin: 0 0 6px;
  color: var(--text-1);
  font-size: 17px;
  font-weight: 950;
}

.mediaVideoCreatorCard span {
  display: block;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 780;
}

.mediaVideoCreatorCard em {
  width: max-content;
  display: inline-flex;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--text-2);
  padding: 6px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 820;
}

.mediaVideoCreatorCard dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  margin: 0;
  padding: 22px;
}

.mediaVideoCreatorCard dl div {
  display: grid;
  gap: 8px;
  padding: 12px;
  text-align: center;
}

.mediaVideoCreatorCard dt,
.mediaVideoCreatorCard dd {
  margin: 0;
}

.mediaVideoCreatorCard dd {
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
  order: -1;
}

.mediaVideoCreatorCard dt {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 820;
}

.mediaVideoDetailTabs {
  border-bottom: 1px solid var(--line-dark);
  padding-left: 16px;
}

.mediaVideoDetailTabs button {
  position: relative;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  padding: 0 0;
  font-size: 14px;
  font-weight: 900;
}

.mediaVideoDetailTabs button.active {
  color: var(--text-1);
}

.mediaVideoDetailTabs button.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--hot-video-accent);
}

.mediaVideoDetailPanel {
  display: grid;
  gap: 20px;
  padding: 24px 16px;
}

.mediaVideoDetailPanel h2,
.mediaVideoTrendHeader h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
  font-weight: 950;
}

.mediaVideoDetailPanel h2 span {
  margin-left: 10px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 780;
}

.mediaVideoMetricGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.mediaVideoMetricGrid article {
  min-height: 118px;
  display: grid;
  align-content: space-between;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 20px 16px;
}

.mediaVideoMetricGrid strong {
  color: var(--text-1);
  font-size: 24px;
  font-weight: 950;
}

.mediaVideoMetricGrid span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 850;
}

.mediaVideoTrendHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mediaVideoTrendHeader div {
  display: inline-flex;
  gap: 8px;
}

.mediaVideoTrendHeader button {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}

.mediaVideoTrendHeader button.active {
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.mediaVideoTrendChart {
  width: 100%;
  height: 270px;
}

.mediaVideoTrendChart line {
  stroke: var(--line-dark);
}

.mediaVideoTrendChart path {
  fill: none;
  stroke: var(--hot-video-accent);
  stroke-width: 3;
}

.mediaVideoTrendChart circle {
  fill: var(--hot-video-accent);
}

.mediaVideoTrendChart text {
  fill: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.mediaVideoEmptyBox {
  min-height: 130px;
  display: grid;
  place-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 820;
}

.mediaSimilarVideoGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.mediaSimilarVideoGrid article {
  min-width: 0;
  display: grid;
  gap: 10px;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 14px;
}

.mediaSimilarVideoGrid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
}

.mediaSimilarVideoGrid strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaSimilarVideoGrid span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
}

.mediaVideoDetailState {
  min-height: 300px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 860;
}

.mediaVideoDetailPage {
  background: var(--surface-muted);
  gap: 14px;
  padding: 18px 22px 24px;
}

.mediaVideoDetailHero {
  grid-template-columns: minmax(0, 1fr) 464px;
}

.mediaVideoDetailMain,
.mediaVideoCreatorCard,
.mediaVideoDetailPanel {
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: none;
}

.mediaVideoDetailMain {
  min-height: 360px;
  grid-template-columns: 206px minmax(0, 1fr);
  gap: 24px;
  padding: 16px;
}

.mediaVideoLeftRail {
  display: grid;
  gap: 8px;
}

.mediaVideoPoster {
  height: 274px;
}

.mediaVideoMeta {
  align-content: start;
  gap: 20px;
  padding: 18px 0 0;
}

.mediaVideoMeta p em {
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--text-2);
  padding: 5px 12px;
  font-style: normal;
  font-weight: 820;
}

.mediaVideoMetaActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mediaVideoHeroActions {
  gap: 8px;
}

.mediaVideoHeroActions a,
.mediaVideoHeroActions button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
  text-decoration: none;
}

.mediaVideoReplica {
  width: max-content;
  min-width: 148px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  background: var(--hot-video-accent, var(--primary));
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 920;
  text-decoration: none !important;
}

.mediaVideoReplica:hover {
  background: color-mix(in srgb, var(--hot-video-accent) 88%, #000000);
  color: #ffffff;
}

.mediaVideoLeftRail .mediaVideoReplica {
  width: 206px;
}

.mediaVideoHeroActions a:hover,
.mediaVideoHeroActions button:hover {
  border-color: var(--primary-border);
  color: var(--hot-video-accent);
}

.mediaVideoCreatorCard header {
  min-height: 134px;
}

.mediaVideoCreatorCard dl {
  min-height: 222px;
  align-content: center;
}

.mediaVideoDetailTabs {
  position: sticky;
  top: 0;
  z-index: 5;
  gap: 28px;
  background: var(--surface-muted);
  padding: 0 16px;
}

.mediaVideoDetailPanel {
  scroll-margin-top: 62px;
  padding: 0;
  overflow: hidden;
}

.mediaVideoOverviewPanel,
.mediaVideoTrendPanel,
.mediaVideoProductsPanel,
.mediaVideoSimilarPanel {
  background: var(--surface-panel);
}

.mediaVideoDetailPanel > h2,
.mediaVideoTrendHeader {
  min-height: 80px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(226, 232, 240, 0.72);
  padding: 0 20px;
}

.mediaVideoMetricGrid,
.mediaVideoTrendMetrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin: 16px;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 18px;
}

.mediaVideoTrendMetrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 14px;
}

.mediaVideoMetricGrid article,
.mediaVideoTrendMetrics article {
  min-height: 132px;
  display: grid;
  align-content: space-between;
  border-radius: 8px;
  background: #ffffff;
  padding: 22px 16px 20px;
}

.mediaVideoMetricGrid strong,
.mediaVideoTrendMetrics strong {
  color: var(--text-1);
  font-size: 26px;
  font-weight: 950;
}

.mediaVideoMetricGrid span,
.mediaVideoTrendMetrics span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 850;
}

.mediaVideoTrendHeader {
  justify-content: space-between;
  background: #ffffff;
}

.mediaVideoTrendControls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mediaVideoTrendControls span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
}

.mediaVideoTrendControls button {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: #f5f6f8;
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}

.mediaVideoTrendControls button.active {
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.mediaVideoChartShell {
  margin: 0 16px 24px;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 24px;
}

.mediaVideoChartToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.mediaVideoChartToolbar > span {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 880;
}

.mediaVideoChartToolbar div {
  display: inline-flex;
  gap: 8px;
}

.mediaVideoChartToolbar button {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-2);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
}

.mediaVideoChartToolbar button.active {
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.mediaVideoTrendChart {
  height: 300px;
}

.mediaVideoProductTable {
  margin: 16px;
  overflow: hidden;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 12px;
}

.mediaVideoProductTable .head {
  min-height: 56px;
  display: grid;
  grid-template-columns: 1.5fr 0.85fr 0.85fr 0.85fr 0.85fr 0.8fr 0.9fr 0.7fr;
  align-items: center;
  border-radius: 8px 8px 0 0;
  background: #eef1f5;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 930;
}

.mediaVideoProductTable .head span {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 18px;
}

.mediaVideoProductTable .head span.active {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-muted));
  color: var(--hot-video-accent);
}

.mediaVideoProductTable .empty {
  min-height: 166px;
  display: grid;
  place-items: center;
  gap: 8px;
  background: #ffffff;
  border-radius: 0 0 8px 8px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 820;
}

.mediaVideoSimilarPanel {
  padding-bottom: 24px;
}

.mediaSimilarVideoGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 16px 0;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 18px;
}

.mediaSimilarVideoGrid article {
  overflow: hidden;
  gap: 0;
  background: #ffffff;
  padding: 0;
}

.mediaSimilarVideoGrid article > header {
  min-height: 98px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
}

.mediaSimilarVideoGrid article > header img {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
}

.mediaSimilarVideoGrid article > header div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.mediaSimilarVideoGrid article > header strong,
.mediaSimilarVideoGrid article > header em,
.mediaSimilarVideoGrid article > header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaSimilarVideoGrid article > header strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
}

.mediaSimilarVideoGrid article > header em {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--text-2);
  padding: 4px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 780;
}

.mediaSimilarVideoGrid article > header span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
}

.mediaSimilarCover {
  position: relative;
  width: calc(100% - 64px);
  margin: 24px auto 12px;
}

.mediaSimilarCover > img {
  width: 100%;
  aspect-ratio: 1 / 1.08;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.mediaSimilarCover > button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  transform: translate(-50%, -50%);
}

.mediaSimilarCover dl {
  position: absolute;
  right: 8px;
  bottom: 10px;
  display: grid;
  gap: 7px;
  margin: 0;
}

.mediaSimilarCover dl div {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.52);
  color: #ffffff;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 850;
}

.mediaSimilarCover dt,
.mediaSimilarCover dd {
  margin: 0;
}

.mediaSimilarVideoGrid article > p {
  min-height: 44px;
  overflow: hidden;
  margin: 0;
  color: var(--text-1);
  padding: 0 20px 18px;
  font-size: 13px;
  font-weight: 820;
  line-height: 1.55;
}

/* Final detail-page overrides: keep the FastMoss-like hierarchy clean. */

.mediaVideoDetailPage {
  background: #f3f5f8;
  gap: 14px;
  padding: 18px 22px 24px;
}

.mediaVideoDetailTitle {
  min-height: 48px;
}

.mediaVideoReplicaPrimary {
  border: 0 !important;
  background: var(--hot-video-accent, #7c3aed) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.mediaVideoReplicaPrimary:hover,
.mediaVideoReplicaPrimary:focus-visible {
  background: var(--hot-video-accent, #7c3aed) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  outline: none;
}

.mediaVideoDetailMain,
.mediaVideoCreatorCard,
.mediaVideoDetailPanel {
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.mediaVideoDetailPanel {
  overflow: hidden;
  padding: 0 !important;
}

.mediaVideoDetailPanel > h2,
.mediaVideoTrendHeader {
  min-height: 68px;
  border-bottom: 1px solid #eef1f5 !important;
  background: #ffffff;
  padding: 0 16px !important;
}

.mediaVideoMetricGrid,
.mediaVideoTrendMetrics,
.mediaVideoChartShell,
.mediaVideoProductTable,
.mediaSimilarVideoGrid {
  margin: 16px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f7f8fa !important;
  box-shadow: none !important;
}

.mediaVideoMetricGrid,
.mediaVideoTrendMetrics {
  padding: 16px !important;
}

.mediaVideoMetricGrid article,
.mediaVideoTrendMetrics article,
.mediaVideoProductTable .empty,
.mediaSimilarVideoGrid article {
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.mediaVideoChartShell {
  padding: 24px !important;
}

.mediaVideoChartToolbar button {
  background: #ffffff !important;
}

.mediaVideoProductTable {
  padding: 12px !important;
}

.mediaVideoProductTable .head {
  border: 0 !important;
  background: #eef1f5 !important;
}

.mediaSimilarVideoGrid {
  padding: 16px !important;
}

@media (max-width: 1500px) {
  .aiCommerceGrid {
    grid-template-columns: repeat(3, minmax(280px, 1fr));
  }
}

@media (max-width: 1200px) {
  .videoMonitorDurationGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .videoMonitorHistoryItem dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.mediaPrototypePage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
  padding: 22px;
}

.mediaHero,
.mediaFilterBar,
.mediaToolbar,
.mediaMetricCard,
.mediaDetailPanel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.mediaHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
}

.mediaEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 850;
}

.mediaHero h1 {
  margin: 8px 0 6px;
  color: var(--text);
  font-size: 26px;
  font-weight: 950;
  letter-spacing: 0;
}

.mediaHero p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.mediaHeroActions,
.mediaTableActions,
.mediaSegment,
.mediaToolbar > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mediaHeroActions button,
.mediaSearchBox button,
.mediaTableActions button,
.mediaTableActions a,
.mediaDetailCover button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
}

.mediaHeroActions button {
  min-height: 36px;
  gap: 7px;
  border-radius: 8px;
  padding: 0 12px;
}

.mediaHeroActions button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.mediaFilterBar {
  display: grid;
  grid-template-columns: minmax(300px, 1.4fr) repeat(6, minmax(130px, 0.65fr));
  gap: 10px;
  padding: 14px;
}

.mediaSearchBox {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 40px;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--input-bg);
  padding: 0 8px 0 13px;
}

.mediaSearchBox input {
  min-width: 0;
  flex: 1 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 760;
}

.mediaSearchBox button {
  height: 28px;
  border-radius: 999px;
  color: var(--primary);
  padding: 0 12px;
}

.mediaFilterSelect,
.mediaSortSelect {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.mediaFilterSelect span,
.mediaSortSelect span,
.mediaToolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.mediaFilterSelect select,
.mediaSortSelect select {
  min-width: 0;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 820;
  outline: 0;
  padding: 0 12px;
}

.mediaToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
}

.mediaSegment {
  padding: 3px;
  border-radius: 999px;
  background: var(--surface);
}

.mediaSegment button {
  min-height: 30px;
  min-width: 52px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}

.mediaSegment button.active {
  background: var(--primary);
  color: #ffffff;
}

.mediaMetricGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.mediaMetricCard {
  display: flex;
  gap: 12px;
  padding: 14px;
}

.mediaMetricCard > span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.mediaMetricCard strong,
.mediaMetricCard em,
.mediaMetricCard small {
  display: block;
}

.mediaMetricCard strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
}

.mediaMetricCard em {
  margin-top: 2px;
  color: var(--text);
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

.mediaMetricCard small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mediaMainGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 14px;
}

.mediaVideoTablePanel {
  min-width: 0;
}

.mediaVideoTablePanel .cuiDataListRow {
  cursor: pointer;
}

.mediaVideoTablePanel .cuiDataListRow.is-selected {
  background: color-mix(in srgb, var(--primary) 7%, var(--panel));
}

.mediaVideoCell,
.mediaCreatorCell {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.mediaCover {
  position: relative;
  width: 54px;
  height: 78px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface);
}

.mediaCover img,
.mediaCreatorCell img,
.mediaDetailCover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mediaCover span,
.mediaCover b {
  position: absolute;
  left: 4px;
  border-radius: 5px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  padding: 3px 4px;
}

.mediaCover span {
  bottom: 4px;
  background: rgba(15, 23, 42, 0.78);
}

.mediaCover b {
  top: 4px;
  background: var(--danger);
}

.mediaVideoText,
.mediaCreatorCell div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.mediaVideoText strong,
.mediaCreatorCell strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaVideoText span,
.mediaVideoText em,
.mediaCreatorCell span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaCreatorCell img {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.mediaStrongMetric {
  color: var(--text);
  font-weight: 950;
}

.mediaTableActions button,
.mediaTableActions a {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  text-decoration: none;
}

.mediaDetailPanel {
  position: sticky;
  top: 88px;
  overflow: hidden;
}

.mediaDetailPanel.empty {
  display: grid;
  min-height: 360px;
  align-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--muted);
  padding: 22px;
  text-align: center;
}

.mediaDetailPanel.empty strong {
  color: var(--text);
  font-size: 16px;
}

.mediaDetailPanel.empty span {
  max-width: 240px;
  font-size: 13px;
  line-height: 1.5;
}

.mediaDetailCover {
  position: relative;
  height: 230px;
  background: var(--surface);
}

.mediaDetailCover button {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
}

.mediaDetailBody {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.mediaDetailTag {
  width: max-content;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  padding: 5px 9px;
}

.mediaDetailBody h2 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.35;
}

.mediaDetailBody p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 730;
  line-height: 1.55;
}

.mediaDetailStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mediaDetailStats span {
  display: grid;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.mediaDetailStats b {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.mediaDetailBody section {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.mediaDetailBody section strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.videoMonitorLivePanel {
  display: grid;
  gap: 16px;
  border-radius: 8px;
  background: #ffffff;
  padding: 18px;
}

.videoMonitorLivePanel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.videoMonitorLivePanel h2,
.videoMonitorTrendPanel h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
}

.videoMonitorLivePanel p {
  max-width: 760px;
  overflow: hidden;
  margin: 6px 0 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoMonitorLivePanel > header > strong {
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
}

.videoMonitorLiveStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.videoMonitorLiveStats article {
  min-height: 104px;
  display: grid;
  align-content: space-between;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 18px 16px;
}

.videoMonitorLiveStats strong {
  color: var(--text-1);
  font-size: 24px;
  font-weight: 950;
}

.videoMonitorLiveStats span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 850;
}

.videoMonitorTrendPanel {
  display: grid;
  gap: 12px;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 18px;
}

.videoMonitorTrendPanel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.videoMonitorTrendPanel > header span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
}

.videoMonitorTrendLegend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
}

.videoMonitorTrendLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 850;
}

.videoMonitorTrendLegend span::before {
  content: '';
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

.videoMonitorTrendLegend .likes {
  color: var(--hot-video-accent);
}

.videoMonitorTrendLegend .comments {
  color: #2563eb;
}

.videoMonitorTrendLegend .shares {
  color: #16a34a;
}

.videoMonitorTrendChart {
  width: 100%;
  height: 300px;
  display: block;
}

.videoMonitorTrendChart line {
  stroke: #d9e0ea;
  stroke-width: 1;
}

.videoMonitorTrendChart line.axis {
  stroke: #8f99a8;
  stroke-width: 1.3;
}

.videoMonitorTrendChart path {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.videoMonitorTrendChart path.likes {
  stroke: var(--hot-video-accent);
}

.videoMonitorTrendChart path.comments {
  stroke: #2563eb;
}

.videoMonitorTrendChart path.shares {
  stroke: #16a34a;
}

.videoMonitorTrendChart text {
  fill: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.videoMonitorTrendChart text.yTick {
  text-anchor: end;
}

.videoMonitorSampleList {
  overflow: hidden;
  border-radius: 8px;
  background: #f7f8fa;
}

.videoMonitorSampleList header,
.videoMonitorSampleList article {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(120px, 0.5fr));
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 16px;
}

.videoMonitorSampleList header {
  background: #eef1f5;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
}

.videoMonitorSampleList article {
  border-top: 1px solid #eef1f5;
  background: #ffffff;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
}

.videoMonitorSampleList b {
  color: var(--text-1);
  font-weight: 900;
}

.videoMonitorBreadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 820;
}

.videoMonitorBreadcrumb button {
  border: 0;
  background: transparent;
  color: var(--text-3);
  padding: 0;
  font: inherit;
}

.videoMonitorBreadcrumb strong,
.videoMonitorBreadcrumb button:hover {
  color: var(--text-1);
}

.videoMonitorDetailHero,
.videoMonitorDetailTrend,
.videoMonitorDetailSamples {
  border-radius: 8px;
  background: #ffffff;
}

.videoMonitorDetailHero {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}

.videoMonitorDetailCover {
  position: relative;
  width: 150px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  background: #eef1f5;
}

.videoMonitorDetailCover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.videoMonitorDetailCover span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--hot-video-accent);
  color: #ffffff;
  padding: 8px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.videoMonitorDetailSummary {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 8px 0;
}

.videoMonitorDetailSummary header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.videoMonitorDetailSummary h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
}

.videoMonitorDetailSummary p {
  overflow: hidden;
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoMonitorDetailSummary button,
.videoMonitorDetailTrend > header button,
.videoMonitorHistoryActions button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  background: #f5f6f8;
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}

.videoMonitorDetailMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 174px));
  gap: 14px;
}

.videoMonitorDetailMetrics article {
  min-height: 112px;
  display: grid;
  align-content: space-between;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 18px 16px;
}

.videoMonitorDetailMetrics strong {
  color: var(--text-1);
  font-size: 24px;
  font-weight: 950;
}

.videoMonitorDetailMetrics span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 850;
}

.videoMonitorDetailTrend {
  overflow: hidden;
}

.videoMonitorDetailTrend > header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #eef1f5;
  padding: 0 16px;
}

.videoMonitorDetailTrend h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
  font-weight: 950;
}

.videoMonitorDetailTrend .videoMonitorTrendPanel {
  margin: 16px;
}

.videoMonitorDetailSamples {
  overflow: hidden;
}

.videoMonitorDetailSamples header,
.videoMonitorDetailSamples article {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(140px, 0.5fr));
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 16px;
}

.videoMonitorDetailSamples header {
  background: #eef1f5;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
}

.videoMonitorDetailSamples article {
  border-top: 1px solid #eef1f5;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
}

.videoMonitorDetailSamples b {
  color: var(--text-1);
  font-weight: 900;
}

.videoMonitorHistoryActions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px !important;
  padding: 0 !important;
}

.videoMonitorHistoryActions button:hover,
.videoMonitorDetailTrend > header button:hover,
.videoMonitorDetailSummary button:hover {
  color: var(--hot-video-accent);
}

.videoMonitorHistoryFilters {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 0;
  padding-top: 0;
}

.videoMonitorHistoryFilters strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 850;
}

.videoMonitorHistoryFilters button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: #f5f6f8;
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 850;
}

.videoMonitorHistoryCards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  width: 100%;
  padding-top: 10px;
}

.videoMonitorHistoryCard {
  min-width: 0;
  min-height: 330px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  border: 1px solid #d7dce4;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

.videoMonitorHistoryCard header {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
}

.videoMonitorHistoryCard .cover {
  width: 72px;
  height: 92px;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: #eef1f5;
  padding: 0;
}

.videoMonitorHistoryCard .cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.videoMonitorHistoryCard .title {
  max-width: 100%;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--text-1);
  padding: 2px 0 0;
  text-align: left;
  font-size: 13px;
  font-weight: 900;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoMonitorHistoryCard .title:hover {
  color: var(--hot-video-accent);
}

.videoMonitorHistoryCard header span {
  display: block;
  margin-top: 8px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 780;
}

.videoMonitorHistoryCard header small {
  display: block;
  margin-top: 18px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.videoMonitorHistoryCard .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 4px;
  background: #f7f8fa;
  margin-top: 10px;
  padding: 6px 8px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 850;
}

.videoMonitorHistoryCard .meta button {
  min-height: 28px;
  margin-left: auto;
  border: 1px solid var(--hot-video-accent);
  border-radius: 999px;
  background: #ffffff;
  color: var(--hot-video-accent);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
}

.videoMonitorHistoryCard .trend {
  position: relative;
  display: grid;
  gap: 7px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 8px;
}

.videoMonitorHistoryCard .trend > span {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 850;
}

.videoMonitorHistoryCard .trend button {
  position: absolute;
  top: 52%;
  left: 50%;
  z-index: 2;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--hot-video-accent);
  color: #ffffff;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 900;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.videoMonitorHistoryCard .trend:hover button {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.02);
}

.videoMonitorHistoryCard .trend svg {
  width: 100%;
  height: 104px;
  display: block;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 47, 109, 0.08), rgba(255, 47, 109, 0.015));
}

.videoMonitorHistoryCard .trend:hover svg {
  filter: saturate(0.88) brightness(0.98);
}

.videoMonitorHistoryCard .trend path {
  fill: none;
  stroke: var(--hot-video-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.videoMonitorHistoryCard footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 820;
}

.videoMonitorHistoryCard footer b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-1);
  font-weight: 900;
}

.videoMonitorHistoryCard footer button {
  min-height: 28px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 8px;
  background: #f5f6f8;
  color: var(--text-2);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 1440px) {
  .videoMonitorHistoryCards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .videoMonitorCreatePanel {
    grid-template-columns: 1fr;
  }

  .videoMonitorCreatePanel .videoMonitorBlock:first-of-type,
  .videoMonitorCreatePanel .videoMonitorDurationBlock,
  .videoMonitorCreatePanel .videoMonitorFooter {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 1120px) {
  .videoMonitorHistoryCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mediaDetailV2Page {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 14px;
  background: #f3f5f8;
  color: var(--text-1);
  padding: 18px 22px 24px;
}

.mediaDetailV2Crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 820;
}

.mediaDetailV2Crumb a {
  color: var(--text-3);
  text-decoration: none;
}

.mediaDetailV2Crumb strong,
.mediaDetailV2Crumb a:hover {
  color: var(--text-1);
}

.mediaDetailV2Header {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mediaDetailV2Header h1 {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--text-1);
  font-size: 22px;
  font-weight: 950;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaDetailV2Replica {
  width: max-content;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 8px;
  background: var(--hot-video-accent, #7c3aed);
  color: #ffffff;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.mediaDetailV2Replica:hover,
.mediaDetailV2Replica:focus-visible {
  color: #ffffff;
  text-decoration: none;
}

.mediaDetailV2Hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;
}

.mediaDetailV2VideoCard,
.mediaDetailV2Creator,
.mediaDetailV2Panel,
.mediaDetailV2State {
  border-radius: 8px;
  background: #ffffff;
}

.mediaDetailV2VideoCard {
  position: relative;
  min-height: 332px;
  display: grid;
  grid-template-columns: 206px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding: 16px;
}

.mediaDetailV2Poster {
  position: relative;
  width: 206px;
  height: 300px;
  overflow: hidden;
  border-radius: 8px;
  background: #eef1f5;
}

.mediaDetailV2Poster img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mediaDetailV2Poster span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.18);
  color: #ffffff;
}

.mediaDetailV2Meta {
  min-width: 0;
  display: grid;
  gap: 18px;
  padding: 18px 60px 0 0;
}

.mediaDetailV2Meta h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 930;
  line-height: 1.45;
}

.mediaDetailV2Meta dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.mediaDetailV2Meta dl div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mediaDetailV2Meta dt,
.mediaDetailV2Meta dd {
  margin: 0;
  font-size: 14px;
}

.mediaDetailV2Meta dt {
  min-width: 88px;
  color: var(--text-3);
  font-weight: 820;
}

.mediaDetailV2Meta dd {
  color: var(--text-2);
  font-weight: 780;
}

.mediaDetailV2Meta a {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hot-video-accent);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.mediaDetailV2Links {
  display: grid;
  justify-items: start;
  gap: 16px;
}

.mediaDetailV2IconActions {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  gap: 8px;
}

.mediaDetailV2IconActions button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #e5e9f0;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text-2);
}

.mediaDetailV2IconActions button.active {
  border-color: var(--primary-border);
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.mediaDetailV2Creator {
  overflow: hidden;
}

.mediaDetailV2Creator header {
  min-height: 134px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
}

.mediaDetailV2Creator header img {
  width: 86px;
  height: 86px;
  border-radius: 999px;
  object-fit: cover;
}

.mediaDetailV2Creator h2 {
  margin: 0 0 6px;
  color: var(--text-1);
  font-size: 17px;
  font-weight: 950;
}

.mediaDetailV2Creator span {
  display: block;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 780;
}

.mediaDetailV2Creator em {
  width: max-content;
  display: inline-flex;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--text-2);
  padding: 6px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 820;
}

.mediaDetailV2Creator dl {
  min-height: 198px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  margin: 0;
  padding: 18px 22px 22px;
}

.mediaDetailV2Creator dl div {
  display: grid;
  gap: 8px;
  padding: 12px;
  text-align: center;
}

.mediaDetailV2Creator dt,
.mediaDetailV2Creator dd {
  margin: 0;
}

.mediaDetailV2Creator dd {
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
  order: -1;
}

.mediaDetailV2Creator dt {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 820;
}

.mediaDetailV2Tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid #e6eaf0;
  background: #f3f5f8;
  padding: 0 16px;
}

.mediaDetailV2Tabs button {
  position: relative;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  padding: 0;
  font-size: 14px;
  font-weight: 900;
}

.mediaDetailV2Tabs button.active {
  color: var(--text-1);
}

.mediaDetailV2Tabs button.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--hot-video-accent);
}

.mediaDetailV2Panel {
  scroll-margin-top: 62px;
  overflow: hidden;
}

.mediaDetailV2Panel > h2,
.mediaDetailV2PanelHeader {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #eef1f5;
  padding: 0 16px;
}

.mediaDetailV2Panel h2,
.mediaDetailV2PanelHeader h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
  font-weight: 950;
}

.mediaDetailV2Panel h2 span {
  margin-left: 10px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 780;
}

.mediaDetailV2MetricGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 16px;
  padding: 16px;
}

.mediaDetailV2MetricGrid.overview {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.mediaDetailV2MetricGrid article {
  min-height: 132px;
  display: grid;
  align-content: space-between;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 22px 16px 20px;
}

.mediaDetailV2MetricGrid strong {
  color: var(--text-1);
  font-size: 26px;
  font-weight: 950;
}

.mediaDetailV2MetricGrid span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 850;
}

.mediaDetailV2Range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mediaDetailV2Range span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
}

.mediaDetailV2Range button,
.mediaDetailV2ChartToolbar button {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: #f5f6f8;
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}

.mediaDetailV2Range button.active,
.mediaDetailV2ChartToolbar button.active {
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.mediaDetailV2ChartBox {
  margin: 16px;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 28px 18px 24px;
}

.mediaDetailV2ChartToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.mediaDetailV2ChartToolbar > span {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 880;
}

.mediaDetailV2ChartToolbar div {
  display: inline-flex;
  gap: 8px;
}

.mediaDetailV2ChartToolbar button {
  background: #ffffff;
}

.mediaDetailV2ChartControls {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.mediaDetailV2ChartControls > div {
  display: inline-flex;
  overflow: hidden;
  gap: 0;
  border-radius: 8px;
  background: #ffffff;
}

.mediaDetailV2ChartControls > div button {
  border-radius: 0;
}

.mediaDetailV2Chart {
  width: 100%;
  height: 390px;
  display: block;
  overflow: visible;
}

.mediaDetailV2Chart line {
  stroke: #d9e0ea;
  stroke-width: 1;
}

.mediaDetailV2Chart line.axis {
  stroke: #8f99a8;
  stroke-width: 1.4;
}

.mediaDetailV2Chart path.trendLine {
  fill: none;
  stroke: var(--hot-video-accent, #ff2f6d);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.mediaDetailV2Chart circle {
  fill: #ffffff;
  stroke: var(--hot-video-accent, #ff2f6d);
  stroke-width: 2.2;
}

.mediaDetailV2Chart text {
  fill: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.mediaDetailV2Chart text.yTick {
  text-anchor: end;
}

.mediaDetailV2ProductTable {
  overflow: hidden;
  padding: 12px;
}

.mediaDetailV2ProductTable .head {
  min-height: 56px;
  display: grid;
  grid-template-columns: 1.5fr 0.85fr 0.85fr 0.85fr 0.85fr 0.8fr 0.9fr 0.7fr;
  align-items: center;
  border-radius: 8px 8px 0 0;
  background: #eef1f5;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 930;
}

.mediaDetailV2ProductTable .head span {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 18px;
}

.mediaDetailV2ProductTable .empty {
  min-height: 166px;
  display: grid;
  place-items: center;
  gap: 8px;
  border-radius: 0 0 8px 8px;
  background: #ffffff;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 820;
}

.mediaDetailV2SimilarGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 300px));
  justify-content: start;
  align-items: stretch;
  gap: 16px;
  padding: 16px;
}

.mediaDetailV2SimilarGrid article {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e4e8ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.mediaDetailV2SimilarGrid article:hover {
  border-color: rgba(90, 103, 216, 0.28);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.mediaDetailV2SimilarGrid article > header {
  min-height: 88px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e4e8ef;
  padding: 4px 4px 12px;
}

.mediaDetailV2SimilarGrid article > header > a {
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 999px;
  overflow: hidden;
  text-decoration: none;
}

.mediaDetailV2SimilarGrid article > header img {
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 999px;
  object-fit: cover;
}

.mediaDetailV2SimilarGrid article > header div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.mediaDetailV2SimilarGrid article > header strong,
.mediaDetailV2SimilarGrid article > header em,
.mediaDetailV2SimilarGrid article > header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveSelectedDetailHeader > span {
  flex: 0 0 auto;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
}

.liveHeroPanel {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.08)), var(--surface-panel);
}

.liveCard.selected {
  border-color: var(--primary-border-strong);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 38%),
    var(--surface-panel);
  box-shadow: 0 18px 36px var(--focus-ring);
}

.liveSearchTable .productListRow[aria-selected='true'] {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 42%),
    var(--surface-panel-hover);
}

.notificationBackButton {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 2px 10px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color 120ms,
    color 120ms;
}

@media (max-width: 720px) {
  .liveWarningHeader {
      flex-direction: column;
    }

  .liveWarningSummary {
      grid-template-columns: 1fr;
    }

  .liveWarningDetailHero,
    .liveWarningDetailGrid,
    .liveWarningDetailMetricGrid,
    .liveWarningConclusionCard,
    .liveWarningProcessCard > div {
      grid-template-columns: 1fr;
    }
}

@media (max-width: 1080px) {
  .liveSelectedDetailHeader {
      align-items: flex-start;
      flex-direction: column;
    }

  .liveSelectedDetailHeader em {
      white-space: normal;
    }
}

/* LIVE_SEARCH_LIUJIA_CSS_MERGE_END */

.mediaDetailV2SimilarGrid article > header strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
}

.mediaDetailV2SimilarGrid article > header em {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--text-2);
  padding: 4px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 780;
}

.mediaDetailV2SimilarGrid article > header span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
}

.mediaDetailV2SimilarCreatorLink,
.mediaDetailV2SimilarCreatorLink:hover,
.mediaDetailV2SimilarTitle,
.mediaDetailV2SimilarTitle:hover {
  color: inherit;
  text-decoration: none;
}

.mediaDetailV2SimilarCreatorLink:hover strong,
.mediaDetailV2SimilarTitle:hover {
  color: var(--hot-video-accent, var(--primary));
}

.mediaDetailV2SimilarCover {
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  margin: 12px 0;
  color: inherit;
  text-decoration: none;
}

.mediaDetailV2SimilarCover > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: cover;
  transition: transform 160ms ease;
}

.mediaDetailV2SimilarCover:hover > img {
  transform: scale(1.025);
}

.mediaDetailV2SimilarCover > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.mediaDetailV2SimilarCover dl {
  position: absolute;
  right: 8px;
  bottom: 10px;
  display: grid;
  gap: 7px;
  margin: 0;
}

.mediaDetailV2SimilarCover dl div {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.52);
  color: #ffffff;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 850;
}

.mediaDetailV2SimilarCover dt,
.mediaDetailV2SimilarCover dd {
  margin: 0;
}

.mediaDetailV2SimilarTitle {
  min-height: 42px;
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--text-1);
  padding: 0 4px 2px;
  font-size: 13px;
  font-weight: 820;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mediaDetailV2SimilarEmpty {
  grid-column: 1 / -1;
  min-height: 168px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px dashed #d8dee9;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 850;
}

.mediaDetailV2Panel .mediaDetailV2SimilarGrid {
  grid-template-columns: repeat(auto-fill, minmax(238px, 300px));
  justify-content: start;
  align-items: stretch;
}

.mediaDetailV2Panel .mediaDetailV2SimilarGrid article {
  max-width: 300px;
}

.mediaDetailV2Panel .mediaDetailV2SimilarGrid article a,
.mediaDetailV2Panel .mediaDetailV2SimilarGrid article a:hover,
.mediaDetailV2Panel .mediaDetailV2SimilarGrid article a:focus-visible {
  color: inherit;
  text-decoration: none;
}

.mediaDetailV2Panel .mediaDetailV2SimilarGrid article header a:hover strong,
.mediaDetailV2Panel .mediaDetailV2SimilarTitle:hover {
  color: var(--hot-video-accent, var(--primary));
}

.mediaDetailV2Panel .mediaDetailV2SimilarCover > button,
.mediaDetailV2Panel .mediaDetailV2SimilarCover > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  padding: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.mediaDetailV2Panel .mediaDetailV2SimilarGrid article > p,
.mediaDetailV2Panel .mediaDetailV2SimilarTitle {
  min-height: 42px;
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--text-1);
  padding: 0 4px 2px;
  font-size: 13px;
  font-weight: 820;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mediaDetailV2State {
  min-height: 300px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 860;
}

/* Creator detail sticky identity navigation */

.creatorDetailPageV2 > .creatorDetailTitleBar,
.creatorDetailPageV2 > .creatorDetailTabsWrap {
  display: none;
}

.creatorDetailPageV2 > .creatorDetailStickyHeader {
  min-width: 0;
  position: sticky;
  top: 76px;
  z-index: 980;
}

@media (max-width: 1180px) {
  .creatorDetailStickyHeader {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "identity actions"
      "tabs tabs";
    gap: 10px 14px;
  }
}

@media (max-width: 720px) {
  .creatorDetailStickyHeader {
    top: 64px;
    margin: 0 -8px;
    border-radius: 0;
    padding: 10px 12px;
  }

  .creatorDetailStickyAvatar {
    width: 40px;
    height: 40px;
  }

  .creatorDetailStickyTabs {
    gap: 18px;
  }

  .creatorDetailStickyTabs button {
    min-height: 36px;
    font-size: 13px;
  }
}

/* Final override: FastMoss-style detail header stays in flow, then docks without covering cards. */

.creatorDetailPageV2 {
  gap: 12px;
}

.creatorDetailPageV2 > .creatorDetailStickyHeader {
  position: sticky;
  top: -18px;
  z-index: 120;
  margin: 0;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  scroll-margin-top: 0;
}

.creatorDetailPageV2 > .creatorDetailTabsWrap {
  display: block;
  position: relative;
  top: auto;
  z-index: 2;
  margin: 0;
  padding: 0;
}

[data-theme='dark'] .creatorDetailPageV2 > .creatorDetailStickyHeader {
  background: #111827;
}

.creatorDetailPageV2 > .creatorDetailTopGrid {
  margin-top: 0;
}

.creatorDetailTopGrid,
.creatorDetailSections > section {
  scroll-margin-top: 88px;
}

.appContent:has(.creatorDetailPageV2) {
  scroll-padding-top: 88px;
}

@media (max-width: 720px) {
  .creatorDetailPageV2 > .creatorDetailStickyHeader {
    top: -12px;
  }

  .creatorDetailTopGrid,
  .creatorDetailSections > section {
    scroll-margin-top: 118px;
  }

  .appContent:has(.creatorDetailPageV2) {
    scroll-padding-top: 118px;
  }
}

/* zjr ads material and seed pages. Scoped to ads and shared commerce table shells. */

.adsSearchPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  align-content: start;
  gap: 18px;
  overflow-anchor: none;
}

.adsSearchPage .cuiResourceBody {
  display: grid;
  align-content: start;
  grid-template-rows: auto minmax(236px, auto);
  gap: 18px;
  overflow-anchor: none;
}

.adsSearchPanel,
.adsResultsSlot {
  align-self: start;
  overflow-anchor: none;
}

.adsResultsSlot {
  min-height: 236px;
  display: grid;
  align-content: start;
}

.adsResultsSlot > .adsResultPanel {
  min-height: 236px;
}

.adsResultPanel .cuiDataListState {
  min-height: 180px;
  display: grid;
  place-items: center;
}

.adsSearchBox {
  overflow: hidden;
}

.adsSearchKeywordInput,
.adsSearchKeywordInput:hover,
.adsSearchKeywordInput:focus,
.adsSearchKeywordInput:active,
.adsSearchBox:focus-within .adsSearchKeywordInput {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}

.adsSearchSubmit,
.adsSearchSubmit:hover,
.adsSearchSubmit:focus,
.adsSearchSubmit:active {
  appearance: none;
  width: 72px;
  height: 100%;
  min-height: 0;
  flex: 0 0 72px;
  align-self: stretch;
  display: grid;
  place-items: center;
  margin: 0;
  border: 0;
  border-radius: 0 999px 999px 0;
  background: var(--primary);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 0;
  box-shadow: none;
  outline: 0;
  transform: none;
}

.adsSearchResetButton {
  flex: 0 0 auto;
  align-self: center;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--commerce-control-line, var(--line-dark));
  border-radius: 999px;
  background: var(--commerce-control-bg, var(--tag-bg));
  color: var(--primary);
  box-shadow: var(--commerce-control-shadow, none);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.commerceSearchFilterPanel .adsDateFilterGroup {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.commerceSearchFilterPanel .adsDatePresetList,
.commerceSearchFilterPanel .adsDateFields {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.commerceSearchFilterPanel .adsDateField {
  position: relative;
  min-width: 224px;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #e4e8ef;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
  padding: 0 8px 0 14px;
  cursor: pointer;
}

.commerceSearchFilterPanel .adsDateField:focus-within {
  border-color: color-mix(in srgb, var(--primary) 30%, #e4e8ef);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.commerceSearchFilterPanel .adsDateField input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  cursor: pointer;
  opacity: 0;
  padding: 0;
}

.commerceSearchFilterPanel .adsDateValue,
.commerceSearchFilterPanel .adsDatePlaceholder {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 760;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerceSearchFilterPanel .adsDateIcon {
  color: #667085;
}

.commerceSearchFilterPanel .adsDateValue {
  color: #101828;
}

.commerceSearchFilterPanel .adsDatePlaceholder,
.commerceSearchFilterPanel .adsDateDash {
  color: #98a2b3;
}

.commerceSearchFilterPanel .adsPerformanceGrid.shopAdvancedGrid {
  width: min(560px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  gap: 10px;
}

.adsPager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.adsPager button {
  min-height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-2);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 850;
}

.adsPager button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ads-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: start;
}

.ads-detail-main,
.ads-detail-metrics,
.ads-info-grid {
  display: grid;
  gap: 14px;
}

.ads-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ads-info-item {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.ads-info-label {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}

.ads-info-value {
  min-width: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.ads-related-product {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid var(--line-dark);
  padding: 10px 0;
}

.ads-related-product:last-child {
  border-bottom: 0;
}

.ads-product-title {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 850;
}

.ads-product-id {
  color: var(--text-3);
  font-size: 12px;
}

@media (max-width: 980px) {
  .ads-detail-grid,
  .ads-info-grid,
  .commerceSearchFilterPanel .adsPerformanceGrid.shopAdvancedGrid {
    grid-template-columns: 1fr;
  }
}

/* lhx media AI analysis page. Scoped to aiAnalysis* only. */

.aiAnalysisPage {
  --hot-video-accent: var(--primary, #6d5dfc);
  --hot-video-soft: color-mix(in srgb, var(--primary, #6d5dfc) 12%, transparent);
  --hot-video-border: color-mix(in srgb, var(--primary, #6d5dfc) 18%, #e5e7eb);
  min-height: calc(100vh - 72px);
  display: grid;
  align-content: start;
  gap: 16px;
  background: var(--surface-muted);
  padding: 18px 20px 22px;
}

.aiAnalysisBack {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 820;
  text-decoration: none;
}

.aiAnalysisLanding,
.aiAnalysisSearchPanel,
.aiAnalysisResultPage,
.aiAnalysisScriptPanel,
.aiAnalysisOverview,
.aiAnalysisTranscript {
  display: grid;
  gap: 16px;
}

.aiAnalysisLanding {
  width: min(1240px, 100%);
  justify-self: center;
  gap: 26px;
  padding-top: 18px;
}

.aiAnalysisHero {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.aiAnalysisHero h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 30px;
  font-weight: 950;
}

.aiAnalysisHero p {
  max-width: 680px;
  margin: 0;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 760;
}

.aiAnalysisSearchBar {
  width: min(960px, 100%);
  justify-self: center;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--hot-video-border);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(109, 93, 252, 0.14);
  padding: 6px 8px 6px 20px;
}

.aiAnalysisSearchInput {
  min-width: 0;
  flex: 1 1 auto;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 760;
}

.aiAnalysisSearchBar button {
  flex: 0 0 auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 920;
  white-space: nowrap;
}

.aiAnalysisRandomButton {
  min-width: 88px;
  background: var(--hot-video-soft) !important;
  color: var(--hot-video-accent) !important;
}

.aiAnalysisAnalyzeButton {
  min-width: 116px;
  border: 0 !important;
  background: var(--hot-video-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(109, 93, 252, 0.22);
}

.aiAnalysisError {
  width: min(920px, 100%);
  border: 1px solid #fecdd3;
  border-radius: 8px;
  background: #fff1f2;
  color: #be123c;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 850;
}

.aiAnalysisSamples {
  width: min(800px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.aiAnalysisSamples article,
.aiAnalysisVideoCard,
.aiAnalysisScoreCard,
.aiAnalysisInsightGrid article {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.aiAnalysisSamples article > div,
.aiAnalysisVideoCover {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--tag-bg);
  aspect-ratio: 0.72;
  box-shadow: var(--shadow-light);
}

.aiAnalysisSamples img,
.aiAnalysisVideoCover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.aiAnalysisResultLayout {
  width: 100%;
  min-height: calc(100vh - 150px);
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 24px;
}

.aiAnalysisVideoCard,
.aiAnalysisScriptPanel {
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--shadow-light);
}

.aiAnalysisVideoCard {
  padding: 20px;
}

.aiAnalysisScriptPanel {
  min-width: 0;
  align-content: start;
  gap: 14px;
  padding: 18px 18px 16px;
}

.aiAnalysisMetricGrid,
.aiAnalysisScoreGrid,
.aiAnalysisInsightGrid {
  display: grid;
  gap: 10px;
}

.aiAnalysisMetricGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aiAnalysisScoreGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.aiAnalysisInsightGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aiAnalysisMetricGrid article,
.aiAnalysisScoreCard,
.aiAnalysisInsightGrid article {
  border-radius: 8px;
  background: #f6f7fb;
  padding: 12px;
}

.aiAnalysisMetricGrid strong,
.aiAnalysisScoreCard strong {
  display: block;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
}

.aiAnalysisScoreCard strong {
  color: var(--hot-video-accent);
  font-size: 22px;
}

.aiAnalysisInsightGrid h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 920;
}

.aiAnalysisInsightGrid p,
.aiAnalysisOverview p,
.aiAnalysisTranscript p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.6;
}

.aiAnalysisTranscript {
  min-height: 0;
  overflow: auto;
  align-content: start;
  gap: 22px;
  padding: 16px 18px;
}

.aiAnalysisTranscript article {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
}

.aiAnalysisScriptPanel footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--hot-video-border);
  padding: 14px 0 0;
}

.aiAnalysisScriptPanel footer button {
  min-height: 34px;
  border: 1px solid var(--hot-video-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-2);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 880;
}

@media (max-width: 980px) {
  .aiAnalysisSamples,
  .aiAnalysisResultLayout,
  .aiAnalysisMetricGrid,
  .aiAnalysisScoreGrid,
  .aiAnalysisInsightGrid {
    grid-template-columns: 1fr;
  }
}

/* wjy OpenAPI step-up and export surfaces. Scoped to openapi* classes. */

.openapiExportSection,
.openapiExportTable,
.openapiExportDialog,
.openapiStepUpDialog,
.openapiStepUpForm,
.openapiRevealedSecret {
  display: grid;
  gap: 12px;
}

.openapiExportTable .cuiPagination {
  margin-top: 0;
}

.openapiExportResult {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.openapiExportResult small,
.openapiMutedNote,
.openapiStepUpMethod small,
.openapiRevealedSecret > small {
  color: var(--text-3);
  font-size: 12px;
}

.openapiExportActions {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.openapiExportSummary {
  margin: 0;
  display: grid;
}

.openapiExportSummary > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(110px, 0.35fr) minmax(0, 1fr);
  gap: 16px;
  border-bottom: 1px solid var(--line-dark);
  padding: 10px 0;
}

.openapiExportSummary > div:last-child {
  border-bottom: 0;
}

.openapiExportSummary dt {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
}

.openapiExportSummary dd {
  min-width: 0;
  margin: 0;
  color: var(--text-1);
  overflow-wrap: anywhere;
}

.openapiStepUpDialog,
.openapiStepUpForm,
.openapiRevealedSecret {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.openapiStepUpMethod {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 10px 12px;
}

.openapiStepUpMethod span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.openapiStepUpMethod strong {
  color: var(--text-1);
  font-size: 13px;
}

.openapiStepUpCodeRow,
.openapiSecretInputRow {
  display: grid;
  align-items: end;
  gap: 10px;
}

.openapiStepUpCodeRow {
  grid-template-columns: minmax(0, 1fr) auto;
}

.openapiStepUpCodeRow .cuiButton {
  min-width: 126px;
}

.openapiSecretInputRow {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.openapiSecretInputRow .cuiInput {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 720px) {
  .openapiStepUpCodeRow,
  .openapiSecretInputRow,
  .openapiExportSummary > div {
    grid-template-columns: 1fr;
  }
}

/* wll product AI analysis modal. Scoped to FastMoss product AI classes. */

.fmAiAnalysisOverlay {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.42);
  padding: 24px;
}

.fmAiAnalysisDialog {
  width: min(1040px, 100%);
  max-height: min(860px, calc(100vh - 48px));
  overflow: auto;
  display: grid;
  gap: 16px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
  padding: 18px;
}

.fmAiAnalysisDialogHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 14px;
}

.fmAiAnalysisDialogHead h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
  font-weight: 950;
}

.fmAiAnalysisDialogHead span,
.fmAiAnalysisEmpty,
.fmAiSummaryCard small {
  color: var(--text-3);
  font-size: 13px;
}

.fmAiAnalysisDialogActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fmAiAnalysisClose {
  min-width: 36px;
}

.fmAiAnalysisEmpty,
.fmAiAnalysisStreaming {
  min-height: 220px;
  display: grid;
  place-items: center;
  gap: 12px;
  border: 1px dashed var(--line-dark);
  border-radius: 10px;
  background: var(--surface-muted);
  padding: 24px;
  text-align: center;
}

.fmAiAnalysisEmpty strong,
.fmAiStreamingStatus strong {
  color: var(--text-1);
  font-size: 16px;
  font-weight: 920;
}

.fmAiAnalysisEmpty.is-error {
  border-color: #fecdd3;
  background: #fff1f2;
}

.fmAiStreamingStatus,
.fmAiAnalysisBody {
  display: grid;
  gap: 12px;
}

.fmAiStreamingLines {
  width: min(520px, 100%);
  display: grid;
  gap: 8px;
}

.fmAiStreamingLines span {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef2ff, #dbeafe, #eef2ff);
}

.fmAiStreamBlock {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.fmAiStreamBlock.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fmAiSummaryGrid,
.fmAiInsightGrid,
.fmAiSuggestionGrid {
  display: grid;
  gap: 12px;
}

.fmAiSummaryGrid {
  grid-template-columns: 180px minmax(0, 1fr) 220px;
}

.fmAiInsightGrid,
.fmAiSuggestionGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fmAiScoreCard,
.fmAiSummaryCard,
.fmAiTrendCard,
.fmAiListCard,
.fmAiSuggestionCard,
.fmAiActionList {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: #ffffff;
  padding: 14px;
}

.fmAiScoreCard strong {
  color: var(--primary);
  font-size: 38px;
  font-weight: 960;
}

.fmAiScoreCard em,
.fmAiPriority {
  width: max-content;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 4px 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.fmAiSummaryCard p,
.fmAiSuggestionCard p,
.fmAiActionList p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.fmAiListCard h3,
.fmAiSuggestionCard h3,
.fmAiActionList h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 920;
}

.fmAiListCard ul,
.fmAiSuggestionCard ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}

.fmAiActionList article {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line-dark);
  padding-top: 10px;
}

.fmAiActionList article:first-of-type {
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 980px) {
  .fmAiAnalysisOverlay {
    padding: 12px;
  }

  .fmAiAnalysisDialogHead,
  .fmAiAnalysisDialogActions {
    flex-wrap: wrap;
  }

  .fmAiSummaryGrid,
  .fmAiInsightGrid,
  .fmAiSuggestionGrid {
    grid-template-columns: 1fr;
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/legacy-after-workbench.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Legacy web tail compatibility anchor.
 * Ordered shards preserve the pre-migration cascade. Do not add rules here.
 */

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/shared.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Web shared CSS.
 *
 * Allowed: app-level tokens that cannot live in packages/ui yet, cross-module
 * utility hooks, and temporary compatibility fixes shared by at least two modules.
 * Prefer @compass/ui for reusable controls, tables, dialogs, filters, and buttons.
 */

.metricHelpLabel.metricHelpLabel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  vertical-align: middle;
  white-space: nowrap;
}

.metricHelpLabel.metricHelpLabel > span {
  display: inline;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.metricHelpTrigger {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cbd5e1;
  color: #ffffff;
  cursor: help;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.metricHelpTrigger:hover,
.metricHelpTrigger:focus-visible {
  background: #94a3b8;
  color: #ffffff;
  outline: none;
}

.cuiTooltipContent.metricHelpTooltip {
  max-width: min(360px, calc(100vw - 24px));
  padding: 12px 14px;
  border: 0;
  border-radius: 6px;
  background: rgba(38, 38, 42, 0.94);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
}

.cuiTooltipContent.metricHelpTooltip::after {
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  content: '';
}

.cuiTooltipContent.metricHelpTooltip[data-placement^='top']::after {
  top: 100%;
  left: 50%;
  border-top-color: rgba(38, 38, 42, 0.94);
  transform: translateX(-50%);
}

.cuiTooltipContent.metricHelpTooltip[data-placement^='bottom']::after {
  bottom: 100%;
  left: 50%;
  border-bottom-color: rgba(38, 38, 42, 0.94);
  transform: translateX(-50%);
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/shell.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Web shell CSS.
 *
 * Owner: total-control/framework.
 * Allowed: WorkspaceShell, sidebar, topbar, layout rails, navigation, and app
 * chrome. Member feature branches should not change this file without review.
 */

.appContent > .loginRequiredState {
  min-width: 0;
}

/* Authenticated WorkspaceShell navigation adapter. Guest navigation keeps its legacy rail. */
.appShell {
  grid-template-areas:
    'topbar topbar'
    'sidebar main';
  grid-template-rows: 60px minmax(0, 1fr);
}

.appTopbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: 1100;
  display: grid;
  grid-template-columns: 224px minmax(360px, 1fr) auto;
  gap: 16px;
  height: 60px;
  min-height: 60px;
  padding: 0 18px 0 14px;
  border-bottom: 1px solid var(--line-dark);
  background: color-mix(in srgb, var(--app-topbar-bg) 94%, transparent);
  box-shadow: 0 1px 10px rgba(15, 23, 42, 0.04);
}

.appSidebar {
  grid-area: sidebar;
  min-height: calc(100vh - 60px);
  height: calc(100vh - 60px);
  position: sticky;
  top: 60px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.appMain {
  grid-area: main;
  height: auto;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.topbarBrand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-1);
  text-decoration: none;
}

.topbarBrandMark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--brand-grad);
  color: #fff;
  font-weight: 900;
}

.topbarBrandMark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.topbarBrand strong {
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appTopbar .topbarLeft {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(180px, 420px) 36px;
  justify-content: start;
  gap: 14px;
}

.appTopbar .breadcrumb {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.appTopbar .breadcrumb span {
  color: var(--text-3);
  font-size: 12px;
}

.appTopbar .breadcrumb strong {
  max-width: 180px;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
}

.appTopbar .searchBox {
  width: min(420px, 30vw);
  min-width: 180px;
  height: 36px;
  border-radius: 8px;
  background: var(--surface-panel-hover);
}

.topbarAiShortcut,
.topbarMoreButton {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  cursor: pointer;
  text-decoration: none;
}

.topbarAiShortcut {
  width: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-panel));
  color: var(--primary);
}

.topbarActions {
  min-width: 0;
  position: relative;
}

.topbarMoreButton {
  width: 38px;
  display: none;
  cursor: pointer;
}

.appTopbar .topbarRight {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 60px;
}

.topbarBillingEntry {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-inline-end: 2px;
  border-inline-end: 1px solid var(--line-dark);
  padding-inline-end: 6px;
}

.topbarRight .topbarBillingShortcut.cuiButton {
  width: 36px;
  min-height: 36px;
  border-color: transparent;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
}

.topbarRight .topbarBillingShortcut.cuiButton:hover,
.topbarRight .topbarBillingShortcut.cuiButton.is-active {
  border-color: transparent;
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.topbarRight .topbarBillingShortcut.cuiButton:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent);
}

.appSidebar > .sidebarLogo {
  display: none;
}

.userAccountMenu {
  position: relative;
  min-width: 0;
  flex: 0 0 auto;
}

.userAccountMenu .userMenuPanel {
  right: 0;
  width: min(218px, calc(100vw - 24px));
}

.userMenuPanel .userMenuItem {
  width: 100%;
  border: 0;
  font: inherit;
  text-align: left;
}

@media (min-width: 761px) {
  .appShell:has(> .appSidebar > .workspaceSharedNavigation) {
    grid-template-columns: 224px minmax(0, 1fr);
  }

  .appShell:has(> .appSidebar.is-collapsed > .workspaceSharedNavigation) {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .appSidebar:has(> .workspaceSharedNavigation) {
    width: 224px;
    max-width: 224px;
    z-index: 30;
    gap: 14px;
    overflow: visible;
    padding: 16px 0 0;
  }

  .appSidebar.is-collapsed:has(> .workspaceSharedNavigation) {
    width: 72px;
    max-width: 72px;
  }
}

@media (max-width: 1500px) {
  .appTopbar {
    grid-template-columns: 200px minmax(300px, 1fr) auto;
  }

  .topbarRight .workspacePreferencesTriggerText {
    display: none;
  }

  .topbarRight .topbarRegionSelector.compact {
    width: 126px;
    flex-basis: 126px;
  }
}

@media (max-width: 1120px) {
  .appTopbar {
    grid-template-columns: 170px minmax(260px, 1fr) auto;
  }

  .appTopbar .breadcrumb {
    display: none;
  }

  .appTopbar .topbarLeft {
    grid-template-columns: minmax(180px, 1fr) 36px;
  }

  .topbarRight .topbarRegionSelector.compact {
    display: none;
  }
}

.appSidebar:has(> .workspaceSharedNavigation) > .sidebarLogo,
.appSidebar:has(> .workspaceSharedNavigation) > .workspaceSwitcher {
  width: auto;
  margin-inline: 14px;
}

.appSidebar.is-collapsed:has(> .workspaceSharedNavigation) > .sidebarLogo {
  justify-content: center;
  margin-inline: 9px;
}

.appSidebar.is-collapsed:has(> .workspaceSharedNavigation) > .sidebarLogo > div:last-child,
.appSidebar.is-collapsed:has(> .workspaceSharedNavigation) > .workspaceSwitcher {
  display: none;
}

.workspaceSharedNavigation {
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  --cui-surface: var(--app-sidebar-bg);
  --cui-surface-hover: var(--surface-panel-hover);
  --cui-text: var(--text-1);
  --cui-text-soft: var(--text-2);
  --cui-text-muted: var(--text-3);
  --cui-line: var(--line-dark);
  --cui-primary: var(--primary);
}

.workspaceSharedNavigation.cuiNavigationMenu--vertical > .cuiNavigationMenuList {
  height: 100%;
  max-height: none;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.workspaceSharedNavigation.cuiNavigationMenu--vertical.is-collapsed
  > .cuiNavigationMenuList
  > .cuiNavigationMenuNode
  > .cuiNavigationMenuControl
  > .cuiNavigationMenuBadge,
.workspaceSharedNavigation.cuiNavigationMenu--vertical.is-collapsed
  > .cuiNavigationMenuList
  > .cuiNavigationMenuGroup
  > .cuiNavigationMenuGroupItems
  > .cuiNavigationMenuNode
  > .cuiNavigationMenuControl
  > .cuiNavigationMenuBadge {
  position: absolute;
  top: 7px;
  right: 13px;
  width: 7px;
  min-width: 7px;
  height: 7px;
  display: block;
  margin: 0;
  border: 1.5px solid var(--app-sidebar-bg);
  padding: 0;
  font-size: 0;
  line-height: 0;
}

@media (max-width: 760px) {
  body .appShell {
    grid-template-areas:
      'topbar topbar'
      'sidebar main';
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: 56px minmax(0, 1fr);
  }

  .appTopbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    height: 56px;
    min-height: 56px;
    gap: 8px;
    padding: 0 10px;
  }

  .topbarBrand strong {
    max-width: 112px;
    font-size: 15px;
  }

  .topbarBrandMark {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .appTopbar .topbarLeft {
    display: flex;
    flex: 0 0 auto;
  }

  .appTopbar .searchBox {
    display: none;
  }

  .topbarMoreButton {
    display: inline-flex;
  }

  body .appShell > .appTopbar .topbarActions > .topbarRight {
    width: min(340px, calc(100vw - 20px));
    max-width: none;
    height: auto;
    display: none;
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    left: auto;
    z-index: 1300;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--line-dark);
    border-radius: 8px;
    background: var(--surface-panel-strong);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2);
    padding: 10px;
  }

  body .appShell > .appTopbar .topbarActions > .topbarRight.is-mobile-open {
    display: flex;
  }

  .appTopbar .topbarRight > *,
  .appTopbar .topbarRight .topbarRegionSelector.compact,
  .appTopbar .topbarRight .workspacePreferencesTrigger,
  .appTopbar .topbarRight .regionSelectorTrigger,
  .appTopbar .topbarRight .userBadge {
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
  }

  .appTopbar .topbarRight .topbarBillingEntry {
    width: 100%;
    justify-content: flex-start;
    margin: 0;
    border-inline-end: 0;
    border-bottom: 1px solid var(--line-dark);
    padding: 0 0 8px;
  }

  .appTopbar .topbarRight .topbarRegionSelector.compact {
    display: grid;
  }

  .topbarRight .workspacePreferencesTriggerText {
    display: inline;
  }

  .appTopbar .topbarRight .notificationTopbarTrigger {
    min-height: 36px;
  }

  .appSidebar {
    min-height: calc(100vh - 56px);
    height: calc(100vh - 56px);
    top: 56px;
  }

  .appMain {
    min-height: calc(100vh - 56px);
  }

  .appSidebar.is-rail-open > .sidebarLogo {
    display: flex;
  }

  .appSidebar:has(> .workspaceSharedNavigation) {
    padding-inline: 0;
  }

  .appSidebar:has(> .workspaceSharedNavigation) > .sidebarLogo,
  .appSidebar:has(> .workspaceSharedNavigation) > .workspaceSwitcher {
    margin-inline: 9px;
  }

  .appSidebar.is-rail-open:has(> .workspaceSharedNavigation) > .sidebarLogo,
  .appSidebar.is-rail-open:has(> .workspaceSharedNavigation) > .workspaceSwitcher {
    margin-inline: 14px;
  }

  .workspaceSharedNavigation .cuiNavigationMenuCollapse {
    display: none;
  }
}

.loginRequiredState.cuiState {
  min-height: clamp(360px, calc(100dvh - 160px), 640px);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 48px 24px 64px;
}

.loginRequiredState.cuiState > div {
  display: grid;
  width: min(100%, 440px);
  justify-items: center;
}

.loginRequiredState .cuiStateIcon {
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  border-color: color-mix(in srgb, var(--cui-primary) 22%, var(--cui-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--cui-primary) 10%, var(--cui-surface));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--cui-primary) 12%, transparent);
  color: var(--cui-primary);
}

.loginRequiredState .cuiStateTitle {
  max-width: 440px;
  font-size: 22px;
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1.35;
}

.loginRequiredState .cuiStateDescription {
  max-width: 380px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 540;
  line-height: 1.7;
}

.loginRequiredState .cuiStateActions {
  margin-top: 24px;
}

.loginRequiredState .cuiStateActions .cuiButton {
  min-width: 132px;
}

.topbarRight .workspacePreferencesTrigger,
.topbarRight .topbarRegionSelector .regionSelectorTrigger {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  padding: 0 10px;
  color: var(--text-2);
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.topbarRight .workspacePreferencesTrigger:hover,
.topbarRight .workspacePreferencesTrigger[aria-expanded='true'],
.topbarRight .topbarRegionSelector .regionSelectorTrigger:hover,
.topbarRight .topbarRegionSelector.is-open .regionSelectorTrigger {
  border-color: transparent;
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.topbarRight .workspacePreferencesTrigger {
  flex: 0 0 auto;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  outline: 0;
}

.topbarRight .workspacePreferencesTrigger:hover,
.topbarRight .workspacePreferencesTrigger[aria-expanded='true'] {
  background: var(--surface-panel-hover);
}

.topbarRight .workspacePreferencesTrigger:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent);
}

body .workspacePreferencesPanel .workspacePreferencesOption:hover,
body .workspacePreferencesPanel .workspacePreferencesOption.active,
body .workspacePreferencesPanel .workspacePreferencesAccentOption:hover,
body .workspacePreferencesPanel .workspacePreferencesAccentOption.active {
  border-color: transparent;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-panel-strong));
  color: var(--text-1);
}

.topbarRight .workspacePreferencesTriggerText {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

.topbarRight .topbarRegionSelector.compact {
  width: 132px;
  min-height: 0;
  flex: 0 0 132px;
  border: 0;
  background: transparent;
  padding: 0;
}

.regionPickerTrigger {
  min-width: 132px;
  min-height: 38px;
  display: inline-grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--primary) 82%, white 18%);
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  padding: 0 11px 0 7px;
  cursor: pointer;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 20%, transparent);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.regionPickerTrigger strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbarRight .regionPickerTrigger.topbarRegionSelector.compact {
  width: 132px;
  min-width: 0;
  min-height: 36px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  padding: 0 9px 0 6px;
  box-shadow: none;
}

.topbarRight .regionPickerTrigger.topbarRegionSelector.compact:hover,
.topbarRight .regionPickerTrigger.topbarRegionSelector.compact[aria-expanded='true'] {
  border-color: transparent;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  box-shadow: none;
  transform: none;
}

.appTopbar .notificationTopbarTrigger.cuiIconButton {
  position: relative;
  width: 36px;
  height: 36px;
  min-height: 36px;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  box-shadow: none;
}

.appTopbar .notificationTopbarTrigger.cuiIconButton:hover,
.appTopbar .notificationTopbarTrigger.cuiIconButton[aria-expanded='true'] {
  border-color: transparent;
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.appTopbar .notificationTopbarTrigger.has-unread.cuiIconButton {
  color: var(--primary);
}

.appTopbar .notificationTopbarTrigger.has-unread::after {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--app-topbar-bg);
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  content: attr(data-unread-label);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
  pointer-events: none;
}

.appTopbar .notificationTopbarTrigger.has-wide-badge::after {
  width: auto;
  min-width: 19px;
  border-radius: 999px;
  padding: 0 3px;
}

.appTopbar .userAccountMenu {
  margin-left: 6px;
  border-left: 1px solid var(--line-dark);
  padding-left: 10px;
}

.appTopbar .userBadge {
  min-width: 128px;
  min-height: 36px;
  height: 36px;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
  padding: 3px 6px;
}

.appTopbar .userBadge:hover,
.appTopbar .userBadge[aria-expanded='true'] {
  border-color: transparent;
  background: var(--surface-panel-hover);
}

.appTopbar .userBadge > span {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-panel));
  color: var(--primary);
}

.appTopbar .userBadge strong {
  font-size: 12px;
  font-weight: 750;
}

.appTopbar .userBadge em {
  font-size: 10px;
  font-weight: 600;
}

.appTopbar .userMenuPanel {
  top: calc(100% + 10px);
  width: 204px;
  border-color: color-mix(in srgb, var(--line-dark) 72%, transparent);
  background: var(--surface-panel-strong);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
}

.appTopbar .topbarRight > .cuiButton {
  min-height: 36px;
  border-radius: 7px;
}

.userMenuPanel .userMenuLogout {
  color: var(--danger, #dc2626);
}

.notificationTopbarPopover.cuiPopover {
  width: min(400px, calc(100vw - 24px));
  overflow: hidden;
  border-color: color-mix(in srgb, var(--line-dark) 72%, transparent);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  box-shadow: 0 20px 54px rgba(15, 23, 42, 0.17);
  color: var(--text-1);
  padding: 0;
}

.notificationTopbarPanel {
  min-width: 0;
  display: grid;
}

.notificationTopbarHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 16px 10px;
}

.notificationTopbarHeaderTitle {
  min-width: 0;
}

.notificationTopbarHeader strong {
  font-size: 16px;
  font-weight: 780;
}

.notificationTopbarMarkAll.cuiButton {
  min-height: 30px;
  flex: 0 0 auto;
  color: var(--text-2);
  font-size: 11px;
}

.notificationTopbarHeaderActions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.notificationTopbarViewAll.cuiButton {
  color: var(--text-2);
  font-size: 11px;
}

.notificationTopbarSummary {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: color-mix(in srgb, var(--surface-panel-hover) 64%, transparent);
  padding: 7px 16px;
}

.notificationTopbarSummary > span,
.notificationTopbarSummary em {
  min-width: 0;
  flex: 0 0 auto;
  border-radius: 999px;
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.notificationTopbarSummary > span {
  margin-right: auto;
}

.notificationTopbarSummary > span.has-unread {
  color: var(--text-1);
}

.notificationTopbarSummary em {
  max-width: 84px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notificationTopbarSummary em > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.notificationTopbarSummary em > b {
  min-width: 13px;
  height: 13px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary, #fff);
  font-size: 8px;
  line-height: 1;
  padding: 0 2px;
}

.notificationTopbarList {
  max-height: 390px;
  overflow: auto;
  padding: 6px;
}

.notificationTopbarItem {
  width: 100%;
  max-height: 160px;
  min-height: 82px;
  overflow: hidden;
  border-radius: 7px;
  background: transparent;
  transform: translateX(0);
  transform-origin: right center;
  transition:
    max-height 240ms cubic-bezier(0.4, 0, 0.2, 1),
    min-height 240ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 180ms ease-out,
    transform 220ms cubic-bezier(0.4, 0, 1, 1),
    background 150ms ease;
}

.notificationTopbarItem.is-exiting {
  max-height: 0;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(44px);
}

.notificationTopbarItemMain {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: start;
  gap: 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
  padding: 3px 9px 9px 26px;
  text-align: left;
  transition: background 150ms ease;
}

.notificationTopbarItemMain:hover,
.notificationTopbarItemMain:focus-visible {
  outline: 0;
  background: var(--surface-panel-hover);
}

.notificationTopbarItemMarker {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--brand-primary, #315efb);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--brand-primary, #315efb) 8%, var(--surface-panel, #fff));
}

.notificationTopbarItem.is-urgent .notificationTopbarItemMarker {
  background: #d63d55;
  box-shadow: 0 0 0 3px #fff0f2;
}

.notificationTopbarItem.is-read .notificationTopbarItemMarker {
  background: #98a2b3;
  box-shadow: 0 0 0 3px color-mix(in srgb, #98a2b3 10%, var(--surface-panel, #fff));
}

.notificationTopbarItemCopy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.notificationTopbarItemMeta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 34px 0 9px;
}

.notificationTopbarItemMeta em,
.notificationTopbarItemMeta time,
.notificationTopbarItemCopy > span:not(.notificationTopbarItemMeta),
.notificationTopbarItemCopy small {
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
}

.notificationTopbarItemMeta em {
  color: var(--primary);
  font-weight: 750;
}

.notificationTopbarItemMeta time {
  margin-left: auto;
  white-space: nowrap;
}

.notificationTopbarItemUrgent,
.notificationTopbarItemReadState {
  flex: 0 0 auto;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 750;
  line-height: 18px;
  padding: 0 5px;
}

.notificationTopbarItemUrgent {
  background: color-mix(in srgb, var(--danger, #dc2626) 10%, transparent);
  color: var(--danger, #dc2626);
}

.notificationTopbarItemReadState.is-unread {
  background: color-mix(in srgb, var(--danger, #dc2626) 10%, transparent);
  color: var(--danger, #dc2626);
}

.notificationTopbarItemReadState.is-read {
  background: color-mix(in srgb, var(--text-3) 10%, transparent);
  color: var(--text-3);
}

.notificationTopbarMarkOne {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 4px;
}

.notificationTopbarMarkOne:hover,
.notificationTopbarMarkOne:focus-visible {
  outline: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notificationTopbarItemCopy > strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notificationTopbarItemCopy > span:not(.notificationTopbarItemMeta) {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.notificationTopbarRelated {
  display: block;
  width: fit-content;
  max-width: calc(100% - 42px);
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  margin: -5px 25px 8px 26px;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notificationTopbarRelated.is-link {
  cursor: pointer;
}

.notificationTopbarRelated.is-link:hover,
.notificationTopbarRelated.is-link:focus-visible {
  color: var(--primary);
  outline: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notificationTopbarItemCopy small {
  overflow: hidden;
  color: var(--text-2);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notificationTopbarItemMain > svg {
  margin-top: 7px;
  color: var(--text-3);
}

.notificationTopbarSkeleton {
  padding: 12px 16px;
}

.notificationTopbarSkeleton .cuiSkeletonBlock {
  border: 0;
  border-radius: 0;
  padding-inline: 0;
}

.notificationTopbarState {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--text-3);
  padding: 24px;
  text-align: center;
}

.notificationTopbarState > svg {
  color: var(--primary);
}

.notificationTopbarState strong {
  color: var(--text-1);
  font-size: 13px;
}

.notificationTopbarState span {
  max-width: 250px;
  font-size: 11px;
  line-height: 1.5;
}

.notificationTopbarSharedState.cuiState {
  min-height: 180px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 24px;
}

.regionPickerTrigger .regionSelectorChevron {
  color: currentColor;
}

.regionPickerTrigger[aria-expanded='true'],
.regionPickerTrigger:hover {
  border-color: color-mix(in srgb, var(--primary) 72%, white 28%);
  background: color-mix(in srgb, var(--primary) 88%, black 12%);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 28%, transparent);
  transform: translateY(-1px);
}

.regionPickerTrigger[aria-expanded='true'] .regionSelectorChevron {
  transform: rotate(180deg);
}

.regionPickerPopover.cuiPopover {
  width: min(560px, calc(100vw - 24px));
  max-height: min(680px, calc(100dvh - 80px));
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--line-dark) 58%, transparent);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  color: var(--text-1);
  padding: 0;
}

.regionPickerPanel {
  display: grid;
  gap: 0;
  padding: 16px 22px 18px;
}

.regionPickerPanel > header {
  display: grid;
  gap: 5px;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 14px;
}

.regionPickerPanel > header strong {
  font-size: 16px;
  font-weight: 700;
}

.regionPickerPanel > header span,
.regionPickerPanel > footer {
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.55;
}

.regionPickerGroups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 12px 0 18px;
}

.regionPickerGroup {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.regionPickerGroupHeading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--text-3);
  font-size: 11px;
  transition:
    color 160ms ease,
    transform 160ms ease;
}

.regionPickerGroupHeading strong {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 500;
  transition: color 160ms ease;
}

.regionPickerGroup:hover .regionPickerGroupHeading,
.regionPickerGroup:has(.regionPickerCountry:focus-visible) .regionPickerGroupHeading {
  color: var(--text-1);
  transform: translateX(4px);
}

.regionPickerGroup:hover .regionPickerGroupHeading strong,
.regionPickerGroup:has(.regionPickerCountry:focus-visible) .regionPickerGroupHeading strong {
  color: var(--text-1);
}

.regionPickerGroupHeading::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--text-1);
  content: '';
  transition: width 160ms ease;
}

.regionPickerGroupHeading {
  position: relative;
}

.regionPickerGroup:hover .regionPickerGroupHeading::after,
.regionPickerGroup:has(.regionPickerCountry:focus-visible) .regionPickerGroupHeading::after {
  width: 40px;
}

.regionPickerCountryGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px 12px;
}

.regionPickerGroup:first-child .regionPickerCountryGrid {
  grid-template-columns: 1fr;
  margin-top: 4px;
}

.regionPickerCountry {
  min-width: 0;
  min-height: 36px;
  display: grid;
  grid-template-columns: 24px minmax(0, auto) auto;
  align-items: center;
  justify-content: start;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  padding: 5px 9px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  outline: 0;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.regionPickerCountry:hover {
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.regionPickerCountry.is-active {
  border-color: transparent;
  background: var(--surface-panel-hover);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-dark) 58%, transparent);
  color: var(--text-1);
  font-weight: 750;
}

.regionPickerCountry:focus-visible {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.regionPickerCountry small {
  align-self: start;
  border: 1px solid var(--line-dark);
  border-radius: 3px;
  background: var(--surface-panel);
  color: var(--text-3);
  padding: 1px 3px;
  font-size: 9px;
  line-height: 1.2;
}

.regionPickerOption {
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-1);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.regionPickerOption:hover {
  border-color: var(--line-dark);
  background: var(--surface-panel-hover);
}

.regionPickerOption.is-active {
  border-color: var(--primary-border);
  background: var(--primary-active-bg);
  color: var(--primary);
}

.regionPickerFlags {
  min-width: 22px;
  display: flex;
}

.regionPickerFlag {
  display: inline-grid;
  min-width: 20px;
  place-items: center;
  line-height: 1;
}

.regionPickerFlag img {
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 9px rgba(15, 23, 42, 0.12);
}

.regionPickerTrigger .regionPickerFlag,
.regionPickerTrigger .regionPickerFlag img {
  width: 28px;
  height: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .regionPickerGroupHeading,
  .regionPickerGroupHeading strong,
  .regionPickerGroupHeading::after {
    transition: none;
  }
}

.regionPickerFlags .regionPickerFlag + .regionPickerFlag {
  margin-left: -5px;
}

.regionPickerOptionText {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.regionPickerOptionText strong,
.regionPickerOptionText small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.regionPickerOptionText strong {
  font-size: 13px;
}

.regionPickerOptionText small {
  color: var(--text-3);
  font-size: 11px;
}

.regionPickerPanel > footer {
  border-top: 1px solid var(--line-dark);
  padding-top: 12px;
}

.regionPickerCurrencySection {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line-dark);
  padding-top: 18px;
}

.regionPickerCurrencySection + .regionPickerCurrencySection {
  margin-top: 20px;
  border-top: 0;
  padding-top: 0;
}

.regionPickerCurrencySection > header {
  display: grid;
  gap: 5px;
}

.regionPickerCurrencySection > header strong {
  font-size: 16px;
  font-weight: 850;
}

.regionPickerCurrencySection > header span {
  color: var(--text-3);
  font-size: 12px;
}

.regionPickerCurrencySegment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 4px;
}

.regionPickerCurrencySegment.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.regionPickerCurrencySegment button {
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  cursor: pointer;
}

.regionPickerCurrencySegment button.is-active {
  background: var(--surface-panel-strong);
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.08);
  color: var(--text-1);
}

.regionPickerCurrencySegment button:disabled {
  cursor: default;
}

.regionPickerCurrencySelect,
.regionPickerCurrencySelect .cuiDropdownSelectTrigger {
  width: 100%;
}

.regionPickerCurrencySelect {
  --cui-control-bg: var(--surface-panel-strong);
  --cui-control-line: var(--line-dark);
  --cui-text: var(--text-1);
  --cui-text-muted: var(--text-3);
  --cui-surface: var(--surface-panel-strong);
  --cui-surface-hover: var(--surface-panel-hover);
}

.regionPickerCurrencySelect .cuiDropdownSelectTrigger {
  min-height: 44px;
  background: var(--surface-panel-strong);
  color: var(--text-1);
}

@media (max-width: 620px) {
  .regionPickerPanel {
    padding: 16px;
  }

  .regionPickerGroups {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .regionPickerCountryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .loginRequiredState.cuiState {
    min-height: clamp(340px, calc(100dvh - 180px), 560px);
    padding: 32px 16px 48px;
  }

  .loginRequiredState .cuiStateIcon {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
  }

  .loginRequiredState .cuiStateTitle {
    font-size: 20px;
  }
}

@media (max-width: 760px) {
  .appTopbar .notificationTopbarTrigger.cuiIconButton,
  .appTopbar .userBadge,
  .topbarRight .regionPickerTrigger.topbarRegionSelector.compact {
    width: 100%;
    max-width: none;
  }

  .appTopbar .notificationTopbarTrigger.has-unread::after {
    right: 7px;
  }

  .appTopbar .userAccountMenu {
    margin-left: 0;
    border-left: 0;
    padding-left: 0;
  }

  .notificationTopbarPopover.cuiPopover {
    width: min(400px, calc(100vw - 20px));
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/auth.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Web auth CSS.
 *
 * Owner: auth/user-shell-home-market integration.
 * Allowed: login, identity callback, agreement, captcha, and auth-state screens.
 */

/* Login-local image CAPTCHA mirrors the Admin dialog with Web-owned selectors. */
.webLocalCaptchaDialogOverlay.cuiDialogOverlay {
  z-index: calc(var(--cui-z-modal) + 1);
}

.webLocalCaptchaDialog.cuiDialogContent {
  z-index: calc(var(--cui-z-modal) + 2);
  width: min(320px, calc(100vw - 28px));
  background: var(--cui-surface-strong);
}

.webLocalCaptchaDialogHeader {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.webLocalCaptchaDialogBody.cuiDialogBody {
  padding: 20px;
}

.webLocalCaptchaStack {
  display: grid;
  width: min(100%, 260px);
  gap: 10px;
  margin-inline: auto;
}

.webLocalCaptchaImageFrame {
  position: relative;
  width: 100%;
  aspect-ratio: 160 / 56;
  overflow: hidden;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface-subtle);
}

.webLocalCaptchaImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  transition:
    filter var(--cui-duration-fast) ease,
    opacity var(--cui-duration-fast) ease;
}

.webLocalCaptchaImage[data-ready='true'] {
  opacity: 1;
}

.webLocalCaptchaImageFrame[data-expired='true'] .webLocalCaptchaImage {
  filter: grayscale(1);
  opacity: 0.18;
}

.webLocalCaptchaExpiredState {
  position: absolute;
  inset: 0;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--cui-surface-subtle) 78%, transparent);
  color: var(--cui-danger);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
  padding: 10px 12px;
  text-align: center;
}

.webLocalCaptchaLoadingState.cuiState {
  position: absolute;
  inset: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--cui-surface-subtle);
  padding: 8px;
}

.webLocalCaptchaLoadingState .cuiStateIcon {
  width: 26px;
  height: 26px;
  margin-bottom: 6px;
}

.webLocalCaptchaLoadingState .cuiStateTitle {
  font-size: 12px;
}

.webLocalCaptchaRefreshWrap {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 1;
  line-height: 0;
}

.webLocalCaptchaRefresh.cuiIconButton,
.webLocalCaptchaRefresh.cuiIconButton:hover {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.webLocalCaptchaRefresh.cuiIconButton:not(:disabled):hover {
  color: var(--primary);
}

.webLocalCaptchaInput.cuiInput {
  width: 100%;
  height: 40px;
  text-align: center;
}

.webLocalCaptchaError {
  min-height: 18px;
  color: var(--cui-danger);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
  text-align: center;
}

.webLocalCaptchaVisuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Historical rules still referenced by current components. Source: 804728e9. */
.authRegisterStepPanel {
  display: grid;
  gap: 12px;
  animation: authPanelRise 180ms ease-out both;
}

.authRemoteLoginStep {
  gap: 14px;
  animation: authPanelRise 180ms ease-out both;
}

.authRemoteLoginTarget {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--auth-panel-control-border);
  padding: 2px 0 14px;
}

.authRemoteLoginTarget .authPanelIcon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--auth-brand-color) 14%, transparent);
  color: var(--auth-brand-color);
}

.authRemoteLoginTarget div,
.authRemoteLoginTarget p {
  min-width: 0;
}

.authRemoteLoginTarget strong {
  color: var(--auth-panel-soft);
  font-size: 12px;
  font-weight: 800;
}

.authRemoteLoginTarget p {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: var(--auth-panel-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.authRemoteLoginChannelField {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.authRemoteLoginChannelField > span,
.authRemoteLoginCodeField > span {
  color: var(--auth-panel-soft);
  font-size: 13px;
  font-weight: 800;
}

.authRemoteLoginChannelField .cuiSegmented {
  width: 100%;
}

.authRemoteLoginChannelField .cuiSegmentedButton {
  min-width: 0;
  flex: 1 1;
}

.authRemoteLoginCodeField {
  margin: 0;
}

.authRemoteLoginCodeField input {
  text-align: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 850;
}

.authRemoteLoginCountdown {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--auth-panel-muted);
  font-size: 12px;
  line-height: 1.6;
}

.authRemoteLoginCountdown.is-expired {
  color: var(--auth-panel-error-ink);
}

.authRemoteLoginActions {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.authRemoteLoginActions .cuiButton {
  min-width: 0;
  width: 100%;
  white-space: normal;
}

@media (max-width: 420px) {
  .authRemoteLoginActions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@keyframes authPanelRise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Global authentication dialog. The shared controls retain behavior while this
 * Web-owned scope reproduces the approved authentication visual. */
.authAgreementReadDone {
  margin-inline-start: 6px;
  color: #067647;
  font-size: 10px;
  font-weight: 700;
}

.authDesignOverlay {
  background: rgba(15, 23, 42, 0.54);
  -webkit-backdrop-filter: blur(9px);
          backdrop-filter: blur(9px);
}

.authDialogContent.cuiDialogContent {
  --auth-design-accent: #5163e7;
  --auth-design-border: #e3e6ec;
  --auth-design-ink: #111827;
  --auth-design-muted: #697386;
  --auth-design-primary: #111827;
  --auth-design-surface: #ffffff;
  --auth-panel-bg: var(--auth-design-surface);
  --auth-panel-border: var(--auth-design-border);
  --auth-panel-control-bg: #ffffff;
  --auth-panel-control-border: var(--auth-design-border);
  --auth-panel-ink: var(--auth-design-ink);
  --auth-panel-input-bg: #ffffff;
  --auth-panel-input-border: var(--auth-design-border);
  --auth-panel-input-ink: var(--auth-design-ink);
  --auth-panel-input-placeholder: #98a1b2;
  --auth-panel-muted: var(--auth-design-muted);
  --auth-panel-soft: #667085;
  width: min(860px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--auth-design-surface);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
  color: var(--auth-design-ink);
}

.authDialogHeader.cuiDialogHeader {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  padding: 0;
}

.authDialogHeader > div,
.authDialogA11yTitle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.authDesignClose {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.06);
  color: #3d4656;
}

.authDesignClose:hover {
  background: rgba(17, 24, 39, 0.1);
  color: #111827;
}

.authDialogBody.cuiDialogBody {
  min-height: 0;
  overflow: hidden;
  background: var(--auth-design-surface);
  padding: 0;
}

.authDesignShell {
  display: grid;
  grid-template-columns: minmax(260px, 0.76fr) minmax(390px, 1.1fr);
  min-height: 520px;
}

.authDesignSide {
  display: flex;
  min-height: 520px;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px;
  background: #101827;
  color: #ffffff;
}

.authDesignBrand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
}

.authDesignBrandLogo {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: block;
  border-radius: 6px;
  object-fit: contain;
}

.authDesignBrandFallback {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #ffffff;
  color: #101827;
}

.authDesignSideCopy h2 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 27px;
  line-height: 1.25;
}

.authDesignSideCopy p,
.authDesignSide small {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  line-height: 1.7;
}

.authDesignSideCopy ul {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-weight: 620;
}

.authDesignSideCopy li::before {
  margin-right: 9px;
  color: #10a8e8;
  content: '•';
}

.authDesignMain {
  min-width: 0;
  min-height: 520px;
  max-height: calc(100dvh - 48px);
  padding: 42px 42px 30px;
  overflow-y: auto;
  background: #ffffff;
}

.authDesignMainHeader {
  margin-bottom: 20px;
}

.authDesignMainHeader h2 {
  margin: 0;
  color: var(--auth-design-ink);
  font-size: 24px;
  line-height: 1.3;
}

.authDesignMainHeader p {
  margin: 7px 0 0;
  color: #737c8e;
  font-size: 12px;
  line-height: 1.6;
}

.authDialogFlowScope.authPage {
  min-height: 0;
  overflow: visible;
  background: #ffffff;
  color: var(--auth-design-ink);
}

.authDialogFlowScope .authFormPane,
.authDialogFlowScope .authCheckCard {
  width: 100%;
  min-height: 0;
}

.authFlow.authFormPane {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  background: transparent;
  padding: 0;
}

.authDialogFlowScope .authFormShell {
  width: 100%;
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  padding: 0;
}

.authDialogFlowScope .authModePanel,
.authDialogFlowScope .authRegisterStepPanel,
.authDialogFlowScope .authResetPanel {
  gap: 11px;
  animation: authViewIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes authViewIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.authDialogFlowScope .authSegmentedControl,
.authDialogFlowScope .authDesignLoginMethods.cuiSegmented {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  margin: 0 0 5px;
  border: 0;
  border-radius: 6px;
  background: #f2f4f7;
  box-shadow: none;
  padding: 4px;
}

.authDialogFlowScope .authSegmentedControl button,
.authDialogFlowScope .authDesignLoginMethods .cuiSegmentedButton {
  min-width: 0;
  min-height: 34px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #687286;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
}

.authDialogContent .authDialogFlowScope .authSegmentedControl button.active,
.authDialogContent
  .authDialogFlowScope
  .authSegmentedControl
  .cuiSegmentedButton[aria-pressed='true'],
.authDialogFlowScope .authDesignLoginMethods .cuiSegmentedButton[aria-pressed='true'] {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.07);
}

.authDialogFlowScope .authField {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--auth-design-border);
  border-radius: 6px;
  background: #ffffff;
  font-size: 12px;
}

.authDialogFlowScope .authField:focus-within {
  border-color: #6b7cff;
  box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.1);
}

.authDialogFlowScope .authField:has(.cuiControlError) {
  border-color: var(--cui-input-error-border);
}

.authDialogFlowScope .authField > span:first-child,
.authDialogFlowScope .authField > .cuiHelpLabel {
  width: auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 8px 0 13px;
  color: #667085;
  gap: 5px;
  font-size: 11px;
  font-weight: 680;
  line-height: 1.35;
}

.authDialogFlowScope .authField > .cuiHelpLabel label {
  color: inherit;
  font: inherit;
}

.authDialogFlowScope .authInputWithIcon,
.authDialogFlowScope .authVerificationCodeControls {
  min-width: 0;
  width: 100%;
}

.authDialogContent .authDialogFlowScope.authPage .authInputWithIcon:focus-within {
  box-shadow: none;
}

.authDialogFlowScope.authPage .authInputWithIcon {
  height: 44px;
}

.authDialogFlowScope .authInputWithIcon input {
  padding-inline-start: 13px;
}

.authDialogFlowScope .authInputWithIcon .cuiInput,
.authDialogFlowScope .authField > .cuiInput {
  height: 44px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: #111827;
  box-shadow: none;
  font-size: 12px;
}

.authDialogFlowScope .authInputWithIcon .cuiInput:focus,
.authDialogFlowScope .authField > .cuiInput:focus {
  border: 0;
  box-shadow: none;
}

.authDialogFlowScope .authField .cuiInput.cuiControlError {
  border-color: var(--cui-input-error-border);
}

.authDialogFlowScope .authField .cuiInput.cuiControlError:focus {
  border-color: var(--cui-input-error-border);
  box-shadow: 0 0 0 2px var(--cui-input-error-focus);
}

.authDialogFlowScope .authPasswordToggle {
  right: 5px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #7b8496;
}

.authDialogFlowScope .authPasswordToggle:hover:not(:disabled),
.authDialogFlowScope .authPasswordToggle:focus-visible {
  background: rgba(17, 24, 39, 0.06);
  color: #111827;
}

.authDialogFlowScope .authInlineActions {
  margin: 2px 0 0;
  color: #697386;
  font-size: 11px;
}

.authDialogFlowScope .authSwitchLink {
  color: #087cae;
  font-size: 11px;
  font-weight: 720;
}

.authDialogFlowScope .authAgreement {
  align-items: flex-start;
  gap: 6px;
  margin: 1px 0;
  color: #697386;
  font-size: 10px;
  line-height: 1.5;
}

.authDialogFlowScope .authAgreement .cuiCheckbox {
  margin-top: 1px;
}

.authAgreementReadDone {
  margin-inline-start: 6px;
  color: #067647;
  font-size: 10px;
  font-weight: 700;
}

.authDialogFlowScope .authAgreementInlineLink {
  color: #087cae;
}

.authDialogFlowScope .authSubmitButton,
.authDialogFlowScope .authSubmitButton.cuiButton {
  width: 100%;
  min-height: 42px;
  margin-top: 1px;
  border: 0;
  border-radius: 6px;
  background: var(--auth-design-primary);
  color: #ffffff;
  box-shadow: none;
  font-size: 13px;
  font-weight: 760;
}

.authDialogFlowScope .authSubmitButton:hover:not(:disabled),
.authDialogFlowScope .authSubmitButton.cuiButton:hover:not(:disabled) {
  background: #263142;
  filter: none;
}

.authDialogFlowScope .authDivider {
  margin: 0;
  color: #98a1b2;
  font-size: 10px;
  font-weight: 500;
}

.authDialogFlowScope .authDivider::before,
.authDialogFlowScope .authDivider::after {
  background: #eceef2;
}

.authDialogFlowScope .authOAuthGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.authDialogFlowScope .authOAuthButton,
.authDialogFlowScope .authOAuthButton.github {
  min-height: 40px;
  border: 1px solid #e5e7ec;
  border-radius: 6px;
  background: #ffffff;
  color: #374151;
  font-size: 11px;
  font-weight: 690;
}

.authDialogFlowScope .authOAuthButton:hover:not(:disabled) {
  border-color: #cbd2dc;
  background: #f8fafc;
}

.authDialogFlowScope .authOAuthButton img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.authDialogFlowScope .authOAuthButton > span {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef1f5;
  color: #374151;
  font-size: 9px;
}

.authDialogFlowScope .authWechatScanPanel {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--cui-border-subtle, rgba(127, 127, 127, 0.24));
  border-radius: 8px;
  text-align: center;
}

.authDialogFlowScope .authWechatScanPanel p {
  margin: 0;
  color: var(--cui-text-secondary, #667085);
  font-size: 13px;
}

.authDialogFlowScope .authWechatScanQRCode {
  width: 180px;
  height: 180px;
  border-radius: 4px;
  background: #fff;
  object-fit: contain;
}

.authDialogFlowScope .authRegisterContactControls {
  min-width: 0;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.authVerificationCodeControls {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
  align-items: stretch;
  gap: 0;
}

.authVerificationCodeControls .authInputWithIcon,
.authVerificationCodeControls .cuiInput {
  min-width: 0;
  width: 100%;
}

.authDialogFlowScope .authOutlineButton.authSendCodeButton {
  min-width: 112px;
  height: 44px;
  align-self: stretch;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #5163e7;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 720;
  white-space: nowrap;
}

.authDialogFlowScope .authOutlineButton.authSendCodeButton:hover:not(:disabled) {
  background: #f7f8ff;
}

.authDialogFlowScope .authPhoneJoinedInput {
  height: 44px;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: stretch;
}

.authDialogFlowScope .authPhonePrefixSelect {
  width: 60px;
  min-width: 60px;
  height: 44px;
  border-right: 1px solid var(--auth-design-border);
}

.authDialogFlowScope .authPhonePrefixSelect .cuiDropdownSelectTrigger {
  height: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 0 7px 0 9px;
  font-size: 11px;
}

.authDialogFlowScope .authPhonePrefixSelect .cuiDropdownSelectTrigger:hover,
.authDialogFlowScope .authPhonePrefixSelect.cuiDropdownSelectOpen .cuiDropdownSelectTrigger,
.authDialogFlowScope .authPhonePrefixSelect .cuiDropdownSelectTrigger:focus-visible {
  border: 0;
  background: #f8fafc;
  box-shadow: none;
}

.authDialogFlowScope .authPhonePrefixSelect .cuiDropdownSelectValue {
  font-size: 11px;
  font-weight: 760;
}

.authDialogFlowScope .authPhonePrefixSelect .cuiDropdownSelectChevron {
  margin-left: 4px;
  border-top-width: 4px;
  border-right-width: 3px;
  border-left-width: 3px;
}

.authPhonePrefixMenu.cuiDropdownSelectMenu {
  width: 88px !important;
  min-width: 88px;
  z-index: var(--cui-z-popover);
  padding: 4px;
}

.authPhonePrefixMenu .cuiDropdownSelectOption {
  min-height: 32px;
  padding: 0 9px;
}

.authPhonePrefixMenu .cuiDropdownSelectOptionLabel {
  font-size: 12px;
}

.authDialogFlowScope .authForgotPasswordAction {
  justify-content: flex-start;
}

.authDialogFlowScope .authPendingIdentityPanel,
.authDialogFlowScope .authRemoteLoginTarget {
  border-color: #e3e6ec;
  background: #f8fafc;
}

.authDialogFlowScope .authRemoteLoginCodeField .cuiInput {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
}

.authDialogFlowScope .authRemoteLoginActions {
  gap: 9px;
}

.authDialogFlowScope .authRemoteLoginActions .cuiButton,
.authDialogFlowScope .authRemoteLoginStep > .cuiButton.cuiButtonPrimary {
  min-height: 40px;
  border-radius: 6px;
}

.authDialogFlowScope .authRemoteLoginStep > .cuiButtonPrimary {
  background: var(--auth-design-primary);
}

.authPasswordHelpContent {
  display: grid;
  gap: 6px;
}

.authPasswordHelpContent ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-inline-start: 18px;
}

.authPasswordProgress {
  width: 100%;
}

.authRegionPolicyLoading.cuiState {
  min-height: 260px;
  border: 0;
  background: transparent;
}

.authRegionPolicyLoading .cuiStateIcon {
  margin-bottom: 0;
}

.authRegionPolicyLoadingLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.authDialogFlowScope .authCheckCard {
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 760px) {
  .authDialogContent {
    width: min(500px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
  }

  .authDialogBody .authDesignSide {
    display: none;
  }

  .authDialogBody .authDesignShell {
    display: block;
    min-height: 0;
  }

  .authDialogBody .authDesignMain {
    min-height: min(570px, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px);
    padding: 48px 22px 26px;
  }
}

@media (max-width: 420px) {
  .authDialogBody .authDesignShell .authDesignMain {
    min-height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 44px 18px 22px;
  }

  .authDialogFlowScope.authPage .authOAuthGrid,
  .authDialogFlowScope.authPage .authRemoteLoginActions {
    grid-template-columns: minmax(0, 1fr);
  }

  .authDialogFlowScope.authPage .authField {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .authDialogFlowScope.authPage .authVerificationCodeControls {
    grid-template-columns: minmax(0, 1fr) minmax(96px, auto);
  }

  .authDialogFlowScope.authPage .authOutlineButton.authSendCodeButton {
    min-width: 96px;
    padding: 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .authDialogContent.cuiDialog--xl,
  .authDialogFlowScope.authPage .authModePanel,
  .authDialogFlowScope.authPage .authRegisterStepPanel,
  .authDialogFlowScope.authPage .authResetPanel {
    animation: none;
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/agreements.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.agreementDocumentPage {
  min-height: 100vh;
  background: #fff;
  color: #202124;
  letter-spacing: 0;
}

.agreementDocumentTopbar {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 32px;
  border-bottom: 1px solid #e5e7eb;
  background: rgb(255 255 255 / 96%);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.agreementDocumentBrandLink {
  display: inline-flex;
  align-items: center;
  width: 148px;
  min-width: 0;
}

.agreementDocumentBrand.brandLogo,
.agreementDocumentBrand.brandLogo img {
  display: block;
  width: 100%;
  height: auto;
}

.agreementDocumentMain {
  min-width: 0;
}

.agreementDocumentMain > .cuiState {
  width: min(100% - 40px, 820px);
  margin: 72px auto;
}

.agreementDocumentArticle,
.agreementDocumentState {
  width: calc(100% - 48px);
  max-width: 820px;
  margin: 0 auto;
}

.agreementDocumentArticle {
  padding: 64px 0 88px;
}

.agreementDocumentHeading {
  padding-bottom: 28px;
  border-bottom: 1px solid #e5e7eb;
}

.agreementDocumentHeading h1,
.agreementDocumentState h1 {
  margin: 0;
  color: #111827;
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: 0;
}

.agreementDocumentHeading p,
.agreementDocumentState p {
  margin: 14px 0 0;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.75;
}

.agreementDocumentState {
  padding: 80px 0;
}

.agreementDocumentMarkdown {
  min-width: 0;
  padding-top: 30px;
  color: #374151;
  font-size: 16px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.agreementDocumentMarkdown > :first-child {
  margin-top: 0;
}

.agreementDocumentMarkdown > :last-child {
  margin-bottom: 0;
}

.agreementDocumentMarkdown h1,
.agreementDocumentMarkdown h2,
.agreementDocumentMarkdown h3,
.agreementDocumentMarkdown h4,
.agreementDocumentMarkdown h5,
.agreementDocumentMarkdown h6 {
  color: #111827;
  line-height: 1.4;
  letter-spacing: 0;
  scroll-margin-top: 84px;
}

.agreementDocumentMarkdown h1 {
  margin: 42px 0 18px;
  font-size: 28px;
}

.agreementDocumentMarkdown h2 {
  margin: 38px 0 16px;
  font-size: 23px;
}

.agreementDocumentMarkdown h3,
.agreementDocumentMarkdown h4,
.agreementDocumentMarkdown h5,
.agreementDocumentMarkdown h6 {
  margin: 30px 0 14px;
  font-size: 18px;
}

.agreementDocumentMarkdown p,
.agreementDocumentMarkdown ul,
.agreementDocumentMarkdown ol,
.agreementDocumentMarkdown blockquote,
.agreementDocumentMarkdown pre,
.agreementDocumentMarkdown table {
  margin: 0 0 20px;
}

.agreementDocumentMarkdown ul,
.agreementDocumentMarkdown ol {
  padding-left: 28px;
}

.agreementDocumentMarkdown li + li {
  margin-top: 7px;
}

.agreementDocumentMarkdown blockquote {
  padding: 12px 18px;
  border-left: 3px solid #16a34a;
  background: #f6f8fa;
  color: #4b5563;
}

.agreementDocumentMarkdown a {
  color: #067647;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.agreementDocumentMarkdown code {
  padding: 2px 5px;
  border-radius: 4px;
  background: #f3f4f6;
  color: #9f1239;
  font-size: 0.92em;
}

.agreementDocumentMarkdown pre {
  max-width: 100%;
  padding: 16px;
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #111827;
  color: #f9fafb;
}

.agreementDocumentMarkdown pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}

.agreementDocumentTableWrap {
  max-width: 100%;
  margin: 0 0 20px;
  overflow-x: auto;
}

.agreementDocumentTableWrap table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.agreementDocumentTableWrap th,
.agreementDocumentTableWrap td {
  min-width: 132px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  text-align: left;
  vertical-align: top;
}

.agreementDocumentTableWrap th {
  background: #f3f4f6;
  color: #111827;
}

.agreementDocumentEmpty {
  margin: 30px 0 0;
  color: #6b7280;
}

.agreementDocumentReceiptBand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px max(24px, calc((100% - 820px) / 2));
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.agreementDocumentReceiptBand > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.agreementDocumentReceiptBand strong {
  color: #374151;
  font-size: 14px;
  line-height: 1.5;
}

.agreementDocumentReceiptBand span {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
}

.agreementDocumentReceiptBand [role='alert'] {
  color: #b42318;
}

body:has(.agreementDocumentPage) .agentFloatingOrb,
body:has(.agreementDocumentPage) .agentFloatingPanel,
body:has(.agreementDocumentPage) .agentFloatingEdgeTab,
body:has(.agreementDocumentPage) .globalRuntimeDbStatus {
  display: none;
}

@media (max-width: 720px) {
  .agreementDocumentTopbar {
    min-height: 56px;
    padding: 0 20px;
  }

  .agreementDocumentBrandLink {
    width: 132px;
  }

  .agreementDocumentArticle,
  .agreementDocumentState {
    width: calc(100% - 32px);
  }

  .agreementDocumentArticle {
    padding: 42px 0 56px;
  }

  .agreementDocumentHeading h1,
  .agreementDocumentState h1 {
    font-size: 28px;
  }

  .agreementDocumentMarkdown {
    padding-top: 24px;
    font-size: 15px;
  }

  .agreementDocumentMarkdown h1 {
    font-size: 24px;
  }

  .agreementDocumentMarkdown h2 {
    font-size: 20px;
  }

  .agreementDocumentReceiptBand {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    padding: 18px 16px;
  }

  .agreementDocumentReceiptBand .cuiButton {
    width: 100%;
  }
}

.agreementDocumentInlineLink {
  color: #067647;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/workbench.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Workbench/home CSS.
 *
 * Owner: total-control/framework.
 * Allowed: new workbench/home dashboard layout, cards, AI entry composition,
 * and home-specific responsive behavior.
 *
 * Existing pre-split rules live in legacy-workbench.css to preserve cascade
 * order. Put new focused workbench fixes in this file.
 */

.categoryMarketTaskPriority {
  justify-self: start;
  border-radius: 999px;
  padding: 2px 7px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-panel));
  color: var(--primary-light);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.categoryMarketTaskPriority.p0 {
  background: color-mix(in srgb, #dc2626 12%, var(--surface-panel));
  color: #dc2626;
}

.categoryMarketStrategyDetail {
  margin: -4px 0 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.55;
}

html[data-brand-preview='1'] {
  scrollbar-width: none;
}

html[data-brand-preview='1']::-webkit-scrollbar {
  display: none;
}

/*
 * Refined data-workspace skin.
 * Flat surfaces, restrained active states and compact software density replace
 * decorative gradients, floating shadows and pill-heavy selection patterns.
 */
.homeWorkbenchPage {
  --home-refined-radius: 4px;
  --home-refined-row: color-mix(in srgb, var(--surface-panel-hover) 72%, transparent);
  --home-refined-active: color-mix(in srgb, var(--primary) 7%, var(--surface-panel));
  gap: 12px;
}

.homeWorkbenchSharedDataState {
  min-height: 320px;
  border-radius: 8px;
}

.homeWorkbenchShopSearchSharedState.cuiState {
  min-height: 70px;
  border: 0;
  border-radius: 4px;
  padding: 12px;
}

.homeWorkbenchShopSearchSharedState .cuiStateTitle {
  font-size: 11px;
}

body:has(.homeWorkbenchPage) .appSidebar .navItem.active {
  border-color: transparent;
  border-radius: 2px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  background-image: none;
  box-shadow: inset 2px 0 0 var(--primary);
}

body:has(.homeWorkbenchPage) .appSidebar .navItem.active .navIcon {
  background: transparent;
  color: var(--primary-light);
}

body:has(.homeWorkbenchPage) .appSidebar .navSectionToggle.is-active {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--primary-light);
}

.homeWorkbenchDashboardHeader {
  min-height: 44px;
  gap: 18px;
  border-bottom: 1px solid var(--line-dark);
  padding: 0 0 9px;
}

.homeWorkbenchDashboardTitle {
  font-size: 14px;
  font-weight: 820;
}

.homeWorkbenchDashboardTitle svg {
  color: var(--text-2);
}

.homeWorkbenchHeaderActions {
  gap: 14px;
}

.homeWorkbenchSegmentedControl {
  display: inline-flex;
  gap: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.homeWorkbenchSegmentedControl button {
  position: relative;
  min-height: 34px;
  border-radius: 0;
  padding: 0 2px;
  font-weight: 760;
}

.homeWorkbenchSegmentedControl button.active {
  background: transparent;
  color: var(--primary);
  box-shadow: none;
}

.homeWorkbenchSegmentedControl button.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  height: 2px;
  background: var(--primary);
}

.homeWorkbenchEditButton,
.homeWorkbenchDiyActions button,
.homeWorkbenchInlineAction,
.homeWorkbenchTemplateFormActions button,
.homeWorkbenchResetRow button {
  border-radius: var(--home-refined-radius);
  box-shadow: none;
}

.homeWorkbenchEditButton:hover {
  border-color: var(--line-dark-strong);
  background: var(--home-refined-row);
  color: var(--text-1);
}

.homeWorkbenchPanel,
.homeWorkbenchAgentColumn,
.homeWorkbenchPreviewFrame,
.homeWorkbenchDiySection,
.homeWorkbenchTemplateOption,
.homeWorkbenchChartLibraryItem,
.homeWorkbenchInsightOption {
  border-radius: var(--home-refined-radius);
  background-image: none;
  box-shadow: none;
}

.homeWorkbenchThreeZoneGrid,
.homeWorkbenchSideColumn,
.homeWorkbenchTemplateBody {
  gap: 12px;
}

.homeWorkbenchPanel > header.homeWorkbenchControlDeck {
  position: relative;
  min-height: 58px;
  margin: -4px -4px 0;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  background: var(--surface-panel);
  box-shadow: none;
  padding: 8px 4px 10px;
}

.homeWorkbenchTemplateGlyph {
  border-radius: 3px;
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-panel));
  font-weight: 820;
}

.homeWorkbenchControlHero h2 {
  font-size: 14px;
  font-weight: 820;
}

.homeWorkbenchControlShelf {
  gap: 10px;
}

.homeWorkbenchControlShelf > .homeWorkbenchRangeField {
  margin-left: 14px;
}

.homeWorkbenchControlShelf > .homeWorkbenchGlobalMarketField {
  margin-left: 14px;
}

.homeWorkbenchControlShelf .homeWorkbenchShopField,
.homeWorkbenchControlShelf .homeWorkbenchGlobalMarketField {
  flex-basis: 240px;
}

.homeWorkbenchSidePanelToggle {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}

.homeWorkbenchSidePanelToggle:hover {
  background: var(--home-refined-active);
  color: var(--primary);
}

.homeWorkbenchSharedMultiSelect.cuiMultiSelect,
.homeWorkbenchControlField .cuiDropdownSelect {
  width: 100%;
  min-width: 0;
}

.homeWorkbenchSharedMultiSelect.cuiMultiSelect {
  min-height: 34px;
  border-color: var(--line-dark);
  border-radius: var(--home-refined-radius);
  background: var(--surface-panel);
  box-shadow: none;
}

.homeWorkbenchSharedMultiSelect .cuiMultiSelectControl {
  min-width: 0;
  min-height: 32px;
  flex-wrap: nowrap;
}

.homeWorkbenchSharedMultiSelect .cuiMultiSelectTag {
  max-width: calc(100% - 24px);
  border: 0;
  border-radius: 2px;
  background: transparent;
  padding-left: 4px;
}

.homeWorkbenchSharedMultiSelect .cuiMultiSelectTagLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchControlField .cuiDropdownSelectTrigger {
  min-height: 34px;
  border-color: var(--line-dark);
  border-radius: var(--home-refined-radius);
  background: var(--surface-panel);
  box-shadow: none;
}

.homeWorkbenchChartCanvas {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.homeWorkbenchControlField select {
  border-color: var(--line-dark);
  border-radius: var(--home-refined-radius);
  background: var(--surface-panel);
  font-weight: 760;
  box-shadow: none;
}

.homeWorkbenchMultiSelect {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: var(--home-refined-radius);
  background: var(--surface-panel);
  box-shadow: none;
}

.homeWorkbenchMultiSelect summary {
  min-width: 0;
  min-height: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  padding: 0 9px;
}

.homeWorkbenchMultiSelect summary::-webkit-details-marker {
  display: none;
}

.homeWorkbenchMultiSelect summary > span {
  overflow: hidden;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchMultiSelect summary em {
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
}

.homeWorkbenchMultiSelectMenu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line-dark);
  background: var(--surface-panel);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  padding: 4px;
}

.homeWorkbenchMultiSelectMenu label {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 0 8px;
}

.homeWorkbenchMultiSelectMenu label:hover,
.homeWorkbenchMultiSelectMenu label:has(input:checked) {
  background: var(--surface-panel-hover);
}

.homeWorkbenchMultiSelectMenu label input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.homeWorkbenchMultiSelectMenu label i {
  color: var(--primary);
  font-style: normal;
  font-weight: 800;
}

.homeWorkbenchShopStrategyRank {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  background: var(--surface-panel-hover);
  color: var(--primary);
  font-weight: 800;
}

.homeWorkbenchRangeField .homeWorkbenchRangeTabs {
  gap: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.homeWorkbenchRangeTabs button,
.homeWorkbenchRangeField .homeWorkbenchRangeTabs button {
  border-radius: 0;
  font-weight: 760;
}

.homeWorkbenchRangeTabs button.active,
.homeWorkbenchRangeField .homeWorkbenchRangeTabs button.active {
  border-color: transparent;
  background: transparent;
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--primary);
}

.homeWorkbenchKpiGrid {
  gap: 8px;
}

.homeWorkbenchKpi {
  --home-kpi-tint: var(--primary);
  container-name: home-workbench-kpi;
  container-type: inline-size;
  min-height: 126px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(24px, 1fr) auto;
  align-content: stretch;
  gap: 8px;
  border-color: var(--line-dark);
  border-radius: var(--home-refined-radius);
  background: var(--surface-panel);
  padding: 16px 14px 14px;
}

.homeWorkbenchKpi::after {
  content: none;
}

.homeWorkbenchKpi.cyan {
  --home-kpi-tint: #4b9f99;
}

.homeWorkbenchKpi.green {
  --home-kpi-tint: #4f8f6c;
}

.homeWorkbenchKpi.amber {
  --home-kpi-tint: #b98732;
}

.homeWorkbenchKpi.rose {
  --home-kpi-tint: #bd5b6d;
}

.homeWorkbenchKpi.purple {
  --home-kpi-tint: #7b748c;
}

.homeWorkbenchKpi > span {
  align-self: center;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 720;
}

.homeWorkbenchKpi > strong {
  min-width: 0;
  font-size: 27px;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
}

.homeWorkbenchKpi > footer {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.homeWorkbenchKpi > footer small {
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchKpi > footer em {
  flex: 0 0 auto;
  color: #3f9278;
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

@container home-workbench-kpi (max-width: 180px) {
  .homeWorkbenchKpi > strong {
    font-size: 20px;
  }

  .homeWorkbenchKpi > footer {
    gap: 6px;
  }

  .homeWorkbenchKpi > footer small {
    font-size: 10px;
  }

  .homeWorkbenchKpi > footer em {
    font-size: 11px;
  }
}

.homeWorkbenchCommerceCard,
.homeWorkbenchChartCard,
.homeWorkbenchStrategyCard,
.homeWorkbenchTierFocusGrid article,
.homeWorkbenchProductEvidenceGrid article,
.homeWorkbenchCreatorProfile,
.homeWorkbenchCompetitorHero,
.homeWorkbenchCompetitorAction,
.homeWorkbenchInsightNote {
  border-radius: var(--home-refined-radius);
  background: var(--surface-panel);
  background-image: none;
  box-shadow: none;
}

.homeWorkbenchCommerceCard,
.homeWorkbenchChartCard {
  border-color: var(--line-dark);
}

.homeWorkbenchInsightHeader > div {
  gap: 6px;
}

.homeWorkbenchInsightHeader span {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  background: transparent;
  color: var(--text-2);
}

.homeWorkbenchInsightHeader strong {
  font-size: 13px;
  font-weight: 820;
}

.homeWorkbenchInsightHeader em {
  font-weight: 720;
}

.homeWorkbenchRankList,
.homeWorkbenchAdVideoList,
.homeWorkbenchChannelList,
.homeWorkbenchAlertList {
  gap: 0;
}

.homeWorkbenchInsightLayout.category > .homeWorkbenchInsightRail {
  gap: 0;
}

/* Keep every workbench rail visually continuous. The legacy 8px grid gap
   exposed the rail background as a white strip between otherwise flat rows. */
.homeWorkbenchInsightRail {
  gap: 0;
}

.homeWorkbenchActionCreatorList {
  min-width: 0;
  display: grid;
  gap: 0;
}

.homeWorkbenchActionCreatorList > a {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--line-dark);
  color: inherit;
  text-decoration: none;
}

.homeWorkbenchActionCreatorList img {
  width: 36px;
  height: 36px;
  object-fit: cover;
}

.homeWorkbenchActionCreatorList div {
  min-width: 0;
}

.homeWorkbenchActionCreatorList strong,
.homeWorkbenchActionCreatorList p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchActionCreatorList strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 780;
}

.homeWorkbenchActionCreatorList p,
.homeWorkbenchActionCreatorList span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 650;
}

.homeWorkbenchCreatorScore {
  min-width: 34px;
  padding: 5px 8px;
  color: #3f9278 !important;
  background: color-mix(in srgb, #3f9278 12%, transparent);
  border-radius: 6px;
  text-align: center;
  font-size: 12px !important;
  font-weight: 780 !important;
  line-height: 1;
}

.homeWorkbenchRankRow,
.homeWorkbenchAdVideoRow,
.homeWorkbenchCreatorCandidate,
.homeWorkbenchLiveCandidate,
.homeWorkbenchCategoryRow,
.homeWorkbenchCompetitorRow,
.homeWorkbenchStructureList button,
.homeWorkbenchMismatchList button {
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
}

.homeWorkbenchRankRow:hover,
.homeWorkbenchRankRow.isActive,
.homeWorkbenchAdVideoRow:hover,
.homeWorkbenchAdVideoRow.isActive,
.homeWorkbenchCreatorCandidate:hover,
.homeWorkbenchCreatorCandidate.isActive,
.homeWorkbenchLiveCandidate:hover,
.homeWorkbenchLiveCandidate.isActive,
.homeWorkbenchCategoryRow:hover,
.homeWorkbenchCategoryRow.isActive,
.homeWorkbenchCompetitorRow:hover,
.homeWorkbenchCompetitorRow.isActive,
.homeWorkbenchStructureList button:hover,
.homeWorkbenchStructureList button.isActive,
.homeWorkbenchMismatchList button:hover,
.homeWorkbenchMismatchList button.isActive {
  border-color: var(--line-dark);
  background: var(--home-refined-active);
  background-image: none;
  box-shadow: none;
}

.homeWorkbenchLiveCandidate {
  min-height: 92px;
  box-sizing: border-box;
  transform: none !important;
  transition: background-color 140ms ease;
}

.homeWorkbenchLiveCandidate:hover,
.homeWorkbenchLiveCandidate.isActive {
  transform: none !important;
}

.homeWorkbenchInsightLayout.actionList.shopScope {
  grid-template-columns: minmax(0, 1fr);
}

.homeWorkbenchProductRecommendationLayout {
  display: grid;
  grid-template-columns: minmax(260px, .46fr) minmax(0, 1fr);
  gap: 14px;
}

.homeWorkbenchProductRecommendationList {
  min-width: 0;
  display: grid;
  align-content: start;
}

.homeWorkbenchProductRecommendationList button {
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.homeWorkbenchProductRecommendationList button:hover,
.homeWorkbenchProductRecommendationList button.isActive {
  background: var(--home-refined-active);
}

.homeWorkbenchProductRecommendationList button > span,
.homeWorkbenchProductRecommendationList button > b {
  color: #3f9278;
  font-size: 12px;
  font-weight: 780;
  text-align: center;
}

.homeWorkbenchProductRecommendationList button div {
  min-width: 0;
}

.homeWorkbenchProductRecommendationList strong,
.homeWorkbenchProductRecommendationList p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchProductRecommendationList strong {
  color: var(--text-1);
  font-size: 13px;
}

.homeWorkbenchProductRecommendationList p {
  margin-top: 4px;
  color: var(--text-3);
  font-size: 11px;
}

.homeWorkbenchProductRecommendationDetail {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  padding: 14px;
}

.homeWorkbenchProductRecommendationDetail > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.homeWorkbenchProductRecommendationDetail header div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.homeWorkbenchProductRecommendationDetail header span,
.homeWorkbenchProductRecommendationDetail footer > span {
  width: fit-content;
  color: #3f9278;
  font-size: 11px;
  font-weight: 750;
}

.homeWorkbenchProductRecommendationDetail header strong {
  color: var(--text-1);
  font-size: 17px;
}

.homeWorkbenchProductRecommendationDetail header p,
.homeWorkbenchProductRecommendationDetail section p,
.homeWorkbenchProductRecommendationDetail footer p {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.6;
}

.homeWorkbenchProductRecommendationDetail header > b {
  display: grid;
  color: #3f9278;
  font-size: 24px;
  text-align: right;
}

.homeWorkbenchProductRecommendationDetail header small {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 650;
}

.homeWorkbenchProductRecommendationDetail section,
.homeWorkbenchProductRecommendationDetail footer {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line-dark);
  padding-top: 10px;
}

.homeWorkbenchProductRecommendationDetail section > strong {
  color: var(--text-1);
  font-size: 12px;
}

.homeWorkbenchCategoryExpansion {
  min-width: 0;
}

.homeWorkbenchCategoryProductRank {
  min-width: 0;
  display: grid;
  overflow-x: auto;
  border-top: 1px solid var(--line-dark);
}

.homeWorkbenchCategoryProductRank > header,
.homeWorkbenchCategoryProductRank > a {
  min-width: 720px;
  display: grid;
  grid-template-columns: minmax(280px, 1.8fr) minmax(84px, .55fr) minmax(92px, .62fr) minmax(72px, .46fr) minmax(96px, .62fr);
  align-items: center;
  column-gap: 14px;
  border-bottom: 1px solid var(--line-dark);
  padding: 0 14px;
}

.homeWorkbenchCategoryProductRank > header {
  min-height: 38px;
  color: var(--text-3);
  background: var(--home-refined-row);
  font-size: 11px;
  font-weight: 650;
}

.homeWorkbenchCategoryProductRank > a {
  min-height: 76px;
  color: inherit;
  text-decoration: none;
  transition: background-color 140ms ease;
}

.homeWorkbenchCategoryProductRank > a:hover {
  background: var(--home-refined-active);
}

.homeWorkbenchCategoryProductRank > a > b {
  grid-column: 1;
  grid-row: 1;
  width: 24px;
  color: #3f9278;
  font-size: 13px;
  text-align: center;
}

.homeWorkbenchCategoryProductRank img {
  grid-column: 1;
  grid-row: 1;
  width: 52px;
  height: 52px;
  margin-left: 34px;
  object-fit: cover;
}

.homeWorkbenchCategoryProductRank > a > div {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  margin-left: 98px;
}

.homeWorkbenchCategoryProductRank strong,
.homeWorkbenchCategoryProductRank p {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchCategoryProductRank strong {
  color: var(--text-1);
  font-size: 13px;
}

.homeWorkbenchCategoryProductRank p {
  margin-top: 5px;
  color: var(--text-3);
  font-size: 11px;
}

.homeWorkbenchCategoryProductRank > a > span,
.homeWorkbenchCategoryProductRank > a > em,
.homeWorkbenchCategoryProductRank > a > small {
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
}

.homeWorkbenchCategoryProductRank > a > em.up,
.homeWorkbenchBlueOceanGrid .up {
  color: #3f9278;
}

.homeWorkbenchCategoryProductRank > a > em.down,
.homeWorkbenchBlueOceanGrid .down {
  color: #bd596a;
}

.homeWorkbenchCategoryProductRank > a > small {
  width: fit-content;
  padding: 3px 7px;
  background: color-mix(in srgb, #3f9278 9%, transparent);
  color: #3f9278;
}

.homeWorkbenchCategoryObjectGrid,
.homeWorkbenchBlueOceanGrid,
.homeWorkbenchCategoryLiveCaseGrid,
.homeWorkbenchLifecycleGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.homeWorkbenchCategoryObjectGrid > article {
  min-width: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-dark);
  padding: 10px;
}

.homeWorkbenchCategoryObjectGrid img {
  width: 76px;
  height: 76px;
  object-fit: cover;
}

.homeWorkbenchCategoryObjectGrid div {
  min-width: 0;
}

.homeWorkbenchCategoryObjectGrid span,
.homeWorkbenchCategoryObjectGrid strong,
.homeWorkbenchCategoryObjectGrid p {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchCategoryObjectGrid span,
.homeWorkbenchCategoryObjectGrid p {
  color: var(--text-3);
  font-size: 11px;
}

.homeWorkbenchCategoryObjectGrid strong {
  margin: 5px 0;
  color: var(--text-1);
  font-size: 13px;
}

.homeWorkbenchCategoryObjectGrid > article > b,
.homeWorkbenchBlueOceanGrid header > b {
  color: #3f9278;
  font-size: 13px;
}

.homeWorkbenchBlueOceanGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.homeWorkbenchBlueOceanGrid > button,
.homeWorkbenchCategoryLiveCaseGrid article,
.homeWorkbenchLifecycleGrid article {
  min-width: 0;
  border: 1px solid var(--line-dark);
  padding: 12px;
}

.homeWorkbenchBlueOceanGrid > button {
  display: grid;
  align-content: start;
  gap: 12px;
  border-top: 2px solid color-mix(in srgb, #58a49d 55%, var(--line-dark));
  background: var(--surface-panel);
  color: inherit;
  font: inherit;
  text-align: left;
  transition: background-color 140ms ease;
}

.homeWorkbenchBlueOceanGrid > button:hover,
.homeWorkbenchBlueOceanGrid > button.isActive {
  background: var(--home-refined-active);
}

.homeWorkbenchBlueOceanGrid header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.homeWorkbenchBlueOceanGrid header div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.homeWorkbenchBlueOceanGrid header > b {
  display: grid;
  justify-items: end;
  font-size: 22px;
  line-height: 1;
}

.homeWorkbenchBlueOceanGrid header > b small {
  margin-top: 5px;
  color: var(--text-3);
  font-size: 9px;
  font-weight: 600;
}

.homeWorkbenchBlueOceanEvidence {
  display: grid;
  gap: 8px;
}

.homeWorkbenchBlueOceanEvidence > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px 24px;
  align-items: center;
  gap: 7px;
}

.homeWorkbenchBlueOceanEvidence i {
  height: 5px;
  overflow: hidden;
  background: var(--home-refined-row);
}

.homeWorkbenchBlueOceanEvidence i b {
  display: block;
  height: 100%;
  background: #58a49d;
}

.homeWorkbenchBlueOceanEvidence em {
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
}

.homeWorkbenchBlueOceanEvidence strong {
  font-size: 11px;
  text-align: right;
}

.homeWorkbenchBlueOceanGrid > button > p {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
}

.homeWorkbenchBlueOceanGrid > button > p b {
  font-size: 13px;
}

.homeWorkbenchBlueOceanGrid > button > p span {
  font-size: 10px;
}

.homeWorkbenchBlueOceanPanel {
  display: grid;
  gap: 18px;
}

.homeWorkbenchBlueOceanProducts {
  min-width: 0;
  display: grid;
  overflow-x: auto;
  border-top: 1px solid var(--line-dark);
}

.homeWorkbenchDecisionTable {
  min-width: 0;
  overflow-x: auto;
}

.homeWorkbenchDecisionTable > header,
.homeWorkbenchDecisionTable > div {
  display: grid;
  grid-template-columns: minmax(260px, 1.55fr) repeat(4, minmax(120px, .72fr));
  align-items: center;
  gap: 12px;
  min-width: 850px;
  border-bottom: 1px solid var(--line-dark);
  padding: 0 12px;
}

.homeWorkbenchDecisionTable > header {
  min-height: 36px;
  background: var(--home-refined-row);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 720;
}

.homeWorkbenchDecisionTable > div {
  min-height: 62px;
  transition: background-color 140ms ease;
}

.homeWorkbenchDecisionTable > div:hover {
  background: var(--home-refined-active);
}

.homeWorkbenchDecisionTable > div > div {
  min-width: 0;
  color: var(--text-2);
  font-size: 11px;
}

.homeWorkbenchDecisionTable > div > div > strong,
.homeWorkbenchDecisionTable > div > div > span > strong {
  color: var(--text-1);
  font-size: 12px;
}

.homeWorkbenchDecisionTable > div > div > span,
.homeWorkbenchDecisionTable > div > div > span > small {
  display: grid;
  gap: 3px;
}

.homeWorkbenchDecisionTable small {
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchDecisionTable em {
  font-style: normal;
  font-weight: 740;
}

.homeWorkbenchDecisionTable em.up {
  color: #3f9278;
}

.homeWorkbenchDecisionTable em.down {
  color: #bd596a;
}

.homeWorkbenchDecisionObject {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.homeWorkbenchDecisionObject img {
  width: 42px;
  height: 42px;
  object-fit: cover;
}

.homeWorkbenchDecisionObject.isVideo img {
  height: 50px;
}

.homeWorkbenchDecisionObject > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.homeWorkbenchDecisionObject strong,
.homeWorkbenchDecisionObject span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchDecisionObject strong {
  color: var(--text-1);
  font-size: 11px;
}

.homeWorkbenchDecisionObject span {
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchDecisionTable b[class^='decision-'] {
  width: fit-content;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 740;
}

.homeWorkbenchDecisionTable .decision-scale {
  background: color-mix(in srgb, #3f9278 10%, transparent);
  color: #3f8179;
}

.homeWorkbenchDecisionTable .decision-watch {
  background: color-mix(in srgb, #a77a38 10%, transparent);
  color: #9a6b2d;
}

.homeWorkbenchDecisionTable .decision-risk {
  background: color-mix(in srgb, #bd596a 10%, transparent);
  color: #ad4e5f;
}

.homeWorkbenchDecisionTable .decision-neutral {
  background: var(--home-refined-row);
  color: var(--text-2);
}

.homeWorkbenchAffiliateDecision {
  display: grid;
  gap: 18px;
}

.homeWorkbenchAffiliatePipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchAffiliatePipeline > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 10px;
  border-right: 1px solid var(--line-dark);
  padding: 14px;
}

.homeWorkbenchAffiliatePipeline > div:last-child {
  border-right: 0;
}

.homeWorkbenchAffiliatePipeline span {
  grid-row: 1 / 4;
  color: var(--text-3);
  font-size: 10px;
}

.homeWorkbenchAffiliatePipeline strong {
  color: var(--text-1);
  font-size: 22px;
  line-height: 1;
}

.homeWorkbenchAffiliatePipeline p,
.homeWorkbenchAffiliatePipeline em {
  margin: 0;
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
}

.homeWorkbenchAffiliatePipeline i {
  grid-column: 2;
  height: 4px;
  overflow: hidden;
  background: var(--home-refined-row);
}

.homeWorkbenchAffiliatePipeline i b {
  display: block;
  height: 100%;
  background: #568f89;
}

.homeWorkbenchAffiliateQueue > header,
.homeWorkbenchAffiliateQueue > div {
  display: grid;
  grid-template-columns: 42px minmax(180px, 1.4fr) minmax(110px, .7fr) minmax(80px, .5fr) minmax(90px, .55fr);
  align-items: center;
  gap: 12px;
  min-height: 58px;
  border-bottom: 1px solid var(--line-dark);
  padding: 8px 10px;
}

.homeWorkbenchAffiliateQueue > header {
  display: flex;
  justify-content: space-between;
  min-height: 36px;
  background: var(--home-refined-row);
}

.homeWorkbenchAffiliateQueue > header strong,
.homeWorkbenchAffiliateQueue > div strong {
  color: var(--text-1);
  font-size: 11px;
}

.homeWorkbenchAffiliateQueue > header span,
.homeWorkbenchAffiliateQueue p,
.homeWorkbenchAffiliateQueue small {
  margin: 0;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchAffiliateQueue img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.homeWorkbenchAffiliateQueue > div > div,
.homeWorkbenchAffiliateQueue > div > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.homeWorkbenchAffiliateQueue > div > em {
  width: fit-content;
  padding: 4px 7px;
  background: var(--home-refined-row);
  color: var(--text-2);
  font-size: 9px;
  font-style: normal;
}

.homeWorkbenchAffiliateQueue > div > em.high {
  background: color-mix(in srgb, #3f9278 10%, transparent);
  color: #3f8179;
}

.homeWorkbenchCreativeDecision {
  display: grid;
  grid-template-columns: minmax(250px, .38fr) minmax(0, 1fr);
  border-top: 1px solid var(--line-dark);
}

.homeWorkbenchCreativeRail {
  border-right: 1px solid var(--line-dark);
}

.homeWorkbenchCreativeRail button {
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 66px;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  padding: 8px 10px;
  color: inherit;
  text-align: left;
}

.homeWorkbenchCreativeRail button:hover,
.homeWorkbenchCreativeRail button.isActive {
  background: var(--home-refined-active);
}

.homeWorkbenchCreativeRail img {
  width: 52px;
  height: 50px;
  object-fit: cover;
}

.homeWorkbenchCreativeRail span {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.homeWorkbenchCreativeRail strong,
.homeWorkbenchCreativeRail small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchCreativeRail strong {
  color: var(--text-1);
  font-size: 11px;
}

.homeWorkbenchCreativeRail small {
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchCreativeDetail {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 16px;
}

.homeWorkbenchCreativeHero {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.homeWorkbenchCreativeHero figure {
  position: relative;
  width: 108px;
  height: 126px;
  margin: 0;
  overflow: hidden;
}

.homeWorkbenchCreativeHero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homeWorkbenchCreativeHero figcaption {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 3px 6px;
  background: rgba(15, 23, 42, .8);
  color: #fff;
  font-size: 9px;
}

.homeWorkbenchCreativeHero > div {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.homeWorkbenchCreativeHero span,
.homeWorkbenchCreativeHero p {
  margin: 0;
  color: var(--text-3);
  font-size: 10px;
}

.homeWorkbenchCreativeHero strong {
  color: var(--text-1);
  font-size: 14px;
}

.homeWorkbenchCreativeLifecycle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  border-top: 5px solid var(--home-refined-row);
}

.homeWorkbenchCreativeLifecycle > span {
  padding-top: 10px;
  border-right: 1px solid var(--line-dark);
  color: var(--text-3);
  font-size: 10px;
  text-align: center;
}

.homeWorkbenchCreativeLifecycle > span:last-of-type {
  border-right: 0;
}

.homeWorkbenchCreativeLifecycle > span.isPassed,
.homeWorkbenchCreativeLifecycle > span.isActive {
  color: #3f8179;
  font-weight: 720;
}

.homeWorkbenchCreativeLifecycle > i {
  position: absolute;
  top: -25px;
  display: grid;
  justify-items: center;
  transform: translateX(-50%);
}

.homeWorkbenchCreativeLifecycle > i b {
  padding: 3px 6px;
  background: #3f8179;
  color: #fff;
  font-size: 9px;
}

.homeWorkbenchCreativeLifecycle > i::after {
  width: 2px;
  height: 22px;
  background: #3f8179;
  content: '';
}

.homeWorkbenchCreativeMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchCreativeMetrics span {
  display: grid;
  gap: 4px;
  border-right: 1px solid var(--line-dark);
  padding: 10px;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchCreativeMetrics span:last-child {
  border-right: 0;
}

.homeWorkbenchCreativeMetrics b {
  overflow: hidden;
  color: var(--text-1);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchLiveDecision {
  display: grid;
  gap: 14px;
}

.homeWorkbenchLiveDecisionTop {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(120px, .65fr));
  align-items: center;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchLiveDecisionTop > div,
.homeWorkbenchLiveDecisionTop > span {
  min-width: 0;
  display: grid;
  gap: 4px;
  border-right: 1px solid var(--line-dark);
  padding: 11px 12px;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchLiveDecisionTop > span:last-child {
  border-right: 0;
}

.homeWorkbenchLiveDecisionTop strong,
.homeWorkbenchLiveDecisionTop b {
  overflow: hidden;
  color: var(--text-1);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchLiveMinuteChart {
  min-width: 0;
  background: var(--surface-panel);
}

.homeWorkbenchLiveProductTimeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}

.homeWorkbenchLiveProductTimeline button {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 7px 9px;
  border: 0;
  border-right: 1px solid var(--line-dark);
  background: transparent;
  padding: 10px;
  color: inherit;
  text-align: left;
}

.homeWorkbenchLiveProductTimeline button:last-child {
  border-right: 0;
}

.homeWorkbenchLiveProductTimeline button:hover,
.homeWorkbenchLiveProductTimeline button.isActive {
  background: var(--home-refined-active);
}

.homeWorkbenchLiveProductTimeline button > span {
  grid-column: 1 / -1;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchLiveProductTimeline img {
  width: 42px;
  height: 42px;
  object-fit: cover;
}

.homeWorkbenchLiveProductTimeline div {
  min-width: 0;
}

.homeWorkbenchLiveProductTimeline strong,
.homeWorkbenchLiveProductTimeline p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchLiveProductTimeline strong {
  color: var(--text-1);
  font-size: 10px;
}

.homeWorkbenchLiveProductTimeline p {
  margin-top: 4px;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchLiveProductTimeline button > b {
  grid-column: 1 / -1;
  width: fit-content;
  padding: 3px 6px;
  background: var(--home-refined-row);
  color: var(--text-2);
  font-size: 9px;
}

.homeWorkbenchAdProfitDecision {
  display: grid;
  gap: 16px;
}

.homeWorkbenchAdBudget {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchAdBudget > div {
  min-width: 0;
  display: grid;
  gap: 5px;
  border-right: 1px solid var(--line-dark);
  padding: 12px;
}

.homeWorkbenchAdBudget > div:last-child {
  border-right: 0;
}

.homeWorkbenchAdBudget span,
.homeWorkbenchAdBudget small {
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchAdBudget strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchAdBudget i {
  height: 4px;
  overflow: hidden;
  background: var(--home-refined-row);
}

.homeWorkbenchAdBudget i b {
  display: block;
  height: 100%;
  background: #568f89;
}

.homeWorkbenchAdProductStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}

.homeWorkbenchAdProductStrip button {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 0;
  border-right: 1px solid var(--line-dark);
  background: transparent;
  padding: 9px;
  color: inherit;
  text-align: left;
}

.homeWorkbenchAdProductStrip button:last-child {
  border-right: 0;
}

.homeWorkbenchAdProductStrip button:hover,
.homeWorkbenchAdProductStrip button.isActive {
  background: var(--home-refined-active);
}

.homeWorkbenchAdProductStrip img {
  width: 42px;
  height: 42px;
  object-fit: cover;
}

.homeWorkbenchAdProductStrip span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.homeWorkbenchAdProductStrip strong,
.homeWorkbenchAdProductStrip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchAdProductStrip strong {
  color: var(--text-1);
  font-size: 10px;
}

.homeWorkbenchAdProductStrip small {
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchCompetitorTimelineLayout {
  display: grid;
  grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr);
  border-top: 1px solid var(--line-dark);
}

.homeWorkbenchCompetitorTimeline {
  position: relative;
  align-self: start;
  height: fit-content;
  border-right: 1px solid var(--line-dark);
}

.homeWorkbenchCompetitorTimeline::after {
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: 13px;
  z-index: 3;
  width: 1px;
  background: var(--line-dark);
  content: '';
  pointer-events: none;
}

.homeWorkbenchCompetitorTimeline button {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 10px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 64px;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  padding: 8px 10px;
  color: inherit;
  text-align: left;
}

.homeWorkbenchCompetitorTimeline button:hover,
.homeWorkbenchCompetitorTimeline button.isActive {
  background: var(--home-refined-active);
}

.homeWorkbenchCompetitorTimeline button > i {
  position: relative;
  z-index: 4;
  width: 8px;
  height: 8px;
  border: 2px solid var(--surface-panel);
  border-radius: 50%;
  background: #75869a;
  box-shadow: 0 0 0 1px var(--line-dark);
}

.homeWorkbenchCompetitorTimeline button.isActive > i {
  background: #3f8179;
}

.homeWorkbenchCompetitorTimeline button > span,
.homeWorkbenchCompetitorTimeline p {
  margin: 0;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchCompetitorTimeline button > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.homeWorkbenchCompetitorTimeline strong,
.homeWorkbenchCompetitorTimeline p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchCompetitorTimeline strong {
  color: var(--text-1);
  font-size: 11px;
}

.homeWorkbenchCompetitorTimeline button > b {
  padding: 3px 6px;
  background: var(--home-refined-row);
  color: var(--text-2);
  font-size: 9px;
}

.homeWorkbenchCompetitorTimeline button.isActive > b {
  background: color-mix(in srgb, #bd596a 9%, transparent);
  color: #ad4e5f;
}

.homeWorkbenchCompetitorEvidence {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 16px;
}

.homeWorkbenchCompetitorEvidence > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.homeWorkbenchCompetitorEvidence > header div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.homeWorkbenchCompetitorEvidence > header span,
.homeWorkbenchCompetitorEvidenceProduct p,
.homeWorkbenchCompetitorEvidence footer p {
  margin: 0;
  color: var(--text-3);
  font-size: 10px;
}

.homeWorkbenchCompetitorEvidence > header strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchCompetitorEvidence > header > b {
  padding: 4px 7px;
  background: color-mix(in srgb, #bd596a 9%, transparent);
  color: #ad4e5f;
  font-size: 9px;
}

.homeWorkbenchCompetitorEvidenceProduct {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding: 12px 0;
}

.homeWorkbenchCompetitorEvidenceProduct img {
  width: 68px;
  height: 68px;
  object-fit: cover;
}

.homeWorkbenchCompetitorEvidenceProduct strong {
  color: var(--text-1);
  font-size: 12px;
}

.homeWorkbenchCompetitorEvidenceProduct p {
  margin-top: 5px;
}

.homeWorkbenchCompetitorEvidenceMetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchCompetitorEvidenceMetrics span {
  display: grid;
  gap: 4px;
  border-right: 1px solid var(--line-dark);
  padding: 10px;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchCompetitorEvidenceMetrics span:last-child {
  border-right: 0;
}

.homeWorkbenchCompetitorEvidenceMetrics b {
  color: var(--text-1);
  font-size: 12px;
}

.homeWorkbenchCompetitorEvidence footer {
  display: grid;
  gap: 5px;
}

.homeWorkbenchCompetitorEvidence footer strong {
  color: var(--text-1);
  font-size: 11px;
}

.homeWorkbenchAnomalyDecision,
.homeWorkbenchCoverageDecision,
.homeWorkbenchMatchDecision,
.homeWorkbenchFatigueDecision {
  min-width: 0;
}

.homeWorkbenchAnomalySummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchAnomalySummary span {
  display: grid;
  gap: 5px;
  border-right: 1px solid var(--line-dark);
  padding: 12px;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchAnomalySummary span:last-child {
  border-right: 0;
}

.homeWorkbenchAnomalySummary b {
  color: var(--text-1);
  font-size: 14px;
}

.homeWorkbenchAnomalySummary b.up,
.homeWorkbenchAnomalyFactors em.up {
  color: #3f9278;
}

.homeWorkbenchAnomalySummary b.down,
.homeWorkbenchAnomalyFactors em.down {
  color: #bd596a;
}

.homeWorkbenchAnomalyBody {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 14px;
  padding-top: 14px;
}

.homeWorkbenchAnomalyChart {
  min-width: 0;
  border-right: 1px solid var(--line-dark);
  padding-right: 10px;
}

.homeWorkbenchAnomalyFactors > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 58px;
  align-items: center;
  gap: 8px;
  min-height: 51px;
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchAnomalyFactors span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.homeWorkbenchAnomalyFactors strong {
  color: var(--text-1);
  font-size: 11px;
}

.homeWorkbenchAnomalyFactors small {
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchAnomalyFactors > div > b,
.homeWorkbenchAnomalyFactors em {
  font-size: 10px;
  font-style: normal;
  text-align: right;
}

.homeWorkbenchCoverageDecision {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr);
  border-top: 1px solid var(--line-dark);
}

.homeWorkbenchCoverageChart {
  min-width: 0;
  border-right: 1px solid var(--line-dark);
  padding: 10px 12px 0 0;
}

.homeWorkbenchCoverageDetail {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 14px;
}

.homeWorkbenchCoverageDetail > header {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.homeWorkbenchCoverageDetail > header img {
  width: 62px;
  height: 62px;
  object-fit: cover;
}

.homeWorkbenchCoverageDetail > header div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.homeWorkbenchCoverageDetail > header span,
.homeWorkbenchCoverageDetail > header p {
  margin: 0;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchCoverageDetail > header strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchCoverageStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchCoverageStats span {
  display: grid;
  gap: 4px;
  border-right: 1px solid var(--line-dark);
  padding: 9px;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchCoverageStats span:last-child {
  border-right: 0;
}

.homeWorkbenchCoverageStats b {
  color: var(--text-1);
  font-size: 11px;
}

.homeWorkbenchCoverageGap {
  display: grid;
  gap: 5px;
  border-left: 2px solid #568f89;
  padding-left: 10px;
}

.homeWorkbenchCoverageGap strong {
  color: var(--text-1);
  font-size: 11px;
}

.homeWorkbenchCoverageGap p {
  margin: 0;
  color: var(--text-3);
  font-size: 10px;
  line-height: 1.5;
}

.homeWorkbenchCoverageVideoStrip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.homeWorkbenchCoverageVideoStrip span {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  background: var(--home-refined-row);
  padding: 6px;
}

.homeWorkbenchCoverageVideoStrip img {
  width: 40px;
  height: 42px;
  object-fit: cover;
}

.homeWorkbenchCoverageVideoStrip b {
  overflow: hidden;
  color: var(--text-2);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchMatchDecision {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(310px, .7fr);
  border-top: 1px solid var(--line-dark);
}

.homeWorkbenchMatchChart {
  min-width: 0;
  border-right: 1px solid var(--line-dark);
  padding-right: 10px;
}

.homeWorkbenchMatchEvidence {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.homeWorkbenchMatchEvidence > div {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.homeWorkbenchMatchEvidence > div > img {
  width: 72px;
  height: 72px;
  object-fit: cover;
}

.homeWorkbenchMatchEvidence > div > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.homeWorkbenchMatchEvidence small,
.homeWorkbenchMatchEvidence em {
  color: var(--text-3);
  font-size: 9px;
  font-style: normal;
}

.homeWorkbenchMatchEvidence strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchMatchEvidence > b {
  display: grid;
  justify-items: center;
  gap: 3px;
  color: #3f8179;
  font-size: 28px;
}

.homeWorkbenchMatchEvidence > b small {
  font-weight: 600;
}

.homeWorkbenchMatchEvidence > p {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 4px 0 0;
  border-top: 1px solid var(--line-dark);
}

.homeWorkbenchMatchEvidence > p span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding: 8px;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchMatchEvidence > p span:nth-child(2n) {
  border-right: 0;
}

.homeWorkbenchMatchEvidence > p b {
  color: var(--text-1);
  font-size: 9px;
}

.homeWorkbenchFatigueDecision {
  display: grid;
  grid-template-columns: minmax(270px, .38fr) minmax(0, 1fr);
  border-top: 1px solid var(--line-dark);
}

.homeWorkbenchFatigueRail {
  border-right: 1px solid var(--line-dark);
}

.homeWorkbenchFatigueRail button {
  width: 100%;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 9px;
  min-height: 64px;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  padding: 7px 9px;
  color: inherit;
  text-align: left;
}

.homeWorkbenchFatigueRail button:hover,
.homeWorkbenchFatigueRail button.isActive {
  background: var(--home-refined-active);
}

.homeWorkbenchFatigueRail img {
  width: 50px;
  height: 48px;
  object-fit: cover;
}

.homeWorkbenchFatigueRail span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.homeWorkbenchFatigueRail strong,
.homeWorkbenchFatigueRail small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchFatigueRail strong {
  color: var(--text-1);
  font-size: 10px;
}

.homeWorkbenchFatigueRail small {
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchFatigueRail button > b,
.homeWorkbenchFatigueDetail > header > b {
  color: #3f8179;
  font-size: 13px;
}

.homeWorkbenchFatigueRail button > b.risk,
.homeWorkbenchFatigueDetail > header > b.risk {
  color: #ad4e5f;
}

.homeWorkbenchFatigueDetail {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.homeWorkbenchFatigueDetail > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.homeWorkbenchFatigueDetail > header div,
.homeWorkbenchFatigueDetail > header > b {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.homeWorkbenchFatigueDetail > header span,
.homeWorkbenchFatigueDetail > header small {
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchFatigueDetail > header strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchFatigueDetail > header > b {
  justify-items: end;
  font-size: 22px;
}

.homeWorkbenchFatigueChart {
  min-width: 0;
}

.homeWorkbenchFatigueStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchFatigueStats span {
  display: grid;
  gap: 4px;
  border-right: 1px solid var(--line-dark);
  padding: 9px;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchFatigueStats span:last-child {
  border-right: 0;
}

.homeWorkbenchFatigueStats b {
  color: var(--text-1);
  font-size: 11px;
}

.homeWorkbenchRefundDecision,
.homeWorkbenchLiveCompareDecision,
.homeWorkbenchMarginalDecision,
.homeWorkbenchPromotionDecision {
  min-width: 0;
}

.homeWorkbenchRefundSummary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchRefundSummary span {
  display: grid;
  gap: 4px;
  border-right: 1px solid var(--line-dark);
  padding: 10px 12px;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchRefundSummary span:last-child {
  border-right: 0;
}

.homeWorkbenchRefundSummary b {
  color: var(--text-1);
  font-size: 13px;
}

.homeWorkbenchRefundSummary span:first-child b,
.homeWorkbenchRefundFacts span:nth-child(2) b {
  color: #a95565;
}

.homeWorkbenchRefundBody,
.homeWorkbenchLiveCompareBody {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchRefundChart,
.homeWorkbenchLiveCompareChart {
  min-width: 0;
  border-right: 1px solid var(--line-dark);
  padding: 10px 12px 4px 0;
}

.homeWorkbenchRefundEvidence,
.homeWorkbenchLiveCompareEvidence {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.homeWorkbenchRefundEvidence header {
  display: grid;
  gap: 4px;
}

.homeWorkbenchRefundEvidence header span,
.homeWorkbenchRefundEvidence header p,
.homeWorkbenchLiveCompareEvidence header span,
.homeWorkbenchLiveCompareEvidence header small {
  margin: 0;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchRefundEvidence header strong,
.homeWorkbenchLiveCompareEvidence header strong {
  color: var(--text-1);
  font-size: 13px;
}

.homeWorkbenchRefundProduct {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  background: var(--home-refined-row);
  padding: 8px;
}

.homeWorkbenchRefundProduct img {
  width: 54px;
  height: 54px;
  object-fit: cover;
}

.homeWorkbenchRefundProduct span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.homeWorkbenchRefundProduct small,
.homeWorkbenchRefundProduct em {
  color: var(--text-3);
  font-size: 9px;
  font-style: normal;
}

.homeWorkbenchRefundProduct strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchRefundFacts {
  display: grid;
  border-top: 1px solid var(--line-dark);
}

.homeWorkbenchRefundFacts span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line-dark);
  padding: 8px 2px;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchRefundFacts b {
  color: var(--text-1);
}

.homeWorkbenchRefundAction,
.homeWorkbenchLiveCompareEvidence > p {
  margin: 0;
  border-left: 2px solid #568f89;
  padding-left: 10px;
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.6;
}

.homeWorkbenchDecisionTabs {
  display: flex;
  gap: 18px;
  min-height: 38px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding: 0 12px;
}

.homeWorkbenchDecisionTabs button {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0 2px;
  color: var(--text-3);
  font-size: 10px;
}

.homeWorkbenchDecisionTabs button.isActive {
  color: var(--text-1);
  font-weight: 700;
}

.homeWorkbenchDecisionTabs button.isActive::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: #568f89;
  content: '';
}

.homeWorkbenchLiveCompareEvidence header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 12px;
}

.homeWorkbenchLiveCompareEvidence header > span,
.homeWorkbenchLiveCompareEvidence header > strong {
  grid-column: 1;
}

.homeWorkbenchLiveCompareEvidence header > b {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  align-content: center;
  justify-items: end;
  color: #3f8179;
  font-size: 24px;
}

.homeWorkbenchLiveCompareEvidence > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchLiveCompareEvidence > div span {
  display: grid;
  gap: 4px;
  border-right: 1px solid var(--line-dark);
  padding: 9px;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchLiveCompareEvidence > div span:last-child {
  border-right: 0;
}

.homeWorkbenchLiveCompareEvidence > div b {
  color: var(--text-1);
  font-size: 11px;
}

.homeWorkbenchMarginalDecision {
  display: grid;
  grid-template-columns: minmax(250px, .34fr) minmax(0, 1fr);
  border-top: 1px solid var(--line-dark);
}

.homeWorkbenchMarginalProducts {
  border-right: 1px solid var(--line-dark);
}

.homeWorkbenchMarginalProducts button {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 9px;
  min-height: 62px;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  padding: 7px 9px;
  color: inherit;
  text-align: left;
}

.homeWorkbenchMarginalProducts button:hover,
.homeWorkbenchMarginalProducts button.isActive,
.homeWorkbenchPromotionTimeline button:hover,
.homeWorkbenchPromotionTimeline button.isActive {
  background: var(--home-refined-active);
}

.homeWorkbenchMarginalProducts img {
  width: 42px;
  height: 46px;
  object-fit: cover;
}

.homeWorkbenchMarginalProducts span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.homeWorkbenchMarginalProducts strong,
.homeWorkbenchMarginalProducts small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchMarginalProducts strong {
  color: var(--text-1);
  font-size: 10px;
}

.homeWorkbenchMarginalProducts small {
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchMarginalProducts button > b {
  color: #3f8179;
  font-size: 13px;
  text-align: right;
}

.homeWorkbenchMarginalDetail {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
}

.homeWorkbenchMarginalDetail > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.homeWorkbenchMarginalDetail > header > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.homeWorkbenchMarginalDetail > header > div span,
.homeWorkbenchMarginalDetail > footer span {
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchMarginalDetail > header > div strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchMarginalDetail > header > p {
  display: flex;
  margin: 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchMarginalDetail > header > p span {
  display: grid;
  gap: 3px;
  border-right: 1px solid var(--line-dark);
  padding: 7px 10px;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchMarginalDetail > header > p span:last-child {
  border-right: 0;
}

.homeWorkbenchMarginalDetail > header > p b {
  color: var(--text-1);
  font-size: 11px;
}

.homeWorkbenchMarginalChart {
  min-width: 0;
}

.homeWorkbenchMarginalDetail > footer {
  display: grid;
  gap: 4px;
  border-left: 2px solid #568f89;
  padding-left: 10px;
}

.homeWorkbenchMarginalDetail > footer strong {
  color: var(--text-1);
  font-size: 11px;
}

.homeWorkbenchPromotionDecision {
  display: grid;
  grid-template-columns: minmax(300px, .38fr) minmax(0, 1fr);
  border-top: 1px solid var(--line-dark);
}

.homeWorkbenchPromotionTimeline {
  border-right: 1px solid var(--line-dark);
  padding: 7px 0;
}

.homeWorkbenchPromotionTimeline button {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 10px 50px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  border: 0;
  background: transparent;
  padding: 6px 9px;
  color: inherit;
  text-align: left;
}

.homeWorkbenchPromotionTimeline button::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 13px;
  width: 1px;
  background: var(--line-dark);
  content: '';
}

.homeWorkbenchPromotionTimeline button:first-child::before {
  top: 50%;
}

.homeWorkbenchPromotionTimeline button:last-child::before {
  bottom: 50%;
}

.homeWorkbenchPromotionTimeline i {
  z-index: 1;
  width: 7px;
  height: 7px;
  border: 2px solid var(--surface-1);
  border-radius: 50%;
  background: #84939f;
}

.homeWorkbenchPromotionTimeline button.isActive i {
  background: #4f8882;
}

.homeWorkbenchPromotionTimeline > button > span,
.homeWorkbenchPromotionTimeline > button > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.homeWorkbenchPromotionTimeline small,
.homeWorkbenchPromotionTimeline p {
  margin: 0;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchPromotionTimeline strong {
  color: var(--text-1);
  font-size: 10px;
}

.homeWorkbenchPromotionTimeline p,
.homeWorkbenchPromotionTimeline strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchPromotionTimeline button > b,
.homeWorkbenchPromotionEvidence footer b {
  font-size: 10px;
  text-align: right;
}

.homeWorkbenchPromotionTimeline .up,
.homeWorkbenchPromotionEvidence .up {
  color: #3f9278;
}

.homeWorkbenchPromotionTimeline .down,
.homeWorkbenchPromotionEvidence .down {
  color: #b45365;
}

.homeWorkbenchPromotionEvidence {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px 14px 14px;
}

.homeWorkbenchPromotionChart {
  min-width: 0;
}

.homeWorkbenchPromotionEvidence footer {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line-dark);
  padding-top: 10px;
}

.homeWorkbenchPromotionEvidence footer > div {
  display: grid;
  gap: 4px;
}

.homeWorkbenchPromotionEvidence footer span {
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchPromotionEvidence footer strong {
  color: var(--text-1);
  font-size: 11px;
}

.homeWorkbenchPromotionEvidence footer > p {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchPromotionEvidence footer > p span {
  display: grid;
  gap: 4px;
  border-right: 1px solid var(--line-dark);
  padding: 8px;
}

.homeWorkbenchPromotionEvidence footer > p span:last-child {
  border-right: 0;
}

.homeWorkbenchPromotionEvidence footer > p b {
  color: var(--text-1);
  text-align: left;
}

@media (max-width: 900px) {
  .homeWorkbenchCreativeDecision,
  .homeWorkbenchCompetitorTimelineLayout,
  .homeWorkbenchAnomalyBody,
  .homeWorkbenchCoverageDecision,
  .homeWorkbenchMatchDecision,
  .homeWorkbenchFatigueDecision {
    grid-template-columns: minmax(0, 1fr);
  }

  .homeWorkbenchRefundBody,
  .homeWorkbenchLiveCompareBody,
  .homeWorkbenchMarginalDecision,
  .homeWorkbenchPromotionDecision {
    grid-template-columns: minmax(0, 1fr);
  }

  .homeWorkbenchCreativeRail,
  .homeWorkbenchCompetitorTimeline,
  .homeWorkbenchAnomalyChart,
  .homeWorkbenchCoverageChart,
  .homeWorkbenchMatchChart,
  .homeWorkbenchFatigueRail {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .homeWorkbenchRefundChart,
  .homeWorkbenchLiveCompareChart,
  .homeWorkbenchMarginalProducts,
  .homeWorkbenchPromotionTimeline {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .homeWorkbenchRefundChart,
  .homeWorkbenchLiveCompareChart {
    padding-right: 0;
  }

  .homeWorkbenchAnomalyChart,
  .homeWorkbenchCoverageChart,
  .homeWorkbenchMatchChart {
    padding-right: 0;
  }

  .homeWorkbenchCoverageChart {
    padding-bottom: 10px;
  }

  .homeWorkbenchMatchEvidence {
    min-height: 260px;
  }

  .homeWorkbenchAffiliatePipeline,
  .homeWorkbenchLiveProductTimeline,
  .homeWorkbenchAdProductStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .homeWorkbenchAffiliatePipeline > div:nth-child(2),
  .homeWorkbenchLiveProductTimeline button:nth-child(2),
  .homeWorkbenchAdProductStrip button:nth-child(2) {
    border-right: 0;
  }

  .homeWorkbenchAffiliatePipeline > div:nth-child(-n + 2),
  .homeWorkbenchLiveProductTimeline button:nth-child(-n + 2),
  .homeWorkbenchAdProductStrip button:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-dark);
  }

  .homeWorkbenchLiveDecisionTop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .homeWorkbenchLiveDecisionTop > :nth-child(2) {
    border-right: 0;
  }

  .homeWorkbenchLiveDecisionTop > :nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-dark);
  }
}

@media (max-width: 640px) {
  .homeWorkbenchCreativeMetrics,
  .homeWorkbenchCompetitorEvidenceMetrics,
  .homeWorkbenchAdBudget {
    grid-template-columns: minmax(0, 1fr);
  }

  .homeWorkbenchCreativeMetrics span,
  .homeWorkbenchCompetitorEvidenceMetrics span,
  .homeWorkbenchAdBudget > div {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .homeWorkbenchAdProfitDecision {
    overflow-x: auto;
  }

  .homeWorkbenchAnomalySummary,
  .homeWorkbenchCoverageStats,
  .homeWorkbenchFatigueStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .homeWorkbenchRefundSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .homeWorkbenchRefundSummary span:nth-child(2n) {
    border-right: 0;
  }

  .homeWorkbenchRefundSummary span:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-dark);
  }

  .homeWorkbenchAnomalySummary span:nth-child(2),
  .homeWorkbenchCoverageStats span:nth-child(2),
  .homeWorkbenchFatigueStats span:nth-child(2n) {
    border-right: 0;
  }

  .homeWorkbenchAnomalySummary span:nth-child(-n + 2),
  .homeWorkbenchCoverageStats span:nth-child(-n + 2),
  .homeWorkbenchFatigueStats span:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-dark);
  }

  .homeWorkbenchCoverageStats span:last-child {
    grid-column: 1 / -1;
  }

  .homeWorkbenchAnomalyFactors > div {
    grid-template-columns: minmax(0, 1fr) 50px 50px;
  }

  .homeWorkbenchCoverageDetail,
  .homeWorkbenchFatigueDetail {
    padding-inline: 0;
  }

  .homeWorkbenchRefundEvidence,
  .homeWorkbenchLiveCompareEvidence,
  .homeWorkbenchMarginalDetail,
  .homeWorkbenchPromotionEvidence {
    padding-inline: 0;
  }

  .homeWorkbenchMarginalDetail > header {
    align-items: stretch;
    flex-direction: column;
  }

  .homeWorkbenchPromotionEvidence footer > p {
    grid-template-columns: minmax(0, 1fr);
  }

  .homeWorkbenchPromotionEvidence footer > p span {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .homeWorkbenchPromotionEvidence footer > p span:last-child {
    border-bottom: 0;
  }

  .homeWorkbenchCoverageVideoStrip,
  .homeWorkbenchMatchEvidence > p {
    grid-template-columns: minmax(0, 1fr);
  }

  .homeWorkbenchMatchEvidence {
    grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
    gap: 8px;
    padding-inline: 0;
  }

  .homeWorkbenchMatchEvidence > div > img {
    width: 58px;
    height: 58px;
  }

  .homeWorkbenchMatchEvidence > b {
    font-size: 22px;
  }

  .homeWorkbenchMatchEvidence > p span,
  .homeWorkbenchMatchEvidence > p span:nth-child(2n) {
    border-right: 0;
  }

  .homeWorkbenchFatigueRail button {
    grid-template-columns: 46px minmax(0, 1fr) 34px;
  }
}

.homeWorkbenchBlueOceanProducts > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
}

.homeWorkbenchBlueOceanProducts > header strong {
  color: var(--text-1);
  font-size: 12px;
}

.homeWorkbenchBlueOceanProducts > header span {
  color: var(--text-3);
  font-size: 10px;
}

.homeWorkbenchBlueOceanProductHead,
.homeWorkbenchBlueOceanProducts > a {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(80px, .5fr) minmax(110px, .7fr) minmax(100px, .65fr) minmax(90px, .55fr);
  align-items: center;
  gap: 12px;
  min-width: 760px;
  min-height: 54px;
  border-bottom: 1px solid var(--line-dark);
  padding: 7px 10px;
}

.homeWorkbenchBlueOceanProductHead {
  min-height: 34px;
  background: var(--home-refined-row);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 720;
}

.homeWorkbenchBlueOceanProducts > a {
  color: inherit;
  text-decoration: none;
  transition: background-color 140ms ease;
}

.homeWorkbenchBlueOceanProducts > a:hover {
  background: var(--home-refined-active);
}

.homeWorkbenchBlueOceanProducts > a > img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.homeWorkbenchBlueOceanProducts > a {
  grid-template-columns: 40px minmax(208px, 1.5fr) minmax(80px, .5fr) minmax(110px, .7fr) minmax(100px, .65fr) minmax(90px, .55fr);
}

.homeWorkbenchBlueOceanProductHead {
  grid-template-columns: minmax(260px, 1.5fr) minmax(80px, .5fr) minmax(110px, .7fr) minmax(100px, .65fr) minmax(90px, .55fr);
}

.homeWorkbenchBlueOceanProducts > a > div,
.homeWorkbenchBlueOceanProducts > a > span {
  min-width: 0;
}

.homeWorkbenchBlueOceanProducts > a > div strong,
.homeWorkbenchBlueOceanProducts > a > div p,
.homeWorkbenchBlueOceanProducts > a > span b,
.homeWorkbenchBlueOceanProducts > a > span em {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchBlueOceanProducts > a > div strong,
.homeWorkbenchBlueOceanProducts > a > span b {
  color: var(--text-1);
  font-size: 11px;
}

.homeWorkbenchBlueOceanProducts > a > div p,
.homeWorkbenchBlueOceanProducts > a > span em {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 9px;
  font-style: normal;
}

.homeWorkbenchBlueOceanProducts em.up {
  color: #3f9278;
}

.homeWorkbenchBlueOceanProducts em.down {
  color: #bd596a;
}

.homeWorkbenchBlueOceanProducts small {
  width: fit-content;
  padding: 3px 6px;
  background: color-mix(in srgb, #3f9278 9%, transparent);
  color: #3f8179;
  font-size: 9px;
}

.homeWorkbenchCategoryVideoShowcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.homeWorkbenchCategoryVideoShowcase > article {
  min-width: 0;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: 12px;
  border: 1px solid var(--line-dark);
  background: var(--surface-panel);
  padding: 10px;
}

.homeWorkbenchCategoryVideoShowcase figure {
  position: relative;
  grid-row: 1 / 3;
  width: 112px;
  height: 142px;
  margin: 0;
  overflow: hidden;
}

.homeWorkbenchCategoryVideoShowcase img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homeWorkbenchCategoryVideoShowcase figcaption {
  position: absolute;
  top: 7px;
  left: 7px;
  min-width: 24px;
  padding: 3px 6px;
  background: rgba(15, 23, 42, .78);
  color: #fff;
  font-size: 10px;
  text-align: center;
}

.homeWorkbenchCategoryVideoShowcase > article > div {
  min-width: 0;
  align-self: center;
}

.homeWorkbenchCategoryVideoShowcase span,
.homeWorkbenchCategoryVideoShowcase strong,
.homeWorkbenchCategoryVideoShowcase p {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchCategoryVideoShowcase > article > div span,
.homeWorkbenchCategoryVideoShowcase p {
  color: var(--text-3);
  font-size: 10px;
}

.homeWorkbenchCategoryVideoShowcase strong {
  margin: 7px 0;
  color: var(--text-1);
  font-size: 13px;
}

.homeWorkbenchCategoryVideoShowcase footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: end;
  border-top: 1px solid var(--line-dark);
  padding-top: 9px;
}

.homeWorkbenchCategoryVideoShowcase footer span {
  display: grid;
  gap: 3px;
  color: var(--text-3);
  font-size: 9px;
}

.homeWorkbenchCategoryVideoShowcase footer b {
  overflow: hidden;
  color: var(--text-1);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchBlueOceanGrid span,
.homeWorkbenchBlueOceanGrid p,
.homeWorkbenchBlueOceanGrid footer,
.homeWorkbenchCategoryLiveCaseGrid span,
.homeWorkbenchCategoryLiveCaseGrid p,
.homeWorkbenchCategoryLiveCaseGrid small,
.homeWorkbenchLifecycleGrid span,
.homeWorkbenchLifecycleGrid p {
  color: var(--text-3);
  font-size: 11px;
}

.homeWorkbenchBlueOceanGrid strong,
.homeWorkbenchCategoryLiveCaseGrid strong,
.homeWorkbenchLifecycleGrid strong {
  color: var(--text-1);
  font-size: 13px;
}

.homeWorkbenchBlueOceanGrid p,
.homeWorkbenchBlueOceanGrid footer,
.homeWorkbenchCategoryLiveCaseGrid p,
.homeWorkbenchLifecycleGrid p {
  margin: 8px 0 0;
  line-height: 1.5;
}

.homeWorkbenchCategoryLiveCaseGrid article > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  border-top: 1px solid var(--line-dark);
}

.homeWorkbenchCategoryLiveCaseGrid article {
  display: grid;
  align-content: start;
  border-top: 2px solid color-mix(in srgb, var(--text-3) 42%, var(--line-dark));
  background: var(--surface-panel);
  transition: background-color 140ms ease;
}

.homeWorkbenchCategoryLiveCaseGrid article:hover {
  background: var(--home-refined-active);
}

.homeWorkbenchCategoryLiveCaseGrid header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.homeWorkbenchCategoryLiveCaseGrid header span {
  font-size: 10px;
  font-weight: 720;
}

.homeWorkbenchCategoryLiveCaseGrid header em {
  padding: 3px 6px;
  background: color-mix(in srgb, #3f9278 10%, transparent);
  color: #3f9278;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.homeWorkbenchCategoryLiveCaseGrid > article > strong {
  min-height: 36px;
  line-height: 1.45;
}

.homeWorkbenchCategoryLiveCaseGrid > article > p {
  margin-top: 4px;
}

.homeWorkbenchCategoryLiveCaseGrid b {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 6px 0 0;
  color: var(--text-1);
  font-size: 12px;
}

.homeWorkbenchCategoryLiveCaseGrid small {
  font-weight: 500;
}

.homeWorkbenchGapTable {
  display: grid;
}

.homeWorkbenchGapTable > header,
.homeWorkbenchGapTable > div {
  display: grid;
  grid-template-columns: minmax(126px, 1.05fr) repeat(2, minmax(150px, 1fr)) minmax(72px, .45fr);
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--line-dark);
  padding: 0 12px;
}

.homeWorkbenchGapTable > header {
  color: var(--text-3);
  background: var(--home-refined-row);
  font-size: 11px;
}

.homeWorkbenchGapTable strong,
.homeWorkbenchGapTable span,
.homeWorkbenchGapTable b {
  color: var(--text-1);
  font-size: 12px;
}

.homeWorkbenchGapTable > div {
  transition: background-color 140ms ease;
}

.homeWorkbenchGapTable > div:hover,
.homeWorkbenchGapTable > div.isOpportunity:hover {
  background: var(--home-refined-active);
}

.homeWorkbenchGapTable > div.isOpportunity {
  background: color-mix(in srgb, #3f9278 4%, transparent);
}

.homeWorkbenchGapTable .indexBar {
  display: grid;
  grid-template-columns: minmax(54px, 1fr) 28px;
  align-items: center;
  gap: 8px;
  padding-right: 18px;
}

.homeWorkbenchGapTable .indexBar i {
  height: 5px;
  overflow: hidden;
  background: var(--home-refined-row);
}

.homeWorkbenchGapTable .indexBar i b {
  display: block;
  height: 100%;
  background: #538c85;
}

.homeWorkbenchGapTable .indexBar.supply i b {
  background: #7f8ca0;
}

.homeWorkbenchGapTable .indexBar em {
  color: var(--text-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 720;
  text-align: right;
}

.homeWorkbenchGapTable b.up {
  color: #3f9278;
}

.homeWorkbenchGapTable b.down {
  color: #bd596a;
}

.homeWorkbenchLifecyclePanel {
  display: grid;
  gap: 18px;
}

.homeWorkbenchCategoryLifecycle {
  display: grid;
  gap: 14px;
  border-bottom: 1px solid var(--line-dark);
  padding: 2px 0 16px;
}

.homeWorkbenchCategoryLifecycle > header,
.homeWorkbenchLifecycleSectionHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.homeWorkbenchCategoryLifecycle > header div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.homeWorkbenchCategoryLifecycle > header span,
.homeWorkbenchCategoryLifecycle > header p,
.homeWorkbenchLifecycleSectionHead span {
  margin: 0;
  color: var(--text-3);
  font-size: 11px;
}

.homeWorkbenchCategoryLifecycle > header strong {
  color: #3f8179;
  font-size: 18px;
}

.homeWorkbenchCategoryLifecycleTrack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
  border-top: 6px solid var(--home-refined-row);
}

.homeWorkbenchCategoryLifecycleTrack > span {
  position: relative;
  padding-top: 10px;
  border-right: 1px solid var(--line-dark);
  color: var(--text-3);
  font-size: 10px;
  text-align: center;
}

.homeWorkbenchCategoryLifecycleTrack > span:last-of-type {
  border-right: 0;
}

.homeWorkbenchCategoryLifecycleMarker {
  position: absolute;
  top: -27px;
  z-index: 2;
  display: grid;
  justify-items: center;
  transform: translateX(-50%);
}

.homeWorkbenchCategoryLifecycleMarker b {
  padding: 3px 7px;
  background: #3f8179;
  color: #fff;
  font-size: 9px;
  line-height: 1.2;
}

.homeWorkbenchCategoryLifecycleMarker i {
  width: 2px;
  height: 18px;
  background: #3f8179;
}

.homeWorkbenchCategoryLifecycleMarker i::after {
  display: block;
  width: 8px;
  height: 8px;
  border: 2px solid var(--surface-panel);
  border-radius: 50%;
  background: #3f8179;
  content: '';
  transform: translate(-3px, 12px);
}

.homeWorkbenchCategoryLifecycle > footer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}

.homeWorkbenchCategoryLifecycle > footer span {
  display: grid;
  gap: 4px;
  border-right: 1px solid var(--line-dark);
  padding: 10px 12px 0;
  color: var(--text-3);
  font-size: 10px;
}

.homeWorkbenchCategoryLifecycle > footer span:first-child {
  padding-left: 0;
}

.homeWorkbenchCategoryLifecycle > footer span:last-child {
  border-right: 0;
}

.homeWorkbenchCategoryLifecycle > footer b {
  color: var(--text-1);
  font-size: 12px;
}

.homeWorkbenchCategoryLifecycle > footer b.up {
  color: #3f9278;
}

.homeWorkbenchCategoryLifecycle > footer b.down {
  color: #bd596a;
}

.homeWorkbenchLifecycleSectionHead {
  align-items: center;
  margin-bottom: -8px;
}

.homeWorkbenchLifecycleSectionHead strong {
  color: var(--text-1);
  font-size: 12px;
}

.homeWorkbenchLifecycleGrid {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchLifecycleGrid article {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 10px;
  border: 0;
  border-right: 1px solid var(--line-dark);
  padding: 14px;
}

.homeWorkbenchLifecycleGrid article:last-child {
  border-right: 0;
}

.homeWorkbenchLifecycleGrid article > em {
  grid-row: 1 / 4;
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
}

.homeWorkbenchLifecycleGrid article > span {
  font-weight: 720;
}

.homeWorkbenchLifecycleGrid strong {
  font-size: 22px;
  line-height: 1.15;
}

.homeWorkbenchLifecycleGrid article > p {
  margin: 0;
}

@media (max-width: 900px) {
  .homeWorkbenchCategoryObjectGrid,
  .homeWorkbenchCategoryLiveCaseGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .homeWorkbenchBlueOceanGrid,
  .homeWorkbenchLifecycleGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .homeWorkbenchLifecycleGrid article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-dark);
  }

  .homeWorkbenchLifecycleGrid article:nth-child(2) {
    border-right: 0;
  }

  .homeWorkbenchGapTable > header,
  .homeWorkbenchGapTable > div {
    grid-template-columns: minmax(100px, .85fr) repeat(2, minmax(120px, 1fr)) 58px;
  }

  .homeWorkbenchCategoryLifecycle > footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .homeWorkbenchCategoryLifecycle > footer span:nth-child(2) {
    border-right: 0;
  }

  .homeWorkbenchCategoryLifecycle > footer span:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-dark);
    padding-bottom: 10px;
  }
}

@media (max-width: 640px) {
  .homeWorkbenchGapTable {
    overflow-x: auto;
  }

  .homeWorkbenchGapTable > header,
  .homeWorkbenchGapTable > div {
    min-width: 590px;
  }

  .homeWorkbenchCategoryLifecycle > header,
  .homeWorkbenchLifecycleSectionHead {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}

@media (max-width: 760px) {
  .homeWorkbenchProductRecommendationLayout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.homeWorkbenchInsightLayout.creatorEconomics {
  grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
}

.homeWorkbenchCreatorEconomicsDetail {
  display: grid;
  gap: 12px;
}

.homeWorkbenchCreatorEconomicsHeader {
  display: flex;
  align-items: center;
  gap: 10px;
}

.homeWorkbenchCreatorEconomicsHeader img {
  width: 46px;
  height: 46px;
  object-fit: cover;
}

.homeWorkbenchCreatorEconomicsHeader div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.homeWorkbenchCreatorEconomicsHeader strong {
  color: var(--text-1);
  font-size: 14px;
}

.homeWorkbenchCreatorEconomicsHeader span {
  color: var(--text-3);
  font-size: 11px;
}

.homeWorkbenchCreatorEconomicsChart {
  min-width: 0;
  background: var(--home-refined-row);
}

.homeWorkbenchCreatorEconomicsEvidence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}

.homeWorkbenchCreatorEconomicsEvidence span {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px 12px 0;
  color: var(--text-3);
  font-size: 11px;
}

.homeWorkbenchCreatorEconomicsEvidence b {
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .homeWorkbenchInsightLayout.creatorEconomics {
    grid-template-columns: minmax(0, 1fr);
  }

  .homeWorkbenchCreatorEconomicsEvidence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Shared list language: flat headers, separator rows and unframed stat groups. */
.homeWorkbenchDataTable,
.homeWorkbenchTierTable {
  gap: 0;
}

.homeWorkbenchDataHead {
  min-height: 34px;
  align-items: center;
  background: var(--home-refined-row);
  padding: 0 10px;
  font-size: 10.5px;
  font-weight: 760;
}

.homeWorkbenchDataRow {
  min-height: 42px;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 690;
}

.homeWorkbenchDataRow strong,
.homeWorkbenchDataRow em {
  font-weight: 780;
}

.homeWorkbenchTierFocusGrid {
  gap: 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchTierFocusGrid article {
  display: grid;
  gap: 8px;
  border: 0;
  border-right: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
  padding: 11px 10px;
}

.homeWorkbenchTierFocusGrid article:last-child {
  border-right: 0;
}

.homeWorkbenchTierFocusGrid header,
.homeWorkbenchTierFocusGrid footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.homeWorkbenchTierFocusGrid header strong {
  color: var(--text-1);
  font-size: 11px;
}

.homeWorkbenchTierFocusGrid header em,
.homeWorkbenchTierFocusGrid footer em {
  color: #3f9278;
  font-size: 10px;
  font-style: normal;
  font-weight: 760;
}

.homeWorkbenchTierFocusGrid article > i {
  height: 4px;
  overflow: hidden;
  background: var(--home-refined-row);
}

.homeWorkbenchTierFocusGrid article > i b {
  display: block;
  height: 100%;
  background: #588f89;
}

.homeWorkbenchTierFocusGrid footer span {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchMiniStatGrid {
  gap: 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchMiniStatGrid > span {
  border: 0;
  border-right: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
  padding: 9px 10px;
}

.homeWorkbenchMiniStatGrid > span:last-child {
  border-right: 0;
}

.homeWorkbenchMiniStatGrid:not(.compact) > span:nth-child(4n),
.homeWorkbenchMiniStatGrid.compact > span:nth-child(2n) {
  border-right: 0;
}

.homeWorkbenchMiniStatGrid.compact > span:nth-child(-n + 2) {
  border-bottom: 1px solid var(--line-dark);
}

.homeWorkbenchCreatorCopy {
  gap: 0;
}

.homeWorkbenchCreatorCopy div {
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
}

.homeWorkbenchInsightNote {
  border: 0;
  border-top: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
  padding: 12px 4px 4px;
}

.homeWorkbenchRankBadge,
.homeWorkbenchCategoryRow > span,
.homeWorkbenchStrategyCard header span,
.homeWorkbenchCommerceMedia span,
.homeWorkbenchVideoStrip figcaption,
.homeWorkbenchInsightNote strong {
  border-radius: 3px;
}

.homeWorkbenchToolboxGrid {
  grid-template-columns: 1fr;
  gap: 0;
}

.homeWorkbenchToolboxAction {
  min-height: 46px;
  display: flex;
  place-items: initial;
  align-content: initial;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
  padding: 0 4px;
  text-align: left;
}

.homeWorkbenchToolboxAction:hover {
  border-color: var(--line-dark);
  background: var(--home-refined-active);
  transform: none;
}

.homeWorkbenchToolboxAction svg {
  color: var(--text-2);
}

.homeWorkbenchToolboxAction span {
  font-size: 12px;
  font-weight: 760;
}

.homeWorkbenchAlertList article {
  min-height: 72px;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
  padding: 10px 4px;
}

.homeWorkbenchAlertList strong {
  font-size: 12px;
  font-weight: 800;
}

.homeWorkbenchAlertList p {
  margin: 3px 0;
  font-size: 11px;
  line-height: 1.45;
}

.homeWorkbenchAlertList em {
  font-weight: 680;
}

.homeWorkbenchStrategyCard {
  border: 0;
  border-radius: 3px;
  background: var(--home-refined-row);
}

.homeWorkbenchStrategyCard header span {
  background: transparent;
  color: var(--text-2);
  padding: 0;
}

.homeWorkbenchStrategyCardBody {
  grid-template-columns: minmax(150px, .58fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

.homeWorkbenchStrategyShareChart {
  min-width: 0;
  align-self: stretch;
}

.homeWorkbenchChannelStrip,
.homeWorkbenchShareBar,
.homeWorkbenchMismatchList b,
.homeWorkbenchStructureList i {
  border-radius: 2px;
}

.homeWorkbenchMismatchList b,
.homeWorkbenchStructureList i {
  background: #58a49d;
}

.homeWorkbenchLiveTrend {
  border-radius: var(--home-refined-radius);
  background: var(--home-refined-row);
  background-image: none;
}

.homeWorkbenchLiveTrend span {
  border-radius: 2px 2px 0 0;
  background: #58a49d;
}

.homeWorkbenchLiveTrendFigure {
  margin: 0;
}

.homeWorkbenchLiveTrendFigure figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--text-2);
  font-size: 12px;
}

.homeWorkbenchLiveTrendFigure figcaption strong {
  color: var(--text-1);
  font-size: 13px;
}

.homeWorkbenchLiveTrendChart {
  width: 100%;
  min-width: 0;
  background: var(--home-refined-row);
}

.homeWorkbenchInsightLayout.live .homeWorkbenchInsightDetail {
  align-content: start;
}

.homeWorkbenchInsightLayout.live .homeWorkbenchLiveRoom {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.homeWorkbenchInsightLayout.live .homeWorkbenchMiniStatGrid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.homeWorkbenchInsightLayout.live .homeWorkbenchMiniStatGrid.compact > span {
  border-bottom: 0;
}

.homeWorkbenchLiveProducts {
  justify-content: flex-start;
  align-items: center;
}

.homeWorkbenchLiveProducts > span {
  margin-right: 4px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 720;
}

.homeWorkbenchCategoryMatrix {
  border-radius: var(--home-refined-radius);
  background:
    linear-gradient(
      to right,
      transparent calc(50% - 0.5px),
      var(--line-dark) 50%,
      transparent calc(50% + 0.5px)
    ),
    linear-gradient(
      to bottom,
      transparent calc(50% - 0.5px),
      var(--line-dark) 50%,
      transparent calc(50% + 0.5px)
    ),
    var(--surface-panel);
}

.homeWorkbenchChartCardHeader strong {
  font-weight: 820;
}

.homeWorkbenchChartCardHeader span,
.homeWorkbenchChartCardHeader em {
  font-weight: 680;
}

.homeWorkbenchVideoStrip figure,
.homeWorkbenchProductEvidenceGrid img,
.homeWorkbenchRankRow img,
.homeWorkbenchAdVideoRow img,
.homeWorkbenchCommerceMedia img,
.homeWorkbenchLiveProducts img {
  border-radius: var(--home-refined-radius);
}

.homeWorkbenchPreviewViewport,
.homeWorkbenchShopSearch,
.homeWorkbenchShopSearchResults,
.homeWorkbenchShopSearchResults article,
.homeWorkbenchShopOptionList article {
  border-radius: var(--home-refined-radius);
  background-image: none;
  box-shadow: none;
}

.homeWorkbenchShopSearchPanel {
  position: relative;
  z-index: 8;
}

.homeWorkbenchShopSearch {
  border-radius: var(--home-refined-radius);
  background: var(--surface-panel);
}

.homeWorkbenchShopSearch:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

.homeWorkbenchShopSearch input,
.homeWorkbenchShopSearch input:focus,
.homeWorkbenchShopSearch input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.homeWorkbenchShopSearchPanel .homeWorkbenchShopSearchResults {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 9;
  background: var(--surface-panel);
  box-shadow: 0 10px 24px color-mix(in srgb, #020617 12%, transparent);
}

.homeWorkbenchFormField input,
.homeWorkbenchFormField textarea,
.homeWorkbenchFormField input:hover,
.homeWorkbenchFormField textarea:hover,
.homeWorkbenchFormField input:focus,
.homeWorkbenchFormField textarea:focus,
.homeWorkbenchFormField input:focus-visible,
.homeWorkbenchFormField textarea:focus-visible {
  box-shadow: none !important;
}

.homeWorkbenchFormField input,
.homeWorkbenchFormField textarea {
  border-color: var(--app-control-line);
  background: var(--app-control-bg);
}

.homeWorkbenchFormField input:focus,
.homeWorkbenchFormField textarea:focus,
.homeWorkbenchFormField input:focus-visible,
.homeWorkbenchFormField textarea:focus-visible {
  border-color: var(--primary-border-strong);
  outline: none;
}

@media (max-width: 720px) {
  .homeWorkbenchDashboardHeader {
    align-items: flex-start;
  }

  .homeWorkbenchPanel > header.homeWorkbenchControlDeck {
    padding: 7px 2px 9px;
  }

  .homeWorkbenchControlShelf > .homeWorkbenchRangeField {
    margin-left: 0;
  }

  .homeWorkbenchKpi {
    min-height: 116px;
    padding: 12px;
  }
}

/* Scoped homepage workspaces and context builders. */
.homeWorkbenchPanel > header.homeWorkbenchControlDeck {
  grid-template-columns: minmax(160px, 0.7fr) minmax(0, 3fr);
  gap: 10px 18px;
}

.homeWorkbenchWorkspaceTabs {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line-dark);
  padding: 0 2px 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.homeWorkbenchWorkspaceTabs::-webkit-scrollbar {
  display: none;
}

.homeWorkbenchWorkspaceTabs button {
  position: relative;
  min-height: 30px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  padding: 0 1px;
}

.homeWorkbenchWorkspaceTabs button svg {
  color: var(--text-3);
}

.homeWorkbenchWorkspaceTabs button.active {
  color: var(--primary);
}

.homeWorkbenchWorkspaceTabs button.active svg {
  color: var(--primary);
}

.homeWorkbenchWorkspaceTabs button.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 2px;
  background: var(--primary);
}

.homeWorkbenchControlShelf {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px 10px;
}

.homeWorkbenchControlShelf .homeWorkbenchControlField {
  flex: 0 1 210px;
}

.homeWorkbenchControlShelf .homeWorkbenchShopField,
.homeWorkbenchControlShelf .homeWorkbenchGlobalMarketField {
  flex-basis: 240px;
}

.homeWorkbenchControlShelf .homeWorkbenchRangeField {
  flex: 0 1 auto;
  margin-left: 10px;
}

.homeWorkbenchWorkspaceEditor {
  gap: 12px;
}

.homeWorkbenchWorkspaceEditorTabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.homeWorkbenchWorkspaceEditorItem {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 0;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  color: var(--text-2);
}

.homeWorkbenchWorkspaceEditorItem:hover,
.homeWorkbenchWorkspaceEditorItem.active {
  background: var(--home-refined-active);
}

.homeWorkbenchWorkspaceEditorItem.active {
  color: var(--primary);
}

.homeWorkbenchWorkspaceEditorItem.isHidden {
  background: var(--surface-soft);
  opacity: .55;
}

.homeWorkbenchWorkspaceEditorItem.isDragging,
.homeWorkbenchContentOrderItem.isDragging,
.homeWorkbenchShopOptionList article.isDragging {
  position: relative;
  z-index: 4;
  box-shadow: 0 8px 20px rgb(15 23 42 / 12%);
  opacity: .92;
}

.homeWorkbenchFilterDragHandle {
  cursor: grab;
  touch-action: none;
}

.homeWorkbenchFilterDragHandle:active {
  cursor: grabbing;
}

.homeWorkbenchWorkspaceEditorItem button {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.homeWorkbenchWorkspaceDragHandle,
.homeWorkbenchWorkspaceVisibility,
.homeWorkbenchContentDragHandle {
  display: grid;
  place-items: center;
  align-self: stretch;
  cursor: grab;
  touch-action: none;
}

.homeWorkbenchWorkspaceDragHandle:active,
.homeWorkbenchContentDragHandle:active { cursor: grabbing; }

.homeWorkbenchWorkspaceVisibility { cursor: pointer; }
.homeWorkbenchWorkspaceVisibility:disabled { cursor: not-allowed; opacity: .35; }

.homeWorkbenchWorkspaceSelect {
  min-width: 0;
  align-self: stretch;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 6px;
  cursor: pointer;
  text-align: left;
}

.homeWorkbenchWorkspaceSelect > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.homeWorkbenchWorkspaceEditorTabs strong,
.homeWorkbenchWorkspaceEditorTabs small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeWorkbenchContentOrderItem > .homeWorkbenchContentDragHandle {
  width: 42px;
  min-height: 42px;
  margin-left: auto;
  border: 0;
  border-left: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
  color: var(--text-3);
}

.homeWorkbenchContentOrderItem > div:last-of-type {
  display: block;
}

.homeWorkbenchContentOrderItem {
  border-radius: 2px;
  background: var(--surface-panel);
}

.homeWorkbenchContentOrderItem > span {
  border-radius: 2px;
}

.homeWorkbenchWorkspaceEditorTabs strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 800;
}

.homeWorkbenchWorkspaceEditorTabs small {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 650;
}

.homeWorkbenchResourceGrid {
  min-width: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.homeWorkbenchResourceGrid.workspace-shop {
  grid-template-columns: minmax(0, 1fr);
}

.homeWorkbenchResourceEditor {
  min-width: 0;
  height: 100%;
  gap: 12px;
}

.homeWorkbenchResourceEditor .homeWorkbenchShopOptionList article {
  border-radius: 2px;
}

.homeWorkbenchResourceEditor .homeWorkbenchShopOptionList > article > small {
  display: none;
}

.homeWorkbenchTemplateScopeActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.homeWorkbenchTemplateScopeActions > span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 720;
}

@media (max-width: 1180px) {
  .homeWorkbenchPanel > header.homeWorkbenchControlDeck {
    grid-template-columns: 1fr;
  }

  .homeWorkbenchWorkspaceTabs {
    grid-column: 1;
  }

  .homeWorkbenchControlShelf {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .homeWorkbenchWorkspaceTabs {
    gap: 18px;
  }

  .homeWorkbenchControlShelf {
    display: grid;
    grid-template-columns: 1fr;
  }

  .homeWorkbenchControlShelf .homeWorkbenchControlField,
  .homeWorkbenchControlShelf .homeWorkbenchRangeField {
    width: 100%;
    margin-left: 0;
  }

  .homeWorkbenchWorkspaceEditorTabs,
  .homeWorkbenchResourceGrid {
    grid-template-columns: 1fr;
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/category-market.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Category market CSS.
 *
 * Owner: total-control/framework.
 * Allowed: /market/categories layout, ranking, matrix, insight rail, action view,
 * and category-market-specific media cards.
 *
 * Existing pre-split rules live in legacy-category-market.css to preserve
 * cascade order. Put new focused category-market fixes in this file.
 */

/* Refined, flat data-product language shared with the workbench home. */
.categoryMarketPage {
  --category-refined-radius: 4px;
  --category-refined-row: color-mix(in srgb, var(--surface-panel-hover) 72%, transparent);
  --category-refined-active: color-mix(in srgb, var(--primary) 7%, var(--surface-panel));
  gap: 16px;
  padding: 18px;
}

body:has(.categoryMarketPage) .appSidebar .navItem.active {
  border-color: transparent;
  border-radius: 2px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  background-image: none;
  box-shadow: inset 2px 0 0 var(--primary);
}

body:has(.categoryMarketPage) .appSidebar .navItem.active .navIcon {
  background: transparent;
  color: var(--primary-light);
}

body:has(.categoryMarketPage) .appSidebar .navSectionToggle.is-active {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--primary-light);
}

.categoryMarketPage.isInsight {
  row-gap: 16px;
}

/* The action tab is an execution plan, not a second collection of parallel cards. */
.categoryMarketBattlePlan {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
}

/* The action view is intentionally decision-first: tabs, candidates, checks. */
.categoryMarketBattleHero {
  display: none;
}

.categoryMarketBattleTaskCard,
.categoryMarketBattleDataNote {
  display: none;
}

.categoryMarketBattleContext {
  position: sticky;
  top: 0;
  z-index: 40;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid var(--line-dark);
  padding: 0 2px 10px;
}

.categoryMarketBattleContext strong {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 800;
}

.categoryMarketBattleContext span,
.categoryMarketBattleContext small {
  color: var(--text-3);
  font-size: 11px;
}

.categoryMarketBattleContextPeriod {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--primary) !important;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 720;
}

.categoryMarketBattleContextPeriod .compassIcon {
  color: currentColor;
}

.categoryMarketBattleContext small::before {
  margin-right: 10px;
  color: var(--line-dark);
  content: '/';
}

.categoryMarketBattleHero {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.6fr);
  gap: 20px;
  border: 1px solid var(--line-dark);
  border-radius: var(--category-refined-radius);
  background: var(--surface-panel);
  padding: 22px;
  animation: categoryBattleReveal 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.categoryMarketBattleHeroCopy {
  min-width: 0;
}

.categoryMarketBattleEyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-3);
  font-size: 12px;
}

.categoryMarketBattleEyebrow > span {
  color: var(--primary);
  font-weight: 760;
}

.categoryMarketBattleEyebrow em,
.categoryMarketBattleEyebrow small {
  font-style: normal;
  font-size: 11px;
}

.categoryMarketBattleEyebrow em::before,
.categoryMarketBattleEyebrow small::before {
  margin-right: 8px;
  color: var(--line-dark);
  content: '/';
}

.categoryMarketBattleEyebrow small {
  color: var(--text-3);
}

.categoryMarketBattleEyebrow small.isError {
  color: var(--warning, #b45309);
}

.categoryMarketBattleHero h2 {
  max-width: 720px;
  margin: 12px 0 6px;
  color: var(--text-1);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 840;
  line-height: 1.25;
}

.categoryMarketBattleHeroCopy > p {
  max-width: 720px;
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.65;
}

.categoryMarketBattleSummary {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  border-top: 1px solid var(--line-dark);
  padding-top: 12px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
}

.categoryMarketBattleSummary .compassIcon {
  flex: 0 0 auto;
  color: var(--primary);
  margin-top: 1px;
}

.categoryMarketBattleHeroMetrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: stretch;
  border-left: 1px solid var(--line-dark);
  padding-left: 20px;
}

.categoryMarketBattleHeroMetrics > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 14px;
}

.categoryMarketBattleHeroMetrics > div + div {
  border-left: 1px solid var(--line-dark);
}

.categoryMarketBattleHeroMetrics span,
.categoryMarketBattleHeroMetrics small {
  color: var(--text-3);
  font-size: 11px;
}

.categoryMarketBattleHeroMetrics strong {
  color: var(--text-1);
  font-size: 24px;
  font-weight: 820;
  line-height: 1.1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.categoryMarketBattleHeroMetrics small {
  line-height: 1.4;
}

.categoryMarketBattleProgress {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--line-dark);
  padding: 0 4px;
}

.categoryMarketBattleProgress button {
  position: relative;
  min-width: 110px;
  display: grid;
  gap: 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-3);
  padding: 11px 10px 10px;
  text-align: left;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}

.categoryMarketBattleProgress button:hover {
  background: var(--category-refined-row);
  color: var(--text-1);
}

.categoryMarketBattleProgress button.isActive,
.categoryMarketBattleProgress button.is-current {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

.categoryMarketBattleProgress button.is-done {
  color: var(--text-2);
}

.categoryMarketBattleProgress button > span {
  color: currentColor;
  font-size: 10px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.categoryMarketBattleProgress button > strong {
  overflow: hidden;
  color: currentColor;
  font-size: 12px;
  font-weight: 730;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketBattleLayout {
  min-width: 0;
  min-height: 0;
  height: min(900px, calc(100dvh - 250px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.36fr);
  align-items: stretch;
  gap: 24px;
}

.categoryMarketBattleActionBoard {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 12px;
  border: 0;
  background: transparent;
}

.categoryMarketBattleActionBoardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line-dark);
  padding: 15px 16px;
}

.categoryMarketBattleActionBoardHeader h3,
.categoryMarketBattleActionBoardHeader p {
  margin: 0;
}

.categoryMarketBattleActionBoardHeader h3 {
  color: var(--text-1);
  font-size: 16px;
  font-weight: 800;
}

.categoryMarketBattleActionBoardHeader p {
  margin-top: 4px;
  color: var(--text-3);
  font-size: 12px;
}

.categoryMarketBattleActionBoardHeader > span {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 11px;
}

.categoryMarketBattleActionTabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 0;
  overflow-x: auto;
  background: var(--surface-panel);
  border: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding: 0 10px;
}

.categoryMarketBattleActionTabs button {
  min-width: 86px;
  display: grid;
  gap: 4px;
  justify-items: center;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-3);
  padding: 12px 12px 10px;
  text-align: center;
  cursor: pointer;
}

.categoryMarketBattleActionTabs button small {
  display: none;
}

.categoryMarketBattleActionTabs button:hover {
  color: var(--text-1);
  background: var(--category-refined-row);
}

.categoryMarketBattleActionTabs button.isActive {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

.categoryMarketBattleActionTabs strong {
  color: currentColor;
  font-size: 12px;
  font-weight: 780;
  white-space: nowrap;
}

.categoryMarketBattleActionTabs small {
  color: var(--text-3);
  font-size: 10px;
  white-space: nowrap;
}

.categoryMarketBattleActionDetail {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 18px;
  animation: categoryBattleStageIn 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.categoryMarketBattleActionDetail.is-current {
  padding-right: 0;
  padding-left: 0;
}

.categoryMarketBattleActionDetail.is-current > .categoryMarketBattleRecommendation,
.categoryMarketBattleActionDetail.is-current > .categoryMarketBattleEvidence,
.categoryMarketBattleActionDetail.is-current > .categoryMarketBattleTutorial,
.categoryMarketBattleActionDetail.is-current > .categoryMarketBattleActions,
.categoryMarketBattleActionDetail.is-current > .isLegacyProductList {
  display: none;
}

/* Non-product tabs use the decision workspace below instead of the legacy tutorial/list chrome. */
.categoryMarketBattleActionDetail:not(.is-current) > .categoryMarketBattleRecommendation,
.categoryMarketBattleActionDetail:not(.is-current) > .categoryMarketBattleInlineList,
.categoryMarketBattleActionDetail:not(.is-current) > .categoryMarketBattleTutorial,
.categoryMarketBattleActionDetail:not(.is-current) > .categoryMarketBattleActions {
  display: none;
}

.categoryMarketSelectionBoard {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 6px;
  align-items: start;
}

.categoryMarketSelectionWorkspaceHeader {
  min-width: 0;
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-dark);
  padding: 0 2px 9px;
}

.categoryMarketSelectionWorkspaceHeader h3,
.categoryMarketSelectionWorkspaceHeader p {
  margin: 0;
}

.categoryMarketSelectionWorkspaceHeader h3 {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 820;
}

.categoryMarketSelectionWorkspaceHeader p,
.categoryMarketSelectionWorkspaceHeader > span {
  color: var(--text-3);
  font-size: 11px;
}

.categoryMarketSelectionWorkspaceHeader p {
  margin-top: 4px;
}

.categoryMarketSelectionWorkspaceHeader > span {
  flex: 0 0 auto;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.categoryMarketSelectionIntro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 12px;
}

.categoryMarketSelectionIntro span,
.categoryMarketSelectionGroup header span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 760;
}

.categoryMarketSelectionIntro h4,
.categoryMarketSelectionGroup h4 {
  margin: 4px 0 0;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 800;
}

.categoryMarketSelectionIntro small,
.categoryMarketSelectionGroup header p,
.categoryMarketSelectionGroup header > span {
  color: var(--text-3);
  font-size: 11px;
}

.categoryMarketSelectionGroup {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.categoryMarketSelectionGroup > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.categoryMarketSelectionGroup header p {
  margin: 4px 0 0;
}

.categoryMarketSelectionGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.categoryMarketSelectionGrid.is-count-1 {
  grid-template-columns: minmax(0, 1fr);
}

.categoryMarketSelectionGrid.is-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.categoryMarketSelectionCard {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  background: var(--surface-panel);
  padding: 13px;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.categoryMarketSelectionCard:hover {
  border-color: var(--primary-border);
  background: color-mix(in srgb, var(--primary) 4%, var(--surface-panel));
  transform: translateY(-1px);
}

.categoryMarketSelectionCardHead {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px 54px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
}

.categoryMarketSelectionCardHead > img {
  width: 54px;
  height: 54px;
  border-radius: 2px;
  object-fit: cover;
}

.categoryMarketSelectionRank {
  color: var(--text-3);
  font-size: 11px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.categoryMarketSelectionProductName {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.categoryMarketSelectionProductName > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.categoryMarketSelectionProductName strong,
.categoryMarketSelectionProductName small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketSelectionProductName strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 780;
}

.categoryMarketSelectionProductName span {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 9px;
  font-weight: 760;
}

.categoryMarketSelectionProductName small {
  color: var(--text-3);
  font-size: 10px;
}

.categoryMarketSelectionCardHead > a {
  display: grid;
  place-items: center;
  color: var(--text-3);
}

.categoryMarketSelectionCardHead > a:hover {
  color: var(--primary);
}

.categoryMarketSelectionMetrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 9px 0;
}

.categoryMarketSelectionMetrics span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.categoryMarketSelectionMetrics small {
  overflow: hidden;
  color: var(--text-3);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketSelectionMetrics strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketSelectionMetrics strong.isPositive {
  color: var(--primary);
}

.categoryMarketSelectionMetrics strong.isNegative {
  color: var(--danger, #b42318);
}

.categoryMarketSelectionReason {
  margin: 0;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.55;
}

.categoryMarketSelectionReason span {
  display: block;
  margin-bottom: 4px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 700;
}

.categoryMarketBattleDetailCard {
  min-width: 0;
  display: grid;
  gap: 15px;
  padding: 16px;
}

.categoryMarketBattleDetailCard > header {
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 11px;
}

.categoryMarketBattleDetailCard > header span,
.categoryMarketBattleDetailRows p,
.categoryMarketBattleDetailCallout span {
  color: var(--text-3);
  font-size: 10px;
}

.categoryMarketBattleDetailCard > header h3 {
  margin: 4px 0 0;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 800;
}

.categoryMarketBattleDetailCard.is-hidden {
  display: none;
}

.categoryMarketActionWorkspace {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding-top: 2px;
}

.categoryMarketActionWorkspaceHeader {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-dark);
  padding: 0 2px 9px;
}

.categoryMarketActionWorkspaceHeader h3,
.categoryMarketActionWorkspaceHeader p {
  margin: 0;
}

.categoryMarketActionWorkspaceHeader h3 {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 820;
}

.categoryMarketActionWorkspaceHeader p,
.categoryMarketActionWorkspaceHeader > span {
  color: var(--text-3);
  font-size: 11px;
}

.categoryMarketActionWorkspaceHeader p {
  margin-top: 4px;
}

.categoryMarketActionWorkspaceHeader > span {
  flex: 0 0 auto;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.categoryMarketActionGroupList {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.categoryMarketActionGroup {
  min-width: 0;
  display: grid;
  gap: 9px;
}

.categoryMarketActionGroup > header {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-soft);
  padding: 0 2px 7px;
}

.categoryMarketActionGroup > header h4,
.categoryMarketActionGroup > header p {
  margin: 0;
}

.categoryMarketActionGroup > header h4 {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 820;
}

.categoryMarketActionGroup > header p {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 10px;
  line-height: 1.45;
}

.categoryMarketActionGroup > header > span {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 10px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.categoryMarketActionGroupEmpty {
  margin: 0;
  border: 1px dashed var(--line-dark);
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.5;
  padding: 13px;
}

.categoryMarketActionGroup .categoryMarketActionDecisionList {
  grid-template-columns: 1fr;
}

.categoryMarketActionDecisionList {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.categoryMarketActionDecisionCard {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 3px;
  background: var(--surface-panel);
  padding: 12px;
}

.categoryMarketActionDecisionCard.is-positive {
  border-top-color: color-mix(in srgb, var(--primary) 52%, var(--line-dark));
}

.categoryMarketActionDecisionCard.is-negative {
  border-top-color: color-mix(in srgb, var(--danger, #b42318) 48%, var(--line-dark));
}

.categoryMarketActionDecisionHead {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.categoryMarketActionDecisionHead > img,
.categoryMarketActionAvatar {
  width: 38px;
  height: 38px;
  border-radius: 3px;
}

.categoryMarketActionDecisionHead > img {
  object-fit: cover;
  background: var(--surface-subtle);
}

.categoryMarketActionAvatar {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-subtle));
  color: var(--primary);
  font-size: 14px;
  font-weight: 800;
}

.categoryMarketActionDecisionHead > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.categoryMarketActionDecisionHead strong,
.categoryMarketActionDecisionHead small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketActionDecisionHead strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 780;
}

.categoryMarketActionDecisionHead small {
  color: var(--text-3);
  font-size: 10px;
}

.categoryMarketActionDecisionHead > b {
  max-width: 78px;
  overflow: hidden;
  color: var(--primary);
  font-size: 10px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketActionDecisionMetrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 0;
}

.categoryMarketActionDecisionMetrics span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.categoryMarketActionDecisionMetrics small {
  overflow: hidden;
  color: var(--text-3);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketActionDecisionMetrics strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketActionDecisionMetrics strong.is-positive,
.categoryMarketActionInsightRows b.is-positive {
  color: var(--primary);
}

.categoryMarketActionDecisionMetrics strong.is-negative,
.categoryMarketActionInsightRows b.is-negative {
  color: var(--danger, #b42318);
}

.categoryMarketActionDecisionCard > p {
  min-height: 32px;
  margin: 0;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.65;
}

.categoryMarketActionInsightPanel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid var(--line-dark);
  border-radius: 3px;
  background: var(--surface-panel);
  padding: 16px;
}

.categoryMarketActionInsightPanel > header {
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 11px;
}

.categoryMarketActionInsightPanel > header span {
  color: var(--text-3);
  font-size: 10px;
}

.categoryMarketActionInsightPanel > header h3 {
  margin: 4px 0 0;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 820;
  line-height: 1.35;
}

.categoryMarketActionInsightRows {
  display: grid;
  gap: 12px;
}

.categoryMarketActionInsightRows article {
  display: grid;
  gap: 4px;
}

.categoryMarketActionInsightRows article > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.categoryMarketActionInsightRows strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 760;
}

.categoryMarketActionInsightRows b {
  color: var(--primary);
  font-size: 13px;
  font-weight: 820;
  text-align: right;
}

.categoryMarketActionInsightRows p {
  margin: 0;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.55;
}

.categoryMarketActionInsightChart {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 0;
}

.categoryMarketActionInsightCallout {
  border-left: 2px solid var(--primary);
  padding-left: 10px;
}

.categoryMarketActionInsightCallout span {
  color: var(--text-3);
  font-size: 10px;
}

.categoryMarketActionInsightCallout p {
  margin: 5px 0 0;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.65;
}

.categoryMarketBattleDetailRows {
  display: grid;
  gap: 12px;
}

.categoryMarketBattleDetailRows article {
  display: grid;
  gap: 5px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 11px;
}

.categoryMarketBattleDetailRows article > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.categoryMarketBattleDetailRows strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 760;
}

.categoryMarketBattleDetailRows b {
  color: var(--primary);
  font-size: 13px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.categoryMarketBattleDetailRows p,
.categoryMarketBattleDetailCallout p {
  margin: 0;
  line-height: 1.55;
}

.categoryMarketBattleDetailCallout {
  display: grid;
  gap: 6px;
  border-left: 2px solid var(--primary);
  padding-left: 10px;
}

.categoryMarketBattleDetailCallout p {
  color: var(--text-2);
  font-size: 11px;
}

.categoryMarketBattleActionDetail > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.categoryMarketBattleActionDetail > header > div {
  min-width: 0;
}

.categoryMarketBattleActionDetail > header span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 760;
}

.categoryMarketBattleActionDetail > header h3 {
  margin: 5px 0 2px;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 820;
}

.categoryMarketBattleActionDetail > header p {
  margin: 0;
  color: var(--text-3);
  font-size: 11px;
}

.categoryMarketBattleActionDetail > header > small {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 10px;
}

.categoryMarketBattleActionDetail .categoryMarketBattleEvidence {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.categoryMarketBattleInlineList {
  min-width: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.categoryMarketBattleInlineListHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 8px;
}

.categoryMarketBattleInlineListHeader span {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 780;
}

.categoryMarketBattleInlineListHeader small {
  color: var(--text-3);
  font-size: 10px;
}

.categoryMarketBattleInlineList article {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--line-soft);
  padding: 8px 0;
}

.categoryMarketBattleInlineList article > img {
  width: 34px;
  height: 34px;
  border-radius: 3px;
  object-fit: cover;
}

.categoryMarketBattleInlineList article > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.categoryMarketBattleInlineList article strong,
.categoryMarketBattleInlineList article small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketBattleInlineList article strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 720;
}

.categoryMarketBattleRank {
  color: var(--primary);
  font-size: 10px;
  font-weight: 760;
}

.categoryMarketBattleInlineList article small {
  color: var(--text-3);
  font-size: 10px;
}

.categoryMarketBattleInlineList article em {
  max-width: 125px;
  overflow: hidden;
  color: var(--primary);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketBattleInlineList article.isBand {
  grid-template-columns: 74px minmax(0, 1fr) auto;
}

.categoryMarketBattleBandLabel,
.categoryMarketBattleMetricMark {
  color: var(--text-1);
  font-size: 11px;
  font-weight: 780;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.categoryMarketBattleInlineList article em.isPositive {
  color: var(--primary);
}

.categoryMarketBattleInlineList article em.isNegative {
  color: var(--danger, #b42318);
}

.categoryMarketBattleInlineList article.isMetric {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.categoryMarketBattleMetricMark {
  color: var(--primary);
}

.categoryMarketBattleInlineList article.isCreator > .categoryMarketBattleAvatar,
.categoryMarketBattleInlineList article.isLive > .categoryMarketBattleAvatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--category-refined-row);
  color: var(--primary);
  font-size: 12px;
  font-weight: 760;
}

.categoryMarketBattleTutorial {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(200px, 0.75fr);
  gap: 16px;
  border-top: 1px solid var(--line-dark);
  padding-top: 13px;
}

.categoryMarketBattleTutorial section {
  min-width: 0;
}

.categoryMarketBattleTutorial section > span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 720;
}

.categoryMarketBattleTutorial ol {
  display: grid;
  gap: 7px;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: tutorial-step;
}

.categoryMarketBattleTutorial li {
  position: relative;
  padding-left: 23px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
  counter-increment: tutorial-step;
}

.categoryMarketBattleTutorial li::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line-dark));
  border-radius: 50%;
  color: var(--primary);
  content: counter(tutorial-step);
  font-size: 9px;
}

.categoryMarketBattleTutorial section > p {
  margin: 7px 0 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.categoryMarketBattleActionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.categoryMarketBattleActionCard {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  border-bottom: 1px solid var(--line-dark);
  padding: 16px;
}

.categoryMarketBattleActionCard:nth-child(odd) {
  border-right: 1px solid var(--line-dark);
}

.categoryMarketBattleActionCard:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.categoryMarketBattleActionCard > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.categoryMarketBattleActionCard > header > div {
  min-width: 0;
}

.categoryMarketBattleActionCard > header h3 {
  margin: 5px 0 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 800;
}

.categoryMarketBattleActionCard > header > small {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 10px;
}

.categoryMarketBattleActionStatus {
  display: inline-flex;
  align-items: center;
  color: var(--primary);
  font-size: 10px;
  font-weight: 760;
}

.categoryMarketBattleActionCard.is-blocked .categoryMarketBattleActionStatus {
  color: var(--text-3);
}

.categoryMarketBattleRecommendation {
  min-height: 38px;
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 680;
  line-height: 1.55;
}

.categoryMarketBattleActionCard .categoryMarketBattleEvidence {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.categoryMarketBattleActionCard .categoryMarketBattleActions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.categoryMarketBattleGate {
  border-top: 1px solid var(--line-soft);
  padding-top: 9px;
}

.categoryMarketBattleGate summary {
  color: var(--text-3);
  cursor: pointer;
  font-size: 11px;
}

.categoryMarketBattleGate p {
  margin: 7px 0 0;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.5;
}

.categoryMarketBattleTimeline,
.categoryMarketBattleAside > section {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: var(--category-refined-radius);
  background: var(--surface-panel);
}

.categoryMarketBattleSectionHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line-dark);
  padding: 16px 18px;
}

.categoryMarketBattleSectionHeader h3,
.categoryMarketBattleSectionHeader p {
  margin: 0;
}

.categoryMarketBattleSectionHeader h3 {
  color: var(--text-1);
  font-size: 16px;
  font-weight: 800;
}

.categoryMarketBattleSectionHeader p {
  margin-top: 4px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.5;
}

.categoryMarketBattleSectionHeader > span {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 11px;
}

.categoryMarketBattleStages {
  display: grid;
}

.categoryMarketBattleStage {
  min-width: 0;
  border-bottom: 1px solid var(--line-dark);
}

.categoryMarketBattleStage:last-child {
  border-bottom: 0;
}

.categoryMarketBattleStageHeader {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  padding: 14px 18px;
  text-align: left;
  transition: background-color 160ms ease;
}

.categoryMarketBattleStageHeader:hover,
.categoryMarketBattleStage.isOpen .categoryMarketBattleStageHeader {
  background: var(--category-refined-row);
}

.categoryMarketBattleStageIndex {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--text-3);
  font-size: 10px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.categoryMarketBattleStage.is-done .categoryMarketBattleStageIndex,
.categoryMarketBattleStage.is-current .categoryMarketBattleStageIndex {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--line-dark));
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-panel));
}

.categoryMarketBattleStage.is-blocked .categoryMarketBattleStageIndex {
  color: var(--text-3);
  background: var(--category-refined-row);
}

.categoryMarketBattleStageTitle {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.categoryMarketBattleStageTitle strong,
.categoryMarketBattleStageTitle small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketBattleStageTitle strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 780;
}

.categoryMarketBattleStageTitle small {
  color: var(--text-3);
  font-size: 11px;
}

.categoryMarketBattleStageHeader > em {
  border-radius: 3px;
  background: var(--category-refined-row);
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
  padding: 4px 7px;
  white-space: nowrap;
}

.categoryMarketBattleStage.is-current .categoryMarketBattleStageHeader > em,
.categoryMarketBattleStage.is-ready .categoryMarketBattleStageHeader > em {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-panel));
  color: var(--primary);
}

.categoryMarketBattleStage.is-blocked .categoryMarketBattleStageHeader > em {
  color: var(--text-3);
}

.categoryMarketBattleStageHeader > .compassIcon {
  color: var(--text-3);
}

.categoryMarketBattleStageBody {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line-dark);
  background: color-mix(in srgb, var(--surface-panel-hover) 42%, var(--surface-panel));
  padding: 16px 18px 18px 64px;
  animation: categoryBattleStageIn 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.categoryMarketBattleStageBrief {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.categoryMarketBattleStageBrief section {
  min-width: 0;
}

.categoryMarketBattleStageBrief span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
}

.categoryMarketBattleStageBrief p {
  margin: 5px 0 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.categoryMarketBattleChecklist {
  min-width: 0;
  border-top: 1px solid var(--line-dark);
  padding-top: 12px;
}

.categoryMarketBattleChecklist > span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
}

.categoryMarketBattleChecklist ol {
  display: grid;
  gap: 7px;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: battle-step;
}

.categoryMarketBattleChecklist li {
  position: relative;
  min-width: 0;
  padding-left: 25px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
  counter-increment: battle-step;
}

.categoryMarketBattleChecklist li::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line-dark));
  border-radius: 50%;
  color: var(--primary);
  content: counter(battle-step);
  font-size: 10px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.categoryMarketBattleEvidence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.categoryMarketBattleEvidence > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  border-left: 2px solid color-mix(in srgb, var(--primary) 28%, var(--line-dark));
  padding: 3px 0 3px 9px;
}

.categoryMarketBattleEvidence span,
.categoryMarketBattleEvidence small {
  overflow: hidden;
  color: var(--text-3);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketBattleEvidence strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketBattleEvidence small {
  color: color-mix(in srgb, var(--text-3) 78%, var(--primary));
}

.categoryMarketBattleActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.categoryMarketBattleAction {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 3px;
  background: var(--surface-panel);
  color: inherit;
  padding: 10px;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.categoryMarketBattleAction:hover {
  border-color: var(--primary-border);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-panel));
  transform: translateY(-1px);
}

.categoryMarketBattleAction > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.categoryMarketBattleAction strong,
.categoryMarketBattleAction small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketBattleAction strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 750;
}

.categoryMarketBattleAction small {
  color: var(--text-3);
  font-size: 11px;
}

.categoryMarketBattleAction > .compassIcon {
  flex: 0 0 auto;
  color: var(--primary);
}

.categoryMarketBattleAside {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  display: grid;
  gap: 12px;
  position: sticky;
  top: 0;
  align-self: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.categoryMarketBattleNextCard,
.categoryMarketBattleTaskCard {
  padding: 16px;
}

.categoryMarketBattleAsideLabel {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 750;
}

.categoryMarketBattleNextCard h3 {
  margin: 12px 0 5px;
  color: var(--text-1);
  font-size: 16px;
  font-weight: 800;
}

.categoryMarketBattleNextCard p {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.categoryMarketBattleNextCard > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 730;
  text-decoration: none;
}

.categoryMarketBattleTaskCard header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 11px;
}

.categoryMarketBattleTaskCard header span,
.categoryMarketBattleTaskCard header small {
  color: var(--text-3);
  font-size: 10px;
}

.categoryMarketBattleTaskCard header h3 {
  margin: 4px 0 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 790;
}

.categoryMarketBattleTaskCard > div {
  display: grid;
}

.categoryMarketBattleTaskCard > div > a {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line-dark);
  color: inherit;
  padding: 11px 0;
  text-decoration: none;
}

.categoryMarketBattleTaskCard > div > a:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.categoryMarketBattleTaskCard > div > a:hover strong {
  color: var(--primary);
}

.categoryMarketBattleTaskPriority {
  min-height: 20px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: var(--category-refined-row);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 800;
}

.categoryMarketBattleTaskPriority.is-p0 {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-panel));
  color: var(--danger);
}

.categoryMarketBattleTaskPriority.is-p1 {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-panel));
  color: var(--primary);
}

.categoryMarketBattleTaskCard > div > a > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.categoryMarketBattleTaskCard strong,
.categoryMarketBattleTaskCard small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketBattleTaskCard strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 730;
}

.categoryMarketBattleTaskCard small {
  color: var(--text-3);
  font-size: 10px;
}

.categoryMarketBattleTaskCard .compassIcon {
  color: var(--text-3);
}

.categoryMarketBattleDataNote {
  margin: 0;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.55;
}

@keyframes categoryBattleReveal {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes categoryBattleStageIn {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.categoryMarketTop,
.categoryMarketDataState,
.categoryMarketDataBanner,
.categoryMarketPanel,
.categoryMarketMetric,
.categoryMarketCategoryPopover,
.categoryMarketMatrix,
.categoryMarketStrategyCard,
.categoryMarketActionCard {
  border-radius: var(--category-refined-radius);
  background-image: none;
  box-shadow: none;
}

.categoryMarketSharedDataState {
  min-height: 320px;
  border-radius: var(--category-refined-radius);
}

.categoryMarketTop,
.categoryMarketCategoryPopover {
  border-radius: 0;
}

.categoryMarketTop {
  min-height: 50px;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  background: var(--surface-panel);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  padding: 0 4px;
}

.categoryMarketTop.isDocked {
  border-radius: 0;
  background: var(--sticky-toolbar-bg);
  box-shadow: 0 5px 12px color-mix(in srgb, #020617 6%, transparent);
}

.categoryMarketTabs {
  min-height: 50px;
  gap: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
  padding: 0 24px 0 8px;
}

.categoryMarketTabs button {
  position: relative;
  min-height: 50px;
  border-radius: 0;
  padding: 0;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 650;
}

.categoryMarketTabs button.active {
  background: transparent;
  color: var(--primary);
  box-shadow: none;
}

.categoryMarketTabs button.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--primary);
}

.categoryMarketControls {
  min-height: 50px;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) auto;
}

.categoryMarketMarketSelect {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding-left: 12px;
}

.categoryMarketMarketSelect > span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
}

.categoryMarketMarketSelect select {
  width: 100%;
  height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: var(--surface-panel);
  color: var(--text-1);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 0 28px 0 10px;
}

.categoryMarketMarketSelect .cuiDropdownSelect {
  width: 100%;
  min-width: 0;
}

.categoryMarketMarketSelect .cuiDropdownSelectTrigger {
  min-height: 34px;
  border-color: var(--line-dark);
  border-radius: 4px;
  background: var(--surface-panel);
  box-shadow: none;
}

.categoryMarketCategoryPicker {
  min-height: 50px;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 18px 0 12px;
}

.categoryMarketQuickFilters {
  gap: 22px;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.categoryMarketTimeFilterGroup .categoryMarketSegment {
  gap: 22px;
  border: 0;
  border-left: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
  padding: 0 8px 0 22px;
}

.categoryMarketCurrentScopeButton,
.categoryMarketQuickFilters button {
  min-height: 50px;
  border-radius: 0;
  font-weight: 650;
  box-shadow: none;
}

.categoryMarketCurrentScopeButton {
  gap: 5px;
  background: color-mix(in srgb, var(--primary) 4%, transparent);
  background-image: none;
  color: var(--primary);
  padding: 0 10px;
}

.categoryMarketCurrentScopeButton:hover {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.categoryMarketCurrentScopeButton span {
  color: inherit;
  font-size: 12px;
  font-weight: 650;
}

.categoryMarketCurrentScopeButton svg {
  color: var(--primary);
}

.categoryMarketQuickFilters button {
  color: var(--text-2);
  padding: 0;
  font-size: 14px;
  font-weight: 650;
}

.categoryMarketQuickFilters button:hover {
  color: var(--text-1);
}

.categoryMarketTimeFilterGroup .categoryMarketSegment button {
  min-height: 50px;
  border-radius: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 650;
}

.categoryMarketQuickFilters button.active,
.categoryMarketSegment button.active {
  background: var(--surface-panel) !important;
  color: var(--primary) !important;
  box-shadow: inset 0 -2px 0 var(--primary);
}

.categoryMarketTimeFilterGroup .categoryMarketSegment button.active {
  background: transparent !important;
}

.categoryMarketCategoryPopover {
  gap: 3px;
  border-color: var(--line-dark);
  padding: 6px;
}

.categoryMarketCategoryPopover button {
  min-height: 32px;
  border-radius: 0;
  background: transparent;
  font-weight: 740;
}

.categoryMarketCategoryPopover button.active {
  border-color: transparent;
  background: var(--category-refined-active);
  color: var(--primary);
  box-shadow: none;
}

.categoryMarketSummary {
  gap: 8px;
}

.categoryMarketMetric {
  --category-metric-tint: #7d8795;
  min-height: 126px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(24px, 1fr) auto;
  align-items: stretch;
  gap: 8px;
  border-color: var(--line-dark);
  background: var(--surface-panel);
  padding: 16px 18px 14px;
}

.categoryMarketMetric.tone-purple {
  --metric-color: #797486;
  --category-metric-tint: #797486;
}

.categoryMarketMetric.tone-green {
  --metric-color: #4f8f6c;
  --category-metric-tint: #4f8f6c;
}

.categoryMarketMetric.tone-cyan {
  --metric-color: #4d9f99;
  --category-metric-tint: #4d9f99;
}

.categoryMarketMetric.tone-amber {
  --metric-color: #b98732;
  --category-metric-tint: #b98732;
}

.categoryMarketMetric > strong {
  overflow: visible;
  margin: 0;
  font-size: 27px;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: clip;
}

.categoryMarketMetric > p {
  align-self: center;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 720;
}

.categoryMarketMetric > footer {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.categoryMarketMetric > footer small {
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketMetric > footer em {
  flex: 0 0 auto;
  overflow: visible;
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.categoryMarketMetric > footer em.positive {
  color: #3f9278;
}

.categoryMarketMetric > footer em.negative {
  color: #d84f64;
}

.categoryMarketGrid,
.categoryMarketMainColumn,
.categoryMarketSideColumn {
  gap: 12px;
}

.categoryMarketPanel {
  gap: 12px;
  border-color: var(--line-dark);
  background: var(--surface-panel);
  padding: 14px;
}

.categoryMarketPanelHeader {
  align-items: center;
}

.categoryMarketPanelHeader > div:first-child {
  align-items: center;
  gap: 7px;
}

.categoryMarketPanelHeader > div:first-child > span {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  background: transparent;
  color: var(--text-2);
}

.categoryMarketPanelHeader strong {
  font-size: 14px;
  font-weight: 830;
}

.categoryMarketPanelHeader p,
.categoryMarketPanelAction {
  font-weight: 700;
}

.categoryMarketPanelAction button,
.categoryMarketPanelAction a,
.categoryMarketBlockTitle span,
.categoryMarketTaskPriority {
  border-radius: 3px;
}

.categoryMarketCreatorList article {
  grid-template-columns: 40px minmax(0, 1fr) 64px 34px;
}

.categoryMarketCreatorAvatar {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-panel-hover);
}

.categoryMarketOpportunityTable,
.categoryMarketPriceEvidenceList,
.categoryMarketChannelEvidenceList {
  min-width: 0;
  display: grid;
  gap: 0;
}

.categoryMarketOpportunityTable {
  overflow-x: auto;
}

.categoryMarketOpportunityTableHead,
.categoryMarketOpportunityTableRow {
  min-width: 680px;
  display: grid;
  grid-template-columns:
    minmax(240px, 1.6fr) minmax(76px, 0.48fr) minmax(76px, 0.48fr) minmax(76px, 0.48fr)
    minmax(92px, 0.58fr);
  align-items: center;
  gap: 12px;
}

.categoryMarketOpportunityTableHead {
  min-height: 34px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
}

.categoryMarketOpportunityTableRow {
  min-height: 66px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.categoryMarketOpportunityTableRow:hover {
  background: var(--category-refined-row);
}

.categoryMarketOpportunityTableRow > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.categoryMarketOpportunityTableRow img {
  width: 44px;
  height: 44px;
  object-fit: cover;
}

.categoryMarketOpportunityTableRow > div > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.categoryMarketOpportunityTableRow strong,
.categoryMarketOpportunityTableRow small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketOpportunityTableRow strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 800;
}

.categoryMarketOpportunityTableRow small {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
}

.categoryMarketOpportunityTableRow em {
  font-style: normal;
  font-weight: 750;
}

.categoryMarketOpportunityTableRow b {
  color: var(--primary);
  font-weight: 750;
}

.categoryMarketEvidenceSplit {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.categoryMarketEvidenceSplit > section {
  min-width: 0;
}

.categoryMarketEvidenceSplit > section + section {
  border-left: 1px solid var(--line-dark);
  padding-left: 24px;
}

.categoryMarketEvidenceSplit > section > header {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-dark);
}

.categoryMarketEvidenceSplit > section > header strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 800;
}

.categoryMarketEvidenceSplit > section > header span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 650;
}

.categoryMarketPriceEvidenceList article {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(70px, 1fr) 42px 42px 44px minmax(88px, 1fr);
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--text-2);
  font-size: 12px;
}

.categoryMarketPriceEvidenceList strong {
  color: var(--text-1);
  font-weight: 750;
}

.categoryMarketPriceEvidenceList em {
  font-style: normal;
  font-weight: 750;
}

.categoryMarketPriceEvidenceList small,
.categoryMarketChannelEvidenceList small {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
}

.categoryMarketChannelEvidenceList article {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(90px, 0.75fr) minmax(110px, 1fr) minmax(120px, 1fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line-dark);
}

.categoryMarketChannelEvidenceList article > div {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-2);
  font-size: 12px;
}

.categoryMarketChannelEvidenceList article > div strong {
  color: var(--text-1);
  font-weight: 750;
}

.categoryMarketChannelEvidenceList i {
  height: 4px;
  display: block;
  overflow: hidden;
  background: var(--surface-panel-hover);
}

.categoryMarketChannelEvidenceList i b {
  height: 100%;
  display: block;
}

.categoryMarketContentEvidenceGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}

.categoryMarketContentEvidenceGrid > a {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line-dark);
  color: inherit;
  padding: 12px;
  text-decoration: none;
}

.categoryMarketContentEvidenceGrid > a + a {
  border-left: 1px solid var(--line-dark);
}

.categoryMarketContentEvidenceGrid img {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

.categoryMarketContentEvidenceGrid div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.categoryMarketContentEvidenceGrid strong,
.categoryMarketContentEvidenceGrid p,
.categoryMarketContentEvidenceGrid span {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryMarketContentEvidenceGrid strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 800;
}

.categoryMarketContentEvidenceGrid p,
.categoryMarketContentEvidenceGrid span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
}

.categoryMarketContentEvidenceGrid span {
  color: var(--primary);
  font-weight: 700;
}

.categoryMarketValidationPath {
  min-width: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-dark);
}

.categoryMarketValidationPath > article {
  min-width: 0;
  display: grid;
  gap: 9px;
  border-bottom: 1px solid var(--line-dark);
  padding: 15px 4px 14px;
}

.categoryMarketValidationPath > article > header {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.categoryMarketValidationPath > article > header > span {
  color: var(--primary);
  font-size: 13px;
  font-weight: 850;
  line-height: 22px;
  text-align: center;
}

.categoryMarketValidationPath header strong,
.categoryMarketValidationPath header p,
.categoryMarketValidationEvidence,
.categoryMarketValidationGate {
  margin: 0;
}

.categoryMarketValidationPath header strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 820;
}

.categoryMarketValidationPath header p {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
}

.categoryMarketValidationPath header em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
}

.categoryMarketValidationPath .status-ready header em {
  color: var(--success);
}

.categoryMarketValidationPath .status-validate header em {
  color: var(--primary);
}

.categoryMarketValidationPath .status-insufficient header em {
  color: var(--warning);
}

.categoryMarketValidationEvidence,
.categoryMarketValidationGate {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  padding-left: 34px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
}

.categoryMarketValidationEvidence b,
.categoryMarketValidationGate b {
  color: var(--text-3);
  font-weight: 700;
}

.categoryMarketValidationPath footer {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: flex-end;
  padding-left: 34px;
}

.categoryMarketValidationPath footer a,
.categoryMarketValidationPath footer span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.categoryMarketValidationPath footer span {
  color: var(--text-3);
}

.categoryMarketPanelAction button {
  background: var(--surface-panel);
}

.categoryMarketOpportunityBoard {
  gap: 12px;
}

.categoryMarketPaneTitle strong {
  font-size: 13px;
  font-weight: 800;
}

.categoryMarketOpportunityList {
  gap: 0;
}

.categoryMarketOpportunityItem {
  gap: 0;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 0;
  transition: background-color 120ms ease;
}

.categoryMarketOpportunityItem:hover {
  background: color-mix(in srgb, var(--primary) 4%, var(--surface-panel));
}

.categoryMarketOpportunityItem.isActive,
.categoryMarketOpportunityItem.isActive:hover {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-panel));
}

.categoryMarketOpportunityRow {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 9px 8px;
}

.categoryMarketOpportunityRow:hover,
.categoryMarketOpportunityRow.isActive {
  border-color: transparent;
  background: transparent;
  background-image: none;
}

.categoryMarketOpportunityRow.isActive {
  background: transparent;
  box-shadow: none;
}

.categoryMarketOpportunityRow > b {
  border-radius: 3px;
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-panel));
  font-weight: 820;
}

.categoryMarketOpportunityRow strong {
  font-weight: 820;
}

.categoryMarketOpportunityRow p,
.categoryMarketOpportunityRow em {
  font-weight: 690;
}

.categoryMarketSubcategoryLink {
  width: 100%;
  justify-self: stretch;
  justify-content: flex-end;
  border-radius: 0;
  background: transparent;
  color: var(--text-2);
  font-weight: 740;
  padding: 0 8px 1px;
}

.categoryMarketMatrix {
  border-color: var(--line-dark);
  background:
    linear-gradient(
      to right,
      transparent calc(50% - 0.5px),
      var(--line-dark) 50%,
      transparent calc(50% + 0.5px)
    ),
    linear-gradient(
      to bottom,
      transparent calc(50% - 0.5px),
      var(--line-dark) 50%,
      transparent calc(50% + 0.5px)
    ),
    var(--surface-panel);
}

.categoryMarketMatrixAxis.isHelp,
.categoryMarketMatrixScale.isHelp {
  pointer-events: auto;
}

.categoryMarketMatrixAxis.isHelp .metricHelpTrigger,
.categoryMarketMatrixScale.isHelp .metricHelpTrigger {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
}

.categoryMarketMatrixQuadrant,
.categoryMarketMatrixAxis,
.categoryMarketMatrixScale {
  font-weight: 680;
}

.categoryMarketDecisionCard,
.categoryMarketChannelStack span,
.categoryMarketMoveList article,
.categoryMarketEvidenceGrid article,
.categoryMarketPriceBandGrid article,
.categoryMarketCreatorTierMini article {
  border: 0;
  border-radius: 3px;
  background: var(--category-refined-row);
}

.categoryMarketDecisionCard strong,
.categoryMarketMoveList strong,
.categoryMarketEvidenceGrid strong {
  font-weight: 820;
}

.categoryMarketOperationStrip {
  gap: 6px;
}

.categoryMarketOperationStrip article {
  border: 0;
  border-left: 2px solid color-mix(in srgb, var(--primary) 55%, var(--line-dark));
  border-radius: 0;
  background: var(--category-refined-row);
  background-image: none;
}

.categoryMarketOperationStrip img,
.categoryMarketOperationIcon {
  border-radius: 3px;
}

.categoryMarketCommerceHero,
.categoryMarketCreatorProfileCard,
.categoryMarketCreatorVideoCard,
.categoryMarketCreatorLiveCard,
.categoryMarketProductCard,
.categoryMarketShelfProduct,
.categoryMarketShelfVideos article,
.categoryMarketStrategyCard,
.categoryMarketActionItem,
.categoryMarketActionCard,
.categoryMarketLiveList article,
.categoryMarketCreatorList article,
.categoryMarketSignalList article,
.categoryMarketTimeline article {
  border-radius: var(--category-refined-radius);
  background-image: none;
  box-shadow: none;
}

.categoryMarketCommerceHero,
.categoryMarketStrategyCard,
.categoryMarketActionCard {
  background: var(--category-refined-row);
}

.categoryMarketStrategyCard {
  grid-template-columns: minmax(150px, 0.64fr) minmax(0, 1fr);
  align-items: stretch;
}

.categoryMarketStrategyShareChart {
  min-width: 0;
  align-self: stretch;
}

.categoryMarketCommerceHero figure,
.categoryMarketProductCard > img,
.categoryMarketShelfProduct > img,
.categoryMarketShelfVideos img,
.categoryMarketCreatorProfileCard figure,
.categoryMarketCreatorVideoCard figure,
.categoryMarketActionProductPreview {
  border-radius: var(--category-refined-radius);
}

.categoryMarketCommerceHero figcaption,
.categoryMarketCreatorProfileCard figcaption,
.categoryMarketCreatorVideoCard figcaption,
.categoryMarketShelfProduct em,
.categoryMarketMediaCard figcaption {
  border-radius: 3px;
}

.categoryMarketProductCard,
.categoryMarketShelfProduct,
.categoryMarketShelfVideos article,
.categoryMarketCreatorProfileCard,
.categoryMarketCreatorVideoCard,
.categoryMarketCreatorLiveCard {
  background: var(--surface-panel);
}

.categoryMarketShelfColumn {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 10px;
}

.categoryMarketCommerceShelf {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
}

.categoryMarketShelfProducts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}

.categoryMarketShelfProduct {
  grid-template-rows: minmax(126px, 1fr) auto auto;
  gap: 6px;
  padding: 9px;
}

.categoryMarketShelfProduct > img {
  aspect-ratio: 1 / 1;
}

.categoryMarketShelfVideos {
  grid-template-rows: repeat(3, minmax(0, 1fr));
  height: 100%;
  gap: 9px;
}

.categoryMarketShelfVideos article {
  grid-template-columns: 82px minmax(0, 1fr);
  min-height: 0;
  padding: 9px;
}

.categoryMarketShelfVideos img {
  width: 82px;
  height: 100%;
  min-height: 82px;
  max-height: 96px;
}

.categoryMarketShelfSectionHeader {
  min-height: 34px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--line-soft);
}

.categoryMarketShelfSectionHeader strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 780;
}

.categoryMarketShelfSectionHeader span {
  color: var(--text-3);
  font-size: 11px;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .categoryMarketCommerceShelf {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .categoryMarketShelfVideos article {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .categoryMarketShelfVideos img {
    width: 88px;
    min-height: 88px;
  }
}

@media (max-width: 560px) {
  .categoryMarketShelfProducts {
    grid-template-columns: minmax(0, 1fr);
  }

  .categoryMarketShelfSectionHeader {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}

.categoryMarketCreatorVideoPage {
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
}

.categoryMarketPage.isInsight .categoryMarketInsightLayout.isRailCollapsed {
  grid-template-columns: minmax(0, 1fr);
}

.categoryMarketOpportunityHeaderActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.categoryMarketInsightRailToggle {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}

.categoryMarketInsightRailToggle:hover {
  background: var(--category-refined-active);
  color: var(--primary);
}

.categoryMarketCreatorProfileCard > div > span,
.categoryMarketCreatorProfileCard > div > strong,
.categoryMarketCreatorProfileCard > div > p,
.categoryMarketCreatorProfileCard dt,
.categoryMarketCreatorProfileCard dd {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.categoryMarketCreatorProfileCard > div > p {
  line-height: 1.5;
}

.categoryMarketCreatorProfileCard dl div {
  padding: 7px 4px;
}

.categoryMarketDataTable {
  gap: 0;
}

.categoryMarketCreatorTierTable {
  display: grid;
  gap: 0;
}

.categoryMarketDataHead {
  min-height: 36px;
  align-items: center;
  background: var(--category-refined-row);
  padding: 0 10px;
  font-size: 11px;
  font-weight: 760;
}

.categoryMarketDataRow,
.categoryMarketSubRow,
.categoryMarketProductRow {
  min-height: 42px;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
  padding-right: 10px;
  padding-left: 10px;
  font-weight: 690;
}

.categoryMarketDataRow strong,
.categoryMarketDataRow em {
  font-weight: 780;
}

.categoryMarketSubRow:hover,
.categoryMarketProductRow:hover {
  border-color: var(--line-dark);
  background: var(--category-refined-active);
}

.categoryMarketStructureList {
  gap: 0 10px;
}

.categoryMarketStructureItem {
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
}

.categoryMarketDetailChart {
  border-radius: var(--category-refined-radius);
  background: var(--category-refined-row);
  background-image: none;
}

.categoryMarketPriceBandList article > span,
.categoryMarketPriceBandList article > span b {
  border-radius: 2px;
}

.categoryMarketPriceBandList article > span b {
  background: #57a39c;
}

.categoryMarketStructureItem.isActive {
  border-color: var(--line-dark);
  background: var(--category-refined-active);
  background-image: none;
  box-shadow: none;
}

.categoryMarketDecisionGrid,
.categoryMarketCreatorTierMini {
  gap: 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.categoryMarketDecisionCard,
.categoryMarketCreatorTierMini article {
  border: 0;
  border-right: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
  padding: 10px;
}

.categoryMarketDecisionCard:last-child,
.categoryMarketCreatorTierMini article:last-child {
  border-right: 0;
}

.categoryMarketMoveList,
.categoryMarketLiveList,
.categoryMarketCreatorList,
.categoryMarketSignalList,
.categoryMarketTimeline,
.categoryMarketPriceBandGrid {
  gap: 0;
}

.categoryMarketMoveList article,
.categoryMarketLiveList article,
.categoryMarketCreatorList article,
.categoryMarketSignalList article,
.categoryMarketTimeline article,
.categoryMarketPriceBandGrid article {
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 10px 4px;
}

.categoryMarketOperationStrip article {
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
}

.categoryMarketStructureItem b,
.categoryMarketSubRow span:has(i) {
  border-radius: 2px;
}

.categoryMarketStructureItem i,
.categoryMarketSubRow i {
  background: #57a39c;
}

.categoryMarketSignalStrip,
.categoryMarketPriceNotes {
  gap: 6px;
}

.categoryMarketSignalStrip article,
.categoryMarketPriceNotes article {
  border-radius: 3px;
  background: var(--category-refined-row);
  background-image: none;
}

.categoryMarketCarouselDots button {
  border-radius: 2px;
}

@media (max-width: 900px) {
  .categoryMarketEvidenceSplit,
  .categoryMarketContentEvidenceGrid {
    grid-template-columns: 1fr;
  }

  .categoryMarketEvidenceSplit > section + section,
  .categoryMarketContentEvidenceGrid > a + a {
    border-left: 0;
    padding-left: 0;
  }

  .categoryMarketTabs {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
    padding-right: 8px;
  }

  .categoryMarketTimeFilterGroup .categoryMarketSegment {
    border-left: 0;
    padding-left: 18px;
  }
}

@media (max-width: 760px) {
  .categoryMarketPage {
    gap: 12px;
    padding: 12px;
  }

  .categoryMarketTop {
    padding: 6px;
  }

  .categoryMarketTabs {
    width: 100%;
    justify-content: space-between;
  }

  .categoryMarketTabs button {
    flex: 1 1;
  }
}

@media (max-width: 1100px) {
  .categoryMarketBattleContext {
    position: static;
  }

  .categoryMarketBattleLayout {
    height: auto;
  }

  .categoryMarketBattleActionBoard,
  .categoryMarketBattleAside {
    max-height: none;
    overflow: visible;
    position: static;
  }

  .categoryMarketBattleActionBoard {
    padding-right: 0;
  }

  .categoryMarketBattleActionTabs {
    position: static;
  }

  .categoryMarketBattleHero {
    grid-template-columns: 1fr;
  }

  .categoryMarketBattleHeroMetrics {
    border-top: 1px solid var(--line-dark);
    border-left: 0;
    padding: 16px 0 0;
  }

  .categoryMarketBattleLayout {
    grid-template-columns: 1fr;
  }

  .categoryMarketBattleAside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .categoryMarketBattleDataNote {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .categoryMarketBattleActionTabs {
    padding: 0 4px;
  }

  .categoryMarketBattleActionTabs button {
    min-width: 76px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .categoryMarketBattleActionDetail {
    padding: 14px;
  }

  .categoryMarketBattleActionDetail .categoryMarketBattleEvidence,
  .categoryMarketBattleTutorial {
    grid-template-columns: 1fr;
  }

  .categoryMarketBattleInlineListHeader {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .categoryMarketBattleActionGrid {
    grid-template-columns: 1fr;
  }

  .categoryMarketBattleActionCard:nth-child(odd) {
    border-right: 0;
  }

  .categoryMarketBattleActionCard:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--line-dark);
  }

  .categoryMarketBattleActionCard:last-child {
    border-bottom: 0;
  }

  .categoryMarketBattleHero {
    gap: 16px;
    padding: 16px;
  }

  .categoryMarketBattleHero h2 {
    font-size: 20px;
  }

  .categoryMarketBattleHeroMetrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 14px;
  }

  .categoryMarketBattleHeroMetrics > div {
    padding: 0 8px;
  }

  .categoryMarketBattleHeroMetrics strong {
    font-size: 19px;
  }

  .categoryMarketBattleProgress {
    grid-template-columns: repeat(6, minmax(104px, 1fr));
  }

  .categoryMarketBattleSectionHeader {
    padding: 14px;
  }

  .categoryMarketBattleStageHeader {
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    gap: 9px;
    padding: 12px 14px;
  }

  .categoryMarketBattleStageHeader > em {
    grid-column: 2;
    justify-self: start;
    margin-top: -3px;
  }

  .categoryMarketBattleStageHeader > .compassIcon {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .categoryMarketBattleStageBody {
    padding: 14px;
  }

  .categoryMarketBattleStageBrief,
  .categoryMarketBattleActions,
  .categoryMarketBattleAside {
    grid-template-columns: 1fr;
  }

  .categoryMarketBattleEvidence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .categoryMarketBattleHero,
  .categoryMarketBattleStageBody {
    animation: none;
    transition: none;
  }

  .categoryMarketBattleAction {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .categoryMarketSelectionBoard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .categoryMarketSelectionGrid {
    grid-template-columns: 1fr;
  }

  .categoryMarketActionGroupList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .categoryMarketActionDecisionList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .categoryMarketSelectionBoard {
    grid-template-columns: 1fr;
  }

  .categoryMarketBattleContext {
    flex-wrap: wrap;
    gap: 5px 9px;
  }

  .categoryMarketBattleContext small {
    flex-basis: 100%;
  }

  .categoryMarketBattleContext small::before {
    display: none;
  }

  .categoryMarketSelectionIntro {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .categoryMarketSelectionGrid {
    grid-template-columns: 1fr;
  }

  .categoryMarketActionGroupList {
    grid-template-columns: 1fr;
  }

  .categoryMarketSelectionGrid.is-count-2 {
    grid-template-columns: 1fr;
  }

  .categoryMarketActionDecisionList {
    grid-template-columns: 1fr;
  }

  .categoryMarketActionDecisionMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Keep the decision-first action surface free of the legacy summary chrome. */
.categoryMarketBattleHero {
  display: none !important;
}

/* Guest preview: keep the page silhouette visible without requesting private data. */
.categoryMarketGuestPage {
  min-width: 0;
}

.categoryMarketGuestState {
  min-height: min(760px, calc(100vh - 154px));
  border-color: color-mix(in srgb, var(--line-dark) 78%, var(--primary));
  background: var(--surface-panel);
}

.categoryMarketGuestPreview {
  display: grid;
  min-width: 0;
  gap: 16px;
  padding: 18px;
}

.categoryMarketGuestPreviewToolbar,
.categoryMarketGuestPreviewMetrics,
.categoryMarketGuestPreviewGrid {
  display: grid;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-panel);
}

.categoryMarketGuestPreviewToolbar {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
}

.categoryMarketGuestPreviewTabs,
.categoryMarketGuestPreviewControls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.categoryMarketGuestPreviewTabs strong {
  color: var(--primary);
}

.categoryMarketGuestPreviewControls {
  justify-content: flex-end;
  gap: 10px;
}

.categoryMarketGuestPreviewControls span {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-canvas);
  padding: 7px 10px;
}

.categoryMarketGuestPreviewMetrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--line);
}

.categoryMarketGuestPreviewMetrics article {
  display: grid;
  gap: 6px;
  min-width: 0;
  background: var(--surface-panel);
  padding: 16px;
}

.categoryMarketGuestPreviewMetrics strong {
  color: var(--text-1);
  font-size: 22px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.categoryMarketGuestPreviewMetrics span {
  color: var(--text-3);
  font-size: 12px;
}

.categoryMarketGuestPreviewGrid {
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 1px;
  overflow: hidden;
  background: var(--line);
}

.categoryMarketGuestPreviewGrid > section {
  min-width: 0;
  background: var(--surface-panel);
  padding: 16px;
}

.categoryMarketGuestPreviewGrid header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.categoryMarketGuestPreviewGrid header strong {
  color: var(--text-1);
  font-size: 13px;
}

.categoryMarketGuestPreviewGrid header span {
  color: var(--text-3);
  font-size: 11px;
}

.categoryMarketGuestMatrix {
  position: relative;
  display: grid;
  min-height: 210px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 18px;
  align-items: center;
  justify-items: center;
  border: 1px dashed var(--line-dark);
  background: linear-gradient(90deg, transparent 49.8%, var(--line) 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, var(--line) 50%, transparent 50.2%);
}

.categoryMarketGuestMatrix i {
  width: 30px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 38%, var(--surface-panel));
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 8%, transparent);
}

.categoryMarketGuestMatrix i:nth-child(2n) {
  width: 42px;
  background: color-mix(in srgb, #f59e0b 44%, var(--surface-panel));
}

.categoryMarketGuestPreviewCards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .categoryMarketGuestPreviewToolbar,
  .categoryMarketGuestPreviewGrid {
    grid-template-columns: 1fr;
  }

  .categoryMarketGuestPreviewControls {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .categoryMarketGuestState {
    min-height: 560px;
  }

  .categoryMarketGuestPreview {
    padding: 10px;
  }

  .categoryMarketGuestPreviewMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .categoryMarketGuestPreviewCards {
    grid-template-columns: 1fr;
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/products.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Product module styles extracted with PostCSS from member commit 6eb6ee1530e3327ad01c5bd3ec48b68c03d4b997.
 * Keep product-only changes in this file; shared and legacy CSS remain controller-owned.
 */

.fastmossProductPage {
  --fm-date-control-bg: var(--surface-panel);
  --fm-filter-control-bg: var(--surface-panel);
  --fm-filter-control-hover: var(--surface-panel-hover);
  --fm-filter-panel-bg: var(--surface-panel);
  --primary-contrast: #ffffff;
  --text-4: var(--text-3);
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  gap: 10px;
}

.fmIconText {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s;
}

.fmIconText:hover {
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.fmMetric {
  min-height: 90px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.fmMetric::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--line-dark);
}

.fmMetric > span:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--primary-light);
  flex-shrink: 0;
}

.fmMetric > div {
  min-width: 0;
}

.fmMetric p {
  margin: 0 0 4px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fmMetric strong {
  display: block;
  color: var(--text-1);
  font-size: 1.3rem;
  font-weight: 800;
}

.fmMetric em {
  display: block;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  margin-top: 3px;
}

.fmBatchActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fmBatchActions > span {
  color: var(--text-3);
  font-size: 12px;
}

.fmTableScroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fmProductTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fmCreatorTable {
  table-layout: fixed;
}

.fmCreatorTable tbody td,
.fmCreatorTable thead th {
  overflow: hidden;
  text-overflow: ellipsis;
}

.fmCreatorTable thead th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  background: transparent;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line-dark);
}

.fmCreatorTable tbody td {
  padding: 18px 12px;
  font-size: 14px;
  color: var(--text-1);
  border-bottom: 1px solid var(--line-dark);
}

.fmProductTable.cuiDataListTable {
  display: grid;
  min-width: 100%;
}

.fmProductTable thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.fmProductTable thead th,
.fmProductTable .cuiDataListTableHeadCell {
  background: var(--surface-panel-strong);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 11px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-dark-strong);
}

.fmProductTable tbody td,
.fmProductTable .cuiDataListTableCell {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--text-2);
  vertical-align: middle;
}

.fmProductTable tbody tr:last-child td,
.fmProductTable .cuiDataListTableRow:last-child .cuiDataListTableCell {
  border-bottom: 0;
}

.fmProductTable tbody tr:hover,
.fmProductTable .cuiDataListTableRow:not(.cuiDataListTableHead):hover {
  background: var(--surface-dark-hover);
}

.fmCompactTable thead th,
.fmCompactTable .cuiDataListTableHeadCell {
  font-size: 11px;
  padding: 8px 10px;
}

.fmCompactTable tbody td,
.fmCompactTable .cuiDataListTableCell {
  padding: 10px;
  font-size: 12px;
}

.fmRank {
  font-weight: 800;
  color: var(--text-1);
  text-align: center;
  width: 50px;
}

.fmRankBadge {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #f4f6fb;
  color: #5d6475;
  font-size: 13px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(116, 124, 145, 0.14);
}

.fmRankBadge.gold {
  background: linear-gradient(180deg, #fff5cf, #f8c96a);
  color: #9a5b00;
}

.fmRankBadge.blue {
  background: linear-gradient(180deg, #edf5ff, #adcdfd);
  color: #275ea8;
}

.fmRankBadge.copper {
  background: linear-gradient(180deg, #fff1e8, #eab08c);
  color: #96512e;
}

.fmProductCol {
  min-width: 260px;
}

.fmProductCell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fmRankProductCell {
  gap: 14px;
}

.fmProductImage {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: var(--surface-panel-strong);
  object-fit: cover;
  flex-shrink: 0;
}

.fmRankProductCell .fmProductImage {
  width: 62px;
  height: 62px;
  border-radius: 8px;
}

.fmProductTitle {
  display: block;
  overflow: hidden;
  border-radius: 7px;
  color: var(--text-1);
  cursor: pointer;
  font-weight: 600;
  margin-left: -6px;
  padding: 2px 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  max-width: 220px;
  transition:
    background 0.15s,
    box-shadow 0.15s,
    color 0.15s,
    text-decoration-color 0.15s;
}

.fmProductTitleTooltipTarget {
  width: min(220px, 100%);
  min-width: 0;
  display: flex;
}

.fmProductTitleTooltipTarget > .cuiTooltipWrap {
  width: 100%;
  min-width: 0;
}

.fmProductTitleTooltipTarget .fmProductTitle {
  width: 100%;
  max-width: 100%;
}

.fmProductTitleTooltip.cuiTooltipContent {
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
  text-align: left;
}

.fmProductTitle:hover,
.fmProductTitle:focus-visible {
  background: color-mix(in srgb, var(--primary-light) 10%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-light) 22%, transparent);
  color: var(--primary-light);
  outline: none;
  text-decoration-color: currentColor;
}

.fmShopCell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fmShopCell img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.fmShopCell strong {
  display: block;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmShopCell span {
  display: block;
  color: var(--text-3);
  font-size: 11px;
  margin-top: 2px;
}

.fmRankCountry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 760;
  color: var(--text-1);
  white-space: nowrap;
}

.fmRankShopCell {
  gap: 12px;
}

.fmRankShopCell img {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  border: 1px solid var(--commerce-list-line);
  background: #fff;
  object-fit: cover;
}

.fmRankShopCell strong {
  display: block;
  max-width: 150px;
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmRankCategoryPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 130px;
  min-height: 28px;
  border-radius: 999px;
  background: #fff1f5;
  color: #4b2633;
  font-size: 13px;
  font-weight: 820;
  padding: 0 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmTrend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  font-size: 13px;
}

.fmTrend.up {
  color: #34d399;
}

.fmTrend.down {
  color: #f87171;
}

.fmTrend.flat {
  color: var(--text-3);
}

.fmGmvStack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.25;
  white-space: nowrap;
}

.fmGmvStack small {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
}

.fmSpark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 28px;
  width: 64px;
}

.fmSpark span {
  flex: 1 1;
  min-height: 2px;
  border-radius: 999px;
  background: var(--primary-soft);
}

.fmSpark span:nth-child(odd) {
  background: var(--primary);
}

.fmVideoThumb {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fmVideoThumb img {
  width: 48px;
  height: 64px;
  border-radius: 5px;
  object-fit: cover;
}

.fmVideoThumb > span {
  position: absolute;
  top: 4px;
  left: 4px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
}

.fmVideoThumb em {
  color: var(--text-1);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.fmRowActions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fmRowActions button,
.fmRowActions a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}

.fmRowActions button:hover,
.fmRowActions a:hover {
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.fmRowActions button.active,
.fmRowActions button.active:hover {
  color: #f87171;
}

.fmPagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line-dark);
  flex-wrap: wrap;
}

.fmPagination > span {
  color: var(--text-3);
  font-size: 12px;
}

.fmPagination select {
  height: 32px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-dark);
  color: var(--text-2);
  font-size: 12px;
  padding: 0 8px;
  cursor: pointer;
  outline: none;
}

.fmPagination button:not(.filterSelectTrigger) {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  padding: 0 8px;
  transition: all 0.15s;
}

.fmPagination button:hover:not(:disabled) {
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.fmPagination button.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.fmPagination button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cuiDialogContent:has(.fmCatalogExportDialog) {
  width: min(626px, calc(100vw - 28px));
  border-radius: 12px;
}

.cuiDialogContent:has(.fmCatalogExportDialog) .cuiDialogHeader {
  align-items: center;
  border-bottom: 0;
  padding: 22px 28px 14px;
}

.cuiDialogContent:has(.fmCatalogExportDialog) .cuiDialogTitle {
  font-size: 20px;
  font-weight: 900;
}

.cuiDialogContent:has(.fmCatalogExportDialog) .cuiDialogBody {
  padding: 0 28px 20px;
}

.cuiDialogContent:has(.fmCatalogExportDialog) .cuiDialogFooter {
  border-top: 0;
  background: transparent;
  padding: 0 28px 24px;
}

.cuiDialogContent:has(.fmCatalogExportDialog) .cuiDialogFooter .cuiButton {
  min-width: 82px;
  min-height: 40px;
  border-radius: 9px;
}

.fmCatalogExportDialog {
  display: grid;
  gap: 20px;
}

.fmCatalogExportCount {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 72%, #d8dee8);
  border-radius: 10px;
  padding: 18px 16px 16px;
}

.fmCatalogExportCountTitle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fmCatalogExportCountTitle > strong {
  color: var(--text-1, #111827);
  font-size: 16px;
  font-weight: 900;
}

.fmCatalogExportCountTitle > span:last-child {
  margin-left: auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 5%, #ffffff);
  color: var(--text-3, #667085);
  padding: 5px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.fmCatalogExportRadio {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
}

.fmCatalogExportRadio i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
}

.fmCatalogExportScopeHint,
.fmCatalogExportSummary,
.fmCatalogExportError {
  margin: 0;
  padding-left: 30px;
  font-size: 12px;
  line-height: 1.5;
}

.fmCatalogExportScopeHint,
.fmCatalogExportSummary {
  color: var(--text-3, #667085);
}

.fmCatalogExportCountInput {
  display: flex;
  align-items: center;
  padding-left: 30px;
}

.fmCatalogExportCountInput label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2, #344054);
  font-size: 14px;
  white-space: nowrap;
}

.fmCatalogExportCountInput .cuiInput {
  width: 112px;
  height: 38px;
  border-radius: 7px;
  text-align: center;
  font-weight: 800;
}

.fmCatalogExportError {
  color: #dc2626;
  font-weight: 760;
}

@media (max-width: 560px) {
  .cuiDialogContent:has(.fmCatalogExportDialog) .cuiDialogHeader,
  .cuiDialogContent:has(.fmCatalogExportDialog) .cuiDialogBody,
  .cuiDialogContent:has(.fmCatalogExportDialog) .cuiDialogFooter {
    padding-inline: 18px;
  }

  .fmCatalogExportCountTitle {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .fmCatalogExportCountTitle > span:last-child {
    width: max-content;
    margin-left: 30px;
  }

}

.fmToast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  min-width: 260px;
  max-width: 400px;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: var(--shadow-dark);
  animation: fmToastIn 0.25s ease-out;
}

.fmDetailPage {
  gap: 20px;
}

.fmDetailSection {
  scroll-margin-top: 132px;
}

.fmOverviewCard {
  border-radius: 14px;
  background: var(--surface-panel);
  border: 1px solid var(--line-dark);
  overflow: hidden;
}

.fmOverviewCardHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 20px 16px;
  border-bottom: 1px solid var(--line-dark);
}

.fmOverviewCardHead h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 22px;
  font-weight: 800;
}

.fmOverviewDateTabs {
  display: inline-flex;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  overflow: hidden;
}

.fmOverviewDateTabs button {
  padding: 5px 14px;
  border: none;
  border-right: 1px solid var(--line-dark);
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.fmOverviewDateTabs button:last-child {
  border-right: none;
}

.fmOverviewDateTabs button.active {
  background: var(--fm-accent);
  color: #fff;
}

.fmOverviewBody {
  padding: 16px;
}

.fmMarketingGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.fmDetailPage #detail-sku .fmSkuAnalysisCard {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 15px;
  background: var(--surface-panel);
  box-shadow: 0 3px 12px rgb(30 46 77 / 8%);
  padding: 22px 28px 18px;
}

.fmDetailPage #detail-sku .fmSkuAnalysisHead {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 67px;
}

.fmDetailPage #detail-sku .fmSkuAnalysisHead h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 44px;
}

.fmDetailPage #detail-sku .fmSkuDateTabs {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
}

.fmDetailPage #detail-sku .fmSkuDateTabs button {
  min-width: 105px;
  height: 44px;
  border: 0;
  border-left: 1px solid var(--line-dark);
  background: var(--surface-panel);
  color: var(--text-3);
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
}

.fmDetailPage #detail-sku .fmSkuDateTabs button:first-child {
  border-left: 0;
}

.fmDetailPage #detail-sku .fmSkuDateTabs button.active {
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 1px var(--primary);
  color: var(--primary);
}

.fmDetailPage #detail-sku .fmSkuAnalysisBody {
  display: grid;
  gap: 21px;
}

.fmDetailPage #detail-sku .fmSkuBestPanel {
  display: grid;
  grid-template-columns: minmax(460px, 0.92fr) minmax(660px, 1.08fr);
  align-items: center;
  min-height: 192px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--line-dark));
  border-radius: 12px;
  background: linear-gradient(
    112deg,
    color-mix(in srgb, var(--primary) 7%, var(--surface-panel)) 0%,
    var(--surface-panel) 49%,
    color-mix(in srgb, var(--primary) 5%, var(--surface-panel)) 100%
  );
  padding: 20px 26px 19px 29px;
}

.fmDetailPage #detail-sku .fmSkuBestProduct {
  position: relative;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: 32px;
}

.fmDetailPage #detail-sku .fmSkuRankBadge {
  position: absolute;
  top: -4px;
  left: -8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 38px;
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
  clip-path: polygon(
    50% 0,
    63% 12%,
    80% 8%,
    89% 24%,
    100% 33%,
    93% 50%,
    100% 66%,
    83% 74%,
    78% 100%,
    50% 86%,
    22% 100%,
    17% 74%,
    0 66%,
    7% 50%,
    0 33%,
    11% 24%,
    20% 8%,
    37% 12%
  );
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}

.fmDetailPage #detail-sku .fmSkuBestImage {
  display: grid;
  place-items: center;
  width: 160px;
  height: 150px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: var(--surface-panel);
}

.fmDetailPage #detail-sku .fmSkuBestImage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fmDetailPage #detail-sku .fmSkuBestCopy {
  display: grid;
  align-content: center;
  gap: 32px;
  min-width: 0;
}

.fmDetailPage #detail-sku .fmSkuBestCopy span {
  color: var(--primary);
  font-size: 20px;
  font-weight: 700;
}

.fmDetailPage #detail-sku .fmSkuBestCopy strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmDetailPage #detail-sku .fmSkuBestMetrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.fmDetailPage #detail-sku .fmSkuSummaryGauge {
  display: grid;
  grid-template-columns: 114px minmax(0, 1fr);
  align-items: center;
  gap: 25px;
  min-height: 124px;
  padding: 0 25px;
}

.fmDetailPage #detail-sku .fmSkuSummaryGauge + .fmSkuSummaryGauge {
  border-left: 1px solid var(--line-dark);
}

.fmDetailPage #detail-sku .fmSkuGaugeRing {
  display: grid;
  place-items: center;
  width: 114px;
  height: 114px;
  border-radius: 50%;
  transform: rotate(-4deg);
}

.fmDetailPage #detail-sku .fmSkuGaugeRing > span {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--surface-panel);
  color: var(--primary);
  transform: rotate(4deg);
}

.fmDetailPage #detail-sku .fmSkuSummaryGauge:last-child .fmSkuGaugeRing > span {
  color: var(--success);
}

.fmDetailPage #detail-sku .fmSkuSummaryGauge > div {
  display: grid;
  align-content: center;
  min-width: 0;
}

.fmDetailPage #detail-sku .fmSkuGaugeLabel {
  margin-bottom: 9px;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 500;
}

.fmDetailPage #detail-sku .fmSkuSummaryGauge strong {
  font-size: 50px;
  font-weight: 800;
  letter-spacing: 0.015em;
  line-height: 1;
}

.fmDetailPage #detail-sku .fmSkuSummaryGauge small {
  overflow: hidden;
  margin-top: 19px;
  color: var(--text-2);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmDetailPage #detail-sku .fmSkuRatioGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.fmDetailPage #detail-sku .fmSkuRatioCard {
  min-height: 318px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 13px;
  background: var(--surface-panel);
  padding: 16px 22px 18px;
}

.fmDetailPage #detail-sku .fmSkuRatioHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
}

.fmDetailPage #detail-sku .fmSkuRatioHead > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fmDetailPage #detail-sku .fmSkuRatioHead h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 22px;
  font-weight: 700;
}

.fmDetailPage #detail-sku .fmSkuRatioHead button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line-dark-strong);
  border-radius: 50%;
  background: var(--surface-panel);
  color: var(--text-3);
  cursor: help;
  font-size: 12px;
  font-weight: 700;
}

.fmDetailPage #detail-sku .fmSkuRatioBody {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: center;
  gap: 25px;
  min-height: 252px;
}

.fmDetailPage #detail-sku .fmSkuRatioChart {
  position: relative;
  display: grid;
  place-items: center;
  width: 244px;
  height: 244px;
  margin-left: 25px;
}

.fmDetailPage #detail-sku .fmSkuRatioCenter {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.fmDetailPage #detail-sku .fmSkuRatioCenter small {
  color: var(--text-1);
  font-size: 15px;
}

.fmDetailPage #detail-sku .fmSkuRatioCenter strong {
  margin-top: 2px;
  color: var(--text-1);
  font-size: 23px;
  font-weight: 800;
}

.fmDetailPage #detail-sku .fmSkuRatioLegend {
  display: grid;
  gap: 18px;
  align-content: center;
  min-width: 0;
}

.fmDetailPage #detail-sku .fmSkuRatioLegend > div {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  color: var(--text-1);
  font-size: 16px;
}

.fmDetailPage #detail-sku .fmSkuRatioLegend i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.fmDetailPage #detail-sku .fmSkuRatioLegend span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmDetailPage #detail-sku .fmSkuRatioLegend strong {
  font-size: 16px;
  font-weight: 500;
}

.fmDetailPage #detail-sku .fmSkuTablePanel {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 13px;
  background: var(--surface-panel);
  padding: 17px 22px 16px;
}

.fmDetailPage #detail-sku .fmSkuTablePanel h3 {
  margin: 0 0 12px;
  color: var(--text-1);
  font-size: 21px;
  font-weight: 700;
}

.fmDetailPage #detail-sku .fmSkuTableScroller {
  overflow-x: auto;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
}

.fmDetailPage #detail-sku .fmSkuInventoryTable {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--text-1);
  font-size: 16px;
}

.fmDetailPage #detail-sku .fmSkuInventoryTable th,
.fmDetailPage #detail-sku .fmSkuInventoryTable td {
  height: 50px;
  border-bottom: 1px solid var(--line-dark);
  text-align: left;
  vertical-align: middle;
  padding: 0 16px;
}

.fmDetailPage #detail-sku .fmSkuInventoryTable th {
  height: 44px;
  background: var(--surface-dark);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
}

.fmDetailPage #detail-sku .fmSkuInventoryTable th:first-child {
  width: 28%;
}

.fmDetailPage #detail-sku .fmSkuInventoryTable th:nth-child(2) {
  width: 17%;
}

.fmDetailPage #detail-sku .fmSkuInventoryTable th:nth-child(3),
.fmDetailPage #detail-sku .fmSkuInventoryTable th:nth-child(4) {
  width: 15%;
}

.fmDetailPage #detail-sku .fmSkuInventoryTable th:nth-child(5) {
  width: 16%;
}

.fmDetailPage #detail-sku .fmSkuInventoryTable th:last-child {
  width: 9%;
}

.fmDetailPage #detail-sku .fmSkuInventoryTable tbody tr:last-child td {
  border-bottom: 0;
}

.fmDetailPage #detail-sku .fmSkuInventoryTable td:first-child {
  display: flex;
  align-items: center;
  gap: 15px;
}

.fmDetailPage #detail-sku .fmSkuInventoryTable td strong {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmDetailPage #detail-sku .fmSkuTableMark {
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
}

.fmDetailPage #detail-sku .fmSkuStockStatus {
  display: inline-grid;
  place-items: center;
  min-width: 73px;
  height: 32px;
  border: 1px solid;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
}

.fmDetailPage #detail-sku .fmSkuStockStatus.enough {
  border-color: color-mix(in srgb, var(--success) 48%, var(--line-dark));
  background: color-mix(in srgb, var(--success) 9%, var(--surface-panel));
  color: var(--success);
}

.fmDetailPage #detail-sku .fmSkuStockStatus.low {
  border-color: color-mix(in srgb, var(--warning) 54%, var(--line-dark));
  background: color-mix(in srgb, var(--warning) 8%, var(--surface-panel));
  color: var(--warning);
}

.fmDetailPage #detail-creators {
  display: grid;
  gap: 14px;
}

.fmDetailPage #detail-creators .fmCreatorSectionHead {
  min-height: 41px;
}

.fmDetailPage #detail-creators .fmCreatorSectionHead h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 26px;
  font-weight: 800;
  line-height: 36px;
}

.fmDetailPage #detail-creators .fmCreatorAnalysisGrid {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
  gap: 14px;
}

.fmDetailPage #detail-creators .fmCreatorAnalysisCard {
  height: 313px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 9px;
  background: var(--surface-panel);
}

.fmDetailPage #detail-creators .fmCreatorAnalysisCardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 57px;
  padding: 17px 25px 8px;
}

.fmDetailPage #detail-creators .fmCreatorAnalysisCardHead > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.fmDetailPage #detail-creators .fmCreatorAnalysisCardHead h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 700;
}

.fmDetailPage #detail-creators .fmCreatorAnalysisCardHead button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-dark-strong);
  border-radius: 50%;
  background: var(--surface-panel);
  color: var(--text-3);
  cursor: help;
  font-size: 11px;
  font-weight: 700;
}

.fmDetailPage #detail-creators .fmCreatorFanCard .fmCreatorAnalysisCardHead {
  justify-content: flex-start;
  gap: 9px;
}

.fmDetailPage #detail-creators .fmCreatorFanBody {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: center;
  min-height: 244px;
  padding: 0 26px 13px 23px;
}

.fmDetailPage #detail-creators .fmCreatorFanChart {
  position: relative;
  display: grid;
  place-items: center;
  width: 224px;
  height: 224px;
  margin-left: 36px;
}

.fmDetailPage #detail-creators .fmCreatorFanChart > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.fmDetailPage #detail-creators .fmCreatorFanChart small {
  color: var(--text-2);
  font-size: 13px;
}

.fmDetailPage #detail-creators .fmCreatorFanChart strong {
  margin-top: 5px;
  color: var(--text-1);
  font-size: 23px;
  font-weight: 800;
}

.fmDetailPage #detail-creators .fmCreatorFanLegend {
  display: grid;
  align-content: center;
  gap: 13px;
  min-width: 0;
}

.fmDetailPage #detail-creators .fmCreatorFanLegendHead,
.fmDetailPage #detail-creators .fmCreatorFanLegendRow {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 88px 88px;
  align-items: center;
  gap: 16px;
  color: var(--text-2);
  font-size: 13px;
  text-align: right;
}

.fmDetailPage #detail-creators .fmCreatorFanLegendHead span:first-child,
.fmDetailPage #detail-creators .fmCreatorFanLegendRow > span {
  text-align: left;
}

.fmDetailPage #detail-creators .fmCreatorFanLegendHead {
  color: var(--text-3);
}

.fmDetailPage #detail-creators .fmCreatorFanLegendRow > span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmDetailPage #detail-creators .fmCreatorFanLegendRow i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.fmDetailPage #detail-creators .fmCreatorFanLegendRow strong {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}

.fmDetailPage #detail-creators .fmCreatorAnalysisDimension {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 14px;
}

.fmDetailPage #detail-creators .fmCreatorDataPanel {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: var(--surface-panel);
}

.fmDetailPage #detail-creators .fmCreatorToolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  min-height: 70px;
  padding: 15px 23px;
}

.fmDetailPage #detail-creators .fmCreatorToolbarActions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fmDetailPage #detail-creators .fmCreatorActionButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 128px;
  height: 39px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-1);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.fmDetailPage #detail-creators .fmCreatorActionButton.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.fmDetailPage #detail-creators .fmCreatorActionButton:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.fmDetailPage #detail-creators .fmCreatorTableShell {
  overflow: hidden;
  border-top: 1px solid var(--line-dark);
  background: var(--surface-panel);
}

.fmDetailPage #detail-creators .fmTableScroller {
  overflow-x: auto;
}

.fmDetailPage #detail-creators .fmDetailDataTable.cuiDataList {
  border: 0;
  border-radius: 0;
  background: var(--surface-panel);
  box-shadow: none;
}

.fmDetailPage #detail-creators .fmDetailDataTable .cuiDataListBody {
  border-radius: 0;
}

.fmDetailPage #detail-creators .fmCreatorTable {
  min-width: 1580px;
}

.fmDetailPage #detail-creators .fmCreatorTable .cuiDataListTableHeadCell,
.fmDetailPage #detail-creators .fmCreatorTable .cuiDataListTableCell {
  display: flex;
  align-items: center;
  min-height: 65px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 500;
  padding: 0 16px;
}

.fmDetailPage #detail-creators .fmCreatorTable .cuiDataListTableHeadCell {
  min-height: 44px;
  background: var(--surface-dark);
  color: var(--text-2);
  font-weight: 500;
}

.fmDetailPage #detail-creators .fmCreatorTable .cuiDataListTableHeadCell:nth-child(n + 2),
.fmDetailPage #detail-creators .fmCreatorTable .cuiDataListTableCell:nth-child(n + 2) {
  justify-content: center;
  text-align: center;
}

.fmDetailPage #detail-creators .fmCreatorTable .fmShopCell {
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.fmDetailPage #detail-creators .fmCreatorTable .fmShopCell img {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.fmDetailPage #detail-creators .fmCreatorTable .fmShopCell > div {
  display: grid;
  justify-items: start;
  min-width: 0;
}

.fmDetailPage #detail-creators .fmCreatorTable .fmShopCell a {
  max-width: 190px;
  overflow: hidden;
  color: var(--text-1);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmDetailPage #detail-creators .fmCreatorTable .fmShopCell a:hover {
  color: var(--primary);
}

.fmDetailPage #detail-creators .fmCreatorTable .fmShopCell strong {
  font-size: 14px;
  font-weight: 500;
}

.fmDetailPage #detail-creators .fmCreatorSalesCell {
  color: var(--text-1);
  font-weight: 500;
}

.fmDetailPage #detail-creators .fmCreatorSortableHead {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.fmDetailPage #detail-creators .fmCreatorSortableHead > span {
  display: grid;
  color: var(--text-3);
}

.fmDetailPage #detail-creators .fmCreatorSortableHead svg + svg {
  margin-top: -4px;
}

.fmDetailPage #detail-creators .fmCreatorVideos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.fmDetailPage #detail-creators .fmCreatorVideoThumb {
  position: relative;
  flex: 0 0 58px;
  width: 58px;
  height: 50px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface-dark);
}

.fmDetailPage #detail-creators .fmCreatorVideoThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fmDetailPage #detail-creators .fmCreatorVideoThumb em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
}

.fmDetailPage #detail-creators .fmCreatorVideoThumb em::before {
  content: '';
  position: absolute;
  width: 21px;
  height: 21px;
  border: 1px solid rgb(255 255 255 / 88%);
  border-radius: 50%;
  background: rgb(23 31 48 / 24%);
}

.fmDetailPage #detail-creators .fmCreatorVideoThumb svg {
  position: relative;
  z-index: 1;
}

.fmDetailPage #detail-creators .fmCreatorPagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 75px;
  background: var(--surface-panel);
  padding: 0 24px;
}

.fmDetailPage #detail-creators .fmCreatorPaginationTotal {
  color: var(--text-2);
  font-size: 14px;
}

.fmDetailPage #detail-creators .fmCreatorPaginationControls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fmDetailPage #detail-creators .fmCreatorPaginationControls select {
  width: 136px;
  height: 38px;
  margin-right: 14px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  outline: 0;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 14px;
  padding: 0 14px;
}

.fmDetailPage #detail-creators .fmCreatorPaginationControls button {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 5px;
  background: var(--surface-panel);
  color: var(--text-1);
  cursor: pointer;
  font-size: 14px;
  padding: 0 9px;
}

.fmDetailPage #detail-creators .fmCreatorPaginationControls button.active {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line-dark));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-panel));
  color: var(--primary);
}

.fmDetailPage #detail-creators .fmCreatorPaginationControls button:disabled {
  color: var(--text-3);
  cursor: not-allowed;
}

.fmDetailPage #detail-creators .fmCreatorPaginationControls > span {
  color: var(--text-3);
  padding: 0 3px;
}

.fmDetailPage #detail-creators .fmCreatorPaginationControls label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 17px;
  color: var(--text-2);
  font-size: 14px;
}

.fmDetailPage #detail-creators .fmCreatorPaginationControls input {
  width: 64px;
  height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 5px;
  outline: 0;
  background: var(--surface-panel);
  color: var(--text-1);
  text-align: center;
}

.fmOverviewTiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.fmOverviewTile {
  height: 100px;
  padding: 16px;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: var(--surface-panel);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.fmOverviewTile:hover {
  border-color: var(--fm-accent);
}

.fmOverviewTile.active {
  border-color: var(--fm-accent);
  background: var(--fm-accent-soft);
}

.fmOverviewTile > span {
  display: block;
  margin-top: 10px;
  color: var(--text-3);
  font-size: 13px;
}

.fmOverviewTrend {
  display: flex;
  flex-direction: column;
  background: var(--surface-panel-strong);
  border-radius: 16px;
  overflow: hidden;
}

.fmOverviewTrendHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  height: 72px;
  padding: 0 16px;
}

.fmOverviewTrendHead h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 600;
}

.fmOverviewTrendBody {
  padding: 0 16px 16px;
}

.fmDetailHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.fmBreadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 13px;
}

.fmBreadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}

.fmBreadcrumb a:hover {
  color: var(--primary-light);
}

.fmBreadcrumb > span {
  color: var(--text-2);
}

.fmDetailHero {
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(280px, 1fr);
  gap: 20px;
}

.fmGallery {
  display: grid;
  gap: 10px;
}

.fmHeroImage {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid var(--line-dark);
  background: var(--surface-panel);
  object-fit: cover;
}

.fmThumbStrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.fmThumbStrip button {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel);
  padding: 2px;
  cursor: pointer;
  transition: border-color 0.15s;
  overflow: hidden;
}

.fmThumbStrip button.active {
  border-color: var(--primary-border-strong);
}

.fmThumbStrip button img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.fmDetailInfo {
  display: grid;
  gap: 14px;
  align-content: start;
}

.fmDetailInfo h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}

.fmPanel {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  overflow: hidden;
}

.fmAiAnalysisOverlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 28px;
  background: rgba(31, 41, 59, 0.52);
}

.fmAiAnalysisDialog {
  width: 900px;
  max-height: calc(100vh - 56px);
  overflow: auto;
  border: 1px solid #e3e8f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
  color: #121a2c;
}

.fmAiAnalysisDialogHead {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 0 26px;
  border-bottom: 0;
  background: #fff;
}

.fmAiAnalysisDialogHead h2 {
  margin: 0;
  color: #121a2c;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fmAiAnalysisDialogActions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 18px;
}

.fmAiAnalysisBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid #e2ddff;
  border-radius: 8px;
  background: #faf9ff;
  color: #6657ee;
  font-size: 13px;
  font-weight: 600;
}

.fmAiAnalysisDialogActions time,
.fmAiAnalysisGenerating {
  color: #7a849a;
  font-size: 12px;
  white-space: nowrap;
}

.fmAiAnalysisClose {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #667085;
}

.fmAiAnalysisClose:hover {
  background: #f4f6fa;
  color: #121a2c;
}

.fmAiAnalysisState {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: 430px;
  padding: 48px 24px;
  color: #7a849a;
  text-align: center;
}

.fmAiAnalysisStateIcon {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  border: 1px solid #ddd8ff;
  border-radius: 15px;
  background: #f4f2ff;
  color: #6657ee;
}

.fmAiAnalysisState strong {
  color: #121a2c;
  font-size: 17px;
}

.fmAiAnalysisState p {
  max-width: 560px;
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.7;
}

.fmAiAnalysisState small {
  color: #98a2b3;
  font-size: 11px;
}

.fmAiAnalysisState.is-error .fmAiAnalysisStateIcon {
  border-color: #ffd5d5;
  background: #fff3f3;
  color: #ef4444;
}

.fmAiAnalysisStateActions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.fmAiAnalysisStreaming {
  display: grid;
  gap: 16px;
  padding: 0 26px 26px;
}

.fmAiDeepSeekStream {
  gap: 18px;
  justify-items: stretch;
  text-align: left;
}

.fmAiStreamUserPrompt {
  justify-self: end;
  max-width: min(72%, 520px);
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  background: #eef4ff;
  color: #121a2c;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.fmAiStreamAgentHeader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 4px 2px 0;
  text-align: left;
}

.fmAiStreamAgent {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fmAiStreamAgent > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.fmAiStreamAgent strong {
  color: #121a2c;
  font-size: 14px;
}

.fmAiStreamAgent small,
.fmAiStreamState {
  overflow: hidden;
  color: #98a2b3;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmAiStreamState {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid #ddd8ff;
  border-radius: 999px;
  background: #f7f5ff;
  color: #6657ee;
  font-weight: 600;
}

.fmAiReasoningPanel {
  width: min(720px, calc(100% - 40px));
  margin-left: 40px;
  text-align: left;
}

.fmAiReasoningToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #667085;
  cursor: pointer;
  text-align: left;
}

.fmAiReasoningToggle > svg:first-child {
  flex: 0 0 auto;
  color: #376df6;
}

.fmAiReasoningToggle > span {
  display: grid;
  flex: 1 1;
  gap: 2px;
  min-width: 0;
}

.fmAiReasoningToggle strong {
  color: #475467;
  font-size: 14px;
  font-weight: 600;
}

.fmAiReasoningToggle small {
  overflow: hidden;
  color: #98a2b3;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmAiReasoningToggle > svg:last-child {
  flex: 0 0 auto;
  color: #98a2b3;
  transition: transform 0.2s ease;
}

.fmAiReasoningToggle > svg:last-child.is-expanded {
  transform: rotate(180deg);
}

.fmAiReasoningContent {
  display: grid;
  gap: 12px;
  margin: 8px 0 0 8px;
  padding: 2px 0 2px 20px;
  border-left: 1px solid #e4e7ec;
}

.fmAiReasoningStep {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #98a2b3;
  text-align: left;
}

.fmAiReasoningStepDot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  margin-left: -24px;
  border-radius: 50%;
  background: #c9d0dc;
}

.fmAiReasoningStep p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  text-align: left;
}

.fmAiReasoningStep.is-active {
  color: #667085;
}

.fmAiReasoningStep.is-active .fmAiReasoningStepDot {
  background: #376df6;
  box-shadow: 0 0 0 4px #e9efff;
}

.fmAiReasoningStep.is-done {
  color: #667085;
}

.fmAiReasoningStep.is-done .fmAiReasoningStepDot {
  background: #376df6;
}

.fmAiStreamMessageRow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  text-align: left;
}

.fmAiStreamAssistantIcon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border-radius: 9px;
  background: #eeeaff;
  color: #6657ee;
}

.fmAiStreamMessage {
  min-width: 0;
  flex: 1 1;
  overflow: hidden;
  border: 1px solid #e0e5ee;
  border-radius: 5px 14px 14px 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(16 24 40 / 4%);
  text-align: left;
}

.fmAiStreamMessageHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #edf0f5;
}

.fmAiStreamMessageHead strong {
  color: #344054;
  font-size: 12px;
}

.fmAiStreamMessageHead small,
.fmAiStreamHint {
  color: #98a2b3;
  font-size: 11px;
}

.fmAiStreamMessageText {
  min-height: 66px;
  max-height: 420px;
  padding: 16px;
  overflow: auto;
  color: #344054;
  font-size: 14px;
  line-height: 1.75;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fmAiStreamMessageText > p {
  margin: 0;
  text-align: left;
}

.fmAiStreamPreviewGroup {
  margin-top: 14px;
  text-align: left;
}

.fmAiStreamPreviewGroup:first-child {
  margin-top: 0;
}

.fmAiStreamPreviewGroup > strong {
  color: #121a2c;
  font-size: 13px;
}

.fmAiStreamPreviewGroup ul {
  display: grid;
  gap: 5px;
  margin: 6px 0 0;
  padding-left: 20px;
  text-align: left;
}

.fmAiStreamRawOutput {
  margin: 0;
  color: #667085;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fmAiStreamHint {
  display: block;
  padding: 0 16px 12px;
  text-align: left;
}

.fmAiThinking {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  color: #98a2b3;
}

.fmAiThinking i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6657ee;
  animation: fmAiThinkingDot 1.2s ease-in-out infinite;
}

.fmAiThinking i:nth-child(2) {
  animation-delay: 0.16s;
}

.fmAiThinking i:nth-child(3) {
  animation-delay: 0.32s;
}

.fmAiThinking span {
  margin-left: 4px;
}

.fmAiAnalysisSteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fmAiAnalysisSteps li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid #e3e8f0;
  border-radius: 8px;
  color: #98a2b3;
  font-size: 12px;
  font-weight: 600;
}

.fmAiAnalysisSteps li i {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f2f4f7;
  color: #98a2b3;
  font-size: 11px;
  font-style: normal;
}

.fmAiAnalysisSteps li.is-active {
  border-color: #cfc8ff;
  background: #f8f7ff;
  color: #6657ee;
}

.fmAiAnalysisSteps li.is-active i {
  background: #6657ee;
  color: #fff;
  box-shadow: none;
}

.fmAiAnalysisSteps li.is-done {
  color: #344054;
}

.fmAiAnalysisSteps li.is-done i {
  background: #e8f8f3;
  color: #18ad96;
}

.fmAiStreamingStatus {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #7a849a;
  text-align: center;
}

.fmAiStreamingStatus.is-live {
  grid-template-columns: auto minmax(0, 1fr) auto;
  justify-items: start;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #e3e8f0;
  border-radius: 9px;
  background: #fafaff;
  text-align: left;
}

.fmAiStreamingStatus strong {
  color: #121a2c;
  font-size: 14px;
}

.fmAiStreamingStatus.is-live > div {
  display: grid;
  gap: 3px;
}

.fmAiStreamingStatus.is-live small {
  align-self: center;
  color: #6657ee;
  white-space: nowrap;
}

.fmAiStreamingPulse {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eeeaff;
  color: #6657ee;
  animation: fmAiStatusPulse 1.8s ease-in-out infinite;
}

.fmAiStreamTranscript {
  width: 100%;
  overflow: hidden;
  border: 1px solid #e3e8f0;
  border-radius: 9px;
  background: #101828;
}

.fmAiStreamTranscriptHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid #344054;
  color: #d0d5dd;
  font-size: 12px;
}

.fmAiStreamTranscriptHead > div {
  display: grid;
  gap: 2px;
}

.fmAiStreamTranscriptHead small {
  color: #667085;
  font-size: 10px;
}

.fmAiStreamTranscriptHead span {
  padding: 4px 8px;
  border: 1px solid #423f78;
  border-radius: 999px;
  background: #272551;
  color: #c7c2ff;
  font-weight: 700;
}

.fmAiStreamTranscript pre {
  min-height: 240px;
  max-height: 420px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  color: #d0d5dd;
  font:
    12px/1.7 ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fmAiInterruptedOutput {
  width: min(680px, 100%);
  margin-top: 4px;
  overflow: hidden;
  border: 1px solid #e3e8f0;
  border-radius: 9px;
  text-align: left;
}

.fmAiInterruptedOutput summary {
  padding: 10px 12px;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.fmAiInterruptedOutput pre {
  max-height: 180px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border-top: 1px solid #344054;
  background: #101828;
  color: #d0d5dd;
  font:
    11px/1.6 ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  white-space: pre-wrap;
}

.fmAiAnalysisBody {
  display: grid;
  gap: 18px;
  padding: 0 24px;
}

.fmAiStreamBlock {
  opacity: 0;
  transform: translateY(8px);
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 0.26s ease,
    transform 0.26s ease,
    max-height 0.32s ease;
}

.fmAiStreamBlock.is-visible {
  opacity: 1;
  transform: translateY(0);
  max-height: 1000px;
  overflow: visible;
}

.fmAiTypingCursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: #6657ee;
  animation: fmAiCursorBlink 0.82s steps(2, start) infinite;
}

.fmAiSummaryGrid,
.fmAiInsightGrid,
.fmAiSuggestionGrid {
  display: grid;
  gap: 14px;
}

.fmAiSummaryGrid {
  grid-template-columns: 252px minmax(0, 1fr) 252px;
}

.fmAiInsightGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fmAiSuggestionGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fmAiScoreCard,
.fmAiSummaryCard,
.fmAiTrendCard,
.fmAiListCard,
.fmAiSuggestionCard,
.fmAiActionList {
  border: 1px solid #dde3ec;
  border-radius: 9px;
  background: #fff;
}

.fmAiScoreCard,
.fmAiSummaryCard,
.fmAiTrendCard {
  min-height: 168px;
  padding: 17px;
}

.fmAiScoreCard h3,
.fmAiSummaryCard h3,
.fmAiTrendCard h3,
.fmAiListCard h3,
.fmAiSuggestionCard h3,
.fmAiActionList h3 {
  margin: 0;
  color: #121a2c;
  font-size: 14px;
  font-weight: 700;
}

.fmAiScoreCard {
  display: grid;
  align-content: space-between;
}

.fmAiScoreCardMain {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fmAiScoreCardMain > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fmAiScoreCard strong {
  color: #5c52e8;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.fmAiScoreCard em {
  padding: 7px 13px;
  border-radius: 999px;
  background: #e7f8f3;
  color: #18ad96;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.fmAiScoreCard p {
  margin: 0;
  color: #7a849a;
  font-size: 12px;
}

.fmAiScoreArc {
  width: 78px;
  height: 78px;
  overflow: visible;
}

.fmAiScoreArc circle {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
  transform: rotate(135deg);
  transform-origin: 50% 50%;
}

.fmAiScoreArcTrack {
  stroke: #eceef7;
  stroke-dasharray: 179 239;
}

.fmAiScoreArcValue {
  stroke: #a49cff;
}

.fmAiSummaryCard,
.fmAiTrendCard {
  display: grid;
  align-content: start;
  gap: 16px;
}

.fmAiSummaryCard p,
.fmAiTrendCard p,
.fmAiSuggestionCard p,
.fmAiActionList p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.75;
}

.fmAiSummaryCard small {
  margin-top: auto;
  color: #98a2b3;
  font-size: 10px;
}

.fmAiTrendCard {
  position: relative;
  overflow: hidden;
}

.fmAiTrendCard strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #18ad96;
  font-size: 20px;
}

.fmAiTrendSpark {
  position: absolute;
  right: 16px;
  bottom: 12px;
  left: 16px;
  width: calc(100% - 32px);
  height: 38px;
  overflow: visible;
}

.fmAiTrendSpark path {
  fill: none;
  stroke: #64cbbd;
  stroke-width: 1.6;
}

.fmAiListCard {
  position: relative;
  min-height: 154px;
  overflow: hidden;
  padding: 18px;
}

.fmAiListCard h3,
.fmAiSuggestionCard h3 {
  display: flex;
  align-items: center;
  gap: 9px;
}

.fmAiListCard h3 > span,
.fmAiSuggestionCard h3 > span {
  display: inline-grid;
  place-items: center;
  color: #6657ee;
}

.fmAiListCard::after {
  position: absolute;
  right: -10px;
  bottom: -14px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #e9f8f5;
  content: '';
  opacity: 0.9;
}

.fmAiListCard ul {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin: 15px 90px 0 0;
  padding: 0;
  color: #526078;
  font-size: 12px;
  line-height: 1.45;
  list-style: none;
}

.fmAiListCard li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
}

.fmAiSuggestionCard {
  display: flex;
  flex-direction: column;
  min-height: 162px;
  padding: 16px 15px 14px;
}

.fmAiSuggestionCard:nth-child(1) h3 > span {
  color: #3f9ee8;
}

.fmAiSuggestionCard:nth-child(2) h3 > span {
  color: #7a63f1;
}

.fmAiSuggestionCard:nth-child(3) h3 > span {
  color: #2ab9a5;
}

.fmAiSuggestionCard:nth-child(4) h3 > span {
  color: #f0a136;
}

.fmAiSuggestionCard > p {
  margin-top: 12px;
}

.fmAiSuggestionCard .fmAiSuggestionDetail {
  max-height: 34px;
  margin-top: 2px;
  overflow: hidden;
  color: #98a2b3;
  font-size: 11px;
  line-height: 1.5;
}

.fmAiSuggestionCard a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  margin-top: auto;
  color: #6657ee;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.fmAiActionList {
  display: grid;
  padding: 14px;
}

.fmAiActionList > h3 {
  padding: 0 0 12px;
}

.fmAiActionList article {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #e5e9f0;
  border-bottom: 0;
}

.fmAiActionList article:nth-of-type(1) {
  border-radius: 7px 7px 0 0;
}

.fmAiActionList article:last-child {
  border-bottom: 1px solid #e5e9f0;
  border-radius: 0 0 7px 7px;
}

.fmAiActionIndex {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #6657ee;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.fmAiActionMain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr);
  gap: 12px;
  align-items: center;
}

.fmAiActionMain > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fmAiActionMain strong {
  overflow: hidden;
  color: #344054;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmAiActionMain p {
  overflow: hidden;
  color: #98a2b3;
  font-size: 11px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmAiPriority {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  height: 23px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
}

.fmAiAnalysisFooter {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin: 0 -24px;
  padding: 20px 24px 24px;
  border-top: 1px solid #eef1f5;
  background: #fff;
}

.fmAiAnalysisFooter button {
  width: 160px;
  height: 44px;
}

.fmProductLoading {
  --fm-loader-accent: #6171ee;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--text-1);
  text-align: center;
}

.fmProductLoading.is-page {
  min-height: 100vh;
  background: var(--bg);
  padding: 32px;
}

.fmProductLoading.is-inline {
  min-height: 280px;
  background: var(--surface-panel);
  padding: 24px;
}

.fmProductLoading.is-compact {
  min-height: 190px;
  background: transparent;
  padding: 14px;
}

.fmProductLoadingCopy {
  display: grid;
  gap: 6px;
  margin-top: 0;
}

.fmProductLoadingCopy strong {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 850;
}

.fmProductLoading.is-compact .fmProductLoadingCopy {
  margin-top: 2px;
}

.fmProductLoading.is-compact .fmProductLoadingCopy strong {
  font-size: 14px;
}

/* 商品模块状态卡（暂无商品 / 加载失败等）：与页面同色，去掉底色和虚线框 */
.fastmossProductPage .cuiState {
  border: 0;
  background: transparent;
}

.fastmossProductPage .cuiStateIcon:not(.cuiStateIconLoading) {
  border-color: var(--line-dark, #e5e7eb);
  background: transparent;
  color: var(--text-3, #667085);
}

.fmListPanel .cuiStateIconLoading,
.fmProductLoading .cuiStateIconLoading {
  --fm-loader-accent: #5d6be7;
  position: relative;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 18px;
  overflow: visible;
  background: var(--surface) url('/brand/compass-ai-mark.png') center / 34px 34px no-repeat;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--text-1) 12%, transparent);
  animation: none;
  margin-bottom: 8px;
}

.fmListPanel .cuiStateIconLoading::before,
.fmProductLoading .cuiStateIconLoading::before {
  content: none;
}

.fmListPanel .cuiStateIconLoading::after,
.fmProductLoading .cuiStateIconLoading::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 3px solid var(--fm-loader-accent);
  border-right-color: #7380ff;
  border-bottom-color: #4857c1;
  border-radius: 24px;
  filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--fm-loader-accent) 16%, transparent));
  animation: fmProductLoadingOrbitSpin 1.65s linear infinite;
}

.fmProductLoading .cuiStateIconLoading {
  margin-bottom: 0;
}

.fmListPanel .cuiStateIconLoading .cuiLoadingVisualRing,
.fmProductLoading .cuiStateIconLoading .cuiLoadingVisualRing {
  display: none;
}

.fmProductLoading.is-compact .cuiStateIconLoading {
  width: 50px;
  height: 50px;
  border-radius: 16px;
}

.fmEmptyState {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-3);
}

.fmEmptyState svg {
  opacity: 0.4;
}

.fmEmptyState strong {
  color: var(--text-2);
  font-size: 14px;
}

.fmEmptyState span {
  font-size: 12px;
  max-width: 280px;
}

@media (max-width: 768px) {
  .fmPagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .fmDetailHero {
    grid-template-columns: 1fr;
  }
}

.fmPaginationSelect {
  --creator-accent: var(--primary);
  --creator-line: var(--line-dark, #e5e7eb);
  --creator-muted: var(--text-3, #667085);
  --creator-popover-bg: #ffffff;
  --creator-text: var(--text-1, #111827);
  --filter-select-bg: var(--surface-panel, #ffffff);
  --filter-select-hover-bg: color-mix(in srgb, var(--primary) 7%, #ffffff);
  flex: 0 0 124px;
  width: 124px;
  min-width: 124px;
}

/* 分页大小触发按钮：文字在左、箭头在右，不换行不裁切。
   选择器带 .fmPagination 以压过 compat 层对 .fmPagination button 的 grid/40px 方块规则。 */
.fastmossProductPage .fmPagination .fmPaginationSelect .filterSelectTrigger {
  width: 100%;
  height: 40px;
  min-height: 40px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 6px;
  border-radius: 10px;
  white-space: nowrap;
  padding: 0 10px 0 12px;
}

.fastmossProductPage .fmPagination .fmPaginationSelect .filterSelectSelectedText {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  text-align: left;
}

.fastmossProductPage .fmPagination .fmPaginationSelect .filterSelectValue {
  overflow: visible;
  white-space: nowrap;
}

.fastmossProductPage .fmPagination .fmPaginationSelect .filterSelectChevron {
  flex: 0 0 auto;
}

.fmPaginationSelectMenu {
  width: 136px;
  min-width: 136px;
  z-index: 1200;
}

.fastmossProductPage {
  --fm-accent: var(--primary);
  --fm-accent-strong: var(--primary-light);
  --fm-accent-soft: color-mix(in srgb, var(--primary) 10%, var(--surface-panel));
}

.fmCoreRankPage {
  align-content: start;
  gap: 8px;
  row-gap: 8px;
}

.fmCoreRankPage .fmListPanel {
  margin-top: 0;
  border: 1px solid #eef1f5;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(24, 32, 51, 0.05);
}

.fmVideoRankPage {
  align-content: start;
  gap: 14px;
}

.fmListPanel {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  border: 0;
  gap: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(24, 32, 51, 0.05);
  overflow: hidden;
}

.fmListPanel .cuiDataListToolbar {
  min-height: 52px;
  align-items: center;
  border-bottom-color: #eef1f5;
  background: #fff;
  padding: 10px 18px;
}

.fmCoreRankPage .fmListPanel > .cuiDataListToolbar {
  min-height: 52px;
}

.fmListPanel .fmIconText {
  min-height: 38px;
  border: 1px solid #e8edf4;
  border-radius: 12px;
  background: #fff;
  color: #364152;
  box-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
  font-size: 14px;
  font-weight: 700;
}

.fmListPanel .fmIconText:hover {
  border-color: color-mix(in srgb, var(--primary) 24%, #e8edf4);
  background: color-mix(in srgb, var(--primary) 6%, #ffffff);
  color: var(--primary);
}

.fmListPanel .fmBatchActions {
  gap: 10px;
  flex-wrap: wrap;
}

.fmListPanel .fmBatchActions > span {
  color: #98a2b3;
  font-size: 13px;
}

.fmListPanel .fmIconText {
  padding: 0 16px;
}

.fmListPanel .cuiDataListBody {
  background: #fff;
}

.fmListPanel .cuiDataListFooter {
  border-top-color: #edf0f5;
  padding: 16px 20px;
}

.fmListPanel .fmProductTable thead th {
  border-top: 1px solid #eef1f5;
  border-bottom: 1px solid #eef1f5;
  background: #fff;
  color: #667085;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  padding: 18px 18px;
}

.fmListPanel .fmProductTable tbody td {
  border-bottom-color: #edf0f5;
  padding: 18px 18px;
}

.fmListPanel .fmProductTable tbody tr:hover {
  background: #fbfdff;
}

.fmListPanel .cuiDataListFooter > .fmPagination {
  width: 100%;
  border-top: 0;
  padding: 0;
}

.commerceDataListPanel.fmListPanel .cuiDataListToolbar {
  justify-content: flex-end;
}

.commerceDataListPanel .commerceSearchTableRow {
  min-height: var(--commerce-list-row-height);
  gap: 0;
  border-bottom-color: var(--commerce-list-line);
  color: #344054;
  font-size: 14px;
  padding: 0;
}

.commerceDataListPanel .commerceSearchTableRow.head {
  min-height: var(--commerce-list-head-height);
  border-bottom: 1px solid var(--commerce-list-line);
  background: #fff;
  color: var(--commerce-list-text);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: none;
}

.commerceDataListPanel .commerceSearchTableRow > span,
.commerceDataListPanel .commerceSearchTableRow.head span,
.commerceDataListPanel .commerceSearchTableRow.head > button,
.commerceDataListPanel .commerceSearchTableRow > div {
  min-width: 0;
  padding: 0 var(--commerce-list-cell-x);
}

.commerceDataListPanel.fmListPanel .fmProductTable {
  border-collapse: collapse;
  color: var(--commerce-list-text);
  font-size: 14px;
}

.commerceDataListPanel.fmListPanel .fmProductTable thead th,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableHeadCell {
  height: var(--commerce-list-head-height);
  border-bottom: 1px solid var(--commerce-list-line);
  background: #fff;
  color: var(--commerce-list-text);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0;
  padding: 0 var(--commerce-list-cell-x);
  text-transform: none;
  vertical-align: middle;
}

.commerceDataListPanel.fmListPanel .fmProductTable tbody tr,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableRow:not(.cuiDataListTableHead) {
  height: var(--commerce-list-row-height);
}

.commerceDataListPanel.fmListPanel .fmProductTable tbody td,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableCell {
  border-bottom: 1px solid var(--commerce-list-line);
  color: #344054;
  font-size: 14px;
  line-height: 1.45;
  padding: 24px var(--commerce-list-cell-x);
  vertical-align: middle;
}

.commerceDataListPanel.fmListPanel .fmProductTable tbody tr:hover,
.commerceDataListPanel.fmListPanel
  .fmProductTable
  .cuiDataListTableRow:not(.cuiDataListTableHead):hover {
  background: #fbfdff;
}

.commerceDataListPanel.fmListPanel .fmProductCol {
  width: 320px;
  min-width: 320px;
}

.commerceDataListPanel.fmListPanel .fmProductCell {
  min-width: 0;
  gap: 18px;
}

.commerceDataListPanel.fmListPanel .fmProductImage {
  width: var(--commerce-list-media);
  height: var(--commerce-list-media);
  flex: 0 0 var(--commerce-list-media);
}

.commerceDataListPanel.fmListPanel .fmProductImage {
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(24, 32, 51, 0.08);
}

.commerceDataListPanel.fmListPanel .fmProductTitle {
  color: var(--commerce-list-text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.35;
}

.commerceDataListPanel.fmListPanel .fmProductTitle {
  max-width: 250px;
}

.commerceDataListPanel.fmListPanel .fmProductTitleTooltipTarget {
  width: min(250px, 100%);
}

.commerceDataListPanel.fmListPanel .fmProductTitle:hover,
.commerceDataListPanel.fmListPanel .fmProductTitle:focus-visible {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent);
  color: var(--primary);
  outline: none;
  text-decoration-color: currentColor;
}

.commerceDataListPanel.fmListPanel .fmShopCell span {
  margin-top: 5px;
  color: var(--commerce-list-muted);
  font-size: 12px;
  line-height: 1.4;
}

.commerceDataListPanel.fmListPanel .fmProductCell {
  align-items: center;
}

.commerceDataListPanel.fmListPanel .fmRankProductCell .fmProductImage {
  width: 62px;
  height: 62px;
  flex-basis: 62px;
  border-radius: 8px;
}

.commerceDataListPanel.fmListPanel .fmRankShopCell img {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 8px;
}

.fmVideoRankPage .commerceDataListPanel.fmListPanel {
  border: 1px solid #eef1f5;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(24, 32, 51, 0.05);
}

.fmVideoRankPage .commerceDataListPanel.fmListPanel .cuiDataListToolbar {
  min-height: 72px;
  padding: 14px 20px;
}

.commerceDataListPanel.fmListPanel .fmVideoProductCol {
  width: 380px;
  min-width: 380px;
}

.commerceDataListPanel.fmListPanel .fmVideoProductCell {
  gap: 18px;
}

.commerceDataListPanel.fmListPanel .fmVideoProductImage {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  border-radius: 8px;
}

.commerceDataListPanel.fmListPanel .fmVideoContentCol {
  justify-content: flex-start;
  text-align: left;
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableHeadCell.fmVideoContentCol,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableCell.fmVideoContentCol {
  display: flex;
  align-items: center;
}

.commerceDataListPanel.fmListPanel .fmVideoCategoryPill {
  width: fit-content;
  max-width: 150px;
  min-height: 24px;
  margin-top: 4px;
  background: #fff1f5;
  color: #6f3448;
  font-size: 12px;
  padding: 0 10px;
}

.fmVideoContentCell {
  width: 100%;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.fmVideoContentThumb {
  width: 72px;
  height: 88px;
  flex: 0 0 72px;
}

.fmVideoContentThumb img {
  width: 72px;
  height: 88px;
  border-radius: 8px;
}

.fmVideoContentMeta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: var(--commerce-list-text);
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
}

.fmVideoCreator {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fmVideoCreator img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 999px;
  object-fit: cover;
}

.fmVideoCreator strong {
  overflow: hidden;
  color: var(--commerce-list-text);
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmVideoContentMeta span,
.fmVideoContentMeta em {
  color: var(--commerce-list-muted);
  font-style: normal;
  font-weight: 650;
}

.fmVideoMetric {
  color: inherit;
  font-size: 14px;
  font-weight: 850;
}

.commerceDataListPanel.fmListPanel .fmProductInfo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.commerceDataListPanel.fmListPanel .fmProductTitleRow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.commerceDataListPanel.fmListPanel .fmProductTitleRow .fmProductTitleTooltipTarget {
  flex: 1 1 auto;
  min-width: 0;
}

.fmProductTranslateButton {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--commerce-list-muted, #98a2b3);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.fmProductTranslateButton:hover,
.fmProductTranslateButton:focus-visible {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  outline: none;
}

.fmProductTranslateButton:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}

.fmProductTranslationDialog {
  display: grid;
  gap: 18px;
}

.fmProductTranslationLanguage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-2);
  font-weight: 800;
}

.fmProductTranslationLanguage select {
  min-width: 230px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-dark-strong);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--text-1);
  font: inherit;
}

.fmProductTranslationBlock {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-panel-strong) 92%, var(--primary) 8%);
}

.fmProductTranslationBlock strong {
  color: var(--text-2);
  font-size: 13px;
}

.fmProductTranslationBlock p {
  margin: 0;
  color: var(--text-1);
  line-height: 1.55;
}

.fmProductTranslationBlock.result.success {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line-dark));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-panel-strong));
}

.fmProductTranslationBlock.result.error {
  border-color: color-mix(in srgb, #ef4444 45%, var(--line-dark));
}

.fmProductTranslationError {
  color: #dc2626 !important;
}

.commerceDataListPanel.fmListPanel .fmProductPrice {
  color: var(--commerce-list-muted);
  font-size: 12px;
  line-height: 1.3;
}

.commerceDataListPanel.fmListPanel .fmProductTags {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.commerceDataListPanel.fmListPanel .fmFlag {
  width: 20px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  flex: 0 0 20px;
}

.commerceDataListPanel.fmListPanel .fmCategoryText {
  overflow: hidden;
  color: var(--commerce-list-text);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerceDataListPanel.fmListPanel .fmRatingBadge {
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  background: rgba(245, 158, 11, 0.16);
  color: #d97706;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  flex-shrink: 0;
}

.commerceDataListPanel.fmListPanel .fmProductSub {
  display: flex;
  align-items: center;
  gap: 8px;
}

.commerceDataListPanel.fmListPanel .fmCommissionText {
  color: var(--commerce-list-muted);
  font-size: 12px;
}

.commerceDataListPanel.fmListPanel .fmSkuBadge {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--fm-accent) 30%, transparent);
  border-radius: 999px;
  background: var(--fm-accent-soft);
  color: var(--fm-accent);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  padding: 2px 9px;
  cursor: pointer;
}

.commerceDataListPanel.fmListPanel .fmShopCell {
  gap: 12px;
}

.commerceDataListPanel.fmListPanel .fmShopCell img {
  width: var(--commerce-list-secondary-media);
  height: var(--commerce-list-secondary-media);
  border-radius: 12px;
}

.commerceDataListPanel.fmListPanel .fmSpark {
  width: var(--commerce-list-chart-width);
  height: var(--commerce-list-chart-height);
}

.commerceDataListPanel.fmListPanel .fmRowActions button,
.commerceDataListPanel.fmListPanel .fmRowActions a {
  width: var(--commerce-list-action-size);
  height: var(--commerce-list-action-size);
  border: 1px solid #e8edf4;
  border-radius: 999px;
  background: #fff;
  color: var(--commerce-list-muted);
  box-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
}

.commerceDataListPanel.fmListPanel .fmRowActions button.active,
.commerceDataListPanel.fmListPanel .fmRowActions button.active:hover {
  border-color: color-mix(in srgb, #f87171 28%, #e8edf4);
  background: rgba(248, 113, 113, 0.1);
  color: #ef4444;
}

.commerceDataListPanel.fmListPanel .fmProductTable tbody td,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableCell {
  display: flex;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableRow {
  align-items: stretch;
}

.commerceDataListPanel.fmListPanel .fmProductTable tbody tr,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableRow:not(.cuiDataListTableHead) {
  height: 116px;
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableHeadCell,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableCell {
  justify-content: center;
  text-align: center;
}

.commerceDataListPanel.fmListPanel .fmProductTable .fmProductCol,
.commerceDataListPanel.fmListPanel .fmProductTable .fmShopCol {
  justify-content: flex-start;
  text-align: left;
}

.commerceDataListPanel.fmListPanel .fmProductTable .fmProductInfo {
  gap: 2px;
}

.commerceDataListPanel.fmListPanel .fmProductTable .fmProductPrice,
.commerceDataListPanel.fmListPanel .fmProductTable .fmProductTags,
.commerceDataListPanel.fmListPanel .fmProductTable .fmProductSub {
  line-height: 1.2;
}

.commerceDataListPanel.fmListPanel .fmProductTable .fmSpark {
  width: 96px;
  height: 34px;
  gap: 3px;
}

.commerceDataListPanel.fmListPanel .fmProductTable tbody td,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableCell {
  border-bottom: 0;
}

.commerceDataListPanel.fmListPanel .fmProductTable tbody tr,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableRow:not(.cuiDataListTableHead) {
  border-bottom: 1px solid var(--commerce-list-line);
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableHeadCell {
  display: flex;
  align-items: center;
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead {
  gap: 4px;
  white-space: nowrap;
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead > span {
  overflow: visible;
  white-space: nowrap;
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead > em {
  display: inline-flex;
  align-items: center;
  color: var(--commerce-list-muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1;
  transition:
    color 0.15s,
    transform 0.15s;
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead:not(:disabled):hover,
.commerceDataListPanel.fmListPanel
  .fmProductTable
  .cuiDataListSortableHead:not(:disabled):hover
  > em {
  color: var(--fm-accent);
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead.active,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead.active > em {
  color: var(--fm-accent);
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead.active.asc > em:not(:has(.cuiSortIndicator)) {
  transform: rotate(180deg);
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead.active {
  align-self: stretch;
  background: #f4f4f5;
}

.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortedCell.active {
  display: flex;
  align-items: center;
  align-self: stretch;
  background: #f7f7f8;
  color: inherit;
}

.fmVideoRankPage .commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortableHead.active,
.fmVideoRankPage
  .commerceDataListPanel.fmListPanel
  .fmProductTable
  .cuiDataListSortableHead.active
  > em {
  background: #fff;
  color: var(--commerce-list-text);
}

.fmVideoRankPage .commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListSortedCell.active {
  background: transparent;
}

.commerceDataListPanel.fmListPanel .fmProductTable thead th,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableHeadCell,
.commerceDataListPanel.fmListPanel .fmProductTable tbody td,
.commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableCell {
  padding-left: 14px;
  padding-right: 14px;
}

.fmVideoRankPage
  .commerceDataListPanel.fmListPanel
  .fmProductTable
  .cuiDataListTableHeadCell.fmVideoContentCol,
.fmVideoRankPage
  .commerceDataListPanel.fmListPanel
  .fmProductTable
  .cuiDataListTableCell.fmVideoContentCol {
  justify-content: flex-start;
  padding-left: 24px;
  padding-right: 24px;
  text-align: left;
}

.commerceDataListPanel.fmListPanel .cuiDataListFooter > .fmPagination {
  width: 100%;
  justify-content: center;
  padding: 0;
}

.commerceDataListPanel.fmListPanel .fmPagination button:not(.filterSelectTrigger) {
  width: 40px;
  height: 40px;
  border: 1px solid #e8edf4;
  border-radius: 10px;
  background: #fff;
  color: var(--commerce-list-muted);
  font-size: 14px;
}

.commerceDataListPanel.fmListPanel .fmPagination button.active {
  border-color: color-mix(in srgb, var(--primary) 34%, #e8edf4);
  background: color-mix(in srgb, var(--primary) 12%, #ffffff);
  color: var(--primary);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 10%, transparent);
}

.commerceDataListPanel.fmListPanel .fmPagination > span {
  color: var(--commerce-list-muted);
  font-size: 14px;
}

.commerceDataListPanel.fmListPanel .fmPagination .cuiPaginationActions,
.commerceDataListPanel.fmListPanel .fmPagination .cuiPaginationPages {
  display: flex;
  align-items: center;
  gap: 8px;
}

.commerceDataListPanel.fmListPanel .fmPagination .cuiPaginationActions > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 40px;
  padding: 0 14px;
  gap: 4px;
}

.commerceDataListPanel.fmListPanel .fmPaginationSelect {
  flex: 0 0 124px;
  width: 124px;
  min-width: 124px;
}

@media (max-width: 1280px) {
  .fmCoreRankPage .fmListPanel {
    margin-top: 0;
  }
}

@media (max-width: 860px) {
  .fmCoreRankPage .fmListPanel {
    margin-top: 0;
  }
}

.commerceDataListPanel.fmListPanel .fmIconText,
.commerceDataListPanel.fmListPanel .fmPagination button {
  border-color: var(--commerce-control-line);
  background: var(--commerce-control-bg);
  box-shadow: var(--commerce-control-shadow);
}

.commerceDataListPanel.fmListPanel .fmIconText:hover,
.commerceDataListPanel.fmListPanel .fmPagination button:not(:disabled):hover {
  border-color: var(--commerce-control-line-hover);
}

[data-theme='dark'] .commerceDataListPanel.fmListPanel {
  --commerce-control-line: rgba(255, 255, 255, 0.14);
  --commerce-control-line-hover: rgba(255, 255, 255, 0.26);
  --commerce-control-bg: rgba(255, 255, 255, 0.06);
  --commerce-control-shadow: none;
}

[data-theme='dark'] .fastmossProductPage {
  --fm-accent-soft: color-mix(in srgb, var(--primary) 26%, transparent);
}

[data-theme='dark'] .commerceDataListPanel .commerceSearchTableRow.head {
  background: #0f1730;
}

[data-theme='dark'] .commerceDataListPanel.fmListPanel .fmProductTable thead th,
[data-theme='dark'] .commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableHeadCell {
  background: #0f1730;
}

[data-theme='dark'] .commerceDataListPanel .commerceSearchTableRow,
[data-theme='dark'] .commerceDataListPanel.fmListPanel .fmProductTable tbody td,
[data-theme='dark'] .commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableCell {
  color: #c3cde0;
}

[data-theme='dark'] .commerceDataListPanel.fmListPanel .fmProductTable tbody tr:hover,
[data-theme='dark']
  .commerceDataListPanel.fmListPanel
  .fmProductTable
  .cuiDataListTableRow:not(.cuiDataListTableHead):hover {
  background: rgba(255, 255, 255, 0.035);
}

[data-theme='dark'] .commerceDataListPanel.fmListPanel .fmRowActions button,
[data-theme='dark'] .commerceDataListPanel.fmListPanel .fmRowActions a,
[data-theme='dark'] .commerceDataListPanel.fmListPanel .fmPagination button {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #c3cde0;
  box-shadow: none;
}

[data-theme='dark'] .commerceDataListPanel.fmListPanel .fmPagination button.active {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 28%, transparent);
  color: var(--primary-light);
}

[data-theme='dark'] .fmPaginationSelectMenu {
  border-color: rgba(255, 255, 255, 0.12);
  background: #0f1730;
  color: var(--text-1);
}

.fmDetailStickyNav {
  display: grid;
}

.fmDetailStickyNav.is-fixed {
  position: fixed;
  top: 14px;
  z-index: 930;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  overflow: visible;
  padding: 0 18px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-18px) scale(0.94);
  transform-origin: top center;
  transition:
    opacity 0.24s ease,
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fmDetailStickyNav.is-fixed.visible {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.fmSmartDetailNavStage {
  position: relative;
  width: min(1240px, calc(100% - 24px));
  min-height: 112px;
  pointer-events: auto;
  isolation: isolate;
}

.fmSmartDetailNavIsland {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 0;
  width: 100%;
  min-height: 112px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 100%, rgba(30, 198, 181, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.82);
  box-shadow:
    0 18px 50px rgba(17, 33, 49, 0.16),
    0 0 0 1px rgba(37, 190, 174, 0.12),
    0 0 28px rgba(37, 190, 174, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
          backdrop-filter: blur(22px) saturate(145%);
  padding: 8px 12px 0;
}

.fmSmartDetailNavIsland::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.58),
    transparent 40%,
    rgba(32, 183, 165, 0.08)
  );
  pointer-events: none;
}

.fmSmartDetailProduct {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-dark) 72%, transparent);
  padding: 0 4px 8px;
}

.fmSmartDetailProduct > img {
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--line-dark) 82%, transparent);
  border-radius: 10px;
  background: var(--surface-panel-strong);
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
}

.fmSmartDetailProductCopy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.fmSmartDetailProductCopy > strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmSmartDetailProductCopy > span {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmSmartDetailProductCopy > span b {
  flex: 0 0 auto;
  border-radius: 5px;
  background: color-mix(in srgb, var(--fm-accent) 11%, transparent);
  color: var(--fm-accent);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 900;
}

.fmSmartDetailProductMeta {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.fmSmartDetailProductMeta > * {
  border: 1px solid color-mix(in srgb, var(--line-dark) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-panel) 82%, transparent);
  color: var(--text-2);
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 750;
}

.fmSmartDetailProductMeta > strong {
  border-color: color-mix(in srgb, var(--fm-accent) 25%, transparent);
  background: color-mix(in srgb, var(--fm-accent) 9%, transparent);
  color: var(--fm-accent);
  font-weight: 900;
}

.fmSmartDetailProductActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fmSmartDetailProductActions button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line-dark) 78%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-panel) 74%, transparent);
  color: var(--text-2);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.fmSmartDetailProductActions button:hover,
.fmSmartDetailProductActions button:focus-visible,
.fmSmartDetailProductActions button.active {
  border-color: color-mix(in srgb, var(--fm-accent) 32%, transparent);
  background: color-mix(in srgb, var(--fm-accent) 10%, transparent);
  color: var(--fm-accent);
  transform: translateY(-1px);
}

.fmSmartDetailProductActions button:disabled {
  opacity: 0.5;
  cursor: wait;
  transform: none;
}

.fmSmartDetailNavTabs {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-height: 45px;
  overflow-x: auto;
  padding: 0 2px;
  scrollbar-width: none;
}

.fmSmartDetailNavTabs::-webkit-scrollbar {
  display: none;
}

.fmSmartDetailNavTabs button {
  position: relative;
  flex: 1 0 auto;
  min-width: 112px;
  min-height: 45px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  padding: 8px 10px 10px;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.fmSmartDetailNavTabs button:hover,
.fmSmartDetailNavTabs button:focus-visible {
  border-radius: 9px 9px 0 0;
  background: color-mix(in srgb, var(--fm-accent) 7%, transparent);
  color: var(--text-1);
}

.fmSmartDetailNavTabs button.active {
  color: var(--fm-accent);
  font-weight: 900;
}

.fmSmartDetailNavTabs button.active::after {
  content: '';
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--fm-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--fm-accent) 46%, transparent);
}

@media (max-width: 980px) {
  .fmDetailStickyNav.is-fixed {
    padding: 0 10px;
  }

  .fmSmartDetailNavStage {
    width: calc(100% - 12px);
  }

  .fmSmartDetailProductMeta {
    display: none;
  }

  .fmSmartDetailNavTabs button {
    min-width: 116px;
  }
}

@media (max-width: 700px) {
  .fmSmartDetailNavStage {
    width: 100%;
  }

  .fmSmartDetailNavIsland {
    min-height: 106px;
    border-radius: 16px;
    padding: 7px 8px 0;
  }

  .fmSmartDetailProduct {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 9px;
  }

  .fmSmartDetailProduct > img {
    width: 40px;
    height: 40px;
  }

  .fmSmartDetailProductCopy > strong {
    font-size: 13px;
  }

  .fmSmartDetailProductCopy > span {
    font-size: 10px;
  }

  .fmSmartDetailProductActions button {
    width: 32px;
    height: 32px;
  }

  .fmSmartDetailProductActions button:nth-child(2) {
    display: none;
  }

  .fmSmartDetailNavTabs button {
    min-width: 108px;
  }
}

[data-theme='dark'] .fmSmartDetailNavIsland {
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(13, 22, 42, 0.88);
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.48),
    0 0 28px color-mix(in srgb, var(--fm-accent) 16%, transparent);
}

[data-theme='dark'] .fmSmartDetailProductActions button,
[data-theme='dark'] .fmSmartDetailProductMeta > * {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

@media (prefers-reduced-motion: reduce) {
  .fmDetailStickyNav.is-fixed,
  .fmSmartDetailNavIsland *,
  .fmSmartDetailNavTabs button {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

.fmDetailPage {
  gap: 22px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-1);
  padding: 24px 30px 42px;
}

.fmDetailPage .fmDetailHeader {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0;
}

.fmDetailPage .fmBreadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-3);
  font-size: 17px;
  font-weight: 600;
}

.fmDetailPage .fmBreadcrumb a {
  color: var(--text-2);
}

.fmDetailPage .fmBreadcrumb > span {
  color: var(--text-1);
  font-weight: 800;
}

.fmDetailPage .fmBreadcrumb a:hover {
  color: var(--primary);
}

.fmDetailHeaderActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.fmDetailHeaderAction {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: var(--surface-panel);
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 0 18px;
  text-decoration: none;
}

.fmDetailHeaderAction:hover,
.fmDetailHeaderAction.active {
  border-color: var(--primary);
  color: var(--primary);
}

.fmDetailHeaderAction.primary {
  border-color: var(--primary);
  color: var(--primary);
}

.fmDetailHeaderAction:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.fmDetailPage .fmDetailHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 29.5%);
  grid-template-rows: auto auto auto auto;
  column-gap: 72px;
  row-gap: 22px;
  align-items: start;
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  background: var(--surface-panel);
  box-shadow: 0 8px 28px rgba(25, 34, 52, 0.05);
  padding: 36px 32px 20px 44px;
}

.fmDetailPage .fmGallery {
  position: relative;
  min-width: 0;
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-rows: auto auto;
  gap: 32px;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: var(--surface-panel);
  box-shadow: none;
  padding: 28px 15% 20px;
}

.fmDetailPage .fmHeroImageFrame {
  position: static;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface-dark);
}

.fmDetailPage .fmHeroImage {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
  object-fit: cover;
}

.fmDetailPage .fmHeroNav {
  position: absolute;
  top: 37.5%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(20, 30, 48, 0.08);
  border-radius: 50%;
  background: var(--surface-panel-strong);
  box-shadow: 0 6px 18px rgba(23, 31, 46, 0.16);
  color: var(--text-2);
  cursor: pointer;
  transform: translateY(-50%);
}

.fmDetailPage .fmHeroNavPrev {
  left: -22px;
}

.fmDetailPage .fmHeroNavNext {
  right: -22px;
}

.fmDetailPage .fmThumbStrip {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 0;
}

.fmDetailPage .fmThumbStrip button {
  flex: 0 0 34%;
  width: 34%;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--surface-dark);
  cursor: pointer;
  padding: 0;
}

.fmDetailPage .fmThumbStrip button.active {
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 1px rgba(109, 93, 251, 0.08);
}

.fmDetailPage .fmThumbStrip button img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.fmDetailPage .fmDetailCard {
  display: contents;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 10px 2px 2px 0;
}

.fmDetailPage .fmDetailCardTop {
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
  display: block;
  padding: 8px 0 0;
}

.fmDetailPage .fmDetailTitleWrap {
  display: grid;
  gap: 12px;
}

.fmDetailPage .fmDetailTitleWrap h1 {
  margin: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: clamp(28px, 2.25vw, 36px);
  font-weight: 850;
  line-height: 1.24;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmDetailPage .fmDetailCategory {
  display: flex;
  align-items: center;
  color: var(--text-2);
  font-size: 18px;
}

.fmDetailPage .fmDetailRating {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-3);
  font-size: 16px;
}

.fmDetailPage .fmDetailRating .fmStars {
  display: inline-flex;
  gap: 2px;
}

.fmDetailPage .fmDetailRating strong {
  color: var(--text-1);
  font-size: 18px;
}

.fmDetailPage .fmDetailRating i {
  width: 1px;
  height: 22px;
  background: var(--line-dark);
}

.fmDetailPage .fmDetailPriceBlock {
  display: flex;
  align-items: baseline;
  gap: 22px;
  margin-top: 4px;
}

.fmDetailPage .fmDetailPriceBlock strong {
  color: var(--primary);
  font-size: clamp(32px, 2.6vw, 40px);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.fmDetailPage .fmDetailPriceBlock s {
  color: var(--text-3);
  font-size: 18px;
}

.fmDetailPage .fmDetailInfoRow {
  display: contents;
}

.fmDetailPage .fmDetailFacts {
  display: contents;
}

.fmDetailPage .fmDetailInfoGrid {
  min-width: 0;
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: var(--surface-panel);
}

.fmDetailPage .fmInfoItem {
  min-width: 0;
  min-height: 98px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-right: 1px solid var(--line-dark);
  color: var(--text-2);
  padding: 16px 18px;
}

.fmDetailPage .fmInfoItem:last-child {
  border-right: 0;
}

.fmDetailPage .fmInfoItem > span {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.fmDetailPage .fmInfoItem label {
  color: var(--text-2);
  font-size: 16px;
  font-weight: 500;
}

.fmDetailPage .fmInfoItem b {
  color: var(--text-2);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.fmDetailPage .fmInfoCommission {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.fmDetailPage .fmInfoHelp {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid color-mix(in srgb, var(--text-2) 42%, var(--line-dark));
  border-radius: 50%;
  background: var(--surface-panel-strong);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--text-1) 12%, transparent);
  color: var(--text-2);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
}

.fmDetailPage .fmInfoHelp:hover,
.fmDetailPage .fmInfoHelp:focus-visible {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-panel));
  color: var(--primary);
  outline: none;
}

.fmCommissionTooltip.cuiTooltipContent {
  max-width: min(320px, calc(100vw - 32px));
  border-color: color-mix(in srgb, var(--surface-panel) 16%, transparent);
  background: var(--text-1);
  color: var(--surface-panel);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.fmDetailPage .fmDetailQuickActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.fmDetailPage .fmDetailQuickActions .cuiButton {
  min-width: 160px;
  justify-content: flex-start;
}

.fmDetailPage .fmDetailQuickActions .cuiButton > .cuiButtonIcon:last-child {
  margin-left: auto;
}

.fmDetailPage .fmDetailShop {
  min-width: 0;
  width: calc(100% + 54px);
  grid-column: 1;
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(210px, 1.15fr) minmax(360px, 2fr) auto;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: var(--surface-panel);
  color: var(--text-1);
  margin: 16px 0 0;
  padding: 14px 16px;
  text-decoration: none;
}

.fmDetailPage .fmDetailShopTop {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.fmDetailPage .fmDetailShopTop > img {
  width: 56px;
  height: 56px;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: var(--surface-panel-strong);
  object-fit: cover;
}

.fmDetailPage .fmDetailShopCopy {
  min-width: 0;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 7px;
}

.fmDetailPage .fmDetailShopTop strong {
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--text-1);
  font-size: 16px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmDetailPage .fmDetailShopBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 12%, var(--surface-panel));
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  white-space: nowrap;
}

.fmDetailPage .fmDetailShopRating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  font-size: 13px;
}

.fmDetailPage .fmDetailShopStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

.fmDetailPage .fmDetailShopStats div {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding-left: 16px;
  border-left: 1px solid var(--line-dark);
}

.fmDetailPage .fmDetailShopStats dt,
.fmDetailPage .fmDetailShopStats dd {
  margin: 0;
  font-size: 14px;
}

.fmDetailPage .fmDetailShopStats dt {
  color: var(--text-2);
}

.fmDetailPage .fmDetailShopStats dd {
  color: var(--text-1);
  font-weight: 650;
  white-space: nowrap;
}

.fmDetailPage .fmDetailShopCta {
  min-height: 42px;
  display: grid;
  place-items: center;
  min-width: 104px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  color: var(--primary);
  font-size: 15px;
  font-weight: 650;
}

.fmDetailPage .fmDetailMetrics {
  min-width: 0;
  grid-column: 1 / -1;
  grid-row: 4;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: var(--surface-panel);
}

.fmDetailPage .fmDetailMetric {
  position: relative;
  min-width: 0;
  min-height: 166px;
  display: grid;
  grid-template-rows: minmax(34px, auto) 38px auto;
  justify-items: center;
  align-items: center;
  align-content: center;
  gap: 8px;
  border-right: 1px solid var(--line-dark);
  color: var(--text-1);
  padding: 15px 10px 14px;
  text-decoration: none;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.fmDetailPage .fmDetailMetric:last-child {
  border-right: 0;
}

.fmDetailPage .fmDetailMetric:hover,
.fmDetailPage .fmDetailMetric:focus-visible {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-panel));
  color: var(--primary);
  outline: none;
}

.fmDetailPage .fmDetailMetric:focus-visible {
  box-shadow: inset 0 0 0 2px var(--primary);
}

.fmDetailPage .fmDetailMetricLabel {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  font-size: clamp(11px, 0.82vw, 14px);
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

.fmDetailPage .fmDetailMetric:nth-child(-n + 2) .fmDetailMetricLabel {
  color: var(--text-1);
  font-weight: 850;
}

.fmDetailPage .fmDetailMetricIcon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-panel));
  color: var(--primary);
}

.fmDetailPage .fmDetailMetric strong {
  min-width: 0;
  color: var(--text-1);
  font-size: clamp(20px, 1.55vw, 28px);
  font-weight: 850;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}

.fmMetricTooltip {
  max-width: 260px;
  border-color: var(--line-dark-strong);
  background: var(--overlay-bg);
  color: var(--text-1);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.fmSkuInventoryOverlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: start center;
  overflow: auto;
  background: var(--dialog-backdrop, rgba(15, 23, 42, 0.58));
  padding: 58px 20px 28px;
}

.fmPriceHistoryOverlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  background: rgba(21, 24, 32, 0.52);
  padding: 24px;
}

.fmPriceHistoryDialog {
  width: min(1200px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.fmPriceHistoryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px 8px;
}

.fmPriceHistoryHeader h2 {
  margin: 0;
  color: #202336;
  font-size: 18px;
  font-weight: 900;
}

.fmPriceHistoryHeader button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8a94a7;
  cursor: pointer;
}

.fmPriceHistoryHeader button:hover {
  background: #f5f6f8;
  color: #202336;
}

.fmPriceHistoryHeader button:focus-visible {
  outline: 2px solid #ef3e7e;
  outline-offset: 2px;
}

.fmPriceHistoryChart {
  padding: 0 24px 24px;
}

@media (max-width: 720px) {
  .fmPriceHistoryOverlay {
    padding: 12px;
  }

  .fmPriceHistoryHeader {
    padding: 18px 18px 6px;
  }

  .fmPriceHistoryChart {
    padding: 0 8px 16px;
  }
}

.fmSkuInventoryDialog {
  width: min(592px, 100%);
  min-height: 500px;
  border: 1px solid var(--line-dark-strong);
  border-radius: 10px;
  background: var(--surface-panel-strong);
  box-shadow: var(--shadow-dark);
  color: var(--text-1);
  -webkit-backdrop-filter: blur(22px) saturate(128%);
          backdrop-filter: blur(22px) saturate(128%);
  padding: 22px 24px 26px;
}

.fmSkuInventoryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.fmSkuInventoryHeader h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 17px;
  font-weight: 900;
}

.fmSkuInventoryHeader button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  padding: 0;
}

.fmSkuInventoryHeader button:hover {
  background: var(--surface-dark-hover);
  color: var(--primary-light);
}

.fmSkuInventoryHeader button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.fmSkuInventoryProduct {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 10px;
  padding: 0 18px;
}

.fmSkuInventoryProduct img,
.fmSkuInventoryImageFallback {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  background: var(--surface-dark);
  object-fit: cover;
}

.fmSkuInventoryImageFallback {
  display: grid;
  place-items: center;
  color: var(--text-3);
}

.fmSkuInventoryProduct > div {
  display: grid;
  gap: 7px;
}

.fmSkuInventoryProduct strong {
  color: var(--text-1);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
}

.fmSkuInventoryProduct span {
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
}

.fmSkuInventoryProduct .fmSkuPriceValue {
  color: var(--primary-light);
  font-size: 25px;
  font-weight: 900;
}

.fmSkuInventoryProduct .fmSkuStockValue {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 800;
}

.fmSkuInventorySpec {
  display: grid;
  gap: 8px;
  padding: 0 18px;
}

.fmSkuInventorySpec > span {
  color: var(--text-2);
  font-size: 15px;
  font-weight: 700;
}

.fmSkuInventoryOptions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
}

.fmSkuInventoryOptions button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid var(--line-dark-strong);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-2);
  cursor: pointer;
  padding: 7px 12px;
  text-align: left;
}

.fmSkuInventoryOptions button:hover {
  border-color: var(--primary-border);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-panel));
  color: var(--text-1);
}

.fmSkuInventoryOptions button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.fmSkuInventoryOptions button.active {
  border-color: var(--primary-border-strong);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-panel));
  color: var(--primary-light);
  box-shadow: 0 0 0 1px var(--focus-ring);
}

.fmSkuInventoryOptions strong {
  font-size: 14px;
  font-weight: 800;
}

.fmSkuInventoryEmpty {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 700;
}

.fmProductIntroOverlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: start center;
  overflow: auto;
  background: var(--dialog-backdrop, rgba(15, 23, 42, 0.58));
  padding: 58px 20px 28px;
}

.fmProductIntroDialog {
  width: min(760px, 100%);
  border: 1px solid var(--line-dark-strong);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  box-shadow: var(--shadow-dark);
  color: var(--text-1);
  -webkit-backdrop-filter: blur(22px) saturate(128%);
          backdrop-filter: blur(22px) saturate(128%);
  padding: 22px 28px 26px;
}

.fmProductIntroHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 16px;
}

.fmProductIntroHeader h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 22px;
  font-weight: 900;
}

.fmProductIntroHeader button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  padding: 0;
}

.fmProductIntroHeader button:hover {
  background: var(--surface-dark-hover);
  color: var(--primary-light);
}

.fmProductIntroHeader button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.fmProductIntroSection {
  display: grid;
  gap: 14px;
  padding: 24px 0;
}

.fmProductIntroSection + .fmProductIntroSection {
  border-top: 1px solid var(--line-dark);
}

.fmProductIntroSection h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 16px;
  font-weight: 900;
}

.fmProductIntroAttrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 64px;
}

.fmProductIntroAttrs div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text-3);
  font-size: 15px;
  line-height: 1.45;
}

.fmProductIntroAttrs strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmProductIntroPoints {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 12px;
}

.fmProductIntroPoints span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-panel));
  color: var(--primary-light);
  font-size: 14px;
  font-weight: 900;
  padding: 10px 20px;
}

@media (max-width: 1280px) {
  .fmDetailPage {
    padding-inline: 24px;
  }

  .fmDetailPage .fmDetailHero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 26px;
  }

  .fmDetailPage .fmDetailShop {
    width: 100%;
  }

  .fmDetailHeaderActions {
    gap: 8px;
  }

  .fmDetailHeaderAction {
    padding-inline: 12px;
  }
}

@media (max-width: 980px) {
  .fmDetailPage {
    padding: 18px;
  }

  .fmDetailPage .fmDetailHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .fmDetailHeaderActions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .fmDetailPage .fmDetailHero {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmDetailPage .fmGallery {
    width: min(100%, 520px);
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    grid-template-rows: auto auto;
  }

  .fmDetailPage .fmHeroImageFrame {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  .fmDetailPage .fmDetailCardTop {
    grid-column: 1;
    grid-row: 1;
  }

  .fmDetailPage .fmDetailInfoGrid {
    grid-column: 1;
    grid-row: 3;
  }

  .fmDetailPage .fmDetailShop {
    grid-column: 1;
    grid-row: 4;
  }

  .fmDetailPage .fmDetailMetrics {
    grid-column: 1;
    grid-row: 5;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fmDetailPage .fmDetailMetric {
    border-bottom: 1px solid var(--line-dark);
  }

  .fmDetailPage .fmDetailMetric:nth-child(3n) {
    border-right: 0;
  }

  .fmDetailPage .fmDetailMetric:nth-child(n + 4) {
    border-bottom: 0;
  }

  .fmDetailPage .fmDetailShop {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .fmDetailPage .fmDetailInfoGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmDetailPage .fmDetailMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fmDetailPage .fmDetailMetric,
  .fmDetailPage .fmDetailMetric:nth-child(3n) {
    border-right: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
  }

  .fmDetailPage .fmDetailMetric:nth-child(even) {
    border-right: 0;
  }

  .fmDetailPage .fmDetailMetric:nth-child(n + 5) {
    border-bottom: 0;
  }

  .fmDetailPage .fmDetailHero {
    padding: 14px;
  }

  .fmDetailPage .fmThumbStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 260px;
  }

  .fmDetailHeaderAction {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(50% - 8px);
  }

  .fmDetailPage .fmInfoItem:nth-child(odd),
  .fmDetailPage .fmInfoItem:nth-child(even),
  .fmDetailPage .fmInfoItem:last-child {
    grid-column: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
    padding-inline: 0;
  }

  .fmDetailPage .fmInfoItem:last-child {
    border-bottom: 0;
  }

  .fmDetailPage .fmDetailShop {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmDetailPage .fmDetailShopStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fmDetailPage .fmDetailShopCta {
    width: min(160px, 100%);
  }
}

.fmGuestDetailPage {
  --fm-guest-gallery-columns: minmax(280px, 420px) minmax(0, 1fr);
  --fm-guest-gallery-gap: 24px;
  min-width: 0;
  max-width: 100%;
}

.fmGuestDetailPage .fmDetailHero {
  min-width: 0;
  max-width: 100%;
  grid-template-columns: var(--fm-guest-gallery-columns);
  gap: var(--fm-guest-gallery-gap);
}

.fmGuestDetailPage article.fmDetailCard {
  min-width: 0;
  max-width: 100%;
}

.fmGuestDetailPage .fmGallery {
  grid-template-rows: auto;
}

.fmGuestDetailPage .fmHeroImageFrame {
  min-height: 0;
  max-height: 420px;
  aspect-ratio: 1 / 1;
}

.fmGuestDetailPage .fmDetailTitleWrap h1 {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

@media (max-width: 1280px) {
  .fastmossProductPage.fmGuestDetailPage {
    --fm-guest-gallery-columns: minmax(260px, 380px) minmax(0, 1fr);
    --fm-guest-gallery-gap: 22px;
  }
}

@media (max-width: 980px) {
  .fmDetailPage.fmGuestDetailPage {
    --fm-guest-gallery-columns: minmax(0, 1fr);
  }

  .fmDetailPage.fmGuestDetailPage .fmHeroImageFrame {
    width: min(100%, 420px);
    margin-inline: auto;
  }
}

.fmDetailPage #detail-overview {
  min-width: 0;
  max-width: 100%;
}

.fmDetailPage #detail-overview .fmOverviewCard {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 15px;
  background: var(--surface-panel);
  box-shadow: 0 8px 28px rgba(25, 34, 52, 0.05);
  overflow: hidden;
  padding: 20px 22px 22px;
}

.fmDetailPage #detail-overview .fmOverviewCardHead {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 0;
  padding: 0 0 16px;
}

.fmDetailPage #detail-overview .fmOverviewHeadMain,
.fmDetailPage #detail-overview .fmOverviewTrendHeading,
.fmDetailPage #detail-overview .fmOverviewTrendLegend {
  display: flex;
  align-items: center;
}

.fmDetailPage #detail-overview .fmOverviewHeadMain {
  gap: 30px;
  min-width: 0;
}

.fmDetailPage #detail-overview .fmOverviewCardHead h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 25px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.fmDetailPage #detail-overview .fmOverviewDateTabs {
  height: 40px;
  display: inline-flex;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-dark);
  overflow: hidden;
}

.fmDetailPage #detail-overview .fmOverviewDateTabs button {
  min-width: 82px;
  height: 38px;
  border: 0;
  border-right: 1px solid var(--line-dark);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  padding: 0 17px;
}

.fmDetailPage #detail-overview .fmOverviewDateTabs button:last-child {
  border-right: 0;
}

.fmDetailPage #detail-overview .fmOverviewDateTabs button.active {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary) 10%, var(--surface-panel)),
    color-mix(in srgb, var(--primary) 17%, var(--surface-panel))
  );
  color: var(--primary);
  font-weight: 700;
  box-shadow: none;
}

.fmDetailPage #detail-overview .fmOverviewHeaderButton {
  min-width: 126px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-1);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  padding: 0 18px;
  text-decoration: none;
}

.fmDetailPage #detail-overview .fmOverviewHeaderButton.primary {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  box-shadow: 0 6px 14px rgba(97, 84, 243, 0.2);
  color: #fff;
}

.fmDetailPage #detail-overview .fmOverviewBody {
  display: grid;
  gap: 22px;
  min-width: 0;
  padding: 0;
}

.fmDetailPage #detail-overview .fmMarketingGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  scroll-margin-top: 90px;
}

.fmDetailPage #detail-overview .fmOverviewRatioCard {
  min-width: 0;
  height: 268px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: var(--surface-panel);
  box-shadow: 0 3px 10px rgba(25, 34, 52, 0.04);
  overflow: hidden;
  padding: 20px 18px 16px;
}

.fmDetailPage #detail-overview .fmOverviewRatioHead {
  display: flex;
  align-items: center;
  gap: 9px;
}

.fmDetailPage #detail-overview .fmOverviewRatioHead h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.fmDetailPage #detail-overview .fmOverviewRatioHead button {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  cursor: help;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
}

.fmDetailPage #detail-overview .fmOverviewRatioBody {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  height: 205px;
}

.fmDetailPage #detail-overview .fmOverviewRatioChart {
  position: relative;
  width: 176px;
  height: 176px;
  display: grid;
  place-items: center;
  margin-left: 14px;
}

.fmDetailPage #detail-overview .fmOverviewRatioChart > span {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  color: var(--primary);
  transform: translate(-50%, -50%);
}

.fmDetailPage #detail-overview .fmOverviewRatioLegend {
  min-width: 0;
  display: grid;
  gap: 13px;
}

.fmDetailPage #detail-overview .fmOverviewRatioLegend > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--text-2);
  font-size: 14px;
}

.fmDetailPage #detail-overview .fmOverviewRatioLegend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.fmDetailPage #detail-overview .fmOverviewRatioLegend span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmDetailPage #detail-overview .fmOverviewRatioLegend strong {
  color: var(--text-1);
  font-weight: 650;
}

.fmDetailPage #detail-overview .fmOverviewTiles {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

.fmDetailPage #detail-overview .fmOverviewTile {
  position: relative;
  min-width: 0;
  height: 132px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 9px;
  background: var(--surface-panel);
  color: var(--text-1);
  cursor: pointer;
  padding: 18px 16px 14px;
  text-align: left;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.fmDetailPage #detail-overview .fmOverviewTile:hover,
.fmDetailPage #detail-overview .fmOverviewTile.active {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(97, 84, 243, 0.08);
}

.fmDetailPage #detail-overview .fmOverviewTileCheck {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  display: none;
  background: var(--primary);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.fmDetailPage #detail-overview .fmOverviewTile.active .fmOverviewTileCheck {
  display: block;
}

.fmDetailPage #detail-overview .fmOverviewTile.active .fmOverviewTileCheck::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 5px;
  width: 8px;
  height: 4px;
  border-bottom: 1.5px solid #fff;
  border-left: 1.5px solid #fff;
  transform: rotate(-45deg);
}

.fmDetailPage #detail-overview .fmOverviewTileLabel {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 650;
}

.fmDetailPage #detail-overview .fmOverviewTileLabel > i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  border-radius: 50%;
  color: #fff;
  font-style: normal;
}

.fmDetailPage #detail-overview .fmOverviewTileLabel > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmDetailPage #detail-overview .fmOverviewTileValue {
  display: block;
  overflow: hidden;
  margin-top: 22px;
  color: var(--text-1);
  font-size: clamp(21px, 1.75vw, 28px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmDetailPage #detail-overview .fmOverviewChartGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(360px, 1fr);
  gap: 18px;
}

.fmDetailPage #detail-overview .fmOverviewTrend,
.fmDetailPage #detail-overview .fmOverviewPricePanel {
  min-width: 0;
  min-height: 382px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: var(--surface-panel);
  box-shadow: 0 3px 10px rgba(25, 34, 52, 0.035);
  overflow: hidden;
}

.fmDetailPage #detail-overview .fmOverviewTrendHead {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 0;
  padding: 14px 18px 8px;
}

.fmDetailPage #detail-overview .fmOverviewTrendHeading {
  min-width: 0;
  gap: 30px;
}

.fmDetailPage #detail-overview .fmOverviewTrendHead h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 19px;
  font-weight: 850;
  line-height: 1.25;
  white-space: nowrap;
}

.fmDetailPage #detail-overview .fmOverviewTrendLegend {
  min-width: 0;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.fmDetailPage #detail-overview .fmOverviewTrendLegend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.fmDetailPage #detail-overview .fmOverviewTrendLegend i {
  width: 16px;
  height: 5px;
  border-radius: 999px;
}

.fmDetailPage #detail-overview .fmOverviewTrendBody {
  min-width: 0;
  height: 310px;
  padding: 0 10px 6px;
}

.fmDetailPage #detail-overview .fmOverviewTrendBody .echarts-for-react {
  width: 100%;
}

.fmDetailPage #detail-overview .fmOverviewTrendDataList.cuiDataList {
  height: 292px;
  border: 0;
  border-radius: 0;
  background: var(--surface-panel);
  box-shadow: none;
  overflow: hidden;
}

.fmDetailPage #detail-overview .fmOverviewTrendTableScroller {
  height: 100%;
  overflow: auto;
}

.fmDetailPage #detail-overview .fmOverviewTrendTable .cuiDataListTableHeadCell,
.fmDetailPage #detail-overview .fmOverviewTrendTable .cuiDataListTableCell {
  min-height: 54px;
  justify-content: center;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.fmDetailPage #detail-overview .fmOverviewTrendTable .cuiDataListTableRow {
  border-bottom: 1px solid var(--line-dark);
}

@media (max-width: 1280px) {
  .fmDetailPage #detail-overview .fmMarketingGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmDetailPage #detail-overview .fmOverviewTiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .fmDetailPage #detail-overview .fmOverviewChartGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .fmDetailPage #detail-overview .fmOverviewCardHead,
  .fmDetailPage #detail-overview .fmOverviewHeadMain,
  .fmDetailPage #detail-overview .fmOverviewTrendHead,
  .fmDetailPage #detail-overview .fmOverviewTrendHeading {
    align-items: flex-start;
    flex-direction: column;
  }

  .fmDetailPage #detail-overview .fmOverviewDateTabs {
    width: 100%;
  }

  .fmDetailPage #detail-overview .fmOverviewHeaderButton,
  .fmDetailPage #detail-overview .fmOverviewDateTabs button {
    flex: 1 1;
    min-width: 0;
  }

  .fmDetailPage #detail-overview .fmOverviewRatioBody {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .fmDetailPage #detail-overview .fmOverviewRatioCard {
    height: auto;
  }

  .fmDetailPage #detail-overview .fmOverviewRatioChart {
    margin-inline: auto;
  }

  .fmDetailPage #detail-overview .fmOverviewTiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .fmDetailPage #detail-overview .fmOverviewTiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fmDetailPage #detail-ads .fmAdAnalysisCard {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 15px;
  background: var(--surface-panel);
  box-shadow: 0 3px 12px rgb(30 46 77 / 7%);
  padding: 24px 28px 29px;
}

.fmDetailPage #detail-ads .fmAdAnalysisHead {
  display: flex;
  align-items: center;
  gap: 38px;
  min-height: 63px;
}

.fmDetailPage #detail-ads .fmAdAnalysisHead h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 28px;
  font-weight: 800;
}

.fmDetailPage #detail-ads .fmAdDateTabs,
.fmDetailPage #detail-videos .fmRelatedVideoDateTabs,
.fmDetailPage #detail-lives .fmRelatedLiveDateTabs {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
}

.fmDetailPage #detail-ads .fmAdDateTabs button,
.fmDetailPage #detail-videos .fmRelatedVideoDateTabs button,
.fmDetailPage #detail-lives .fmRelatedLiveDateTabs button {
  min-width: 100px;
  height: 44px;
  border: 0;
  border-left: 1px solid var(--line-dark);
  background: var(--surface-panel);
  color: var(--text-2);
  cursor: pointer;
  font-size: 16px;
  padding: 0 20px;
}

.fmDetailPage #detail-ads .fmAdDateTabs button:first-child,
.fmDetailPage #detail-videos .fmRelatedVideoDateTabs button:first-child,
.fmDetailPage #detail-lives .fmRelatedLiveDateTabs button:first-child {
  border-left: 0;
}

.fmDetailPage #detail-ads .fmAdDateTabs button.active {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-panel));
  color: var(--primary);
  font-weight: 600;
}

.fmDetailPage #detail-ads .fmAdAnalysisBody {
  display: grid;
  gap: 18px;
}

.fmDetailPage #detail-ads .fmAdMetricTiles {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
}

.fmDetailPage #detail-ads .fmAdMetricTile {
  position: relative;
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 146px;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: var(--surface-panel);
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  padding: 17px 19px;
  text-align: left;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.fmDetailPage #detail-ads .fmAdMetricTile:hover,
.fmDetailPage #detail-ads .fmAdMetricTile.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.fmDetailPage #detail-ads .fmAdMetricCheck {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  display: none;
  background: var(--primary);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.fmDetailPage #detail-ads .fmAdMetricTile.active .fmAdMetricCheck {
  display: block;
}

.fmDetailPage #detail-ads .fmAdMetricTile.active .fmAdMetricCheck::after {
  position: absolute;
  top: 6px;
  right: 5px;
  width: 8px;
  height: 4px;
  border-bottom: 1.5px solid #fff;
  border-left: 1.5px solid #fff;
  content: '';
  transform: rotate(-45deg);
}

.fmDetailPage #detail-ads .fmAdMetricLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 600;
}

.fmDetailPage #detail-ads .fmAdMetricInfo {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-dark-strong);
  border-radius: 50%;
  color: var(--text-3);
  font-size: 10px;
}

.fmDetailPage #detail-ads .fmAdMetricValue {
  overflow: hidden;
  margin-top: 13px;
  color: var(--text-1);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmDetailPage #detail-ads .fmAdMetricTile.active .fmAdMetricValue {
  color: var(--primary);
}

.fmDetailPage #detail-ads .fmAdMetricChange {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  color: var(--text-3);
  font-size: 12px;
  white-space: nowrap;
}

.fmDetailPage #detail-ads .fmAdMetricChange b {
  font-weight: 500;
}

.fmDetailPage #detail-ads .fmAdMetricChange b.positive {
  color: var(--success);
}

.fmDetailPage #detail-ads .fmAdMetricChange b.negative {
  color: var(--danger);
}

.fmDetailPage #detail-ads .fmAdTrend {
  overflow: hidden;
  min-height: 292px;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: var(--surface-panel);
}

.fmDetailPage #detail-ads .fmAdMaterialHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  margin-top: -1px;
}

.fmDetailPage #detail-ads .fmAdMaterialHead h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
  font-weight: 700;
}

.fmDetailPage #detail-ads .fmAdMaterialHead button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
}

.fmDetailPage #detail-ads .fmAdMaterialHead button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.fmDetailPage #detail-ads .fmAdMaterialStrip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.fmDetailPage #detail-ads .fmAdMaterialCard {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: var(--surface-panel);
  color: inherit;
  text-decoration: none;
}

.fmDetailPage #detail-ads .fmAdMaterialThumb {
  position: relative;
  height: 154px;
  overflow: hidden;
  background: var(--surface-dark);
}

.fmDetailPage #detail-ads .fmAdMaterialThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fmDetailPage #detail-ads .fmAdMaterialPlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgb(15 23 42 / 56%);
  color: #fff;
}

.fmDetailPage #detail-ads .fmAdMaterialCopy {
  display: grid;
  gap: 9px;
  padding: 11px 12px 12px;
}

.fmDetailPage #detail-ads .fmAdMaterialCopy > strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmDetailPage #detail-ads .fmAdMaterialStats,
.fmDetailPage #detail-ads .fmAdMaterialMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.fmDetailPage #detail-ads .fmAdMaterialStats span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-2);
  font-size: 12px;
}

.fmDetailPage #detail-ads .fmAdMaterialStats em {
  font-style: normal;
}

.fmDetailPage #detail-ads .fmAdMaterialStats b {
  color: var(--text-1);
  font-weight: 500;
}

.fmDetailPage #detail-ads .fmAdMaterialStats span:last-child b {
  color: var(--success);
}

.fmDetailPage #detail-ads .fmAdMaterialMeta {
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
}

.fmDetailPage #detail-ads .fmAdMaterialMeta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmDetailPage #detail-videos .fmRelatedVideoCard,
.fmDetailPage #detail-lives .fmRelatedLiveCard,
.fmDetailPage #detail-reviews .fmReviewCard,
.fmDetailPage #detail-similar .fmSimilarCard {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 15px;
  background: var(--surface-panel);
  box-shadow: 0 3px 12px rgb(30 46 77 / 7%);
}

.fmDetailPage #detail-videos .fmRelatedVideoHead,
.fmDetailPage #detail-lives .fmRelatedLiveHead,
.fmDetailPage #detail-reviews .fmReviewCardHead {
  min-height: 72px;
  padding: 25px 27px 10px;
}

.fmDetailPage #detail-videos .fmRelatedVideoHead h2,
.fmDetailPage #detail-lives .fmRelatedLiveHead h2,
.fmDetailPage #detail-reviews .fmReviewCardHead h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 27px;
  font-weight: 800;
}

.fmDetailPage #detail-videos .fmRelatedVideoDateTabs {
  margin: 0 27px 18px;
}

.fmDetailPage #detail-videos .fmRelatedVideoDateTabs button,
.fmDetailPage #detail-lives .fmRelatedLiveDateTabs button {
  min-width: 108px;
}

.fmDetailPage #detail-videos .fmRelatedVideoDateTabs button.active,
.fmDetailPage #detail-lives .fmRelatedLiveDateTabs button.active {
  background: var(--primary);
  color: #fff;
}

.fmDetailPage #detail-videos .fmRelatedVideoBody {
  padding: 0 27px 27px;
}

.fmDetailPage #detail-videos .fmRelatedVideoFilters {
  display: flex;
  align-items: center;
  gap: 38px;
  min-height: 85px;
  margin-bottom: 20px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: var(--surface-panel);
  padding: 16px;
}

.fmDetailPage #detail-videos .fmRelatedVideoSegment {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
}

.fmDetailPage #detail-videos .fmRelatedVideoSegment button {
  min-width: 100px;
  height: 44px;
  border: 0;
  border-left: 1px solid var(--line-dark);
  background: var(--surface-panel);
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
}

.fmDetailPage #detail-videos .fmRelatedVideoSegment button:first-child {
  border-left: 0;
}

.fmDetailPage #detail-videos .fmRelatedVideoSegment button.active {
  box-shadow: inset 0 0 0 1px var(--primary);
  color: var(--primary);
  font-weight: 600;
}

.fmDetailPage #detail-videos .fmRelatedVideoPeriodDisplay {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 220px;
  height: 44px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  color: var(--text-3);
  font-size: 14px;
  padding: 0 16px;
}

.fmDetailPage #detail-videos .fmRelatedVideoToolbar {
  margin-left: auto;
}

.fmDetailPage #detail-videos .fmRelatedVideoToolbar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-1);
  cursor: pointer;
  font-size: 14px;
  padding: 0 18px;
}

.fmDetailPage #detail-videos .fmRelatedVideoTableShell,
.fmDetailPage #detail-lives .fmRelatedLiveTableShell {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: var(--surface-panel);
}

.fmDetailPage #detail-videos .fmDetailDataTable.cuiDataList,
.fmDetailPage #detail-lives .fmDetailDataTable.cuiDataList {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.fmDetailPage #detail-videos .fmTableScroller,
.fmDetailPage #detail-lives .fmTableScroller {
  overflow-x: auto;
}

.fmDetailPage #detail-videos .fmRelatedVideoTable {
  min-width: 1560px;
}

.fmDetailPage #detail-videos .fmRelatedVideoTable .cuiDataListTableHeadCell,
.fmDetailPage #detail-videos .fmRelatedVideoTable .cuiDataListTableCell,
.fmDetailPage #detail-lives .fmRelatedLiveTable .cuiDataListTableHeadCell,
.fmDetailPage #detail-lives .fmRelatedLiveTable .cuiDataListTableCell {
  display: flex;
  align-items: center;
  min-height: 112px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--text-2);
  font-size: 14px;
  padding: 0 16px;
}

.fmDetailPage #detail-videos .fmRelatedVideoTable .cuiDataListTableHeadCell,
.fmDetailPage #detail-lives .fmRelatedLiveTable .cuiDataListTableHeadCell {
  min-height: 58px;
  background: var(--surface-dark);
  color: var(--text-1);
  font-weight: 600;
}

.fmDetailPage #detail-videos .fmRelatedVideoTable .cuiDataListTableHeadCell:nth-child(n + 2),
.fmDetailPage #detail-videos .fmRelatedVideoTable .cuiDataListTableCell:nth-child(n + 2),
.fmDetailPage #detail-lives .fmRelatedLiveTable .cuiDataListTableHeadCell:nth-child(n + 2),
.fmDetailPage #detail-lives .fmRelatedLiveTable .cuiDataListTableCell:nth-child(n + 2) {
  justify-content: center;
  text-align: center;
}

.fmDetailPage #detail-videos .fmRelatedVideoInfo,
.fmDetailPage #detail-lives .fmRelatedLiveInfo {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.fmDetailPage #detail-videos .fmRelatedVideoCover {
  position: relative;
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-dark);
}

.fmDetailPage #detail-videos .fmRelatedVideoCover img,
.fmDetailPage #detail-lives .fmRelatedLiveCover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fmDetailPage #detail-videos .fmRelatedVideoCover > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(255 255 255 / 90%);
  border-radius: 50%;
  background: rgb(20 29 47 / 48%);
  color: #fff;
}

.fmDetailPage #detail-videos .fmRelatedVideoCopy,
.fmDetailPage #detail-lives .fmRelatedLiveCopy {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.fmDetailPage #detail-videos .fmRelatedVideoTitleLine {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fmDetailPage #detail-videos .fmRelatedVideoTitleLine > strong,
.fmDetailPage #detail-lives .fmRelatedLiveCopy > strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmDetailPage #detail-videos .fmRelatedVideoStatus {
  flex: 0 0 auto;
  min-height: 23px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 7px;
}

.fmDetailPage #detail-videos .fmRelatedVideoStatus.paid {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line-dark));
  color: var(--primary);
}

.fmDetailPage #detail-videos .fmRelatedVideoStatus.organic {
  border-color: color-mix(in srgb, var(--warning) 48%, var(--line-dark));
  color: var(--warning);
}

.fmDetailPage #detail-videos .fmRelatedVideoCreator,
.fmDetailPage #detail-lives .fmRelatedLiveCreator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 12px;
}

.fmDetailPage #detail-videos .fmRelatedVideoCreator img,
.fmDetailPage #detail-lives .fmRelatedLiveCreator img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

.fmDetailPage #detail-videos .fmRelatedVideoStrong,
.fmDetailPage #detail-lives .fmRelatedLiveStrong {
  color: var(--text-1);
  font-weight: 700;
}

.fmDetailPage #detail-videos .fmRelatedVideoTable .cuiDataListTableCell:nth-child(10) {
  color: var(--success);
}

.fmDetailPage #detail-videos .fmRelatedVideoDate,
.fmDetailPage #detail-lives .fmRelatedLiveDate {
  white-space: nowrap;
}

.fmDetailPage #detail-videos .fmRelatedVideoActions button,
.fmDetailPage #detail-lives .fmRelatedVideoActions button {
  border: 0;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  font-size: 14px;
}

.fmDetailPage #detail-lives .fmRelatedLiveControls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 27px 22px;
}

.fmDetailPage #detail-lives .fmRelatedLiveDatePicker {
  min-width: 280px;
}

.fmDetailPage #detail-lives .fmRelatedLiveBody {
  display: grid;
  gap: 24px;
  padding: 0 27px 27px;
}

.fmDetailPage #detail-lives .fmLiveSummaryCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.fmDetailPage #detail-lives .fmLiveSummaryCard {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 142px;
  border: 1px solid var(--line-dark);
  border-radius: 11px;
  background: var(--surface-panel);
  padding: 22px 28px;
}

.fmDetailPage #detail-lives .fmLiveSummaryCard > span {
  display: grid;
  place-items: center;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  color: #fff;
}

.fmDetailPage #detail-lives .fmLiveSummaryCard.purple > span {
  background: linear-gradient(145deg, var(--primary-light), var(--primary));
}

.fmDetailPage #detail-lives .fmLiveSummaryCard.teal > span {
  background: linear-gradient(145deg, #45d6c5, #08aa9c);
}

.fmDetailPage #detail-lives .fmLiveSummaryCard.orange > span {
  background: linear-gradient(145deg, #ffbd4d, #ff8a00);
}

.fmDetailPage #detail-lives .fmLiveSummaryCard > div {
  display: grid;
  gap: 7px;
}

.fmDetailPage #detail-lives .fmLiveSummaryCard small {
  color: var(--text-1);
  font-size: 15px;
}

.fmDetailPage #detail-lives .fmLiveSummaryCard strong {
  color: var(--text-1);
  font-size: 25px;
  font-weight: 700;
}

.fmDetailPage #detail-lives .fmLiveSummaryCard em {
  color: var(--success);
  font-size: 12px;
  font-style: normal;
}

.fmDetailPage #detail-lives .fmRelatedLiveTable {
  min-width: 1420px;
}

.fmDetailPage #detail-lives .fmRelatedLiveCover {
  flex: 0 0 105px;
  width: 105px;
  height: 80px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--surface-dark);
}

.fmDetailPage .fmReplicaPagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 76px;
  background: var(--surface-panel);
  padding: 0 22px;
}

.fmDetailPage .fmReplicaPaginationTotal {
  color: var(--text-2);
  font-size: 14px;
}

.fmDetailPage .fmReplicaPaginationControls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fmDetailPage .fmReplicaPaginationControls button {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 5px;
  background: var(--surface-panel);
  color: var(--text-1);
  cursor: pointer;
  font-size: 14px;
  padding: 0 9px;
}

.fmDetailPage .fmReplicaPaginationControls button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.fmDetailPage .fmReplicaPaginationControls button:disabled {
  color: var(--text-3);
  cursor: not-allowed;
}

.fmDetailPage .fmReplicaPaginationControls > span {
  color: var(--text-3);
  padding: 0 3px;
}

.fmDetailPage .fmReplicaPaginationControls select {
  min-width: 118px;
  height: 36px;
  margin-left: 14px;
  border: 1px solid var(--line-dark);
  border-radius: 5px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 14px;
  padding: 0 12px;
}

.fmDetailPage .fmReplicaPaginationControls label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: 13px;
  color: var(--text-2);
  font-size: 14px;
}

.fmDetailPage .fmReplicaPaginationControls input {
  width: 61px;
  height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 5px;
  background: var(--surface-panel);
  color: var(--text-1);
  text-align: center;
}

.fmDetailPage #detail-reviews .fmReviewCard {
  padding: 25px 28px 29px;
}

.fmDetailPage #detail-reviews .fmReviewCardHead {
  min-height: 61px;
  padding: 0 0 18px;
}

.fmDetailPage #detail-reviews .fmReviewBody {
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
}

.fmDetailPage #detail-reviews .fmReviewSummaryPanel {
  min-height: 0;
  border: 1px solid var(--line-dark);
  border-radius: 11px;
  background: var(--surface-panel);
  padding: 38px 25px;
}

.fmDetailPage #detail-reviews .fmReviewSummaryScore {
  display: flex;
  align-items: baseline;
  gap: 15px;
}

.fmDetailPage #detail-reviews .fmReviewSummaryScore strong {
  color: var(--text-1);
  font-size: 78px;
  font-weight: 800;
  line-height: 1;
}

.fmDetailPage #detail-reviews .fmReviewSummaryScore span {
  color: var(--text-3);
  font-size: 29px;
}

.fmDetailPage #detail-reviews .fmReviewSummaryStars {
  display: flex;
  gap: 6px;
  margin-top: 26px;
}

.fmDetailPage #detail-reviews .fmReviewSummaryPanel > b {
  display: block;
  margin-top: 38px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--text-1);
  font-size: 20px;
  font-weight: 600;
}

.fmDetailPage #detail-reviews .fmReviewPositiveRate {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

.fmDetailPage #detail-reviews .fmReviewPositiveRate > span {
  color: var(--text-1);
  font-size: 16px;
}

.fmDetailPage #detail-reviews .fmReviewPositiveRate strong {
  margin-left: 8px;
  color: var(--success);
  font-size: 27px;
}

.fmDetailPage #detail-reviews .fmReviewPositiveRate > i {
  height: 16px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-dark);
}

.fmDetailPage #detail-reviews .fmReviewPositiveRate > i > em {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--success);
}

.fmDetailPage #detail-reviews .fmReviewContent {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.fmDetailPage #detail-reviews .fmReviewFilters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 122px;
  border: 1px solid var(--line-dark);
  border-radius: 11px;
  background: var(--surface-panel);
  padding: 25px 32px;
}

.fmDetailPage #detail-reviews .fmReviewFilterRow {
  display: flex;
  align-items: center;
  gap: 22px;
}

.fmDetailPage #detail-reviews .fmReviewFilterRow + .fmReviewFilterRow {
  padding-left: 31px;
  border-left: 1px solid var(--line-dark);
}

.fmDetailPage #detail-reviews .fmReviewFilterRow > span {
  color: var(--text-1);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.fmDetailPage #detail-reviews .fmReviewSegment {
  display: flex;
  align-items: center;
  gap: 13px;
}

.fmDetailPage #detail-reviews .fmReviewSegment button {
  min-width: 88px;
  height: 45px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel);
  color: var(--text-2);
  cursor: pointer;
  font-size: 15px;
  padding: 0 15px;
}

.fmDetailPage #detail-reviews .fmReviewSegment button.active {
  border-color: var(--primary);
  color: var(--primary);
}

.fmDetailPage #detail-reviews .fmReviewList {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 11px;
  background: var(--surface-panel);
}

.fmDetailPage #detail-reviews .fmReviewItem {
  min-height: 0;
  align-items: flex-start;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  background: var(--surface-panel);
  box-shadow: none;
  padding: 20px 22px;
}

.fmDetailPage #detail-reviews .fmReviewItem:last-child {
  border-bottom: 0;
}

.fmDetailPage #detail-reviews .fmReviewItemDescription {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-width: 0;
}

.fmDetailPage #detail-reviews .fmReviewSku {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fmDetailPage #detail-reviews .fmReviewItemStars {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 15px;
}

.fmDetailPage #detail-reviews .fmReviewItemAside {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  color: var(--text-3);
  font-size: 13px;
}

.fmDetailPage #detail-reviews .fmReviewItemAside time {
  white-space: nowrap;
}

.fmDetailPage #detail-reviews .fmReviewSentiment {
  flex: 0 0 auto;
  min-width: 55px;
  border-radius: 12px;
  text-align: center;
  padding: 4px 10px;
}

.fmDetailPage #detail-reviews .fmReviewSentiment.positive {
  background: color-mix(in srgb, var(--success) 14%, var(--surface-panel));
  color: var(--success);
}

.fmDetailPage #detail-reviews .fmReviewSentiment.negative {
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-panel));
  color: var(--warning);
}

.fmDetailPage #detail-reviews .fmReviewItemContent {
  display: grid;
  gap: 7px;
}

.fmDetailPage #detail-reviews .fmReviewItemContent p {
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.65;
}

.fmDetailPage #detail-reviews .fmReviewItemContent small {
  color: var(--text-3);
  font-size: 12px;
}

.fmDetailPage #detail-reviews .fmReviewPagination {
  grid-column: 1 / -1;
  border: 0;
}

.fmDetailPage #detail-similar .fmSimilarCard {
  padding: 27px 31px 30px;
}

.fmDetailPage #detail-similar .fmSimilarCardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  min-height: 96px;
}

.fmDetailPage #detail-similar .fmSimilarCardHead h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 30px;
  font-weight: 800;
}

.fmDetailPage #detail-similar .fmSimilarCardHead p {
  margin: 10px 0 0;
  color: var(--text-2);
  font-size: 15px;
}

.fmDetailPage #detail-similar .fmSimilarCardHead > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--primary);
  cursor: pointer;
  font-size: 15px;
  padding: 0 19px;
}

.fmDetailPage #detail-similar .fmSimilarCardHead > button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.fmDetailPage #detail-similar .fmSimilarGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.fmDetailPage #detail-similar .fmSimilarItem {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 11px;
  background: var(--surface-panel);
  box-shadow: 0 4px 12px rgb(29 42 66 / 6%);
}

.fmDetailPage #detail-similar .fmSimilarThumb {
  height: 255px;
  margin: 17px 17px 0;
  overflow: hidden;
  border-radius: 7px;
  background: var(--surface-dark);
}

.fmDetailPage #detail-similar .fmSimilarThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fmDetailPage #detail-similar .fmSimilarCopy {
  display: grid;
  gap: 7px;
  padding: 15px 17px 13px;
}

.fmDetailPage #detail-similar .fmSimilarCopy > strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 17px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmDetailPage #detail-similar .fmSimilarCopy > span {
  color: var(--text-3);
  font-size: 13px;
}

.fmDetailPage #detail-similar .fmSimilarRating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fmDetailPage #detail-similar .fmSimilarRating > span {
  display: flex;
  gap: 2px;
}

.fmDetailPage #detail-similar .fmSimilarRating b {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}

.fmDetailPage #detail-similar .fmSimilarPrice {
  margin-top: 4px;
  color: var(--text-1);
  font-size: 22px;
  font-style: normal;
  font-weight: 800;
}

.fmDetailPage #detail-similar .fmSimilarStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 17px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
}

.fmDetailPage #detail-similar .fmSimilarStats > span {
  display: grid;
  gap: 7px;
  min-height: 82px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding: 12px 14px;
}

.fmDetailPage #detail-similar .fmSimilarStats > span:nth-child(2n) {
  border-right: 0;
}

.fmDetailPage #detail-similar .fmSimilarStats > span:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.fmDetailPage #detail-similar .fmSimilarStats em {
  color: var(--text-3);
  font-size: 13px;
  font-style: normal;
}

.fmDetailPage #detail-similar .fmSimilarStats b {
  color: var(--text-1);
  font-size: 19px;
  font-weight: 600;
}

.fmDetailPage #detail-similar .fmSimilarDetailLink {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 62px;
  color: var(--primary);
  font-size: 15px;
  text-decoration: none;
}

.fmCatalogResultPage {
  min-height: calc(100dvh - 118px);
  align-content: stretch;
  gap: 0;
}

.fmCatalogResultPage .commerceDataListPanel.fmListPanel {
  --commerce-list-head-height: 60px;
  --commerce-list-row-height: 112px;
  --commerce-list-media: 56px;
  --commerce-list-secondary-media: 42px;
  min-height: calc(100dvh - 136px);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(24, 32, 51, 0.06);
}

.fmCatalogResultPage .commerceDataListPanel.fmListPanel .cuiDataListToolbar {
  min-height: 76px;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
}

.fmCatalogResultPage .commerceDataListPanel.fmListPanel .cuiDataListToolbarSlot {
  flex: 1 1 560px;
}

.fmCatalogResultPage .commerceDataListPanel.fmListPanel .cuiDataListBulkActions {
  flex: 0 1 auto;
  margin-left: auto;
}

.fmCatalogSearchBox {
  position: relative;
  width: min(720px, 100%);
  min-width: 280px;
  height: 46px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line-dark, #e5e7eb));
  border-radius: 10px;
  background: var(--surface-panel, #ffffff);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.fmCatalogSearchBox:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}

.fmCatalogSearchBox .cuiInput {
  min-width: 0;
  height: 100%;
  flex: 1 1 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 760;
}

.fmCatalogSearchBox .cuiInput:focus {
  box-shadow: none;
}

.fmCatalogImageSearchInput {
  display: none;
}

.fmCatalogImageSearchButton.cuiButton {
  min-width: 108px;
  min-height: 32px;
  flex: 0 0 auto;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-panel, #ffffff));
  color: var(--primary);
  margin-right: 8px;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 820;
}

.fmCatalogImageSearchButton.cuiButton:hover,
.fmCatalogImageSearchButton.cuiButton:focus-visible,
.fmCatalogImageSearchButton.cuiButton.active {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-panel, #ffffff));
  color: var(--primary);
}

.fmCatalogImageSearchButton > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.fmCatalogSearchSubmit {
  width: 54px;
  height: 46px;
  flex: 0 0 54px;
  border: 0;
  border-radius: 0;
  background: var(--primary);
  color: #ffffff;
}

.fmCatalogSearchSubmit:hover,
.fmCatalogSearchSubmit:focus-visible {
  background: var(--primary-light, var(--primary));
  color: #ffffff;
}

.fmCatalogFilterSearchRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line-dark, #edf0f5);
  background: var(--fm-filter-panel-bg);
  padding: 16px 20px;
}

.fmCatalogFilterSearchRow > .fmCatalogToolbarActions {
  flex: 0 0 auto;
  margin-left: auto;
}

.fmCatalogSearchBox--filter {
  width: min(600px, 100%);
  height: 42px;
  overflow: visible;
  border: 2px solid var(--primary);
  border-radius: 999px;
}

.fmCatalogSearchBox--filter .cuiInput {
  padding-left: 28px;
}

.fmCatalogTranslateButton.cuiButton {
  min-width: 72px;
  height: 34px;
  flex: 0 0 auto;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-1, #101828);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 820;
}

.fmCatalogTranslationControl {
  position: relative;
  flex: 0 0 auto;
}

.fmCatalogTranslationMenu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  display: grid;
  width: 160px;
  max-height: min(420px, calc(100vh - 90px));
  padding: 8px;
  overflow-y: auto;
  border: 1px solid #edf0f5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px rgb(16 24 40 / 14%);
}

.fmCatalogTranslationMenu::before {
  position: absolute;
  top: -6px;
  right: 34px;
  width: 11px;
  height: 11px;
  border-top: 1px solid #edf0f5;
  border-left: 1px solid #edf0f5;
  background: #fff;
  content: '';
  transform: rotate(45deg);
}

.fmCatalogTranslationMenuTitle {
  padding: 6px 12px 8px;
  color: #98a2b3;
  font-size: 11px;
  font-weight: 600;
}

.fmCatalogTranslationMenu button {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #344054;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  text-align: left;
}

.fmCatalogTranslationMenu button:hover,
.fmCatalogTranslationMenu button:focus-visible,
.fmCatalogTranslationMenu button.active {
  outline: none;
  background: #fff0f5;
  color: var(--primary);
}

.fmCatalogTranslateButton.cuiButton:hover,
.fmCatalogTranslateButton.cuiButton:focus-visible,
.fmCatalogTranslateButton.cuiButton.active {
  background: color-mix(in srgb, var(--primary) 9%, var(--fm-filter-panel-bg));
  color: var(--primary);
}

.fmCatalogSearchBox--filter .fmCatalogImageSearchButton.cuiButton {
  min-width: 96px;
  height: 34px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  margin-right: 6px;
}

.fmCatalogSearchBox--filter .fmCatalogImageSearchButton.cuiButton:hover,
.fmCatalogSearchBox--filter .fmCatalogImageSearchButton.cuiButton:focus-visible,
.fmCatalogSearchBox--filter .fmCatalogImageSearchButton.cuiButton.active {
  background: var(--primary-light, var(--primary));
  color: #fff;
}

.fmCatalogSearchBox--filter .fmCatalogSearchSubmit {
  width: 56px;
  height: 42px;
  flex-basis: 56px;
}

.fmCatalogToolbarHeading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.fmCatalogToolbarHeading strong {
  color: var(--text-1, #101828);
  font-size: 17px;
  font-weight: 920;
  white-space: nowrap;
}

.fmCatalogToolbarHeading span {
  overflow: hidden;
  color: var(--text-3, #667085);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmCatalogResultPage .fmCatalogToolbarActions {
  flex-wrap: nowrap;
  gap: 10px;
}

.fmCatalogResultPage .fmCatalogToolbarActions .fmIconText {
  min-width: 82px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  box-shadow: none;
  padding: 0 15px;
  white-space: nowrap;
}

.fmCatalogResultPage .fmCatalogToolbarActions .fmIconText > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.fmCatalogResultPage .commerceDataListPanel.fmListPanel .cuiDataListFilters {
  border-bottom: 1px solid var(--commerce-list-line, #edf0f5);
  background: var(--fm-filter-panel-bg);
  padding: 0;
}

.fmCatalogSelectedBar {
  min-height: 52px;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
}

.fmCatalogSelectedBar .cuiSearchFilterSelectedLabel {
  width: auto;
  color: var(--text-2, #344054);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.fmCatalogSelectedBar .cuiSearchFilterSelectedItems {
  min-width: 0;
  gap: 8px;
}

.fmCatalogSelectedTag {
  min-height: 30px;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line-dark, #e5e7eb));
  border-radius: 7px;
  background: var(--surface-panel, #ffffff);
  color: var(--text-2, #344054);
  padding: 0 9px 0 11px;
  font-size: 12px;
  font-weight: 760;
}

.fmCatalogClearAll {
  min-height: 34px;
  border: 1px solid var(--primary);
  border-radius: 9px;
  background: transparent;
  color: var(--primary);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 860;
  white-space: nowrap;
}

.fmCatalogResultPage .commerceDataListPanel.fmListPanel .cuiDataListBody {
  min-height: clamp(340px, calc(100dvh - 344px), 690px);
}

.fmCatalogResultPage .commerceDataListPanel.fmListPanel .fmProductTable tbody td,
.fmCatalogResultPage .commerceDataListPanel.fmListPanel .fmProductTable .cuiDataListTableCell {
  padding-top: 16px;
  padding-bottom: 16px;
}

.fmCatalogResultPage .commerceDataListPanel.fmListPanel .fmProductTable tbody td.fmProductCol,
.fmCatalogResultPage
  .commerceDataListPanel.fmListPanel
  .fmProductTable
  .cuiDataListTableRow:not(.cuiDataListTableHead)
  .cuiDataListTableCell.fmProductCol {
  position: relative;
  border-right: 0;
}

.fmCatalogResultPage
  .commerceDataListPanel.fmListPanel
  .fmProductTable
  tbody
  td.fmProductCol::after,
.fmCatalogResultPage
  .commerceDataListPanel.fmListPanel
  .fmProductTable
  .cuiDataListTableRow:not(.cuiDataListTableHead)
  .cuiDataListTableCell.fmProductCol::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 72px;
  background: var(--commerce-list-line, var(--line-dark));
  content: '';
  pointer-events: none;
  transform: translateY(-50%);
}

.fmCatalogResultPage .commerceDataListPanel.fmListPanel .fmProductImage,
.fmCatalogResultPage .commerceDataListPanel.fmListPanel .fmRankProductCell .fmProductImage,
.fmCatalogResultPage .commerceDataListPanel.fmListPanel .fmVideoProductImage {
  width: 56px;
  height: 56px;
  flex-basis: 56px;
  border-radius: 9px;
}

.fmCatalogResultPage .commerceDataListPanel.fmListPanel .fmRankShopCell img {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}

.fmCatalogResultPage
  .commerceDataListPanel.fmListPanel
  .fmRowActions
  button.fmCatalogFavoriteButton {
  width: auto;
  min-width: 64px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line-dark));
  border-radius: 8px;
  background: var(--bg);
  color: var(--primary);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.fmCatalogResultPage
  .commerceDataListPanel.fmListPanel
  .fmRowActions
  button.fmCatalogFavoriteButton:hover,
.fmCatalogResultPage
  .commerceDataListPanel.fmListPanel
  .fmRowActions
  button.fmCatalogFavoriteButton:focus-visible {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--bg));
  color: var(--primary);
}

.fmCatalogResultPage
  .commerceDataListPanel.fmListPanel
  .fmRowActions
  button.fmCatalogFavoriteButton.active,
.fmCatalogResultPage
  .commerceDataListPanel.fmListPanel
  .fmRowActions
  button.fmCatalogFavoriteButton.active:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--surface);
}

.fmCatalogResultPage
  .commerceDataListPanel.fmListPanel
  .fmProductTable
  .cuiDataListTableHeadCell--withAction {
  justify-content: center;
  gap: 5px;
}

.fmCatalogResultPage
  .commerceDataListPanel.fmListPanel
  .fmProductTable
  .cuiDataListTableHeadCell--withAction
  > .cuiDataListSortableHead,
.fmCatalogResultPage
  .commerceDataListPanel.fmListPanel
  .fmProductTable
  .cuiDataListTableHeadCell--withAction
  > .cuiDataListSortableHead
  > span,
.fmCatalogResultPage
  .commerceDataListPanel.fmListPanel
  .fmProductTable
  .cuiDataListTableHeadCell--withAction
  > .cuiDataListTableHeaderAction,
.fmCatalogResultPage
  .commerceDataListPanel.fmListPanel
  .fmProductTable
  .cuiDataListTableHeadCell--withAction
  .cuiTooltipWrap {
  min-width: 0;
  padding: 0;
}

.fmCatalogResultPage
  .commerceDataListPanel.fmListPanel
  .fmProductTable
  .cuiDataListTableHeadCell--withAction
  > .cuiDataListSortableHead
  > span {
  flex: 0 1 auto;
  overflow: visible;
  white-space: nowrap;
}

.fmCatalogResultPage
  .commerceDataListPanel.fmListPanel
  .fmProductTable
  .cuiDataListTableHeadCell--withAction
  > .cuiDataListTableHeaderAction {
  flex: 0 0 18px;
}

.fmCatalogExchangeRateHelp {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--line-dark));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 8%, var(--bg));
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.fmCatalogExchangeRateHelp:hover,
.fmCatalogExchangeRateHelp:focus-visible {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--surface);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.fmCatalogExchangeRateTooltip {
  width: min(300px, calc(100vw - 24px));
  max-width: min(300px, calc(100vw - 24px));
  border-color: var(--line-dark-strong);
  background: var(--bg);
  color: var(--text-1);
}

.fmCatalogExchangeRateContent {
  display: grid;
  gap: 5px;
}

.fmCatalogExchangeRateContent strong {
  color: var(--text-1);
  font-size: 13px;
}

.fmCatalogExchangeRateContent > span {
  color: var(--text-2);
  font-size: 12px;
}

.fmCatalogExchangeRateContent small {
  border-top: 1px solid var(--line-dark);
  margin-top: 3px;
  color: var(--text-3);
  padding-top: 7px;
  font-size: 11px;
  line-height: 1.55;
}

.fmCatalogInlineFilterArea {
  background: var(--fm-filter-panel-bg);
}

/* 商品筛选：工具栏触发按钮（位于导出左侧）+ 推挤式筛选侧栏 */
.fmCatalogFilterToggle {
  position: relative;
}

.fmCatalogFilterToggle.active {
  border-color: var(--primary);
  color: var(--primary);
}

.fmCatalogFilterToggleCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-inline-start: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent, #2f6bff);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
}

/* 列表与筛选侧栏并排：侧栏推入时列表向左压缩，收起时列表还原，不遮挡数据 */
.fmCatalogListLayout {
  --fm-filter-panel-width: clamp(380px, 32vw, 480px);
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.fmCatalogListLayout > .commerceDataListPanel.fmListPanel {
  flex: 1 1 auto;
  min-width: 0;
}

.fmCatalogFilterPanel {
  flex: 0 0 auto;
  width: 0;
  display: flex;
  justify-content: flex-end;
  overflow: clip;
  opacity: 0;
  visibility: hidden;
  transition:
    width 0.28s ease,
    margin-left 0.28s ease,
    opacity 0.22s ease,
    visibility 0.28s ease;
}

.fmCatalogFilterPanel.open {
  width: var(--fm-filter-panel-width);
  margin-left: 10px;
  opacity: 1;
  visibility: visible;
}

.fmCatalogFilterPanelInner {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: var(--fm-filter-panel-width);
  max-height: calc(100dvh - 80px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-dark, #edf0f5);
  border-radius: 14px;
  background: var(--surface-panel, #fff);
  box-shadow: 0 12px 34px rgba(24, 32, 51, 0.06);
}

.fmCatalogFilterPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-dark, #edf0f5);
}

.fmCatalogFilterPanelHeader h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.fmCatalogFilterPanelClose {
  flex: 0 0 auto;
}

.fmCatalogFilterPanelBody {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 0 10px;
}

.fmCatalogFilterPanelFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--line-dark, #edf0f5);
  background: var(--surface-panel, #fff);
  border-radius: 0 0 14px 14px;
}

.fmCatalogFilterPanelFooter > .cuiButton:last-child {
  min-width: 112px;
  min-height: 36px;
}

/* 面板内：已选条件 + 全部清除 */
.fmCatalogPanelSelectedBar {
  min-height: 0;
  align-items: flex-start;
  gap: 8px;
  border-bottom: 1px solid var(--line-dark, #edf0f5);
  background: var(--surface-panel, #fff);
  padding: 12px 18px;
}

.fmCatalogPanelSelectedBar .fmCatalogClearAll.cuiButton {
  min-height: 30px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 12px;
}

/* ============ 侧栏内：竖向筛选面板 ============ */
/* 标签在上、选项换行铺满整行，全部筛选项直接列出，无下拉。 */
.fmCatalogFilterPanel .fmCatalogReplicaFilters {
  display: block;
  padding: 2px 18px 8px;
}

.fmCatalogFilterPanel .fmCatalogReplicaFilters .fmCatalogInlineFilterSection {
  display: block;
  min-height: 0;
  grid-template-columns: none;
  gap: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-dark, #edf0f5);
}

.fmCatalogFilterPanel .fmCatalogReplicaFilters .fmCatalogInlineFilterSection:last-child {
  border-bottom: 0;
}

.fmCatalogFilterPanel .fmCatalogReplicaFilters .fmCatalogInlineFilterSection h3 {
  display: block;
  margin: 0 0 10px;
  text-align: left;
  line-height: 1.4;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1, #101828);
}

.fmCatalogFilterPanel .fmCatalogInlineOptionRow {
  display: block;
}

/* 所有选项组在侧栏里自然换行铺满 */
.fmCatalogFilterPanel .fmCatalogReplicaFilters .fmCatalogInlineOptions,
.fmCatalogFilterPanel .fmCatalogReplicaFilters .fmCatalogInlineCountries,
.fmCatalogFilterPanel .fmCatalogReplicaFilters .fmCatalogInlineShopTypes,
.fmCatalogFilterPanel .fmCatalogReplicaFilters .fmCatalogInlineStatus {
  display: flex;
  flex-wrap: wrap;
  white-space: normal;
  gap: 6px;
}

/* 侧栏里的选项恢复描边 chip 观感，选中态填充主题色 */
.fmCatalogFilterPanel .fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiButton,
.fmCatalogFilterPanel .fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiCascaderCategoryTrigger {
  min-height: 30px;
  border: 1px solid var(--line-dark, #e3e7ee);
  border-radius: 999px;
  background: var(--fm-filter-control-bg);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
}

.fmCatalogFilterPanel .fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiButton:hover,
.fmCatalogFilterPanel .fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiButton:focus-visible,
.fmCatalogFilterPanel
  .fmCatalogReplicaFilters
  .fmCatalogInlineOptions
  .cuiCascaderCategoryTrigger:hover,
.fmCatalogFilterPanel
  .fmCatalogReplicaFilters
  .fmCatalogInlineOptions
  .cuiCascaderCategoryTrigger:focus-visible {
  border-color: var(--primary-border);
  background: var(--fm-filter-control-hover);
  color: var(--primary);
}

.fmCatalogFilterPanel .fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiButton.active,
.fmCatalogFilterPanel .fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiButton.active:hover,
.fmCatalogFilterPanel
  .fmCatalogReplicaFilters
  .fmCatalogInlineOptions
  .cuiCascaderCategoryTrigger--selected,
.fmCatalogFilterPanel
  .fmCatalogReplicaFilters
  .fmCatalogInlineOptions
  .cuiCascaderCategoryTrigger--selected:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-contrast);
}

/* 商品分类：一级 / 二级 / 三级类目三列联动，选项直接列出 */
.fmCatalogCategoryColumns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line-dark, #e3e7ee);
  border-radius: 10px;
  background: var(--surface-panel, #fff);
  overflow: hidden;
}

.fmCatalogCategoryColumn {
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: 300px;
}

.fmCatalogCategoryColumn + .fmCatalogCategoryColumn {
  border-left: 1px solid var(--line-dark, #e3e7ee);
}

.fmCatalogCategoryColumnTitle {
  margin: 0;
  padding: 8px 10px 6px;
  color: var(--text-3, #667085);
  font-size: 11px;
  font-weight: 700;
}

.fmCatalogCategoryColumnList {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 0 6px 8px;
}

.fmCatalogCategoryColumnList > button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  text-align: left;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2, #344054);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px;
}

.fmCatalogCategoryColumnList > button > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmCatalogCategoryColumnList > button > svg {
  flex: 0 0 auto;
  opacity: 0.55;
}

.fmCatalogCategoryColumnList > button em {
  flex: 0 0 auto;
  min-height: 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 3px;
  background: #ff4d4f;
  color: #fff;
  padding: 0 4px;
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.fmCatalogCategoryColumnList > button:hover,
.fmCatalogCategoryColumnList > button:focus-visible {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-panel, #fff));
  color: var(--primary);
  outline: 0;
}

.fmCatalogCategoryColumnList > button.active {
  background: var(--primary);
  color: var(--primary-contrast);
}

.fmCatalogCategoryColumnList > button.active > svg {
  opacity: 0.9;
}

.fmCatalogCategoryColumnEmpty {
  margin: 0;
  padding: 4px 10px 10px;
  color: var(--text-3, #667085);
  font-size: 11px;
  line-height: 1.6;
}

/* 商品类型：两列复选，含帮助图标 */
.fmCatalogFilterPanel .fmCatalogProductTypes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

/* 上架时间 / 日期范围 / 榜单时间：占满整行 */
.fmCatalogFilterPanel .fmCatalogInlineDateFilter,
.fmCatalogFilterPanel .fmCatalogInlineDateRange,
.fmCatalogFilterPanel .fmCatalogInlineSingleDate {
  width: 100%;
}

.fmCatalogFilterPanel .fmCatalogInlineRankTime {
  grid-template-columns: minmax(0, 1fr);
}

/* ============ 平铺筛选组：不使用下拉，选项直接列出 ============ */
.fmCatalogFlatFilterList {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fmCatalogFlatFilterGroup {
  min-width: 0;
}

.fmCatalogFlatFilterGroup h4 {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2, #344054);
  font-size: 12px;
  font-weight: 700;
}

.fmCatalogFlatFilterIcon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--line-dark, #e5e7eb));
  border-radius: 50%;
  color: var(--primary);
}

.fmCatalogFlatFilterOptions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fmCatalogFlatFilterOptions > button {
  min-height: 28px;
  border: 1px solid var(--line-dark, #e3e7ee);
  border-radius: 999px;
  background: var(--fm-filter-control-bg);
  color: var(--text-2, #344054);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 0 12px;
}

.fmCatalogFlatFilterOptions > button:hover,
.fmCatalogFlatFilterOptions > button:focus-visible {
  border-color: var(--primary-border);
  background: var(--fm-filter-control-hover);
  color: var(--primary);
  outline: 0;
}

.fmCatalogFlatFilterOptions > button:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.fmCatalogFlatFilterOptions > button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-contrast);
}

.fmCatalogFlatFilterGroup .fmCatalogInlineCustomRange {
  margin-top: 8px;
  border: 1px dashed var(--line-dark, #e3e7ee);
  border-radius: 10px;
  padding: 10px;
}

.fmCatalogFlatFilterGroup .fmCatalogInlineCustomRangeActions button {
  min-height: 32px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--fm-filter-panel-bg);
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 0 14px;
}

.fmCatalogFlatFilterGroup .fmCatalogInlineCustomRangeActions button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-contrast);
}

.fmCatalogInlineFilters {
  display: grid;
  padding: 4px 20px 0;
}

.fmCatalogInlineFilterSection {
  min-width: 0;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border-bottom: 1px solid var(--line-dark, #edf0f5);
  padding: 14px 0;
}

.fmCatalogInlineFilterSection h3 {
  margin: 0;
  color: var(--text-2, #344054);
  font-size: 13px;
  font-weight: 900;
  line-height: 34px;
}

.fmCatalogInlineOptions {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.fmCatalogInlineCountries {
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}

.fmCatalogInlineOptions .cuiButton,
.fmCatalogInlineOptions .cuiCascaderCategoryTrigger {
  position: relative;
  min-width: 0;
  min-height: 34px;
  justify-content: center;
  gap: 5px;
  overflow: visible;
  border: 1px solid var(--line-dark, #e5e7eb);
  border-radius: 7px;
  background: var(--fm-filter-control-bg);
  color: var(--text-2, #344054);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.fmCatalogInlineOptions .cuiButton:hover,
.fmCatalogInlineOptions .cuiButton:focus-visible,
.fmCatalogInlineOptions .cuiCascaderCategoryTrigger:hover,
.fmCatalogInlineOptions .cuiCascaderCategoryTrigger:focus-visible {
  border-color: var(--primary-border);
  background: var(--fm-filter-control-hover);
  color: var(--primary-light);
}

.fmCatalogInlineOptions .cuiButton.active,
.fmCatalogInlineOptions .cuiCascaderCategoryTrigger--selected {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-contrast);
}

.fmCatalogInlineOptions .cuiButton em,
.fmCatalogInlineOptions .cuiCascaderCategoryTrigger em {
  position: absolute;
  top: -6px;
  right: 5px;
  min-height: 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #12b886;
  color: #ffffff;
  padding: 0 4px;
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.fmCatalogInlineStatus {
  grid-template-columns: repeat(3, minmax(84px, 120px));
}

.fmCatalogInlineDateFilter {
  width: min(280px, 100%);
  min-width: 0;
}

.fmCatalogInlineDateRange {
  width: 100%;
  min-width: 0;
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
}

.fmCatalogInlineDateRange .cuiDatePickerTrigger {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line-dark, #e5e7eb);
  border-radius: 7px;
  background: var(--fm-date-control-bg);
  box-shadow: none;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 760;
}

.fmCatalogInlineDateRange .cuiDatePickerTrigger:hover,
.fmCatalogInlineDateRange .cuiDatePickerTrigger:focus-visible {
  border-color: var(--primary-border);
  background: color-mix(in srgb, var(--primary) 6%, var(--fm-date-control-bg));
}

.fmCatalogInlineDateRange .cuiDatePickerTrigger:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.fmCatalogInlineDateRange .cuiDatePickerIcon {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1.5px solid var(--primary-light);
  border-radius: 4px;
  color: var(--primary-light);
  font-size: 0;
}

.fmCatalogInlineDateRange .cuiDatePickerIcon::before {
  position: absolute;
  top: 3px;
  right: -1.5px;
  left: -1.5px;
  border-top: 1.5px solid currentColor;
  content: '';
}

.fmCatalogInlineDateRange .cuiDatePickerIcon::after {
  position: absolute;
  top: 7px;
  left: 3px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    4px 0 currentColor,
    8px 0 currentColor,
    0 4px currentColor,
    4px 4px currentColor;
  content: '';
}

.fmCatalogInlineDateRange .cuiDatePickerTrigger::after {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 1.5px solid var(--text-3, #667085);
  border-bottom: 1.5px solid var(--text-3, #667085);
  content: '';
  transform: rotate(45deg) translateY(-2px);
}

.fmCatalogInlineDateRange .cuiDatePickerValue {
  color: var(--text-2, #344054);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.fmCatalogInlineCustomRange {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line, #eef1f5);
  margin-top: 3px;
  padding-top: 10px;
}

.fmCatalogInlineCustomRangeInputs {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 7px;
}

.fmCatalogInlineCustomRangeInputs label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.fmCatalogInlineCustomRangeInputs label span {
  color: var(--text-3, #667085);
  font-size: 11px;
  font-weight: 760;
}

.fmCatalogInlineCustomRangeInputs input {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line-dark, #e5e7eb);
  border-radius: 7px;
  background: var(--fm-filter-control-bg);
  color: var(--text-1, #101828);
  font: inherit;
  font-size: 12px;
  font-weight: 720;
  padding: 0 10px;
}

.fmCatalogInlineCustomRangeInputs input:focus {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 2px var(--focus-ring);
  outline: 0;
}

.fmCatalogInlineCustomRangeInputs i,
.fmCatalogInlineCustomRangeInputs b {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  color: var(--text-3, #667085);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.fmCatalogInlineCustomRangeError {
  margin: 0;
  color: var(--danger-ink, #d92d20);
  font-size: 11px;
  font-weight: 720;
}

.fmCatalogInlineCustomRangeActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.fmCatalogInlineSingleDate {
  width: min(180px, 100%);
}

.fmCatalogInlineRankTime {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(180px, 240px);
  gap: 10px;
}

.fmCatalogReplicaFilterArea,
.fmCatalogReplicaFilterArea .fmCatalogInlineFilters {
  background: var(--fm-filter-panel-bg);
}

.fmCatalogReplicaFilters {
  display: grid;
  padding: 16px 30px 12px;
}

.fmCatalogReplicaFilters .fmCatalogInlineFilterSection {
  min-height: 44px;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  border-bottom: 0;
  padding: 4px 0;
}

.fmCatalogReplicaFilters .fmCatalogInlineFilterSection h3 {
  color: var(--text-2, #344054);
  font-size: 14px;
  font-weight: 820;
  line-height: 32px;
  text-align: right;
}

.fmCatalogInlineOptionRow {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.fmCatalogInlineOptionRow > .fmCatalogInlineOptions {
  width: 100%;
  flex: 1 1 auto;
}

.fmCatalogReplicaFilters .fmCatalogInlineOptions {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiButton,
.fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiCascaderCategoryTrigger {
  width: auto;
  min-width: 52px;
  min-height: 32px;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-1, #101828);
  padding: 0 11px;
  font-size: 14px;
  font-weight: 560;
}

.fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiButton:hover,
.fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiButton:focus-visible,
.fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiCascaderCategoryTrigger:hover,
.fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiCascaderCategoryTrigger:focus-visible {
  border-color: transparent;
  background: color-mix(in srgb, var(--primary) 8%, var(--fm-filter-panel-bg));
  color: var(--primary);
}

.fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiButton.active,
.fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiButton.active:hover,
.fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiCascaderCategoryTrigger--selected,
.fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiCascaderCategoryTrigger--selected:hover {
  border-color: transparent;
  background: var(--primary);
  color: #fff;
}

.fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiButton em,
.fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiCascaderCategoryTrigger em {
  top: -3px;
  right: -3px;
  min-height: 16px;
  border-radius: 3px;
  background: #20c7b8;
  padding: 0 4px;
  font-size: 8px;
}

.fmCatalogReplicaFilters .fmCatalogInlineCountries {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.fmCatalogReplicaFilters .fmCatalogInlineCountries .cuiButton {
  min-width: 44px;
  padding-inline: 9px;
}

.fmCatalogReplicaFilters .fmCatalogInlineShopTypes,
.fmCatalogReplicaFilters .fmCatalogInlineStatus {
  max-width: none;
  display: flex;
}

.fmCatalogProductTypes {
  min-height: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.fmCatalogProductTypeOption {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.fmCatalogProductTypes label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-1, #101828);
  cursor: pointer;
  font-size: 14px;
  line-height: 32px;
}

.fmCatalogProductTypes label > input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.fmCatalogProductTypes label > span {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid var(--line-dark, #d8dee8);
  border-radius: 4px;
  background: var(--fm-filter-control-bg);
}

.fmCatalogProductTypes label > input:checked + span {
  border-color: var(--primary);
  background: var(--primary);
}

.fmCatalogProductTypes label > input:checked + span::after {
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--primary-contrast);
  border-bottom: 2px solid var(--primary-contrast);
  content: '';
  transform: rotate(45deg);
}

.fmCatalogProductTypes label > input:focus-visible + span {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.fmCatalogProductTypes label strong {
  font-weight: 560;
}

.fmCatalogReplicaFilterArea .fmCatalogSelectedBar {
  min-height: 64px;
  border-top: 1px solid var(--line-dark, #edf0f5);
  background: var(--fm-filter-panel-bg);
  padding: 10px 30px;
}

.fmCatalogReplicaFilterArea .fmCatalogSelectedTag {
  border: 0;
  background: color-mix(in srgb, var(--primary) 3%, var(--fm-filter-panel-bg));
  font-size: 13px;
}

.fmCatalogReplicaFilterArea .fmCatalogClearAll {
  min-height: 38px;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 13px;
}

.fmCatalogReplicaFilterArea .fmCatalogClearAll:disabled {
  border-color: var(--line-dark, #e5e7eb);
  color: var(--text-4, #b3bac5);
  cursor: not-allowed;
}

@media (max-width: 1320px) {
  .fmCatalogResultPage .commerceDataListPanel.fmListPanel .cuiDataListToolbarSlot {
    flex-basis: 420px;
  }
}

@media (max-width: 760px) {
  .fmCatalogResultPage {
    min-height: 0;
  }

  .fmCatalogResultPage .commerceDataListPanel.fmListPanel {
    min-height: 0;
  }

  .fmCatalogResultPage .commerceDataListPanel.fmListPanel .cuiDataListToolbar {
    align-items: stretch;
    padding: 12px;
  }

  .fmCatalogResultPage .commerceDataListPanel.fmListPanel .cuiDataListToolbarSlot,
  .fmCatalogResultPage .commerceDataListPanel.fmListPanel .cuiDataListBulkActions {
    width: 100%;
    flex-basis: 100%;
  }

  .fmCatalogSearchBox {
    width: 100%;
    min-width: 0;
  }

  .fmCatalogResultPage .fmCatalogToolbarActions {
    width: 100%;
    justify-content: flex-end;
  }

  .fmCatalogSelectedBar {
    align-items: flex-start;
    padding-inline: 12px;
  }

  .fmCatalogInlineFilters {
    padding-inline: 12px;
  }

  .fmCatalogFilterSearchRow {
    flex-wrap: wrap;
    padding: 16px 12px;
  }

  .fmCatalogSearchBox--filter {
    height: 46px;
  }

  .fmCatalogSearchBox--filter .fmCatalogTranslateButton.cuiButton {
    min-width: 42px;
    width: 42px;
    padding: 0;
  }

  .fmCatalogSearchBox--filter .fmCatalogTranslateButton > span {
    display: none;
  }

  .fmCatalogSearchBox--filter .fmCatalogImageSearchButton.cuiButton {
    min-width: 44px;
    width: 44px;
    padding: 0;
  }

  .fmCatalogSearchBox--filter .fmCatalogImageSearchButton > span {
    display: none;
  }

  .fmCatalogSearchBox--filter .fmCatalogSearchSubmit {
    width: 52px;
    height: 46px;
    flex-basis: 52px;
  }

  .fmCatalogInlineFilterSection {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmCatalogInlineFilterSection {
    gap: 7px;
  }

  .fmCatalogInlineFilterSection h3 {
    line-height: 1.4;
  }

  .fmCatalogReplicaFilters {
    padding: 14px 12px;
  }

  .fmCatalogReplicaFilters .fmCatalogInlineFilterSection {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 9px 0;
  }

  .fmCatalogReplicaFilters .fmCatalogInlineFilterSection h3 {
    line-height: 1.4;
    text-align: left;
  }

  .fmCatalogListLayout {
    --fm-filter-panel-width: min(360px, 92vw);
  }

  .fmCatalogReplicaFilterArea .fmCatalogSelectedBar {
    min-height: 64px;
    padding: 12px;
  }

  .fmCatalogInlineRankTime {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 460px) {
  .fmCatalogImageSearchButton.cuiButton {
    min-width: 36px;
    width: 36px;
    padding: 0;
  }

  .fmCatalogImageSearchButton > span {
    display: none;
  }

  .fmCatalogInlineCountries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fmCatalogSearchBox--filter .cuiInput {
    padding-inline: 14px 6px;
  }

  .fmCatalogReplicaFilters .fmCatalogInlineOptions {
    gap: 5px;
  }

  .fmCatalogReplicaFilters .fmCatalogInlineOptions .cuiButton {
    min-width: 52px;
    padding-inline: 10px;
  }
}

@keyframes fmToastIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fmAiStatusPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(102, 87, 238, 0);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(102, 87, 238, 0.14);
  }
}

@keyframes fmAiCursorBlink {
  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}

@keyframes fmAiThinkingDot {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@keyframes fmProductLoadingOrbitSpin {
  to {
    transform: rotate(360deg);
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/creators.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Recovered member module CSS.
 * Owner: creators / guliym.
 * Source: origin/feat/chatbi-agent-fastmoss-style-guliym.
 * Generated by selector ownership; do not mix other module prefixes here.
 */

.creatorDetailPage {
  min-width: var(--workspace-canvas-min-width);
}

.homeWorkbenchInsightLayout.creatorTier {
  grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
}

.homeWorkbenchInsightLayout.creatorTier > .homeWorkbenchInsightRail {
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
}

.creatorHeroPanel {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.08)),
    var(--surface-panel);
}

.creatorFilterPanel {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.creatorFilterPanel {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(128px, 1fr)) minmax(150px, 1fr) minmax(150px, 1.2fr) minmax(86px, 0.5fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
}

.creatorFilterPanel {
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(128px, 1fr)) minmax(86px, 0.5fr) auto;
}

.creatorGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.creatorCard {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.creatorCardHead,
.creatorCardFoot {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.creatorCardHead {
  justify-content: space-between;
}

.creatorCardHead > div:nth-child(2) {
  min-width: 0;
  flex: 1 1 auto;
}

.creatorCardHead strong,
.creatorCardHead em,
.creatorCardFoot small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorCardHead strong {
  color: var(--text-1);
}

.creatorCardHead em,
.creatorCard p,
.creatorCardFoot small,
.creatorMetaNote {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.6;
}

.creatorCard p {
  min-height: 42px;
  margin: 0;
}

.creatorAvatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-light);
  font-size: 18px;
  font-weight: 900;
  overflow: hidden;
}

.creatorAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorMetricGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.creatorMetricGrid span {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 10px;
}

.creatorMetricGrid strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorMetricGrid em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.creatorCardFoot {
  justify-content: space-between;
}

.creatorCardFoot a {
  flex: 0 0 auto;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-light);
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.creatorDetailPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
}

.creatorDetailHero {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.08)),
    var(--surface-panel);
}

.creatorMatchGrid,
.creatorDataObjectGrid {
  display: grid;
  gap: 10px;
}

.creatorMatchGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creatorMatchGrid article,
.creatorDataObjectGrid span {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.creatorMatchGrid strong,
.creatorMatchGrid span,
.creatorDataObjectGrid span {
  display: block;
}

.creatorMatchGrid strong {
  color: var(--text-1);
}

.creatorMatchGrid span,
.creatorDataObjectGrid span {
  overflow-wrap: anywhere;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.creatorMetaNote {
  margin: 12px 0 0;
}

.favoriteCardHead > .creatorAvatar {
  overflow: hidden;
}

.favoriteCardHead .creatorAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorDetailHero {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.08)), var(--surface-panel);
}

.creatorMatchGrid,
.creatorDataObjectGrid {
  display: grid;
  gap: 10px;
}

.creatorMatchGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creatorMatchGrid article,
.creatorDataObjectGrid span {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.creatorMatchGrid strong,
.creatorMatchGrid span,
.creatorDataObjectGrid span {
  display: block;
}

.creatorMatchGrid strong {
  color: var(--text-1);
}

.creatorMatchGrid span,
.creatorDataObjectGrid span {
  overflow-wrap: anywhere;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.creatorMetaNote {
  margin: 12px 0 0;
}

@media (max-width: 1080px) {

  .creatorGrid {
    grid-template-columns: 1fr;
  }

  .creatorMatchGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {

  .creatorGrid,
.creatorMetricGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .creatorCardHead,
.creatorCardFoot {
    flex-wrap: nowrap;
  }

  .creatorMetricGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .creatorMatchGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .creatorGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creatorFilterPanel {
    grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(128px, 1fr)) minmax(86px, 0.5fr) auto;
  }
}

.creatorSearchPage {
  --creator-accent: var(--primary);
  --creator-accent-2: var(--accent);
  --creator-accent-soft: var(--primary-soft);
  --creator-text: var(--text-1);
  --creator-muted: var(--text-3);
  --creator-line: var(--line-dark);
  --creator-panel: #ffffff;
  --creator-popover-bg: #ffffff;
  --creator-popover-secondary-bg: #ffffff;
  --creator-select-bg: #ffffff;
  --creator-switch-off-bg: #e2e8f0;
  --creator-switch-off-border: #cbd5e1;
  --creator-switch-knob: #ffffff;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  row-gap: 24px;
  color: var(--creator-text);
}

[data-theme='dark'] .creatorSearchPage {
  --creator-panel: var(--surface-panel);
  --creator-popover-bg: var(--bg-sidebar);
  --creator-popover-secondary-bg: var(--surface-panel-strong);
  --creator-select-bg: rgba(255, 255, 255, 0.08);
  --creator-switch-off-bg: rgba(255, 255, 255, 0.12);
  --creator-switch-off-border: rgba(255, 255, 255, 0.18);
  --creator-switch-knob: #e2e8f0;
}

.creatorSearchHeader {
  min-height: 28px;
  display: flex;
  align-items: flex-start;
  margin: 0;
}

.creatorSearchHeader h1 {
  margin: 0;
  color: var(--creator-text);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
}

.creatorSearchPanel,
.creatorResultPanel {
  border: 1px solid var(--creator-line);
  border-radius: 8px;
  background: var(--creator-panel);
  box-shadow: var(--shadow-light);
}

.creatorSearchPanel {
  display: grid;
  gap: 0;
  overflow: visible;
  padding: 20px 24px;
}

.creatorResultPanel {
  overflow-x: auto;
}

.creatorResultPanel.cuiDataList {
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.creatorResultPanel .cuiDataListToolbar {
  justify-content: flex-end;
  border-bottom-color: var(--creator-line);
  background: var(--creator-panel);
  padding: 16px 18px;
}

.creatorResultPanel .cuiDataListToolbarSlot {
  flex: 0 1 auto;
}

.creatorResultPanel .cuiDataListBody {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: rgba(148, 163, 184, 0.65) rgba(148, 163, 184, 0.14);
  scrollbar-width: thin;
}

.creatorResultPanel .cuiDataListBody::-webkit-scrollbar {
  height: 16px;
}

.creatorResultPanel .cuiDataListBody::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
}

.creatorResultPanel .cuiDataListBody::-webkit-scrollbar-thumb {
  border: 4px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.7);
}

.creatorResultPanel .cuiDataListFooter {
  justify-content: center;
  border-top-color: var(--creator-line);
  padding: 16px 18px;
}

.creatorResultPanel .cuiDataListFooter > .creatorPager {
  padding: 0;
}

.creatorStandaloneLoading {
  min-height: 100vh;
  overflow-x: auto;
  background: var(--bg-app);
  padding: 24px;
}

.creatorSearchTop {
  display: flex;
  align-items: center;
  gap: 10px;
}

.creatorSearchBox {
  width: min(760px, 100%);
  min-width: 0;
  height: 54px;
  display: flex;
  align-items: center;
  overflow: visible;
  box-sizing: border-box;
  border: 2px solid var(--creator-accent);
  border-radius: 999px;
  background: #ffffff;
}

.creatorSearchBox *,
.creatorSearchBox *::before,
.creatorSearchBox *::after {
  animation: none !important;
  transition: none !important;
}

.creatorSearchKeywordInput,
.creatorSearchKeywordInput:hover,
.creatorSearchKeywordInput:focus,
.creatorSearchKeywordInput:active,
.creatorSearchKeywordInput.ant-input,
.creatorSearchKeywordInput.ant-input:hover,
.creatorSearchKeywordInput.ant-input:focus,
.creatorSearchKeywordInput.ant-input:active,
.creatorSearchKeywordInput.ant-input-borderless,
.creatorSearchKeywordInput.ant-input-borderless:hover,
.creatorSearchKeywordInput.ant-input-borderless:focus,
.creatorSearchKeywordInput.ant-input-borderless:active,
.creatorSearchBox:focus-within .creatorSearchKeywordInput {
  --ant-input-active-bg: #ffffff !important;
  --ant-input-hover-bg: #ffffff !important;
  --ant-input-color-bg-container: #ffffff !important;
  --ant-input-color-bg-container-disabled: #ffffff !important;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 22px;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--creator-text) !important;
  font-size: 14px;
  box-shadow: none !important;
  outline: 0 !important;
}

.creatorSearchKeywordInput:disabled,
.creatorSearchKeywordInput.ant-input-disabled {
  background: #ffffff !important;
  color: var(--creator-text) !important;
  opacity: 1;
  -webkit-text-fill-color: var(--creator-text);
}

.creatorSearchKeywordInput::placeholder {
  color: #a3afc2 !important;
}

.creatorSearchSubmit,
.creatorSearchSubmit:hover,
.creatorSearchSubmit:focus,
.creatorSearchSubmit:focus-visible,
.creatorSearchSubmit:active,
.creatorSearchSubmit.ant-btn-primary:not(:disabled):not(.ant-btn-disabled):hover,
.creatorSearchSubmit.ant-btn-primary:not(:disabled):not(.ant-btn-disabled):focus,
.creatorSearchSubmit.ant-btn-primary:not(:disabled):not(.ant-btn-disabled):active {
  flex: 0 0 72px;
  align-self: stretch;
  width: 72px;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  background: var(--creator-accent) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: none !important;
}

.creatorSearchSubmit::before,
.creatorSearchSubmit::after,
.creatorSearchSubmit[ant-click-animating-without-extra-node]::after,
.creatorSearchSubmit.ant-click-animating-node::after,
.creatorSearchSubmit .ant-wave {
  display: none !important;
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

.creatorSearchSubmit .anticon,
.creatorSearchSubmit svg {
  color: #ffffff !important;
}

.creatorCollectButton {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--creator-accent);
  color: #fff;
  font-weight: 900;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 13px;
  box-shadow: none;
}

.creatorSearchDivider {
  height: 1px;
  margin: 6px 0;
  background: var(--creator-line);
}

.creatorSearchFilterRow {
  display: flex;
  align-items: start;
  gap: 8px;
  min-width: 0;
  overflow: visible;
  padding: 7px 0;
}

.creatorSearchFilterRow.compact {
  align-items: center;
  flex-wrap: wrap;
}

.creatorSearchFilterRow > strong,
.creatorAdvancedRow > strong {
  width: 86px;
  min-width: 86px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--creator-muted);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.creatorSearchChipList {
  min-width: 0;
  flex: 1 1;
}

.creatorSearchChipList {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
}

.creatorAntSegmented.ant-segmented {
  max-width: 100%;
  background: transparent;
}

.creatorAntSegmented .ant-segmented-group {
  flex-wrap: wrap;
  gap: 7px 12px;
}

.creatorAntSegmented .ant-segmented-item {
  border-radius: 999px;
  color: var(--creator-text);
  font-size: 13px;
  font-weight: 800;
}

.creatorAntSegmented .ant-segmented-item-label {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  line-height: 30px;
}

.creatorAntSegmented .ant-segmented-thumb,
.creatorAntSegmented .ant-segmented-item-selected {
  border-radius: 999px;
  background: var(--creator-accent);
  color: var(--accent-on-primary, #ffffff);
}

.creatorAntSegmented em {
  margin-left: 4px;
  border-radius: 999px;
  background: var(--success);
  color: var(--accent-on-primary, #ffffff);
  padding: 1px 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.creatorSearchChipTrailing {
  display: inline-flex;
}

.creatorCommerceCategoryRow {
  align-items: flex-start;
}

.creatorCommerceCategoryPanel {
  min-width: 0;
  position: relative;
  overflow: visible;
  flex: 1 1;
}

.creatorCommerceCategoryHeader {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 16px;
}

.creatorCommerceCategoryHeader button,
.creatorCommerceCategoryMenu button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--creator-text);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 800;
}

.creatorCommerceCategoryHeader button.active,
.creatorCommerceCategoryMenu button.selected {
  background: var(--creator-accent);
  color: var(--accent-on-primary, #ffffff);
}

.creatorCommerceCategoryPanel .creatorCommerceCategoryPopover {
  width: min(520px, calc(100vw - 48px));
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 68px;
  display: grid;
  grid-template-columns: minmax(190px, 0.95fr) minmax(190px, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--creator-line);
  border-radius: 18px;
  background: var(--creator-popover-bg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.creatorCommerceCategoryMenu {
  min-width: 0;
  max-height: 260px;
  display: grid;
  align-content: start;
  overflow-y: auto;
  padding: 10px;
  scrollbar-color: rgba(148, 163, 184, 0.8) rgba(148, 163, 184, 0.16);
  scrollbar-width: thin;
}

.creatorCommerceCategoryMenu.secondary {
  border-left: 1px solid var(--creator-line);
  background: var(--surface-panel-strong);
}

.creatorCommerceCategoryMenu button {
  width: 100%;
  min-height: 42px;
  justify-content: space-between;
  border-radius: 8px;
  padding: 0 12px;
  text-align: left;
}

.creatorCommerceCategoryMenu button.active:not(.selected) {
  background: var(--surface-panel-strong);
  color: var(--creator-accent);
}

.creatorCommerceCategoryMenu.secondary button.active:not(.selected) {
  background: var(--creator-popover-secondary-bg);
}

.creatorCommerceCategoryMenu button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorSearchChip {
  min-height: 30px;
  position: relative;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--creator-text);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 750;
}

.creatorSearchChip.active {
  background: var(--creator-accent);
  color: var(--accent-on-primary, #ffffff);
  padding: 0 16px;
}

.creatorSearchChip em {
  position: absolute;
  top: -7px;
  right: -14px;
  border-radius: 999px;
  background: var(--success);
  color: var(--accent-on-primary, #ffffff);
  padding: 1px 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.creatorSwitch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--creator-text);
  font-size: 13px;
  font-weight: 750;
}

.creatorSwitch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.creatorSwitch span {
  width: 46px;
  height: 24px;
  position: relative;
  border: 1px solid var(--creator-accent);
  border-radius: 999px;
  background: var(--creator-accent);
}

.creatorSwitch span::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--creator-switch-knob, #fff);
}

.creatorSwitch input:not(:checked) + span {
  border-color: var(--creator-switch-off-border);
  background: var(--creator-switch-off-bg);
}

.creatorSwitch input:not(:checked) + span::after {
  right: auto;
  left: 3px;
}

.creatorSelectPill {
  --filter-select-border: var(--creator-line);
  --filter-select-bg: var(--creator-select-bg);
  --filter-select-hover-bg: var(--surface-panel-strong);
  position: relative;
  min-width: 142px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--filter-select-border);
  border-radius: var(--cui-radius-md);
  background: var(--filter-select-bg);
  color: var(--creator-text);
  padding: 0;
  font-size: 13px;
  font-weight: 780;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  z-index: 1;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.creatorSelectPill.open,
.creatorSelectPill:focus-within {
  border-color: color-mix(in srgb, var(--creator-accent) 56%, var(--creator-line));
  background: color-mix(in srgb, var(--creator-accent) 5%, var(--filter-select-bg));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--creator-accent) 14%, transparent);
  z-index: 45;
}

.creatorSearchTypePill {
  width: 190px;
  flex: 0 0 190px;
  min-width: 0;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: var(--control-bg);
  box-shadow: none;
  padding: 0;
}

.creatorSearchTypePill .filterSelectTrigger {
  min-height: 100%;
  padding: 0 16px 0 22px;
}

.creatorSearchTypePill .filterSelectSelectedText {
  display: flex;
}

.creatorSearchTypePill .filterSelectValue {
  max-width: 128px;
}

.creatorSearchTypePill .filterSelectLabel {
  display: none;
}

.creatorSortPill {
  min-height: 40px;
  border-radius: 999px;
  min-width: 154px;
}

.creatorSelectMenu {
  width: max(100%, 188px);
  max-height: 260px;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  display: grid;
  gap: 3px;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--creator-line) 82%, var(--creator-accent));
  border-radius: 12px;
  background: var(--creator-popover-bg);
  padding: 6px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}

.creatorSelectMenu button {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--creator-text);
  font: inherit;
  padding: 0 9px 0 10px;
  text-align: left;
}

.creatorSelectMenu button:hover,
.creatorSelectMenu button:focus-visible {
  outline: 0;
  background: color-mix(in srgb, var(--creator-accent) 6%, var(--surface-panel-strong));
}

.creatorSelectMenu button.selected {
  border-color: color-mix(in srgb, var(--creator-accent) 24%, transparent);
  background: color-mix(in srgb, var(--creator-accent) 10%, var(--creator-popover-bg));
  color: var(--creator-accent);
}

.creatorSelectMenu button.selected:hover {
  background: color-mix(in srgb, var(--creator-accent) 10%, var(--creator-popover-bg));
  color: var(--creator-accent);
}

.creatorSelectMenu button span {
  width: 18px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  color: var(--creator-accent);
}

.creatorSelectMenu button strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorInlineExpandButton {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.creatorInlineExpandButton:hover {
  background: rgba(20, 184, 166, 0.16);
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.12);
}

.creatorAdvancedRows {
  display: grid;
  gap: 0;
}

.creatorAdvancedRow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 7px 0;
}

.creatorAdvancedRow > strong {
  align-self: start;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.creatorAdvancedRow > div {
  min-width: 0;
  flex: 1 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.creatorAdvancedRow .creatorSelectPill {
  width: auto;
  justify-content: space-between;
}

.creatorSelectedBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--creator-line);
  padding-top: 13px;
  margin-top: 6px;
}

.creatorSelectedBar > strong {
  width: 86px;
  min-width: 86px;
  text-align: right;
  color: var(--creator-muted);
}

.creatorSelectedBar > div {
  flex: 1 1;
  min-width: 240px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.creatorSelectedTag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--creator-text);
  min-height: 34px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 800;
}

.creatorSelectedTag button {
  width: 18px;
  height: 18px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #98a2b3;
  padding: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.creatorSelectedTag button:hover,
.creatorSelectedTag button:focus-visible {
  outline: 0;
  background: rgba(148, 162, 179, 0.16);
  color: var(--creator-accent);
}

.creatorSelectedMuted {
  color: var(--creator-muted);
}

.creatorSelectedBar > button,
.creatorOutlineButton {
  min-height: 34px;
  border: 1px solid var(--creator-accent);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--creator-accent);
  padding: 0 15px;
  font-size: 13px;
  font-weight: 900;
}

.creatorResultPanel {
  display: grid;
  gap: 18px;
  padding: 30px;
  min-height: 260px;
}

.creatorEmptyResult {
  min-height: 430px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  background: var(--creator-panel);
  color: var(--creator-text);
  text-align: center;
}

.creatorEmptyIllustration {
  width: min(240px, 56vw);
  height: 160px;
  display: grid;
  place-items: center;
}

.creatorEmptyIllustration svg {
  width: 100%;
  height: 100%;
  display: block;
}

.creatorEmptyResult h2 {
  max-width: 720px;
  margin: 0;
  color: var(--creator-text);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.65;
}

.creatorEmptyActions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.creatorEmptyPrimary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 18%, transparent);
  cursor: pointer;
}

.creatorEmptyPrimary:hover,
.creatorEmptyPrimary:focus-visible {
  outline: 0;
  background: #f4145f;
}

.creatorEmptyHelp {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 999px;
  background: transparent;
  color: var(--creator-muted);
  padding: 0;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.creatorEmptyHelp:hover,
.creatorEmptyHelp:focus-visible {
  outline: 0;
  border-color: var(--creator-accent);
  color: var(--creator-accent);
}

.creatorResultToolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

.creatorResultActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.creatorResultActions > button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
  padding: 0 16px;
  font-weight: 900;
}

.creatorResultActions > button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.creatorTableScroller {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: rgba(148, 163, 184, 0.65) rgba(148, 163, 184, 0.14);
  scrollbar-width: thin;
}

.creatorTableScroller::-webkit-scrollbar {
  height: 16px;
}

.creatorTableScroller::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
}

.creatorTableScroller::-webkit-scrollbar-thumb {
  border: 4px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.7);
}

.creatorSearchTable {
  width: 1740px;
  display: grid;
}

.creatorSkeletonPanel {
  overflow: hidden;
}

.creatorSkeletonButton,
.creatorSkeletonAvatar,
.creatorSkeletonLine,
.creatorSkeletonCell i {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-panel-strong);
}

.creatorSkeletonButton::after,
.creatorSkeletonAvatar::after,
.creatorSkeletonLine::after,
.creatorSkeletonCell i::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
  animation: creatorSkeletonShimmer 1.25s infinite;
}

[data-theme='dark'] .creatorSkeletonButton::after,
[data-theme='dark'] .creatorSkeletonAvatar::after,
[data-theme='dark'] .creatorSkeletonLine::after,
[data-theme='dark'] .creatorSkeletonCell i::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

.creatorSkeletonButton {
  width: 86px;
  height: 34px;
}

.creatorSkeletonButton.wide {
  width: 112px;
}

.creatorSkeletonRow {
  pointer-events: none;
}

.creatorSkeletonAvatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
}

.creatorSkeletonIdentity {
  display: grid;
  gap: 10px;
}

.creatorSkeletonLine {
  height: 12px;
}

.creatorSkeletonLine.strong {
  width: 148px;
  height: 16px;
}

.creatorSkeletonLine.medium {
  width: 118px;
}

.creatorSkeletonLine.short {
  width: 82px;
}

.creatorSkeletonCell {
  display: flex;
  align-items: center;
}

.creatorSkeletonCell i {
  width: min(92px, 72%);
  height: 14px;
}

.creatorSkeletonCell i.chart {
  width: 150px;
  height: 52px;
}

.creatorSkeletonCell i.action {
  width: 32px;
  height: 32px;
  border-radius: 999px;
}

.creatorSearchTableRow {
  min-height: 158px;
  display: grid;
  grid-template-columns:
    320px
    150px
    160px
    230px
    180px
    140px
    150px
    120px
    120px
    170px
    100px;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--creator-line);
  color: var(--creator-text);
  font-size: 14px;
}

.creatorSearchTableRow.head {
  min-height: 92px;
  background: var(--surface-panel-strong);
  color: var(--creator-text);
  font-weight: 900;
}

.creatorSearchTableRow > span,
.creatorSearchTableRow.head span,
.creatorSearchTableRow.head > button {
  padding: 0 18px;
  min-width: 0;
}

.creatorSortableHead {
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-weight: 900;
  text-align: left;
}

.creatorSortableHead::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

.creatorSortableHead.asc::after {
  border-top: 0;
  border-bottom: 6px solid currentColor;
}

.creatorSortableHead.active {
  color: var(--creator-accent);
  background: var(--surface-panel-strong);
}

.creatorSortableHead:disabled {
  cursor: wait;
  opacity: 0.72;
}

.creatorIdentityCell {
  min-width: 0;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding-left: 18px;
}

.creatorPhoto {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
  font-weight: 900;
}

.creatorPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorIdentityCell strong,
.creatorIdentityCell em,
.creatorIdentityCell small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorIdentityCell strong {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  color: var(--creator-text);
  font-weight: 900;
}

.creatorNameLink {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorNameLink:hover {
  color: var(--creator-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.creatorIdentityCell em,
.creatorIdentityCell small {
  color: var(--creator-muted);
  font-size: 12px;
  font-style: normal;
}

.creatorIdentityCell em {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 5px;
}

.creatorIdentityCell em button {
  width: 22px;
  height: 22px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--creator-muted);
}

.creatorIdentityCell em button:hover {
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
}

.creatorIdentityCell small {
  margin-top: 3px;
}

.creatorIdentityCell small b,
.creatorIdentityCell small i {
  color: var(--creator-muted);
  font-style: normal;
  font-weight: 700;
}

.creatorIdentityCell small b + i,
.creatorIdentityCell small i + b {
  margin-left: 7px;
}

.creatorFlagIcon,
.creatorFlagFallback {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.creatorFlagIcon {
  gap: 7px;
  color: var(--creator-text);
  font-weight: 850;
}

.creatorFlagIcon img {
  width: 20px;
  height: 14px;
  display: block;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.creatorFlagIcon.compact {
  margin-left: 8px;
}

.creatorFlagIcon.compact img {
  width: 18px;
  height: 12px;
}

.creatorFlagIcon b {
  color: inherit;
  font-weight: 850;
}

.creatorFlagFallback {
  margin-left: 8px;
  font-style: normal;
}

.creatorDetailFlagValue {
  display: inline-flex;
  align-items: center;
}

.creatorDetailFlagValue .creatorFlagFallback {
  margin-left: 0;
}

.creatorVerifyBadge {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 2px solid var(--creator-panel);
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3);
}

.creatorSourceIcons {
  display: inline-flex !important;
  gap: 5px;
  margin-left: 8px;
}

.creatorSourceIcons span {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--creator-line);
  border-radius: 999px;
  background: var(--surface-panel-strong);
  color: var(--creator-accent);
  font-size: 10px;
  font-weight: 900;
}

.creatorCommerceTags b,
.creatorCommerceTags em {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.creatorSalesMetric {
  min-height: 158px;
  display: flex;
  align-items: center;
  background: var(--surface-panel-strong);
  color: var(--creator-text);
  font-weight: 950;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}

.creatorLinkMetric {
  color: var(--creator-accent);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.creatorCommerceTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.creatorCommerceTags b {
  overflow: hidden;
  border: 1px solid rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.08);
  color: var(--primary);
  text-overflow: ellipsis;
}

.creatorCommerceTags em {
  border: 1px solid var(--creator-line);
  background: var(--surface-panel-strong);
  color: var(--creator-muted);
}

.creatorFavoriteAction {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--creator-line);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--creator-accent);
  cursor: pointer;
  text-decoration: none;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.creatorFavoriteAction:hover {
  border-color: var(--creator-accent);
  background: var(--creator-accent-soft);
}

.creatorFavoriteAction.active {
  border-color: var(--creator-accent);
  background: var(--creator-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--creator-accent) 24%, transparent);
  animation: favoritePulse 320ms ease-out;
}

.creatorFavoriteAction.active svg {
  fill: currentColor;
}

.creatorTrendCell svg {
  width: 150px;
  height: 86px;
  display: block;
  color: var(--creator-accent);
}

.creatorPager {
  --pager-accent: var(--creator-accent, #ec4899);
  --pager-accent-soft: var(--creator-accent-soft, rgba(236, 72, 153, 0.16));
  --pager-muted: var(--creator-muted, var(--text-3));
  --pager-text: var(--creator-text, var(--text-1));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--pager-muted);
}

.creatorPager button,
.creatorPager .cuiPaginationEllipsis {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--pager-muted);
  font-size: 15px;
  font-weight: 800;
}

.creatorPager button.active {
  background: var(--pager-accent);
  color: #fff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--pager-accent) 26%, transparent);
}

.creatorPager button:not(:disabled):hover {
  background: var(--pager-accent-soft);
  color: var(--pager-accent);
}

.creatorPagerArrow {
  color: var(--pager-text) !important;
}

.creatorPager .cuiPaginationEllipsis {
  letter-spacing: 2px;
}

.creatorPager button:disabled {
  color: #cbd5e1;
  cursor: not-allowed;
}

.creatorPager .cuiPaginationJump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--pager-muted);
  padding: 3px 4px 3px 10px;
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.creatorPager .cuiPaginationJump:focus-within {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.creatorPager .cuiPaginationJump input {
  width: 58px;
  height: 38px;
  border: 1px solid var(--creator-line, var(--line-dark));
  border-radius: 8px;
  outline: 0;
  background: var(--creator-select-bg, var(--surface-panel));
  color: var(--pager-text);
  padding: 0 10px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.03);
  font-weight: 850;
  text-align: center;
}

.creatorPager .cuiPaginationJump input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft), inset 0 0 0 1px rgba(15, 23, 42, 0.03);
}

[data-theme='dark'] .creatorPager .cuiPaginationJump input {
  border-color: var(--creator-line);
  background: var(--surface-panel);
}

[data-theme='dark'] .creatorPager .cuiPaginationJump:focus-within {
  border-color: var(--primary-light);
  background: color-mix(in srgb, var(--creator-accent) 18%, transparent);
  color: #fff;
  box-shadow: 0 0 0 3px var(--primary-soft);
}

[data-theme='dark'] .creatorPager .cuiPaginationJump input:focus {
  border-color: var(--primary-light);
  background: var(--surface-panel-strong);
  box-shadow: 0 0 0 3px var(--primary-soft), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.creatorDetailPageV2 {
  --creator-detail-accent: var(--primary);
  --creator-detail-soft: var(--primary-soft);
  --creator-detail-line: var(--line-dark);
  --creator-detail-panel: #ffffff;
  --creator-detail-muted: var(--text-3);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  color: var(--text-1);
}

[data-theme='dark'] .creatorDetailPageV2 {
  --creator-detail-panel: var(--surface-panel);
}

.creatorDetailTitleBar {
  display: none;
  gap: 6px;
}

.creatorDetailPageV2 > .creatorDetailTitleBar,
.creatorDetailPageV2 > .creatorDetailStickyHeader:not(.isDocked) {
  display: none;
}

.creatorDetailPageV2 > .creatorDetailStickyHeader {
  min-width: 0;
  position: sticky;
  top: 76px;
  z-index: 980;
}

.creatorDetailPageV2 {
  gap: 12px;
}

.creatorDetailPageV2 > .creatorDetailStickyHeader {
  margin: 0;
  position: relative;
  top: auto;
  z-index: 1;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background: var(--creator-detail-panel);
}

.creatorDetailPageV2 > .creatorDetailTopGrid {
  margin-top: 0;
}

.creatorDetailTopGrid,
.creatorDetailSection {
  scroll-margin-top: 154px;
}

@media (max-width: 1180px) {
  .creatorDetailStickyHeader {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "identity actions"
      "tabs tabs";
    gap: 10px 14px;
  }
}

@media (max-width: 720px) {
  .creatorDetailStickyHeader {
    top: 64px;
    margin: 0 -8px;
    border-radius: 0;
    padding: 10px 12px;
  }

  .creatorDetailStickyAvatar {
    width: 40px;
    height: 40px;
  }

  .creatorDetailStickyTabs {
    gap: 18px;
  }

  .creatorDetailStickyTabs button {
    min-height: 36px;
    font-size: 13px;
  }
}

.creatorDetailBreadcrumb {
  width: fit-content;
  color: var(--creator-detail-muted);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.creatorDetailBreadcrumb:hover {
  color: var(--creator-detail-accent);
}

.creatorDetailTitleBar h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: 0;
}

.creatorDetailTopGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(300px, 0.36fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.creatorDetailProfileCard,
.creatorDetailOverviewCard,
.creatorDetailDataPanel {
  min-width: 0;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--creator-detail-panel);
  box-shadow: var(--shadow-light);
}

.creatorDetailProfileCard {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 22px 22px 0;
  text-align: center;
}

.creatorDetailProfileActions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.creatorDetailProfileActions button,
.creatorDetailProfileActions a,
.creatorDetailNameBlock button {
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--creator-detail-muted);
  cursor: pointer;
}

.creatorDetailProfileActions button,
.creatorDetailProfileActions a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  text-decoration: none;
}

.creatorDetailProfileActions button {
  gap: 4px;
}

.creatorDetailProfileActions button.active {
  background: var(--creator-detail-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px var(--primary-shadow);
  animation: favoritePulse 320ms ease-out;
}

.creatorDetailProfileActions button.active svg {
  fill: currentColor;
}

.creatorDetailProfileActions button span {
  display: none;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.creatorDetailProfileActions button.isCopied,
.creatorDetailProfileActions button.isCopyFailed {
  width: auto;
  min-width: 62px;
  padding: 0 10px;
}

.creatorDetailProfileActions button.isCopied {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.creatorDetailProfileActions button.isCopyFailed {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.creatorDetailProfileActions button.isCopied span,
.creatorDetailProfileActions button.isCopyFailed span {
  display: inline;
}

.creatorDetailNameBlock button.isCopied {
  color: #047857;
}

.creatorDetailNameBlock button.isCopyFailed {
  color: #b91c1c;
}

.creatorDetailAvatar {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 999px;
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  font-size: 34px;
  font-weight: 950;
}

.creatorDetailAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorDetailNameBlock {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.creatorDetailNameBlock h2,
.creatorDetailNameBlock p,
.creatorDetailBio {
  margin: 0;
}

.creatorDetailNameBlock h2 {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-1);
  font-size: 20px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.creatorDetailNameBlock p {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--creator-detail-muted);
  font-size: 13px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.creatorDetailCategoryPills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.creatorDetailCategoryPills span,
.creatorDetailCategoryPills b {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 850;
}

.creatorDetailCategoryPills span {
  background: var(--tag-bg);
  color: var(--text-2);
}

.creatorDetailCategoryPills b {
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
}

.creatorDetailBio {
  max-width: 340px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}

.creatorDetailInfoList {
  width: calc(100% + 44px);
  display: grid;
  gap: 0;
  margin: 8px -22px 0;
  padding: 16px 22px;
  background: var(--surface-panel-strong);
  text-align: left;
}

.creatorDetailInfoList div {
  min-width: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--creator-detail-line);
}

.creatorDetailInfoList div:last-child {
  border-bottom: 0;
}

.creatorDetailInfoList dt,
.creatorDetailInfoList dd {
  margin: 0;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
}

.creatorDetailInfoList dt {
  color: var(--creator-detail-muted);
  font-weight: 850;
}

.creatorDetailInfoList dd {
  color: var(--text-1);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.creatorDetailInfoList dd a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.creatorDetailInfoList dd a:hover {
  color: var(--creator-detail-accent);
  text-decoration: underline;
}

.creatorDetailInfoList dd .creatorDetailTikTokLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4f7cff;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.35;
}

.creatorDetailTikTokLink svg {
  flex: 0 0 auto;
  color: #253047;
}

.creatorDetailOverviewCard {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.creatorDetailMetricGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.creatorDetailMetricCard {
  min-width: 0;
  min-height: 116px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 14px;
}

.creatorDetailMetricCard strong,
.creatorDetailMetricCard em,
.creatorDetailMetricCard span {
  min-width: 0;
}

.creatorDetailMetricCard strong {
  color: var(--text-1);
  font-size: 24px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.creatorDetailMetricCard em {
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-style: normal;
}

.creatorDetailMetricCard span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 850;
}

.creatorDetailMetricCard b {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--creator-detail-muted);
  font-size: 11px;
}

.creatorDetailSummaryGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 12px;
}

.creatorDetailSummaryGrid article {
  min-width: 0;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--creator-detail-panel);
  padding: 16px;
}

.creatorDetailSummaryGrid p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.6;
}

.creatorDetailSummaryGrid article > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.creatorDetailSummaryGrid article > div span {
  min-width: 0;
  display: block;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--text-2);
  padding: 12px;
  font-size: 13px;
  line-height: 1.65;
}

.creatorDetailSummaryGrid article > div b {
  display: block;
  margin-bottom: 4px;
  color: var(--text-1);
}

.creatorContactCard {
  display: grid;
  align-content: start;
  gap: 12px;
}

.creatorContactCard > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.creatorContactCard span {
  color: var(--text-1);
  font-weight: 900;
}

.creatorContactCard button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--creator-detail-accent);
  color: #fff;
  padding: 0 14px;
  font-weight: 900;
}

.creatorContactCard strong {
  color: var(--creator-detail-accent);
}

.creatorDetailTabsWrap {
  min-width: 0;
  position: sticky;
  top: 76px;
  z-index: 950;
  margin: 0 -22px;
  padding: 0 22px;
}

.creatorDetailTabs {
  min-width: 0;
  position: relative;
  z-index: 80;
  display: flex;
  gap: 28px;
  overflow-x: auto;
  border-bottom: 1px solid var(--creator-detail-line);
  background: color-mix(in srgb, var(--creator-detail-panel) 88%, transparent);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  margin: 0;
  padding: 4px 22px 0;
  scrollbar-width: thin;
}

.creatorDetailTabs button {
  min-height: 44px;
  position: relative;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--creator-detail-muted);
  padding: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.creatorDetailTabs button.active {
  color: var(--creator-detail-accent);
}

.creatorDetailTabs button.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--creator-detail-accent);
}

.creatorDetailSections {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.creatorDetailTopGrid,
.creatorDetailSections > section {
  scroll-margin-top: 140px;
}

.creatorDetailDataPanel {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.creatorDetailPanelHeader {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.creatorDetailPanelHeader h2,
.creatorDetailDataPanel h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  line-height: 1.35;
}

.creatorDetailPanelHeader span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--creator-detail-line);
  border-radius: 999px;
  color: var(--creator-detail-muted);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
}

.creatorDetailDataGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.creatorDetailDataGrid article {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 14px;
}

.creatorDetailDataGrid span {
  color: var(--creator-detail-muted);
  font-size: 13px;
  font-weight: 850;
}

.creatorDetailDataGrid strong {
  color: var(--text-1);
  font-size: 18px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.creatorDetailDataGrid em {
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.creatorDetailTwoColumn {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.creatorDetailSubPanel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--creator-detail-panel);
  padding: 16px;
}

.creatorDetailSubPanel h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.35;
}

.creatorDetailChartCard {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.creatorDetailChartCard svg {
  width: 100%;
  height: 180px;
  display: block;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--creator-detail-accent);
}

.creatorDetailChartCard polyline {
  fill: none;
  stroke: var(--creator-detail-line);
  stroke-width: 1;
}

.creatorDetailChartCard .line {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.creatorDetailChartCard circle {
  fill: #ffffff;
  stroke: currentColor;
  stroke-width: 2;
}

.creatorDetailChartAxis {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-weight: 750;
}

.creatorDetailBarList {
  display: grid;
  gap: 13px;
}

.creatorDetailBarList div {
  min-width: 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 10px;
}

.creatorDetailBarList span,
.creatorDetailBarList em {
  color: var(--text-2);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.creatorDetailBarList em {
  color: var(--text-1);
  text-align: right;
}

.creatorDetailBarList b {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-panel-strong);
}

.creatorDetailBarList i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--creator-detail-accent);
}

.creatorAudiencePanel {
  gap: 20px;
  background: color-mix(in srgb, var(--creator-detail-panel) 92%, var(--primary-soft));
}

.creatorAudiencePanel .creatorDetailPanelHeader h2 {
  color: var(--text-1);
}

.creatorAudiencePanel .creatorDetailPanelHeader span {
  border-color: var(--creator-detail-line);
  background: var(--creator-detail-panel);
  color: var(--creator-detail-muted);
}

.creatorAudienceLayout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.creatorAudienceStack {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 18px;
}

.creatorAudienceCard {
  min-width: 0;
  display: grid;
  gap: 18px;
  border-radius: 16px;
  border: 1px solid var(--creator-detail-line);
  background: var(--creator-detail-panel);
  padding: 22px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
}

.creatorAudienceCard header {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.creatorAudienceCard h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.35;
}

.creatorAudienceCard p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.6;
}

.creatorAudienceRows {
  display: grid;
  gap: 18px;
}

.creatorAudienceRow {
  min-width: 0;
  min-height: 60px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 64px minmax(128px, 0.55fr);
  align-items: center;
  gap: 22px;
  border-radius: 14px;
  background: var(--surface-panel-strong);
  padding: 0 22px;
}

.creatorAudienceRow span {
  min-width: 0;
  overflow: hidden;
  color: var(--creator-detail-muted);
  font-size: 16px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorAudienceRow em {
  color: var(--text-1);
  font-size: 18px;
  font-style: normal;
  font-weight: 760;
  text-align: right;
}

.creatorAudienceRow b {
  height: 26px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 999px;
}

.creatorAudienceRow i {
  width: 0;
  height: 100%;
  display: block;
  border-radius: 999px;
  background: var(--creator-detail-accent);
}

.creatorAudienceCard.compact {
  max-height: 432px;
  overflow-y: auto;
  scrollbar-color: rgba(148, 163, 184, 0.75) transparent;
  scrollbar-width: thin;
}

.creatorAudienceFanType {
  gap: 20px;
}

.creatorAudienceFanBody {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 0.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
}

.creatorAudienceDonut {
  width: 190px;
  height: 190px;
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
}

.creatorAudienceDonut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.creatorAudienceDonut circle {
  fill: none;
  stroke-width: 18;
}

.creatorAudienceDonut .track {
  stroke: var(--line-dark);
}

.creatorAudienceDonut .segment {
  stroke-linecap: butt;
}

.creatorAudienceDonut .segment.pink {
  stroke: var(--creator-detail-accent);
}

.creatorAudienceDonut .segment.green {
  stroke: var(--accent);
}

.creatorAudienceDonut .segment.blue {
  stroke: var(--success);
}

.creatorAudienceDonut strong {
  position: absolute;
  color: var(--creator-detail-accent);
  font-size: 42px;
  font-weight: 950;
  line-height: 1;
}

.creatorAudienceLegend {
  min-width: 0;
  display: grid;
  gap: 20px;
  border-radius: 14px;
  background: var(--surface-panel-strong);
  padding: 22px;
}

.creatorAudienceLegend div {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
}

.creatorAudienceLegend span {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 999px;
}

.creatorAudienceLegend span.pink {
  background: var(--creator-detail-accent);
}

.creatorAudienceLegend span.green {
  background: var(--accent);
}

.creatorAudienceLegend span.blue {
  background: var(--success);
}

.creatorAudienceLegend strong,
.creatorAudienceLegend em {
  color: var(--text-1);
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
}

.creatorAudienceLegend em {
  text-align: right;
}

.creatorAudienceLegend p {
  grid-column: 2 / -1;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

.creatorActivePanel {
  gap: 24px;
  background: #ffffff;
}

.creatorActiveHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  margin: -22px -22px 0;
  padding: 24px 22px;
}

.creatorActiveHeader h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1f2a44;
  font-size: 22px;
  font-weight: 950;
}

.creatorActiveHeader h2 span,
.creatorActiveInfoCard h3 span {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #cfd5df;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.creatorActiveRange {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #617895;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.creatorActiveRange button,
.creatorActiveRange strong {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 8px;
  background: #f7f8fa;
  color: #617895;
  padding: 0 12px;
  font: inherit;
}

.creatorActiveRange button.active {
  background: #ffe6ef;
  color: var(--primary);
}

.creatorActiveRange span {
  color: #94a3b8;
}

.creatorActiveChartCard {
  min-width: 0;
  display: grid;
  gap: 12px;
  border-radius: 18px;
  background: #ffffff;
  padding: 26px 18px 20px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
}

.creatorActiveChartCard h3 {
  margin: 0;
  color: #1f2a44;
  font-size: 17px;
  font-weight: 950;
}

.creatorActiveChartCard svg {
  width: 100%;
  height: 300px;
  display: block;
  overflow: visible;
}

.creatorActiveChartCard line {
  stroke: rgba(148, 163, 184, 0.14);
  stroke-dasharray: 4 8;
  stroke-width: 1;
}

.creatorActiveChartCard polygon {
  fill: color-mix(in srgb, var(--primary) 4%, transparent);
}

.creatorActiveChartCard polyline {
  fill: none;
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.creatorActiveChartCard circle {
  fill: var(--primary);
  stroke: #ffffff;
  stroke-width: 2;
}

.creatorActiveChartAxis {
  display: grid;
  grid-template-columns: repeat(24, minmax(34px, 1fr));
  gap: 6px;
  overflow-x: auto;
  color: #617895;
  font-size: 12px;
  font-weight: 800;
}

.creatorActiveChartAxis span {
  text-align: center;
  white-space: nowrap;
}

.creatorActiveCards {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.creatorActiveInfoCard {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 22px;
  border-radius: 16px;
  background: #ffffff;
  padding: 26px 30px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
}

.creatorActiveInfoCard h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1f2a44;
  font-size: 18px;
  font-weight: 950;
}

.creatorActiveInfoCard > div {
  display: grid;
  gap: 16px;
}

.creatorActiveInfoCard p {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin: 0;
  color: #526276;
  font-size: 16px;
  font-weight: 760;
}

.creatorActiveInfoCard strong,
.creatorActiveInfoCard em,
.creatorActiveInfoCard b {
  min-width: 0;
  color: #526276;
  font-style: normal;
  font-weight: 800;
}

.creatorActiveInfoCard em {
  text-align: right;
}

.creatorActiveInfoCard b {
  margin-top: 4px;
  color: #4b596b;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
}

.creatorActiveSummaryBody {
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.creatorActiveSummaryCard .creatorAudienceDonut {
  width: 116px;
  height: 116px;
}

.creatorActiveSummaryCard .creatorAudienceDonut circle {
  stroke-width: 15;
}

.creatorActiveSummaryCard .creatorAudienceDonut strong {
  display: none;
}

.creatorDetailHeatmap {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px repeat(5, minmax(88px, 1fr));
  gap: 8px;
  overflow-x: auto;
}

.creatorDetailHeatmap > b {
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.creatorDetailHeatmapRow {
  display: contents;
}

.creatorDetailHeatmapRow strong {
  min-height: 36px;
  display: grid;
  align-items: center;
  color: var(--text-2);
  font-size: 13px;
}

.creatorDetailHeatmapRow i {
  min-height: 36px;
  border-radius: 8px;
  background: var(--creator-detail-accent);
}

.creatorDetailTableWrap {
  min-width: 0;
  overflow-x: auto;
}

.creatorDetailTableWrap.cuiDataList {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.creatorDetailTableWrap .cuiDataListBody {
  overflow-x: auto;
}

.creatorDetailTable {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
}

.creatorDetailTable th,
.creatorDetailTable td,
.creatorDetailTable .cuiDataListTableHeadCell,
.creatorDetailTable .cuiDataListTableCell {
  border-bottom: 1px solid var(--creator-detail-line);
  color: var(--text-2);
  padding: 12px 10px;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  white-space: nowrap;
}

.creatorDetailTable th,
.creatorDetailTable .cuiDataListTableHeadCell {
  color: var(--creator-detail-muted);
  font-weight: 900;
}

.creatorDetailTable td,
.creatorDetailTable .cuiDataListTableCell {
  color: var(--text-1);
  font-weight: 750;
}

.creatorDetailTable .right {
  text-align: right;
}

.creatorSimilarGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.creatorSimilarGrid article {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 14px;
}

.creatorSimilarGrid article > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.creatorSimilarGrid span {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  font-weight: 950;
  overflow: hidden;
}

.creatorSimilarGrid span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorSimilarGrid strong {
  min-width: 0;
  color: var(--text-1);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.creatorSimilarGrid p,
.creatorDetailNote {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.creatorSimilarGrid dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.creatorSimilarGrid dt,
.creatorSimilarGrid dd {
  margin: 0;
  font-size: 12px;
}

.creatorSimilarGrid dt {
  color: var(--creator-detail-muted);
  font-weight: 800;
}

.creatorSimilarGrid dd {
  color: var(--text-1);
  font-weight: 900;
}

.creatorSimilarGrid button,
.creatorSimilarGrid article > a {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--creator-detail-accent);
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
}

@media (max-width: 1280px) {
  .creatorSearchPanel {
    padding: 20px;
  }

  .creatorSearchTop {
    align-items: stretch;
    flex-direction: column;
  }

  .creatorSearchBox {
    width: 100%;
  }

  .creatorSearchFilterRow > strong,
.creatorAdvancedRow > strong,
.creatorSelectedBar > strong {
    width: 86px;
    min-width: 86px;
    font-size: 14px;
  }

  .creatorSearchChipList {
    gap: 8px 12px;
  }

  .creatorSearchChip,
.creatorSelectPill {
    font-size: 14px;
  }

  .creatorDetailTopGrid,
.creatorDetailSummaryGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .creatorDetailMetricGrid,
.creatorDetailTwoColumn,
.creatorSimilarGrid,
.creatorDetailDataGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {

  .creatorSearchBox {
    height: 48px;
  }

  .creatorSearchTypePill {
    width: 154px;
    flex: 0 0 154px;
  }

  .creatorSearchTypePill .filterSelectTrigger {
    padding-left: 16px;
  }

  .creatorSearchTypePill .filterSelectValue {
    max-width: 96px;
  }

  .creatorSearchSubmit {
    flex-basis: 56px;
    width: 56px;
  }

  .creatorSearchFilterRow,
.creatorAdvancedRow,
.creatorSelectedBar {
    align-items: stretch;
    flex-direction: column;
  }

  .creatorEmptyResult {
    min-height: 360px;
    gap: 14px;
    padding: 24px 12px;
  }

  .creatorEmptyIllustration {
    width: min(210px, 72vw);
    height: 140px;
  }

  .creatorEmptyResult h2 {
    font-size: 15px;
  }

  .creatorCommerceCategoryPanel .creatorCommerceCategoryPopover {
    width: calc(100vw - 64px);
    grid-template-columns: minmax(0, 1fr);
    left: 0;
  }

  .creatorCommerceCategoryPanel {
    overflow: visible;
  }

  .creatorCommerceCategoryMenu.secondary {
    border-top: 1px solid var(--creator-line);
    border-left: 0;
  }

  .creatorSearchFilterRow.compact {
    align-items: flex-start;
  }

  .creatorAdvancedRow {
    grid-template-columns: minmax(0, 1fr);
  }

  .creatorAdvancedRow > div {
    flex-direction: column;
  }

  .creatorSearchFilterRow > strong,
.creatorAdvancedRow > strong,
.creatorSelectedBar > strong {
    width: auto;
    min-width: 0;
    justify-content: flex-start;
    text-align: left;
  }

  .creatorSelectedBar > div {
    min-width: 0;
  }

  .creatorDetailProfileCard,
.creatorDetailOverviewCard,
.creatorDetailDataPanel {
    padding: 18px;
  }

  .creatorDetailProfileCard {
    padding-bottom: 0;
  }

  .creatorDetailProfileActions {
    justify-content: center;
  }

  .creatorDetailInfoList {
    margin-right: -18px;
    margin-left: -18px;
    padding: 18px;
  }

  .creatorDetailInfoList div,
.creatorDetailSummaryGrid article > div,
.creatorDetailMetricGrid,
.creatorDetailTwoColumn,
.creatorAudienceLayout,
.creatorAudienceFanBody,
.creatorSimilarGrid,
.creatorDetailDataGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .creatorAudienceCard {
    padding: 16px;
  }

  .creatorAudienceCard header {
    align-items: flex-start;
    flex-direction: column;
  }

  .creatorAudienceRow {
    grid-template-columns: minmax(0, 1fr) 54px minmax(82px, 0.48fr);
    gap: 10px;
    padding: 0 14px;
  }

  .creatorAudienceRow span {
    font-size: 14px;
  }

  .creatorAudienceRow em {
    font-size: 15px;
  }

  .creatorAudienceDonut {
    width: 160px;
    height: 160px;
  }

  .creatorActiveHeader {
    align-items: flex-start;
    flex-direction: column;
    margin: -18px -18px 0;
    padding: 18px;
  }

  .creatorActiveRange {
    width: 100%;
    overflow-x: auto;
  }

  .creatorActiveChartCard {
    padding: 18px 12px 16px;
  }

  .creatorActiveChartCard svg {
    height: 220px;
  }

  .creatorActiveCards,
.creatorActiveSummaryBody {
    grid-template-columns: minmax(0, 1fr);
  }

  .creatorActiveInfoCard {
    padding: 20px 18px;
  }

  .creatorActiveSummaryCard .creatorAudienceDonut {
    width: 132px;
    height: 132px;
  }

  .creatorDetailMetricCard {
    min-height: 132px;
  }

  .creatorDetailTabs {
    gap: 18px;
  }
}

.commerceDataListPanel.creatorResultPanel .creatorPhoto {
  width: var(--commerce-list-media);
  height: var(--commerce-list-media);
  flex: 0 0 var(--commerce-list-media);
}

.commerceDataListPanel.creatorResultPanel .creatorPhoto {
  border-radius: 999px;
  font-size: 16px;
}

.commerceDataListPanel.creatorResultPanel .creatorIdentityCell strong {
  color: var(--commerce-list-text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.35;
}

.commerceDataListPanel.creatorResultPanel .creatorIdentityCell em,
.commerceDataListPanel.creatorResultPanel .creatorIdentityCell small {
  margin-top: 5px;
  color: var(--commerce-list-muted);
  font-size: 12px;
  line-height: 1.4;
}

.commerceDataListPanel.creatorResultPanel .creatorTrendCell svg {
  width: var(--commerce-list-chart-width);
  height: var(--commerce-list-chart-height);
}

.commerceDataListPanel.creatorResultPanel .creatorFavoriteAction {
  width: var(--commerce-list-action-size);
  height: var(--commerce-list-action-size);
  border: 1px solid #e8edf4;
  border-radius: 999px;
  background: #fff;
  color: var(--commerce-list-muted);
  box-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
}

.commerceDataListPanel.creatorResultPanel .cuiDataListToolbar {
  justify-content: flex-end;
}

.commerceDataListPanel.creatorResultPanel .creatorResultActions {
  gap: 10px;
}

.commerceDataListPanel.creatorResultPanel .creatorResultActions > button {
  min-height: 38px;
  border: 1px solid #e8edf4;
  border-radius: 12px;
  background: #fff;
  color: #364152;
  box-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
  font-size: 14px;
  font-weight: 700;
}

.commerceDataListPanel.creatorResultPanel .creatorResultActions > button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--primary) 24%, #e8edf4);
  background: color-mix(in srgb, var(--primary) 6%, #ffffff);
  color: var(--primary);
}

.commerceDataListPanel.creatorResultPanel .creatorSearchTable {
  width: 1740px;
}

.commerceDataListPanel.creatorResultPanel .creatorSearchTableRow {
  grid-template-columns:
    320px
    150px
    160px
    230px
    180px
    140px
    150px
    120px
    120px
    170px
    100px;
}

.commerceDataListPanel.creatorResultPanel .creatorSearchTableRow.head {
  border-top: 1px solid var(--commerce-list-line);
}

.commerceDataListPanel.creatorResultPanel .creatorIdentityCell {
  grid-template-columns: calc(var(--commerce-list-media) + 18px) minmax(0, 1fr);
  gap: 18px;
  padding-left: var(--commerce-list-cell-x);
}

.commerceDataListPanel.creatorResultPanel .creatorSourceIcons span {
  width: 20px;
  height: 20px;
}

.commerceDataListPanel.creatorResultPanel .creatorCommerceTags {
  padding-right: 8px;
}

.commerceDataListPanel.creatorResultPanel .creatorCommerceTags b,
.commerceDataListPanel.creatorResultPanel .creatorCommerceTags em {
  min-height: 26px;
  padding: 0 9px;
  font-size: 12px;
}

.commerceDataListPanel.creatorResultPanel .creatorSalesMetric {
  min-height: var(--commerce-list-row-height);
  background: color-mix(in srgb, var(--creator-accent) 5%, #ffffff);
  color: var(--commerce-list-text);
  font-weight: 950;
}

.commerceDataListPanel.creatorResultPanel .cuiDataListFooter > .creatorPager {
  width: 100%;
  justify-content: center;
  padding: 0;
}

.commerceDataListPanel.creatorResultPanel .creatorPager button,
.commerceDataListPanel.creatorResultPanel .creatorPager .cuiPaginationEllipsis {
  width: 40px;
  height: 40px;
  border: 1px solid #e8edf4;
  border-radius: 10px;
  background: #fff;
  color: var(--commerce-list-muted);
  font-size: 14px;
}

.commerceDataListPanel.creatorResultPanel .creatorPager button.active {
  border-color: color-mix(in srgb, var(--primary) 34%, #e8edf4);
  background: color-mix(in srgb, var(--primary) 12%, #ffffff);
  color: var(--primary);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 10%, transparent);
}

.commerceDataListPanel.creatorResultPanel .creatorPager .cuiPaginationJump {
  color: var(--commerce-list-muted);
  font-size: 14px;
}

.commerceDataListPanel.creatorResultPanel .creatorPager .cuiPaginationJump {
  margin-left: 16px;
}

.commerceDataListPanel.creatorResultPanel .creatorPager .cuiPaginationJump input {
  width: 58px;
  height: 38px;
}

.commerceDataListPanel.creatorResultPanel .creatorPager button,
.commerceDataListPanel.creatorResultPanel .creatorPager .cuiPaginationEllipsis,
.commerceDataListPanel.creatorResultPanel .creatorResultActions > button {
  border-color: var(--commerce-control-line);
  background: var(--commerce-control-bg);
  box-shadow: var(--commerce-control-shadow);
}

.commerceDataListPanel.creatorResultPanel .creatorPager button:not(:disabled):hover,
.commerceDataListPanel.creatorResultPanel .creatorResultActions > button:not(:disabled):hover {
  border-color: var(--commerce-control-line-hover);
}

.creatorSearchTypeSelect {
  flex: 0 0 186px;
  width: 186px;
  min-width: 0;
  height: 100%;
  border-right: 1px solid var(--creator-line);
  background: #ffffff;
}

.creatorSearchTypeSelect.ant-select,
.creatorSearchTypeSelect .ant-select-selector,
.creatorSearchTypeSelect .ant-select-selection-wrap,
.creatorSearchTypeSelect .ant-select-selection-item {
  height: 100% !important;
}

.creatorSearchTypeSelect .ant-select-selector {
  padding: 0 16px 0 30px !important;
  border: 0 !important;
  border-radius: 999px 0 0 999px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.creatorSearchTypeSelect.ant-select-focused .ant-select-selector,
.creatorSearchTypeSelect.ant-select-open .ant-select-selector,
.creatorSearchTypeSelect .ant-select-selector:hover,
.creatorSearchTypeSelect .ant-select-selector:focus,
.creatorSearchTypeSelect .ant-select-selector:active {
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.creatorSearchTypeSelect .ant-select-selection-item {
  display: flex;
  align-items: center;
  color: var(--creator-text) !important;
  font-size: 14px;
  font-weight: 900;
}

.creatorSearchTypeSelect.ant-select-disabled .ant-select-selection-item {
  color: var(--creator-text) !important;
  opacity: 1;
}

.creatorSearchTypeSelect .ant-select-arrow {
  color: #9aa7b8;
}

.creatorAntSelectPill {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--creator-line);
  border-radius: 8px;
  background: var(--creator-select-bg);
  color: var(--creator-text);
  padding: 0 6px 0 12px;
  font-size: 13px;
  font-weight: 750;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
}

.creatorAntSelectPill > span {
  flex: 0 0 auto;
  color: var(--creator-muted);
}

.creatorAntSelectPill .ant-select {
  min-width: 82px;
}

.creatorSearchTypePill.creatorAntSelectPill {
  width: 148px;
  min-width: 148px;
  height: 100%;
  min-height: 40px;
  align-self: stretch;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: var(--control-bg);
  box-shadow: none;
  padding: 0 8px 0 18px;
}

.creatorSearchTypePill.creatorAntSelectPill .ant-select-selector {
  height: 100% !important;
  border-radius: 999px 0 0 999px !important;
  background: transparent !important;
  color: var(--creator-text) !important;
  box-shadow: none !important;
}

.creatorSearchTypePill.creatorAntSelectPill .ant-select-selection-item {
  color: var(--creator-text) !important;
}

.creatorSearchTypePill.creatorAntSelectPill .ant-select-selection-wrap,
.creatorSearchTypePill.creatorAntSelectPill .ant-select-selection-item {
  height: 100%;
  line-height: 40px;
}

.creatorPager button,
.creatorPagerEllipsis {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--pager-muted);
  font-size: 15px;
  font-weight: 800;
}

.creatorPagerEllipsis {
  letter-spacing: 2px;
}

.creatorPagerJump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--pager-muted);
  padding: 3px 4px 3px 10px;
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.creatorPagerJump:focus-within {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.creatorPagerJump input {
  width: 58px;
  height: 38px;
  border: 1px solid var(--creator-line, var(--line-dark));
  border-radius: 8px;
  outline: 0;
  background: var(--creator-select-bg, var(--surface-panel));
  color: var(--pager-text);
  padding: 0 10px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.03);
  font-weight: 850;
  text-align: center;
}

.creatorPagerJump input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft), inset 0 0 0 1px rgba(15, 23, 42, 0.03);
}

[data-theme='dark'] .creatorPagerJump input {
  border-color: var(--creator-line);
  background: var(--surface-panel);
}

[data-theme='dark'] .creatorPagerJump:focus-within {
  border-color: var(--primary-light);
  background: color-mix(in srgb, var(--creator-accent) 18%, transparent);
  color: #fff;
  box-shadow: 0 0 0 3px var(--primary-soft);
}

[data-theme='dark'] .creatorPagerJump input:focus {
  border-color: var(--primary-light);
  background: var(--surface-panel-strong);
  box-shadow: 0 0 0 3px var(--primary-soft), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.creatorDetailPage {
  min-width: var(--workspace-canvas-min-width);
}

.creatorHeroPanel {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.08)),
    var(--surface-panel);
}

.creatorFilterPanel {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.creatorFilterPanel {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(128px, 1fr)) minmax(150px, 1fr) minmax(150px, 1.2fr) minmax(86px, 0.5fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
}

.creatorFilterPanel {
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(128px, 1fr)) minmax(86px, 0.5fr) auto;
}

.creatorGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.creatorCard {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.creatorCardHead,
.creatorCardFoot {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.creatorCardHead {
  justify-content: space-between;
}

.creatorCardHead > div:nth-child(2) {
  min-width: 0;
  flex: 1 1 auto;
}

.creatorCardHead strong,
.creatorCardHead em,
.creatorCardFoot small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorCardHead strong {
  color: var(--text-1);
}

.creatorCardHead em,
.creatorCard p,
.creatorCardFoot small,
.creatorMetaNote {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.6;
}

.creatorCard p {
  min-height: 42px;
  margin: 0;
}

.creatorAvatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-light);
  font-size: 18px;
  font-weight: 900;
  overflow: hidden;
}

.creatorAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorMetricGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.creatorMetricGrid span {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 10px;
}

.creatorMetricGrid strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorMetricGrid em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.creatorCardFoot {
  justify-content: space-between;
}

.creatorCardFoot a {
  flex: 0 0 auto;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-light);
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.creatorDetailPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
}

.creatorDetailHero {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.08)),
    var(--surface-panel);
}

.creatorMatchGrid,
.creatorDataObjectGrid {
  display: grid;
  gap: 10px;
}

.creatorMatchGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creatorMatchGrid article,
.creatorDataObjectGrid span {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.creatorMatchGrid strong,
.creatorMatchGrid span,
.creatorDataObjectGrid span {
  display: block;
}

.creatorMatchGrid strong {
  color: var(--text-1);
}

.creatorMatchGrid span,
.creatorDataObjectGrid span {
  overflow-wrap: anywhere;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.creatorMetaNote {
  margin: 12px 0 0;
}

.favoriteTableCreator .creatorAvatar {
  overflow: hidden;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.favoriteTableCreator .creatorAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorSearchPage {
  --creator-accent: var(--primary);
  --creator-accent-2: var(--accent);
  --creator-accent-soft: var(--primary-soft);
  --creator-text: var(--text-1);
  --creator-muted: var(--text-3);
  --creator-line: var(--line-dark);
  --creator-panel: #ffffff;
  --creator-popover-bg: #ffffff;
  --creator-popover-secondary-bg: #ffffff;
  --creator-select-bg: #ffffff;
  --creator-switch-off-bg: #e2e8f0;
  --creator-switch-off-border: #cbd5e1;
  --creator-switch-knob: #ffffff;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  row-gap: 24px;
  color: var(--creator-text);
}

[data-theme='dark'] .creatorSearchPage {
  --creator-panel: var(--surface-panel);
  --creator-popover-bg: var(--bg-sidebar);
  --creator-popover-secondary-bg: var(--surface-panel-strong);
  --creator-select-bg: rgba(255, 255, 255, 0.08);
  --creator-switch-off-bg: rgba(255, 255, 255, 0.12);
  --creator-switch-off-border: rgba(255, 255, 255, 0.18);
  --creator-switch-knob: #e2e8f0;
}

.creatorSearchHeader {
  min-height: 28px;
  display: flex;
  align-items: flex-start;
  margin: 0;
}

.creatorSearchHeader h1 {
  margin: 0;
  color: var(--creator-text);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
}

.creatorSearchPanel,
.creatorResultPanel {
  border: 1px solid var(--creator-line);
  border-radius: 8px;
  background: var(--creator-panel);
  box-shadow: var(--shadow-light);
}

.creatorSearchPanel {
  display: grid;
  gap: 0;
  overflow: visible;
  padding: 20px 24px;
}

.creatorResultPanel {
  overflow-x: auto;
}

.creatorStandaloneLoading {
  min-height: 100vh;
  overflow-x: auto;
  background: var(--bg-app);
  padding: 24px;
}

.creatorSearchTop {
  display: flex;
  align-items: center;
  gap: 10px;
}

.creatorSearchBox {
  width: min(760px, 100%);
  min-width: 0;
  height: 52px;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  border: 1.5px solid var(--creator-line);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.creatorSearchBox:hover {
  border-color: #cbd5e1;
}

.creatorSearchBox:focus-within {
  border-color: var(--creator-accent);
  box-shadow: 0 0 0 3px var(--creator-accent-soft), 0 4px 14px rgba(15, 23, 42, 0.06);
}

.creatorSearchBox *,
.creatorSearchBox *::before,
.creatorSearchBox *::after {
  animation: none !important;
  transition: none !important;
}

.creatorSearchTypeSelect {
  flex: 0 0 178px;
  width: 178px;
  min-width: 0;
  height: 100%;
  position: relative;
  background: #ffffff;
}

.creatorSearchTypeSelect::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: var(--creator-line);
}

.creatorSearchTypeSelect.ant-select,
.creatorSearchTypeSelect .ant-select-selector,
.creatorSearchTypeSelect .ant-select-selection-wrap,
.creatorSearchTypeSelect .ant-select-selection-item {
  height: 100% !important;
}

.creatorSearchTypeSelect .ant-select-selector {
  padding: 0 16px 0 30px !important;
  border: 0 !important;
  border-radius: 999px 0 0 999px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.creatorSearchTypeSelect.ant-select-focused .ant-select-selector,
.creatorSearchTypeSelect.ant-select-open .ant-select-selector,
.creatorSearchTypeSelect .ant-select-selector:hover,
.creatorSearchTypeSelect .ant-select-selector:focus,
.creatorSearchTypeSelect .ant-select-selector:active {
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.creatorSearchTypeSelect .ant-select-selection-item {
  display: flex;
  align-items: center;
  color: var(--creator-text) !important;
  font-size: 14px;
  font-weight: 600;
}

.creatorSearchTypeSelect.ant-select-disabled .ant-select-selection-item {
  color: var(--creator-text) !important;
  opacity: 1;
}

.creatorSearchTypeSelect .ant-select-arrow {
  color: #9aa7b8;
}

.creatorSearchKeywordInput,
.creatorSearchKeywordInput:hover,
.creatorSearchKeywordInput:focus,
.creatorSearchKeywordInput:active,
.creatorSearchKeywordInput.ant-input,
.creatorSearchKeywordInput.ant-input:hover,
.creatorSearchKeywordInput.ant-input:focus,
.creatorSearchKeywordInput.ant-input:active,
.creatorSearchKeywordInput.ant-input-borderless,
.creatorSearchKeywordInput.ant-input-borderless:hover,
.creatorSearchKeywordInput.ant-input-borderless:focus,
.creatorSearchKeywordInput.ant-input-borderless:active,
.creatorSearchBox:focus-within .creatorSearchKeywordInput {
  --ant-input-active-bg: #ffffff !important;
  --ant-input-hover-bg: #ffffff !important;
  --ant-input-color-bg-container: #ffffff !important;
  --ant-input-color-bg-container-disabled: #ffffff !important;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 22px;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--creator-text) !important;
  font-size: 14px;
  box-shadow: none !important;
  outline: 0 !important;
}

.creatorSearchKeywordInput:disabled,
.creatorSearchKeywordInput.ant-input-disabled {
  background: #ffffff !important;
  color: var(--creator-text) !important;
  opacity: 1;
  -webkit-text-fill-color: var(--creator-text);
}

.creatorSearchKeywordInput::placeholder {
  color: #a3afc2 !important;
}

.creatorSearchSubmit,
.creatorSearchSubmit:hover,
.creatorSearchSubmit:focus,
.creatorSearchSubmit:focus-visible,
.creatorSearchSubmit:active,
.creatorSearchSubmit.ant-btn-primary:not(:disabled):not(.ant-btn-disabled):hover,
.creatorSearchSubmit.ant-btn-primary:not(:disabled):not(.ant-btn-disabled):focus,
.creatorSearchSubmit.ant-btn-primary:not(:disabled):not(.ant-btn-disabled):active {
  flex: 0 0 72px;
  align-self: stretch;
  width: 72px;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  background: var(--creator-accent) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: none !important;
}

.creatorSearchSubmit::before,
.creatorSearchSubmit::after,
.creatorSearchSubmit[ant-click-animating-without-extra-node]::after,
.creatorSearchSubmit.ant-click-animating-node::after,
.creatorSearchSubmit .ant-wave {
  display: none !important;
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

.creatorSearchSubmit .anticon,
.creatorSearchSubmit svg {
  color: #ffffff !important;
}

.creatorSearchSubmit:not(:disabled):hover {
  filter: brightness(1.08);
}

.creatorCollectButton {
  height: 52px;
  border: 1.5px solid var(--creator-accent);
  border-radius: 999px;
  background: #ffffff;
  color: var(--creator-accent);
  font-weight: 700;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: none;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.creatorCollectButton svg {
  transition: color 0.2s ease;
}

.creatorCollectButton:hover:not(:disabled) {
  background: var(--creator-accent);
  color: #ffffff;
  box-shadow: 0 4px 14px var(--creator-accent-soft);
}

.creatorCollectButton:hover:not(:disabled) svg {
  color: #ffffff;
}

.creatorCollectButton:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.creatorCollectOverlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: rgba(15, 23, 42, 0.28);
}

.creatorCollectModal {
  position: relative;
  width: min(850px, calc(100vw - 32px));
  min-height: 218px;
  padding: 42px 52px 46px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}

.creatorCollectClose {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8b95a5;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}

.creatorCollectClose:hover {
  color: #1f2937;
}

.creatorCollectModal h2 {
  margin: 0 0 26px;
  color: #111827;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.creatorCollectForm {
  display: flex;
  align-items: stretch;
  min-height: 56px;
  overflow: hidden;
  border-radius: 8px;
  background: #f6f7f9;
}

.creatorCollectForm input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #273449;
  font-size: 16px;
  font-weight: 600;
  outline: 0;
  padding: 0 22px;
}

.creatorCollectForm input::placeholder {
  color: #9aa4b2;
  font-weight: 600;
}

.creatorCollectForm input:disabled {
  cursor: not-allowed;
}

.creatorCollectForm button {
  flex: 0 0 78px;
  width: 78px;
  border: 0;
  background: #ff1f63;
  color: #ffffff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 22px;
}

.creatorCollectForm button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.creatorCollectFeedback {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.creatorCollectFeedback.error {
  color: #e11d48;
}

.creatorCollectFeedback.success {
  color: #059669;
}

.creatorSearchDivider {
  height: 1px;
  margin: 6px 0;
  background: var(--creator-line);
}

.creatorSearchFilterRow {
  display: flex;
  align-items: start;
  gap: 8px;
  min-width: 0;
  overflow: visible;
  padding: 7px 0;
}

.creatorSearchFilterRow.compact {
  align-items: center;
  flex-wrap: wrap;
}

.creatorSearchFilterRow > strong,
.creatorAdvancedRow > strong {
  width: 86px;
  min-width: 86px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--creator-muted);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.creatorSearchChipList {
  min-width: 0;
  flex: 1 1;
}

.creatorSearchChipList {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
}

.creatorAntSegmented.ant-segmented {
  max-width: 100%;
  background: transparent;
}

.creatorAntSegmented .ant-segmented-group {
  flex-wrap: wrap;
  gap: 7px 12px;
}

.creatorAntSegmented .ant-segmented-item {
  border-radius: 999px;
  color: var(--creator-text);
  font-size: 13px;
  font-weight: 800;
}

.creatorAntSegmented .ant-segmented-item-label {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  line-height: 30px;
}

.creatorAntSegmented .ant-segmented-thumb,
.creatorAntSegmented .ant-segmented-item-selected {
  border-radius: 999px;
  background: var(--creator-accent);
  color: var(--accent-on-primary, #ffffff);
}

.creatorAntSegmented em {
  margin-left: 4px;
  border-radius: 999px;
  background: var(--success);
  color: var(--accent-on-primary, #ffffff);
  padding: 1px 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.creatorSearchChipTrailing {
  display: inline-flex;
}

.creatorCommerceCategoryRow {
  align-items: flex-start;
}

.creatorCommerceCategoryPanel {
  min-width: 0;
  position: relative;
  overflow: visible;
  flex: 1 1;
}

.creatorCommerceCategoryHeader {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 16px;
}

.creatorCommerceCategoryHeader button,
.creatorCommerceCategoryMenu button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--creator-text);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 800;
}

.creatorCommerceCategoryHeader button.active,
.creatorCommerceCategoryMenu button.selected {
  background: var(--creator-accent);
  color: var(--accent-on-primary, #ffffff);
}

.creatorCommerceCategoryPanel .creatorCommerceCategoryPopover {
  width: min(520px, calc(100vw - 48px));
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 68px;
  display: grid;
  grid-template-columns: minmax(190px, 0.95fr) minmax(190px, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--creator-line);
  border-radius: 18px;
  background: var(--creator-popover-bg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.creatorCommerceCategoryMenu {
  min-width: 0;
  max-height: 260px;
  display: grid;
  align-content: start;
  overflow-y: auto;
  padding: 10px;
  scrollbar-color: rgba(148, 163, 184, 0.8) rgba(148, 163, 184, 0.16);
  scrollbar-width: thin;
}

.creatorCommerceCategoryMenu.secondary {
  border-left: 1px solid var(--creator-line);
  background: var(--surface-panel-strong);
}

.creatorCommerceCategoryMenu button {
  width: 100%;
  min-height: 42px;
  justify-content: space-between;
  border-radius: 8px;
  padding: 0 12px;
  text-align: left;
}

.creatorCommerceCategoryMenu button.active:not(.selected) {
  background: var(--surface-panel-strong);
  color: var(--creator-accent);
}

.creatorCommerceCategoryMenu.secondary button.active:not(.selected) {
  background: var(--creator-popover-secondary-bg);
}

.creatorCommerceCategoryMenu button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorSearchChip {
  min-height: 30px;
  position: relative;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--creator-text);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 750;
}

.creatorSearchChip.active {
  background: var(--creator-accent);
  color: var(--accent-on-primary, #ffffff);
  padding: 0 16px;
}

.creatorSearchChip em {
  position: absolute;
  top: -7px;
  right: -14px;
  border-radius: 999px;
  background: var(--success);
  color: var(--accent-on-primary, #ffffff);
  padding: 1px 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.creatorSwitch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--creator-text);
  font-size: 13px;
  font-weight: 750;
}

.creatorSwitch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.creatorSwitch span {
  width: 46px;
  height: 24px;
  position: relative;
  border: 1px solid var(--creator-accent);
  border-radius: 999px;
  background: var(--creator-accent);
}

.creatorSwitch span::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--creator-switch-knob, #fff);
}

.creatorSwitch input:not(:checked) + span {
  border-color: var(--creator-switch-off-border);
  background: var(--creator-switch-off-bg);
}

.creatorSwitch input:not(:checked) + span::after {
  right: auto;
  left: 3px;
}

.creatorAntSelectPill {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--creator-line);
  border-radius: 8px;
  background: var(--creator-select-bg);
  color: var(--creator-text);
  padding: 0 6px 0 12px;
  font-size: 13px;
  font-weight: 750;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
}

.creatorAntSelectPill > span {
  flex: 0 0 auto;
  color: var(--creator-muted);
}

.creatorAntSelectPill .ant-select {
  min-width: 82px;
}

.creatorSearchTypePill.creatorAntSelectPill {
  width: 148px;
  min-width: 148px;
  height: 100%;
  min-height: 40px;
  align-self: stretch;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: var(--control-bg);
  box-shadow: none;
  padding: 0 8px 0 18px;
}

.creatorSearchTypePill.creatorAntSelectPill .ant-select-selector {
  height: 100% !important;
  border-radius: 999px 0 0 999px !important;
  background: transparent !important;
  color: var(--creator-text) !important;
  box-shadow: none !important;
}

.creatorSearchTypePill.creatorAntSelectPill .ant-select-selection-item {
  color: var(--creator-text) !important;
}

.creatorSearchTypePill.creatorAntSelectPill .ant-select-selection-wrap,
.creatorSearchTypePill.creatorAntSelectPill .ant-select-selection-item {
  height: 100%;
  line-height: 40px;
}

.creatorSearchTypePill .ant-select {
  min-width: 72px;
}

.creatorSearchTypePill > span {
  display: none;
}

.creatorSearchTypePill {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 40px;
  align-self: stretch;
  justify-self: stretch;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: var(--control-bg);
  box-shadow: none;
  padding: 0 28px 0 20px;
}

.creatorSearchTypePill > button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creatorSortPill {
  min-height: 40px;
  border-radius: 999px;
}

.creatorSelectMenu {
  width: max(100%, 168px);
  max-height: 260px;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  display: grid;
  gap: 4px;
  overflow-y: auto;
  border: 1px solid var(--creator-line);
  border-radius: 8px;
  background: var(--creator-popover-bg);
  padding: 6px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.creatorSelectMenu button {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--creator-text);
  padding: 0 9px;
  text-align: left;
}

.creatorSelectMenu button:hover,
.creatorSelectMenu button:focus-visible {
  outline: 0;
  background: var(--surface-panel-strong);
}

.creatorSelectMenu button.selected {
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
}

.creatorSelectMenu button span {
  width: 18px;
  display: inline-grid;
  place-items: center;
}

.creatorSelectMenu button strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorInlineExpandButton {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.creatorInlineExpandButton:hover {
  background: rgba(20, 184, 166, 0.16);
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.12);
}

.creatorAdvancedRows {
  display: grid;
  gap: 0;
}

.creatorAdvancedRow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 7px 0;
}

.creatorAdvancedRow > strong {
  align-self: start;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.creatorAdvancedRow > div {
  min-width: 0;
  flex: 1 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.creatorAdvancedRow .creatorSelectPill {
  width: auto;
  justify-content: space-between;
}

.creatorSelectedBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--creator-line);
  padding-top: 13px;
  margin-top: 6px;
}

.creatorSelectedBar > strong {
  width: 86px;
  min-width: 86px;
  text-align: right;
  color: var(--creator-muted);
}

.creatorSelectedBar > div {
  flex: 1 1;
  min-width: 240px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.creatorSelectedTag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--creator-text);
  min-height: 34px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 800;
}

.creatorSelectedTag button {
  width: 18px;
  height: 18px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #98a2b3;
  padding: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.creatorSelectedTag button:hover,
.creatorSelectedTag button:focus-visible {
  outline: 0;
  background: rgba(148, 162, 179, 0.16);
  color: var(--creator-accent);
}

.creatorSelectedMuted {
  color: var(--creator-muted);
}

.creatorSelectedBar > button,
.creatorOutlineButton {
  min-height: 34px;
  border: 1px solid var(--creator-accent);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--creator-accent);
  padding: 0 15px;
  font-size: 13px;
  font-weight: 900;
}

.creatorResultPanel {
  display: grid;
  gap: 18px;
  padding: 30px;
  min-height: 260px;
}

.creatorEmptyResult {
  min-height: 430px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  background: var(--creator-panel);
  color: var(--creator-text);
  text-align: center;
}

.creatorEmptyIllustration {
  width: min(240px, 56vw);
  height: 160px;
  display: grid;
  place-items: center;
}

.creatorEmptyIllustration svg {
  width: 100%;
  height: 100%;
  display: block;
}

.creatorEmptyResult h2 {
  max-width: 720px;
  margin: 0;
  color: var(--creator-text);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.65;
}

.creatorEmptyActions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.creatorEmptyPrimary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 18%, transparent);
  cursor: pointer;
}

.creatorEmptyPrimary:hover,
.creatorEmptyPrimary:focus-visible {
  outline: 0;
  background: #f4145f;
}

.creatorEmptyHelp {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 999px;
  background: transparent;
  color: var(--creator-muted);
  padding: 0;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.creatorEmptyHelp:hover,
.creatorEmptyHelp:focus-visible {
  outline: 0;
  border-color: var(--creator-accent);
  color: var(--creator-accent);
}

.creatorResultToolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.creatorSelectionSummary,
.creatorSelectionInline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--creator-muted, var(--text-3));
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

.creatorSelectionSummary button,
.creatorSelectionInline button {
  min-height: 28px;
  border: 0;
  border-radius: 8px;
  background: var(--creator-accent-soft, var(--primary-soft));
  color: var(--creator-accent, var(--primary));
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.creatorResultActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.creatorResultActions > button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
  padding: 0 16px;
  font-weight: 900;
}

.creatorResultActions > button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.creatorTableScroller {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: rgba(148, 163, 184, 0.65) rgba(148, 163, 184, 0.14);
  scrollbar-width: thin;
}

.creatorTableScroller::-webkit-scrollbar {
  height: 16px;
}

.creatorTableScroller::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
}

.creatorTableScroller::-webkit-scrollbar-thumb {
  border: 4px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.7);
}

.creatorSearchTable {
  width: 1796px;
  display: grid;
}

.creatorSkeletonPanel {
  overflow: hidden;
}

.creatorSkeletonButton,
.creatorSkeletonAvatar,
.creatorSkeletonLine,
.creatorSkeletonCell i {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-panel-strong);
}

.creatorSkeletonButton::after,
.creatorSkeletonAvatar::after,
.creatorSkeletonLine::after,
.creatorSkeletonCell i::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
  animation: creatorSkeletonShimmer 1.25s infinite;
}

[data-theme='dark'] .creatorSkeletonButton::after,
[data-theme='dark'] .creatorSkeletonAvatar::after,
[data-theme='dark'] .creatorSkeletonLine::after,
[data-theme='dark'] .creatorSkeletonCell i::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

.creatorSkeletonButton {
  width: 86px;
  height: 34px;
}

.creatorSkeletonButton.wide {
  width: 112px;
}

.creatorSkeletonRow {
  pointer-events: none;
}

.creatorSkeletonAvatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
}

.creatorSkeletonIdentity {
  display: grid;
  gap: 10px;
}

.creatorSkeletonLine {
  height: 12px;
}

.creatorSkeletonLine.strong {
  width: 148px;
  height: 16px;
}

.creatorSkeletonLine.medium {
  width: 118px;
}

.creatorSkeletonLine.short {
  width: 82px;
}

.creatorSkeletonCell {
  display: flex;
  align-items: center;
}

.creatorSkeletonCell i {
  width: min(92px, 72%);
  height: 14px;
}

.creatorSkeletonCell i.chart {
  width: 150px;
  height: 52px;
}

.creatorSkeletonCell i.action {
  width: 32px;
  height: 32px;
  border-radius: 999px;
}

.creatorSearchTableRow {
  min-height: 158px;
  display: grid;
  grid-template-columns:
    56px
    320px
    150px
    160px
    230px
    180px
    140px
    150px
    120px
    120px
    170px
    100px;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--creator-line);
  color: var(--creator-text);
  font-size: 14px;
}

.creatorSearchTableRow.head {
  min-height: 92px;
  background: var(--surface-panel-strong);
  color: var(--creator-text);
  font-weight: 900;
}

.creatorSearchTableRow > span,
.creatorSearchTableRow.head span,
.creatorSearchTableRow.head > button {
  padding: 0 18px;
  min-width: 0;
}

.creatorSortableHead {
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-weight: 900;
  text-align: left;
}

.creatorSearchTableRow.head button.creatorSortableHead {
  cursor: pointer;
}

.creatorSearchTableRow.head span.creatorSortableHead {
  cursor: default;
}

.creatorSearchTableRow.head button.creatorSortableHead::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

.creatorSearchTableRow.head button.creatorSortableHead.asc::after {
  border-top: 0;
  border-bottom: 6px solid currentColor;
}

.creatorSortableHead.active {
  color: var(--creator-accent);
  background: var(--surface-panel-strong);
}

.creatorSortableHead:disabled {
  cursor: wait;
  opacity: 0.72;
}

.creatorIdentityCell {
  min-width: 0;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding-left: 18px;
}

.creatorPhoto {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
  font-weight: 900;
}

.creatorPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorIdentityCell strong,
.creatorIdentityCell em,
.creatorIdentityCell small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorIdentityCell strong {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  color: var(--creator-text);
  font-weight: 900;
}

.creatorNameLink {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorNameLink:hover {
  color: var(--creator-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.creatorIdentityCell em,
.creatorIdentityCell small {
  color: var(--creator-muted);
  font-size: 12px;
  font-style: normal;
}

.creatorIdentityCell em {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 5px;
}

.creatorIdentityCell em button {
  width: 22px;
  height: 22px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--creator-muted);
}

.creatorIdentityCell em button:hover {
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
}

.creatorIdentityCell small {
  margin-top: 3px;
}

.creatorIdentityCell small b,
.creatorIdentityCell small i {
  color: var(--creator-muted);
  font-style: normal;
  font-weight: 700;
}

.creatorIdentityCell small b + i,
.creatorIdentityCell small i + b {
  margin-left: 7px;
}

.creatorFlagIcon,
.creatorFlagFallback {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.creatorFlagIcon {
  gap: 7px;
  color: var(--creator-text);
  font-weight: 850;
}

.creatorFlagIcon img {
  width: 20px;
  height: 14px;
  display: block;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.creatorFlagIcon.compact {
  margin-left: 8px;
}

.creatorFlagIcon.compact img {
  width: 18px;
  height: 12px;
}

.creatorFlagIcon b {
  color: inherit;
  font-weight: 850;
}

.creatorFlagFallback {
  margin-left: 8px;
  font-style: normal;
}

.creatorDetailFlagValue {
  display: inline-flex;
  align-items: center;
}

.creatorDetailFlagValue .creatorFlagFallback {
  margin-left: 0;
}

.creatorVerifyBadge {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 2px solid var(--creator-panel);
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3);
}

.creatorSourceIcons {
  display: inline-flex !important;
  gap: 5px;
  margin-left: 8px;
}

.creatorSourceIcons span {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--creator-line);
  border-radius: 999px;
  background: var(--surface-panel-strong);
  color: var(--creator-accent);
  font-size: 10px;
  font-weight: 900;
}

.creatorCommerceTags b,
.creatorCommerceTags em {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.creatorSalesMetric {
  min-height: 158px;
  display: flex;
  align-items: center;
  background: var(--surface-panel-strong);
  color: var(--creator-text);
  font-weight: 950;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}

.creatorLinkMetric {
  color: var(--creator-accent);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.creatorCommerceTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.creatorCommerceTags b {
  overflow: hidden;
  border: 1px solid rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.08);
  color: var(--primary);
  text-overflow: ellipsis;
}

.creatorCommerceTags em {
  border: 1px solid var(--creator-line);
  background: var(--surface-panel-strong);
  color: var(--creator-muted);
}

.creatorFavoriteAction {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--creator-line);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--creator-accent);
  cursor: pointer;
  text-decoration: none;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.creatorFavoriteAction:hover {
  border-color: var(--creator-accent);
  background: var(--creator-accent-soft);
}

.creatorFavoriteAction.active {
  border-color: var(--creator-accent);
  background: var(--creator-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--creator-accent) 24%, transparent);
  animation: favoritePulse 320ms ease-out;
}

.creatorFavoriteAction.active svg {
  fill: currentColor;
}

.creatorTrendCell svg {
  width: 150px;
  height: 86px;
  display: block;
  color: var(--creator-accent);
}

.creatorPager {
  --pager-accent: var(--creator-accent, #ec4899);
  --pager-accent-soft: var(--creator-accent-soft, rgba(236, 72, 153, 0.16));
  --pager-muted: var(--creator-muted, var(--text-3));
  --pager-text: var(--creator-text, var(--text-1));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--pager-muted);
}

.creatorPager button,
.creatorPagerEllipsis {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--pager-muted);
  font-size: 15px;
  font-weight: 800;
}

.creatorPager button.active {
  background: var(--pager-accent);
  color: #fff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--pager-accent) 26%, transparent);
}

.creatorPager button:not(:disabled):hover {
  background: var(--pager-accent-soft);
  color: var(--pager-accent);
}

.creatorPagerArrow {
  color: var(--pager-text) !important;
}

.creatorPagerEllipsis {
  letter-spacing: 2px;
}

.creatorPager button:disabled {
  color: #cbd5e1;
  cursor: not-allowed;
}

.creatorPagerJump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--pager-muted);
  padding: 3px 4px 3px 10px;
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.creatorPagerJump:focus-within {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.creatorPagerJump input {
  width: 58px;
  height: 38px;
  border: 1px solid var(--creator-line, var(--line-dark));
  border-radius: 8px;
  outline: 0;
  background: var(--creator-select-bg, var(--surface-panel));
  color: var(--pager-text);
  padding: 0 10px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.03);
  font-weight: 850;
  text-align: center;
}

.creatorPagerJump input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft), inset 0 0 0 1px rgba(15, 23, 42, 0.03);
}

[data-theme='dark'] .creatorPagerJump input {
  border-color: var(--creator-line);
  background: var(--surface-panel);
}

[data-theme='dark'] .creatorPagerJump:focus-within {
  border-color: var(--primary-light);
  background: color-mix(in srgb, var(--creator-accent) 18%, transparent);
  color: #fff;
  box-shadow: 0 0 0 3px var(--primary-soft);
}

[data-theme='dark'] .creatorPagerJump input:focus {
  border-color: var(--primary-light);
  background: var(--surface-panel-strong);
  box-shadow: 0 0 0 3px var(--primary-soft), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.creatorSelectCell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.creatorSelectCell input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.creatorSelectCell input:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.creatorPager.favoritePager {
  --pager-accent: var(--primary);
  --pager-accent-soft: var(--primary-soft);
  --pager-muted: var(--text-3);
  --pager-text: var(--text-1);
}

.creatorDetailPageV2 {
  --creator-detail-accent: var(--primary);
  --creator-detail-soft: var(--primary-soft);
  --creator-detail-line: var(--line-dark);
  --creator-detail-panel: #ffffff;
  --creator-detail-muted: var(--text-3);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  color: var(--text-1);
}

[data-theme='dark'] .creatorDetailPageV2 {
  --creator-detail-panel: var(--surface-panel);
}

.creatorDetailTitleBar {
  display: grid;
  gap: 6px;
}

.creatorDetailBreadcrumb {
  width: fit-content;
  color: var(--creator-detail-muted);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.creatorDetailBreadcrumb:hover {
  color: var(--creator-detail-accent);
}

.creatorDetailTitleBar h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: 0;
}

.creatorDetailTopGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(300px, 0.36fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  scroll-margin-top: 82px;
}

.creatorDetailProfileCard,
.creatorDetailOverviewCard,
.creatorDetailDataPanel {
  min-width: 0;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--creator-detail-panel);
  box-shadow: var(--shadow-light);
}

.creatorDetailProfileCard {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 22px 22px 0;
  text-align: center;
}

.creatorDetailProfileActions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.creatorDetailProfileActions button,
.creatorDetailProfileActions a,
.creatorDetailNameBlock button {
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--creator-detail-muted);
  cursor: pointer;
}

.creatorDetailProfileActions button,
.creatorDetailProfileActions a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  text-decoration: none;
}

.creatorDetailProfileActions button {
  gap: 4px;
}

.creatorDetailProfileActions button.active {
  background: var(--creator-detail-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px var(--primary-shadow);
  animation: favoritePulse 320ms ease-out;
}

.creatorDetailProfileActions button.active svg {
  fill: currentColor;
}

.creatorDetailProfileActions button span {
  display: none;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.creatorDetailProfileActions button.isCopied,
.creatorDetailProfileActions button.isCopyFailed {
  width: auto;
  min-width: 62px;
  padding: 0 10px;
}

.creatorDetailProfileActions button.isCopied {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.creatorDetailProfileActions button.isCopyFailed {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.creatorDetailProfileActions button.isCopied span,
.creatorDetailProfileActions button.isCopyFailed span {
  display: inline;
}

.creatorDetailNameBlock button.isCopied {
  color: #047857;
}

.creatorDetailNameBlock button.isCopyFailed {
  color: #b91c1c;
}

.creatorDetailAvatar {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 999px;
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  font-size: 34px;
  font-weight: 950;
}

.creatorDetailAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorDetailNameBlock {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.creatorDetailNameBlock h2,
.creatorDetailNameBlock p,
.creatorDetailBio {
  margin: 0;
}

.creatorDetailNameBlock h2 {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-1);
  font-size: 20px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.creatorDetailNameBlock p {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--creator-detail-muted);
  font-size: 13px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.creatorDetailCategoryPills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.creatorDetailCategoryPills span,
.creatorDetailCategoryPills b {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 850;
}

.creatorDetailCategoryPills span {
  background: var(--tag-bg);
  color: var(--text-2);
}

.creatorDetailCategoryPills b {
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
}

.creatorDetailBio {
  max-width: 340px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}

.creatorDetailInfoList {
  width: calc(100% + 44px);
  display: grid;
  gap: 0;
  margin: 8px -22px 0;
  padding: 16px 22px;
  background: var(--surface-panel-strong);
  text-align: left;
}

.creatorDetailInfoList div {
  min-width: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--creator-detail-line);
}

.creatorDetailInfoList div:last-child {
  border-bottom: 0;
}

.creatorDetailInfoList dt,
.creatorDetailInfoList dd {
  margin: 0;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
}

.creatorDetailInfoList dt {
  color: var(--creator-detail-muted);
  font-weight: 850;
}

.creatorDetailInfoList dd {
  color: var(--text-1);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.creatorDetailInfoList dd a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.creatorDetailInfoList dd a:hover {
  color: var(--creator-detail-accent);
  text-decoration: underline;
}

.creatorDetailInfoList dd .creatorDetailTikTokLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4f7cff;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.35;
}

.creatorDetailTikTokLink svg {
  flex: 0 0 auto;
  color: #253047;
}

.creatorDetailOverviewCard {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.creatorDetailMetricGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.creatorDetailMetricCard {
  min-width: 0;
  min-height: 116px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 14px;
}

.creatorDetailMetricCard strong,
.creatorDetailMetricCard em,
.creatorDetailMetricCard span {
  min-width: 0;
}

.creatorDetailMetricCard strong {
  color: var(--text-1);
  font-size: 24px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.creatorDetailMetricCard em {
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-style: normal;
}

.creatorDetailMetricCard span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 850;
}

.creatorDetailMetricCard b {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--creator-detail-muted);
  font-size: 11px;
}

.creatorDetailSummaryGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 12px;
}

.creatorDetailSummaryGrid article {
  min-width: 0;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--creator-detail-panel);
  padding: 16px;
}

.creatorDetailSummaryGrid p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.6;
}

.creatorDetailSummaryGrid article > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.creatorDetailSummaryGrid article > div span {
  min-width: 0;
  display: block;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--text-2);
  padding: 12px;
  font-size: 13px;
  line-height: 1.65;
}

.creatorDetailSummaryGrid article > div b {
  display: block;
  margin-bottom: 4px;
  color: var(--text-1);
}

.creatorContactCard {
  display: grid;
  align-content: start;
  gap: 12px;
}

.creatorContactCard > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.creatorContactCard span {
  color: var(--text-1);
  font-weight: 900;
}

.creatorContactCard button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--creator-detail-accent);
  color: #fff;
  padding: 0 14px;
  font-weight: 900;
}

.creatorContactCard strong {
  color: var(--creator-detail-accent);
}

.creatorDetailTabsWrap {
  display: none;
  min-width: 0;
  position: sticky;
  top: 76px;
  z-index: 950;
  margin: 0;
  padding: 0;
}

.creatorDetailStickyHeader {
  min-width: 0;
  position: sticky;
  top: 76px;
  z-index: 980;
  display: grid;
  grid-template-columns: minmax(220px, max-content) minmax(0, 1fr) auto;
  grid-template-areas:
    "identity tabs actions";
  align-items: center;
  gap: 22px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--creator-detail-panel) 96%, transparent);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  padding: 12px 16px;
}

.creatorDetailStickyIdentity {
  grid-area: identity;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.creatorDetailStickyAvatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  font-size: 18px;
  font-weight: 950;
}

.creatorDetailStickyAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorDetailStickyText {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.creatorDetailStickyText strong,
.creatorDetailStickyText small {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorDetailStickyText strong {
  color: var(--text-1);
  font-size: 16px;
  font-weight: 950;
}

.creatorDetailStickyText small {
  color: var(--creator-detail-muted);
  font-size: 13px;
  font-weight: 800;
}

.creatorDetailStickyText button {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--creator-detail-muted);
  cursor: pointer;
}

.creatorDetailStickyText button.isCopied {
  color: #047857;
}

.creatorDetailStickyText button.isCopyFailed {
  color: #b91c1c;
}

.creatorDetailStickyTabs {
  grid-area: tabs;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.creatorDetailStickyTabs button {
  min-height: 40px;
  position: relative;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--creator-detail-muted);
  padding: 0 0 8px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.creatorDetailStickyTabs button.active {
  color: var(--creator-detail-accent);
}

.creatorDetailStickyTabs button.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--creator-detail-accent);
}

.creatorDetailStickyActions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 8px;
}

.creatorDetailStickyActions button,
.creatorDetailStickyActions a {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--creator-detail-line);
  border-radius: 9px;
  background: var(--creator-detail-panel);
  color: var(--creator-detail-muted);
  text-decoration: none;
  cursor: pointer;
}

.creatorDetailStickyActions button.active {
  border-color: color-mix(in srgb, var(--creator-detail-accent) 34%, var(--creator-detail-line));
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--creator-detail-accent) 18%, transparent);
  animation: favoritePulse 320ms ease-out;
}

.creatorDetailStickyActions button.active svg {
  fill: currentColor;
}

.creatorDetailTabs {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  overflow: visible;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--creator-detail-panel) 88%, transparent);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  margin: 0;
  padding: 6px 22px 0;
  scrollbar-width: none;
}

.creatorDetailTabs button {
  min-height: 44px;
  position: relative;
  flex: 0 1 auto;
  border: 0;
  background: transparent;
  color: var(--creator-detail-muted);
  padding: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.creatorDetailTabs button.active {
  color: var(--creator-detail-accent);
}

.creatorDetailTabs button.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--creator-detail-accent);
}

.creatorDetailSections {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.creatorDetailTopGrid,
.creatorDetailSections > section {
  scroll-margin-top: 140px;
}

.creatorDetailDataPanel {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.creatorDetailPanelHeader {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.creatorDetailPanelHeader h2,
.creatorDetailDataPanel h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  line-height: 1.35;
}

.creatorDetailPanelHeader span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--creator-detail-line);
  border-radius: 999px;
  color: var(--creator-detail-muted);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
}

.creatorDetailDataGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.creatorDetailDataGrid article {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 14px;
}

.creatorDetailDataGrid span {
  color: var(--creator-detail-muted);
  font-size: 13px;
  font-weight: 850;
}

.creatorDetailDataGrid strong {
  color: var(--text-1);
  font-size: 18px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.creatorDetailDataGrid em {
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.creatorDetailTwoColumn {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.creatorDetailSubPanel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--creator-detail-panel);
  padding: 16px;
}

.creatorDetailSubPanel h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.35;
}

.creatorDetailChartCard {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.creatorDetailChartCard svg {
  width: 100%;
  height: 180px;
  display: block;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--creator-detail-accent);
}

.creatorDetailChartCard polyline {
  fill: none;
  stroke: var(--creator-detail-line);
  stroke-width: 1;
}

.creatorDetailChartCard .line {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.creatorDetailChartCard circle {
  fill: #ffffff;
  stroke: currentColor;
  stroke-width: 2;
}

.creatorDetailChartAxis {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-weight: 750;
}

.creatorDetailBarList {
  display: grid;
  gap: 13px;
}

.creatorDetailBarList div {
  min-width: 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 10px;
}

.creatorDetailBarList span,
.creatorDetailBarList em {
  color: var(--text-2);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.creatorDetailBarList em {
  color: var(--text-1);
  text-align: right;
}

.creatorDetailBarList b {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-panel-strong);
}

.creatorDetailBarList i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--creator-detail-accent);
}

.creatorAudiencePanel {
  gap: 20px;
  background: color-mix(in srgb, var(--creator-detail-panel) 92%, var(--primary-soft));
}

.creatorAudiencePanel .creatorDetailPanelHeader h2 {
  color: var(--text-1);
}

.creatorAudiencePanel .creatorDetailPanelHeader span {
  border-color: var(--creator-detail-line);
  background: var(--creator-detail-panel);
  color: var(--creator-detail-muted);
}

.creatorAudienceLayout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.creatorAudienceStack {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 18px;
}

.creatorAudienceCard {
  min-width: 0;
  display: grid;
  gap: 18px;
  border-radius: 16px;
  border: 1px solid var(--creator-detail-line);
  background: var(--creator-detail-panel);
  padding: 22px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
}

.creatorAudienceCard header {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.creatorAudienceCard h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.35;
}

.creatorAudienceCard p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.6;
}

.creatorAudienceRows {
  display: grid;
  gap: 18px;
}

.creatorAudienceRow {
  min-width: 0;
  min-height: 60px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 64px minmax(128px, 0.55fr);
  align-items: center;
  gap: 22px;
  border-radius: 14px;
  background: var(--surface-panel-strong);
  padding: 0 22px;
}

.creatorAudienceRow span {
  min-width: 0;
  overflow: hidden;
  color: var(--creator-detail-muted);
  font-size: 16px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorAudienceRow em {
  color: var(--text-1);
  font-size: 18px;
  font-style: normal;
  font-weight: 760;
  text-align: right;
}

.creatorAudienceRow b {
  height: 26px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 999px;
}

.creatorAudienceRow i {
  width: 0;
  height: 100%;
  display: block;
  border-radius: 999px;
  background: var(--creator-detail-accent);
}

.creatorAudienceCard.compact {
  max-height: 432px;
  overflow-y: auto;
  scrollbar-color: rgba(148, 163, 184, 0.75) transparent;
  scrollbar-width: thin;
}

.creatorAudienceFanType {
  gap: 20px;
}

.creatorAudienceFanBody {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 0.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
}

.creatorAudienceDonut {
  width: 190px;
  height: 190px;
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
}

.creatorAudienceDonut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.creatorAudienceDonut circle {
  fill: none;
  stroke-width: 18;
}

.creatorAudienceDonut .track {
  stroke: var(--line-dark);
}

.creatorAudienceDonut .segment {
  stroke-linecap: butt;
}

.creatorAudienceDonut .segment.pink {
  stroke: var(--creator-detail-accent);
}

.creatorAudienceDonut .segment.green {
  stroke: var(--accent);
}

.creatorAudienceDonut .segment.blue {
  stroke: var(--success);
}

.creatorAudienceDonut strong {
  position: absolute;
  color: var(--creator-detail-accent);
  font-size: 42px;
  font-weight: 950;
}

.creatorAudienceLegend {
  min-width: 0;
  display: grid;
  gap: 20px;
  border-radius: 14px;
  background: var(--surface-panel-strong);
  padding: 22px;
}

.creatorAudienceLegend div {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
}

.creatorAudienceLegend span {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 999px;
}

.creatorAudienceLegend span.pink {
  background: var(--creator-detail-accent);
}

.creatorAudienceLegend span.green {
  background: var(--accent);
}

.creatorAudienceLegend span.blue {
  background: var(--success);
}

.creatorAudienceLegend strong,
.creatorAudienceLegend em {
  color: var(--text-1);
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
}

.creatorAudienceLegend em {
  text-align: right;
}

.creatorAudienceLegend p {
  grid-column: 2 / -1;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

.creatorActivePanel {
  gap: 24px;
  background: #ffffff;
}

.creatorActiveHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  margin: -22px -22px 0;
  padding: 24px 22px;
}

.creatorActiveHeader h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1f2a44;
  font-size: 22px;
  font-weight: 950;
}

.creatorActiveHeader h2 span,
.creatorActiveInfoCard h3 span {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #cfd5df;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.creatorActiveRange {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #617895;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.creatorActiveRange button,
.creatorActiveRange strong {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 8px;
  background: #f7f8fa;
  color: #617895;
  padding: 0 12px;
  font: inherit;
}

.creatorActiveRange button {
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.creatorActiveRange button:hover {
  background: var(--surface-dark-hover);
  color: var(--primary);
}

.creatorActiveRange button.active {
  background: var(--primary-active-bg);
  color: var(--primary);
}

.creatorActiveRange span {
  color: #94a3b8;
}

.creatorActiveChartCard {
  min-width: 0;
  display: grid;
  gap: 12px;
  border-radius: 18px;
  background: #ffffff;
  padding: 26px 18px 20px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
}

.creatorActiveChartCard h3 {
  margin: 0;
  color: #1f2a44;
  font-size: 17px;
  font-weight: 950;
}

.creatorActiveChartCard svg {
  width: 100%;
  height: 300px;
  display: block;
  overflow: visible;
}

.creatorActiveChartCard line {
  stroke: rgba(148, 163, 184, 0.14);
  stroke-dasharray: 4 8;
  stroke-width: 1;
}

.creatorActiveChartCard polygon {
  fill: var(--primary-soft);
  opacity: 0.18;
}

.creatorActiveChartCard polyline {
  fill: none;
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.creatorActiveChartCard circle {
  fill: var(--primary);
  stroke: #ffffff;
  stroke-width: 2;
}

.creatorActiveChartAxis {
  display: grid;
  grid-template-columns: repeat(24, minmax(34px, 1fr));
  gap: 6px;
  overflow-x: auto;
  color: #617895;
  font-size: 12px;
  font-weight: 800;
}

.creatorActiveChartAxis span {
  text-align: center;
  white-space: nowrap;
}

.creatorActiveCards {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.creatorActiveInfoCard {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 22px;
  border-radius: 16px;
  background: #ffffff;
  padding: 26px 30px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
}

.creatorActiveInfoCard h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1f2a44;
  font-size: 18px;
  font-weight: 950;
}

.creatorActiveInfoCard > div {
  display: grid;
  gap: 16px;
}

.creatorActiveInfoCard p {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin: 0;
  color: #526276;
  font-size: 16px;
  font-weight: 760;
}

.creatorActiveInfoCard strong,
.creatorActiveInfoCard em,
.creatorActiveInfoCard b {
  min-width: 0;
  color: #526276;
  font-style: normal;
  font-weight: 800;
}

.creatorActiveInfoCard em {
  text-align: right;
}

.creatorActiveInfoCard b {
  margin-top: 4px;
  color: #4b596b;
  font-size: 16px;
}

.creatorActiveSummaryBody {
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.creatorActiveSummaryCard .creatorAudienceDonut {
  width: 116px;
  height: 116px;
}

.creatorActiveSummaryCard .creatorAudienceDonut circle {
  stroke-width: 15;
}

.creatorActiveSummaryCard .creatorAudienceDonut strong {
  display: none;
}

.creatorDetailHeatmap {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px repeat(5, minmax(88px, 1fr));
  gap: 8px;
  overflow-x: auto;
}

.creatorDetailHeatmap > b {
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.creatorDetailHeatmapRow {
  display: contents;
}

.creatorDetailHeatmapRow strong {
  min-height: 36px;
  display: grid;
  align-items: center;
  color: var(--text-2);
  font-size: 13px;
}

.creatorDetailHeatmapRow i {
  min-height: 36px;
  border-radius: 8px;
  background: var(--creator-detail-accent);
}

.creatorDetailTableWrap {
  min-width: 0;
  overflow-x: auto;
}

.creatorDetailTable {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
}

.creatorDetailTable th,
.creatorDetailTable td {
  border-bottom: 1px solid var(--creator-detail-line);
  color: var(--text-2);
  padding: 12px 10px;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  white-space: nowrap;
}

.creatorDetailTable th {
  color: var(--creator-detail-muted);
  font-weight: 900;
}

.creatorDetailTable td {
  color: var(--text-1);
  font-weight: 750;
}

.creatorDetailTable .right {
  text-align: right;
}

.creatorExpansionMapShell {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(280px, 340px);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}

.creatorExpansionMap {
  min-height: 440px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--creator-detail-accent) 12%, transparent), transparent 34%),
    var(--surface-panel-strong);
  overflow: hidden;
}

.creatorExpansionOrbit {
  position: absolute;
  border: 1px dashed color-mix(in srgb, var(--creator-detail-accent) 28%, transparent);
  border-radius: 999px;
  pointer-events: none;
}

.creatorExpansionOrbit.one {
  width: 210px;
  height: 210px;
}

.creatorExpansionOrbit.two {
  width: 330px;
  height: 330px;
}

.creatorExpansionCenter {
  width: 132px;
  min-height: 132px;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--creator-detail-accent) 34%, var(--creator-detail-line));
  border-radius: 999px;
  background: var(--surface-panel);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--creator-detail-accent) 18%, transparent);
  padding: 14px;
  text-align: center;
}

.creatorExpansionCenter span,
.creatorExpansionInsightHeader > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  font-size: 18px;
  font-weight: 950;
  overflow: hidden;
}

.creatorExpansionCenter img,
.creatorExpansionInsightHeader img,
.creatorExpansionNode img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorExpansionCenter strong {
  max-width: 104px;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.creatorExpansionCenter em,
.creatorExpansionNode em,
.creatorExpansionInsightHeader em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.creatorExpansionNode {
  --node-color: var(--creator-detail-accent);
  width: var(--node-size);
  height: var(--node-size);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--node-color) 40%, #ffffff);
  border-radius: 999px;
  background: var(--surface-panel);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  color: var(--text-1);
  cursor: pointer;
  padding: 0;
  transform: translate(-50%, -50%) rotate(var(--map-angle)) translateY(-148px) rotate(calc(var(--map-angle) * -1));
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.creatorExpansionNode.category {
  --node-color: #2563eb;
}

.creatorExpansionNode.market {
  --node-color: #059669;
}

.creatorExpansionNode.growth {
  --node-color: #d97706;
}

.creatorExpansionNode.commerce {
  --node-color: #dc2626;
}

.creatorExpansionNode.engagement {
  --node-color: #7c3aed;
}

.creatorExpansionNode.scale {
  --node-color: var(--creator-detail-accent);
}

.creatorExpansionNode:hover,
.creatorExpansionNode.active {
  border-color: var(--node-color);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--node-color) 28%, transparent);
  transform: translate(-50%, -50%) rotate(var(--map-angle)) translateY(-154px) rotate(calc(var(--map-angle) * -1));
}

.creatorExpansionNode span {
  width: calc(var(--node-size) - 14px);
  height: calc(var(--node-size) - 14px);
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--node-color) 12%, var(--surface-panel));
  color: var(--node-color);
  font-size: 18px;
  font-weight: 950;
  overflow: hidden;
}

.creatorExpansionNode b {
  min-width: 28px;
  position: absolute;
  top: -7px;
  right: -8px;
  border-radius: 999px;
  background: var(--node-color);
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
  line-height: 20px;
  padding: 0 6px;
}

.creatorExpansionNode em {
  max-width: 72px;
  position: absolute;
  bottom: -22px;
  color: var(--node-color);
  white-space: nowrap;
}

.creatorExpansionInsight {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 16px;
}

.creatorExpansionInsightHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.creatorExpansionInsightHeader div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.creatorExpansionInsightHeader strong {
  color: var(--text-1);
  font-size: 16px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.creatorExpansionInsight dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.creatorExpansionInsight dl div,
.creatorExpansionReason {
  border-radius: 8px;
  background: var(--creator-detail-soft);
  padding: 10px;
}

.creatorExpansionInsight dt,
.creatorExpansionInsight dd {
  margin: 0;
}

.creatorExpansionInsight dt {
  color: var(--creator-detail-muted);
  font-size: 12px;
  font-weight: 850;
}

.creatorExpansionInsight dd {
  margin-top: 4px;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 950;
}

.creatorExpansionReason {
  display: grid;
  gap: 6px;
}

.creatorExpansionReason strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

.creatorExpansionReason p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.creatorExpansionInsight > a {
  min-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--creator-detail-accent);
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
}

.creatorSimilarGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.creatorSimilarGrid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creatorSimilarGrid article {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 14px;
}

.creatorSimilarGrid article > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.creatorSimilarGrid span {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  font-weight: 950;
  overflow: hidden;
}

.creatorSimilarGrid span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorSimilarGrid strong {
  min-width: 0;
  color: var(--text-1);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.creatorSimilarGrid p,
.creatorDetailNote {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.creatorSimilarGrid dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.creatorSimilarGrid dt,
.creatorSimilarGrid dd {
  margin: 0;
  font-size: 12px;
}

.creatorSimilarGrid dt {
  color: var(--creator-detail-muted);
  font-weight: 800;
}

.creatorSimilarGrid dd {
  color: var(--text-1);
  font-weight: 900;
}

.creatorSimilarGrid button,
.creatorSimilarGrid article > a {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--creator-detail-accent);
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
}

.creatorSimilarCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.creatorSimilarCards .simCard {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 20px 18px 18px;
  border: 1px solid var(--creator-detail-line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--creator-detail-accent) 5%, transparent), transparent 58%),
    var(--surface-panel-strong);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.creatorSimilarCards .simCard::before {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--creator-detail-accent), transparent);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.creatorSimilarCards .simCard:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--creator-detail-accent) 45%, var(--creator-detail-line));
  box-shadow: 0 14px 32px -16px color-mix(in srgb, var(--creator-detail-accent) 60%, transparent);
}

.creatorSimilarCards .simCard:hover::before {
  opacity: 0.9;
}

.creatorSimilarCards .simCardAvatarWrap {
  position: relative;
  width: 78px;
  height: 78px;
  flex: 0 0 auto;
  margin-top: 2px;
  border-radius: 50%;
  padding: 5px;
  box-sizing: border-box;
  background: conic-gradient(
    var(--creator-detail-accent) calc(var(--p, 0) * 1%),
    color-mix(in srgb, var(--creator-detail-accent) 15%, transparent) 0
  );
}

.creatorSimilarCards .simCardAvatar {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  background: linear-gradient(135deg, var(--creator-detail-accent), color-mix(in srgb, var(--creator-detail-accent) 55%, #000000));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #ffffff 18%, transparent),
    0 5px 12px -5px color-mix(in srgb, var(--creator-detail-accent) 65%, transparent);
}

.creatorSimilarCards .simCardAvatarWrap .simCardAvatar {
  width: 100%;
  height: 100%;
  font-size: 20px;
  border: 3px solid var(--surface-panel-strong);
  box-shadow: none;
}

.creatorSimilarCards .simCardAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorSimilarCards .simCardSim {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--creator-detail-accent);
  border: 2px solid var(--surface-panel-strong);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.5;
}

.creatorSimilarCards .simCardName {
  margin-top: 6px;
  max-width: 100%;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creatorSimilarCards .simCardMeta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-2);
}

.creatorSimilarCards .simCardChips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.creatorSimilarCards .simCardChips em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--creator-detail-accent);
  background: color-mix(in srgb, var(--creator-detail-accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--creator-detail-accent) 20%, transparent);
  padding: 2px 9px;
  border-radius: 999px;
}

.creatorSimilarCards .simCardStats {
  display: flex;
  justify-content: center;
  gap: 32px;
  width: 100%;
  margin: 2px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--creator-detail-line);
}

.creatorSimilarCards .simCardStats dt {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--creator-detail-muted);
}

.creatorSimilarCards .simCardStats dd {
  margin: 3px 0 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-1);
}

.creatorSimilarCards .simCardStats dd.up {
  color: #16a34a;
}

.creatorSimilarCards .simCardLink {
  align-self: stretch;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--creator-detail-accent) 10%, transparent);
  color: var(--creator-detail-accent);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}

.creatorSimilarCards .simCardLink span {
  transition: transform 0.16s ease;
}

.creatorSimilarCards .simCardLink:hover {
  background: var(--creator-detail-accent);
  color: #ffffff;
}

.creatorSimilarCards .simCardLink:hover span {
  transform: translateX(3px);
}

@media (max-width: 1180px) {
  .creatorSimilarCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .creatorSimilarCards {
    grid-template-columns: 1fr;
  }
}

.creatorSearchTop { gap: 14px; align-items: center; }

.creatorSearchBox {
  align-items: center;
  height: 52px;
  padding: 0 6px;
  gap: 0;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.creatorSearchBox:hover {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

.creatorSearchBox:focus-within {
  border-color: rgba(139, 92, 246, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

.creatorSearchBox .ant-select { height: 40px; align-self: center; position: relative; }

.creatorSearchBox .ant-select .ant-select-selector {
  height: 40px !important;
  padding-inline: 14px !important;
  display: flex;
  align-items: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.creatorSearchBox .ant-select-selection-item { color: #e8edf5 !important; font-weight: 750; }

.creatorSearchBox .ant-select-arrow { color: #97a3b6 !important; }

.creatorSearchBox .ant-select::after {
  content: '';
  position: absolute;
  right: 0;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.creatorSearchBox .ant-input {
  padding-inline: 16px !important;
  background: transparent !important;
  color: #f4f7fb !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

.creatorSearchBox .ant-input::placeholder { color: #8a97a9 !important; }

.creatorSearchBox .ant-btn-primary {
  height: 40px !important;
  min-width: 78px;
  align-self: center;
  border-radius: 10px !important;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4) !important;
}

.creatorCollectButton { align-self: center; width: auto; min-width: 0; flex: 0 0 auto; }

.creatorSearchBox .ant-select,
.creatorSearchBox .ant-select * {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.creatorDetailPage {
  min-width: var(--workspace-canvas-min-width);
}

.creatorRowActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.creatorCompareAction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.creatorCompareAction.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.creatorCompareAction:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.creatorCompareBar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 16px;
  border: 1px solid var(--line-dark, rgba(124, 124, 150, 0.25));
  background: var(--surface-panel-strong, rgba(20, 20, 30, 0.92));
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  max-width: calc(100vw - 40px);
}

.creatorCompareBarLabel {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-1);
  white-space: nowrap;
}

.creatorCompareBarItems {
  display: flex;
  align-items: center;
  gap: 8px;
}

.creatorCompareBarChip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
  font-weight: 800;
  font-size: 13px;
}

.creatorCompareBarChip img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

.creatorCompareBarChip em {
  font-style: normal;
}

.creatorCompareBarChip button {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--surface-panel, #ffffff);
  border-radius: 999px;
  background: var(--text-1);
  color: var(--surface-panel, #ffffff);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.creatorCompareBarAction,
.creatorCompareBarClear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.creatorCompareBarAction {
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.creatorCompareBarAction[aria-disabled='true'] {
  opacity: 0.55;
  pointer-events: none;
}

.creatorCompareBarClear {
  border: 1px solid var(--line-dark, rgba(124, 124, 150, 0.25));
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.creatorCompareShell {
  display: grid;
  gap: 18px;
  color: var(--text-1);
}

.creatorCompareHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.creatorCompareHeader h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}

.creatorCompareHeader p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.creatorCompareBack {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-1);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.creatorCompareChips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.creatorCompareChip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-1);
  padding: 5px 8px 5px 5px;
  font-size: 13px;
  font-weight: 850;
}

.creatorCompareChipAvatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  color: #ffffff;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.creatorCompareChipAvatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.creatorCompareChip button {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-2);
  cursor: pointer;
  line-height: 1;
}

.creatorCompareChip.isEmpty {
  padding: 0 15px;
  text-decoration: none;
  color: var(--primary);
  border-style: dashed;
}

.creatorCompareGrid {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
  gap: 16px;
  align-items: start;
}

.creatorComparePanel {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-light);
  padding: 18px;
}

.creatorComparePanel h3 {
  margin: 0 0 14px;
  font-size: 16px;
}

.creatorCompareRadarBody {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.creatorCompareRadar {
  width: min(100%, 320px);
  height: auto;
}

.creatorCompareLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--text-2);
  font-size: 12px;
}

.creatorCompareLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.creatorCompareLegend i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.creatorCompareTableScroll {
  overflow-x: auto;
}

.creatorCompareTable {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13px;
}

.creatorCompareTable th,
.creatorCompareTable td {
  border-bottom: 1px solid var(--line-dark);
  padding: 10px 12px;
  text-align: left;
}

.creatorCompareTable thead th,
.creatorCompareGroupRow td {
  color: var(--text-2);
  font-weight: 900;
}

.creatorCompareTable .isBest {
  color: var(--primary);
  font-weight: 900;
}

@media (max-width: 980px) {
  .creatorCompareHeader {
    display: grid;
  }

  .creatorCompareGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.creatorSearchPanel .creatorSelectPill,
.creatorResultPanel .creatorSelectPill {
  position: relative;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--creator-line);
  border-radius: 8px;
  background: var(--creator-select-bg);
  color: var(--creator-text);
  padding: 0 34px 0 12px;
  font-size: 13px;
  font-weight: 750;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
  z-index: 1;
  cursor: pointer;
}

.creatorSearchPanel .creatorSelectPill.disabled,
.creatorResultPanel .creatorSelectPill.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.creatorSearchPanel .creatorSelectPill.open,
.creatorSearchPanel .creatorSelectPill:focus-within,
.creatorResultPanel .creatorSelectPill.open,
.creatorResultPanel .creatorSelectPill:focus-within {
  border-color: rgba(20, 184, 166, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
  z-index: 45;
}

.creatorSearchPanel .creatorSelectPill > span,
.creatorResultPanel .creatorSelectPill > span {
  flex: 0 0 auto;
  color: var(--creator-muted);
}

.creatorSearchPanel .creatorSelectPill > button,
.creatorResultPanel .creatorSelectPill > button {
  min-width: 68px;
  min-height: 34px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--creator-text);
  font: inherit;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.creatorSearchPanel .creatorSelectPill > button:disabled,
.creatorResultPanel .creatorSelectPill > button:disabled {
  cursor: not-allowed;
}

.creatorSearchPanel .creatorSelectMenu,
.creatorResultPanel .creatorSelectMenu {
  width: max(100%, 220px);
  max-height: 260px;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  display: grid;
  gap: 4px;
  overflow-y: auto;
  border: 1px solid var(--creator-line);
  border-radius: 8px;
  background: var(--creator-popover-bg);
  padding: 6px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.creatorSearchPanel .creatorSelectMenu button,
.creatorResultPanel .creatorSelectMenu button {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--creator-text);
  padding: 7px 12px;
  text-align: left;
}

.creatorSearchPanel .creatorSelectMenu button:hover,
.creatorSearchPanel .creatorSelectMenu button:focus-visible,
.creatorResultPanel .creatorSelectMenu button:hover,
.creatorResultPanel .creatorSelectMenu button:focus-visible {
  outline: 0;
  background: var(--surface-panel-strong);
}

.creatorSearchPanel .creatorSelectMenu button.selected,
.creatorResultPanel .creatorSelectMenu button.selected {
  background: var(--creator-accent-soft);
  color: var(--creator-accent);
}

.creatorSearchPanel .creatorSelectMenu button span,
.creatorResultPanel .creatorSelectMenu button span {
  width: 18px;
  display: inline-grid;
  place-items: center;
}

.creatorSearchPanel .creatorSelectMenu button strong,
.creatorResultPanel .creatorSelectMenu button strong {
  min-width: 0;
  overflow: visible;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.creatorSearchPanel .creatorRangePill .creatorSelectMenu {
  width: max(100%, 260px);
  max-height: 340px;
}

.creatorSearchPanel .creatorRangeMenuFooter {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--creator-line);
  margin-top: 4px;
  padding: 8px 2px 2px;
}

.creatorSearchPanel .creatorRangeInputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.creatorSearchPanel .creatorRangeInputs input {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--creator-line);
  border-radius: 6px;
  background: var(--creator-select-bg);
  color: var(--creator-text);
  font-size: 12px;
  font-weight: 850;
  outline: 0;
  padding: 0 8px;
}

.creatorSearchPanel .creatorRangeInputs input:focus {
  border-color: var(--creator-accent);
}

.creatorSearchPanel .creatorRangeInputs span {
  color: var(--creator-muted);
  font-size: 12px;
  font-weight: 900;
}

.creatorSearchPanel .creatorRangeActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.creatorSearchPanel .creatorSelectMenu .creatorRangeActions button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--creator-accent);
  color: #ffffff;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.creatorSearchPanel .creatorSelectMenu .creatorRangeActions button.secondary {
  border-color: var(--creator-line);
  background: var(--creator-select-bg);
  color: var(--creator-text);
}

.creatorDetailMetricCard .creatorMetricHint {
  cursor: help;
  outline: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.creatorDetailMetricCard .creatorMetricHint:hover,
.creatorDetailMetricCard .creatorMetricHint:focus-visible {
  background: color-mix(in srgb, var(--primary) 18%, var(--tag-bg));
  color: var(--primary);
}

.creatorFilterPanel {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.5fr) repeat(4, minmax(128px, 1fr)) minmax(150px, 1fr)
    minmax(150px, 1.2fr) minmax(86px, 0.5fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
}

.creatorDetailPageV2 > .creatorDetailTitleBar,
.creatorDetailPageV2 > .creatorDetailTabsWrap {
  display: none;
}

.creatorDetailPageV2 > .creatorDetailStickyHeader {
  min-width: 0;
  position: sticky;
  top: 76px;
  z-index: 980;
}

@media (max-width: 1180px) {
  .creatorDetailStickyHeader {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "identity actions"
      "tabs tabs";
    gap: 10px 14px;
  }
}

@media (max-width: 720px) {
  .creatorDetailStickyHeader {
    top: 64px;
    margin: 0 -8px;
    border-radius: 0;
    padding: 10px 12px;
  }

  .creatorDetailStickyAvatar {
    width: 40px;
    height: 40px;
  }

  .creatorDetailStickyTabs {
    gap: 18px;
  }

  .creatorDetailStickyTabs button {
    min-height: 36px;
    font-size: 13px;
  }
}

.creatorDetailPageV2 {
  gap: 12px;
}

.creatorDetailPageV2 > .creatorDetailStickyHeader {
  position: sticky;
  top: -18px;
  z-index: 120;
  margin: 0;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  scroll-margin-top: 0;
}

.creatorDetailPageV2 > .creatorDetailTabsWrap {
  display: block;
  position: relative;
  top: auto;
  z-index: 2;
  margin: 0;
  padding: 0;
}

[data-theme='dark'] .creatorDetailPageV2 > .creatorDetailStickyHeader {
  background: #111827;
}

.creatorDetailPageV2 > .creatorDetailTopGrid {
  margin-top: 0;
}

.creatorDetailTopGrid,
.creatorDetailSections > section {
  scroll-margin-top: 88px;
}

.appContent:has(.creatorDetailPageV2) {
  scroll-padding-top: 88px;
}

@media (max-width: 720px) {
  .creatorDetailPageV2 > .creatorDetailStickyHeader {
    top: -12px;
  }

  .creatorDetailTopGrid,
.creatorDetailSections > section {
    scroll-margin-top: 118px;
  }

  .appContent:has(.creatorDetailPageV2) {
    scroll-padding-top: 118px;
  }
}

@keyframes creatorSkeletonShimmer {
  100% {
    transform: translateX(100%);
  }
}

@keyframes favoritePulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
  }
}

/* Rules integrated from the ChatBI/Agent member branch. */
.growthRankFilterHidden {
  display: none;
}

.growthRankAction.active {
  border-color: var(--growth-rank-accent);
  background: var(--growth-rank-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--growth-rank-accent) 22%, transparent);
  animation: favoritePulse 320ms ease-out;
}

.creatorPagerPageSize {
  width: 124px;
  min-width: 124px;
  display: inline-flex;
  align-items: center;
}

.creatorPager .creatorPagerPageSize .cuiDropdownSelectTrigger {
  position: relative;
  width: 100%;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  place-items: initial;
  border: 1px solid var(--creator-line, var(--line-dark));
  border-radius: 8px;
  background: var(--creator-select-bg, var(--surface-panel));
  color: var(--pager-text);
  padding: 0 30px;
  font-size: 14px;
  font-weight: 750;
}

.creatorPager .creatorPagerPageSize .cuiDropdownSelectSelectedText {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.creatorPager .creatorPagerPageSize .cuiDropdownSelectValue {
  width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
}

.creatorPager .creatorPagerPageSize .cuiDropdownSelectChevron {
  position: absolute;
  top: 50%;
  right: 12px;
  margin: 0;
  transform: translateY(-50%);
}

.creatorPager .creatorPagerPageSize.cuiDropdownSelectOpen .cuiDropdownSelectChevron {
  transform: translateY(-50%) rotate(180deg);
}

.creatorPager .creatorPagerPageSize .cuiDropdownSelectTrigger:focus-visible {
  border-color: var(--pager-accent);
  box-shadow: 0 0 0 3px var(--pager-accent-soft);
}

.creatorPager .creatorPagerPageSize .cuiDropdownSelectTrigger:not(:disabled):hover,
.creatorPager .creatorPagerPageSize.cuiDropdownSelectOpen .cuiDropdownSelectTrigger {
  border-color: var(--pager-accent);
  background: var(--pager-accent-soft);
  color: var(--pager-accent);
}

.growthRankFilterHidden {
  display: none;
}

.growthRankAction.active {
  border-color: var(--growth-rank-accent);
  background: var(--growth-rank-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--growth-rank-accent) 22%, transparent);
  animation: favoritePulse 320ms ease-out;
}

.creatorDetailStickyActions button.active {
  border-color: color-mix(in srgb, var(--creator-detail-accent) 34%, var(--creator-detail-line));
  background: var(--creator-detail-soft);
  color: var(--creator-detail-accent);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--creator-detail-accent) 18%, transparent);
  animation: favoritePulse 320ms ease-out;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/consumer-insights.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Recovered member module CSS.
 * Owner: consumer insights / guliym.
 * Source: origin/feat/chatbi-agent-fastmoss-style-guliym.
 * Generated by selector ownership; do not mix other module prefixes here.
 */

.consumerInsightPage {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.consumerInsightFacade {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary-border) 24%, var(--line-dark));
  border-radius: 8px;
  background:
    radial-gradient(circle at 24% 10%, color-mix(in srgb, var(--primary-active-bg) 82%, transparent), transparent 34%),
    radial-gradient(circle at 78% 2%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-panel) 96%, var(--primary-active-bg)), var(--surface-panel));
  box-shadow: var(--shadow-sm);
}

.consumerInsightFacadeInner {
  max-width: 980px;
  display: grid;
  justify-items: center;
  gap: 14px;
  margin: 0 auto;
  padding: 54px 28px 42px;
  text-align: center;
}

.consumerInsightEyebrow,
.consumerInsightPanelHead span,
.consumerSectionHead span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 900;
}

.consumerInsightFacade h1,
.consumerInsightFacade p,
.consumerInsightHero h1,
.consumerInsightHero p,
.consumerInsightPanel h2,
.consumerInsightPanel p,
.consumerSectionHead h2,
.consumerExampleCard h3 {
  margin: 0;
}

.consumerInsightFacade h1 {
  color: var(--text-1);
  font-size: 42px;
  line-height: 1.16;
  letter-spacing: 0;
}

.consumerInsightFacade p {
  max-width: 780px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.75;
}

.consumerInsightSearchShell {
  width: min(820px, 100%);
  min-height: 54px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary-border) 44%, var(--line-dark));
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: 0 16px 36px rgb(0 0 0 / 10%);
}

.consumerPlatformButton,
.consumerSearchButton,
.consumerSectionHead button,
.consumerExampleCard button,
.consumerInsightRange button,
.consumerInsightTabs button,
.consumerInsightPanelHead button,
.consumerActionButtons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.consumerPlatformButton {
  min-width: 112px;
  border: 0;
  border-right: 1px solid var(--line-dark);
  border-radius: 0;
  background: var(--surface-panel);
  color: var(--text-1);
}

.consumerInsightSearchShell input {
  min-width: 0;
  border: 0;
  background: var(--surface-panel);
  color: var(--text-1);
  padding: 0 16px;
  font: inherit;
  outline: none;
}

.consumerInsightSearchShell input::placeholder {
  color: var(--text-3);
}

.consumerSearchButton {
  min-width: 116px;
  border: 0;
  border-radius: 0;
  background: var(--primary);
  color: var(--accent-on-primary, #ffffff);
}

.consumerInsightQuota {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 850;
}

.consumerInsightQuota button {
  border: 0;
  background: transparent;
  color: var(--primary-light);
  font: inherit;
  font-weight: 900;
}

.consumerAnalysisFlow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.consumerAnalysisFlow span {
  border: 1px solid color-mix(in srgb, var(--primary-border) 44%, var(--line-dark));
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 850;
}

.consumerExampleSection,
.consumerInsightReport,
.consumerInsightHero,
.consumerInsightPanel,
.consumerInsightSummaryGrid article,
.consumerInsightTabs {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-sm);
}

.consumerExampleSection,
.consumerInsightReport {
  padding: 18px;
}

.consumerSectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.consumerSectionHead h2 {
  margin-top: 4px;
  color: var(--text-1);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0;
}

.consumerSectionHead > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.consumerSectionHead button {
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 0 12px;
}

.consumerExampleGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.consumerExampleCard {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
}

.consumerExampleCover {
  position: relative;
  aspect-ratio: 1.38;
  overflow: hidden;
  background: var(--surface-muted);
}

.consumerExampleCover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.consumerExampleCover span {
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 88%, black);
  color: var(--accent-on-primary, #ffffff);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.consumerExampleCard > div:last-child {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.consumerExampleCard em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.consumerExampleCard h3 {
  min-height: 40px;
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0;
}

.consumerExampleCard button {
  width: 100%;
  border-color: color-mix(in srgb, var(--primary-border) 48%, var(--line-dark));
  background: var(--primary-active-bg);
  color: var(--text-1);
}

.consumerInsightReport {
  display: grid;
  gap: 16px;
  scroll-margin-top: 16px;
}

.consumerInsightHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.62fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.consumerInsightHero h1 {
  margin-top: 8px;
  color: var(--text-1);
  font-size: 28px;
  line-height: 1.24;
  letter-spacing: 0;
}

.consumerInsightHero p {
  max-width: 720px;
  margin-top: 8px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.65;
}

.consumerInsightControls {
  display: grid;
  gap: 10px;
}

.consumerInsightControls label {
  display: grid;
  gap: 7px;
}

.consumerInsightControls label span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.consumerInsightControls select {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-1);
  padding: 0 12px;
  font: inherit;
  outline: none;
}

.consumerInsightRange,
.consumerInsightTabs,
.consumerActionButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.consumerInsightRange button,
.consumerInsightTabs button,
.consumerInsightPanelHead button,
.consumerActionButtons button {
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 0 12px;
}

.consumerInsightRange button.active,
.consumerInsightTabs button.active,
.consumerInsightRange button:hover,
.consumerInsightTabs button:hover,
.consumerInsightPanelHead button:hover,
.consumerActionButtons button:hover,
.consumerSectionHead button:hover,
.consumerExampleCard button:hover {
  border-color: var(--primary-border);
  background: var(--primary-active-bg);
  color: var(--text-1);
}

.consumerInsightSummaryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.consumerInsightSummaryGrid article {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.consumerInsightSummaryGrid span,
.consumerInsightSummaryGrid em,
.consumerInsightTag span,
.consumerInsightPanelHead em,
.consumerCompareTable .head,
.consumerCompareTable em,
.consumerQuoteList em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.consumerInsightSummaryGrid strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consumerInsightTabs {
  padding: 8px;
}

.consumerInsightLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

.consumerInsightMain {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.consumerInsightPanel {
  min-width: 0;
  padding: 16px;
}

.consumerInsightPanel.sticky {
  position: sticky;
  top: 14px;
}

.consumerInsightPanelHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.consumerInsightPanelHead.compact {
  margin-bottom: 10px;
}

.consumerInsightPanelHead h2 {
  margin-top: 4px;
  color: var(--text-1);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0;
}

.consumerInsightTwoCol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.consumerInsightList {
  display: grid;
  gap: 10px;
}

.consumerInsightTag {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-left: 3px solid var(--primary-border);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
}

.consumerInsightTag.green {
  border-left-color: var(--success);
}

.consumerInsightTag.red {
  border-left-color: var(--danger);
}

.consumerInsightTag.amber {
  border-left-color: var(--warning);
}

.consumerInsightTag.cyan {
  border-left-color: var(--accent);
}

.consumerInsightTag > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.consumerInsightTag strong,
.consumerCompareTable strong {
  color: var(--text-1);
}

.consumerInsightTag p {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.62;
}

.consumerCompareTable {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
}

.consumerCompareTable > div {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(90px, 0.55fr));
  gap: 12px;
  border-bottom: 1px solid var(--row-line);
  padding: 12px 14px;
}

.consumerCompareTable > div:last-child {
  border-bottom: 0;
}

.consumerCompareTable span {
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consumerQuoteList {
  display: grid;
  gap: 10px;
}

.consumerQuoteList blockquote {
  display: grid;
  gap: 8px;
  margin: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
}

.consumerQuoteList blockquote div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.consumerQuoteList span {
  color: var(--warning);
  font-size: 12px;
  letter-spacing: 0;
}

.consumerQuoteList p,
.consumerActionList li {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.65;
}

.consumerActionList {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

.consumerActionButtons {
  margin-top: 14px;
}

.consumerActionButtons button {
  width: 100%;
}

.consumerFastmossPage {
  gap: 0;
}

.consumerReportHeader {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary-border) 20%, var(--line-dark));
  border-radius: 8px 8px 0 0;
  background:
    radial-gradient(circle at 84% 15%, color-mix(in srgb, var(--success) 12%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary-active-bg) 70%, var(--surface-panel)), var(--surface-panel));
  padding: 18px;
}

.consumerBreadcrumb,
.consumerTitleRow,
.consumerReportHeroBottom,
.consumerRangePanel,
.consumerDateRange,
.consumerPrimaryTabs,
.consumerSubTabs,
.consumerFastCardHead,
.consumerVoiceFilters,
.consumerQuoteTop,
.consumerQuoteTags {
  display: flex;
  align-items: center;
}

.consumerBreadcrumb {
  gap: 8px;
  margin-bottom: 16px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 800;
}

.consumerBreadcrumb button {
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
}

.consumerBreadcrumb button:hover {
  color: var(--primary);
}

.consumerBreadcrumb strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consumerTitleRow {
  justify-content: space-between;
  gap: 20px;
}

.consumerTitleRow h1 {
  max-width: 780px;
  margin: 0;
  color: var(--text-1);
  font-size: 26px;
  line-height: 1.32;
  letter-spacing: 0;
}

.consumerTitleRow p {
  max-width: 860px;
  margin: 10px 0 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.68;
}

.consumerRangePanel {
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.consumerDateRange {
  gap: 8px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 850;
}

.consumerDateRange input {
  width: 108px;
  height: 32px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 0 9px;
  font: inherit;
}

.consumerReportHeroBottom {
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}

.consumerProductThumb {
  width: 92px;
  height: 92px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.consumerProductThumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.consumerCommentSummary {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.consumerCommentSummary strong {
  color: var(--text-1);
  font-size: 52px;
  line-height: 1;
  letter-spacing: 0;
}

.consumerCommentSummary span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 850;
}

.consumerPrimaryTabs {
  gap: 28px;
  border: 1px solid var(--line-dark);
  border-top: 0;
  background: var(--surface-panel);
  padding: 0 18px;
}

.consumerPrimaryTabs button {
  position: relative;
  min-height: 54px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 16px;
  font-weight: 900;
}

.consumerPrimaryTabs button.active {
  color: var(--text-1);
}

.consumerPrimaryTabs button.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--primary);
}

.consumerSubTabs {
  position: sticky;
  top: 0;
  z-index: 5;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-top: 0;
  background: color-mix(in srgb, var(--surface-panel) 94%, transparent);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 12px 18px;
}

.consumerSubTabs button,
.consumerVoiceFilters button {
  min-height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 900;
}

.consumerSubTabs button:hover,
.consumerVoiceFilters button.active,
.consumerVoiceFilters button:hover {
  border-color: var(--primary-border);
  background: var(--primary-active-bg);
  color: var(--text-1);
}

.consumerReportContent {
  display: grid;
  gap: 14px;
  padding-top: 14px;
}

.consumerFastCard {
  scroll-margin-top: 76px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

.consumerFastCardHead {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.consumerFastCardHead.compact {
  margin-bottom: 12px;
}

.consumerFastCardHead h2,
.consumerFastCard h2,
.consumerCompareDimension h3 {
  margin: 0;
  color: var(--text-1);
  letter-spacing: 0;
}

.consumerFastCardHead h2,
.consumerFastCard h2 {
  font-size: 20px;
}

.consumerFastCardHead p {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.65;
}

.consumerFastCardHead button {
  min-height: 34px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-active-bg);
  color: var(--text-1);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
}

.consumerProductInfoTable {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
}

.consumerProductInfoTable > div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  border-bottom: 1px solid var(--row-line);
}

.consumerProductInfoTable > div:last-child {
  border-bottom: 0;
}

.consumerProductInfoTable span {
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 14px;
  font-size: 13px;
  font-weight: 850;
}

.consumerProductInfoTable strong {
  min-width: 0;
  color: var(--text-1);
  padding: 14px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.consumerProductInfoTable img {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  object-fit: cover;
}

.consumerVocTable {
  display: grid;
  gap: 14px;
}

.consumerVocGroup {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
}

.consumerVocGroupName {
  background: var(--surface-panel-hover);
  color: var(--text-1);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 900;
}

.consumerVocRows {
  display: grid;
}

.consumerVocRow {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(180px, 1fr) 120px;
  gap: 14px;
  align-items: center;
  border-top: 1px solid var(--row-line);
  padding: 12px 14px;
}

.consumerVocRow span {
  display: block;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
}

.consumerVocRow em {
  display: block;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.consumerVocBar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-muted);
}

.consumerVocBar i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 62%, var(--success)));
}

.consumerVocRow strong {
  color: var(--text-2);
  font-size: 12px;
  text-align: right;
}

.consumerCompareGrid {
  display: grid;
  gap: 14px;
}

.consumerCompareDimension {
  display: grid;
  gap: 10px;
}

.consumerCompareDimension h3 {
  font-size: 15px;
}

.consumerVoiceFilters {
  flex-wrap: wrap;
  gap: 8px;
}

.consumerQuoteTop {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.consumerQuoteTop button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-weight: 900;
}

.consumerStars {
  color: var(--warning);
  font-size: 13px;
}

.consumerQuoteTranslation {
  color: var(--text-1) !important;
}

.consumerQuoteTags {
  flex-wrap: wrap;
  gap: 6px;
}

.consumerQuoteTags span {
  border-radius: 999px;
  background: var(--primary-active-bg);
  color: var(--text-2);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 850;
}

.consumerAiAdvice > p {
  margin: 0 0 12px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.8;
}

.consumerPendingState {
  display: grid;
  gap: 18px;
  border: 1px solid var(--line-dark);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--surface-panel);
  padding: 28px;
}

.consumerPendingIcon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--primary-border) 42%, var(--line-dark));
  border-radius: 8px;
  background: var(--primary-active-bg);
  color: var(--primary);
}

.consumerPendingState span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.consumerPendingState h2 {
  overflow-wrap: anywhere;
  margin: 6px 0 8px;
  color: var(--text-1);
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
}

.consumerPendingState p {
  max-width: 820px;
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
}

.consumerPendingSteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.consumerPendingSteps article {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 14px;
}

.consumerPendingSteps article.status-done {
  border-color: color-mix(in srgb, var(--success) 34%, var(--line-dark));
  background: color-mix(in srgb, var(--success) 10%, var(--surface-panel));
}

.consumerPendingSteps article.status-blocked,
.consumerPendingSteps article.status-error {
  border-color: color-mix(in srgb, var(--warning) 38%, var(--line-dark));
  background: color-mix(in srgb, var(--warning) 9%, var(--surface-panel));
}

.consumerPendingSteps strong {
  color: var(--text-1);
  font-size: 14px;
}

.consumerPendingSteps em {
  display: inline-flex;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-3);
  padding: 3px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.consumerPendingSteps p {
  margin-top: 6px;
  font-size: 13px;
}

.consumerPendingActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.consumerPendingActions button {
  min-height: 38px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-2);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
}

.consumerPendingActions button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.consumerPendingActions button:nth-child(3) {
  border-color: var(--primary-border);
  background: var(--primary);
  color: var(--accent-on-primary, #ffffff);
}

.consumerCollectionTask {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 14px 16px;
}

.consumerCollectionTask.status-dispatched {
  border-color: color-mix(in srgb, var(--success) 36%, var(--line-dark));
  background: color-mix(in srgb, var(--success) 9%, var(--surface-panel));
}

.consumerCollectionTask.status-failed {
  border-color: color-mix(in srgb, var(--warning) 38%, var(--line-dark));
  background: color-mix(in srgb, var(--warning) 9%, var(--surface-panel));
}

.consumerCollectionTask strong {
  display: block;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
}

.consumerCollectionTask p {
  margin-top: 6px;
}

.consumerProviderDiagnostics {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 16px;
}

.consumerProviderDiagnostics > div:first-child strong {
  display: block;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
}

.consumerProviderDiagnostics > div:first-child p {
  margin-top: 4px;
  font-size: 13px;
}

.consumerProviderList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.consumerProviderList article {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.consumerProviderList article.status-done {
  border-color: color-mix(in srgb, var(--success) 34%, var(--line-dark));
}

.consumerProviderList article.status-error {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line-dark));
}

.consumerProviderList article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.consumerProviderList strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
}

.consumerProviderList span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--primary-active-bg);
  color: var(--primary);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 900;
}

.consumerProviderList p {
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.consumerProviderList em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

@media (max-width: 1280px) {
  .consumerExampleGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .consumerInsightHero,
.consumerInsightLayout {
    grid-template-columns: 1fr;
  }

  .consumerInsightPanel.sticky {
    position: static;
  }

  .consumerTitleRow,
.consumerReportHeroBottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .consumerRangePanel,
.consumerCommentSummary {
    align-items: flex-start;
    justify-items: start;
  }
}

@media (max-width: 860px) {
  .consumerInsightFacadeInner {
    padding: 40px 16px 32px;
  }

  .consumerInsightFacade h1 {
    font-size: 32px;
  }

  .consumerInsightSearchShell {
    grid-template-columns: 1fr;
  }

  .consumerPlatformButton,
.consumerSearchButton {
    min-height: 44px;
    border: 0;
    border-radius: 0;
  }

  .consumerPlatformButton {
    border-bottom: 1px solid var(--line-dark);
  }

  .consumerInsightSearchShell input {
    min-height: 46px;
    text-align: center;
  }

  .consumerSectionHead {
    display: grid;
  }

  .consumerExampleGrid,
.consumerInsightSummaryGrid,
.consumerInsightTwoCol {
    grid-template-columns: 1fr;
  }

  .consumerPrimaryTabs {
    gap: 18px;
    overflow-x: auto;
  }

  .consumerVocRow,
.consumerProductInfoTable > div {
    grid-template-columns: 1fr;
  }

  .consumerPendingSteps {
    grid-template-columns: 1fr;
  }

  .consumerProviderList {
    grid-template-columns: 1fr;
  }

  .consumerVocRow strong {
    text-align: left;
  }

  .consumerCompareTable > div {
    grid-template-columns: minmax(150px, 1fr) repeat(3, minmax(70px, 0.5fr));
  }
}

.aiToolSampleSection .consumerExampleCard {
  min-height: 190px;
}

.aiToolSampleSection .consumerExampleCard p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.65;
}

/* Rules integrated from the ChatBI/Agent member branch. */
.consumerBreadcrumb,
.consumerReportStatusRow,
.consumerTitleRow,
.consumerReportHeroBottom,
.consumerRangePanel,
.consumerDateRange,
.consumerPrimaryTabs,
.consumerSubTabs,
.consumerFastCardHead,
.consumerVoiceFilters,
.consumerQuoteTop,
.consumerQuoteTags {
  display: flex;
  align-items: center;
}

.consumerReportStatusRow {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.consumerReportStatusRow span,
.consumerReportStatusRow em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.consumerReportStatusRow span {
  border: 1px solid color-mix(in srgb, var(--success) 36%, var(--line-dark));
  background: color-mix(in srgb, var(--success) 10%, var(--surface-panel));
  color: var(--success);
}

.consumerReportStatusRow em {
  border: 1px solid var(--primary-border);
  background: var(--primary-active-bg);
  color: var(--text-2);
}

.consumerReportStatusRow button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
}

.consumerSubTabs button:hover,
.consumerSubTabs button.active,
.consumerVoiceFilters button.active,
.consumerVoiceFilters button:hover {
  border-color: var(--primary-border);
  background: var(--primary-active-bg);
  color: var(--text-1);
}

.consumerRealChartCard .compassChart {
  width: 100%;
}

.consumerCompetitorInput {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.consumerCompetitorInput input {
  min-width: 0;
  height: 42px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-1);
  padding: 0 12px;
  font: inherit;
}

.consumerCompetitorInput input[aria-invalid='true'] {
  border-color: var(--danger);
}

.consumerCompetitorInput button {
  min-height: 42px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  padding: 0 16px;
  font-weight: 900;
}

.consumerCompetitorInput button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.consumerFastCardHead button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-active-bg);
  color: var(--text-1);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
}

.consumerCompetitorPicker {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 12px;
}

.consumerCompetitorPicker label {
  min-width: 0;
  display: grid;
  flex: 1 1;
  gap: 6px;
}

.consumerCompetitorPicker label span,
.consumerCompareTarget > span,
.consumerVoiceSummary {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.consumerCompetitorPicker select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-1);
  padding: 0 10px;
  font: inherit;
}

.consumerCompetitorPicker > button {
  min-height: 36px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary);
  color: var(--accent-on-primary, #ffffff);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 900;
}

.consumerCompareTarget {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--text-3);
}

.consumerCompareTarget strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consumerVoiceSummary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: -2px 0 12px;
}

.consumerQuoteTop {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.consumerQuoteTop button[aria-pressed='true'] {
  border-color: var(--primary-border);
  background: var(--primary-active-bg);
  color: var(--primary);
}

.consumerQuoteTop button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.consumerQuoteTranslation.is-error {
  color: var(--danger) !important;
}

.consumerVoicePagination {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 12px;
}

.consumerVoicePagination button {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
}

.consumerVoicePagination button.active {
  border-color: var(--primary-border);
  background: var(--primary);
  color: var(--accent-on-primary, #ffffff);
}

.consumerVoicePagination button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

@media (max-width: 1280px) {

  .consumerTitleRow,
  .consumerReportHeroBottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 1280px) {

  .consumerRangePanel,
  .consumerCommentSummary {
    align-items: flex-start;
    justify-items: start;
  }
}

@media (max-width: 1280px) {

  .consumerReportStatusRow button {
    margin-left: 0;
  }
}

@media (max-width: 860px) {

  .consumerVocRow,
  .consumerProductInfoTable > div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {

  .consumerCompetitorPicker {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 860px) {

  .consumerCompetitorInput {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {

  .consumerCompareTarget {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 860px) {

  .consumerVoiceSummary {
    align-items: flex-start;
    flex-direction: column;
  }
}

.consumerCompareTarget .consumerCompareBase {
  flex: 0 0 auto;
  overflow: visible;
}

.consumerInsightInputError {
  width: min(760px, 100%);
  margin: 10px auto 0;
  color: var(--danger);
  font-size: 13px;
  font-weight: 750;
  text-align: left;
}

.consumerInsightInputError {
  width: min(760px, 100%);
  margin: -12px auto 0;
  color: var(--danger);
  font-size: 13px;
  font-weight: 750;
  text-align: left;
}

.consumerInsightSearchShell input[aria-invalid='true'] {
  box-shadow: inset 0 0 0 1px var(--danger);
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/shops.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Recovered member module CSS.
 * Owner: shops / zsyq.
 * Source: origin/feat/web-shop-competitor-zsyq.
 * Generated by selector ownership; do not mix other module prefixes here.
 */

.commerceDataListPanel.shopResultsCard .cuiDataListHeader {
  min-height: var(--commerce-list-head-height);
  align-items: center;
  border-bottom-color: var(--commerce-list-line);
  background: #fff;
  padding: 18px var(--commerce-list-cell-x);
}

.commerceDataListPanel.shopResultsCard .cuiDataListTitle {
  color: var(--commerce-list-text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.25;
}

.commerceDataListPanel.shopResultsCard .cuiDataListDescription {
  color: var(--commerce-list-muted);
  font-size: 13px;
  font-weight: 700;
}

.commerceDataListPanel.shopResultsCard .shopSearchTable {
  border-collapse: collapse;
  color: var(--commerce-list-text);
  font-size: 14px;
}

.commerceDataListPanel.shopResultsCard .shopSearchTable thead th,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableHeadCell {
  height: var(--commerce-list-head-height);
  border-bottom: 1px solid var(--commerce-list-line);
  background: #fff;
  color: var(--commerce-list-text);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0;
  padding: 0 var(--commerce-list-cell-x);
  text-transform: none;
  vertical-align: middle;
}

.commerceDataListPanel.shopResultsCard .shopSearchTable tbody tr,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableRow:not(.cuiDataListTableHead) {
  height: var(--commerce-list-row-height);
}

.commerceDataListPanel.shopResultsCard .shopSearchTable tbody td,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableCell {
  border-bottom: 1px solid var(--commerce-list-line);
  color: #344054;
  font-size: 14px;
  line-height: 1.45;
  padding: 24px var(--commerce-list-cell-x);
  vertical-align: middle;
}

.commerceDataListPanel.shopResultsCard .shopSearchTable tbody tr:hover,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableRow:not(.cuiDataListTableHead):hover {
  background: #fbfdff;
}

.commerceDataListPanel.shopResultsCard .shopSearchTable th:first-child,
.commerceDataListPanel.shopResultsCard .shopSearchTable td:first-child,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableHeadCell:first-child,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableCell:first-child {
  width: 320px;
  min-width: 320px;
}

.commerceDataListPanel.shopResultsCard .shopInfoCell {
  min-width: 0;
  gap: 18px;
}

.commerceDataListPanel.shopResultsCard .shopAvatar {
  width: var(--commerce-list-media);
  height: var(--commerce-list-media);
  flex: 0 0 var(--commerce-list-media);
}

.commerceDataListPanel.shopResultsCard .shopAvatar {
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(24, 32, 51, 0.08);
}

.commerceDataListPanel.shopResultsCard .shopInfoCell strong {
  color: var(--commerce-list-text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.35;
}

.commerceDataListPanel.shopResultsCard .shopInfoCell small {
  margin-top: 5px;
  color: var(--commerce-list-muted);
  font-size: 12px;
  line-height: 1.4;
}

.commerceDataListPanel.shopResultsCard .shopTrendSvg {
  width: var(--commerce-list-chart-width);
  height: var(--commerce-list-chart-height);
}

.commerceDataListPanel.shopResultsCard .shopSearchTable td > button,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableCell > button {
  width: var(--commerce-list-action-size);
  height: var(--commerce-list-action-size);
  border: 1px solid #e8edf4;
  border-radius: 999px;
  background: #fff;
  color: var(--commerce-list-muted);
  box-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
}

.commerceDataListPanel.shopResultsCard .shopSearchTable td > button.collected,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableCell > button.collected {
  border-color: color-mix(in srgb, #f59e0b 28%, #e8edf4);
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.commerceDataListPanel.shopResultsCard .shopResultsActions {
  gap: 10px;
}

.commerceDataListPanel.shopResultsCard .shopResultsActions > button {
  min-height: 38px;
  border: 1px solid #e8edf4;
  border-radius: 12px;
  background: #fff;
  color: #364152;
  box-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
  font-size: 14px;
  font-weight: 700;
}

.commerceDataListPanel.shopResultsCard .shopResultsActions > button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--primary) 24%, #e8edf4);
  background: color-mix(in srgb, var(--primary) 6%, #ffffff);
  color: var(--primary);
}

.commerceDataListPanel.shopResultsCard .shopTags em {
  min-height: 26px;
  padding: 0 9px;
  font-size: 12px;
}

.shopSearchPage {
  --shop-accent: var(--primary, #6d35d8);
  --shop-accent-strong: color-mix(in srgb, var(--shop-accent) 84%, #111827);
  --shop-accent-soft: color-mix(in srgb, var(--shop-accent) 10%, #ffffff);
  --shop-bg: var(--surface-panel, #ffffff);
  --shop-bg-soft: var(--surface-panel-strong, #f8fafc);
  --shop-line: var(--line-dark, #e5e7eb);
  --shop-line-strong: color-mix(in srgb, var(--shop-line) 72%, var(--shop-accent));
  --shop-text: var(--text-1, #111827);
  --shop-muted: var(--text-3, #64748b);
  --shop-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  --shop-list-logo-size: 52px;
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  align-content: start;
  gap: 18px;
  color: var(--shop-text);
}

.shopRankPage,
.shopDetailPage {
  gap: 18px;
}

.shopRankFilterCard {
  align-content: start;
}

.shopSearchHeader,
.shopDetailTitleRow,
.shopRankSummary,
.shopSearchCard,
.shopResultsCard,
.shopDetailSection,
.shopDetailProfileCard,
.shopDetailRatingCard,
.shopDetailChartCard {
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-bg);
  box-shadow: var(--shop-shadow);
}

.shopSearchHeader,
.shopDetailTitleRow {
  min-height: 144px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  overflow: hidden;
  padding: 26px 28px;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--shop-accent) 18%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--shop-accent) 12%, #ffffff), #ffffff 58%);
}

.shopSearchHeader span,
.shopDetailTitleRow span,
.shopRankSummary span,
.shopRankFilterHeader span,
.shopRankFilterSectionTitle {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.shopSearchHeader h1,
.shopDetailTitleRow h1 {
  margin: 8px 0 0;
  color: var(--shop-text);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: 0;
}

.shopSearchHeader p,
.shopDetailTitleRow p,
.shopRankSummary p,
.shopResultsHeader p,
.shopDetailSectionHeader p {
  margin: 10px 0 0;
  color: var(--shop-muted);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.65;
}

.shopSearchHeaderMeta,
.shopDetailUpdate {
  min-width: 128px;
  display: grid;
  justify-items: end;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 18%, var(--shop-line));
  border-radius: 8px;
  background: color-mix(in srgb, #ffffff 76%, var(--shop-accent) 8%);
  padding: 12px 14px;
}

.shopSearchHeaderMeta strong,
.shopDetailUpdate strong {
  color: var(--shop-accent-strong);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.shopSearchCard,
.shopResultsCard,
.shopDetailSection {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.shopSearchBar {
  width: min(760px, 100%);
  min-height: 50px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--shop-accent);
  border-radius: 999px;
  background: #ffffff;
  padding: 0 6px 0 18px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--shop-accent) 10%, transparent);
}

.shopSearchBar svg {
  color: var(--shop-muted);
}

.shopSearchBar input {
  min-width: 0;
  height: 46px;
  border: 0;
  background: transparent;
  color: var(--shop-text);
  font: inherit;
  font-size: 14px;
  font-weight: 780;
  outline: 0;
}

.shopSearchBar input::placeholder {
  color: color-mix(in srgb, var(--shop-muted) 72%, transparent);
}

.shopSearchBar button,
.shopResultsHeader button,
.shopRankFilterHeader button,
.shopRankSelected button,
.shopRankQuickFilters button,
.shopDetailProfileActions button,
.shopDetailSectionTools button,
.shopDetailFilterLine button,
.shopDetailRefreshButton,
.shopRankPagination button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--shop-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--shop-text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 0 14px;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.shopSearchBar button,
.shopRankQuickFilters button.active,
.shopRankPagination button.active {
  border-color: var(--shop-accent);
  background: var(--shop-accent);
  color: #ffffff;
}

.shopSearchBar button:hover,
.shopResultsHeader button:hover,
.shopRankFilterHeader button:hover,
.shopRankSelected button:hover,
.shopRankQuickFilters button:hover,
.shopDetailProfileActions button:hover,
.shopDetailSectionTools button:hover,
.shopDetailFilterLine button:hover,
.shopDetailRefreshButton:hover,
.shopRankPagination button:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 44%, var(--shop-line));
  background: var(--shop-accent-soft);
  color: var(--shop-accent-strong);
}

.shopSearchBar button:hover,
.shopRankQuickFilters button.active:hover,
.shopRankPagination button.active:hover {
  background: var(--shop-accent-strong);
  color: #ffffff;
}

.shopFilterBlock {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--shop-line);
  padding-top: 14px;
}

.shopFilterRow {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.shopFilterRow > span,
.shopFilterGrid label > span,
.shopAdvancedGrid label > span {
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 34px;
}

.shopFilterRow > div,
.shopRankQuickFilters,
.shopDetailSectionTools,
.shopDetailFilterLine {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.shopCategoryFilter {
  position: relative;
}

.shopCategoryFilterItem {
  position: relative;
  display: inline-flex;
}

.shopCategorySubmenu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  width: min(218px, calc(100vw - 32px));
  max-height: 264px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-surface);
  box-shadow: 0 12px 24px rgb(25 48 88 / 18%);
}

.shopFilterRow .shopCategorySubmenu button {
  width: 100%;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--shop-text);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}

.shopFilterRow .shopCategorySubmenu button:hover,
.shopFilterRow .shopCategorySubmenu button.is-active {
  background: color-mix(in srgb, var(--shop-accent) 12%, transparent);
  color: var(--shop-accent);
}

.shopFilterRow button {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--shop-text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 820;
  padding: 0 14px;
}

.shopFilterRow button:hover {
  background: var(--shop-bg-soft);
}

.shopFilterRow button.active,
.shopDetailSectionTools button.active {
  border-color: var(--shop-accent);
  background: var(--shop-accent);
  color: #ffffff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--shop-accent) 18%, transparent);
}

.shopRankingDatePicker {
  position: relative;
  min-width: 0;
}

.shopRankingDateButton {
  display: inline-grid !important;
  grid-template-columns: 16px minmax(112px, 1fr) 16px;
  align-items: center;
  justify-items: center;
  min-height: 34px;
  width: 190px;
  max-width: 100%;
  border-color: color-mix(in srgb, var(--shop-accent) 18%, var(--shop-line)) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--shop-bg-soft) 92%, #ffffff),
      color-mix(in srgb, var(--shop-accent) 6%, var(--shop-bg))
    ) !important;
  color: var(--shop-text) !important;
  column-gap: 8px;
  padding: 0 12px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.shopRankingDateButton .compassIcon:first-child {
  justify-self: start;
}

.shopRankingDateButton .compassIcon:last-child {
  justify-self: end;
}

.shopRankingDateButton:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 44%, var(--shop-line)) !important;
  background: var(--shop-accent-soft) !important;
  color: var(--shop-accent-strong) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--shop-accent) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transform: translateY(-1px);
}

.shopRankingDateButton strong {
  justify-self: center;
  min-width: 0;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopRankingCalendarPanel {
  --ranking-calendar-accent: var(--shop-accent, var(--primary, #6d28d9));
  --ranking-calendar-accent-strong: var(--shop-accent-strong, var(--primary-light, #7c3aed));
  --ranking-calendar-accent-soft: var(--shop-accent-soft, color-mix(in srgb, var(--ranking-calendar-accent) 10%, #ffffff));
  --ranking-calendar-text: var(--shop-text, var(--text-1, #111827));
  --ranking-calendar-muted: var(--shop-muted, var(--text-3, #8a94a6));
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 90;
  width: 324px;
  border: 1px solid color-mix(in srgb, var(--ranking-calendar-accent) 18%, var(--shop-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--shop-bg) 88%, #ffffff);
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.16), 0 2px 6px color-mix(in srgb, var(--ranking-calendar-accent) 10%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  padding: 12px;
}

.shopRankingCalendarHeader {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ranking-calendar-accent) 7%, var(--shop-bg-soft));
  padding: 4px;
}

.shopRankingCalendarHeader strong {
  min-width: 0;
  color: var(--ranking-calendar-text);
  font-size: 14px;
  font-weight: 950;
  text-align: center;
}

.shopRankingCalendarHeader button,
.shopRankingCalendarGrid button,
.shopRankingMonthGrid button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ranking-calendar-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
}

.shopRankingCalendarHeader button:not(:disabled):hover,
.shopRankingCalendarGrid button:not(:disabled):hover,
.shopRankingMonthGrid button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--ranking-calendar-accent) 22%, transparent);
  background: color-mix(in srgb, var(--ranking-calendar-accent) 10%, transparent);
  color: var(--ranking-calendar-accent-strong);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--ranking-calendar-accent) 9%, transparent);
  transform: translateY(-1px);
}

.shopRankingCalendarHeader button:disabled,
.shopRankingCalendarGrid button:disabled,
.shopRankingMonthGrid button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.shopRankingCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-top: 12px;
}

.shopRankingCalendarGrid span {
  color: var(--ranking-calendar-muted);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.shopRankingCalendarGrid button {
  padding: 0;
}

.shopRankingCalendarGrid button.muted {
  color: #aeb7c4;
}

.shopRankingCalendarGrid button.active,
.shopRankingMonthGrid button.active {
  border-color: var(--ranking-calendar-accent);
  background: var(--ranking-calendar-accent);
  color: var(--accent-on-primary, #ffffff);
  box-shadow: 0 9px 18px color-mix(in srgb, var(--ranking-calendar-accent) 28%, transparent);
}

.shopRankingCalendarGrid button.active:not(:disabled):hover,
.shopRankingMonthGrid button.active:not(:disabled):hover {
  background: var(--ranking-calendar-accent-strong);
  color: var(--accent-on-primary, #ffffff);
  box-shadow: 0 11px 22px color-mix(in srgb, var(--ranking-calendar-accent) 32%, transparent);
}

.shopRankingCalendarGrid.weekMode button {
  border-radius: 0;
  border-left-color: transparent;
  border-right-color: transparent;
}

.shopRankingCalendarGrid.weekMode button.weekStart {
  border-left-color: transparent;
  border-radius: 8px 0 0 8px;
}

.shopRankingCalendarGrid.weekMode button.weekEnd {
  border-right-color: transparent;
  border-radius: 0 8px 8px 0;
}

.shopRankingCalendarGrid.weekMode button.active {
  border-color: color-mix(in srgb, var(--ranking-calendar-accent) 12%, transparent);
  background: color-mix(in srgb, var(--ranking-calendar-accent) 13%, transparent);
  color: var(--ranking-calendar-accent-strong);
  box-shadow: none;
}

.shopRankingCalendarGrid.weekMode button.active.weekStart,
.shopRankingCalendarGrid.weekMode button.active.weekEnd {
  background: var(--ranking-calendar-accent);
  color: var(--accent-on-primary, #ffffff);
  box-shadow: 0 9px 18px color-mix(in srgb, var(--ranking-calendar-accent) 24%, transparent);
}

.shopRankingCalendarGrid.weekMode button:not(:disabled):hover {
  box-shadow: none;
  transform: none;
}

.shopRankingCalendarGrid.weekMode button.weekHover {
  border-color: color-mix(in srgb, var(--ranking-calendar-accent) 12%, transparent);
  background: color-mix(in srgb, var(--ranking-calendar-accent) 10%, transparent);
  color: var(--ranking-calendar-accent-strong);
  box-shadow: none;
  transform: none;
}

.shopRankingCalendarGrid.weekMode button.weekHover.weekStart {
  border-left-color: color-mix(in srgb, var(--ranking-calendar-accent) 22%, transparent);
  border-radius: 8px 0 0 8px;
  background: color-mix(in srgb, var(--ranking-calendar-accent) 16%, transparent);
}

.shopRankingCalendarGrid.weekMode button.weekHover.weekEnd {
  border-right-color: color-mix(in srgb, var(--ranking-calendar-accent) 22%, transparent);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--ranking-calendar-accent) 16%, transparent);
}

.shopRankingCalendarGrid.weekMode button.active:not(:disabled):hover {
  background: color-mix(in srgb, var(--ranking-calendar-accent) 18%, transparent);
  color: var(--ranking-calendar-accent-strong);
}

.shopRankingCalendarGrid.weekMode button.active.weekStart:not(:disabled):hover,
.shopRankingCalendarGrid.weekMode button.active.weekEnd:not(:disabled):hover {
  background: var(--ranking-calendar-accent-strong);
  color: var(--accent-on-primary, #ffffff);
}

.shopRankingMonthGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.shopRankingMonthGrid button {
  min-height: 38px;
}

.shopFilterGrid,
.shopAdvancedGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, max-content));
  align-items: center;
  gap: 10px 14px;
}

.shopFilterGrid label,
.shopAdvancedGrid label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.shopFilterGrid select,
.shopAdvancedGrid input,
.shopRankFooter input,
.shopDetailSection select,
.shopDetailSection input,
.shopDetailSection textarea {
  min-width: 0;
  height: 38px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-text);
  font: inherit;
  font-size: 13px;
  font-weight: 820;
  outline: 0;
}

.shopFilterGrid select {
  min-width: 132px;
  padding: 0 32px 0 12px;
}

.shopAdvancedGrid label > div {
  display: grid;
  grid-template-columns: minmax(82px, 1fr) auto minmax(82px, 1fr);
  align-items: center;
  gap: 6px;
}

.shopAdvancedGrid input {
  width: 100%;
  padding: 0 10px;
}

.shopAdvancedGrid em {
  color: var(--shop-muted);
  font-style: normal;
}

.shopFilterGrid select:focus,
.shopAdvancedGrid input:focus,
.shopDetailSection select:focus,
.shopDetailSection input:focus,
.shopDetailSection textarea:focus {
  border-color: color-mix(in srgb, var(--shop-accent) 58%, var(--shop-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-accent) 14%, transparent);
}

.shopMetricGrid,
.shopDetailMetricGrid,
.shopDetailMiniMetricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.shopMetricGrid article,
.shopDetailMetricGrid article,
.shopDetailMiniMetricGrid article {
  min-width: 0;
  display: grid;
  gap: 6px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-bg);
  padding: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.shopDetailMetricGrid article.is-link {
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.shopDetailMetricGrid article.is-link:hover,
.shopDetailMetricGrid article.is-link:focus-visible {
  border-color: color-mix(in srgb, var(--shop-accent) 44%, var(--shop-line));
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.shopMetricGrid span,
.shopDetailMetricGrid span,
.shopDetailMiniMetricGrid span {
  min-width: 0;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 850;
}

.shopMetricGrid strong,
.shopDetailMetricGrid strong,
.shopDetailMiniMetricGrid strong {
  min-width: 0;
  color: var(--shop-text);
  font-size: 24px;
  font-weight: 950;
  line-height: 1.1;
}

.shopMetricGrid em,
.shopDetailMetricGrid em {
  min-width: 0;
  color: var(--shop-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.shopPhase4Panel {
  display: grid;
  gap: 14px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-bg);
  box-shadow: var(--shop-shadow);
  padding: 18px;
}

.shopPhase4Header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.shopPhase4Header > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.shopPhase4Header span,
.shopPhase4Grid span {
  min-width: 0;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 850;
}

.shopPhase4Header h2 {
  margin: 0;
  color: var(--shop-text);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.15;
}

.shopPhase4Header > strong {
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, #22c55e 12%, #ffffff);
  color: #15803d;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 8px 10px;
}

.shopPhase4Grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.shopPhase4Grid article {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--shop-line) 82%, var(--shop-accent));
  border-radius: 8px;
  background: var(--shop-bg-soft);
  padding: 12px;
}

.shopPhase4Grid strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--shop-text);
  font-size: 18px;
  font-weight: 950;
}

.shopPhase4Grid em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--shop-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.shopExportStatus {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  border: 1px solid color-mix(in srgb, #22c55e 28%, var(--shop-line));
  border-radius: 8px;
  background: color-mix(in srgb, #22c55e 8%, #ffffff);
  padding: 10px 12px;
}

.shopExportStatus strong {
  color: #15803d;
  font-size: 13px;
  font-weight: 900;
}

.shopExportStatus span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 820;
}

.shopExportStatus em {
  color: var(--shop-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.shopResultsHeader,
.shopRankFilterHeader,
.shopRankFooter,
.shopRankSelected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.shopResultsHeader h2 {
  margin: 0;
  color: var(--shop-text);
  font-size: 22px;
  font-weight: 950;
}

.shopResultsHeader > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shopResultsCard.cuiDataList {
  gap: 0;
  padding: 0;
}

.shopResultsCard .cuiDataListHeader {
  align-items: flex-start;
  border-bottom-color: var(--shop-line);
  padding: 18px;
}

.shopResultsCard .cuiDataListTitle {
  color: var(--shop-text);
  font-size: 22px;
  font-weight: 950;
}

.shopResultsCard .cuiDataListDescription {
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 760;
}

.shopResultsActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shopResultsCard .cuiDataListBody {
  background: #ffffff;
}

.shopDataListScroller,
.shopTableWrap {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
}

.shopDataListScroller.cuiDataList,
.shopTableWrap.cuiDataList {
  box-shadow: none;
}

.shopDataListScroller .cuiDataListBody,
.shopTableWrap .cuiDataListBody {
  background: #ffffff;
}

.shopSearchTable {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  color: var(--shop-text);
}

.shopSearchTable th,
.shopSearchTable td,
.shopSearchTable .cuiDataListTableHeadCell,
.shopSearchTable .cuiDataListTableCell {
  border-bottom: 1px solid var(--shop-line);
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.shopSearchTable th,
.shopSearchTable .cuiDataListTableHeadCell {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #ffffff;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 900;
}

.shopSearchTable tbody tr:hover,
.shopSearchTable .cuiDataListTableRow:not(.cuiDataListTableHead):hover {
  background: color-mix(in srgb, var(--shop-accent) 4%, #ffffff);
}

.shopSearchTable tbody tr.is-target-shop {
  background: color-mix(in srgb, var(--shop-accent) 9%, #ffffff);
  box-shadow: inset 4px 0 0 var(--shop-accent);
}

.shopSearchTable tbody tr.is-target-shop:hover {
  background: color-mix(in srgb, var(--shop-accent) 12%, #ffffff);
}

.shopSearchTable b,
.shopSearchTable .cuiDataListTableCell b {
  color: var(--shop-text);
  font-weight: 920;
}

.shopInfoLink {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.shopInfoCellShell {
  position: relative;
  min-width: 260px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: start;
  gap: 8px;
}

.shopInfoCellShell .shopInfoLink:hover strong {
  color: var(--shop-accent-strong);
}

.shopNameTranslateButton {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 20%, var(--shop-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--shop-bg-soft) 88%, #ffffff);
  color: var(--shop-muted);
  cursor: pointer;
  padding: 0;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
}

.shopNameTranslateButton:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 44%, var(--shop-line));
  background: var(--shop-accent-soft);
  color: var(--shop-accent-strong);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--shop-accent) 12%, transparent);
  transform: translateY(-1px);
}

.shopTranslateOverlay {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.24);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.shopTranslateDialog {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  display: grid;
  gap: 18px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 94%, transparent);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  padding: 28px;
}

.shopTranslateClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  padding: 0;
}

.shopTranslateClose:hover {
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.shopTranslatePreview {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding-right: 28px;
}

.shopTranslatePreview .shopAvatar {
  width: 58px;
  height: 58px;
  font-size: 18px;
}

.shopTranslatePreview strong {
  display: block;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
}

.shopTranslatePreview p {
  margin: 6px 0 0;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.55;
}

.shopTranslateLanguage {
  width: 132px;
  display: grid;
  gap: 7px;
}

.shopTranslateLanguage span,
.shopTranslateResult span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 850;
}

.shopTranslateLanguage select {
  height: 38px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  outline: 0;
  padding: 0 14px;
}

.shopTranslateLanguage select:focus {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.shopTranslateResult {
  position: relative;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 14px 82px 14px 14px;
}

.shopTranslateResult p {
  min-height: 48px;
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 820;
  line-height: 1.6;
}

.shopTranslateResult button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 30px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  padding: 0 12px;
}

.shopTranslateResult button:hover {
  border-color: var(--primary-border);
  background: var(--theme-switcher-active-bg);
  color: var(--text-1);
}

.shopInfoCell,
.shopDetailProfileTop,
.shopDetailAccountList article,
.shopDetailSimilarGrid article {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.shopAvatar,
.shopDetailAvatar,
.shopDetailSmallAvatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--shop-accent) 82%, #ffffff), #22c55e);
  color: #ffffff;
  font-weight: 950;
}

.shopAvatar {
  width: 42px;
  height: 42px;
}

.shopInfoCell > div:last-child,
.shopDetailProfileTop > div,
.shopDetailAccountList article > div:last-child,
.shopDetailSimilarGrid article > div:last-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.shopInfoCell strong,
.shopDetailProfileTop h2,
.shopDetailAccountList strong,
.shopDetailSimilarGrid strong {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--shop-text);
  font-size: 14px;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopInfoCell strong span {
  margin-left: 6px;
  border-radius: 999px;
  background: var(--shop-accent-soft);
  color: var(--shop-accent-strong);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 900;
}

.shopBrandBadge {
  align-self: center;
  border: 1px solid color-mix(in srgb, #ec407a 42%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, #ec407a 8%, #ffffff);
  color: #df2d67;
  font-size: 11px;
  font-weight: 850;
  line-height: 20px;
  padding: 0 6px;
  white-space: nowrap;
}

.shopDetailProfileIdentity .shopBrandBadge {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

.shopTags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.shopTags em {
  border-radius: 999px;
  background: var(--shop-bg-soft);
  color: var(--shop-muted);
  padding: 2px 6px;
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.shopInfoCell small,
.shopDetailAccountList span,
.shopDetailSimilarGrid span,
.shopDetailSimilarGrid p,
.shopDetailSimilarGrid em {
  min-width: 0;
  overflow: hidden;
  color: var(--shop-muted);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopTrendSvg {
  width: 136px;
  height: 46px;
  display: block;
}

.shopTrendSvg path {
  fill: color-mix(in srgb, var(--shop-accent) 12%, transparent);
}

.shopTrendSvg polyline {
  fill: none;
  stroke: var(--shop-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.shopSearchTable td > button,
.shopSearchTable .cuiDataListTableCell > button,
.shopSearchTable .collected {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-muted);
  cursor: pointer;
}

.shopSearchTable .collected,
.shopSearchTable .cuiDataListTableCell > button.collected {
  border-color: color-mix(in srgb, #f59e0b 28%, var(--shop-line));
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.shopRankSummary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
}

.shopRankSummary strong {
  display: block;
  margin-top: 4px;
  color: var(--shop-text);
  font-size: 18px;
  font-weight: 950;
}

.shopRankFilterHeader strong {
  display: block;
  color: var(--shop-text);
  font-size: 16px;
  font-weight: 950;
}

.shopRankSelected {
  border-top: 1px solid var(--shop-line);
  padding-top: 12px;
}

.shopRankSelected > span {
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 850;
}

.shopRankSelected > div {
  min-width: 0;
  flex: 1 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shopRankSelected em,
.shopRankStateStrip span,
.shopRankChange,
.shopRankMedal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-style: normal;
  font-weight: 850;
}

.shopRankSelected em {
  min-height: 30px;
  background: var(--shop-bg-soft);
  color: var(--shop-text);
  padding: 0 10px;
  font-size: 12px;
}

.shopRankMedal {
  width: 30px;
  height: 30px;
  background: var(--shop-bg-soft);
  color: var(--shop-text);
}

.shopRankMedal.rank-1,
.shopRankMedal.rank-2,
.shopRankMedal.rank-3 {
  background: var(--shop-accent);
  color: #ffffff;
}

.shopRankChange {
  min-height: 28px;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  padding: 0 9px;
  font-size: 12px;
}

.shopRankChange.positive {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.shopRankStateStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--shop-line);
  padding-top: 12px;
}

.shopRankStateStrip span {
  min-height: 30px;
  background: var(--shop-bg-soft);
  color: var(--shop-muted);
  padding: 0 10px;
  font-size: 12px;
}

.shopRankFooter {
  border-top: 1px solid var(--shop-line);
  padding-top: 12px;
}

.shopRankFooter span {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 850;
}

.shopRankFooter strong {
  display: block;
  margin-top: 4px;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 850;
}

.shopRankPagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shopDetailBreadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 800;
}

.shopDetailBreadcrumb a {
  color: var(--shop-accent-strong);
  text-decoration: none;
}

.shopDetailHeroGrid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
}

.shopDetailProfileCard,
.shopDetailRatingCard,
.shopDetailChartCard {
  padding: 18px;
}

.shopDetailAvatar {
  width: 58px;
  height: 58px;
  font-size: 22px;
}

.shopDetailProfileList {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
}

.shopDetailProfileList div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--shop-line);
  padding-bottom: 8px;
}

.shopDetailProfileList dt,
.shopDetailProfileList dd {
  margin: 0;
  color: var(--shop-muted);
  font-size: 12px;
}

.shopDetailProfileList dd {
  color: var(--shop-text);
  font-weight: 850;
}

.shopDetailProfileActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.shopDetailHeroMain {
  display: grid;
  gap: 14px;
}

.shopDetailRatingCard {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.shopDetailRatingCard > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.shopDetailRatingCard strong {
  color: var(--shop-text);
  font-size: 18px;
  font-weight: 950;
}

.shopDetailRatingItem {
  border-left: 1px solid var(--shop-line);
  padding-left: 12px;
}

.shopDetailAnchorNav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  box-shadow: var(--shop-shadow);
}

.shopDetailAnchorNav a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 850;
  padding: 0 12px;
  text-decoration: none;
}

.shopDetailAnchorNav a:hover {
  background: var(--shop-accent-soft);
  color: var(--shop-accent-strong);
}

.shopDetailSectionHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.shopDetailSectionHeader h2,
.shopDetailChartCard h3 {
  margin: 0;
  color: var(--shop-text);
  font-size: 18px;
  font-weight: 950;
}

.shopDetailSectionTools span {
  flex: 1 1;
}

.shopDetailTwoColumn {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.shopDetailBarList {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.shopDetailPage .shopDetailBarList .shopBarRow {
  display: grid;
  grid-template-columns: minmax(96px, 0.9fr) minmax(140px, 2.6fr) minmax(60px, auto) minmax(42px, auto);
  align-items: center;
  gap: 14px;
  padding: 7px 10px;
  border-radius: 12px;
  transition: background 220ms ease, opacity 220ms ease;
}

.shopDetailPage .shopDetailBarList .shopBarRow.is-active {
  background: color-mix(in srgb, var(--bar-color) 9%, transparent);
}

.shopDetailPage .shopDetailBarList .shopBarRow.is-dimmed {
  opacity: 0.5;
}

.shopDetailPage .shopBarLabel {
  min-width: 0;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shopDetailPage .shopBarTrack {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: var(--shop-bg-soft);
  overflow: hidden;
}

.shopDetailPage .shopBarFill {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bar-color) 52%, #ffffff), var(--bar-color));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--bar-color) 32%, transparent);
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--bar-delay, 0ms);
}

.shopDetailPage .shopBarValue {
  text-align: right;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 900;
}

.shopDetailPage .shopBarPct {
  text-align: right;
  color: var(--bar-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.shopDetailTableWrap.cuiDataList {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shopDetailTableWrap .cuiDataListBody {
  overflow-x: auto;
}

.shopDetailTable {
  width: 100%;
  border-collapse: collapse;
}

.shopDetailTable th,
.shopDetailTable td,
.shopDetailTable .cuiDataListTableHeadCell,
.shopDetailTable .cuiDataListTableCell {
  border-bottom: 1px solid var(--shop-line);
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
}

.shopDetailTable th,
.shopDetailTable .cuiDataListTableHeadCell {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 900;
}

.shopDetailSortHeader {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.shopDetailSortHeader:hover,
.shopDetailSortHeader:focus-visible,
.shopDetailSortHeader.is-asc,
.shopDetailSortHeader.is-desc {
  color: var(--shop-accent);
}

.shopDetailSortHeader:focus-visible {
  outline: 2px solid var(--focus-ring, var(--shop-accent));
  outline-offset: 3px;
}

.shopDetailSortArrow {
  display: inline-flex;
  color: var(--shop-faint);
  transform: rotate(180deg);
  transition: color 0.15s ease, transform 0.15s ease;
}

.shopDetailSortHeader.is-asc .shopDetailSortArrow {
  color: currentColor;
  transform: rotate(0deg);
}

.shopDetailSortHeader.is-desc .shopDetailSortArrow {
  color: currentColor;
}

.shopDetailTable td,
.shopDetailTable .cuiDataListTableCell {
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 760;
}

.shopDetailAccountList,
.shopDetailSimilarGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.shopDetailAccountList article,
.shopDetailSimilarGrid article {
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.shopDetailAccountCard {
  color: inherit;
  text-decoration: none;
}

.shopDetailAccountCard > article {
  height: 100%;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.shopDetailAccountCard:hover > article {
  border-color: color-mix(in srgb, var(--shop-accent) 32%, var(--shop-line));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--shop-accent) 12%, transparent);
  transform: translateY(-1px);
}

.shopDetailAccountCard:focus-visible {
  outline: none;
}

.shopDetailAccountCard:focus-visible > article {
  border-color: var(--shop-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-accent) 22%, transparent);
}

.shopDetailSmallAvatar {
  width: 38px;
  height: 38px;
}

.shopDetailFilterGroup,
.shopDetailDateRange,
.shopDetailNumberRange {
  min-width: 0;
  display: inline-grid;
  align-items: center;
  gap: 5px;
}

.shopDetailDateRange,
.shopDetailNumberRange {
  grid-template-columns: auto minmax(132px, 1fr) auto minmax(132px, 1fr);
}

.shopDetailFilterGroup {
  grid-template-columns: auto minmax(150px, 1fr);
}

.shopDetailFilterGroup > span,
.shopDetailDateRange > span,
.shopDetailNumberRange > span {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.shopDetailDateRange input,
.shopDetailNumberRange input,
.shopDetailFilterGroup select {
  width: 100%;
  padding: 0 10px;
}

.shopDetailDateRange input.is-empty,
.shopDetailDateRange input.is-empty::-webkit-datetime-edit,
.shopDetailDateRange input.is-empty::-webkit-datetime-edit-fields-wrapper,
.shopDetailDateRange input.is-empty::-webkit-datetime-edit-text,
.shopDetailDateRange input.is-empty::-webkit-datetime-edit-month-field,
.shopDetailDateRange input.is-empty::-webkit-datetime-edit-day-field,
.shopDetailDateRange input.is-empty::-webkit-datetime-edit-year-field {
  color: transparent;
}

.shopDetailDateRange em,
.shopDetailNumberRange em {
    color: var(--shop-faint);
    font-style: normal;
    font-weight: 900;
}

.shopDetailProductFilters {
    display: grid;
    gap: 12px;
    border: 1px solid var(--shop-line);
    border-radius: 8px;
    background: var(--shop-bg-soft);
    padding: 14px;
}

.shopDetailProductListHeader,
.shopDetailProductFilterRow,
.shopDetailProductFilterSelects {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.shopDetailProductListHeader {
    justify-content: space-between;
}

.shopDetailProductListHeader h3 {
    margin: 0;
    color: var(--shop-text);
    font-size: 14px;
    font-weight: 950;
}

.shopDetailProductListHeader button,
.shopDetailProductFilterRow button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--shop-line);
    border-radius: 8px;
    background: var(--shop-bg);
    color: var(--shop-muted);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    padding: 0 11px;
    white-space: nowrap;
}

.shopDetailProductListHeader button:hover,
.shopDetailProductFilterRow button:hover,
.shopDetailProductFilterRow button.active {
    border-color: color-mix(in srgb, var(--shop-accent) 46%, var(--shop-line));
    background: var(--shop-accent-soft);
    color: var(--shop-accent-strong);
}

.shopDetailProductFilterRow > span {
    flex: 0 0 74px;
    color: var(--shop-muted);
    font-size: 12px;
    font-weight: 950;
}

.shopDetailProductChipGroup,
.shopDetailProductDatePresets {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.shopDetailProductChipGroup button em {
    color: var(--shop-faint);
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
}

.shopDetailProductFilterSelects .shopDetailFilterGroup {
    min-width: 196px;
}

.shopDetailAccountStats {
    display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.shopDetailAccountStats em {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--shop-line);
  border-radius: 999px;
  background: var(--shop-bg-soft);
  color: var(--shop-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  padding: 0 8px;
}

.shopDetailAccountStatusLine {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.shopDetailAccountList .shopDetailAccountBadge {
  flex: 0 0 auto;
  overflow: visible;
  border: 1px solid color-mix(in srgb, #07845d 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #07845d 12%, #ffffff);
  color: #087a58;
  font-size: 10px;
  font-weight: 850;
  line-height: 18px;
  padding: 0 6px;
  text-overflow: clip;
  white-space: nowrap;
}

.shopDetailAccountList .shopDetailAccountLinkedDescription {
  min-width: 0;
  line-height: 18px;
}

@media (max-width: 1280px) {
  .shopSearchHeader,
.shopDetailTitleRow,
.shopRankSummary,
.shopResultsHeader,
.shopRankFooter,
.shopRankSelected {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .shopMetricGrid,
.shopDetailMetricGrid,
.shopDetailMiniMetricGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shopDetailHeroGrid,
.shopDetailTwoColumn {
    grid-template-columns: minmax(0, 1fr);
  }

  .shopDetailRatingCard,
.shopDetailAccountList,
.shopDetailSimilarGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .shopSearchPage {
    min-width: 0;
  }

  .shopSearchHeader,
.shopDetailTitleRow,
.shopSearchCard,
.shopResultsCard,
.shopDetailSection {
    padding: 16px;
  }

  .shopSearchBar {
    grid-template-columns: 20px minmax(0, 1fr);
    border-radius: 8px;
    padding: 10px 12px;
  }

  .shopSearchBar button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .shopFilterRow,
.shopFilterGrid,
.shopAdvancedGrid,
.shopMetricGrid,
.shopDetailMetricGrid,
.shopDetailMiniMetricGrid,
.shopDetailRatingCard,
.shopDetailAccountList,
.shopDetailSimilarGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shopDetailFilterGroup,
.shopDetailDateRange,
.shopDetailNumberRange {
      width: 100%;
      grid-template-columns: minmax(0, 1fr);
  }

  .shopDetailProductListHeader,
.shopDetailProductFilterRow,
.shopDetailProductFilterSelects,
.shopDetailProductFilterSelects .shopDetailFilterGroup {
      width: 100%;
  }

  .shopDetailProductFilterRow > span {
      flex-basis: 100%;
  }

  .shopDetailDateRange em,
.shopDetailNumberRange em {
      display: none;
  }
}

.commerceSearchFilterPanel .shopFilterRow.cuiSearchFilterRow {
  display: flex;
  grid-template-columns: none;
  align-items: flex-start;
  gap: 8px;
}

.commerceSearchFilterPanel .shopFilterRow > .cuiSearchFilterRowBody {
  min-width: 0;
  display: block;
  flex: 1 1 auto;
}

.commerceSearchFilterPanel .shopFilterChip {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-1);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 780;
  box-shadow: none;
}

.commerceSearchFilterPanel .shopFilterChip.cuiSearchFilterChipActive {
  background: var(--primary);
  color: #ffffff;
  padding: 0 16px;
}

.commerceSearchFilterPanel .shopSearchBar {
  min-width: 0;
}

.commerceSearchFilterPanel .shopSearchBar input {
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.commerceSearchFilterPanel .shopSearchBar button {
  flex: 0 0 auto;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #ffffff;
  padding: 0 18px;
}

.commerceSearchFilterPanel .shopFilterGrid {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.commerceSearchFilterPanel .shopAdvancedGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
  gap: 10px;
}

.commerceSearchFilterPanel .shopFilterSelect {
  --creator-line: var(--commerce-control-line);
  --filter-select-border: var(--commerce-control-line);
  --filter-select-bg: var(--commerce-control-bg);
  min-width: 154px;
  min-height: 40px;
  border-radius: 999px;
  box-shadow: var(--commerce-control-shadow);
}

.commerceSearchFilterPanel .shopFilterSelect .filterSelectTrigger {
  min-height: 40px;
  border: 1px solid var(--commerce-control-line);
  border-radius: var(--cui-radius-md);
  background: var(--commerce-control-bg);
  box-shadow: none;
}

.commerceSearchFilterPanel .shopFilterSelect.open .filterSelectTrigger,
.commerceSearchFilterPanel .shopFilterSelect:focus-within .filterSelectTrigger {
  border-color: var(--commerce-control-line-hover);
  box-shadow: 0 0 0 3px var(--commerce-control-focus);
}

.commerceSearchFilterPanel .shopAdvancedGrid label {
  min-width: 0;
  display: grid;
  gap: 6px;
  border: 1px solid var(--commerce-control-line);
  border-radius: 10px;
  background: var(--commerce-control-bg);
  box-shadow: var(--commerce-control-shadow);
  padding: 8px 10px;
}

.commerceSearchFilterPanel .shopAdvancedGrid label > span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 820;
}

.commerceSearchFilterPanel .shopAdvancedGrid label > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.commerceSearchFilterPanel .shopAdvancedGrid input {
  min-width: 0;
  height: 34px;
  border: 1px solid var(--commerce-control-line);
  border-radius: 8px;
  background: var(--commerce-control-bg);
  color: var(--text-1);
  font-size: 12px;
  padding: 0 8px;
}

.commerceSearchFilterPanel .shopAdvancedGrid input:focus {
  border-color: var(--commerce-control-line-hover);
  outline: 0;
  box-shadow: 0 0 0 3px var(--commerce-control-focus);
}

.commerceDataListPanel.shopResultsCard .shopResultsActions > button,
.commerceDataListPanel.shopResultsCard .shopSearchTable td > button,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableCell > button {
  border-color: var(--commerce-control-line);
  background: var(--commerce-control-bg);
  box-shadow: var(--commerce-control-shadow);
}

.commerceDataListPanel.shopResultsCard .shopResultsActions > button:not(:disabled):hover,
.commerceDataListPanel.shopResultsCard .shopSearchTable td > button:hover,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableCell > button:hover {
  border-color: var(--commerce-control-line-hover);
}

.shopSearchHeader h1,
.shopResultsHeader h2,
.shopDetailTitleRow h1,
.shopDetailTitleRow h3,
.shopDetailSectionHeader h2,
.shopChartCardHeader h3 {
  margin: 0;
  color: var(--shop-text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.25;
  letter-spacing: 0;
}

.shopSearchHeader p,
.shopResultsHeader p,
.shopDetailSectionHeader p,
.shopChartCardHeader p,
.shopRankSummary p {
  margin: 5px 0 0;
  color: var(--shop-muted);
  font-size: 13px;
  line-height: 1.55;
}

.shopMetricGrid article,
.shopDetailMetricGrid article,
.shopDetailMiniMetricGrid article,
.shopDetailSimilarCard,
.shopDetailChartCard,
.shopDetailProfileCard,
.shopDetailRatingCard,
.shopSearchCard,
.shopResultsCard,
.shopDetailSection {
  min-width: 0;
  border: 1px solid var(--shop-line);
  border-radius: 14px;
  background: var(--shop-panel);
  box-shadow: var(--shop-shadow);
}

.shopSearchBar button,
.shopResultsHeader button,
.shopRankPagination button,
.shopDetailProfileActions button,
.shopDetailRefreshButton,
.shopDetailRangeButtons button,
.shopDetailSectionTools button,
.shopDetailFilterLine button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--shop-line);
  border-radius: 9px;
  background: var(--shop-panel);
  color: var(--shop-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0 12px;
  white-space: nowrap;
}

.shopSearchBar button:hover,
.shopResultsHeader button:hover,
.shopRankPagination button:hover,
.shopDetailProfileActions button:hover,
.shopDetailRefreshButton:hover,
.shopDetailRangeButtons button:hover,
.shopDetailSectionTools button:hover,
.shopDetailFilterLine button:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 32%, var(--shop-line));
  color: var(--shop-accent);
}

.shopFilterSectionHead,
.shopRankFilterHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shopFilterSectionHead strong,
.shopRankFilterHeader strong,
.shopRankFilterSectionTitle {
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 950;
}

.shopFilterSectionHead button,
.shopRankFilterHeader button,
.shopRankSelected > button,
.shopSearchSelected > button {
  border: 0;
  background: transparent;
  color: var(--shop-accent);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.shopFilterRow > div,
.shopFilterChipGrid,
.shopRankQuickFilters,
.shopRankPagination,
.shopDetailFilterLine,
.shopDetailSectionTools,
.shopDetailChartLegend {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.shopRankSelected,
.shopSearchSelected {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--shop-line);
  padding-top: 12px;
}

.shopRankSelected > span,
.shopSearchSelected > span {
  color: var(--shop-faint);
  font-size: 12px;
  font-weight: 900;
}

.shopRankSelected > div,
.shopSearchSelected > div {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.shopRankSelected em,
.shopSearchSelected em,
.shopTags em,
.shopDetailSimilarTags em,
.shopDetailRegionTag {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--shop-accent-soft);
  color: var(--shop-accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  padding: 0 8px;
}

.shopResultsHeader > div:last-child,
.shopDetailProfileActions,
.shopDetailStickyActions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.shopInfoCell,
.shopDetailStickyLeft,
.shopDetailProfileTop,
.shopDetailSimilarCardTop {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.shopAvatar,
.shopDetailAvatar,
.shopDetailStickyAvatar,
.shopDetailSmallAvatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 20%, var(--shop-line));
  border-radius: 10px;
  background: linear-gradient(135deg, var(--shop-accent-soft), #ffffff);
  color: var(--shop-accent);
  font-weight: 950;
}

.shopAvatar,
.shopDetailStickyAvatar,
.shopDetailSmallAvatar {
  width: 34px;
  height: 34px;
}

.shopSearchPage .shopInfoCell > .shopAvatar {
  width: var(--shop-list-logo-size);
  height: var(--shop-list-logo-size);
  flex: 0 0 var(--shop-list-logo-size);
}

.shopDetailSimilarCardTop .shopDetailSmallAvatar {
  width: var(--shop-list-logo-size);
  height: var(--shop-list-logo-size);
  flex: 0 0 var(--shop-list-logo-size);
}

.shopPreviewHost {
  position: relative;
  cursor: zoom-in;
}

.shopPreviewHost:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--shop-accent) 72%, #ffffff);
  outline-offset: 3px;
}

.shopPreviewHost.preview-open {
  cursor: zoom-out;
}

.shopImagePreviewPopup {
  position: fixed;
  z-index: 2500;
  top: var(--shop-preview-top);
  left: var(--shop-preview-left);
  width: var(--shop-preview-size);
  max-height: calc(100dvh - 24px);
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 28%, var(--shop-line));
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.22);
  pointer-events: none;
  transform-origin: top left;
  animation: shopImagePreviewPop 140ms ease-out both;
}

.shopImagePreviewPopup img {
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 24px);
  display: block;
  object-fit: contain;
}

.shopInfoCell strong,
.shopInfoCell small,
.shopDetailStickyMeta strong,
.shopDetailStickyMeta span,
.shopDetailProfileTop h2,
.shopDetailProfileTop span {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopInfoCell strong,
.shopDetailStickyMeta strong,
.shopDetailProfileTop h2 {
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 950;
}

.shopInfoCell small,
.shopDetailStickyMeta span,
.shopDetailProfileTop span {
  color: var(--shop-faint);
  font-size: 12px;
}

.shopTrendSvg .animate,
.shopTrendLine.animate {
  animation: shopLineDraw 1.1s ease both;
}

.shopMetricCardIcon,
.shopMetricCardNote,
.shopMetricCardLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.shopMetricCardIconText {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

.shopMetricHelpTrigger {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--shop-muted) 34%, transparent);
  border-radius: 999px;
  appearance: none;
  background: color-mix(in srgb, var(--shop-muted) 10%, #ffffff);
  color: color-mix(in srgb, var(--shop-muted) 84%, var(--shop-text));
  cursor: help;
  font: inherit;
  line-height: 1;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.shopMetricHelpTrigger:hover,
.shopMetricHelpTrigger:focus-visible {
  border-color: color-mix(in srgb, var(--shop-accent) 42%, var(--shop-line));
  background: color-mix(in srgb, var(--shop-accent) 12%, #ffffff);
  color: var(--shop-accent-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-accent) 14%, transparent);
}

.shopMetricHelpTrigger:focus-visible {
  outline: none;
}

.shopMetricHelpTrigger:active {
  transform: translateY(1px);
}

.shopMetricHelpTrigger .compassIcon {
  width: 12px;
  height: 12px;
}

.cuiTooltipContent.shopMetricTooltip,
.shopMetricTooltip {
  width: min(320px, calc(100vw - 24px));
  max-width: min(320px, calc(100vw - 24px));
  z-index: 2600 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: rgba(65, 65, 65, 0.98) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.26) !important;
  color: #ffffff !important;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.55;
  white-space: pre-line;
}

.cuiTooltipContent.shopMetricTooltip::after,
.shopMetricTooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(65, 65, 65, 0.98);
  transform: translateX(-50%);
}

.shopMetricCardLink {
  color: var(--shop-accent);
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.shopRatingMain {
  min-width: 180px;
  display: grid;
  gap: 6px;
}

.shopRatingMain strong {
  color: var(--shop-text);
  font-size: 24px;
}

.shopRatingDivider {
  align-self: stretch;
  width: 1px;
  background: var(--shop-line);
}

.shopStarRating {
  position: relative;
  width: max-content;
  color: #d8dee8;
  font-size: 17px;
  letter-spacing: 1px;
}

.shopStarRatingFilled {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: #f59e0b;
  white-space: nowrap;
}

.shopDetailStickyHeader {
  position: fixed;
  top: 60px;
  left: var(--workspace-sidebar-width, 0);
  right: 0;
  z-index: 900;
  padding: 10px 18px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.shopDetailStickyHeader.visible {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.shopDetailStickyPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--shop-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.12);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  padding: 10px 12px;
}

.shopDetailStickyIdentity {
  min-width: 0;
  display: grid;
  gap: 9px;
}

.shopDetailStickyTabs,
.shopDetailAnchorNav {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
}

.shopDetailStickyTabs a,
.shopDetailAnchorNav a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 900;
  padding: 0 11px;
  text-decoration: none;
  white-space: nowrap;
}

.shopDetailStickyTabs a:hover,
.shopDetailStickyTabs a.active,
.shopDetailAnchorNav a:hover,
.shopDetailAnchorNav a.active {
  background: var(--shop-accent-soft);
  color: var(--shop-accent);
}

.shopDetailTrendChart {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.shopDetailTrendSvg {
  width: 100%;
  min-height: 280px;
}

.shopTrendPlotBg {
  fill: var(--shop-panel-soft);
}

.shopChartGridLabel,
.shopTrendTooltipTitle {
  fill: var(--shop-faint);
  font-size: 11px;
  font-weight: 800;
}

.shopTrendLine {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.shopTrendGuideLine {
  stroke: var(--shop-line-strong);
  stroke-dasharray: 4 4;
}

.shopTrendActiveDot {
  fill: #ffffff;
  stroke-width: 3;
}

.shopTrendTooltip rect,
.shopTrendDateBadge rect {
  fill: rgba(15, 23, 42, 0.86);
}

.shopTrendTooltip text,
.shopTrendDateBadge text {
  fill: #ffffff;
  font-size: 11px;
  font-weight: 850;
}

.shopDetailPage .shopTrendMetricFields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 2px 0 6px;
}

.shopDetailPage .shopTrendMetricField {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid var(--shop-line);
  border-radius: 999px;
  background: var(--shop-panel-soft);
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 850;
}

.shopDetailPage .shopTrendMetricField i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--field-color, var(--shop-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-color, var(--shop-accent)) 20%, transparent);
}

.shopDetailPage .shopTrendTableView {
  display: grid;
  gap: 14px;
  margin-top: 4px;
  animation: shopDistReveal 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shopDetailPage .shopTrendTableWrap {
  border: 1px solid var(--shop-line);
  border-radius: 14px;
  overflow: auto;
}

.shopDetailPage .shopTrendTable {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.shopDetailPage .shopTrendTable th {
  padding: 15px 18px;
  text-align: left;
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 900;
  background: var(--shop-panel-soft);
  border-bottom: 1px solid var(--shop-line);
  white-space: nowrap;
}

.shopDetailPage .shopTrendTable td {
  padding: 15px 18px;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 750;
  border-bottom: 1px solid var(--shop-line);
  white-space: nowrap;
}

.shopDetailPage .shopTrendTable tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--shop-bg-soft) 55%, transparent);
}

.shopDetailPage .shopTrendTable tbody tr:last-child td {
  border-bottom: 0;
}

.shopDetailPage .shopTrendTable tbody tr {
  transition: background 150ms ease;
}

.shopDetailPage .shopTrendTable tbody tr:hover {
  background: color-mix(in srgb, var(--shop-accent) 6%, transparent);
}

.shopDetailPage .shopTrendTableFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.shopDetailPage .shopTrendPagination {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.shopDetailPage .shopTrendPagination button {
  min-width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--shop-line);
  border-radius: 9px;
  background: #ffffff;
  color: var(--shop-text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 0 10px;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.shopDetailPage .shopTrendPagination button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--shop-accent) 40%, var(--shop-line));
  color: var(--shop-accent-strong);
}

.shopDetailPage .shopTrendPagination button.active {
  border-color: var(--shop-accent);
  background: var(--shop-accent);
  color: #ffffff;
}

.shopDetailPage .shopTrendPagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.shopDetailPage .shopTrendPageArrow {
  color: var(--shop-muted);
}

.shopDetailPage .shopTrendJump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 850;
}

.shopDetailPage .shopTrendJump input {
  width: 54px;
  min-height: 34px;
  border: 1px solid var(--shop-line);
  border-radius: 9px;
  background: #ffffff;
  color: var(--shop-text);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  text-align: center;
  padding: 0 6px;
}

.shopDetailPage .shopTrendExportBtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: var(--shop-accent);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 0 20px;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--shop-accent) 22%, transparent);
  transition: background 160ms ease, transform 160ms ease;
}

.shopDetailPage .shopTrendExportBtn:hover {
  background: var(--shop-accent-strong);
  transform: translateY(-1px);
}

.shopDetailAccountList strong,
.shopDetailSimilarCard strong {
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 950;
}

.shopDetailAccountList span,
.shopDetailSimilarCard p {
  color: var(--shop-muted);
  font-size: 12px;
  line-height: 1.45;
}

.shopDetailSimilarCard {
  display: grid;
  gap: 12px;
  color: inherit;
  padding: 14px;
  text-decoration: none;
}

.shopDetailSimilarCard:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 28%, var(--shop-line));
}

.shopDetailSimilarStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.shopDetailSimilarStats > div > span {
  display: grid;
  gap: 4px;
  border-radius: 10px;
  background: var(--shop-panel-soft);
  color: var(--shop-faint);
  font-size: 11px;
  font-weight: 850;
  padding: 8px;
}

.shopDetailSimilarStats > div > strong {
  color: var(--shop-text);
  font-size: 12px;
}

.shopSearchPage {
  --shop-panel: var(--shop-bg);
  --shop-panel-soft: var(--shop-bg-soft);
  --shop-faint: var(--shop-muted);
}

@media (min-width: 1281px) {
  .shopSearchPage .shopSearchHeader {
    min-height: 96px;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: 22px 28px;
  }
}

.shopSearchPage .shopSearchHeader h1 {
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
}

.shopSearchPage .shopAdvancedGrid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.shopSearchPage .shopAdvancedSelectGrid {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

.shopSearchPage .shopAdvancedSelectGrid label {
  gap: 6px;
}

.shopSearchPage .shopAdvancedSelectGrid select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-text);
  font: inherit;
  font-size: 13px;
  font-weight: 820;
  outline: 0;
  padding: 0 32px 0 12px;
}

.shopSearchPage .shopAdvancedSelectGrid select:focus {
  border-color: color-mix(in srgb, var(--shop-accent) 58%, var(--shop-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-accent) 14%, transparent);
}

.shopSearchPage .shopFilterRow {
  align-items: center;
}

.shopSearchPage .shopFilterBlock {
  padding-top: 18px;
}

.shopSearchPage .shopMetricGrid {
  gap: 14px;
}

@media (max-width: 1180px) and (min-width: 721px) {
  .shopSearchPage .shopMetricGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.shopDetailPage .shopDetailStickyIdentity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.shopDetailPage .shopDetailStickyMeta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.shopDetailPage .shopDetailStickyMeta > div {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.shopDetailPage .shopDetailStickyMeta > div > strong {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopDetailPage .shopDetailStickyMeta > span,
.shopDetailPage .shopDetailStickyMeta em {
  flex: 0 0 auto;
}

.shopDetailPage .shopDetailStickyMeta em {
  color: var(--shop-faint);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.shopDetailPage .shopDetailStickyMeta button,
.shopDetailPage .shopDetailStickyActions button {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-panel, #ffffff);
  color: var(--shop-muted);
  cursor: pointer;
}

.shopDetailPage .shopDetailStickyActions button {
  width: 32px;
  height: 32px;
}

.shopDetailPage .shopDetailStickyMeta button:hover,
.shopDetailPage .shopDetailStickyActions button:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 32%, var(--shop-line));
  color: var(--shop-accent);
}

.shopDetailPage .shopDistChart {
  display: grid;
  gap: 18px;
}

.shopDetailPage .shopDistToggle {
  position: relative;
  display: inline-flex;
  width: min(210px, 100%);
  justify-self: end;
  align-self: start;
  gap: 0;
  padding: 3px;
  border: 1px solid var(--shop-line);
  border-radius: 999px;
  background: var(--shop-bg-soft);
}

.shopDetailPage .shopDistToggleThumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--shop-accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--shop-accent) 30%, transparent);
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shopDetailPage .shopDistToggle[data-view='bar'] .shopDistToggleThumb {
  transform: translateX(100%);
}

.shopDetailPage .shopDistToggle button {
  position: relative;
  z-index: 1;
  flex: 1 1;
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--shop-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  padding: 0 12px;
  text-align: center;
  transition: color 220ms ease;
}

.shopDetailPage .shopDistToggle button.active {
  color: #ffffff;
}

.shopDetailPage .shopDistBody {
  animation: shopDistReveal 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shopDetailPage .shopDonutWrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 26px;
}

.shopDetailPage .shopDonut {
  position: relative;
  flex: 0 0 auto;
  width: 178px;
  height: 178px;
}

.shopDetailPage .shopDonut svg {
  display: block;
  width: 100%;
  height: 100%;
}

.shopDetailPage .shopDonutCenter {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
}

.shopDetailPage .shopDonutCenter strong {
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
}

.shopDetailPage .shopDonutCenter span {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 800;
}

.shopDetailPage .shopDonutLegend {
  flex: 1 1 190px;
  min-width: 0;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shopDetailPage .shopDonutLegend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 4px 6px;
  cursor: pointer;
}

.shopDetailPage .shopDonutLegend li.is-active {
  background: var(--shop-bg-soft);
}

.shopDetailPage .shopDonutLegend li > i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.shopDetailPage .shopDonutLegend li > span {
  min-width: 0;
  overflow: hidden;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopDetailPage .shopDonutLegend li > em {
  color: var(--shop-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.shopDetailPage .shopDonutLegend li > strong {
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 920;
}

.shopDetailPage .shopDonutTip {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -120%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  background: #0f172a;
  color: #ffffff;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.shopDetailPage .shopDonutTip i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.shopDetailNotFound {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: 320px;
  border: 1px solid var(--shop-line);
  border-radius: 14px;
  background: var(--shop-bg);
  box-shadow: var(--shop-shadow);
  padding: 48px 24px;
  text-align: center;
}

.shopDetailNotFound strong {
  color: var(--shop-text);
  font-size: 20px;
  font-weight: 950;
}

.shopDetailNotFound p {
  max-width: 440px;
  margin: 0;
  color: var(--shop-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.shopDetailNotFoundBack {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--shop-accent);
  border-radius: 999px;
  background: var(--shop-accent);
  color: #ffffff;
  text-decoration: none;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 850;
}

.shopDetailNotFoundBack:hover {
  background: var(--shop-accent-strong);
}

.shopDetailPage .shopDetailTitleRow {
  min-height: 104px;
  align-items: center;
}

.shopDetailPage .shopDetailTitleMain {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: center;
}

.shopDetailPage .shopDetailTitleRow h1 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopDetailPage .shopDetailStickyPanel {
  display: flex;
  align-items: center;
  gap: 14px;
}

.shopDetailPage .shopDetailStickyLeft {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 260px;
}

.shopDetailPage .shopDetailStickyMeta {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.shopDetailPage .shopDetailStickyMeta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--shop-text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.shopDetailPage .shopDetailStickyMeta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.shopDetailPage .shopDetailStickyTabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.shopDetailPage .shopDetailStickyTabs a {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--shop-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.shopDetailPage .shopDetailStickyTabs a:hover {
  background: var(--shop-bg-soft);
  color: var(--shop-text);
}

.shopDetailPage .shopDetailStickyTabs a.active {
  background: var(--shop-accent);
  color: #ffffff;
}

.shopDetailPage .shopDetailStickyActions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.shopDetailPage .shopDetailStickyActions button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--shop-line);
  border-radius: 9px;
  background: var(--shop-panel, #ffffff);
  color: var(--shop-muted);
  cursor: pointer;
}

.shopDetailPage .shopDetailStickyActions button:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 36%, var(--shop-line));
  color: var(--shop-accent);
}

.shopDetailPage .shopDetailStickyActions button.shopDetailBackTop {
  border-color: var(--shop-accent);
  background: var(--shop-accent);
  color: #ffffff;
}

.shopDetailPage .shopDetailStickyActions button.shopDetailBackTop:hover {
  background: var(--shop-accent-strong);
  color: #ffffff;
}

.shopSearchPage { --shop-pink: var(--shop-accent); }

.shopDetailPage .shopDonutWrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 16px 28px;
}

.shopDetailPage .shopDonutLegend {
  flex: 1 1 210px;
  max-width: 380px;
  min-width: 0;
  align-self: center;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shopDetailPage .shopDonutLegend li {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 7px 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.shopDetailPage .shopDonutLegend li:hover,
.shopDetailPage .shopDonutLegend li.is-active {
  background: var(--shop-bg-soft);
}

.shopDetailPage .shopDonutLegend li > i {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.shopDetailPage .shopDonutLegend li > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 760;
}

.shopDetailPage .shopDonutLegend li > em {
  flex: 0 0 auto;
  width: 44px;
  text-align: right;
  color: var(--shop-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.shopDetailPage .shopDonutLegend li > strong {
  flex: 0 0 auto;
  min-width: 78px;
  text-align: right;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 920;
}

.shopSearchPage .shopAdvancedSelectGrid {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

.shopSearchPage .shopAdvancedSelectGrid label {
  gap: 6px;
}

.shopSearchPage .shopAdvancedSelectGrid select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-text);
  font: inherit;
  font-size: 13px;
  font-weight: 820;
  outline: 0;
  padding: 0 32px 0 12px;
}

.shopSearchPage .shopAdvancedSelectGrid select:focus {
  border-color: color-mix(in srgb, var(--shop-accent) 58%, var(--shop-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-accent) 14%, transparent);
}

.shopDetailPage .shopDetailRatingCard {
  grid-template-columns: minmax(180px, 1.2fr) 1px repeat(2, minmax(120px, 0.75fr)) minmax(240px, 1.35fr);
  align-items: stretch;
}

.shopDetailPage .shopDetailRatingPair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shopDetailPage .shopDetailRatingPair > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.shopDetailPage .shopDetailBarList {
  gap: 14px;
  margin-top: 10px;
}

.shopDetailPage .shopDetailBarList div {
  grid-template-columns: minmax(120px, 0.9fr) minmax(220px, 2.8fr) minmax(72px, auto);
  gap: 12px;
}

.shopDetailPage .shopDetailBarList i {
  height: 12px;
  min-width: 160px;
}

.shopDetailPage .shopDetailBarList i::before {
  min-width: 26px;
}

.shopDetailPage .shopDetailChartCard {
  padding: 16px 18px;
}

.shopChartCardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 14px;
}

.shopChartCardHeader .shopDetailRangeButtons,
.shopChartCardHeader .shopCreatorMetricFilter {
  margin-top: 8px;
}

.shopDetailMediaTable .shopDetailClickableRow {
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.shopDetailMediaTable .shopDetailClickableRow:hover {
  background: color-mix(in srgb, var(--shop-accent) 6%, #ffffff);
}

.shopDetailMediaTable .shopDetailClickableRow:hover .shopDetailEntityCell strong {
  color: var(--shop-accent-strong);
}

.shopDetailEntityCell {
  min-width: 220px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.shopDetailEntityLink {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.shopDetailThumb {
  width: var(--shop-list-logo-size);
  height: var(--shop-list-logo-size);
  flex: 0 0 var(--shop-list-logo-size);
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-bg-soft);
  color: var(--shop-accent);
  font-size: 14px;
  font-weight: 950;
}

.shopDetailThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shopDetailEntityLink strong {
  max-width: 260px;
  overflow: hidden;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 150ms ease;
}

@media (max-width: 1280px) {
  .shopDetailPage .shopDetailRatingCard,
.shopDetailPage .shopDetailRatingPair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.shopDataListScroller,
.shopTableWrap {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
}

.shopDataListScroller.cuiDataList,
.shopTableWrap.cuiDataList {
  box-shadow: none;
}

.shopDataListScroller .cuiDataListBody,
.shopTableWrap .cuiDataListBody {
  background: #ffffff;
}

.shopDetailFilterGroup,
.shopDetailDateRange,
.shopDetailNumberRange {
  min-width: 0;
  display: inline-grid;
  align-items: center;
  gap: 5px;
}

.shopDetailDateRange,
.shopDetailNumberRange {
  grid-template-columns: auto minmax(132px, 1fr) auto minmax(132px, 1fr);
}

.shopDetailFilterGroup {
  grid-template-columns: auto minmax(150px, 1fr);
}

.shopDetailFilterGroup > span,
.shopDetailDateRange > span,
.shopDetailNumberRange > span {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.shopDetailDateRange input,
.shopDetailNumberRange input,
.shopDetailFilterGroup select {
  width: 100%;
  padding: 0 10px;
}

.shopDetailDateRange em,
.shopDetailNumberRange em {
  color: var(--shop-faint);
  font-style: normal;
  font-weight: 900;
}

.shopDetailProductFilters {
  display: grid;
  gap: 12px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-bg-soft);
  padding: 14px;
}

.shopDetailProductListHeader,
.shopDetailProductFilterRow,
.shopDetailProductFilterSelects {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.shopDetailProductListHeader {
  justify-content: space-between;
}

.shopDetailProductListHeader h3 {
  margin: 0;
  color: var(--shop-text);
  font-size: 14px;
  font-weight: 950;
}

.shopDetailProductListHeader button,
.shopDetailProductFilterRow button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-bg);
  color: var(--shop-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0 11px;
  white-space: nowrap;
}

.shopDetailProductListHeader button:hover,
.shopDetailProductFilterRow button:hover,
.shopDetailProductFilterRow button.active {
  border-color: color-mix(in srgb, var(--shop-accent) 46%, var(--shop-line));
  background: var(--shop-accent-soft);
  color: var(--shop-accent-strong);
}

.shopDetailProductFilterRow > span {
  flex: 0 0 74px;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 950;
}

.shopDetailProductChipGroup,
.shopDetailProductDatePresets {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.shopDetailProductChipGroup button em {
  color: var(--shop-faint);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.shopDetailProductFilterSelects .shopDetailFilterGroup {
  min-width: 196px;
}

.shopDetailAccountStats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.shopDetailAccountStats em {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--shop-line);
  border-radius: 999px;
  background: var(--shop-bg-soft);
  color: var(--shop-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  padding: 0 8px;
}

.shopTrendLine {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.shopRankingDatePicker {
  position: relative;
  min-width: 0;
}

.shopRankingDateButton {
  width: 190px;
  max-width: 100%;
  min-height: 34px;
  display: inline-grid !important;
  grid-template-columns: 16px minmax(112px, 1fr) 16px;
  align-items: center;
  justify-items: center;
  column-gap: 8px;
  border-color: color-mix(in srgb, var(--shop-accent) 18%, var(--shop-line)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--shop-bg-soft) 92%, #ffffff), color-mix(in srgb, var(--shop-accent) 6%, var(--shop-bg))) !important;
  color: var(--shop-text) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  padding: 0 12px !important;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.shopRankingDateButton .compassIcon:first-child {
  justify-self: start;
}

.shopRankingDateButton .compassIcon:last-child {
  justify-self: end;
}

.shopRankingDateButton:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 44%, var(--shop-line)) !important;
  background: var(--shop-accent-soft) !important;
  color: var(--shop-accent-strong) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--shop-accent) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transform: translateY(-1px);
}

.shopRankingDateButton strong {
  min-width: 0;
  justify-self: center;
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopRankingCalendarPanel {
  --ranking-calendar-accent: var(--shop-accent, var(--primary, #6d28d9));
  --ranking-calendar-accent-strong: var(--shop-accent-strong, var(--primary-light, #7c3aed));
  --ranking-calendar-text: var(--shop-text, var(--text-1, #111827));
  --ranking-calendar-muted: var(--shop-muted, var(--text-3, #8a94a6));
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 90;
  width: 324px;
  border: 1px solid color-mix(in srgb, var(--ranking-calendar-accent) 18%, var(--shop-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--shop-bg) 88%, #ffffff);
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.16), 0 2px 6px color-mix(in srgb, var(--ranking-calendar-accent) 10%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  padding: 12px;
}

.shopRankingCalendarHeader {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ranking-calendar-accent) 7%, var(--shop-bg-soft));
  padding: 4px;
}

.shopRankingCalendarHeader strong {
  min-width: 0;
  color: var(--ranking-calendar-text);
  font-size: 14px;
  font-weight: 950;
  text-align: center;
}

.shopRankingCalendarHeader button,
.shopRankingCalendarGrid button,
.shopRankingMonthGrid button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ranking-calendar-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
}

.shopRankingCalendarHeader button:not(:disabled):hover,
.shopRankingCalendarGrid button:not(:disabled):hover,
.shopRankingMonthGrid button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--ranking-calendar-accent) 22%, transparent);
  background: color-mix(in srgb, var(--ranking-calendar-accent) 10%, transparent);
  color: var(--ranking-calendar-accent-strong);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--ranking-calendar-accent) 9%, transparent);
  transform: translateY(-1px);
}

.shopRankingCalendarHeader button:disabled,
.shopRankingCalendarGrid button:disabled,
.shopRankingMonthGrid button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.shopRankingCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-top: 12px;
}

.shopRankingCalendarGrid span {
  color: var(--ranking-calendar-muted);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.shopRankingCalendarGrid button {
  padding: 0;
}

.shopRankingCalendarGrid button.muted {
  color: #aeb7c4;
}

.shopRankingCalendarGrid button.active,
.shopRankingMonthGrid button.active {
  border-color: var(--ranking-calendar-accent);
  background: var(--ranking-calendar-accent);
  color: var(--accent-on-primary, #ffffff);
  box-shadow: 0 9px 18px color-mix(in srgb, var(--ranking-calendar-accent) 28%, transparent);
}

.shopRankingCalendarGrid.weekMode button {
  border-radius: 0;
  border-left-color: transparent;
  border-right-color: transparent;
}

.shopRankingCalendarGrid.weekMode button.weekStart {
  border-radius: 8px 0 0 8px;
}

.shopRankingCalendarGrid.weekMode button.weekEnd {
  border-radius: 0 8px 8px 0;
}

.shopRankingCalendarGrid.weekMode button.weekHover,
.shopRankingCalendarGrid.weekMode button.active {
  border-color: color-mix(in srgb, var(--ranking-calendar-accent) 12%, transparent);
  background: color-mix(in srgb, var(--ranking-calendar-accent) 12%, transparent);
  color: var(--ranking-calendar-accent-strong);
  box-shadow: none;
}

.shopRankingCalendarGrid.weekMode button.active.weekStart,
.shopRankingCalendarGrid.weekMode button.active.weekEnd {
  background: var(--ranking-calendar-accent);
  color: var(--accent-on-primary, #ffffff);
  box-shadow: 0 9px 18px color-mix(in srgb, var(--ranking-calendar-accent) 24%, transparent);
}

.shopRankingMonthGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.shopRankingMonthGrid button {
  min-height: 38px;
}

.shopTranslateOverlay {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.24);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.shopTranslateDialog {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  display: grid;
  gap: 18px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 94%, transparent);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  padding: 28px;
}

.shopTranslateClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  padding: 0;
}

.shopTranslateClose:hover {
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.shopTranslatePreview {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding-right: 28px;
}

.shopTranslatePreview .shopAvatar {
  width: 58px;
  height: 58px;
  font-size: 18px;
}

.shopTranslatePreview strong {
  display: block;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
}

.shopTranslatePreview p {
  margin: 6px 0 0;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.55;
}

.shopTranslateLanguage {
  width: 132px;
  display: grid;
  gap: 7px;
}

.shopTranslateLanguage span,
.shopTranslateResult span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 850;
}

.shopTranslateLanguage select {
  height: 38px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  outline: 0;
  padding: 0 14px;
}

.shopTranslateLanguage select:focus {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.shopTranslateResult {
  position: relative;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 14px 82px 14px 14px;
}

.shopTranslateResult p {
  min-height: 48px;
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 820;
  line-height: 1.6;
}

.shopTranslateResult button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 30px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  padding: 0 12px;
}

.shopTranslateResult button:hover {
  border-color: var(--primary-border);
  background: var(--theme-switcher-active-bg);
  color: var(--text-1);
}

.shopDetailPage .shopBarTrack {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: var(--shop-bg-soft);
  overflow: hidden;
}

.shopDetailPage .shopBarFill {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bar-color) 52%, #ffffff), var(--bar-color));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--bar-color) 32%, transparent);
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--bar-delay, 0ms);
}

.shopDetailPage .shopBarLabel,
.shopDetailPage .shopBarValue,
.shopDetailPage .shopBarPct {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 850;
}

.shopDetailPage .shopTrendTableView {
  display: grid;
  gap: 14px;
  margin-top: 4px;
  animation: shopDistReveal 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shopDetailPage .shopTrendTableWrap {
  border: 1px solid var(--shop-line);
  border-radius: 14px;
  overflow: auto;
}

.shopDetailPage .shopTrendTable {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.shopDetailPage .shopTrendTable th,
.shopDetailPage .shopTrendTable td {
  border-bottom: 1px solid var(--shop-line);
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 800;
  padding: 13px 18px;
  text-align: left;
}

.shopDetailPage .shopTrendTable th {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 950;
}

.shopDetailPage .shopTrendTableFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.shopDetailPage .shopTrendPagination {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.shopDetailPage .shopTrendPagination button {
  min-width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--shop-line);
  border-radius: 9px;
  background: #ffffff;
  color: var(--shop-text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 0 10px;
}

.shopDetailPage .shopTrendPagination button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--shop-accent) 40%, var(--shop-line));
  color: var(--shop-accent-strong);
}

.shopDetailPage .shopTrendPagination button.active {
  border-color: var(--shop-accent);
  background: var(--shop-accent);
  color: #ffffff;
}

.shopDetailPage .shopTrendPagination button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.shopDetailPage .shopTrendPageArrow {
  color: var(--shop-muted);
}

.shopDetailPage .shopTrendJump,
.shopDetailPage .shopTrendExportBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 850;
}

.shopDetailPage .shopTrendJump input,
.shopDetailPage .shopTrendMetricField select {
  min-height: 34px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-text);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.shopDetailPage .shopTrendJump input {
  width: 54px;
  padding: 0 8px;
}

.shopDetailPage .shopTrendMetricFields {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.shopDetailPage .shopTrendMetricField {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.shopDetailPage .shopTrendExportBtn {
  min-height: 34px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  padding: 0 12px;
}

.shopDetailPage .shopTrendExportBtn:hover {
  border-color: var(--shop-accent);
  color: var(--shop-accent-strong);
}

.shopDetailPage .shopDistBody {
  animation: shopDistReveal 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shopDistToggleThumb {
  transition: transform 180ms ease;
}

.shopDetailPage .shopInfoCellShell,
.shopDetailPage .shopNameTranslateButton {
  min-width: 0;
}

.shopAvatar img,
.shopDetailAvatar img,
.shopDetailStickyAvatar img,
.shopDetailSmallAvatar img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}

.shopPreviewHost .shopImagePreviewPopup img {
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 24px);
  border-radius: 0;
  object-fit: contain;
}

.shopAvatar span,
.shopDetailAvatar span,
.shopDetailStickyAvatar span,
.shopDetailSmallAvatar span {
  display: inline-grid;
  place-items: center;
}

.shopNameLine {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.shopNameLine .shopNameTranslateButton {
  margin-left: -6px;
}

.shopNameLine .shopInfoLink {
  min-width: 0;
}

.shopDetailHeaderRangeControls {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.shopDetailRangeButtons {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.shopCreatorMetricFilter {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.shopCreatorMetricFilter button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.shopCreatorMetricFilter button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--shop-accent) 36%, var(--shop-line));
  color: var(--shop-accent-strong);
}

.shopDetailRangeButtons button.active,
.shopDetailSectionTools button.active,
.shopDetailFilterLine button.active,
.shopDetailProductChipGroup button.active,
.shopDetailProductDatePresets button.active,
.shopCreatorMetricFilter button.active {
  border-color: var(--shop-accent);
  background: var(--shop-accent);
  color: #ffffff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--shop-accent) 18%, transparent);
}

.shopDetailProfileActions button.collected,
.shopDetailStickyActions button.collected,
.shopDetailSimilarCollect.collected {
  border-color: var(--shop-accent);
  background: var(--shop-accent-soft);
  color: var(--shop-accent-strong);
  animation: favoritePulse 320ms ease-out;
}

.shopDetailProfileActions button.collected svg,
.shopDetailStickyActions button.collected svg,
.shopDetailSimilarCollect.collected svg {
  fill: currentColor;
}

.shopDetailActionError {
  margin: 8px 0 0;
  color: #dc2626;
  font-size: 12px;
  font-weight: 800;
}

.cuiPagination.shopRankPager {
  align-items: center;
}

.shopRankPager .cuiPaginationInfo {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 850;
}

.shopRankPager .cuiPaginationActions,
.shopRankPager .cuiPaginationPages,
.shopRankPager .cuiPaginationJump {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.shopRankPager .cuiPaginationJump {
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 850;
}

.shopRankPager .cuiPaginationJump input {
  width: 58px;
  height: 34px;
  border-color: color-mix(in srgb, var(--shop-accent) 26%, var(--shop-line));
  border-radius: 8px;
  text-align: center;
}

.shopDetailSimilarCard {
  position: relative;
}

.shopDetailSimilarCardLink {
  min-width: 0;
  display: grid;
  gap: 12px;
  color: inherit;
  padding-right: 34px;
  text-decoration: none;
}

.shopDetailSimilarCollect {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-muted);
  cursor: pointer;
}

.shopDetailSimilarCollect:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 44%, var(--shop-line));
  color: var(--shop-accent-strong);
}

.shopInfoMetaText {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--shop-muted);
  cursor: default;
  text-decoration: none;
}

.shopInfoMetaText small,
.shopInfoMetaText .shopTags {
  color: inherit;
  text-decoration: none;
}

.shopTranslateAnchor {
  position: relative;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  overflow: visible;
}

.shopTranslatePopoverLayer {
  z-index: var(--cui-z-popover, 1300);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.shopInfoCellShell,
.shopInfoCell,
.shopNameLine {
  overflow: visible;
}

.shopTranslatePopover.shopTranslateDialog {
  position: relative;
  z-index: 1;
  width: min(430px, calc(100vw - 32px));
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface-panel) 94%, transparent);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  transform-origin: left bottom;
  animation: shopTranslatePopoverIn 160ms ease-out;
}

.shopTranslatePopover .shopTranslatePreview {
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 12px;
  padding-right: 28px;
}

.shopTranslatePopover .shopTranslatePreview .shopAvatar {
  width: 50px;
  height: 34px;
  border-radius: 999px;
  font-size: 16px;
}

.shopTranslatePopover .shopTranslatePreview strong {
  font-size: 16px;
}

.shopTranslatePopover .shopTranslatePreview p {
  margin-top: 4px;
  font-size: 13px;
}

.shopTranslatePopover .shopTranslateLanguage select {
  width: 100%;
}

.shopTranslatePopover .shopTranslateLanguage {
  width: 120px;
}

.shopTranslatePopover .shopTranslateResult {
  border-color: var(--line-dark);
  background: var(--surface-panel-hover);
  padding: 12px 76px 12px 12px;
}

.shopDetailProductPagination {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
}

.shopDetailProductPageSize {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 850;
}

.shopDetailProductPageSize select {
  height: 32px;
  min-width: 64px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-text);
  font: inherit;
  font-weight: 850;
  padding: 0 8px;
}

@media (max-width: 720px) {
  .shopTranslatePopover.shopTranslateDialog {
    width: min(430px, calc(100vw - 32px));
    max-height: calc(100vh - 128px);
    overflow: auto;
    transform-origin: top center;
  }
}

@keyframes favoritePulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shopImagePreviewPop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shopDistReveal {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes shopDistReveal {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes shopTranslatePopoverIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Historical rules still referenced by current components. Source: 6de8fabf. */
.shopRankTable {
  min-width: 1080px;
}
.shopRankTable.hot {
  min-width: 1180px;
}
.shopRankTable th:first-child,
.shopRankTable td:first-child {
  width: 76px;
  text-align: center;
}
.shopRankTable th:nth-child(2),
.shopRankTable td:nth-child(2) {
  position: sticky;
  left: 76px;
  z-index: 2;
  width: 330px;
  background: #ffffff;
  text-align: left;
  box-shadow: 6px 0 12px rgba(31, 40, 60, 0.04);
}
.shopRankTable th:nth-child(2) {
  background: #fafafa;
  z-index: 4;
}
.shopRankTable th:nth-child(3),
.shopRankTable td:nth-child(3) {
  text-align: center;
}
.shopStarRatingEmpty {
  color: #e8e8e8;
}

/*
 * Preserved from feat/web-shop-competitor-zsyq during develop CSS partition sync.
 * Keep new changes in this module file; do not move them back to global styles.css.
 */


.radarPage .radarShopTable.cuiDataList {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--radar-line) 82%, #94a3b8);
  border-radius: 8px;
  background: var(--radar-panel);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.radarPage .radarShopTable .cuiDataListBody {
  border: 0;
}

.radarPage .radarShopTableGrid {
  min-width: 1330px;
}

.radarPage .radarShopTableRow {
  min-height: 68px;
  border-bottom: 1px solid color-mix(in srgb, var(--radar-line) 78%, transparent);
  background: var(--radar-panel);
  transition:
    background-color 160ms ease-out,
    box-shadow 160ms ease-out;
}

.radarPage .radarShopTableRow.head {
  min-height: 44px;
  border-bottom-color: color-mix(in srgb, var(--radar-line) 92%, #94a3b8);
  background: color-mix(in srgb, var(--radar-panel-soft) 78%, #eef5ff);
}

.radarPage .radarShopTableRow:not(.head):hover {
  background: color-mix(in srgb, var(--radar-blue-soft) 38%, var(--radar-panel));
  box-shadow: inset 3px 0 0 var(--radar-blue);
}

.radarPage .radarShopTableRow:last-child {
  border-bottom: 0;
}

.radarPage .radarShopTable .cuiDataListTableHeadCell,
.radarPage .radarShopTable .cuiDataListTableCell {
  min-width: 0;
  padding: 12px 10px;
  white-space: nowrap;
}

.radarPage .radarShopTable .cuiDataListTableHeadCell {
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 850;
}

.radarPage .radarShopTable .cuiDataListTableCell {
  overflow: hidden;
  color: var(--radar-body);
  font-size: 12px;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarShopTableRow {
    transition: none;
  }
}

.shopSearchHeader,
.shopDetailTitleRow {
  min-height: 144px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  overflow: hidden;
  padding: 26px 28px;
  background:
    radial-gradient(
      circle at 12% 8%,
      color-mix(in srgb, var(--shop-accent) 18%, transparent),
      transparent 30%
    ),
    linear-gradient(135deg, color-mix(in srgb, var(--shop-accent) 12%, #ffffff), #ffffff 58%);
}

.shopRankingCalendarPanel {
  --ranking-calendar-accent: var(--shop-accent, var(--primary, #6d28d9));
  --ranking-calendar-accent-strong: var(--shop-accent-strong, var(--primary-light, #7c3aed));
  --ranking-calendar-accent-soft: var(
    --shop-accent-soft,
    color-mix(in srgb, var(--ranking-calendar-accent) 10%, #ffffff)
  );
  --ranking-calendar-text: var(--shop-text, var(--text-1, #111827));
  --ranking-calendar-muted: var(--shop-muted, var(--text-3, #8a94a6));
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 90;
  width: 324px;
  border: 1px solid color-mix(in srgb, var(--ranking-calendar-accent) 18%, var(--shop-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--shop-bg) 88%, #ffffff);
  box-shadow:
    0 24px 58px rgba(15, 23, 42, 0.16),
    0 2px 6px color-mix(in srgb, var(--ranking-calendar-accent) 10%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  padding: 12px;
}

.shopSalesTrendBars {
  width: 120px;
  height: 36px;
  display: block;
  overflow: visible;
  color: var(--primary);
  filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--focus-ring) 72%, transparent));
}

.shopSalesTrendBars .cuiSparklineBar {
  fill: color-mix(in srgb, var(--primary) 70%, var(--surface));
  opacity: 0.78;
  transition:
    fill 160ms ease,
    opacity 160ms ease;
}

.shopSalesTrendBars .cuiSparklineBar:nth-last-child(-n + 2),
.shopSalesTrendBars:hover .cuiSparklineBar:last-child {
  fill: var(--primary);
  opacity: 1;
}

.shopPageSizeSelector {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.shopPageSizeSelector select {
  height: 34px;
  min-width: 64px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--shop-text);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  padding: 0 8px;
}

.shopPageSizeSelector select:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.shopDetailSectionTitle {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.shopDetailPage .shopDetailBarList .shopBarRow {
  display: grid;
  grid-template-columns: minmax(96px, 0.9fr) minmax(140px, 2.6fr) minmax(60px, auto) minmax(
      42px,
      auto
    );
  align-items: center;
  gap: 14px;
  padding: 7px 10px;
  border-radius: 12px;
  transition:
    background 220ms ease,
    opacity 220ms ease;
}

.shopDetailPage .shopBarFill {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--bar-color) 52%, #ffffff),
    var(--bar-color)
  );
  box-shadow: 0 2px 10px color-mix(in srgb, var(--bar-color) 32%, transparent);
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--bar-delay, 0ms);
}

.shopSearchTable .shopCollectionButton {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--shop-line) 82%, var(--shop-accent));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-panel, var(--shop-bg)) 94%, var(--shop-accent) 6%);
  color: var(--shop-muted);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shop-text) 8%, transparent);
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.shopSearchTable .shopCollectionButton svg {
  transition: fill 160ms ease;
}

.shopSearchTable .shopCollectionButton:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--shop-accent) 52%, var(--shop-line));
  background: color-mix(in srgb, var(--shop-accent) 10%, var(--surface-panel, var(--shop-bg)));
  color: var(--shop-accent-strong);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--shop-accent) 14%, transparent);
  transform: translateY(-1px);
}

.shopSearchTable .shopCollectionButton:focus-visible {
  outline: 0;
  border-color: var(--shop-accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.shopSearchTable .shopCollectionButton:not(:disabled):active {
  transform: translateY(0) scale(0.96);
}

.shopSearchTable .shopCollectionButton.is-collected {
  border-color: color-mix(in srgb, var(--shop-accent) 54%, var(--shop-line));
  background: color-mix(in srgb, var(--shop-accent) 14%, var(--surface-panel, var(--shop-bg)));
  color: var(--shop-accent-strong);
}

.shopSearchTable .shopCollectionButton.is-collected svg {
  fill: currentColor;
}

.shopSearchTable .shopCollectionButton.is-loading {
  cursor: wait;
}

.shopSearchTable .shopCollectionButton.is-loading svg {
  animation: shopCollectionButtonSpin 720ms linear infinite;
}

.shopSearchTable .shopCollectionButton:disabled {
  opacity: 0.62;
}

@keyframes shopCollectionButtonSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 680px) {
  .shopSearchTable .shopCollectionButton {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
}

.shopRankTable .shopInfoCell > .shopAvatar {
  margin-left: -4px;
  margin-right: 4px;
}

.shopDetailExportAction,
.shopTrendExportAction {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.shopExportLimitHelpTrigger,
.shopDetailProductListHeader .shopExportLimitHelpTrigger {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--shop-muted) 34%, transparent);
  border-radius: 999px;
  appearance: none;
  background: color-mix(in srgb, var(--shop-muted) 10%, #ffffff);
  color: color-mix(in srgb, var(--shop-muted) 84%, var(--shop-text));
  cursor: help;
  line-height: 1;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.shopExportLimitHelpTrigger:hover,
.shopExportLimitHelpTrigger:focus-visible,
.shopDetailProductListHeader .shopExportLimitHelpTrigger:hover,
.shopDetailProductListHeader .shopExportLimitHelpTrigger:focus-visible {
  border-color: color-mix(in srgb, var(--shop-accent) 42%, var(--shop-line));
  background: color-mix(in srgb, var(--shop-accent) 12%, #ffffff);
  color: var(--shop-accent-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-accent) 14%, transparent);
}

.shopExportLimitHelpTrigger:focus-visible {
  outline: none;
}

.shopExportLimitHelpTrigger .compassIcon {
  width: 12px;
  height: 12px;
}

.shopTrendDataViewport {
  position: relative;
  min-height: 360px;
  isolation: isolate;
}

.shopTrendDataContent {
  min-height: inherit;
  opacity: 1;
  transition: opacity 260ms ease;
}

.shopTrendDataViewport.is-loading .shopTrendDataContent {
  opacity: 0.24;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

.shopTrendLoadingOverlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--shop-panel) 72%, transparent);
  color: var(--shop-muted);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    visibility 0s linear 180ms;
}

.shopTrendDataViewport.is-loading .shopTrendLoadingOverlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.shopTrendLoadingState {
  width: min(360px, calc(100% - 48px));
  display: grid;
  gap: 12px;
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.shopTrendLoadingSkeleton {
  display: grid;
  gap: 9px;
}

.shopTrendLoadingSkeleton i {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--shop-line-strong) 60%, transparent);
  transform-origin: left;
  animation: shopTrendLoadingPulse 900ms ease-in-out infinite alternate;
}

.shopTrendLoadingSkeleton i:nth-child(2) {
  width: 78%;
  animation-delay: 120ms;
}

.shopTrendLoadingSkeleton i:nth-child(3) {
  width: 58%;
  animation-delay: 240ms;
}

.shopDetailAnimatedChart .shopTrendLine {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

.shopDetailAnimatedChart.is-visible .shopTrendLine {
  animation: shopTrendLineReveal 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes shopTrendLoadingPulse {
  from {
    opacity: 0.38;
    transform: scaleX(0.92);
  }
  to {
    opacity: 0.82;
    transform: scaleX(1);
  }
}

@keyframes shopTrendLineReveal {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
  }
}

@media (max-width: 720px) {
  .shopTrendDataViewport {
    min-height: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shopTrendDataContent,
.shopTrendLoadingOverlay {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .shopTrendLoadingSkeleton i,
.shopDetailAnimatedChart.is-visible .shopTrendLine {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .shopTrendLoadingSkeleton i {
    opacity: 0.64;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .shopDetailAnimatedChart.is-visible .shopTrendLine {
    opacity: 1;
    clip-path: inset(0);
  }
}

.fmDetailShop {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: transparent;
  padding: 6px 12px;
  cursor: pointer;
}

.shopDetailPage .shopDetailRatingCard {
  grid-template-columns: minmax(180px, 1.2fr) 1px repeat(2, minmax(120px, 0.75fr)) minmax(
      240px,
      1.35fr
    );
  align-items: stretch;
}

.shopChartCardHeader .shopPriceBandMetricControl {
  margin-top: 8px;
}

.shopPriceBandMetricControl.cuiSegmented {
  max-width: 100%;
  border-color: var(--shop-line);
  background: color-mix(in srgb, var(--shop-accent) 5%, #ffffff);
  box-shadow: none;
}

.shopPriceBandMetricControl .cuiSegmentedButton {
  min-width: 72px;
  color: var(--shop-muted);
  font-weight: 900;
}

.shopPriceBandMetricControl .cuiSegmentedButton[aria-pressed='true'] {
  background: var(--shop-accent-soft);
  color: var(--shop-accent-strong);
  box-shadow: none;
}

.shopDetailEntityCopy {
  min-width: 0;
  flex: 1 1;
  display: grid;
  gap: 5px;
}

.shopDetailEntityTitleRow {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.shopDetailEntityTitleRow .shopDetailEntityLink {
  flex: 1 1;
}

.shopDetailEntityTitleRow .shopTranslateAnchor {
  flex: 0 0 auto;
}

.shopDetailEntityMeta {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.shopDetailListTitle {
  margin: 4px 0 -2px;
  color: var(--shop-text);
  font-size: 16px;
  font-weight: 920;
  line-height: 1.35;
}

.shopDetailCreatorListIdentityCell,
.shopDetailMediaTitleCell {
  min-width: 300px;
}

.shopDetailCreatorListIdentityCell .shopDetailEntityCell,
.shopDetailMediaTitleCell .shopDetailEntityCell {
  min-width: 280px;
  align-items: flex-start;
}

.shopDetailEmbeddedCreatorCell {
  min-width: 280px;
}

.shopDetailCreatorIdentity {
  min-width: 260px;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
}

.shopDetailCreatorIdentityCopy {
  min-width: 0;
  flex: 1 1;
  display: grid;
  gap: 5px;
}

.shopDetailCreatorIdentityCopy > .shopDetailEntityTitleRow > strong,
.shopDetailCreatorIdentityCopy .shopDetailEntityLink strong {
  max-width: 170px;
  overflow: hidden;
  color: var(--shop-text);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopDetailDatabaseAvatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-bg-soft);
  color: var(--shop-accent-strong);
  font-size: 12px;
  font-weight: 950;
}

.shopDetailDatabaseAvatar.is-creator {
  border-radius: 50%;
}

.shopDetailDatabaseAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shopDetailMediaMetaLine {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--shop-muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.4;
}

.shopDetailMetadataBadge {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--shop-line);
  border-radius: 999px;
  background: var(--shop-bg-soft);
  color: var(--shop-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  padding: 3px 7px;
}

.shopDetailMetadataBadge.is-live {
  border-color: color-mix(in srgb, #16a36a 25%, var(--shop-line));
  background: color-mix(in srgb, #16a36a 10%, var(--shop-bg-soft));
  color: #087449;
}

.shopDetailMetadataBadge.is-boosting {
  border-color: color-mix(in srgb, var(--shop-accent) 25%, var(--shop-line));
  background: var(--shop-accent-soft);
  color: var(--shop-accent-strong);
}

.shopDetailDateTimeCell > span {
  white-space: pre-line;
  line-height: 1.55;
}

.shopDetailMetricValueCell {
  text-align: center;
}

.shopDetailMetricValueCell > span {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.shopDetailProductNameCell {
  min-width: 180px;
}

.shopDetailVideoProductCell {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.shopDetailVideoProductCell > strong {
  overflow: hidden;
  color: var(--shop-text);
  font-size: 13px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopDetailVideoProductSales {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--shop-muted);
  font-size: 12px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.shopDetailVideoProductSales > em {
  color: var(--shop-muted);
  font-style: normal;
  opacity: 0.76;
}

.shopDetailProductIdentityCell {
  min-width: 330px;
}

.shopDetailProductIdentityCell .shopDetailEntityCell {
  min-width: 310px;
  align-items: flex-start;
}

.shopDetailProductIdentityCell .shopDetailThumb {
  margin-top: 2px;
}

.shopDetailProductPriceLine,
.shopDetailProductCountryLine {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--shop-muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
}

.shopDetailProductPriceLine strong {
  color: var(--shop-text);
  font-size: 11px;
  font-weight: 900;
}

.shopDetailProductCountryLine i {
  font-size: 14px;
  font-style: normal;
  line-height: 1;
}

.shopDetailProductBadge {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--shop-line);
  border-radius: 999px;
  background: var(--shop-bg-soft);
  color: var(--shop-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  padding: 0 7px;
}

.shopDetailProductBadge.is-new {
  border-color: color-mix(in srgb, var(--shop-accent) 24%, var(--shop-line));
  background: var(--shop-accent-soft);
  color: var(--shop-accent-strong);
}

.shopDetailProductBadge.is-active {
  border-color: color-mix(in srgb, #16a36a 24%, var(--shop-line));
  background: color-mix(in srgb, #16a36a 10%, #ffffff);
  color: #087449;
}

.shopDetailProductBadge.is-delisted {
  border-color: color-mix(in srgb, #d64545 18%, var(--shop-line));
  background: color-mix(in srgb, #d64545 7%, #ffffff);
  color: #a02f2f;
}

.shopDetailProductCategoryCell > span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--shop-accent) 7%, #ffffff);
  color: var(--shop-text);
  font-size: 11px;
  font-weight: 850;
  padding: 2px 9px;
}

.shopDetailProductListedCell > span {
  white-space: pre-line;
  line-height: 1.55;
}

.shopDetailProductCommissionCell,
.shopDetailProductMetricCell {
  text-align: center;
}

.shopDetailProductMetricCell > span {
  color: var(--shop-text);
  font-weight: 920;
}

.shopRankingDateButton {
  width: 190px;
  max-width: 100%;
  min-height: 34px;
  display: inline-grid !important;
  grid-template-columns: 16px minmax(112px, 1fr) 16px;
  align-items: center;
  justify-items: center;
  column-gap: 8px;
  border-color: color-mix(in srgb, var(--shop-accent) 18%, var(--shop-line)) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--shop-bg-soft) 92%, #ffffff),
    color-mix(in srgb, var(--shop-accent) 6%, var(--shop-bg))
  ) !important;
  color: var(--shop-text) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  padding: 0 12px !important;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.shopDetailPage .shopBarFill {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--bar-color) 52%, #ffffff),
    var(--bar-color)
  );
  box-shadow: 0 2px 10px color-mix(in srgb, var(--bar-color) 32%, transparent);
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--bar-delay, 0ms);
}

.shopDetailDateRange {
  grid-template-columns: auto minmax(250px, 1fr);
}

.shopDetailDateRangePicker {
  width: 100%;
  min-width: 0;
}

.shopDetailDateRangePicker .cuiDatePickerTrigger {
  width: 100%;
  min-width: 250px;
  min-height: 38px;
  border-color: color-mix(in srgb, var(--shop-accent) 24%, var(--shop-line));
  border-radius: 999px;
  background: #ffffff;
  padding: 0 12px;
  color: var(--shop-text);
  font-size: 13px;
  font-weight: 850;
}

.shopDetailDateRangePicker .cuiDatePickerIcon,
.shopDetailDateRangePicker .cuiDatePickerTrailingIcon {
  color: var(--shop-muted);
}

.shopDetailDateRangePicker .cuiDatePickerTrigger:hover:not(:disabled),
.shopDetailDateRangePicker .cuiDatePickerTrigger:focus-visible {
  border-color: var(--shop-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-accent) 12%, transparent);
  outline: 0;
}

@media (max-width: 720px) {
  .shopDetailDateRange,
.shopDetailDateRangePicker,
.shopDetailDateRangePicker .cuiDatePickerTrigger {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 720px) {

  .shopDetailDateRange {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Shared custom export dialog for shop search and ranking pages. */
.cuiDialogContent:has(.shopCustomExportDialog) {
  --shop-export-line: color-mix(in srgb, var(--line-dark) 82%, transparent);
  --shop-export-line-strong: color-mix(in srgb, var(--line-dark) 96%, var(--primary) 4%);
  --shop-export-surface: color-mix(in srgb, var(--surface-panel) 96%, var(--bg));
  --shop-export-surface-subtle: color-mix(in srgb, var(--surface-panel-hover) 84%, var(--bg));
  --shop-export-control: color-mix(in srgb, var(--surface-panel-strong) 88%, var(--bg));
  width: min(920px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  border-color: var(--shop-export-line-strong);
  border-radius: 8px;
  background: var(--shop-export-surface);
  box-shadow: var(--shadow-dark);
  color: var(--text-1);
}

.cuiDialogContent:has(.shopCustomExportDialog) .cuiDialogHeader {
  flex: 0 0 auto;
  border-bottom-color: var(--shop-export-line);
  background: var(--shop-export-surface);
  padding: 20px 24px 18px;
}

.cuiDialogContent:has(.shopCustomExportDialog) .cuiDialogTitle {
  color: var(--text-1);
  font-size: 18px;
  font-weight: 760;
  letter-spacing: 0;
}

.cuiDialogContent:has(.shopCustomExportDialog) .cuiDialogDescription {
  max-width: 640px;
  margin-top: 5px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 560;
}

.cuiDialogContent:has(.shopCustomExportDialog) .cuiDialogBody {
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 0 24px 20px;
}

.cuiDialogContent:has(.shopCustomExportDialog) .cuiDialogFooter {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, max-content));
  flex: 0 0 auto;
  align-items: center;
  justify-content: end;
  overflow: visible;
  gap: 10px;
  border-top-color: var(--shop-export-line);
  background: var(--shop-export-surface-subtle);
  padding: 14px 28px 14px 24px;
}

.cuiDialogContent:has(.shopCustomExportDialog) .cuiDialogFooter .cuiButton {
  width: 100%;
  min-width: 112px;
  max-width: 100%;
  justify-content: center;
  border-radius: 7px;
  white-space: nowrap;
}

.shopCustomExportDialog {
  min-width: 0;
  display: grid;
  gap: 0;
  color: var(--text-1);
  letter-spacing: 0;
}

.shopCustomExportConditions,
.shopCustomExportColumns {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.shopCustomExportConditions {
  border-bottom: 1px solid var(--shop-export-line);
  padding: 14px 0 13px;
}

.shopCustomExportSectionHead,
.shopCustomExportFieldLabelRow {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shopCustomExportSectionHead > strong,
.shopCustomExportFieldLabel {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 740;
  line-height: 1.4;
}

.shopCustomExportSectionHead > span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 620;
}

.shopCustomExportConditionList {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
}

.shopCustomExportConditionList em {
  max-width: 100%;
  overflow: hidden;
  border-left: 1px solid var(--shop-export-line);
  color: var(--text-3);
  padding: 0 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopCustomExportConditionList em:first-child {
  border-left: 0;
  padding-left: 0;
}

.shopCustomExportSettings {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 22px;
  margin: 18px 0 20px;
  border: 1px solid var(--shop-export-line);
  border-radius: 8px;
  background: var(--shop-export-surface-subtle);
  padding: 16px;
}

.shopCustomExportField {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.shopCustomExportFileName {
  grid-column: 1 / -1;
}

.shopCustomExportFileNameControl {
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--shop-export-line-strong);
  border-radius: 7px;
  background: var(--shop-export-control);
  padding: 0 11px;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.shopCustomExportFileNameControl:focus-within {
  border-color: var(--primary);
  background: var(--shop-export-surface);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.shopCustomExportFileNameControl:has(.cuiInput[aria-invalid='true']) {
  border-color: var(--danger);
}

.shopCustomExportFileNameControl > svg {
  color: var(--text-3);
}

.shopCustomExportFileNameControl .cuiInput {
  width: 100%;
  min-width: 0;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-1);
  padding: 0;
  outline: 0;
}

.shopCustomExportFileNameControl .cuiInput:hover,
.shopCustomExportFileNameControl .cuiInput:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.shopCustomExportFileNameControl > span {
  min-width: 0;
  border-left: 1px solid var(--shop-export-line);
  color: var(--text-3);
  padding-left: 10px;
  font-size: 12px;
  font-weight: 680;
  white-space: nowrap;
}

.shopCustomExportFieldMeta {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

.shopCustomExportField > .cuiSegmented,
.shopCustomExportField > .cuiNumberInput {
  width: 100%;
}

.shopCustomExportField > .cuiSegmented .cuiSegmentedButton {
  min-width: 0;
  flex: 1 1;
}

.shopCustomExportField > .cuiSegmented,
.shopCustomExportField > .cuiNumberInput {
  border-color: var(--shop-export-line-strong);
  border-radius: 7px;
  background: var(--shop-export-control);
  box-shadow: none;
}

.shopCustomExportField > .cuiSegmented .cuiSegmentedButton[aria-pressed='true'] {
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-panel-strong));
  color: var(--text-1);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 42%, transparent);
}

.shopCustomExportField > .cuiSegmented .cuiSegmentedButton:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -1px;
}

.shopCustomExportField > .cuiNumberInput:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.shopCustomExportQuotaHelp {
  margin-left: auto;
}

.shopCustomExportValidation,
.shopCustomExportError {
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.shopCustomExportColumnActions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
}

.shopCustomExportColumnActions .cuiButton {
  min-height: 28px;
  gap: 5px;
  border-radius: 6px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
}

.shopCustomExportGroups {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}

.shopCustomExportGroup {
  min-width: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--shop-export-line);
  border-radius: 0;
  padding: 13px 0 15px;
}

.shopCustomExportGroup legend {
  width: 100%;
  color: var(--text-3);
  margin-bottom: 10px;
  padding: 0;
  font-size: 11px;
  font-weight: 720;
}

.shopCustomExportCheckboxes {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.shopCustomExportCheckboxes .cuiCheckboxLabel {
  min-width: 0;
  align-items: flex-start;
  margin: 0;
}

.shopCustomExportCheckboxes .cuiCheckboxLabel > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.4;
}

.shopCustomExportCheckboxes .cuiCheckboxLabel em {
  color: var(--primary);
  padding: 0;
  font-size: 9px;
  font-style: normal;
  font-weight: 760;
}

.shopCustomExportSummary {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--shop-export-line);
  border-bottom: 1px solid var(--shop-export-line);
  margin-top: 4px;
}

.shopCustomExportSummary > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-left: 1px solid var(--shop-export-line);
  padding: 11px 14px;
}

.shopCustomExportSummary > div:first-child {
  border-left: 0;
}

.shopCustomExportSummary span {
  min-width: 0;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
}

.shopCustomExportSummary strong {
  flex: 0 0 auto;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 780;
}

.shopCustomExportTruncation,
.shopCustomExportError {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 7px;
  padding: 9px 10px;
}

.shopCustomExportTruncation svg,
.shopCustomExportError svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.shopCustomExportTruncation {
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  background: color-mix(in srgb, var(--warning) 9%, transparent);
  color: color-mix(in srgb, var(--warning) 82%, var(--text-1));
  font-size: 12px;
  font-weight: 720;
  line-height: 1.55;
}

.shopCustomExportError {
  position: sticky;
  z-index: 2;
  bottom: -1px;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  background: color-mix(in srgb, var(--shop-export-surface) 92%, var(--danger));
  box-shadow: 0 -8px 22px color-mix(in srgb, var(--bg) 38%, transparent);
}

@media (max-width: 680px) {
  .cuiDialogContent:has(.shopCustomExportDialog) {
    width: min(calc(100% - 16px), 920px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
}

@media (max-width: 680px) {

  .cuiDialogContent:has(.shopCustomExportDialog) .cuiDialogHeader {
    padding: 17px 16px 15px;
  }
}

@media (max-width: 680px) {

  .cuiDialogContent:has(.shopCustomExportDialog) .cuiDialogBody {
    padding: 0 16px 16px;
  }
}

@media (max-width: 680px) {

  .cuiDialogContent:has(.shopCustomExportDialog) .cuiDialogFooter {
    padding: 12px 20px 12px 16px;
  }
}

@media (max-width: 680px) {

  .shopCustomExportSettings,
.shopCustomExportGroups {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {

  .shopCustomExportGroups {
    column-gap: 0;
  }
}

@media (max-width: 680px) {

  .shopCustomExportSummary > div {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 10px;
  }
}

@media (max-width: 460px) {
  .cuiDialogContent:has(.shopCustomExportDialog) .cuiDialogFooter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 8px;
    padding: 12px 16px 14px;
  }
}

@media (max-width: 460px) {

  .cuiDialogContent:has(.shopCustomExportDialog) .cuiDialogFooter .cuiButton {
    width: 100%;
    min-width: 0;
    max-width: none;
    white-space: nowrap;
  }
}

@media (max-width: 460px) {

  .shopCustomExportSettings {
    gap: 13px;
    padding: 12px;
  }
}

@media (max-width: 460px) {

  .shopCustomExportColumns .shopCustomExportSectionHead {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 460px) {

  .shopCustomExportColumnActions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {

  .shopCustomExportColumnActions .cuiButton {
    min-width: 0;
    min-height: 34px;
    justify-content: center;
    white-space: normal;
  }
}

@media (max-width: 460px) {

  .shopCustomExportCheckboxes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 460px) {

  .shopCustomExportField > .cuiSegmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {

  .shopCustomExportSummary span {
    font-size: 10px;
    line-height: 1.35;
  }
}

@media (max-width: 460px) {

  .shopCustomExportSummary strong {
    font-size: 13px;
  }
}

/* End shared custom export dialog for shop search and ranking pages. */
.shopDetailPage .shopDetailHeroSummary {
  display: grid;
  gap: 16px;
}

.shopDetailPage .shopDetailHeroGrid {
  grid-template-columns: minmax(300px, 0.94fr) minmax(420px, 1.08fr) minmax(270px, 0.58fr);
  gap: 16px;
  align-items: stretch;
}

.shopDetailCoverCard {
  position: relative;
  min-height: 286px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 14%, var(--shop-line));
  border-radius: 14px;
  background:
    radial-gradient(circle at 79% 15%, rgba(255, 255, 255, 0.9) 0 6%, transparent 7%),
    linear-gradient(
      125deg,
      color-mix(in srgb, var(--shop-accent-soft) 78%, var(--shop-panel)),
      #e7f2ff 48%,
      #f5ecf8
    );
  box-shadow: var(--shop-shadow);
}

.shopDetailCoverCard::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--shop-text) 14%, transparent),
    transparent 42%,
    color-mix(in srgb, var(--shop-text) 18%, transparent)
  );
  content: '';
  pointer-events: none;
}

.shopDetailCoverImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.shopDetailCoverEyebrow {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 22px;
  display: inline-flex;
  max-width: calc(100% - 44px);
  align-items: center;
  gap: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--shop-accent-strong);
  font-size: 12px;
  font-weight: 900;
  padding: 8px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopDetailPage .shopDetailProfileCard--summary {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 20px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shopDetailPage .shopDetailProfileCard--summary .shopDetailProfileTop {
  display: block;
  padding: 0 2px;
}

.shopDetailPage .shopDetailProfileCard--summary .shopDetailProfileIdentity h1 {
  margin: 0;
  color: var(--shop-text);
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.18;
}

.shopDetailPage .shopDetailProfileCard--summary .shopDetailProfileIdentity span {
  margin-top: 5px;
  color: var(--shop-muted);
  font-size: 14px;
  font-weight: 720;
}

.shopDetailProfileTags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 2px;
}

.shopDetailProfileTags span {
  min-height: 26px;
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 20%, var(--shop-line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--shop-accent-soft) 62%, var(--shop-panel));
  color: var(--shop-accent-strong);
  font-size: 12px;
  font-weight: 850;
  padding: 0 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopDetailProfileTags span:nth-child(n + 2) {
  background: #fbfcff;
  color: var(--shop-muted);
}

.shopDetailProfileFacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--shop-line);
  border-bottom: 1px solid var(--shop-line);
}

.shopDetailProfileFacts > div {
  min-width: 0;
  padding: 12px 13px 12px 0;
}

.shopDetailProfileFacts > div:nth-child(2n) {
  padding-left: 16px;
  border-left: 1px solid var(--shop-line);
}

.shopDetailProfileFacts dt,
.shopDetailProfileFacts dd {
  margin: 0;
}

.shopDetailProfileFacts dt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 760;
}

.shopDetailProfileFacts dd {
  overflow: hidden;
  margin-top: 4px;
  color: var(--shop-text);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopDetailPage .shopDetailProfileCard--summary .shopDetailProfileActions {
  margin: 0;
  padding: 0 2px;
}

.shopDetailHeroUpdate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px;
  border: 1px solid color-mix(in srgb, #f59e0b 34%, var(--shop-line));
  border-radius: 9px;
  background: color-mix(in srgb, #fff7ed 82%, var(--shop-panel));
  color: var(--shop-muted);
  padding: 11px 13px;
}

.shopDetailHeroUpdate span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 12px;
  font-weight: 850;
}

.shopDetailHeroUpdate strong {
  overflow: hidden;
  color: var(--shop-accent-strong);
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopDetailPage .shopDetailRatingCard {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 24px;
  border-color: color-mix(in srgb, var(--shop-accent) 16%, var(--shop-line));
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--shop-accent-soft) 22%, var(--shop-panel)),
    var(--shop-panel) 58%
  );
  box-shadow:
    0 18px 42px color-mix(in srgb, var(--shop-text) 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--shop-panel) 74%, transparent);
}

.shopDetailPage .shopDetailRatingCard .shopRatingMain {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 7px 12px;
}

.shopDetailPage .shopDetailRatingCard .shopRatingMain > span {
  grid-column: 1 / -1;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 780;
}

.shopDetailPage .shopDetailRatingCard .shopRatingMain > strong {
  font-size: 30px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
}

.shopDetailPage .shopDetailRatingCard .shopStarRating {
  align-self: center;
  font-size: 18px;
}

.shopDetailPage .shopDetailRatingCard .shopRatingDivider {
  width: 100%;
  height: 1px;
  min-height: 1px;
  background: var(--shop-line);
}

.shopDetailPage .shopDetailRatingStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shopDetailPage .shopDetailRatingStats > div {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 70px;
  padding: 12px 14px;
}

.shopDetailPage .shopDetailRatingStats > div:nth-child(odd) {
  padding-left: 0;
  border-right: 1px solid var(--shop-line);
}

.shopDetailPage .shopDetailRatingStats > div:nth-child(even) {
  padding-right: 0;
}

.shopDetailPage .shopDetailRatingStats > div:nth-child(-n + 2) {
  border-bottom: 1px solid var(--shop-line);
}

.shopDetailPage .shopDetailRatingStats span {
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.shopDetailPage .shopDetailRatingStats strong {
  color: var(--shop-text);
  font-size: 17px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1.2;
}

.shopDetailPage .shopDetailMetricGrid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}

.shopDetailPage .shopDetailMetricGrid article {
  min-height: 128px;
  padding: 15px;
}

.shopDetailPage .shopDetailMetricGrid strong {
  margin-top: 14px;
  font-size: 22px;
  line-height: 1.05;
}

@media (max-width: 1400px) {
  .shopDetailPage .shopDetailHeroGrid {
    grid-template-columns: minmax(280px, 0.9fr) minmax(380px, 1.1fr);
  }
}

@media (max-width: 1400px) {

  .shopDetailPage .shopDetailRatingCard {
    grid-column: 1 / -1;
    grid-template-columns: minmax(190px, 0.62fr) 1px minmax(0, 1.7fr);
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
  }
}

@media (max-width: 1400px) {

  .shopDetailPage .shopDetailRatingCard .shopRatingDivider {
    display: block;
    width: 1px;
    height: 100%;
  }
}

@media (max-width: 1400px) {

  .shopDetailPage .shopDetailRatingStats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1400px) {

  .shopDetailPage .shopDetailRatingStats > div {
    min-height: 56px;
    padding: 4px 16px;
    border-bottom: 0;
    border-right: 1px solid var(--shop-line);
  }
}

@media (max-width: 1400px) {

  .shopDetailPage .shopDetailRatingStats > div:nth-child(odd) {
    padding-left: 16px;
  }
}

@media (max-width: 1400px) {

  .shopDetailPage .shopDetailRatingStats > div:nth-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (max-width: 1400px) {

  .shopDetailPage .shopDetailRatingStats > div:last-child {
    padding-right: 0;
    border-right: 0;
  }
}

@media (max-width: 1400px) {

  .shopDetailPage .shopDetailMetricGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .shopDetailPage .shopDetailHeroGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {

  .shopDetailCoverCard {
    min-height: 230px;
  }
}

@media (max-width: 900px) {

  .shopDetailPage .shopDetailRatingCard {
    grid-column: auto;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
  }
}

@media (max-width: 900px) {

  .shopDetailPage .shopDetailRatingCard .shopRatingDivider {
    display: block;
    width: 100%;
    height: 1px;
  }
}

@media (max-width: 900px) {

  .shopDetailPage .shopDetailRatingStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {

  .shopDetailPage .shopDetailRatingStats > div {
    min-height: 70px;
    padding: 12px 14px;
    border-right: 0;
  }
}

@media (max-width: 900px) {

  .shopDetailPage .shopDetailRatingStats > div:nth-child(odd) {
    padding-left: 0;
    border-right: 1px solid var(--shop-line);
  }
}

@media (max-width: 900px) {

  .shopDetailPage .shopDetailRatingStats > div:nth-child(even) {
    padding-right: 0;
  }
}

@media (max-width: 900px) {

  .shopDetailPage .shopDetailRatingStats > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--shop-line);
  }
}

@media (max-width: 620px) {
  .shopDetailPage .shopDetailMetricGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {

  .shopDetailProfileFacts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {

  .shopDetailProfileFacts > div:nth-child(2n) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 620px) {

  .shopDetailHeroUpdate {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Shared shop search and ranking filter refinements. */
.shopFilterBlock .shopFilterRow {
  align-items: flex-start;
  gap: 16px;
}

.shopFilterBlock .shopFilterRow > span {
  min-width: 86px;
  color: color-mix(in srgb, var(--shop-text) 88%, #000000);
  font-size: 14px;
  font-weight: 900;
  line-height: 36px;
}

.shopFilterBlock .shopFilterRow button,
.shopFilterBlock .shopAdvancedGrid select {
  font-size: 14px;
}

.shopFilterBlock .shopFilterChip {
  min-height: 36px;
  padding: 0 15px;
  border-color: color-mix(in srgb, var(--shop-line) 58%, var(--shop-text) 42%);
  background: var(--shop-surface);
  color: var(--shop-text);
}

.shopFilterBlock .shopFilterChip:hover {
  border-color: color-mix(in srgb, var(--shop-accent) 45%, var(--shop-line));
  background: var(--shop-bg-soft);
}

.shopFilterBlock .shopCategoryFilter .shopFilterChip {
  border-color: transparent;
  background: transparent;
}

.shopFilterBlock .shopCategoryFilter .shopFilterChip:hover {
  border-color: transparent;
  background: var(--shop-bg-soft);
}

.shopFilterBlock .shopCategoryFilter .shopFilterChip.active {
  border-color: var(--shop-accent);
  background: var(--shop-accent);
  color: #ffffff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--shop-accent) 18%, transparent);
}

.shopFilterBlock .shopCategoryFilter {
  display: grid;
  flex: 1 1 auto;
  gap: 8px;
}

.shopCategoryFilterOptions,
.shopFilterOptionGroups,
.shopFilterOptionGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.shopShopTypeRow {
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
}

.shopFilterOptionGroups {
  gap: 8px 16px;
}

.shopShopTypeRow > span {
  white-space: nowrap;
}

.shopCategorySubmenu {
  position: static;
  z-index: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  width: 100%;
  max-height: 264px;
  margin: 0;
  padding: 8px;
  border-color: color-mix(in srgb, var(--shop-accent) 38%, var(--shop-line));
  background: var(--shop-surface);
  box-shadow: 0 8px 18px rgb(28 53 94 / 8%);
}

.shopFilterBlock .shopFilterRow .shopCategorySubmenu button {
  min-height: 36px;
  border-radius: 6px;
  color: var(--shop-text);
  font-size: 14px;
  font-weight: 750;
}

.shopSelectedConditions {
  width: 100%;
  min-height: 58px;
  gap: 10px;
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  background: var(--shop-bg-soft);
  padding: 10px 12px;
}

.shopSelectedConditions > span {
  color: var(--shop-text);
  font-size: 14px;
}

.shopSelectedConditions > div {
  flex: 1 1 auto;
}

.shopSelectedConditions em {
  min-height: 28px;
  font-size: 13px;
  padding: 0 10px;
}

.shopSelectedConditions > .shopSelectedClearButton {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 64%, var(--shop-line));
  border-radius: 6px;
  background: var(--shop-surface);
  color: var(--shop-accent);
  font-size: 14px;
  font-weight: 850;
  padding: 0 12px;
  white-space: nowrap;
}

.shopSelectedConditions > .shopSelectedClearButton:hover {
  background: var(--shop-accent-soft);
}

@media (max-width: 720px) {
  .shopFilterBlock .shopFilterRow {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .shopFilterBlock .shopFilterRow > span {
    line-height: 1.4;
  }

  .shopSelectedConditions > .shopSelectedClearButton {
    margin-left: 0;
  }
}

/* Shop surfaces follow the workspace appearance and accent controls. */
.shopSearchPage {
  --shop-panel: color-mix(in srgb, var(--surface-panel) 96%, transparent);
  --shop-panel-soft: color-mix(in srgb, var(--surface-panel-strong) 96%, transparent);
  --shop-surface-raised: color-mix(in srgb, var(--surface-panel-hover) 94%, transparent);
  --shop-row-hover: color-mix(in srgb, var(--primary) 9%, var(--surface-panel-hover));
  --shop-row-target: color-mix(in srgb, var(--primary) 14%, var(--surface-panel-hover));
  --shop-shadow: 0 18px 48px color-mix(in srgb, var(--text-1) 10%, transparent);
}

.shopSearchHeader,
.shopDetailTitleRow {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 11%, var(--shop-panel)), var(--shop-panel) 64%);
}

.commerceDataListPanel.shopResultsCard .cuiDataListHeader,
.commerceDataListPanel.shopResultsCard .shopSearchTable thead th,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableHeadCell,
.shopResultsCard .cuiDataListBody,
.shopDataListScroller,
.shopTableWrap,
.shopDataListScroller .cuiDataListBody,
.shopTableWrap .cuiDataListBody,
.shopSearchTable th,
.shopSearchTable .cuiDataListTableHeadCell,
.shopFilterGrid select,
.shopAdvancedGrid input,
.shopRankFooter input,
.shopDetailSection select,
.shopDetailSection input,
.shopDetailSection textarea {
  background: var(--shop-panel);
  color: var(--shop-text);
}

.commerceDataListPanel.shopResultsCard .shopSearchTable tbody td,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableCell {
  color: var(--shop-text);
}

.commerceDataListPanel.shopResultsCard .shopSearchTable tbody tr:hover,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableRow:not(.cuiDataListTableHead):hover,
.shopSearchTable tbody tr:hover,
.shopSearchTable .cuiDataListTableRow:not(.cuiDataListTableHead):hover {
  background: var(--shop-row-hover);
}

.shopSearchTable tbody tr.is-target-shop,
.shopSearchTable tbody tr.is-target-shop:hover {
  background: var(--shop-row-target);
}

.commerceDataListPanel.shopResultsCard .shopSearchTable td > button,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableCell > button,
.commerceDataListPanel.shopResultsCard .shopResultsActions > button,
.shopSearchTable td > button,
.shopSearchTable .cuiDataListTableCell > button,
.shopSearchTable .collected {
  border-color: var(--shop-line);
  background: var(--shop-surface-raised);
  color: var(--shop-muted);
}

.commerceDataListPanel.shopResultsCard .shopResultsActions > button:not(:disabled):hover,
.commerceDataListPanel.shopResultsCard .shopSearchTable td > button:not(:disabled):hover,
.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiDataListTableCell > button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--shop-line));
  background: color-mix(in srgb, var(--primary) 12%, var(--shop-surface-raised));
  color: var(--primary-light);
}

.shopMetricValue {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.shopMetricUnit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55em;
  min-height: 1.55em;
  border: 1px solid color-mix(in srgb, var(--primary-light) 54%, var(--shop-line));
  border-radius: 5px;
  background: color-mix(in srgb, var(--primary) 13%, var(--shop-panel));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--primary-light) 30%, transparent);
  color: var(--primary-light);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.58em;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  vertical-align: 0.12em;
}

[data-theme='dark'] .shopMetricUnit {
  border-color: color-mix(in srgb, var(--primary-light) 68%, var(--shop-line));
  background: color-mix(in srgb, var(--primary) 25%, var(--surface-panel-strong));
  box-shadow: 0 0 16px color-mix(in srgb, var(--primary) 22%, transparent);
  color: color-mix(in srgb, var(--primary-light) 82%, #ffffff);
}

/* Keep search and ranking metrics on one compact, tabular treatment. */
.shopSearchTable .shopMetricValue {
  align-items: flex-end;
  color: var(--shop-text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 850;
  gap: 0.5em;
  letter-spacing: 0;
  line-height: 1.35;
}

.shopSearchTable b .shopMetricValue {
  font-weight: 920;
}

.shopSearchTable .shopMetricUnit {
  min-width: 1.34em;
  min-height: 1.34em;
  font-size: 0.92em;
  line-height: 1;
  transform: translateY(-0.04em);
  vertical-align: baseline;
}

/* Similar-shop cards use compact inline metrics, not the list-table treatment. */
.shopDetailSimilarStats .shopMetricValue {
  gap: 0.34em;
  overflow: visible;
}

.shopDetailSimilarStats .shopMetricUnit {
  min-width: 1.25em;
  min-height: 1.25em;
  border-radius: 4px;
  font-size: 0.72em;
  transform: translateY(-0.03em);
  vertical-align: baseline;
}

/* Give the search list enough room for each metric instead of compressing 11 columns. */
.commerceDataListPanel.shopResultsCard .shopSearchTable {
  min-width: 1880px;
}

.commerceDataListPanel.shopResultsCard .shopSearchTable th,
.commerceDataListPanel.shopResultsCard .shopSearchTable td {
  padding-right: 20px;
  padding-left: 20px;
}

.commerceDataListPanel.shopResultsCard .shopSearchTable th:nth-child(2),
.commerceDataListPanel.shopResultsCard .shopSearchTable td:nth-child(2) {
  min-width: 172px;
}

.commerceDataListPanel.shopResultsCard .shopSearchTable th:nth-child(n + 3):not(:last-child),
.commerceDataListPanel.shopResultsCard .shopSearchTable td:nth-child(n + 3):not(:last-child) {
  min-width: 128px;
}

.commerceDataListPanel.shopResultsCard .shopSearchTable th:last-child,
.commerceDataListPanel.shopResultsCard .shopSearchTable td:last-child {
  min-width: 76px;
}

.shopDataListScroller {
  overflow-x: hidden;
  overflow-y: hidden;
}

.shopDataListHorizontalRail,
.shopSearchDockedHorizontalRail {
  box-sizing: border-box;
  height: 18px;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid var(--shop-line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--shop-panel);
  scrollbar-color: color-mix(in srgb, var(--primary) 42%, var(--shop-line)) var(--shop-panel);
  scrollbar-width: thin;
}

.shopDataListHorizontalRail > div,
.shopSearchDockedHorizontalRail > div {
  height: 1px;
}

.shopDataListHorizontalRail::-webkit-scrollbar,
.shopSearchDockedHorizontalRail::-webkit-scrollbar {
  height: 12px;
}

.shopDataListHorizontalRail::-webkit-scrollbar-thumb,
.shopSearchDockedHorizontalRail::-webkit-scrollbar-thumb {
  border: 3px solid var(--shop-panel);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 46%, var(--shop-line));
}

.shopDataListHorizontalRail::-webkit-scrollbar-track,
.shopSearchDockedHorizontalRail::-webkit-scrollbar-track {
  background: var(--shop-panel);
}

.shopDataListScroller .shopSearchTable th,
.shopSearchDockedTableHeader .shopSearchTable th {
  position: sticky;
  top: 0;
  z-index: 3;
  border-top: 1px solid var(--shop-line);
  border-bottom: 1px solid var(--shop-line);
  background: var(--shop-panel);
  box-shadow: 0 1px 0 var(--shop-line);
}

.shopDataListScroller .shopSearchTable th:first-child,
.shopSearchDockedTableHeader .shopSearchTable th:first-child {
  border-left: 1px solid var(--shop-line);
  border-top-left-radius: 8px;
}

.shopDataListScroller .shopSearchTable th:last-child,
.shopSearchDockedTableHeader .shopSearchTable th:last-child {
  border-right: 1px solid var(--shop-line);
  border-top-right-radius: 8px;
}

.shopSearchDockedTableHeader {
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  visibility: hidden;
  z-index: 900;
}

.shopSearchDockedTableHeader.visible {
  visibility: visible;
}

.shopSearchDockedTableHeader .shopSearchTable {
  margin: 0;
}

.shopSearchDockedHorizontalRail {
  border-radius: 8px 8px 0 0;
  border-top: 1px solid var(--shop-line);
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  visibility: hidden;
  z-index: 900;
}

.shopSearchDockedHorizontalRail.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.commerceDataListPanel.shopResultsCard .shopSearchTable .cuiTableCellFixedLeft {
  background: var(--shop-panel);
  box-shadow: 1px 0 0 var(--shop-line), 12px 0 20px rgb(28 53 94 / 7%);
}

/* Search keeps its own fields but uses the same table surface as shop rankings. */
.shopSearchResultsCard .shopSearchTable {
  min-width: 1880px;
  table-layout: fixed;
}

.shopSearchResultsCard .shopSearchTable th:first-child,
.shopSearchResultsCard .shopSearchTable td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--shop-panel);
  box-shadow: 6px 0 12px rgb(31 40 60 / 4%);
}

.shopSearchResultsCard .shopSearchTable th:first-child {
  z-index: 4;
}

.shopSearchResultsCard .shopSearchTable tbody tr:hover > td:first-child {
  background: var(--shop-row-hover);
}

.shopSearchResultsCard .shopSearchTable tbody tr.is-target-shop > td:first-child,
.shopSearchResultsCard .shopSearchTable tbody tr.is-target-shop:hover > td:first-child {
  background: var(--shop-row-target);
}

.shopSearchResultsCard .shopSearchTable .shopSearchTableStateRow > td {
  position: static;
  left: auto;
  z-index: auto;
  background: var(--shop-panel);
  box-shadow: none;
  padding: 12px;
}

.shopSearchListState.cuiState {
  min-height: 224px;
  border-color: var(--shop-line);
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--primary) 8%, transparent), transparent 48%),
    var(--shop-panel);
  box-shadow: none;
}

.shopSearchResultsTable tbody.is-ready {
  animation: shopSearchRowsReveal 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes shopSearchRowsReveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shopSearchResultsTable tbody.is-ready {
    animation: none;
  }
}

.commerceDataListPanel.shopResultsCard .shopResultsHeader > div:last-child {
  gap: 10px;
}

.commerceDataListPanel.shopResultsCard .shopResultsHeader > div:last-child > button {
  min-height: 36px;
  border-color: color-mix(in srgb, var(--primary) 34%, var(--shop-line));
  background: color-mix(in srgb, var(--primary) 7%, var(--shop-control-bg));
  color: var(--primary-light);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--primary) 9%, transparent);
}

.commerceDataListPanel.shopResultsCard .shopResultsHeader > div:last-child > button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--shop-line));
  background: color-mix(in srgb, var(--primary) 15%, var(--shop-control-bg));
  color: var(--primary);
  box-shadow: 0 9px 20px color-mix(in srgb, var(--primary) 18%, transparent);
  transform: translateY(-1px);
}

.commerceDataListPanel.shopResultsCard .shopResultsHeader > div:last-child > button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

[data-theme='dark'] .commerceDataListPanel.shopResultsCard .shopResultsHeader > div:last-child > button {
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-panel-strong));
  color: var(--primary-light);
}

/* Detail, ranking, and list controls share the workspace surface and accent tokens. */
.shopSearchPage {
  --shop-control-bg: color-mix(in srgb, var(--surface-panel-hover) 94%, transparent);
  --shop-control-hover: color-mix(in srgb, var(--primary) 11%, var(--surface-panel-hover));
  --shop-table-head: color-mix(in srgb, var(--primary) 5%, var(--surface-panel-strong));
}

.shopSearchBar,
.shopSearchBar button,
.shopResultsHeader button,
.shopRankPagination button,
.shopRankQuickFilters button,
.shopDetailProfileActions button,
.shopDetailSectionTools button,
.shopDetailFilterLine button,
.shopDetailProductListHeader button,
.shopDetailProductFilterRow button,
.shopDetailAnchorNav,
.shopDetailAccountList article,
.shopDetailSimilarGrid article,
.shopDetailProductPagination,
.shopDetailPage .shopTrendTableWrap,
.shopRankingCalendarPanel,
.shopRankingDateButton,
.shopRankingCalendarHeader button,
.shopRankingCalendarGrid button,
.shopRankingMonthGrid button,
.shopDetailDateRangePicker .cuiDatePickerTrigger,
.shopSearchPage .shopAdvancedSelectGrid select,
.shopPageSizeSelector select,
.shopDetailProductPageSize select,
.shopCreatorMetricFilter button,
.shopDetailPage .shopTrendPagination button,
.shopDetailPage .shopTrendJump input,
.shopDetailPage .shopTrendMetricField select,
.shopDetailDateRange input,
.shopDetailNumberRange input,
.shopDetailFilterGroup select,
.shopRankPager .cuiPaginationJump input {
  border-color: var(--shop-line);
  background: var(--shop-control-bg);
  color: var(--shop-text);
  box-shadow: none;
}

.shopDetailTable th,
.shopDetailTable .cuiDataListTableHeadCell,
.shopDetailPage .shopTrendTable th,
.shopDetailPage .shopTrendTable thead tr {
  background: var(--shop-table-head);
}

.shopDetailTableWrap .cuiDataListBody,
.shopDetailPage .shopTrendTableWrap,
.shopDetailPage .shopTrendTable {
  background: var(--shop-panel);
}

.shopSearchBar:hover,
.shopDetailAnchorNav a:hover,
.shopCreatorMetricFilter button:hover,
.shopDetailPage .shopTrendPagination button:hover:not(:disabled),
.shopDetailDateRangePicker .cuiDatePickerTrigger:hover:not(:disabled),
.shopDetailDateRangePicker .cuiDatePickerTrigger:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--shop-line));
  background: var(--shop-control-hover);
  color: var(--primary-light);
}

.shopDetailCoverCard {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--shop-line));
  background:
    radial-gradient(circle at 79% 15%, color-mix(in srgb, var(--primary-light) 30%, transparent) 0 6%, transparent 7%),
    linear-gradient(125deg, color-mix(in srgb, var(--primary) 16%, var(--shop-panel)), var(--shop-panel));
}

.shopDetailCoverEyebrow {
  border-color: color-mix(in srgb, var(--primary-light) 38%, var(--shop-line));
  background: color-mix(in srgb, var(--shop-panel) 84%, transparent);
  color: var(--primary-light);
}

.shopDetailProfileTags span:nth-child(n + 2) {
  background: var(--shop-control-bg);
  color: var(--shop-muted);
}

.shopDetailHeroUpdate {
  border-color: color-mix(in srgb, var(--warning) 38%, var(--shop-line));
  background: color-mix(in srgb, var(--warning) 10%, var(--shop-panel));
}

.shopDetailPage .shopTrendPagination button.active,
.shopDetailRangeButtons button.active,
.shopDetailSectionTools button.active,
.shopDetailFilterLine button.active,
.shopDetailProductChipGroup button.active,
.shopDetailProductDatePresets button.active,
.shopCreatorMetricFilter button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 22%, transparent);
}

[data-theme='dark'] .shopSearchPage .shopDetailCoverEyebrow,
[data-theme='dark'] .shopSearchPage .shopDetailAnchorNav,
[data-theme='dark'] .shopSearchPage .shopDetailAccountList article,
[data-theme='dark'] .shopSearchPage .shopDetailSimilarGrid article {
  border-color: color-mix(in srgb, var(--primary-light) 34%, var(--shop-line));
  background: color-mix(in srgb, var(--surface-panel-strong) 94%, transparent);
}

/* Shop detail summary: rating, compact cover, then profile metadata. */
.shopDetailPage .shopDetailHeroGrid {
  grid-template-columns: minmax(340px, 0.8fr) minmax(470px, 1.05fr) minmax(560px, 1.45fr);
  grid-template-areas: 'rating cover profile';
  gap: 20px;
  align-items: stretch;
}

.shopDetailPage .shopDetailCoverCard {
  grid-area: cover;
  min-height: 0;
  aspect-ratio: 20 / 17;
  align-self: stretch;
  border-color: color-mix(in srgb, var(--primary) 20%, var(--shop-line));
  border-radius: 16px;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--shop-text) 7%, transparent);
}

.shopDetailPage .shopDetailProfileCard--summary {
  grid-area: profile;
  align-content: stretch;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--shop-line);
  border-radius: 16px;
  background: var(--shop-panel);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--shop-text) 5%, transparent);
}

.shopDetailPage .shopDetailProfileCard--summary .shopDetailProfileTop,
.shopDetailPage .shopDetailProfileCard--summary .shopDetailProfileActions,
.shopDetailPage .shopDetailProfileTags {
  padding-inline: 0;
}

.shopDetailPage .shopDetailProfileCard--summary .shopDetailProfileIdentity h1 {
  font-size: clamp(26px, 2.1vw, 36px);
  font-weight: 860;
}

.shopDetailPage .shopDetailProfileFacts > div {
  min-height: 74px;
  padding: 13px 18px 12px 0;
}

.shopDetailPage .shopDetailProfileFacts > div:nth-child(2n) {
  padding-left: 20px;
}

.shopDetailPage .shopDetailHeroUpdate {
  min-height: 48px;
  margin: auto 0 0;
  padding: 8px 10px 8px 14px;
  border-color: color-mix(in srgb, var(--shop-line) 86%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--shop-panel) 86%, var(--shop-control-bg));
}

.shopDetailPage .shopDetailHeroUpdate span::before {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.12);
  content: '';
}

.shopDetailPage .shopDetailHeroUpdate span .compassIcon {
  display: none;
}

.shopDetailPage .shopDetailHeroUpdate strong {
  max-width: 58%;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--shop-line) 90%, transparent);
  border-radius: 8px;
  background: var(--shop-panel);
  color: var(--shop-text);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
}

.shopDetailPage .shopDetailRatingCard {
  grid-area: rating;
  display: flex;
  flex-direction: column;
  align-content: initial;
  gap: 14px;
  padding: 22px;
  border-color: color-mix(in srgb, var(--primary) 16%, var(--shop-line));
  border-radius: 16px;
  background: var(--shop-panel);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--shop-text) 5%, transparent);
}

.shopDetailPage .shopDetailRatingCard .shopRatingMain {
  display: block;
}

.shopDetailPage .shopDetailRatingCard .shopRatingMain > strong {
  display: block;
  margin-top: 10px;
  font-size: clamp(30px, 2.2vw, 38px);
}

.shopDetailPage .shopDetailRatingCard .shopStarRating {
  display: block;
  margin-top: 10px;
  font-size: 20px;
}

.shopDetailPage .shopDetailRatingStats > div {
  min-height: 72px;
  padding-block: 13px;
}

.shopDetailFollowerStat {
  min-height: 60px;
  margin-top: auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 13px;
  background: var(--shop-control-bg);
}

.shopDetailFollowerStat > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--shop-muted);
  font-size: 13px;
  font-weight: 760;
}

.shopDetailFollowerStat > span .compassIcon {
  color: var(--primary-light);
}

.shopDetailFollowerStat > strong {
  color: var(--shop-text);
  font-size: 22px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 1400px) {
  .shopDetailPage .shopDetailHeroGrid {
    grid-template-columns: minmax(300px, 0.85fr) minmax(420px, 1.15fr);
    grid-template-areas:
      'rating rating'
      'cover profile';
  }

  .shopDetailPage .shopDetailRatingCard {
    grid-column: auto;
  }

  .shopDetailPage .shopDetailRatingStats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .shopDetailPage .shopDetailRatingStats > div,
  .shopDetailPage .shopDetailRatingStats > div:nth-child(odd) {
    min-height: 58px;
    padding: 10px 14px;
    border-bottom: 0;
    border-right: 1px solid var(--shop-line);
  }

  .shopDetailPage .shopDetailRatingStats > div:last-child {
    border-right: 0;
  }

  .shopDetailFollowerStat {
    margin-top: 0;
  }
}

@media (max-width: 900px) {
  .shopDetailPage .shopDetailHeroGrid {
    grid-template-columns: 1fr;
    grid-template-areas:
      'rating'
      'cover'
      'profile';
  }

  .shopDetailPage .shopDetailCoverCard {
    width: min(100%, 470px);
    justify-self: center;
  }

  .shopDetailPage .shopDetailProfileCard--summary,
  .shopDetailPage .shopDetailRatingCard {
    padding: 20px;
  }

  .shopDetailPage .shopDetailRatingStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shopDetailPage .shopDetailRatingStats > div,
  .shopDetailPage .shopDetailRatingStats > div:nth-child(odd) {
    min-height: 70px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--shop-line);
  }

  .shopDetailPage .shopDetailRatingStats > div:nth-child(odd) {
    padding-left: 0;
  }

  .shopDetailPage .shopDetailRatingStats > div:nth-child(even) {
    padding-right: 0;
    border-right: 0;
  }

  .shopDetailPage .shopDetailRatingStats > div:nth-child(n + 3) {
    border-bottom: 0;
  }

  .shopDetailPage .shopDetailHeroUpdate strong {
    max-width: 62%;
  }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/competitors.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Recovered member module CSS.
 * Owner: competitors / zsyq.
 * Source: origin/feat/web-shop-competitor-zsyq.
 * Generated by selector ownership; do not mix other module prefixes here.
 */

.competitorHeroPanel {
  background:
    linear-gradient(135deg, var(--primary-soft), rgba(6, 182, 212, 0.08)), var(--surface-panel);
}

.competitorForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.competitorForm.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.competitorFormFeedback {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.competitorMonitorGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.competitorAvatar {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

.competitorEventList,
.competitorRuleList {
  display: grid;
  gap: 8px;
}

.competitorEventDataList.cuiDataList {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.competitorEventDataList .cuiDataListBody {
  overflow-x: auto;
}

.competitorEventRow {
  min-height: 42px;
  display: grid;
  grid-template-columns: 1fr 1.4fr 96px 118px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.competitorEventRow.head {
  min-height: 30px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.competitorEventRow:last-child,
.competitorEventList .cuiDataListTableRow:last-child .cuiDataListTableCell {
  border-bottom: 0;
}

.competitorEventRow strong,
.competitorEventRow .cuiDataListTableCell strong {
  color: var(--text-1);
}

.competitorEventRow em,
.competitorEventRow .cuiDataListTableCell em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.competitorRuleList article {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.competitorRuleList strong,
.competitorRuleList em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitorRuleList strong {
  color: var(--text-1);
}

.competitorRuleList em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.competitorForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.competitorForm.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.competitorFormFeedback {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.competitorMonitorGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.competitorAvatar {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

.competitorEventList,
.competitorRuleList {
  display: grid;
  gap: 8px;
}

.competitorEventRow {
  min-height: 42px;
  display: grid;
  grid-template-columns: 1fr 1.4fr 96px 118px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.competitorEventRow.head {
  min-height: 30px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.competitorEventRow:last-child {
  border-bottom: 0;
}

.competitorEventRow strong {
  color: var(--text-1);
}

.competitorEventRow em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.competitorRuleList article {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.competitorRuleList strong,
.competitorRuleList em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitorRuleList strong {
  color: var(--text-1);
}

.competitorRuleList em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.radarPage {
  gap: 18px;
}

.radarTopbar {
  display: grid;
  grid-template-columns: minmax(260px, auto) minmax(320px, 640px) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(5, 7, 20, 0.58);
  padding: 12px 16px;
}

.radarTopbar strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarSearch {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-3);
  padding: 0 12px;
}

.radarSearch input {
  width: 100%;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  outline: none;
}

.radarSearch input::placeholder {
  color: var(--text-3);
}

.radarModuleTabs,
.radarHeroActions,
.radarPanelActions,
.radarFormActions,
.radarModalActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.radarModuleTabs button,
.radarButton,
.radarTableActions button,
.radarShopFoot button,
.radarModalHead button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.radarModuleTabs button.active,
.radarButton.primary {
  border-color: rgba(34, 211, 197, 0.38);
  background: linear-gradient(135deg, #22d3ee, #2dd4bf);
  color: #041016;
}

.radarButton.soft,
.radarModuleTabs button:hover,
.radarTableActions button:hover,
.radarShopFoot button:hover {
  border-color: rgba(6, 182, 212, 0.3);
  background: rgba(6, 182, 212, 0.1);
  color: var(--text-1);
}

.radarButton.ghost {
  background: transparent;
  color: var(--text-2);
}

.radarHero,
.radarPanel {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.radarHero {
  position: relative;
  min-height: 164px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px auto;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  padding: 26px;
}

.radarHero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(6, 182, 212, 0.14), transparent 46%),
    radial-gradient(circle at 86% 28%, rgba(16, 185, 129, 0.22), transparent 28%);
  pointer-events: none;
}

.radarHero > * {
  position: relative;
  z-index: 1;
}

.radarHero h1 {
  margin: 12px 0 10px;
  color: var(--text-1);
  font-size: 34px;
  line-height: 1.08;
}

.radarHero p,
.radarPanel p,
.radarMetricCard em,
.radarDetailLine span,
.radarShopHead em,
.radarShopFoot span,
.radarRankList em,
.radarAlertList p,
.radarRuleList em,
.radarRuleList span,
.radarSelectedList em,
.radarTemplateList em,
.radarReportBody p,
.radarModal p {
  color: var(--text-2);
  line-height: 1.65;
}

.radarEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #67e8f9;
  font-size: 12px;
  font-weight: 950;
}

.radarEyebrow i,
.radarMetricDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22d3ee;
}

.radarHeroContext {
  min-width: 0;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(5, 7, 20, 0.36);
  padding: 14px;
}

.radarHeroContext span,
.radarHeroContext em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.radarHeroContext strong {
  color: var(--text-1);
}

.radarMetricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.radarMetricGrid.compact {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.radarMetricCard {
  position: relative;
  min-width: 0;
  min-height: 96px;
  display: grid;
  align-content: center;
  gap: 6px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 14px;
}

.radarMetricCard span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 850;
}

.radarMetricCard strong {
  color: var(--text-1);
  font-size: 26px;
  line-height: 1;
}

.radarMetricCard.interactive {
  width: 100%;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.radarMetricCard.interactive:hover {
  border-color: var(--primary-border-strong);
  transform: translateY(-1px);
}

.radarMetricCard.interactive:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.radarMetricCard em {
  min-width: 0;
  font-size: 12px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarMetricDot {
  position: absolute;
  top: 14px;
  right: 14px;
}

.radarMetricDot.green {
  background: var(--success);
}

.radarMetricDot.amber {
  background: var(--warning);
}

.radarMetricDot.red {
  background: var(--danger);
}

.radarMetricDot.purple {
  background: var(--primary-light);
}

.radarPanel {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.radarPanelHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.radarPanelHeader h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 21px;
  line-height: 1.2;
}

.radarPanelHeader p {
  margin: 6px 0 0;
  font-size: 13px;
}

.radarCoreSignals {
  grid-template-columns: minmax(260px, 0.75fr) repeat(3, minmax(0, 1fr));
  align-items: stretch;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.16), transparent 40%), var(--surface-panel);
}

.radarCoreIntro h2 {
  margin: 0 0 8px;
  color: var(--text-1);
  font-size: 24px;
}

.radarCoreSignals article {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 14px;
}

.radarModuleCardGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.radarModuleCardGrid article,
.radarSwotMini,
.radarSwotGrid article,
.radarTemplateList button,
.radarExportGrid span {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 14px;
}

.radarCardTitle,
.radarShopHead,
.radarShopFoot,
.radarAlertList article > div:first-child,
.radarSelectedList div,
.radarTemplateList button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.radarModuleCardGrid h3,
.radarSwotMini h3,
.radarTemplateList h3,
.radarReportBody h3,
.radarModal h2 {
  margin: 0;
  color: var(--text-1);
}

.radarModuleCardGrid ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 0 0 16px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
}

.radarModuleCardGrid li::marker {
  color: #2dd4bf;
}

.radarMonitorLayout,
.radarTwoColumn {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
  gap: 18px;
}

.radarTwoColumn.wideRight {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.8fr);
}

.radarSideStack {
  display: grid;
  align-content: start;
  gap: 18px;
}

.radarSegmented,
.radarCountPicker {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  padding: 4px;
}

.radarSegmented button,
.radarCountPicker button {
  min-width: 34px;
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.radarSegmented button.active,
.radarCountPicker button.active {
  background: #2dd4bf;
  color: #041016;
}

.radarTrendChart {
  height: 198px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.12), rgba(45, 212, 191, 0.04)),
    rgba(255, 255, 255, 0.025);
  padding: 18px;
}

.radarTrendBar {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.radarTrendBar strong,
.radarTrendBar em {
  color: var(--text-1);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.radarTrendBar em {
  color: var(--text-2);
}

.radarTrendBar span {
  width: 100%;
  max-width: 78px;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, #2dd4bf, #3b82f6);
}

.radarShopList,
.radarAlertList,
.radarRuleList,
.radarRankList,
.radarSelectedList,
.radarTemplateList,
.radarReportBody,
.radarStack {
  display: grid;
  gap: 10px;
}

.radarShopList article {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 14px;
}

.radarShopList article.paused {
  opacity: 0.68;
}

.radarAvatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #22d3ee, #2dd4bf);
  color: #041016;
  font-weight: 950;
}

.radarShopHead > div,
.radarShopFoot > span,
.radarSelectedList span,
.radarTemplateList span {
  min-width: 0;
}

.radarShopHead strong,
.radarRankList strong,
.radarAlertList strong,
.radarRuleList strong,
.radarSelectedList strong,
.radarTemplateList strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarShopHead em,
.radarRankList em,
.radarSelectedList em,
.radarTemplateList em {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarShopMetrics,
.radarTaskMetrics,
.radarSwotGrid,
.radarModalGrid,
.radarExportGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.radarShopMetrics span,
.radarTaskMetrics span {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 10px;
}

.radarShopMetrics em,
.radarTaskMetrics em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.radarShopMetrics strong,
.radarTaskMetrics strong {
  color: var(--text-1);
  font-size: 18px;
}

.radarShopFoot {
  align-items: flex-start;
}

.radarShopFoot > div,
.radarTableActions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.radarRankList button,
.radarRankList .cuiDataListActionItem {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.radarRankList button.active,
.radarRankList button:hover,
.radarRankList .cuiDataListActionItem.active,
.radarRankList .cuiDataListActionItem:hover {
  border-color: rgba(45, 212, 191, 0.42);
  background: rgba(45, 212, 191, 0.08);
}

.radarRankNo {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(14, 165, 233, 0.13);
  color: #93c5fd;
  font-weight: 950;
}

.radarTaskCard {
  background: #081120;
}

.radarTaskMetrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.radarDetailLine {
  min-width: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid var(--row-line);
  padding: 10px 0;
}

.radarDetailLine.wide {
  grid-column: 1 / -1;
}

.radarDetailLine strong {
  color: var(--text-1);
}

.radarCompareSummary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.4fr);
  gap: 16px;
}

.radarTableWrap {
  min-width: 0;
  overflow-x: auto;
}

.radarTable {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  color: var(--text-2);
  font-size: 13px;
}

.radarDataListTable.cuiDataList {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.radarDataListTable .cuiDataListBody {
  border: 0;
  background: transparent;
}

.radarDataListTable .cuiDataListBodyInner {
  min-width: 0;
}

.radarDataListTable .radarTable {
  display: grid;
}

.radarTable th,
.radarTable td,
.radarTable .cuiDataListTableHeadCell,
.radarTable .cuiDataListTableCell {
  border-bottom: 1px solid var(--row-line);
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
}

.radarTable th,
.radarTable .cuiDataListTableHeadCell {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.radarTable td:first-child,
.radarTable .cuiDataListTableCell:first-child {
  color: var(--text-1);
  font-weight: 850;
}

.radarTableEmpty {
  min-height: 96px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-3);
  font-size: 13px;
  font-weight: 850;
}

.radarField {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.radarField.wide {
  grid-column: 1 / -1;
}

.radarField span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

.radarField input,
.radarField select,
.radarField textarea {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-1);
  font: inherit;
  outline: none;
  padding: 9px 11px;
}

.radarField textarea {
  min-height: 92px;
  resize: vertical;
}

.radarField input:focus,
.radarField select:focus,
.radarField textarea:focus {
  border-color: rgba(45, 212, 191, 0.48);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.13);
}

.radarCompareSlotGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.radarFilterBar {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 240px)) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.radarCategoryBar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radarCategoryBar button {
  min-height: 32px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-2);
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.radarCategoryBar button.active,
.radarCategoryBar button:hover {
  border-color: rgba(45, 212, 191, 0.42);
  background: rgba(45, 212, 191, 0.12);
  color: var(--text-1);
}

.radarSelectedList > div {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 11px;
}

.radarTemplateList button {
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.radarAlertList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radarAlertList article,
.radarRuleList article,
.radarRuleList .cuiDataListItem {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 14px;
}

.radarAlertMeta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text-3);
  font-size: 12px;
}

.radarReportPreview {
  padding: 0;
  overflow: hidden;
}

.radarReportCover {
  display: grid;
  gap: 14px;
  border-bottom: 1px solid var(--line-dark);
  background:
    linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(16, 185, 129, 0.1)),
    var(--surface-panel-hover);
  padding: 28px;
}

.radarReportCover span {
  color: #67e8f9;
  font-size: 12px;
  font-weight: 950;
}

.radarReportCover h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 30px;
}

.radarReportCover > div {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.radarReportBody {
  padding: 22px;
}

.radarModalBackdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 7, 20, 0.76);
  padding: 24px;
}

.radarModal {
  width: min(760px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  display: grid;
  gap: 14px;
  border: 1px solid var(--line-dark-strong);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: var(--shadow-dark);
  padding: 20px;
}

.radarModalHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.radarModalHead span {
  color: #67e8f9;
  font-size: 12px;
  font-weight: 950;
}

.radarModalGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radarExportGrid span {
  color: var(--text-2);
}

.radarToast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  max-width: 360px;
  box-shadow: var(--shadow-dark);
}

@media (max-width: 1280px) {
  .radarTopbar,
  .radarHero,
  .radarMonitorLayout,
  .radarTwoColumn,
  .radarTwoColumn.wideRight,
  .radarCompareSummary {
    grid-template-columns: 1fr;
  }

  .radarHeroContext {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .radarMetricGrid,
  .radarMetricGrid.compact,
  .radarModuleCardGrid,
  .radarCoreSignals,
  .radarAlertList,
  .radarShopMetrics,
  .radarTaskMetrics,
  .radarModalGrid,
  .radarExportGrid,
  .radarCompareSlotGrid {
    grid-template-columns: 1fr;
  }

  .radarTopbar,
  .radarHero,
  .radarPanel {
    padding: 14px;
  }
}

.radarPage {
  --radar-blue: #1677ff;
  --radar-blue-strong: #0f68e8;
  --radar-blue-soft: #eaf3ff;
  --radar-orange-strong: #f97316;
  --radar-panel: rgba(255, 255, 255, 0.96);
  --radar-panel-soft: rgba(248, 251, 255, 0.92);
  --radar-line: #dbe7f3;
  --radar-line-soft: #edf3fa;
  --radar-text: #0f1b33;
  --radar-body: #41516a;
  --radar-muted: #7b8aa3;
  --radar-shadow: 0 16px 44px rgba(33, 72, 128, 0.08);
  gap: 14px;
  color: var(--radar-text);
}

.radarPage .statusPill {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border-color: var(--radar-line);
  background: #f5f8fc;
  color: var(--radar-body);
  font-size: 11px;
  line-height: 1;
}

.radarPage .statusPill.cyan,
.radarPage .statusPill.purple {
  border-color: rgba(22, 119, 255, 0.2);
  background: var(--radar-blue-soft);
  color: var(--radar-blue);
}

.radarPage .statusPill.green {
  border-color: rgba(16, 185, 129, 0.22);
  background: #eafaf3;
  color: #059669;
}

.radarPage .statusPill.amber {
  border-color: rgba(245, 158, 11, 0.22);
  background: #fff4e4;
  color: #d97706;
}

.radarPage .statusPill.red {
  border-color: rgba(239, 68, 68, 0.2);
  background: #fff0f1;
  color: #dc2626;
}

.radarTopbar {
  grid-template-columns: minmax(240px, auto) minmax(340px, 0.9fr) auto;
  border-color: var(--radar-line);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 28px rgba(33, 72, 128, 0.05);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
}

.radarTopbar strong,
.radarHero h1,
.radarPanelHeader h2,
.radarModuleCardGrid h3,
.radarSwotMini h3,
.radarTemplateList h3,
.radarReportBody h3,
.radarModal h2,
.radarShopHead strong,
.radarRankList strong,
.radarAlertList strong,
.radarRuleList strong,
.radarSelectedList strong,
.radarTemplateList strong,
.radarTable td:first-child,
.radarDetailLine strong {
  color: var(--radar-text);
}

.radarSearch,
.radarSegmented,
.radarCountPicker,
.radarField input,
.radarField select,
.radarField textarea {
  border-color: var(--radar-line);
  background: #f6f9fd;
  color: var(--radar-text);
}

.radarSearch input {
  color: var(--radar-text);
}

.radarSearch input::placeholder,
.radarHero p,
.radarPanel p,
.radarMetricCard em,
.radarDetailLine span,
.radarShopHead em,
.radarShopFoot span,
.radarRankList em,
.radarAlertList p,
.radarRuleList em,
.radarRuleList span,
.radarSelectedList em,
.radarTemplateList em,
.radarReportBody p,
.radarModal p {
  color: var(--radar-body);
}

.radarModuleTabs button,
.radarButton,
.radarTableActions button,
.radarShopFoot button,
.radarModalHead button {
  border-color: var(--radar-line);
  background: #ffffff;
  box-shadow: 0 5px 14px rgba(33, 72, 128, 0.05);
  color: var(--radar-body);
}

.radarModuleTabs button.active,
.radarButton.primary,
.radarSegmented button.active,
.radarCountPicker button.active {
  border-color: var(--radar-blue);
  background: var(--radar-blue);
  box-shadow: 0 12px 24px rgba(22, 119, 255, 0.2);
  color: #ffffff;
}

.radarButton.soft,
.radarModuleTabs button:hover,
.radarTableActions button:hover,
.radarShopFoot button:hover {
  border-color: rgba(22, 119, 255, 0.24);
  background: var(--radar-blue-soft);
  color: var(--radar-blue);
}

.radarButton.ghost {
  background: #ffffff;
  color: var(--radar-body);
}

.radarHero {
  min-height: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  border: 0;
  background: transparent;
  padding: 4px 2px 8px;
}

.radarHero::before {
  display: none;
}

.radarHeroContext {
  display: none;
}

.radarHero h1 {
  margin: 8px 0 8px;
  font-size: 32px;
  letter-spacing: 0;
}

.radarEyebrow,
.radarModalHead span,
.radarReportCover span {
  color: var(--radar-blue);
}

.radarEyebrow i {
  background: var(--radar-blue);
}

.radarPanel,
.radarMetricCard,
.radarModuleCardGrid article,
.radarSwotMini,
.radarSwotGrid article,
.radarTemplateList button,
.radarExportGrid span,
.radarShopList article,
.radarAlertList article,
.radarRuleList article,
.radarRuleList .cuiDataListItem,
.radarSelectedList > div {
  border-color: var(--radar-line);
  background: var(--radar-panel);
  box-shadow: var(--radar-shadow);
}

.radarPanel {
  gap: 15px;
}

.radarMetricCard {
  min-height: 116px;
  align-content: center;
  padding: 18px 82px 18px 20px;
}

.radarMetricCard span,
.radarPanelHeader p,
.radarField span,
.radarTable th,
.radarShopMetrics em,
.radarTaskMetrics em,
.radarTrendBar em {
  color: var(--radar-muted);
}

.radarMetricCard strong {
  color: var(--radar-text);
  font-size: 28px;
}

.radarMetricDot {
  top: 50%;
  right: 20px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--radar-blue-soft);
  transform: translateY(-50%);
}

.radarMetricDot.green {
  background: #dff8ee;
}

.radarMetricDot.amber {
  background: #fff0dc;
}

.radarMetricDot.red {
  background: #ffe4e7;
}

.radarMetricDot.purple {
  background: #efe9ff;
}

.radarMonitorLayout,
.radarTwoColumn {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.38fr);
}

.radarTwoColumn.wideRight {
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.5fr);
}

.radarTrendChart {
  border-color: var(--radar-line);
  background:
    repeating-linear-gradient(to top, transparent 0, transparent 39px, var(--radar-line-soft) 40px),
    #ffffff;
}

.radarTrendBar span {
  background: linear-gradient(180deg, #1677ff, #7db7ff);
}

.radarTrendBar strong {
  color: var(--radar-text);
}

.radarRankList button,
.radarRankList .cuiDataListActionItem {
  border-color: var(--radar-line);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(33, 72, 128, 0.04);
}

.radarRankList button.active,
.radarRankList button:hover,
.radarRankList .cuiDataListActionItem.active,
.radarRankList .cuiDataListActionItem:hover {
  border-color: rgba(22, 119, 255, 0.3);
  background: var(--radar-blue-soft);
}

.radarRankNo {
  background: #eff5ff;
  color: var(--radar-blue);
}

.radarTaskCard {
  background: var(--radar-panel);
}

.radarShopMetrics span,
.radarTaskMetrics span {
  border-color: var(--radar-line-soft);
  background: var(--radar-panel-soft);
}

.radarShopMetrics strong,
.radarTaskMetrics strong {
  color: var(--radar-text);
}

.radarAvatar {
  background: var(--radar-blue);
  color: #ffffff;
}

.radarTable {
  color: var(--radar-body);
}

.radarTable th,
.radarTable td {
  border-bottom-color: var(--radar-line-soft);
}

.radarTable tbody tr:hover {
  background: #f8fbff;
}

.radarLineChart {
  min-height: 230px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 18px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background:
    repeating-linear-gradient(to top, transparent 0, transparent 39px, var(--radar-line-soft) 40px),
    #ffffff;
  padding: 24px 18px 16px;
}

.radarLinePoint {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 5px;
}

.radarLinePoint span {
  min-height: 18px;
  border-radius: 999px 999px 6px 6px;
}

.radarLinePoint .critical {
  background: #ff4d4f;
}

.radarLinePoint .warning {
  background: #ff9f1a;
}

.radarLinePoint .info {
  background: #1677ff;
}

.radarLinePoint em {
  grid-column: 1 / -1;
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.radarDistribution,
.radarReportInsightGrid {
  display: grid;
  grid-template-columns: minmax(170px, 0.42fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.radarDonut {
  width: min(180px, 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle, #ffffff 0 43%, transparent 44%),
    conic-gradient(
      #1677ff 0 34%,
      #ff9f1a 34% 59%,
      #7bb8ff 59% 76%,
      #9f7aea 76% 92%,
      #10b981 92% 100%
    );
  justify-self: center;
  box-shadow: inset 0 0 0 1px var(--radar-line);
}

.radarDonut.report {
  background:
    radial-gradient(circle, #ffffff 0 43%, transparent 44%),
    conic-gradient(#1677ff 0 50%, #ff9f1a 50% 75%, #7bb8ff 75% 91%, #10b981 91% 100%);
}

.radarDonut strong,
.radarDonut span {
  grid-area: 1 / 1;
  color: var(--radar-text);
}

.radarDonut strong {
  margin-top: -16px;
  font-size: 30px;
  font-weight: 950;
}

.radarDonut span {
  margin-top: 36px;
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 850;
}

.radarDistributionList,
.radarSourceChecklist,
.radarReportBullets {
  display: grid;
  gap: 10px;
}

.radarDistributionList span,
.radarSourceChecklist label,
.radarHighlightRow {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.radarDistributionList i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--radar-blue);
}

.radarDistributionList i.orange {
  background: #ff9f1a;
}

.radarDistributionList i.cyan {
  background: #7bb8ff;
}

.radarDistributionList i.purple {
  background: #9f7aea;
}

.radarDistributionList i.green {
  background: #10b981;
}

.radarDistributionList em,
.radarSourceChecklist span,
.radarReportBullets span,
.radarHighlightRow strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-body);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarDistributionList strong {
  color: var(--radar-text);
  font-size: 13px;
}

.radarSourceChecklist {
  grid-column: 1 / -1;
}

.radarSourceChecklist label {
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  padding: 11px;
}

.radarSourceChecklist input {
  width: 16px;
  height: 16px;
}

.radarSourceChecklist em {
  border-radius: 999px;
  background: #eff5ff;
  color: var(--radar-blue);
  padding: 3px 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.radarReportPreviewCard {
  align-content: start;
}

.radarReportCoverMini {
  min-height: 210px;
  display: grid;
  align-content: center;
  gap: 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(22, 119, 255, 0.14), rgba(125, 183, 255, 0.45)), #eaf3ff;
  overflow: hidden;
  padding: 28px;
}

.radarReportCoverMini span,
.radarReportCoverMini em {
  color: var(--radar-blue);
  font-style: normal;
  font-weight: 900;
}

.radarReportCoverMini strong {
  color: var(--radar-text);
  font-size: 34px;
  line-height: 1.05;
}

.radarReportBullets {
  border: 1px solid var(--radar-line-soft);
  border-radius: 8px;
  background: #f8fbff;
  padding: 14px;
}

.radarReportBullets strong {
  color: var(--radar-text);
}

.radarReportInsightGrid {
  grid-template-columns: minmax(170px, 0.35fr) minmax(220px, 0.45fr) minmax(240px, 0.55fr);
}

.radarHighlightRow {
  grid-template-columns: 26px minmax(0, 1fr);
}

.radarHighlightRow span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #15233d;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

.radarReportCover {
  border-bottom-color: var(--radar-line);
  background: linear-gradient(135deg, rgba(22, 119, 255, 0.16), rgba(125, 183, 255, 0.42)), #edf6ff;
}

.radarReportCover h2 {
  color: var(--radar-text);
}

.radarModalBackdrop {
  background: rgba(15, 27, 51, 0.44);
}

.radarModal {
  border-color: var(--radar-line);
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 27, 51, 0.2);
}

@media (max-width: 1280px) {
  .radarMonitorLayout,
  .radarTwoColumn,
  .radarTwoColumn.wideRight,
  .radarReportInsightGrid,
  .radarDistribution {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .radarTopbar,
  .radarHero {
    grid-template-columns: 1fr;
  }

  .radarMetricCard {
    padding-right: 74px;
  }
}

.radarPage {
  max-width: none;
}

.radarTitleRow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.radarTitleRow h1 {
  margin: 0;
  color: var(--radar-text);
  font-size: 30px;
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: 0;
}

.radarTitleRow span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(22, 119, 255, 0.24);
  border-radius: 999px;
  background: #eaf3ff;
  color: #1677ff;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 950;
}

.radarHero {
  align-items: end;
}

.radarHero h1 {
  margin: 0;
}

.radarHero p {
  max-width: 880px;
  margin: 8px 0 0;
  color: #6d7d96;
  font-size: 14px;
}

.radarHeroActions,
.radarPanelActions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.radarPanel {
  border-radius: 14px;
  padding: 18px;
}

.radarPanelHeader {
  align-items: center;
}

.radarPanelHeader h2 {
  font-size: 18px;
  font-weight: 950;
}

.radarPanelHeader p {
  margin-top: 5px;
}

.radarMetricGrid {
  gap: 14px;
}

.radarMetricCard {
  min-height: 112px;
  border-radius: 14px;
  padding: 18px 82px 18px 20px;
}

.radarMetricCard strong {
  font-size: 29px;
  line-height: 1.02;
}

.radarMetricDot {
  display: grid;
  place-items: center;
  color: #1677ff;
}

.radarMetricDot.green {
  color: #10a76f;
}

.radarMetricDot.amber {
  color: #f97316;
}

.radarMetricDot.red {
  color: #ef4444;
}

.radarMetricDot.purple {
  color: #7c3aed;
}

.radarMonitorLayout {
  grid-template-columns: 1fr;
  align-items: start;
}

.radarMonitorMainStack {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.radarTwoColumn.wideRight {
  grid-template-columns: minmax(0, 1fr) 390px;
  align-items: start;
}

.radarTwoColumn.wideRight.radarCompareResultLayout {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: stretch;
}

.radarTwoColumn.wideRight.radarCompareResultLayout > .radarCompareCorePanel {
  min-height: 626px;
}

.radarCompareResultRail {
  min-height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 10px;
}

.radarCompareResultRail > .radarPanel {
  min-height: 0;
}

.radarCompareResultConclusionPanel {
  gap: 12px;
  padding: 16px;
}

.radarCompareResultConclusionPanel .radarSwotGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.radarCompareResultConclusionPanel .radarSwotGrid article {
  min-height: 142px;
  gap: 8px;
  padding: 12px;
}

.radarCompareResultConclusionPanel .radarSwotGrid strong {
  font-size: 14px;
  line-height: 1.25;
}

.radarCompareResultConclusionPanel .radarSwotGrid span {
  font-size: 12px;
  line-height: 1.45;
}

.radarCompareResultDecisionPanel {
  align-content: start;
  gap: 14px;
  padding: 16px;
}

.radarCompareResultDecisionPanel .radarBullets {
  gap: 8px;
}

.radarCompareResultDecisionPanel .radarButton {
  align-self: end;
  margin-top: auto;
}

.radarMonitorBoard {
  min-height: 432px;
}

.radarTrendChart {
  height: 224px;
  padding: 18px 22px 14px;
}

.radarTrendBar {
  align-content: end;
}

.radarTrendBar span {
  max-width: 44px;
  border-radius: 8px 8px 3px 3px;
  box-shadow: 0 10px 20px rgba(22, 119, 255, 0.18);
}

.radarRankList {
  gap: 4px;
}

.radarRankList button,
.radarRankList .cuiDataListActionItem {
  min-height: 58px;
  grid-template-columns: 22px 36px minmax(0, 1fr) auto 15px;
  gap: 10px;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
  padding: 9px 0;
}

.radarRankList button:last-child,
.radarRankList .cuiDataListActionItem:last-child {
  border-bottom: 0;
}

.radarRankNo {
  width: auto;
  height: auto;
  background: transparent;
  color: #0f1b33;
  font-size: 18px;
}

.radarFocusLogo,
.radarAvatar.small,
.radarOwner span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #0f1b33;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

.radarFocusCopy {
  min-width: 0;
}

.radarQuickList {
  display: grid;
  gap: 12px;
}

.radarQuickEntry {
  min-width: 0;
  min-height: 74px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--radar-text);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(33, 72, 128, 0.04);
}

.radarQuickEntry:hover {
  border-color: rgba(22, 119, 255, 0.28);
  background: #f7fbff;
}

.radarQuickEntry > .radarQuickEntryIcon {
  grid-row: 1 / span 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eaf3ff;
  color: #1677ff;
}

.radarQuickEntry.red > .radarQuickEntryIcon {
  background: #fff0f1;
  color: #ef4444;
}

.radarQuickEntry.cyan > .radarQuickEntryIcon {
  background: #eaf8ff;
  color: #0284c7;
}

.radarQuickEntry strong,
.radarQuickEntry em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarQuickEntry em {
  color: var(--radar-body);
  font-size: 12px;
  font-style: normal;
}

.radarOwnStorePanel {
  overflow: hidden;
}

.radarOwnStoreCard {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1fr);
  gap: 14px;
  align-items: stretch;
}

.radarOwnStoreIdentity,
.radarOwnStoreInsight,
.radarOwnStoreMetrics span {
  min-width: 0;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(33, 72, 128, 0.04);
}

.radarOwnStoreIdentity {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.radarOwnStoreLogo {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #1677ff, #7db7ff);
  color: #ffffff;
  font-size: 20px;
  font-weight: 950;
  box-shadow: 0 12px 26px rgba(22, 119, 255, 0.22);
}

.radarOwnStoreIdentity strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 18px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarOwnStoreIdentity em {
  display: block;
  margin-top: 4px;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.radarOwnStoreMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.radarOwnStoreMetrics span {
  display: grid;
  gap: 6px;
  padding: 13px;
}

.radarOwnStoreMetrics em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.radarOwnStoreMetrics strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 18px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarOwnStoreInsight {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  border-color: rgba(22, 119, 255, 0.18);
  background: #f2f7ff;
  padding: 14px;
}

.radarOwnStoreInsight strong {
  color: var(--radar-text);
  font-size: 14px;
}

.radarOwnStoreInsight p {
  margin: 0;
  color: var(--radar-body);
  font-size: 13px;
}

.radarOwnStoreWorkspaceGrid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  align-items: stretch;
}

.radarOwnStoreLeft,
.radarOwnStoreManager,
.radarOwnStoreManagerHeader,
.radarOwnStoreManagerActions,
.radarOwnStoreSearch,
.radarOwnStoreTableWrap {
  min-width: 0;
}

.radarOwnStoreLeft {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
}

.radarOwnStoreManager {
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(33, 72, 128, 0.04);
}

.radarOwnStoreSectionTitle,
.radarOwnStoreManagerHeader,
.radarOwnStoreManagerActions,
.radarOwnStoreSearch {
  display: flex;
  align-items: center;
  min-width: 0;
}

.radarOwnStoreSectionTitle,
.radarOwnStoreManagerHeader {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.radarOwnStoreSectionTitle strong {
  color: var(--radar-text);
  font-size: 15px;
  font-weight: 950;
}

.radarOwnStoreSectionTitle em {
  display: block;
  margin-top: 3px;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.radarOwnStoreIdentity.compact {
  margin-bottom: 12px;
  box-shadow: none;
}

.radarOwnStoreOverviewIdentity {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(22, 119, 255, 0.12);
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px;
}

.radarOwnStoreOverviewIdentity > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #1677ff, #ff9f1c);
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
}

.radarOwnStoreOverviewIdentity strong,
.radarOwnStoreOverviewIdentity em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radarOwnStoreOverviewIdentity strong {
  display: block;
  color: var(--radar-text);
  font-size: 17px;
  font-weight: 950;
  white-space: nowrap;
}

.radarOwnStoreOverviewIdentity em {
  display: block;
  margin-top: 4px;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.radarOwnStoreManager {
  display: grid;
  align-content: start;
}

.radarOwnStoreManagerActions {
  flex: 0 1 420px;
  justify-content: flex-end;
  gap: 8px;
}

.radarOwnStoreManagerActions .radarButton {
  flex: 0 0 auto;
}

.radarOwnStoreSearch {
  flex: 1 1 220px;
  min-height: 36px;
  gap: 7px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-muted);
  padding: 0 10px;
}

.radarOwnStoreSearch input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.radarOwnStoreSearch input::placeholder {
  color: var(--radar-muted);
}

.radarOwnStoreTableWrap {
  overflow-x: auto;
  border: 0;
  border-radius: 16px;
  background: #f5f8fc;
  padding: 10px;
}

.radarOwnStoreTable {
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.radarOwnStoreTable td,
.radarOwnStoreTable th {
  white-space: nowrap;
}

.radarOwnStoreTable th {
  border-bottom: 0;
  background: transparent;
  padding: 7px 12px;
}

.radarOwnStoreTable tbody td {
  border-top: 1px solid rgba(207, 222, 240, 0.82);
  border-bottom: 1px solid rgba(207, 222, 240, 0.82);
  background: #ffffff;
}

.radarOwnStoreTable tbody td:first-child {
  border-left: 1px solid rgba(207, 222, 240, 0.82);
  border-radius: 14px 0 0 14px;
}

.radarOwnStoreTable tbody td:last-child {
  border-right: 1px solid rgba(207, 222, 240, 0.82);
  border-radius: 0 14px 14px 0;
}

.radarOwnStoreTable tr.active td {
  border-color: rgba(255, 128, 31, 0.32);
  background: #fff7ed;
}

.radarOwnStoreStateRow td {
  background: #ffffff;
  padding: 0;
}

.radarOwnStoreTable .radarTableActions button {
  width: auto;
  min-width: 58px;
  display: inline-flex;
  gap: 4px;
  padding: 0 8px;
}

.radarTableLinkButton {
  border: 0;
  background: transparent;
  color: var(--radar-text);
  font: inherit;
  font-weight: 900;
  padding: 0;
  cursor: pointer;
}

.radarTableLinkButton:hover {
  color: var(--radar-orange-strong);
}

.radarOwnStoreNameButton {
  max-width: 240px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.radarOwnStoreCover {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(207, 222, 240, 0.9);
  border-radius: 10px;
  background: linear-gradient(135deg, #eef6ff, #fff7ed);
  color: var(--radar-orange-strong);
  font-size: 14px;
  font-weight: 950;
}

.radarOwnStoreCover.small {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 12px;
}

.radarOwnStoreCover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.radarOwnStoreNameText,
.radarOwnStoreSelectValue,
.radarOwnStoreSelectOption {
  min-width: 0;
}

.radarOwnStoreNameText {
  display: grid;
  gap: 2px;
}

.radarOwnStoreNameText strong,
.radarOwnStoreNameText em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarOwnStoreNameText em {
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.radarOwnStoreSelectValue,
.radarOwnStoreSelectOption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.radarOwnStoreSelectOption strong,
.radarOwnStoreSelectOption em {
  display: block;
}

.radarSearchEmpty {
  min-height: 40px;
  display: grid;
  place-items: center;
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 800;
}

.radarOwnStoreEmpty {
  display: grid;
  place-items: center;
  min-height: 90px;
  color: var(--radar-muted);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
  padding: 14px;
}

.radarOwnStoreModal {
  max-width: min(720px, calc(100vw - 32px));
}

.radarOwnStoreModal .radarModalHeader {
  position: relative;
  padding-right: 54px;
}

.radarOwnStoreModalClose {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-body);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.radarOwnStoreModalClose:hover,
.radarOwnStoreModalClose:focus-visible {
  border-color: rgba(255, 128, 31, 0.36);
  color: var(--radar-orange-strong);
  box-shadow: 0 0 0 3px rgba(255, 128, 31, 0.12);
  outline: none;
}

.radarOwnStoreComparePickerBackdrop {
  background: rgba(15, 27, 51, 0.38);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  animation: radarOwnStorePickerFade 180ms ease-out both;
}

.radarOwnStoreComparePicker {
  width: min(820px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  gap: 16px;
  border-radius: 18px;
  overflow: hidden;
  padding: 18px;
  animation: radarOwnStorePickerIn 220ms cubic-bezier(0.2, 0.9, 0.22, 1) both;
}

.radarOwnStoreComparePickerHeader {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-right: 48px;
}

.radarOwnStoreComparePickerHeader span {
  color: var(--radar-blue);
  font-size: 12px;
  font-weight: 950;
}

.radarOwnStoreComparePickerHeader h2 {
  margin: 4px 0 6px;
  color: var(--radar-text);
  font-size: 22px;
}

.radarOwnStoreComparePickerHeader p {
  margin: 0;
  color: var(--radar-muted);
  font-size: 13px;
  font-weight: 750;
}

.radarOwnStoreComparePickerSearch {
  width: 100%;
  flex: 0 0 auto;
}

.radarOwnStoreComparePickerList {
  min-height: 300px;
  max-height: min(420px, calc(100vh - 330px));
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: #f6f9fd;
  padding: 10px;
}

.radarOwnStoreComparePickerItem {
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(207, 222, 240, 0.84);
  border-radius: 14px;
  background: #ffffff;
  color: var(--radar-body);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.radarOwnStoreComparePickerItem:hover,
.radarOwnStoreComparePickerItem:focus-visible {
  border-color: rgba(22, 119, 255, 0.34);
  box-shadow: 0 12px 28px rgba(33, 72, 128, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.radarOwnStoreComparePickerItem.active {
  border-color: rgba(255, 128, 31, 0.42);
  background: #fff7ed;
  box-shadow: 0 12px 28px rgba(255, 128, 31, 0.12);
}

.radarOwnStoreComparePickerCheck {
  color: var(--radar-muted);
}

.radarOwnStoreComparePickerItem.active .radarOwnStoreComparePickerCheck {
  color: var(--radar-orange-strong);
}

.radarOwnStoreComparePickerMain {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.radarOwnStoreComparePickerMain strong,
.radarOwnStoreComparePickerMain em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarOwnStoreComparePickerMain strong {
  color: var(--radar-text);
  font-size: 14px;
  font-weight: 950;
}

.radarOwnStoreComparePickerMain em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.radarOwnStoreComparePickerStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(72px, auto)) auto;
  align-items: center;
  gap: 8px;
}

.radarOwnStoreComparePickerStats > span:not(.radarOwnStoreComparePickerStatus) {
  display: grid;
  gap: 2px;
  border: 1px solid var(--radar-line-soft);
  border-radius: 10px;
  background: #f8fbff;
  padding: 7px 9px;
}

.radarOwnStoreComparePickerStatus {
  display: inline-flex;
  justify-content: flex-end;
}

.radarOwnStoreComparePickerStats em {
  color: var(--radar-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.radarOwnStoreComparePickerStats strong {
  color: var(--radar-text);
  font-size: 12px;
  font-weight: 950;
}

.radarOwnStoreComparePickerFooter {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.radarOwnStoreComparePickerPager {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.radarOwnStoreComparePickerActions {
  flex: 0 0 auto;
  display: inline-flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 1180px) {
  .radarPage .radarDecisionLayout,
  .radarOwnStoreWorkspaceGrid,
  .radarAlertsTopRow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .radarOwnStoreManagerHeader,
  .radarOwnStoreManagerActions {
    align-items: stretch;
    flex-direction: column;
  }

  .radarOwnStoreManagerActions {
    flex: 1 1 auto;
    width: 100%;
  }

  .radarOwnStoreManagerActions .radarButton,
  .radarOwnStoreSearch {
    width: 100%;
  }

  .radarOwnStoreComparePicker {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    padding: 14px;
  }

  .radarOwnStoreComparePickerList {
    max-height: calc(100vh - 340px);
  }

  .radarOwnStoreComparePickerItem {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .radarOwnStoreComparePickerStats {
    grid-column: 2 / -1;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  }

  .radarOwnStoreComparePickerFooter {
    align-items: stretch;
    flex-direction: column;
  }

  .radarOwnStoreComparePickerActions {
    width: 100%;
  }

  .radarOwnStoreComparePickerActions .radarButton {
    flex: 1 1;
  }
}

@media (max-width: 640px) {
  .radarOwnStoreManager {
    padding: 12px;
  }

  .radarOwnStoreOverviewIdentity {
    grid-template-columns: 1fr;
  }

  .radarOwnStoreOverviewIdentity > span {
    width: 40px;
    height: 40px;
  }

  .radarOwnStoreComparePickerBackdrop {
    padding: 12px;
  }

  .radarOwnStoreComparePickerHeader {
    padding-right: 42px;
  }

  .radarOwnStoreComparePickerHeader h2 {
    font-size: 20px;
  }

  .radarOwnStoreComparePickerItem {
    gap: 10px;
    padding: 10px;
  }

  .radarOwnStoreComparePickerStats {
    grid-template-columns: 1fr;
  }
}

.radarTableToolbar {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.radarInlineSearch {
  min-height: 36px;
  min-width: 210px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 999px;
  background: #f7fbff;
  color: var(--radar-muted);
  padding: 0 12px;
}

.radarInlineSearch input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
}

.radarTableToolbar select,
.radarTableToolbar > button,
.radarTextLink {
  min-height: 36px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  padding: 0 12px;
}

.radarTableToolbar > button {
  width: 36px;
  display: grid;
  place-items: center;
  padding: 0;
}

.radarTextLink {
  border: 0;
  background: transparent;
  color: #1677ff;
  padding: 0;
}

.radarTable {
  min-width: 860px;
}

.radarTable th {
  background: #fbfdff;
  text-transform: none;
  letter-spacing: 0;
}

.radarTable td {
  color: #52627a;
}

.radarTable td:first-child {
  min-width: 230px;
}

.radarTable small {
  display: block;
  margin-top: 4px;
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 700;
}

.radarTableCheck {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.radarTableCheck input {
  width: 15px;
  height: 15px;
}

.radarShopIdentity {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.radarShopIdentity > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.radarShopIdentity strong {
  color: var(--radar-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarShopIdentity em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.radarOwner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--radar-text);
  font-weight: 850;
}

.radarOwner span {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe3c2, #f6a15a);
  color: #753b0b;
}

.radarTableActions button {
  width: 30px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  padding: 0;
}

.radarPager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  border-top: 1px solid var(--radar-line-soft);
  color: var(--radar-muted);
  padding-top: 12px;
  font-size: 12px;
  font-weight: 850;
}

.radarPager .cuiPaginationInfo {
  margin-right: auto;
}

.radarPager .cuiPaginationPages .cuiButton,
.radarPager .cuiPaginationEllipsis,
.radarPager .cuiPaginationJump input {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-body);
  padding: 0;
  text-align: center;
  font: inherit;
  font-weight: 900;
}

.radarPager .cuiPaginationPages .cuiButton.active,
.radarPager .cuiPaginationPages .cuiButton[aria-current='page'] {
  border-color: #1677ff;
  background: #1677ff;
  color: #ffffff;
}

.radarPager .cuiPaginationJump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.radarCompareConfig {
  display: grid;
  grid-template-columns: minmax(260px, 0.62fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: stretch;
}

.radarCompareCountBlock {
  display: grid;
  gap: 9px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: #ffffff;
  padding: 14px;
}

.radarCompareCountBlock strong {
  color: var(--radar-text);
}

.radarCompareCountBlock span {
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 800;
}

.radarSlotCards {
  display: grid;
  grid-template-columns: repeat(6, minmax(112px, 1fr));
  gap: 12px;
}

.radarSlotCard {
  min-width: 0;
  display: grid;
  gap: 7px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}

.radarSlotCard > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #1677ff;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

.radarSlotCard strong,
.radarSlotCard em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarSlotCard em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
}

.radarSlotCard select {
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  padding: 0 9px;
}

.radarCompareDataGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.radarCompareCharts {
  display: grid;
  gap: 12px;
}

.radarSparkChart,
.radarCategoryCompare {
  display: grid;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}

.radarSparkChart {
  gap: 6px;
}

.radarChartLegend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 850;
}

.radarChartLegend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.radarChartLegend span::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.radarChartLegend .blue {
  color: #1677ff;
}

.radarChartLegend .green {
  color: #10b981;
}

.radarChartLegend .orange {
  color: #f97316;
}

.radarChartLegend .red {
  color: #ef4444;
}

.radarChartLegend .muted {
  color: #93a4bc;
}

.radarSparkChart svg,
.radarLineChart svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.radarSparkChart svg line,
.radarLineChart svg line {
  stroke: #dfe8f4;
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.radarSparkChart svg text,
.radarLineChart svg text {
  fill: #8a99af;
  font-size: 11px;
  font-weight: 800;
}

.radarSparkChart polyline,
.radarLineChart polyline {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.radarSparkChart .blue,
.radarLineChart .blue {
  stroke: #1677ff;
  fill: #1677ff;
}

.radarSparkChart .green,
.radarLineChart .green {
  stroke: #10b981;
  fill: #10b981;
}

.radarSparkChart .orange,
.radarLineChart .orange {
  stroke: #f97316;
  fill: #f97316;
}

.radarLineChart .red {
  stroke: #ef4444;
  fill: #ef4444;
}

.radarLineChart .area {
  stroke: none;
  opacity: 0.12;
}

.radarLineChart .area.orange {
  opacity: 0.16;
}

.radarLineChart .area.blue {
  opacity: 0.1;
}

.radarCategoryCompare {
  min-height: 166px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
}

.radarCategoryCompare > div {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 3px;
}

.radarCategoryCompare span {
  min-height: 14px;
  border-radius: 4px 4px 1px 1px;
}

.radarCategoryCompare span:nth-child(1) {
  background: #1677ff;
}

.radarCategoryCompare span:nth-child(2) {
  background: #10b981;
}

.radarCategoryCompare span:nth-child(3) {
  background: #f97316;
}

.radarCategoryCompare em {
  grid-column: 1 / -1;
  min-width: 0;
  color: var(--radar-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarTemplateList {
  gap: 10px;
}

.radarTemplateList button {
  min-height: 86px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  border-radius: 12px;
}

.radarTemplateIcon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #eaf3ff;
  color: #1677ff;
}

.radarTemplateIcon.tone-2 {
  background: #fff2df;
  color: #f97316;
}

.radarTemplateIcon.tone-3 {
  background: #fff0f1;
  color: #ef4444;
}

.radarTemplateList b {
  border-radius: 7px;
  background: #1677ff;
  color: #ffffff;
  padding: 7px 10px;
  font-size: 12px;
}

.radarBullets {
  display: grid;
  gap: 9px;
  color: var(--radar-body);
  font-size: 13px;
  font-weight: 800;
}

.radarBullets span {
  position: relative;
  min-width: 0;
  padding-left: 14px;
}

.radarBullets span::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #1677ff;
}

.radarTwinPanels {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.72fr);
  gap: 16px;
}

.radarAlertsLayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.radarAlertsTopRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 0.68fr);
  gap: 16px;
  align-items: stretch;
}

.radarAlertsTopRow > .radarPanel,
.radarAlertsTopRow > .radarSideStack {
  min-width: 0;
}

.radarAlertDateRange {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.radarAlertDateRange input,
.radarAlertDateRange button {
  min-height: 32px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.radarAlertDateRange input {
  width: 138px;
  padding: 0 8px;
}

.radarAlertDateRange .radarBlankDateInput {
  color-scheme: light;
}

.radarAlertDateRange button {
  padding: 0 10px;
  color: var(--radar-orange-strong, var(--warning, #f97316));
  cursor: pointer;
}

.radarAlertDateRange button.is-active {
  border-color: var(--radar-orange-strong, var(--warning, #f97316));
  background: var(--radar-orange-strong, var(--warning, #f97316));
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.18);
}

.radarAlertDateRange span {
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 900;
}

.radarAlertsLayout > .radarStack {
  gap: 14px;
}

.radarAlertsLayout .radarTwinPanels {
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.72fr);
  align-items: stretch;
}

@media (max-width: 1080px) {
  .radarAlertsTopRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .radarAlertsTopRow {
    grid-template-columns: 1fr;
  }
}

.radarLineChart {
  min-height: 260px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}

.radarLineChart .radarChartLegend {
  min-height: 24px;
}

.radarLineChart svg {
  display: block;
  width: 100%;
  height: 252px;
}

.radarDistribution {
  min-height: 260px;
}

.radarRuleBoard {
  display: grid;
  gap: 0;
}

.radarRuleBoard article {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--radar-line-soft);
  padding: 12px 0;
}

.radarRuleBoard article:last-child {
  border-bottom: 0;
}

.radarRuleBoard strong,
.radarRuleBoard em,
.radarRuleBoard small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarRuleBoard strong {
  color: var(--radar-text);
  font-size: 13px;
}

.radarRuleBoard em,
.radarRuleBoard small {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
}

.radarPriority {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #e9eef6;
  color: #51627c;
  font-size: 12px;
  font-weight: 950;
}

.radarPriority.p1 {
  background: #ef4444;
  color: #ffffff;
}

.radarPriority.p2 {
  background: #fb923c;
  color: #ffffff;
}

.radarPriority.p3 {
  background: #facc15;
  color: #7a4b00;
}

.radarSwitch {
  justify-self: end;
}

.radarSwitch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radarSwitch span {
  width: 36px;
  height: 20px;
  display: block;
  border-radius: 999px;
  background: #d7e2ee;
  padding: 2px;
}

.radarSwitch span::after {
  content: '';
  width: 16px;
  height: 16px;
  display: block;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 27, 51, 0.18);
}

.radarSwitch input:checked + span {
  background: #10b981;
}

.radarSwitch input:checked + span::after {
  transform: translateX(16px);
}

.radarMiniCardGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.radarMiniCardGrid .radarPanel {
  min-height: 190px;
  padding: 16px;
}

.radarChannelList {
  display: grid;
  gap: 10px;
}

.radarChannelList > span {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--radar-body);
  font-size: 13px;
  font-weight: 850;
}

.radarFloatingActions {
  position: sticky;
  bottom: 16px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 48px rgba(33, 72, 128, 0.14);
  padding: 12px;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.radarFloatingActions label {
  display: grid;
  gap: 5px;
}

.radarFloatingActions label span {
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 850;
}

.radarFloatingActions select {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  padding: 0 10px;
}

.radarFloatingActions .radarButton {
  width: 100%;
  justify-content: center;
}

.radarPage .radarHeroPrimaryLarge {
  min-height: 48px;
  border-radius: 14px;
  font-size: 14px;
  padding-inline: 18px;
}

.radarAlertList table td:first-child {
  min-width: 0;
}

.radarAlertTablePanel {
  overflow: hidden;
}

.radarAlertTablePanel .radarPanelHeader {
  align-items: start;
}

.radarAlertTable {
  min-width: 980px;
  table-layout: fixed;
}

.radarAlertTable th,
.radarAlertTable td,
.radarAlertTable .cuiDataListTableHeadCell,
.radarAlertTable .cuiDataListTableCell {
  padding: 13px 10px;
}

.radarAlertTable th:nth-child(1),
.radarAlertTable td:nth-child(1),
.radarAlertTable .cuiDataListTableHeadCell:nth-child(1),
.radarAlertTable .cuiDataListTableCell:nth-child(1) {
  width: 96px;
  min-width: 0;
}

.radarAlertTable th:nth-child(2),
.radarAlertTable td:nth-child(2),
.radarAlertTable .cuiDataListTableHeadCell:nth-child(2),
.radarAlertTable .cuiDataListTableCell:nth-child(2) {
  width: 260px;
}

.radarAlertTable th:nth-child(3),
.radarAlertTable td:nth-child(3),
.radarAlertTable .cuiDataListTableHeadCell:nth-child(3),
.radarAlertTable .cuiDataListTableCell:nth-child(3) {
  width: 122px;
}

.radarAlertTable th:nth-child(4),
.radarAlertTable td:nth-child(4),
.radarAlertTable .cuiDataListTableHeadCell:nth-child(4),
.radarAlertTable .cuiDataListTableCell:nth-child(4) {
  width: 152px;
}

.radarAlertTable th:nth-child(5),
.radarAlertTable td:nth-child(5),
.radarAlertTable .cuiDataListTableHeadCell:nth-child(5),
.radarAlertTable .cuiDataListTableCell:nth-child(5) {
  width: 148px;
}

.radarAlertTable th:nth-child(6),
.radarAlertTable td:nth-child(6),
.radarAlertTable th:nth-child(7),
.radarAlertTable td:nth-child(7),
.radarAlertTable .cuiDataListTableHeadCell:nth-child(6),
.radarAlertTable .cuiDataListTableCell:nth-child(6),
.radarAlertTable .cuiDataListTableHeadCell:nth-child(7),
.radarAlertTable .cuiDataListTableCell:nth-child(7) {
  width: 104px;
}

.radarAlertTable th:nth-child(8),
.radarAlertTable td:nth-child(8),
.radarAlertTable .cuiDataListTableHeadCell:nth-child(8),
.radarAlertTable .cuiDataListTableCell:nth-child(8) {
  width: 116px;
}

.radarAlertTitleCell {
  display: grid;
  gap: 3px;
}

.radarAlertTitleCell strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarAlertTable .radarTableActions button {
  width: auto;
  min-width: 42px;
  padding: 0 9px;
}

.radarAlertsLayout .radarFloatingActions {
  position: static;
  box-shadow: 0 12px 30px rgba(33, 72, 128, 0.1);
}

.radarMoreButton {
  justify-self: center;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: #1677ff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.radarReportInsightGrid {
  grid-template-columns:
    minmax(260px, 0.95fr)
    minmax(220px, 0.72fr)
    minmax(270px, 0.9fr)
    minmax(300px, 1fr);
  align-items: stretch;
}

.radarReportOverviewCard {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f9fcff);
  box-shadow: 0 12px 30px rgba(33, 72, 128, 0.06);
  padding: 16px;
}

.radarReportOverviewCard > strong,
.radarReportOverviewCard h3 {
  margin: 0;
  color: var(--radar-text);
  font-size: 15px;
  font-weight: 950;
}

.radarReportOverviewCard p {
  margin: 0;
  color: var(--radar-body);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.6;
}

.radarReportOverviewCard.visual {
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
}

.radarReportOverviewCard.visual .radarDonut {
  width: 150px;
}

.radarReportOverviewCard.visual > div:last-child {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.radarReportOverviewCard.visual > div:last-child strong {
  color: var(--radar-text);
  font-size: 16px;
  font-weight: 950;
}

.radarReportStatList {
  display: grid;
  gap: 8px;
}

.radarReportStatList span {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(74px, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  border-bottom: 1px solid var(--radar-line-soft);
  padding-bottom: 8px;
}

.radarReportStatList span:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.radarReportStatList em,
.radarReportStatList small {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarReportStatList b {
  color: var(--radar-text);
  font-size: 14px;
  font-weight: 950;
}

.radarReportStatList small {
  grid-column: 1 / -1;
  color: var(--radar-body);
}

.radarReportOverviewCard.top {
  gap: 10px;
}

.radarReportOverviewCard.top .radarHighlightRow {
  min-height: 30px;
  border-bottom: 1px solid var(--radar-line-soft);
  padding-bottom: 8px;
}

.radarReportOverviewCard.top .radarHighlightRow:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.radarReportTrendBars {
  display: grid;
  gap: 10px;
}

.radarReportTrendBars span {
  min-width: 0;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
}

.radarReportTrendBars em,
.radarReportTrendBars b {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-body);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarReportTrendBars b {
  color: var(--radar-text);
  text-align: right;
}

.radarReportTrendBars i {
  position: relative;
  height: 8px;
  display: block;
  border-radius: 999px;
  background: #1677ff;
}

.radarReportTrendBars span::before {
  content: '';
  grid-column: 2;
  grid-row: 1;
  height: 8px;
  border-radius: 999px;
  background: #edf3fa;
}

.radarReportTrendBars i {
  grid-column: 2;
  grid-row: 1;
}

.radarReportTrendBars .tone-green i {
  background: #10b981;
}

.radarReportTrendBars .tone-amber i {
  background: #ff9f1a;
}

.radarReportTrendBars .tone-blue i {
  background: #1677ff;
}

.radarReportActionList {
  display: grid;
  gap: 0;
  border: 1px solid var(--radar-line-soft);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.radarReportActionList article,
.radarReportActionList .cuiDataListItem {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 10px;
  border-bottom: 1px solid var(--radar-line-soft);
  padding: 12px;
}

.radarReportActionList article:last-child,
.radarReportActionList .cuiDataListItem:last-child {
  border-bottom: 0;
}

.radarReportActionList strong,
.radarReportActionList span,
.radarReportActionList em,
.radarReportActionList .cuiDataListItemTitle,
.radarReportActionList .cuiDataListItemDescription {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarReportActionList strong,
.radarReportActionList .cuiDataListItemTitle {
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
}

.radarReportActionList span,
.radarReportActionList em,
.radarReportActionList .cuiDataListItemDescription {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.radarReportActionList .statusPill {
  grid-column: 1 / -1;
  justify-self: start;
}

.radarPage .radarFlowStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.radarPage .radarFlowStrip span {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 3px 10px;
  align-items: center;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 34px rgba(33, 72, 128, 0.06);
  padding: 12px;
}

.radarPage .radarFlowStrip b {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #1677ff;
  color: #ffffff;
  font-size: 12px;
}

.radarPage .radarFlowStrip strong,
.radarPage .radarFlowStrip em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarFlowStrip strong {
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
}

.radarPage .radarFlowStrip em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.radarPage .radarWorkbenchLead {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(213, 223, 237, 0.82);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 48px rgba(45, 76, 123, 0.06);
  padding: 14px;
}

.radarPage .radarWorkbenchLead .radarMetricGrid {
  gap: 10px;
}

.radarPage .radarWorkbenchLead .radarMetricCard {
  min-height: 96px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: none;
  padding: 16px 72px 16px 18px;
}

.radarPage .radarWorkbenchLead .radarFlowStrip {
  gap: 10px;
}

.radarPage .radarWorkbenchLead .radarFlowStrip span {
  border-color: var(--radar-line-soft);
  border-radius: 13px;
  background: #ffffff;
  box-shadow: none;
  padding: 10px;
}

.radarPage .radarDecisionLayout {
  display: grid;
  grid-template-columns: minmax(420px, 0.86fr) minmax(560px, 1.14fr);
  gap: 14px;
  align-items: start;
}

@media (max-width: 1180px) {
  .radarPage .radarDecisionLayout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.radarPage .radarDecisionLayout.radarDecisionStackedLayout {
  grid-template-columns: minmax(0, 1fr);
}

.radarPage .radarDecisionStackedLayout .radarOwnStorePanel {
  width: 100%;
}

.radarPage .radarWorkbenchMain,
.radarPage .radarWorkbenchSide {
  gap: 14px;
}

.radarPage .radarDecisionTodoPanel,
.radarPage .radarDecisionBattlePanel,
.radarPage .radarDecisionReportPanel {
  border-color: rgba(213, 223, 237, 0.88);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 42px rgba(45, 76, 123, 0.07);
  overflow: hidden;
}

.radarPage .radarDecisionTodoPanel .radarPanelHeader,
.radarPage .radarDecisionBattlePanel .radarPanelHeader,
.radarPage .radarDecisionReportPanel .radarPanelHeader {
  padding-bottom: 2px;
}

.radarEventQueue,
.radarEventDetailPanel {
  overflow: hidden;
}

.radarEventList {
  display: grid;
  gap: 8px;
}

.radarSevereToolbar {
  display: grid;
  grid-template-columns: minmax(220px, 360px) max-content max-content;
  align-items: end;
  gap: 10px;
  border-top: 1px solid var(--radar-line-soft);
  padding: 10px 10px 8px;
}

.radarSevereSearch {
  width: min(100%, 360px);
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 800;
}

.radarSevereSearch input {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--radar-line);
  border-radius: 7px;
  background: var(--radar-control-bg);
  color: var(--radar-text);
  font: inherit;
  padding: 0 10px;
}

.radarSevereSearch input:focus-visible,
.radarSevereDateRangePicker .cuiDatePickerTrigger:focus-visible,
.radarDecisionTodoSort select:focus-visible,
.radarDecisionTodoPageSize select:focus-visible {
  outline: 2px solid rgba(10, 102, 194, 0.25);
  outline-offset: 1px;
}

.radarEventEmpty {
  border: 1px dashed var(--radar-line-soft);
  border-radius: 12px;
  background: var(--radar-panel-soft);
  color: var(--radar-muted);
  font-weight: 700;
  padding: 24px;
  text-align: center;
}

.radarEventItem {
  min-width: 0;
}

.radarEventList .radarEventRow {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 120px 88px 72px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: #ffffff;
  color: inherit;
  padding: 11px;
  text-align: left;
}

.radarEventList .radarEventRow.active,
.radarEventList .radarEventRow:hover {
  border-color: rgba(22, 119, 255, 0.34);
  background: #f7fbff;
  box-shadow: 0 10px 28px rgba(33, 72, 128, 0.08);
}

.radarEventItem.expanded .radarEventRow {
  border-color: rgba(22, 119, 255, 0.34);
  border-bottom-color: transparent;
  border-radius: 12px 12px 0 0;
  background: #f7fbff;
  box-shadow: none;
}

.radarEventItem .radarEventDetailPanel {
  border-top: 0;
  border-color: rgba(22, 119, 255, 0.34);
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 36%);
  box-shadow: inset 0 1px 0 rgba(22, 119, 255, 0.08);
  padding: 14px;
}

.radarEventItem .radarEventDetailPanel .radarPanelHeader {
  margin-bottom: 10px;
}

.radarEventLevel {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff4e4;
  color: #d97706;
  font-size: 11px;
  font-weight: 950;
}

.radarEventLevel.critical {
  background: #fff0f1;
  color: #dc2626;
}

.radarEventList strong,
.radarEventList em,
.radarEventMeta b,
.radarEventMeta em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarEventList strong {
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
}

.radarEventList em,
.radarEventMeta em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.radarEventMeta b {
  color: var(--radar-text);
  font-size: 12px;
}

.radarEventActions span {
  color: #1677ff;
  font-size: 12px;
  font-weight: 950;
}

.radarEventSummary {
  margin: 0;
  color: var(--radar-body);
  font-size: 14px;
  font-weight: 800;
}

.radarEvidenceGrid,
.radarImpactGrid,
.radarQualityGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.radarEvidenceGrid span,
.radarImpactGrid span,
.radarQualityGrid article {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: #ffffff;
  padding: 11px;
}

.radarEvidenceGrid em,
.radarImpactGrid em,
.radarQualityGrid span,
.radarQualityGrid em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.radarEvidenceGrid strong,
.radarImpactGrid strong,
.radarQualityGrid strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarActionDirective {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(22, 119, 255, 0.18);
  border-radius: 14px;
  background: #f4f9ff;
  padding: 14px;
}

.radarActionDirective strong {
  color: var(--radar-text);
  font-size: 14px;
}

.radarActionDirective p {
  margin: 0;
  color: var(--radar-body);
  font-weight: 850;
}

.radarActionDirective div,
.radarPanelActions.inline {
  justify-content: flex-start;
}

.radarPage .radarBattleGrid,
.radarPage .radarRecommendationList,
.radarPage .radarMappingGrid {
  display: grid;
  gap: 10px;
}

.radarPage .radarBattleGrid article,
.radarPage .radarRecommendationList article,
.radarPage .radarMappingGrid article {
  min-width: 0;
  display: grid;
  gap: 9px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}

.radarPage .radarBattleGrid article {
  grid-template-columns: minmax(0, 1fr) auto 88px;
  align-items: center;
}

.radarPage .radarBattleGrid strong,
.radarPage .radarRecommendationList strong,
.radarPage .radarMappingGrid strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarBattleGrid span,
.radarPage .radarBattleGrid em,
.radarPage .radarRecommendationList span,
.radarPage .radarRecommendationList em,
.radarPage .radarMappingGrid em,
.radarPage .radarMappingGrid p {
  margin: 0;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.5;
}

.radarPage .radarBattleMeta {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.radarPage .radarBattleGrid button {
  min-height: 32px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #f8fbff;
  color: #1677ff;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
}

.radarPage .radarDecisionBattlePanel .radarBattleGrid {
  gap: 9px;
}

.radarPage .radarDecisionBattlePanel .radarBattleGrid article {
  grid-template-columns: 1fr;
  gap: 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.radarPage .radarDecisionBattlePanel .radarBattleGrid strong,
.radarPage .radarDecisionBattlePanel .radarBattleGrid span,
.radarPage .radarDecisionBattlePanel .radarBattleGrid em {
  white-space: normal;
}

.radarPage .radarDecisionBattlePanel .radarBattleMeta {
  justify-items: start;
}

.radarPage .radarDecisionBattlePanel .radarBattleGrid button {
  width: 100%;
  min-height: 34px;
  border-color: rgba(22, 119, 255, 0.18);
  border-radius: 10px;
  background: #edf5ff;
}

.radarPage .radarDecisionReportPanel .radarRecommendationList article {
  border-radius: 14px;
  background: #ffffff;
}

.radarPage .radarMappingGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radarPage .radarMappingGrid article {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radarPage .radarMappingGrid article p,
.radarPage .radarMappingGrid article .statusPill {
  grid-column: 1 / -1;
}

.radarReportCoverMini {
  position: relative;
  isolation: isolate;
  min-height: 210px;
  border: 1px solid #cfe0f5;
  color: #0f1b33;
}

.radarReportCoverMini::after {
  content: '';
  position: absolute;
  right: -42px;
  bottom: -52px;
  z-index: -1;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle at 36% 34%, #ffffff 0 18%, #77aefe 19% 46%, #1677ff 47% 100%);
  box-shadow: 0 18px 42px rgba(22, 119, 255, 0.24);
}

.radarExportActions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.radarExportActions button {
  min-height: 44px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.radarExportActions button:hover {
  border-color: rgba(22, 119, 255, 0.28);
  background: #f7fbff;
  color: #1677ff;
}

.radarReportPreviewCard .radarButton {
  justify-content: center;
}

.radarBackButton {
  justify-self: start;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-body);
  box-shadow: 0 6px 16px rgba(33, 72, 128, 0.05);
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.radarBackButton:hover {
  border-color: rgba(22, 119, 255, 0.28);
  background: var(--radar-blue-soft);
  color: var(--radar-blue);
}

.radarOwnStoreControls,
.radarOwnStoreAdd {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}

.radarOwnStoreControls {
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
}

.radarOwnStoreControls button,
.radarOwnStoreAdd button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0 12px;
  cursor: pointer;
}

.radarOwnStoreControls button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.radarOwnStoreAdd {
  grid-template-columns: repeat(3, minmax(140px, 1fr)) auto;
  align-items: end;
  border: 1px dashed var(--radar-line);
  border-radius: 12px;
  background: #f8fbff;
  padding: 12px;
}

.radarOwnStoreAdd label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.radarOwnStoreAdd span {
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 900;
}

.radarOwnStoreAdd input {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-text);
  font: inherit;
  padding: 0 10px;
}

.radarQuickEntry.green > .radarQuickEntryIcon {
  background: #eafaf3;
  color: #059669;
}

.radarSearchSelect {
  display: grid;
  gap: 7px;
}

.radarSearchSelect label {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-muted);
  padding: 0 9px;
}

.radarSearchSelect input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  outline: 0;
}

.radarSearchSelect select {
  width: 100%;
}

.radarFloatingQuickEntry {
  position: fixed;
  right: clamp(12px, 1.8vw, 28px);
  bottom: clamp(12px, 1.8vw, 28px);
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(4, minmax(54px, 1fr));
  gap: 8px;
  border: 1px solid rgba(219, 231, 243, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(33, 72, 128, 0.18);
  padding: 10px;
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
}

.radarFloatingQuickEntry button {
  min-width: 0;
  min-height: 48px;
  display: grid;
  justify-items: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--radar-body);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 8px;
  cursor: pointer;
}

.radarFloatingQuickEntry button.active,
.radarFloatingQuickEntry button:hover {
  border-color: rgba(22, 119, 255, 0.18);
  background: var(--radar-blue-soft);
  color: var(--radar-blue);
}

.radarFloatingQuickEntry span {
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1440px) {
  .radarSlotCards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .radarCompareDataGrid,
  .radarTwinPanels,
  .radarMiniCardGrid,
  .radarOwnStoreCard {
    grid-template-columns: 1fr;
  }

  .radarReportInsightGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .radarPage .radarDecisionLayout,
  .radarMonitorLayout,
  .radarTwoColumn.wideRight,
  .radarCompareConfig,
  .radarReportInsightGrid {
    grid-template-columns: 1fr;
  }

  .radarHeroActions {
    justify-content: flex-start;
  }

  .radarTwoColumn.wideRight.radarCompareResultLayout > .radarCompareCorePanel {
    min-height: 0;
  }
}

@media (max-width: 980px) {
  .radarOwnStoreControls,
  .radarOwnStoreAdd {
    grid-template-columns: 1fr;
  }

  .radarFloatingQuickEntry {
    grid-template-columns: repeat(4, 42px);
    gap: 5px;
    border-radius: 14px;
    padding: 7px;
  }

  .radarFloatingQuickEntry button {
    min-height: 40px;
    padding: 5px;
  }

  .radarFloatingQuickEntry span {
    display: none;
  }
}

@media (max-width: 760px) {
  .radarMetricGrid,
  .radarMetricGrid.compact,
  .radarSlotCards,
  .radarOwnStoreMetrics,
  .radarExportActions,
  .radarPage .radarFlowStrip,
  .radarEvidenceGrid,
  .radarImpactGrid,
  .radarQualityGrid,
  .radarPage .radarMappingGrid,
  .radarReportInsightGrid,
  .radarReportOverviewCard.visual {
    grid-template-columns: 1fr;
  }

  .radarEventList button,
  .radarPage .radarBattleGrid article,
  .radarPage .radarMappingGrid article {
    grid-template-columns: 1fr;
  }

  .radarPage .radarBattleMeta {
    justify-items: start;
  }

  .radarRankList button,
  .radarRankList .cuiDataListActionItem {
    grid-template-columns: 22px 36px minmax(0, 1fr);
  }

  .radarRankList button .statusPill,
  .radarRankList button .compassIcon,
  .radarRankList .cuiDataListActionItem .statusPill,
  .radarRankList .cuiDataListActionItem .compassIcon {
    display: none;
  }

  .radarPager {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .radarFloatingQuickEntry {
    right: 10px;
    bottom: 10px;
    grid-template-columns: repeat(2, 40px);
  }
}

@media (max-width: 1080px) {
  .competitorMonitorGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .competitorEventRow {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 6px;
    padding: 10px 0;
  }

  .competitorEventRow.head {
    display: none;
  }

  .competitorForm,
  .competitorForm.compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .competitorMonitorGrid,
  .competitorForm,
  .competitorForm.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .competitorEventRow {
    grid-template-columns: 1fr 1.4fr 96px 118px;
  }

  .competitorEventRow {
    align-items: center;
    gap: 10px;
    padding: 0;
  }

  .competitorEventRow.head {
    display: grid;
  }
}

.radarPage .radarTableCheck,
.radarPage .radarShopIdentity,
.radarPage .radarOwner {
  max-width: 100%;
}

.radarPage .radarShopIdentity em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarTableActions {
  flex-wrap: nowrap;
}

.radarPage .radarTableActions button {
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  .radarPage .radarHero {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .radarPage .radarHeroActions {
    justify-content: flex-start;
  }
}

.radarPage .radarCompareBuilder {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(45, 76, 123, 0.08);
}

.radarPage .radarCompareConfig {
  grid-template-columns: minmax(260px, 0.5fr) minmax(360px, 1fr);
  gap: 14px;
}

.radarPage .radarCompareOwnStoreBlock {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  padding: 14px;
  scroll-margin-top: 112px;
  transition:
    border-color 260ms ease,
    box-shadow 360ms ease,
    background-color 360ms ease;
}

.radarPage .radarCompareOwnStoreBlock.radarCompareOwnStoreHandoffFocus {
  border-color: rgba(10, 132, 255, 0.72);
  background: linear-gradient(180deg, #ffffff, #eef7ff);
  box-shadow:
    0 0 0 5px rgba(10, 132, 255, 0.12),
    0 20px 48px rgba(28, 87, 161, 0.16);
  animation: radarCompareOwnStoreHandoffFocus 1500ms cubic-bezier(0.22, 0.86, 0.3, 1) both;
}

@keyframes radarCompareOwnStoreHandoffFocus {
  0% {
    opacity: 0.58;
    transform: translateY(10px) scale(0.988);
  }

  28% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  68% {
    box-shadow:
      0 0 0 8px rgba(10, 132, 255, 0.06),
      0 20px 48px rgba(28, 87, 161, 0.12);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarCompareOwnStoreBlock.radarCompareOwnStoreHandoffFocus {
    animation: none;
  }
}

.radarPage .radarComparePrimaryActions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  white-space: nowrap;
}

.radarPage .radarSlotCards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.radarPage .radarSlotCard {
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.92)), #ffffff;
  box-shadow: 0 14px 34px rgba(45, 76, 123, 0.08);
  padding: 14px;
}

.radarPage .radarSearchSelect {
  position: relative;
  gap: 0;
}

.radarPage .radarSearchTrigger {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #f7fbff;
  color: var(--radar-body);
  padding: 7px 10px;
  text-align: left;
  cursor: pointer;
}

.radarPage .radarSearchTrigger strong,
.radarPage .radarSearchTrigger em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarSearchTrigger strong {
  color: var(--radar-text);
  font-size: 12px;
  font-weight: 900;
}

.radarPage .radarSearchTrigger em {
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.radarPage .radarSearchMenu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 55;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(207, 222, 240, 0.96);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 44px rgba(31, 62, 108, 0.18);
  padding: 10px;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.radarPage .radarSearchMenu label,
.radarTemplateSearch {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 999px;
  background: #f8fbff;
  color: var(--radar-muted);
  padding: 0 11px;
}

.radarPage .radarSearchMenu input,
.radarTemplateSearch input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
}

.radarPage .radarSearchOptions {
  max-height: 218px;
  overflow: auto;
  display: grid;
  gap: 4px;
}

.radarPage .radarSearchOptions button {
  min-width: 0;
  display: grid;
  gap: 2px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--radar-body);
  padding: 8px;
  text-align: left;
  cursor: pointer;
}

.radarPage .radarSearchOptions button:hover,
.radarPage .radarSearchOptions button.active {
  background: #eef6ff;
  color: #1677ff;
}

.radarPage .radarSearchOptions strong,
.radarPage .radarSearchOptions em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarSearchOptions strong {
  color: var(--radar-text);
  font-size: 12px;
  font-weight: 900;
}

.radarPage .radarSearchOptions em {
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.radarPage .radarCompareCorePanel {
  border-radius: 18px;
}

.radarPage .radarCompareDataGrid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.48fr);
  gap: 14px;
}

.radarPage .radarCompareMetricTable {
  min-width: 760px;
  table-layout: fixed;
}

.radarPage .radarCompareMetricTable th,
.radarPage .radarCompareMetricTable td {
  white-space: nowrap;
}

.radarPage .radarCompareMetricTable th:first-child,
.radarPage .radarCompareMetricTable td:first-child {
  width: 136px;
}

.radarPage .radarCompareMetricTable td:not(:first-child),
.radarPage .radarCompareMetricTable th:not(:first-child) {
  text-align: center;
}

.radarPage .radarCompareMetricTable tbody tr:hover td {
  background: #f8fbff;
}

.radarPage .radarSparkChart,
.radarPage .radarCategoryCompare {
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f9fcff);
}

.radarTemplateSheetBackdrop {
  position: fixed;
  inset: 0;
  z-index: var(--cui-z-overlay, 1200);
  background: rgba(15, 27, 51, 0.22);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.radarTemplateSheet {
  position: relative;
  z-index: var(--cui-z-modal, 1210);
  width: min(760px, 52vw);
  min-width: 560px;
  height: 100%;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 16px;
  border-right: 1px solid rgba(207, 222, 240, 0.96);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 24px 0 64px rgba(31, 62, 108, 0.18);
  padding: 22px;
}

.radarTemplateSheetHead,
.radarTemplateEditorHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.radarTemplateSheetHead span {
  color: #1677ff;
  font-size: 12px;
  font-weight: 950;
}

.radarTemplateSheetHead h2 {
  margin: 2px 0 0;
  color: var(--radar-text);
  font-size: 28px;
}

.radarTemplateSheetHead button,
.radarTemplateEditorHead button,
.radarTemplateEditorActions button {
  min-height: 34px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0 12px;
  cursor: pointer;
}

.radarTemplateSheetGrid {
  display: grid;
  grid-template-columns: minmax(230px, 0.78fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.radarTemplateManageList,
.radarTemplateEditor,
.radarTemplateCompetitors {
  display: grid;
  gap: 10px;
}

.radarTemplateManageList {
  max-height: calc(100vh - 178px);
  overflow: auto;
}

.radarTemplateManageList > button {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--radar-body);
  padding: 11px;
  text-align: left;
  cursor: pointer;
}

.radarTemplateManageList > button.active,
.radarTemplateManageList > button:hover {
  border-color: rgba(22, 119, 255, 0.28);
  background: #f1f7ff;
}

.radarTemplateManageList strong,
.radarTemplateManageList em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarTemplateManageList strong {
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
}

.radarTemplateManageList em {
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.radarTemplatePin {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eef4fb;
  color: #7c8ba1;
}

.radarTemplatePin.active {
  background: #fff4d8;
  color: #f59e0b;
}

.radarTemplateEditor {
  border: 1px solid var(--radar-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 14px;
}

.radarTemplateEditorHead strong {
  color: var(--radar-text);
  font-size: 16px;
}

.radarTemplatePinToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--radar-body);
  font-size: 12px;
  font-weight: 850;
}

.radarTemplatePinToggle input {
  width: 18px;
  height: 18px;
}

.radarTemplateEditorActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.radarTemplateEditorActions button:last-child,
.radarTemplateEditorActions button:nth-last-child(2) {
  border-color: rgba(22, 119, 255, 0.22);
  background: #1677ff;
  color: #ffffff;
}

.radarAlertSheet {
  width: min(880px, 60vw);
  min-width: 620px;
  height: 100%;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 16px;
  border-right: 1px solid rgba(207, 222, 240, 0.96);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 24px 0 64px rgba(31, 62, 108, 0.18);
  padding: 22px;
}

.radarAlertSummary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.radarAlertSummaryCard {
  min-height: 68px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.radarAlertSummaryCard .label {
  font-size: 11px;
  color: var(--radar-muted);
  font-weight: 900;
}

.radarAlertSummaryCard .value {
  font-size: 22px;
  color: var(--radar-text);
  font-weight: 900;
}

.radarAlertSummaryCard .note {
  font-size: 11px;
  color: var(--radar-muted);
  font-weight: 700;
}

.radarAlertRuleSidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.radarAlertRuleListToolbar {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.radarAlertRuleListToolbar .title {
  font-size: 15px;
  font-weight: 900;
  color: var(--radar-text);
}

.radarAlertFilterTabs {
  display: flex;
  gap: 5px;
}

.radarAlertFilterTab {
  height: 30px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #fff;
  color: #516077;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.radarAlertFilterTab.active {
  color: #075f5a;
  border-color: #bce8e3;
  background: #e7f8f6;
}

.radarAlertRuleCard {
  position: relative;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  padding: 12px 12px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  cursor: pointer;
}

.radarAlertRuleCard.active {
  border-color: #aee8e2;
  background: linear-gradient(90deg, rgba(231, 248, 246, 0.96), rgba(255, 255, 255, 0.95));
  box-shadow: 0 14px 28px rgba(20, 167, 158, 0.1);
}

.radarAlertRuleCard.active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: #14a79e;
}

.radarAlertRuleCardIcon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #fff6e2;
  color: #f5a524;
}

.radarAlertRuleCardIcon.pink {
  color: #f0447e;
  background: #fff0f5;
}

.radarAlertRuleCardIcon.blue {
  color: #356df3;
  background: #eef3ff;
}

.radarAlertRuleCardIcon.green {
  color: #12a66a;
  background: #eaf8f1;
}

.radarAlertRuleCardBody {
  min-width: 0;
}

.radarAlertRuleCardName {
  color: var(--radar-text);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
  margin-bottom: 4px;
}

.radarAlertRuleCardMeta {
  color: #516176;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarAlertRuleCardBadge {
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #067f78;
  background: #e7f8f6;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.radarAlertRuleCardBadge.off {
  color: #8793a5;
  background: #f0f3f7;
}

.radarAlertSourceStrip {
  margin-top: auto;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 800;
  color: var(--radar-muted);
}

.radarAlertSourceStrip strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--radar-text);
}

.radarAlertSourceItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  border-top: 1px solid #edf2f7;
  font-size: 11px;
  font-weight: 800;
  color: var(--radar-muted);
}

.radarAlertSourceItem:first-of-type {
  border-top: 0;
}

.radarAlertSourceItem strong {
  color: #152239;
  font-size: 12px;
  margin-bottom: 0;
}

.radarAlertEditor {
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 52px rgba(22, 39, 68, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.radarAlertEditorHead {
  height: 58px;
  padding: 0 16px;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #f9fbfd;
}

.radarAlertEditorHead .info strong {
  font-size: 18px;
  font-weight: 900;
  color: var(--radar-text);
}

.radarAlertEditorHead .info span {
  display: block;
  margin-top: 3px;
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 800;
}

.radarAlertEditorBody {
  padding: 14px 16px 10px;
  overflow: auto;
  flex: 1 1;
}

.radarAlertFieldRow {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 10px;
  margin-bottom: 10px;
}

.radarAlertFieldLabel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: #5d6d84;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 6px;
}

.radarAlertSectionTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 10px;
}

.radarAlertSectionTitle h2 {
  margin: 0;
  color: var(--radar-text);
  font-size: 16px;
  font-weight: 900;
}

.radarAlertSectionTitle span {
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 900;
}

.radarAlertTemplateTabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}

.radarAlertTemplateTab {
  min-width: 0;
  height: 44px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #fff;
  color: #314159;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 900;
  cursor: pointer;
}

.radarAlertTemplateTab.active {
  color: #075f5a;
  border-color: #9be0d8;
  background: #e7f8f6;
  box-shadow: inset 0 0 0 1px rgba(20, 167, 158, 0.12);
}

.radarAlertBuilder {
  border-top: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
  padding: 10px 0 12px;
  margin-bottom: 10px;
}

.radarAlertBuilderGrid {
  display: grid;
  grid-template-columns: 1fr 84px 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.radarAlertRangeRow {
  display: grid;
  grid-template-columns: 1fr 104px;
  gap: 12px;
  align-items: end;
  margin-bottom: 10px;
}

.radarAlertRangeLabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.radarAlertRangeLabel .title {
  color: #152239;
  font-size: 13px;
  font-weight: 900;
}

.radarAlertRangeLabel .bounds {
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 900;
}

.radarAlertRangeTrack {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #edf1f5;
  overflow: hidden;
}

.radarAlertRangeTrack input[type='range'] {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.radarAlertRangeFill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #14a79e, #356df3);
}

.radarAlertRangeThumb {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 4px solid #14a79e;
  box-shadow: 0 2px 8px rgba(20, 167, 158, 0.28);
  pointer-events: none;
}

.radarAlertStepper {
  height: 44px;
  border: 1px solid #b7e5df;
  border-radius: 8px;
  background: #fff;
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  overflow: hidden;
}

.radarAlertStepper button {
  height: 100%;
  border: 0;
  background: #e7f8f6;
  color: #067f78;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}

.radarAlertStepper strong {
  text-align: center;
  color: #102139;
  font-size: 15px;
  font-weight: 900;
}

.radarAlertChipGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 6px;
}

.radarAlertChip {
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #41516a;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.radarAlertChip.active {
  color: #075f5a;
  border-color: #aee8e2;
  background: #e7f8f6;
}

.radarAlertChip .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.radarAlertPolicyGrid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 12px;
  margin-bottom: 12px;
}

.radarAlertPolicyCard {
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  min-height: 90px;
}

.radarAlertPolicyCard .policy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #17243b;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 6px;
}

.radarAlertPolicyRow {
  height: 25px;
  border-top: 1px solid #edf2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 800;
}

.radarAlertPolicyRow:first-of-type {
  border-top: 0;
}

.radarAlertPolicyRow strong {
  color: #142139;
  font-size: 11px;
  white-space: nowrap;
}

.radarAlertExpression {
  border: 1px solid #bce8e3;
  border-radius: 10px;
  background: linear-gradient(180deg, #f9fffe, #ffffff);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.radarAlertExpression .label {
  color: #075f5a;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 6px;
}

.radarAlertExpression .code {
  color: #142139;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 900;
}

.radarAlertExpression .code .hi {
  color: #14a79e;
}

.radarAlertEditorFooter {
  margin-top: auto;
  padding: 10px 16px;
  border-top: 1px solid #edf2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fbfcfe;
}

@media (max-width: 1180px) {
  .radarPage .radarCompareConfig,
  .radarPage .radarCompareOwnStoreBlock,
  .radarPage .radarCompareDataGrid {
    grid-template-columns: 1fr;
  }

  .radarPage .radarComparePrimaryActions {
    justify-content: flex-start;
  }

  .radarTemplateSheet {
    width: min(100vw, 720px);
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .radarTemplateSheet {
    width: 100%;
    padding: 16px;
  }

  .radarTemplateSheetGrid {
    grid-template-columns: 1fr;
  }
}

.radarPage .radarCompareDimensionTabs {
  flex: 0 0 auto;
}

.radarPage .radarCompareMetricMiniGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.radarPage .radarCompareMetricMiniGrid article {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(207, 222, 240, 0.86);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 12px 14px;
  overflow: hidden;
}

.radarPage .radarCompareMetricMiniGrid span,
.radarPage .radarCompareMetricMiniGrid em {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarCompareMetricMiniGrid strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 23px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarCompareMetricMiniGrid i {
  position: absolute;
  right: 13px;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #1677ff;
}

.radarPage .radarCompareMetricMiniGrid i.green {
  background: #10b981;
}

.radarPage .radarCompareMetricMiniGrid i.amber {
  background: #ff9f1a;
}

.radarPage .radarCompareMetricMiniGrid i.red {
  background: #ef4444;
}

.radarPage .radarCompareMetricMiniGrid i.purple {
  background: #8b5cf6;
}

.radarPage .radarCompareMetricTable {
  min-width: 980px;
}

.radarPage .radarCompareMetricTable th,
.radarPage .radarCompareMetricTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.radarPage .radarCompareMetricTable th:first-child,
.radarPage .radarCompareMetricTable td:first-child {
  width: 190px;
}

.radarPage .radarCompareMetricTable th:nth-child(2),
.radarPage .radarCompareMetricTable td:nth-child(2),
.radarPage .radarCompareMetricTable th:nth-child(3),
.radarPage .radarCompareMetricTable td:nth-child(3) {
  width: 170px;
}

.radarPage .radarCompareMetricTable th:nth-child(4),
.radarPage .radarCompareMetricTable td:nth-child(4) {
  width: 250px;
}

.radarPage .radarCompareMetricTable th:nth-child(5),
.radarPage .radarCompareMetricTable td:nth-child(5) {
  width: 150px;
}

.radarPage .radarCompareMetricTable th:nth-child(6),
.radarPage .radarCompareMetricTable td:nth-child(6) {
  width: 76px;
  text-align: center;
}

.radarPage .radarCompareMetricTable td:not(:first-child),
.radarPage .radarCompareMetricTable th:not(:first-child) {
  text-align: left;
}

.radarPage .radarCompareScore {
  min-width: 38px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #eef6ff;
  color: #1677ff;
  font-size: 12px;
  font-weight: 950;
}

.radarPage .radarCompareVisualStack {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.radarPage .radarCompareDimensionChart {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--radar-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f9fcff);
  padding: 14px;
}

.radarPage .radarCompareBarRows {
  display: grid;
  gap: 10px;
}

.radarPage .radarCompareBarRow {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
}

.radarPage .radarCompareBarRow strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-body);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarCompareBarRow span {
  position: relative;
  min-width: 0;
  height: 26px;
  display: block;
  border-radius: 999px;
  background: #edf3fa;
  overflow: hidden;
}

.radarPage .radarCompareBarRow i {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 18px;
  border-radius: inherit;
  background: #1677ff;
}

.radarPage .radarCompareBarRow i.competitor {
  background: #10b981;
}

.radarPage .radarCompareBarRow i.benchmark {
  background: #9aa8bb;
}

.radarPage .radarCompareBarRow b {
  position: relative;
  z-index: 1;
  display: block;
  color: #0f1b33;
  font-size: 11px;
  font-weight: 950;
  line-height: 26px;
  padding-right: 8px;
  text-align: right;
}

.radarPage .radarCompareFocus {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(22, 119, 255, 0.16);
  border-radius: 16px;
  background: #eef6ff;
  color: #1559a8;
  padding: 14px;
}

.radarPage .radarCompareFocus span {
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.radarPage .radarHero {
  min-height: 112px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(226, 236, 255, 0.94), rgba(245, 251, 255, 0.84)), #ffffff;
  box-shadow: 0 18px 48px rgba(45, 76, 123, 0.08);
  padding: 18px 22px;
}

.radarPage .radarHero::before {
  background:
    linear-gradient(120deg, rgba(22, 119, 255, 0.1), transparent 40%),
    radial-gradient(circle at 88% 12%, rgba(45, 212, 191, 0.16), transparent 30%);
}

.radarPage .radarHero h1 {
  margin: 0;
  font-size: clamp(26px, 2.1vw, 34px);
}

.radarPage .radarHero p {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.45;
}

.radarPage .radarHero-shops {
  min-height: 78px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-radius: 16px;
  padding: 14px 20px;
}

.radarPage .radarHero-shops .radarBackButton {
  margin-bottom: 8px;
}

.radarPage .radarHero-shops h1 {
  font-size: clamp(24px, 1.7vw, 30px);
}

.radarPage .radarHero-shops p {
  margin-top: 4px;
}

.radarPage .radarHero-shops .radarHeroActions {
  align-self: center;
}

.radarPage .radarBackButton {
  min-height: 28px;
  width: fit-content;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #38506c;
  box-shadow: 0 8px 22px rgba(31, 62, 108, 0.08);
  margin-bottom: 12px;
  padding: 0 11px 0 8px;
  font-size: 12px;
  font-weight: 850;
}

.radarPage .radarBackButton:hover {
  background: #ffffff;
  color: #1677ff;
  box-shadow: 0 12px 28px rgba(31, 62, 108, 0.12);
}

.radarPage .radarMonitorBoard {
  min-height: auto;
}

.radarPage .radarShopsPanel {
  gap: 12px;
  padding: 16px 18px 18px;
}

.radarPage .radarShopsPanel .radarPanelHeader {
  align-items: center;
}

.radarPage .radarShopsPanel .radarPanelHeader p {
  margin-top: 4px;
}

.radarPage .radarShopsPanel .radarFilterBar {
  margin-top: 2px;
}

.radarPage .radarShopTable {
  min-width: 1480px;
  table-layout: fixed;
}

.radarPage .radarShopTable th,
.radarPage .radarShopTable td,
.radarPage .radarShopTable .cuiDataListTableHeadCell,
.radarPage .radarShopTable .cuiDataListTableCell {
  padding: 12px 10px;
  white-space: nowrap;
}

.radarPage .radarShopTable th:nth-child(1),
.radarPage .radarShopTable td:nth-child(1),
.radarPage .radarShopTable .cuiDataListTableHeadCell:nth-child(1),
.radarPage .radarShopTable .cuiDataListTableCell:nth-child(1) {
  width: 245px;
}

.radarPage .radarShopTable th:nth-child(5),
.radarPage .radarShopTable td:nth-child(5),
.radarPage .radarShopTable .cuiDataListTableHeadCell:nth-child(5),
.radarPage .radarShopTable .cuiDataListTableCell:nth-child(5) {
  width: 150px;
}

.radarPage .radarShopTable th:nth-child(6),
.radarPage .radarShopTable td:nth-child(6),
.radarPage .radarShopTable .cuiDataListTableHeadCell:nth-child(6),
.radarPage .radarShopTable .cuiDataListTableCell:nth-child(6) {
  width: 180px;
}

.radarPage .radarShopTable th:nth-child(7),
.radarPage .radarShopTable td:nth-child(7),
.radarPage .radarShopTable .cuiDataListTableHeadCell:nth-child(7),
.radarPage .radarShopTable .cuiDataListTableCell:nth-child(7) {
  width: 310px;
}

.radarPage .radarShopTable td,
.radarPage .radarShopTable .cuiDataListTableCell {
  overflow: hidden;
  text-overflow: ellipsis;
}

.radarPage .radarTableCheck,
.radarPage .radarShopIdentity,
.radarPage .radarOwner {
  max-width: 100%;
}

.radarPage .radarShopIdentity em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarTableActions {
  flex-wrap: nowrap;
}

.radarPage .radarTableActions button {
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  .radarPage .radarHero {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .radarPage .radarHeroActions {
    justify-content: flex-start;
  }
}

.radarPage .radarCompareBuilder {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(45, 76, 123, 0.08);
}

.radarPage .radarCompareConfig {
  grid-template-columns: minmax(260px, 0.5fr) minmax(360px, 1fr);
  gap: 14px;
}

.radarPage .radarCompareOwnStoreBlock {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  padding: 14px;
}

.radarPage .radarComparePrimaryActions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  white-space: nowrap;
}

.radarPage .radarSlotCards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.radarPage .radarSlotCard {
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.92)), #ffffff;
  box-shadow: 0 14px 34px rgba(45, 76, 123, 0.08);
  padding: 14px;
}

.radarPage .radarSearchSelect {
  position: relative;
  gap: 0;
}

.radarPage .radarSearchTrigger {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #f7fbff;
  color: var(--radar-body);
  padding: 7px 10px;
  text-align: left;
  cursor: pointer;
}

.radarPage .radarSearchTrigger strong,
.radarPage .radarSearchTrigger em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarSearchTrigger strong {
  color: var(--radar-text);
  font-size: 12px;
  font-weight: 900;
}

.radarPage .radarSearchTrigger em {
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.radarPage .radarSearchMenu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 55;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(207, 222, 240, 0.96);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 44px rgba(31, 62, 108, 0.18);
  padding: 10px;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.radarPage .radarSearchMenu label,
.radarTemplateSearch {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 999px;
  background: #f8fbff;
  color: var(--radar-muted);
  padding: 0 11px;
}

.radarPage .radarSearchMenu input,
.radarTemplateSearch input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
}

.radarPage .radarSearchOptions {
  max-height: 218px;
  overflow: auto;
  display: grid;
  gap: 4px;
}

.radarPage .radarSearchOptions button {
  min-width: 0;
  display: grid;
  gap: 2px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--radar-body);
  padding: 8px;
  text-align: left;
  cursor: pointer;
}

.radarPage .radarSearchOptions button:hover,
.radarPage .radarSearchOptions button.active {
  background: #eef6ff;
  color: #1677ff;
}

.radarPage .radarSearchOptions strong,
.radarPage .radarSearchOptions em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarSearchOptions strong {
  color: var(--radar-text);
  font-size: 12px;
  font-weight: 900;
}

.radarPage .radarSearchOptions em {
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.radarPage .radarCompareCorePanel {
  border-radius: 18px;
}

.radarPage .radarCompareDataGrid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.48fr);
  gap: 14px;
}

.radarPage .radarCompareMetricTable {
  min-width: 760px;
  table-layout: fixed;
}

.radarPage .radarCompareMetricTable th,
.radarPage .radarCompareMetricTable td {
  white-space: nowrap;
}

.radarPage .radarCompareMetricTable th:first-child,
.radarPage .radarCompareMetricTable td:first-child {
  width: 136px;
}

.radarPage .radarCompareMetricTable td:not(:first-child),
.radarPage .radarCompareMetricTable th:not(:first-child) {
  text-align: center;
}

.radarPage .radarCompareMetricTable tbody tr:hover td {
  background: #f8fbff;
}

.radarPage .radarSparkChart,
.radarPage .radarCategoryCompare {
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f9fcff);
}

.radarTemplateSheetBackdrop {
  position: fixed;
  inset: 0;
  z-index: var(--cui-z-overlay, 1200);
  background: rgba(15, 27, 51, 0.22);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.radarTemplateSheet {
  position: relative;
  z-index: var(--cui-z-modal, 1210);
  width: min(760px, 52vw);
  min-width: 560px;
  height: 100%;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 16px;
  border-right: 1px solid rgba(207, 222, 240, 0.96);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 24px 0 64px rgba(31, 62, 108, 0.18);
  padding: 22px;
}

.radarTemplateSheetHead,
.radarTemplateEditorHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.radarTemplateSheetHead span {
  color: #1677ff;
  font-size: 12px;
  font-weight: 950;
}

.radarTemplateSheetHead h2 {
  margin: 2px 0 0;
  color: var(--radar-text);
  font-size: 28px;
}

.radarTemplateSheetHead button,
.radarTemplateEditorHead button,
.radarTemplateEditorActions button {
  min-height: 34px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0 12px;
  cursor: pointer;
}

.radarTemplateSheetGrid {
  display: grid;
  grid-template-columns: minmax(230px, 0.78fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.radarTemplateManageList,
.radarTemplateEditor,
.radarTemplateCompetitors {
  display: grid;
  gap: 10px;
}

.radarTemplateManageList {
  max-height: calc(100vh - 178px);
  overflow: auto;
}

.radarTemplateManageList > button {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--radar-body);
  padding: 11px;
  text-align: left;
  cursor: pointer;
}

.radarTemplateManageList > button.active,
.radarTemplateManageList > button:hover {
  border-color: rgba(22, 119, 255, 0.28);
  background: #f1f7ff;
}

.radarTemplateManageList strong,
.radarTemplateManageList em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarCompareFocus strong {
  color: #15365f;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.55;
}

.radarPage .radarAlertHistoryPanel .radarPanelHeader {
  align-items: start;
}

.radarPage .radarAlertFilterBar {
  min-width: min(100%, 720px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.radarPage .radarAlertFilterBar label,
.radarPage .radarAlertFilterBar select {
  min-height: 36px;
  border: 1px solid var(--radar-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.radarPage .radarAlertFilterBar label {
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.radarPage .radarAlertFilterBar input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
}

.radarPage .radarAlertFilterBar select {
  padding: 0 12px;
}

.radarPage .radarReportBuilderGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
  gap: 14px;
  align-items: start;
}

.radarPage .radarReportFormGrid {
  min-width: 0;
}

.radarPage .radarDateRangeField {
  position: relative;
}

.radarPage .radarDateRangeField > button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--radar-body);
  font: inherit;
  padding: 0 12px;
  cursor: pointer;
}

.radarPage .radarDateRangeField > button strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarDateRangePopover {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(207, 222, 240, 0.96);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 52px rgba(31, 62, 108, 0.18);
  padding: 12px;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.radarPage .radarCalendarHeader {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
}

.radarPage .radarCalendarHeader strong {
  color: var(--radar-text);
  font-size: 14px;
  font-weight: 950;
  text-align: center;
}

.radarPage .radarCalendarHeader button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #f8fbff;
  color: var(--radar-muted);
  cursor: pointer;
}

.radarPage .radarCalendarHeader button:hover {
  border-color: rgba(22, 119, 255, 0.42);
  background: #edf5ff;
  color: #1677ff;
}

.radarPage .radarDateInputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.radarPage .radarDateInputs label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.radarPage .radarDateInputs span {
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 900;
}

.radarPage .radarDateInputs input {
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #f8fbff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  padding: 0 8px;
}

.radarPage .radarCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.radarPage .radarCalendarGrid b,
.radarPage .radarCalendarGrid button {
  min-width: 0;
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 900;
}

.radarPage .radarCalendarGrid b {
  color: var(--radar-muted);
}

.radarPage .radarCalendarGrid button {
  border: 0;
  background: #f4f8fd;
  color: var(--radar-body);
  cursor: pointer;
}

.radarPage .radarCalendarGrid button.selected {
  background: #e8f2ff;
  color: #1677ff;
}

.radarPage .radarCalendarGrid button.edge {
  background: #1677ff;
  color: #ffffff;
}

.radarPage .radarReportBuilderAside,
.radarPage .radarTemplateConfigSummary {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 14px;
}

.radarPage .radarReportBuilderAside span,
.radarPage .radarTemplateConfigSummary span,
.radarPage .radarReportBuilderAside em,
.radarPage .radarTemplateConfigSummary em {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
}

.radarPage .radarReportBuilderAside strong,
.radarPage .radarTemplateConfigSummary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 16px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarReportBuilderAside .radarButton {
  justify-content: center;
}

.radarPage .radarReportTemplatePanel {
  overflow: hidden;
}

.radarPage .radarReportTemplateActions {
  display: grid;
  gap: 9px;
}

.radarPage .radarReportTemplateActions button,
.radarPage .radarReportTemplateActions label {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  border: 1px solid rgba(22, 119, 255, 0.16);
  border-radius: 12px;
  background: #f5f9ff;
  color: #1559a8;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  padding: 0 12px;
  cursor: pointer;
}

.radarPage .radarReportTemplateActions input {
  display: none;
}

.radarPage .radarReportCover {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.36fr);
  align-items: stretch;
}

.radarPage .radarReportCoverText {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 14px;
}

.radarPage .radarReportCoverStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.radarPage .radarReportCoverStats span {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  padding: 14px;
}

.radarPage .radarReportCoverStats strong {
  color: #ffffff;
  font-size: 30px;
  font-weight: 950;
}

.radarPage .radarReportCoverStats em {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.radarPage .radarReportSection {
  display: grid;
  gap: 14px;
  border: 1px solid var(--radar-line);
  border-radius: 16px;
  background: #ffffff;
  padding: 18px;
}

.radarPage .radarReportSection.hero,
.radarPage .radarReportSection.split {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  align-items: start;
}

.radarPage .radarReportConclusionTags {
  display: grid;
  gap: 8px;
}

.radarPage .radarReportConclusionTags span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(22, 119, 255, 0.16);
  border-radius: 999px;
  background: #eef6ff;
  color: #1559a8;
  font-size: 12px;
  font-weight: 950;
  padding: 0 12px;
}

.radarPage .radarReportEvidenceGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.radarPage .radarReportEvidenceGrid article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--radar-line-soft);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 14px;
}

.radarPage .radarReportEvidenceGrid strong,
.radarPage .radarReportEvidenceGrid span,
.radarPage .radarReportEvidenceGrid em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radarPage .radarReportEvidenceGrid strong {
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.35;
}

.radarPage .radarReportEvidenceGrid span,
.radarPage .radarReportEvidenceGrid em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.radarPage .radarCompareBodyGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.66fr);
  gap: 18px;
  align-items: start;
}

.radarPage .radarCompareCorePanel .radarPanelHeader {
  align-items: start;
}

.radarPage .radarCompareRangeSelect {
  min-height: 38px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 0 34px 0 12px;
}

.radarPage .radarCompareMetricBoard {
  min-width: 0;
}

.radarPage .radarCompareMetricTabs {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid var(--radar-line-soft);
  margin-bottom: 10px;
}

.radarPage .radarCompareMetricTabs .radarSegmented {
  gap: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.radarPage .radarCompareMetricTabs .radarSegmented button {
  min-height: 42px;
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--radar-muted);
  padding: 0;
  font-size: 15px;
  font-weight: 950;
}

.radarPage .radarCompareMetricTabs .radarSegmented button.active {
  color: #1677ff;
}

.radarPage .radarCompareMetricTabs .radarSegmented button.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: #1677ff;
}

.radarPage .radarCompareMetricTable {
  min-width: 840px;
  table-layout: fixed;
}

.radarPage .radarCompareMetricTable th,
.radarPage .radarCompareMetricTable td,
.radarPage .radarCompareMetricTable .cuiDataListTableHeadCell,
.radarPage .radarCompareMetricTable .cuiDataListTableCell {
  height: 50px;
  overflow: hidden;
  border-bottom-color: rgba(222, 231, 243, 0.86);
  color: #66758d;
  text-align: center;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.radarPage .radarCompareMetricTable th:first-child,
.radarPage .radarCompareMetricTable td:first-child,
.radarPage .radarCompareMetricTable .cuiDataListTableHeadCell:first-child,
.radarPage .radarCompareMetricTable .cuiDataListTableCell:first-child {
  width: 118px;
  color: #53627a;
  text-align: left;
}

.radarPage .radarCompareMetricTable th:not(:first-child),
.radarPage .radarCompareMetricTable td:not(:first-child),
.radarPage .radarCompareMetricTable .cuiDataListTableHeadCell:not(:first-child),
.radarPage .radarCompareMetricTable .cuiDataListTableCell:not(:first-child) {
  width: 124px;
}

.radarPage .radarCompareMetricTable th.highlight,
.radarPage .radarCompareMetricTable td.highlight,
.radarPage .radarCompareMetricTable .cuiDataListTableHeadCell.highlight,
.radarPage .radarCompareMetricTable .cuiDataListTableCell.highlight {
  background: rgba(235, 244, 255, 0.82);
}

.radarPage .radarCompareMetricTable th.highlight,
.radarPage .radarCompareMetricTable .cuiDataListTableHeadCell.highlight {
  border-radius: 12px 12px 0 0;
}

.radarPage .radarCompareMetricTable tbody tr:last-child td.highlight,
.radarPage
  .radarCompareMetricTable
  .cuiDataListTableRow:last-child
  .cuiDataListTableCell.highlight {
  border-radius: 0 0 12px 12px;
}

.radarPage .radarCompareMetricTable th span,
.radarPage .radarCompareMetricTable .cuiDataListTableHeadCell span {
  display: block;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: normal;
}

.radarPage .radarCompareMetricTable th em,
.radarPage .radarCompareMetricTable .cuiDataListTableHeadCell em {
  display: block;
  color: #1677ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.radarPage .radarCompareMetricTable td.highlight,
.radarPage .radarCompareMetricTable .cuiDataListTableCell.highlight {
  color: #263b5d;
  font-weight: 950;
}

.radarPage .radarCompareCorePanel .radarCompareCharts {
  gap: 16px;
}

.radarPage .radarCompareCorePanel .radarSparkChart,
.radarPage .radarCompareCorePanel .radarCategoryCompare {
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: 0 12px 28px rgba(31, 62, 108, 0.05);
  padding: 16px;
}

.radarPage .radarCompareCorePanel .radarCategoryCompare {
  min-height: 214px;
}

.radarPage .radarReportTopGrid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
  gap: 14px;
  align-items: stretch;
}

.radarPage .radarReportBuilderPanel,
.radarPage .radarReportTopGrid .radarReportTemplatePanel {
  min-height: 100%;
}

.radarPage .radarTemplateUpload {
  display: inline-flex;
  min-width: 0;
}

.radarPage .radarTemplateUpload .cuiUploadDropzone {
  min-height: 0;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-style: solid;
  border-radius: 999px;
  padding: 8px 12px;
  text-align: left;
}

.radarPage .radarTemplateUpload .cuiUploadIcon {
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 999px;
  font-size: 10px;
}

.radarPage .radarTemplateUpload .cuiUploadTitle {
  font-size: 12px;
  white-space: nowrap;
}

.radarPage .radarTemplateUpload .cuiUploadFiles {
  max-width: 180px;
}

.radarPage .radarReportFormGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radarPage .radarReportBuilderAside {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr) auto;
  align-items: center;
}

.radarPage .radarReportBuilderAside .radarButton {
  min-width: 170px;
}

@media (max-width: 1180px) {
  .radarPage .radarReportBuilderGrid,
  .radarPage .radarReportTopGrid,
  .radarPage .radarReportCover,
  .radarPage .radarReportSection.hero,
  .radarPage .radarReportSection.split,
  .radarPage .radarCompareBodyGrid {
    grid-template-columns: 1fr;
  }

  .radarPage .radarAlertFilterBar {
    justify-content: flex-start;
  }

  .radarPage .radarReportEvidenceGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .radarPage .radarCompareMetricMiniGrid,
  .radarPage .radarDateInputs,
  .radarPage .radarReportBuilderAside,
  .radarPage .radarReportCoverStats,
  .radarPage .radarReportEvidenceGrid {
    grid-template-columns: 1fr;
  }

  .radarPage .radarAlertFilterBar label {
    min-width: 100%;
  }

  .radarPage .radarAlertFilterBar select {
    flex: 1 1 140px;
  }
}

.radarTemplateManageList strong {
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
}

.radarTemplateManageList em {
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.radarTemplatePin {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eef4fb;
  color: #7c8ba1;
}

.radarTemplatePin.active {
  background: #fff4d8;
  color: #f59e0b;
}

.radarTemplateEditor {
  border: 1px solid var(--radar-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 14px;
}

.radarTemplateEditorHead strong {
  color: var(--radar-text);
  font-size: 16px;
}

.radarTemplatePinToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--radar-body);
  font-size: 12px;
  font-weight: 850;
}

.radarTemplatePinToggle input {
  width: 18px;
  height: 18px;
}

.radarTemplateEditorActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.radarTemplateEditorActions button:last-child,
.radarTemplateEditorActions button:nth-last-child(2) {
  border-color: rgba(22, 119, 255, 0.22);
  background: #1677ff;
  color: #ffffff;
}

@media (max-width: 1180px) {
  .radarPage .radarCompareConfig,
  .radarPage .radarCompareOwnStoreBlock,
  .radarPage .radarCompareDataGrid {
    grid-template-columns: 1fr;
  }

  .radarPage .radarComparePrimaryActions {
    justify-content: flex-start;
  }

  .radarTemplateSheet {
    width: min(100vw, 720px);
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .radarTemplateSheet {
    width: 100%;
    padding: 16px;
  }

  .radarTemplateSheetGrid {
    grid-template-columns: 1fr;
  }
}

.radarPage .radarCompareDimensionTabs {
  flex: 0 0 auto;
}

.radarPage .radarCompareMetricMiniGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.radarPage .radarCompareMetricMiniGrid article {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(207, 222, 240, 0.86);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 12px 14px;
  overflow: hidden;
}

.radarPage .radarCompareMetricMiniGrid span,
.radarPage .radarCompareMetricMiniGrid em {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarCompareMetricMiniGrid strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 23px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarCompareMetricMiniGrid i {
  position: absolute;
  right: 13px;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #1677ff;
}

.radarPage .radarCompareMetricMiniGrid i.green {
  background: #10b981;
}

.radarPage .radarCompareMetricMiniGrid i.amber {
  background: #ff9f1a;
}

.radarPage .radarCompareMetricMiniGrid i.red {
  background: #ef4444;
}

.radarPage .radarCompareMetricMiniGrid i.purple {
  background: #8b5cf6;
}

.radarPage .radarCompareMetricTable {
  min-width: 980px;
}

.radarPage .radarCompareMetricTable th,
.radarPage .radarCompareMetricTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.radarPage .radarCompareMetricTable th:first-child,
.radarPage .radarCompareMetricTable td:first-child {
  width: 190px;
}

.radarPage .radarCompareMetricTable th:nth-child(2),
.radarPage .radarCompareMetricTable td:nth-child(2),
.radarPage .radarCompareMetricTable th:nth-child(3),
.radarPage .radarCompareMetricTable td:nth-child(3) {
  width: 170px;
}

.radarPage .radarCompareMetricTable th:nth-child(4),
.radarPage .radarCompareMetricTable td:nth-child(4) {
  width: 250px;
}

.radarPage .radarCompareMetricTable th:nth-child(5),
.radarPage .radarCompareMetricTable td:nth-child(5) {
  width: 150px;
}

.radarPage .radarCompareMetricTable th:nth-child(6),
.radarPage .radarCompareMetricTable td:nth-child(6) {
  width: 76px;
  text-align: center;
}

.radarPage .radarCompareMetricTable td:not(:first-child),
.radarPage .radarCompareMetricTable th:not(:first-child) {
  text-align: left;
}

.radarPage .radarCompareScore {
  min-width: 38px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #eef6ff;
  color: #1677ff;
  font-size: 12px;
  font-weight: 950;
}

.radarPage .radarCompareVisualStack {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.radarPage .radarCompareDimensionChart {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--radar-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f9fcff);
  padding: 14px;
}

.radarPage .radarCompareBarRows {
  display: grid;
  gap: 10px;
}

.radarPage .radarCompareBarRow {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
}

.radarPage .radarCompareBarRow strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-body);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarCompareBarRow span {
  position: relative;
  min-width: 0;
  height: 26px;
  display: block;
  border-radius: 999px;
  background: #edf3fa;
  overflow: hidden;
}

.radarPage .radarCompareBarRow i {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 18px;
  border-radius: inherit;
  background: #1677ff;
}

.radarPage .radarCompareBarRow i.competitor {
  background: #10b981;
}

.radarPage .radarCompareBarRow i.benchmark {
  background: #9aa8bb;
}

.radarPage .radarCompareBarRow b {
  position: relative;
  z-index: 1;
  display: block;
  color: #0f1b33;
  font-size: 11px;
  font-weight: 950;
  line-height: 26px;
  padding-right: 8px;
  text-align: right;
}

.radarPage .radarCompareFocus {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(22, 119, 255, 0.16);
  border-radius: 16px;
  background: #eef6ff;
  color: #1559a8;
  padding: 14px;
}

.radarPage .radarCompareFocus span {
  font-size: 12px;
  font-weight: 950;
}

.radarPage .radarCompareFocus strong {
  color: #15365f;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.55;
}

.radarPage .radarAlertHistoryPanel .radarPanelHeader {
  align-items: start;
}

.radarPage .radarAlertFilterBar {
  min-width: min(100%, 720px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.radarPage .radarAlertFilterBar label,
.radarPage .radarAlertFilterBar select {
  min-height: 36px;
  border: 1px solid var(--radar-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.radarPage .radarAlertFilterBar label {
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.radarPage .radarAlertFilterBar input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
}

.radarPage .radarAlertFilterBar select {
  padding: 0 12px;
}

.radarPage .radarReportBuilderGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
  gap: 14px;
  align-items: start;
}

.radarPage .radarReportFormGrid {
  min-width: 0;
}

.radarPage .radarDateRangeField {
  position: relative;
}

.radarPage .radarDateRangeField > button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--radar-body);
  font: inherit;
  padding: 0 12px;
  cursor: pointer;
}

.radarPage .radarDateRangeField > button strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarDateRangePopover {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(207, 222, 240, 0.96);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 52px rgba(31, 62, 108, 0.18);
  padding: 12px;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.radarPage .radarDateInputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.radarPage .radarDateInputs label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.radarPage .radarDateInputs span {
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 900;
}

.radarPage .radarDateInputs input {
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #f8fbff;
  color: var(--radar-body);
  font: inherit;
  font-size: 12px;
  padding: 0 8px;
}

.radarPage .radarCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.radarPage .radarCalendarGrid b,
.radarPage .radarCalendarGrid button {
  min-width: 0;
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 900;
}

.radarPage .radarCalendarGrid b {
  color: var(--radar-muted);
}

.radarPage .radarCalendarGrid button {
  border: 0;
  background: #f4f8fd;
  color: var(--radar-body);
  cursor: pointer;
}

.radarPage .radarCalendarGrid button.selected {
  background: #e8f2ff;
  color: #1677ff;
}

.radarPage .radarCalendarGrid button.edge {
  background: #1677ff;
  color: #ffffff;
}

.radarPage .radarReportBuilderAside,
.radarPage .radarTemplateConfigSummary {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 14px;
}

.radarPage .radarReportBuilderAside span,
.radarPage .radarTemplateConfigSummary span,
.radarPage .radarReportBuilderAside em,
.radarPage .radarTemplateConfigSummary em {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
}

.radarPage .radarReportBuilderAside strong,
.radarPage .radarTemplateConfigSummary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 16px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarReportBuilderAside .radarButton {
  justify-content: center;
}

.radarPage .radarReportTemplatePanel {
  overflow: hidden;
}

.radarPage .radarReportTemplateActions {
  display: grid;
  gap: 9px;
}

.radarPage .radarReportTemplateActions button,
.radarPage .radarReportTemplateActions label {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  border: 1px solid rgba(22, 119, 255, 0.16);
  border-radius: 12px;
  background: #f5f9ff;
  color: #1559a8;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  padding: 0 12px;
  cursor: pointer;
}

.radarPage .radarReportTemplateActions input {
  display: none;
}

.radarPage .radarReportCover {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.36fr);
  align-items: stretch;
}

.radarPage .radarReportCoverText {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 14px;
}

.radarPage .radarReportCoverStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.radarPage .radarReportCoverStats span {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  padding: 14px;
}

.radarPage .radarReportCoverStats strong {
  color: #ffffff;
  font-size: 30px;
  font-weight: 950;
}

.radarPage .radarReportCoverStats em {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.radarPage .radarReportSection {
  display: grid;
  gap: 14px;
  border: 1px solid var(--radar-line);
  border-radius: 16px;
  background: #ffffff;
  padding: 18px;
}

.radarPage .radarReportSection.hero,
.radarPage .radarReportSection.split {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  align-items: start;
}

.radarPage .radarReportConclusionTags {
  display: grid;
  gap: 8px;
}

.radarPage .radarReportConclusionTags span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(22, 119, 255, 0.16);
  border-radius: 999px;
  background: #eef6ff;
  color: #1559a8;
  font-size: 12px;
  font-weight: 950;
  padding: 0 12px;
}

.radarPage .radarReportEvidenceGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.radarPage .radarReportEvidenceGrid article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--radar-line-soft);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 14px;
}

.radarPage .radarReportEvidenceGrid strong,
.radarPage .radarReportEvidenceGrid span,
.radarPage .radarReportEvidenceGrid em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radarPage .radarReportEvidenceGrid strong {
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.35;
}

.radarPage .radarReportEvidenceGrid span,
.radarPage .radarReportEvidenceGrid em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.radarPage .radarCompareBodyGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.66fr);
  gap: 18px;
  align-items: start;
}

.radarPage .radarCompareCorePanel .radarPanelHeader {
  align-items: start;
}

.radarPage .radarCompareRangeSelect {
  min-height: 38px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--radar-body);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 0 34px 0 12px;
}

.radarPage .radarCompareMetricBoard {
  min-width: 0;
}

.radarPage .radarCompareMetricTabs {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid var(--radar-line-soft);
  margin-bottom: 10px;
}

.radarPage .radarCompareMetricTabs .radarSegmented {
  gap: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.radarPage .radarCompareMetricTabs .radarSegmented button {
  min-height: 42px;
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--radar-muted);
  padding: 0;
  font-size: 15px;
  font-weight: 950;
}

.radarPage .radarCompareMetricTabs .radarSegmented button.active {
  color: #1677ff;
}

.radarPage .radarCompareMetricTabs .radarSegmented button.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: #1677ff;
}

.radarPage .radarCompareMetricTable {
  min-width: 840px;
  table-layout: fixed;
}

.radarPage .radarCompareMetricTable th,
.radarPage .radarCompareMetricTable td {
  height: 50px;
  overflow: hidden;
  border-bottom-color: rgba(222, 231, 243, 0.86);
  color: #66758d;
  text-align: center;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.radarPage .radarCompareMetricTable th:first-child,
.radarPage .radarCompareMetricTable td:first-child {
  width: 118px;
  color: #53627a;
  text-align: left;
}

.radarPage .radarCompareMetricTable th:not(:first-child),
.radarPage .radarCompareMetricTable td:not(:first-child) {
  width: 124px;
}

.radarPage .radarCompareMetricTable th.highlight,
.radarPage .radarCompareMetricTable td.highlight {
  background: rgba(235, 244, 255, 0.82);
}

.radarPage .radarCompareMetricTable th.highlight {
  border-radius: 12px 12px 0 0;
}

.radarPage .radarCompareMetricTable tbody tr:last-child td.highlight {
  border-radius: 0 0 12px 12px;
}

.radarPage .radarCompareMetricTable th span {
  display: block;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: normal;
}

.radarPage .radarCompareMetricTable th em {
  display: block;
  color: #1677ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.radarPage .radarCompareMetricTable td.highlight {
  color: #263b5d;
  font-weight: 950;
}

.radarPage .radarCompareCorePanel .radarCompareCharts {
  gap: 16px;
}

.radarPage .radarCompareCorePanel .radarSparkChart,
.radarPage .radarCompareCorePanel .radarCategoryCompare {
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: 0 12px 28px rgba(31, 62, 108, 0.05);
  padding: 16px;
}

.radarPage .radarCompareCorePanel .radarCategoryCompare {
  min-height: 214px;
}

.radarPage .radarReportTopGrid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
  gap: 14px;
  align-items: stretch;
}

.radarPage .radarReportBuilderPanel,
.radarPage .radarReportTopGrid .radarReportTemplatePanel {
  min-height: 100%;
}

.radarPage .radarReportFormGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radarPage .radarReportBuilderAside {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr) auto;
  align-items: center;
}

.radarPage .radarReportBuilderAside .radarButton {
  min-width: 170px;
}

@media (max-width: 1180px) {
  .radarPage .radarReportBuilderGrid,
  .radarPage .radarReportTopGrid,
  .radarPage .radarReportCover,
  .radarPage .radarReportSection.hero,
  .radarPage .radarReportSection.split,
  .radarPage .radarCompareBodyGrid {
    grid-template-columns: 1fr;
  }

  .radarPage .radarAlertFilterBar {
    justify-content: flex-start;
  }

  .radarPage .radarReportEvidenceGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .radarPage .radarCompareMetricMiniGrid,
  .radarPage .radarDateInputs,
  .radarPage .radarReportBuilderAside,
  .radarPage .radarReportCoverStats,
  .radarPage .radarReportEvidenceGrid {
    grid-template-columns: 1fr;
  }

  .radarPage .radarAlertFilterBar label {
    min-width: 100%;
  }

  .radarPage .radarAlertFilterBar select {
    flex: 1 1 140px;
  }
}

.radarPage {
  --radar-accent: var(--primary);
  --radar-ink: var(--text-1);
  --radar-blue: var(--primary);
  --radar-blue-strong: var(--primary-light);
  --radar-blue-soft: var(--primary-soft);
  --radar-panel: var(--surface-panel);
  --radar-panel-soft: var(--surface-panel-strong);
  --radar-line: var(--line-dark);
  --radar-line-soft: var(--row-line);
  --radar-text: var(--text-1);
  --radar-body: var(--text-2);
  --radar-muted: var(--text-3);
  --radar-shadow: var(--shadow-dark);
  --radar-control-bg: var(--control-bg);
  --radar-tag-bg: var(--tag-bg);
  --radar-active-bg: var(--primary-active-bg);
  --radar-accent-border: var(--primary-border);
  --radar-accent-border-strong: var(--primary-border-strong);
  --radar-accent-soft: color-mix(in srgb, var(--primary) 18%, transparent);
  --radar-accent-faint: color-mix(in srgb, var(--primary) 9%, transparent);
  --radar-gradient-soft: linear-gradient(
    135deg,
    var(--primary-soft),
    color-mix(in srgb, var(--accent) 12%, transparent)
  );
  --radar-panel-gradient: linear-gradient(180deg, var(--radar-panel), var(--radar-panel-soft));
  color: var(--radar-text);
}

[data-theme='light'] .radarPage {
  --radar-panel: rgba(255, 255, 255, 0.9);
  --radar-panel-soft: rgba(248, 250, 252, 0.92);
  --radar-shadow: 0 18px 48px rgba(31, 62, 108, 0.08);
}

.radarPage .radarTopbar,
.radarPage .radarHero,
.radarPage .radarPanel,
.radarPage .radarMetricCard,
.radarPage .radarModuleCardGrid article,
.radarPage .radarSwotMini,
.radarPage .radarSwotGrid article,
.radarPage .radarTemplateList button,
.radarPage .radarExportGrid span,
.radarPage .radarShopList article,
.radarPage .radarAlertList article,
.radarPage .radarRuleList article,
.radarPage .radarRuleList .cuiDataListItem,
.radarPage .radarSelectedList > div,
.radarPage .radarCompareBuilder,
.radarPage .radarCompareOwnStoreBlock,
.radarPage .radarSlotCard,
.radarPage .radarCompareMetricMiniGrid article,
.radarPage .radarReportBuilderAside,
.radarPage .radarTemplateConfigSummary,
.radarPage .radarReportSection,
.radarPage .radarReportEvidenceGrid article,
.radarPage .radarReportGenerateBar,
.radarPage .radarReportReadinessCard,
.radarPage .radarReportActionDraftList article {
  border-color: var(--radar-line);
  background: var(--radar-panel-gradient);
  box-shadow: var(--radar-shadow);
}

.radarPage .radarMetricCard.interactive {
  border-color: color-mix(in srgb, var(--radar-orange-strong, #f97316) 34%, var(--radar-line));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--radar-orange-strong, #f97316) 7%, transparent),
      transparent 58%
    ),
    var(--radar-panel-gradient);
  box-shadow:
    var(--radar-shadow),
    inset 0 0 0 1px color-mix(in srgb, var(--radar-orange-strong, #f97316) 12%, transparent);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.radarPage .radarMetricCard.interactive:hover {
  border-color: color-mix(in srgb, var(--radar-orange-strong, #f97316) 72%, var(--radar-line));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--radar-orange-strong, #f97316) 12%, transparent),
      transparent 62%
    ),
    var(--radar-panel-gradient);
  box-shadow:
    0 20px 48px rgba(249, 115, 22, 0.14),
    inset 0 0 0 1px color-mix(in srgb, var(--radar-orange-strong, #f97316) 24%, transparent);
}

.radarPage .radarMetricCard.interactive:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--radar-orange-strong, #f97316) 24%, transparent);
  outline-offset: 3px;
}

.radarPage .radarHero,
.radarPage .radarReportCover,
.radarPage .radarReportCoverMini {
  background:
    linear-gradient(
      135deg,
      var(--radar-accent-soft),
      color-mix(in srgb, var(--accent) 12%, transparent)
    ),
    var(--radar-panel);
}

.radarPage .radarHero::before {
  background:
    linear-gradient(120deg, var(--radar-accent-soft), transparent 42%),
    radial-gradient(
      circle at 88% 12%,
      color-mix(in srgb, var(--accent) 18%, transparent),
      transparent 30%
    );
}

.radarPage .radarTopbar,
.radarPage .radarWorkbenchLead,
.radarPage .radarDecisionTodoPanel,
.radarPage .radarDecisionBattlePanel,
.radarPage .radarDecisionReportPanel,
.radarPage .radarDecisionLayout .radarOwnStorePanel,
.radarPage .radarTemplateSheet,
.radarPage .radarModal,
.radarPage .radarDateRangePopover {
  border-color: var(--radar-line);
  background: color-mix(in srgb, var(--radar-panel) 94%, transparent);
  box-shadow: var(--radar-shadow);
}

.radarPage .radarDecisionShortcutGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
  align-items: stretch;
}

.radarPage .radarDecisionShortcutGrid .radarQuickEntry {
  width: 100%;
  height: 100%;
  min-height: 84px;
}

.radarPage .radarSearch,
.radarPage .radarSegmented,
.radarPage .radarCountPicker,
.radarPage .radarField input,
.radarPage .radarField select,
.radarPage .radarField textarea,
.radarPage .radarInlineSearch,
.radarPage .radarTableToolbar select,
.radarPage .radarTableToolbar > button,
.radarPage .radarPager .cuiButton,
.radarPage .radarPager .cuiInput,
.radarPage .radarPager .cuiPaginationEllipsis,
.radarPage .radarSearchTrigger,
.radarPage .radarSearchMenu label,
.radarPage .radarTemplateSearch,
.radarPage .radarTemplateSheetHead button,
.radarPage .radarTemplateEditorHead button,
.radarPage .radarTemplateEditorActions button,
.radarPage .radarAlertFilterBar label,
.radarPage .radarAlertFilterBar select,
.radarPage .radarAlertFilterBar input,
.radarPage .radarDateRangeField > button,
.radarPage .radarDateInputs input,
.radarPage .radarReportTargetField select,
.radarPage .radarReportFormGrid .radarField select,
.radarPage .radarReportTemplateHeaderActions button,
.radarPage .radarReportTemplateHeaderActions label,
.radarPage .radarReportTemplateActions button,
.radarPage .radarReportTemplateActions label {
  border-color: var(--radar-line);
  background: var(--radar-control-bg);
  color: var(--radar-body);
}

.radarPage .radarModuleTabs button,
.radarPage .radarButton,
.radarPage .radarTableActions button,
.radarPage .radarShopFoot button,
.radarPage .radarModalHead button,
.radarPage .radarRankList button,
.radarPage .radarRankList .cuiDataListActionItem,
.radarPage .radarQuickEntry,
.radarPage .radarSourceChecklist label,
.radarPage .radarReportBuilderPanel .radarSourceChecklist label,
.radarPage .radarTemplateManageList > button,
.radarPage .radarTemplateManageList > button {
  border-color: var(--radar-line);
  background: var(--radar-control-bg);
  color: var(--radar-body);
}

.radarPage .radarTopbar strong,
.radarPage .radarTitleRow h1,
.radarPage .radarHero h1,
.radarPage .radarPanelHeader h2,
.radarPage .radarModuleCardGrid h3,
.radarPage .radarSwotMini h3,
.radarPage .radarTemplateList h3,
.radarPage .radarReportBody h3,
.radarPage .radarModal h2,
.radarPage .radarShopHead strong,
.radarPage .radarRankList strong,
.radarPage .radarAlertList strong,
.radarPage .radarRuleList strong,
.radarPage .radarRuleList .cuiDataListItemTitle,
.radarPage .radarSelectedList strong,
.radarPage .radarTemplateList strong,
.radarPage .radarTable td:first-child,
.radarPage .radarDetailLine strong,
.radarPage .radarSearchTrigger strong,
.radarPage .radarSearchOptions strong,
.radarPage .radarTemplateManageList strong,
.radarPage .radarTemplateEditorHead strong,
.radarPage .radarReportBuilderPanel .radarPanelHeader h2,
.radarPage .radarReportOverviewPanel .radarPanelHeader h2,
.radarPage .radarReportBuilderAside strong,
.radarPage .radarTemplateConfigSummary strong,
.radarPage .radarReportBuilderPanel .radarSourceChecklist strong,
.radarPage .radarReportGenerateBar strong,
.radarPage .radarReportActionDraftList strong,
.radarPage .radarReportReadinessCard > strong,
.radarPage .radarReportEvidenceGrid strong,
.radarPage .radarCompareMetricMiniGrid strong,
.radarPage .radarCompareBarRow strong,
.radarPage .radarCompareFocus strong {
  color: var(--radar-text);
}

.radarPage .radarSearch input,
.radarPage .radarInlineSearch input,
.radarPage .radarSearchMenu input,
.radarPage .radarTemplateSearch input,
.radarPage .radarField input,
.radarPage .radarField select,
.radarPage .radarField textarea,
.radarPage .radarDateInputs input {
  background: transparent;
  color: var(--radar-text);
}

.radarPage input[type='checkbox'],
.radarPage input[type='radio'] {
  border-color: var(--app-control-line);
}

.radarPage .radarSearch input::placeholder,
.radarPage .radarInlineSearch input::placeholder,
.radarPage .radarSearchMenu input::placeholder,
.radarPage .radarTemplateSearch input::placeholder {
  color: var(--radar-muted);
}

.radarPage .radarHero p,
.radarPage .radarPanel p,
.radarPage .radarPanelHeader p,
.radarPage .radarMetricCard em,
.radarPage .radarMetricCard span,
.radarPage .radarDetailLine span,
.radarPage .radarShopHead em,
.radarPage .radarShopFoot span,
.radarPage .radarRankList em,
.radarPage .radarAlertList p,
.radarPage .radarRuleList em,
.radarPage .radarRuleList span,
.radarPage .radarRuleList .cuiDataListItemDescription,
.radarPage .radarSelectedList em,
.radarPage .radarTemplateList em,
.radarPage .radarReportBody p,
.radarPage .radarModal p,
.radarPage .radarTable th,
.radarPage .radarTable td,
.radarPage .radarCompareMetricTable th,
.radarPage .radarCompareMetricTable td,
.radarPage .radarCompareMetricTable th:first-child,
.radarPage .radarCompareMetricTable th span,
.radarPage .radarSearchTrigger em,
.radarPage .radarSearchOptions em,
.radarPage .radarTemplateManageList em,
.radarPage .radarReportBuilderPanel .radarPanelHeader p,
.radarPage .radarReportOverviewPanel .radarPanelHeader p,
.radarPage .radarReportTargetField > span em,
.radarPage .radarReportSourceHeader,
.radarPage .radarReportSourceHeader em,
.radarPage .radarReportBuilderPanel .radarSourceChecklist small,
.radarPage .radarReportGenerateBar em,
.radarPage .radarReportOverviewPills span,
.radarPage .radarReportActionDraftList span,
.radarPage .radarReportReadinessCard > span,
.radarPage .radarReportReadinessCard p,
.radarPage .radarReportReadinessBars em,
.radarPage .radarReportReadinessBars b,
.radarPage .radarReportReadinessCard > strong em,
.radarPage .radarCompareMetricMiniGrid span,
.radarPage .radarCompareMetricMiniGrid em,
.radarPage .radarCompareFocus span {
  color: var(--radar-body);
}

.radarPage .radarTable th,
.radarPage .radarShopMetrics span,
.radarPage .radarTaskMetrics span,
.radarPage .radarOwnStoreIdentity,
.radarPage .radarOwnStoreInsight,
.radarPage .radarOwnStoreMetrics span,
.radarPage .radarFlowStrip span,
.radarPage .radarEvidenceGrid span,
.radarPage .radarImpactGrid span,
.radarPage .radarQualityGrid article,
.radarPage .radarBattleGrid article,
.radarPage .radarRecommendationList article,
.radarPage .radarMappingGrid article,
.radarPage .radarReportBullets,
.radarPage .radarReportOverviewPills span,
.radarPage .radarReportActionDraftList article,
.radarPage .statusPill,
.radarPage .radarReportConclusionTags span,
.radarPage .radarCompareScore,
.radarPage .radarCompareFocus {
  background: var(--radar-tag-bg);
  color: var(--radar-body);
}

.radarPage .radarTable td,
.radarPage .radarCompareMetricTable td,
.radarPage .radarEventList .radarEventRow,
.radarPage .radarEventItem .radarEventDetailPanel,
.radarPage .radarSearchMenu,
.radarPage .radarTemplateEditor,
.radarPage .radarTrendChart,
.radarPage .radarLineChart,
.radarPage .radarSparkChart,
.radarPage .radarCategoryCompare,
.radarPage .radarCompareCorePanel .radarSparkChart,
.radarPage .radarCompareCorePanel .radarCategoryCompare,
.radarPage .radarCompareDimensionChart,
.radarPage .radarReportSection,
.radarPage .radarReportReadinessCard {
  border-color: var(--radar-line);
  background: var(--radar-panel-soft);
}

.radarPage .radarOwnStoreTableWrap {
  border: 0;
  border-radius: 16px;
  background: #f5f8fc;
  padding: 10px;
}

.radarPage .radarOwnStoreTable {
  border-collapse: separate;
  border-spacing: 0 8px;
}

.radarPage .radarOwnStoreTable th {
  border-bottom: 0;
  background: transparent;
  padding: 7px 12px;
}

.radarPage .radarOwnStoreTable tbody td {
  border-top: 1px solid rgba(207, 222, 240, 0.82);
  border-bottom: 1px solid rgba(207, 222, 240, 0.82);
  background: #ffffff;
}

.radarPage .radarOwnStoreTable tbody td:first-child {
  border-left: 1px solid rgba(207, 222, 240, 0.82);
  border-radius: 14px 0 0 14px;
}

.radarPage .radarOwnStoreTable tbody td:last-child {
  border-right: 1px solid rgba(207, 222, 240, 0.82);
  border-radius: 0 14px 14px 0;
}

.radarPage .radarCompareOwnStoreBlock .radarOwnStoreSearchMenu {
  z-index: 130;
  max-height: min(320px, calc(100vh - 220px));
  overflow: auto;
}

.radarPage .radarCompareOwnStoreBlock .radarOwnStoreSearchSelect {
  position: relative;
  z-index: 120;
}

.radarPage .radarCompareBuilder,
.radarPage .radarCompareConfig,
.radarPage .radarCompareOwnStoreBlock {
  overflow: visible;
}

.radarPage .radarOwnStoreTable tr.active td {
  border-color: rgba(255, 128, 31, 0.32);
  background: #fff7ed;
}

.radarPage .radarTable tbody tr:hover,
.radarPage .radarCompareMetricTable tbody tr:hover td,
.radarPage .radarRankList button.active,
.radarPage .radarRankList button:hover,
.radarPage .radarRankList .cuiDataListActionItem.active,
.radarPage .radarRankList .cuiDataListActionItem:hover,
.radarPage .radarQuickEntry:hover,
.radarPage .radarSearchOptions button:hover,
.radarPage .radarSearchOptions button.active,
.radarPage .radarTemplateManageList > button.active,
.radarPage .radarTemplateManageList > button:hover,
.radarPage .radarCalendarGrid button.selected,
.radarPage .radarCompareMetricTable th.highlight,
.radarPage .radarCompareMetricTable td.highlight {
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
}

.radarPage .radarModuleTabs button.active,
.radarPage .radarButton.primary,
.radarPage .radarSegmented button.active,
.radarPage .radarCountPicker button.active,
.radarPage .radarPager .cuiButton.active,
.radarPage .radarPager .cuiButton[aria-current='page'],
.radarPage .radarCalendarGrid button.edge,
.radarPage .radarTemplateEditorActions button:last-child,
.radarPage .radarTemplateEditorActions button:nth-last-child(2),
.radarPage .radarFlowStrip b {
  border-color: var(--radar-accent-border-strong);
  background: var(--grad);
  color: #ffffff;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 24%, transparent);
}

.radarPage .radarButton.soft,
.radarPage .radarButton.ghost,
.radarPage .radarModuleTabs button:hover,
.radarPage .radarTableActions button:hover,
.radarPage .radarShopFoot button:hover,
.radarPage .radarBattleGrid button,
.radarPage .radarReportTemplateHeaderActions button,
.radarPage .radarReportTemplateHeaderActions label,
.radarPage .radarReportTemplateActions button,
.radarPage .radarReportTemplateActions label {
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
}

.radarPage .radarTitleRow span,
.radarPage .radarEyebrow,
.radarPage .radarModalHead span,
.radarPage .radarReportCover span,
.radarPage .radarTemplateSheetHead span,
.radarPage .radarEventActions span,
.radarPage .radarReportBuilderPanel .radarSourceChecklist em,
.radarPage .radarReportGenerateBar span,
.radarPage .radarReportActionDraftList em,
.radarPage .radarCompareMetricTable th em,
.radarPage .radarCompareMetricTabs .radarSegmented button.active,
.radarPage .radarReportReadinessCard > strong em {
  color: var(--radar-blue);
}

.radarPage .radarTitleRow span,
.radarPage .radarReportGenerateBar span,
.radarPage .radarReportActionDraftList em,
.radarPage .radarReportConclusionTags span,
.radarPage .statusPill.cyan,
.radarPage .statusPill.purple {
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
}

.radarPage .radarMetricDot,
.radarPage .radarAvatar,
.radarPage .radarFocusLogo,
.radarPage .radarOwner span,
.radarPage .radarOwnStoreLogo,
.radarPage .radarTrendBar span,
.radarPage .radarLinePoint .info,
.radarPage .radarCompareMetricMiniGrid i,
.radarPage .radarCompareBarRow i,
.radarPage .radarCompareMetricTabs .radarSegmented button.active::after,
.radarPage .radarReportActionDraftList .tone-2 i {
  background: var(--grad);
  color: #ffffff;
}

.radarPage .radarLineChart,
.radarPage .radarTrendChart {
  background:
    linear-gradient(var(--radar-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--radar-line-soft) 1px, transparent 1px), var(--radar-panel-soft);
}

.competitorEventDataList.cuiDataList {
  background: transparent;
  box-shadow: none;
}

.competitorEventDataList .cuiDataListBody {
  overflow-x: auto;
}

.competitorEventRow .cuiDataListTableHeadCell,
.competitorEventRow .cuiDataListTableCell {
  min-width: 0;
}

.radarPage .radarDonut {
  background:
    radial-gradient(circle, var(--radar-panel) 0 43%, transparent 44%),
    conic-gradient(
      var(--radar-blue) 0 34%,
      var(--warning) 34% 58%,
      var(--accent) 58% 82%,
      var(--success) 82% 100%
    );
}

.radarPage .radarDonut.report {
  background:
    radial-gradient(circle, var(--radar-panel) 0 43%, transparent 44%),
    conic-gradient(
      var(--radar-blue) 0 50%,
      var(--warning) 50% 75%,
      var(--accent) 75% 91%,
      var(--success) 91% 100%
    );
}

.radarPage .radarReportCover h2,
.radarPage .radarReportCoverStats strong,
.radarPage .radarReportCoverStats em {
  color: #ffffff;
}

.radarPage .radarReportCoverStats span {
  border-color: color-mix(in srgb, #ffffff 42%, transparent);
  background: color-mix(in srgb, #ffffff 18%, transparent);
}

.radarPage .radarTemplateSheetBackdrop,
.radarPage .radarModalBackdrop {
  background: color-mix(in srgb, var(--overlay-bg) 72%, transparent);
}

.radarPage .radarAlertSheet {
  border-right-color: var(--radar-line);
  background: var(--radar-panel);
}

.radarPage .radarAlertSummaryCard {
  border-color: var(--radar-line);
  background: var(--radar-panel-soft);
}

.radarPage .radarAlertRuleCard {
  border-color: var(--radar-line);
  background: var(--radar-panel-soft);
}

.radarPage .radarAlertRuleCard.active {
  border-color: rgba(20, 167, 158, 0.42);
  background: linear-gradient(90deg, rgba(20, 167, 158, 0.08), var(--radar-panel-soft));
}

.radarPage .radarAlertFilterTab {
  border-color: var(--radar-line);
  background: var(--radar-surface);
  color: var(--radar-body);
}

.radarPage .radarAlertFilterTab.active {
  color: var(--radar-blue);
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
}

.radarPage .radarAlertTemplateTab {
  border-color: var(--radar-line);
  background: var(--radar-surface);
  color: var(--radar-body);
}

.radarPage .radarAlertTemplateTab.active {
  color: var(--radar-blue);
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
}

.radarPage .radarAlertChip {
  border-color: var(--radar-line);
  background: var(--radar-surface);
  color: var(--radar-body);
}

.radarPage .radarAlertChip.active {
  color: var(--radar-blue);
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
}

.radarPage .radarAlertEditor {
  border-color: var(--radar-line);
  background: var(--radar-panel);
}

.radarPage .radarAlertEditorHead {
  border-bottom-color: var(--radar-line);
  background: var(--radar-panel-soft);
}

.radarPage .radarAlertEditorFooter {
  border-top-color: var(--radar-line);
  background: var(--radar-panel-soft);
}

.radarPage .radarAlertSourceStrip {
  border-color: var(--radar-line);
  background: var(--radar-panel-soft);
}

.radarPage .radarAlertPolicyCard {
  border-color: var(--radar-line);
  background: var(--radar-surface);
}

.radarPage .radarAlertExpression {
  border-color: rgba(20, 167, 158, 0.32);
  background: var(--radar-panel-soft);
}

.radarPage .radarAlertStepper {
  background: var(--radar-surface);
}

.radarPage .radarAlertStepper button {
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
}

.radarPage .radarAlertRuleCardBadge {
  color: var(--radar-blue);
  background: var(--radar-accent-faint);
}

.radarPage .radarAlertRuleCardBadge.off {
  color: var(--radar-muted);
  background: var(--radar-panel-soft);
}

.radarPage .commerceDataListPanel.radarDataListTable.cuiDataList {
  --commerce-list-cell-x: 22px;
  --commerce-list-head-height: 78px;
  --commerce-list-row-height: 142px;
  --commerce-list-line: #edf0f5;
  --commerce-list-text: #101828;
  --commerce-list-muted: #667085;
  border: 1px solid #eef1f5;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 14px 38px rgba(24, 32, 51, 0.06);
  overflow: hidden;
}

.radarPage .commerceDataListPanel.radarDataListTableCompact.cuiDataList {
  --commerce-list-cell-x: 16px;
  --commerce-list-head-height: 56px;
  --commerce-list-row-height: 64px;
  border-radius: 14px;
  box-shadow: none;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTableWrap {
  border: 0;
  border-radius: 0;
  background: #ffffff;
  overflow-x: auto;
  scrollbar-color: rgba(148, 163, 184, 0.65) rgba(148, 163, 184, 0.14);
  scrollbar-width: thin;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTableWrap::-webkit-scrollbar {
  height: 16px;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTableWrap::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTableWrap::-webkit-scrollbar-thumb {
  border: 4px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.7);
}

.radarPage .commerceDataListPanel.radarDataListTable .cuiDataListBody,
.radarPage .commerceDataListPanel.radarDataListTable .cuiDataListBodyInner {
  border: 0;
  background: #ffffff;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTable {
  width: 100%;
  min-width: 0;
  display: grid;
  border-collapse: collapse;
  color: var(--commerce-list-text);
  font-size: 14px;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTableRow,
.radarPage .commerceDataListPanel.radarDataListTable .cuiDataListTableRow {
  min-height: var(--commerce-list-row-height);
  align-items: center;
  gap: 0;
  border-bottom-color: var(--commerce-list-line);
  color: #344054;
  font-size: 14px;
  padding: 0;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTableRow.head,
.radarPage .commerceDataListPanel.radarDataListTable .cuiDataListTableHead {
  min-height: var(--commerce-list-head-height);
  border-bottom: 1px solid var(--commerce-list-line);
  background: #ffffff;
  color: var(--commerce-list-text);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: none;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTable th,
.radarPage .commerceDataListPanel.radarDataListTable .radarTable td,
.radarPage .commerceDataListPanel.radarDataListTable .radarTable .cuiDataListTableHeadCell,
.radarPage .commerceDataListPanel.radarDataListTable .radarTable .cuiDataListTableCell {
  min-width: 0;
  height: auto;
  border-bottom: 1px solid var(--commerce-list-line);
  color: inherit;
  font-size: 14px;
  line-height: 1.45;
  padding: 24px var(--commerce-list-cell-x);
  text-align: left;
  text-transform: none;
  vertical-align: middle;
  white-space: normal;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTable .cuiDataListTableHeadCell {
  color: var(--commerce-list-text);
  font-size: 14px;
  font-weight: 950;
  padding-top: 0;
  padding-bottom: 0;
}

.radarPage .commerceDataListPanel.radarDataListTable .radarTable .cuiDataListTableCell:first-child {
  color: var(--commerce-list-text);
  font-weight: 950;
}

.radarPage
  .commerceDataListPanel.radarDataListTable
  .radarTable
  .cuiDataListTableRow:not(.cuiDataListTableHead):hover {
  background: #fbfdff;
}

.radarPage .commerceDataListPanel.radarDataListTableCompact .radarTable .cuiDataListTableHeadCell,
.radarPage .commerceDataListPanel.radarDataListTableCompact .radarTable .cuiDataListTableCell {
  overflow: hidden;
  padding: 12px var(--commerce-list-cell-x);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage
  .commerceDataListPanel.radarDataListTableCompact
  .radarTable
  .cuiDataListTableHeadCell:not(:first-child),
.radarPage
  .commerceDataListPanel.radarDataListTableCompact
  .radarTable
  .cuiDataListTableCell:not(:first-child) {
  text-align: center;
}

.radarPage
  .commerceDataListPanel.radarDataListTableCompact
  .radarCompareMetricTable
  .cuiDataListTableHeadCell.highlight,
.radarPage
  .commerceDataListPanel.radarDataListTableCompact
  .radarCompareMetricTable
  .cuiDataListTableCell.highlight {
  background: color-mix(in srgb, var(--primary) 7%, #ffffff);
  color: #263b5d;
  font-weight: 950;
}

.radarPage .radarReportBuilderPanel .radarPanelActions {
  flex: 1 1 100%;
  min-width: 0;
}

.radarPage .radarReportTemplateHeaderActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.radarPage .radarReportTemplateHeaderActions button,
.radarPage .radarReportTemplateHeaderActions label {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

.radarPage .radarReportTemplateHeaderActions label > span {
  pointer-events: none;
}

.radarPage .radarReportTemplateHeaderActions input[type='file'] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.radarPage .radarReportBuilderGrid {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.radarPage .radarReportGenerateBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  padding: 14px 16px;
}

.radarPage .radarReportGenerateBar > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.radarPage .radarReportGenerateBar .radarButton {
  min-width: 150px;
  flex: 0 0 auto;
}

.radarPage .radarReportSourceHeader {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

@media (max-width: 760px) {
  .radarPage .radarReportGenerateBar {
    flex-direction: column;
    align-items: stretch;
  }
  .radarPage .radarReportGenerateBar .radarButton {
    width: 100%;
  }
  .radarPage .radarReportTemplateHeaderActions {
    justify-content: flex-start;
  }
}

.radarPage .radarReportChatBackdrop {
  z-index: 2700;
  padding: clamp(12px, 3vw, 28px);
}

.radarPage .radarReportChatDialog {
  width: min(1120px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  min-height: min(680px, calc(100vh - 28px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: var(--radar-panel);
  box-shadow: 0 24px 64px rgba(12, 32, 64, 0.28);
}

.radarPage .radarReportChatHead {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--radar-line);
  background:
    linear-gradient(135deg, rgba(255, 128, 31, 0.12), rgba(20, 167, 158, 0.08)), var(--radar-panel);
  padding: 14px 16px;
}

.radarPage .radarReportChatMark {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: var(--grad);
  color: #ffffff;
  box-shadow: 0 12px 22px color-mix(in srgb, var(--primary) 22%, transparent);
}

.radarPage .radarReportChatHead h2,
.radarPage .radarReportChatHead p {
  margin: 0;
}

.radarPage .radarReportChatHead h2 {
  color: var(--radar-text);
  font-size: 18px;
  line-height: 1.25;
}

.radarPage .radarReportChatHead em {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  padding: 3px 8px;
}

.radarPage .radarReportChatHead p {
  margin-top: 4px;
  color: var(--radar-body);
  font-size: 12px;
  font-weight: 760;
}

.radarPage .radarReportChatHead button,
.radarPage .radarReportChatComposer button,
.radarPage .radarReportChatSuggestions button {
  border: 1px solid var(--radar-line);
  background: var(--radar-control-bg);
  color: var(--radar-body);
  cursor: pointer;
}

.radarPage .radarReportChatHead button {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
}

.radarPage .radarReportChatHead button:hover,
.radarPage .radarReportChatSuggestions button:hover:not(:disabled) {
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
}

.radarPage .radarReportChatBody {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

.radarPage .radarReportChatContext {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  border-right: 1px solid var(--radar-line);
  background: var(--radar-panel-soft);
  padding: 16px;
}

.radarPage .radarReportChatContext > strong {
  color: var(--radar-text);
  font-size: 14px;
  font-weight: 950;
}

.radarPage .radarReportChatContext > span {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: var(--radar-panel);
  padding: 10px;
}

.radarPage .radarReportChatContext em {
  color: var(--radar-body);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.radarPage .radarReportChatContext b {
  min-width: 0;
  color: var(--radar-text);
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.radarPage .radarReportChatSuggestions {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.radarPage .radarReportChatSuggestions button {
  min-height: 38px;
  border-radius: 10px;
  color: var(--radar-text);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.35;
  padding: 8px 10px;
  text-align: left;
}

.radarPage .radarReportChatSuggestions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.radarPage .radarReportChatMain {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  background: var(--radar-panel);
}

.radarPage .radarReportChatMessages {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  overflow: auto;
  padding: 18px;
}

.radarPage .radarReportChatMessage {
  width: min(78%, 680px);
  display: grid;
  gap: 6px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: var(--radar-panel-soft);
  padding: 12px 14px;
}

.radarPage .radarReportChatMessage.user {
  justify-self: end;
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
}

.radarPage .radarReportChatMessage.error {
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(239, 68, 68, 0.08);
}

.radarPage .radarReportChatMessage strong {
  color: var(--radar-text);
  font-size: 12px;
  font-weight: 950;
}

.radarPage .radarReportChatMessage p {
  margin: 0;
  color: var(--radar-body);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.radarPage .radarReportChatMessage em {
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  overflow-wrap: anywhere;
}

.radarPage .radarReportChatTyping {
  display: inline-flex;
  gap: 5px;
}

.radarPage .radarReportChatTyping i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--radar-blue);
  animation: radarReportChatTyping 1s ease-in-out infinite;
}

.radarPage .radarReportChatTyping i:nth-child(2) {
  animation-delay: 0.12s;
}

.radarPage .radarReportChatTyping i:nth-child(3) {
  animation-delay: 0.24s;
}

.radarPage .radarReportChatError {
  margin: 0 18px 12px;
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
  font-size: 12px;
  font-weight: 820;
  line-height: 1.45;
  padding: 9px 11px;
}

.radarPage .radarReportChatComposer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 10px;
  border-top: 1px solid var(--radar-line);
  background: var(--radar-panel-soft);
  padding: 12px;
}

.radarPage .radarReportChatComposer textarea {
  min-height: 72px;
  max-height: 160px;
  resize: vertical;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: var(--radar-control-bg);
  color: var(--radar-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  padding: 10px 12px;
}

.radarPage .radarReportChatComposer textarea::placeholder {
  color: var(--radar-muted);
}

.radarPage .radarReportChatComposer button {
  width: 44px;
  height: 44px;
  align-self: end;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: var(--grad);
  color: #ffffff;
}

.radarPage .radarReportChatComposer button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.4);
  opacity: 0.58;
}

@media (max-width: 860px) {
  .radarPage .radarReportChatDialog {
    width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
    min-height: calc(100vh - 18px);
  }

  .radarPage .radarReportChatBody {
    grid-template-columns: 1fr;
  }

  .radarPage .radarReportChatContext {
    border-right: 0;
    border-bottom: 1px solid var(--radar-line);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .radarPage .radarReportChatContext > strong,
  .radarPage .radarReportChatSuggestions {
    grid-column: 1 / -1;
  }

  .radarPage .radarReportChatSuggestions {
    grid-template-columns: 1fr;
  }

  .radarPage .radarReportChatMessage {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .radarPage .radarReportChatHead {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    padding: 12px;
  }

  .radarPage .radarReportChatMark,
  .radarPage .radarReportChatHead button {
    width: 36px;
    height: 36px;
  }

  .radarPage .radarReportChatContext {
    grid-template-columns: 1fr;
  }
}

.radarPage .radarReportTopGrid {
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.58fr);
  gap: 16px;
}

@media (max-width: 1180px) {
  .radarPage .radarReportTopGrid {
    grid-template-columns: 1fr;
  }
}

.radarPage .radarReportOverviewPanel .radarReportInsightGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
  align-items: stretch;
}

.radarPage .radarReportOverviewPanel .radarReportOverviewCard {
  min-width: 0;
}

.radarPage .radarReportOverviewPanel .radarReportOverviewCard p,
.radarPage .radarReportOverviewPanel .radarReportOverviewCard strong,
.radarPage .radarReportOverviewPanel .radarReportOverviewCard span,
.radarPage .radarReportOverviewPanel .radarReportOverviewCard em {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.radarPage .radarReportOverviewPanel .radarReportOverviewCard.visual {
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.radarPage .radarReportOverviewPanel .radarReportOverviewCard.visual .radarDonut {
  flex: 0 0 auto;
  width: 116px;
  max-width: 116px;
}

.radarPage .radarReportOverviewPanel .radarReportOverviewCard.visual > div:last-child {
  min-width: 0;
}

.radarPage .radarReportOverviewCard.action {
  gap: 12px;
}

.radarPage .radarReportOverviewCard.action > div {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.radarPage .radarReportActionDraftList {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.radarPage .radarReportActionDraftList article {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 8px 10px;
}

.radarPage .radarReportActionDraftList article > i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--radar-line);
}

.radarPage .radarReportActionDraftList article > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.radarPage .radarReportActionDraftList article > div strong {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.4;
}

.radarPage .radarReportActionDraftList article > div span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.35;
}

.radarPage .radarReportActionDraftList article > em {
  flex: 0 0 auto;
  align-self: start;
  white-space: nowrap;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 850;
  font-style: normal;
}

.radarPage .radarReportReadinessCard {
  min-width: 0;
  display: grid;
  gap: 8px;
  border-radius: 12px;
  padding: 12px 14px;
}

.radarPage .radarReportReadinessCard > strong {
  font-size: 24px;
  font-weight: 950;
  line-height: 1.1;
}

.radarPage .radarReportReadinessBars {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.radarPage .radarReportReadinessBars span {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
}

.radarPage .radarReportReadinessBars span em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-size: 12px;
}

.radarPage .radarReportReadinessBars span::before {
  content: '';
  grid-column: 2;
  grid-row: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--radar-line);
}

.radarPage .radarReportReadinessBars span i {
  grid-column: 2;
  grid-row: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--radar-blue);
}

.radarPage .radarReportReadinessBars span b {
  grid-column: 3;
  grid-row: 1;
  text-align: right;
  font-size: 12px;
  font-weight: 900;
}

.radarPage .radarReportTopGrid {
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 0.82fr);
  gap: 16px;
  align-items: start;
}

.radarPage .radarReportOverviewPanel,
.radarPage .radarReportConclusionPanel,
.radarPage .radarReportActionPanel {
  align-self: stretch;
}

.radarPage .radarReportBuilderPanel {
  min-height: 0;
  align-self: start;
}

.radarPage .radarReportBuilderGrid {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.radarPage .radarReportFormGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.radarPage .radarReportGenerateBar {
  padding: 12px 14px;
  gap: 10px;
}

.radarPage .radarReportGenerateBar .radarButton {
  min-width: 128px;
}

.radarPage .radarReportBuilderPanel .radarSourceChecklist label {
  padding: 9px 10px;
}

.radarPage .radarReportOverviewPanel .radarReportInsightGrid {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.radarPage .radarReportOverviewPanel .radarReportOverviewCard.visual {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: 12px;
}

.radarPage .radarReportCoverageBody {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
}

.radarPage .radarReportCoverageBody strong {
  font-size: 16px;
  font-weight: 950;
  color: var(--radar-text);
}

.radarPage .radarReportCoverageDonut {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
}

.radarPage .radarReportCoverageDonut svg {
  display: block;
  width: 132px;
  height: 132px;
}

.radarPage .radarReportCoverageTrack {
  stroke: var(--radar-line);
  opacity: 0.55;
}

.radarPage .radarReportCoverageArc {
  cursor: pointer;
  transition:
    stroke-width 0.16s ease,
    opacity 0.16s ease;
}

.radarPage .radarReportCoverageDonutCenter {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  pointer-events: none;
}

.radarPage .radarReportCoverageDonutCenter strong {
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
  color: var(--radar-text);
}

.radarPage .radarReportCoverageDonutCenter span {
  font-size: 11px;
  font-weight: 850;
  color: var(--radar-muted);
}

.radarPage .radarReportCoverageTip {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid var(--radar-line);
  background: var(--radar-panel);
  box-shadow: 0 8px 22px rgba(33, 72, 128, 0.16);
  padding: 6px 10px;
  pointer-events: none;
}

.radarPage .radarReportCoverageTip i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.radarPage .radarReportCoverageTip b {
  font-size: 12px;
  font-weight: 900;
  color: var(--radar-text);
}

.radarPage .radarReportCoverageTip span {
  font-size: 12px;
  font-weight: 800;
  color: var(--radar-muted);
}

.radarPage .radarReportConclusionPanel {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.radarPage .radarReportActionPanel {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

@media (max-width: 1280px) {
  .radarPage .radarReportTopGrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 880px) {
  .radarPage .radarReportTopGrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .radarPage .radarReportActionPanel {
    grid-column: auto;
  }
  .radarPage .radarReportFormGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.radarMonitorLayout {
  grid-template-columns: 1fr;
  align-items: start;
}

.radarTwoColumn.wideRight.radarCompareResultLayout {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: stretch;
}

.radarTwoColumn.wideRight.radarCompareResultLayout > .radarCompareCorePanel {
  min-height: 626px;
}

.radarCompareResultRail {
  min-height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 10px;
}

.radarCompareResultRail > .radarPanel {
  min-height: 0;
}

.radarCompareResultConclusionPanel {
  gap: 12px;
  padding: 16px;
}

.radarCompareResultConclusionPanel .radarSwotGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.radarCompareResultConclusionPanel .radarSwotGrid article {
  min-height: 142px;
  gap: 8px;
  padding: 12px;
}

.radarCompareResultConclusionPanel .radarSwotGrid strong {
  font-size: 14px;
  line-height: 1.25;
}

.radarCompareResultConclusionPanel .radarSwotGrid span {
  font-size: 12px;
  line-height: 1.45;
}

.radarCompareResultDecisionPanel {
  align-content: start;
  gap: 14px;
  padding: 16px;
}

.radarCompareResultDecisionPanel .radarBullets {
  gap: 8px;
}

.radarCompareResultDecisionPanel .radarButton {
  align-self: end;
  margin-top: auto;
}

.radarAlertsLayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.radarAlertsTopRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 0.68fr);
  gap: 16px;
  align-items: stretch;
}

.radarAlertsTopRow > .radarPanel,
.radarAlertsTopRow > .radarSideStack {
  min-width: 0;
}

.radarPage .radarDecisionLayout {
  display: grid;
  grid-template-columns: minmax(420px, 0.86fr) minmax(560px, 1.14fr);
  gap: 14px;
  align-items: start;
}

@media (max-width: 1080px) {
  .radarAlertsTopRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .radarAlertsTopRow {
    grid-template-columns: 1fr;
  }
}

.radarAlertSheet {
  width: min(880px, 60vw);
  min-width: 620px;
  height: 100%;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 16px;
  border-right: 1px solid rgba(207, 222, 240, 0.96);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 24px 0 64px rgba(31, 62, 108, 0.18);
  padding: 22px;
}

.radarAlertSummary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.radarAlertSummaryCard,
.radarAlertPolicyCard,
.radarAlertEditor,
.radarAlertSourceStrip {
  border: 1px solid var(--radar-line);
  background: rgba(255, 255, 255, 0.94);
}

.radarAlertSummaryCard {
  min-height: 68px;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.radarAlertSummaryCard .label,
.radarAlertSummaryCard .note,
.radarAlertFieldLabel,
.radarAlertSectionTitle span {
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 900;
}

.radarAlertSummaryCard .value {
  color: var(--radar-text);
  font-size: 22px;
  font-weight: 900;
}

.radarAlertRuleSidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.radarAlertRuleListToolbar,
.radarAlertFieldLabel,
.radarAlertSectionTitle,
.radarAlertEditorFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.radarAlertRuleListToolbar {
  min-height: 38px;
}

.radarAlertRuleListToolbar .title {
  color: var(--radar-text);
  font-size: 15px;
  font-weight: 900;
}

.radarAlertFilterTabs,
.radarAlertChipGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.radarAlertFilterTab,
.radarAlertTemplateTab,
.radarAlertChip {
  border: 1px solid var(--radar-line);
  background: #fff;
  color: #41516a;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.radarAlertFilterTab {
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  white-space: nowrap;
}

.radarAlertFilterTab.active,
.radarAlertTemplateTab.active,
.radarAlertChip.active {
  color: #075f5a;
  border-color: #9be0d8;
  background: #e7f8f6;
}

.radarAlertRuleCard {
  position: relative;
  min-height: 68px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  padding: 12px;
}

.radarAlertRuleCard.active {
  border-color: #aee8e2;
  background: linear-gradient(90deg, rgba(231, 248, 246, 0.96), rgba(255, 255, 255, 0.95));
  box-shadow: 0 14px 28px rgba(20, 167, 158, 0.1);
}

.radarAlertRuleCard.active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: #14a79e;
}

.radarAlertRuleCardIcon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #fff6e2;
  color: #f5a524;
}

.radarAlertRuleCardIcon.pink {
  color: #f0447e;
  background: #fff0f5;
}

.radarAlertRuleCardIcon.blue {
  color: #356df3;
  background: #eef3ff;
}

.radarAlertRuleCardIcon.green {
  color: #12a66a;
  background: #eaf8f1;
}

.radarAlertRuleCardBody,
.radarAlertEditor {
  min-width: 0;
}

.radarAlertRuleCardName {
  color: var(--radar-text);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
  margin-bottom: 4px;
}

.radarAlertRuleCardMeta {
  color: #516176;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarAlertRuleCardBadge {
  height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #e7f8f6;
  color: #067f78;
  font-size: 10px;
  font-weight: 900;
  padding: 0 7px;
  white-space: nowrap;
}

.radarAlertRuleCardBadge.off {
  color: #8793a5;
  background: #f0f3f7;
}

.radarAlertSourceStrip {
  margin-top: auto;
  border-radius: 10px;
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 800;
  padding: 12px 14px;
}

.radarAlertSourceStrip strong {
  display: block;
  margin-bottom: 6px;
  color: var(--radar-text);
  font-size: 13px;
}

.radarAlertSourceItem,
.radarAlertPolicyRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #edf2f7;
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 800;
}

.radarAlertSourceItem {
  padding: 4px 0;
}

.radarAlertSourceItem:first-of-type,
.radarAlertPolicyRow:first-of-type {
  border-top: 0;
}

.radarAlertSourceItem strong,
.radarAlertPolicyRow strong {
  color: #152239;
  font-size: 12px;
  margin-bottom: 0;
}

.radarAlertEditor {
  border-radius: 12px;
  box-shadow: 0 20px 52px rgba(22, 39, 68, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.radarAlertEditorHead {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #edf2f7;
  background: #f9fbfd;
  padding: 0 16px;
}

.radarAlertEditorHead .info strong {
  color: var(--radar-text);
  font-size: 18px;
  font-weight: 900;
}

.radarAlertEditorHead .info span {
  display: block;
  margin-top: 3px;
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 800;
}

.radarAlertEditorBody {
  flex: 1 1;
  overflow: auto;
  padding: 14px 16px 10px;
}

.radarAlertFieldRow,
.radarAlertBuilderGrid {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.radarAlertFieldRow {
  grid-template-columns: 1fr 140px;
}

.radarAlertBuilderGrid {
  grid-template-columns: 1fr 84px 1fr;
}

.radarAlertSectionTitle {
  margin: 4px 0 10px;
}

.radarAlertSectionTitle h2 {
  margin: 0;
  color: var(--radar-text);
  font-size: 16px;
  font-weight: 900;
}

.radarAlertTemplateTabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}

.radarAlertTemplateTab {
  min-width: 0;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  padding: 0 6px;
  text-align: center;
}

.radarAlertBuilder {
  border-top: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
  margin-bottom: 10px;
  padding: 10px 0 12px;
}

.radarAlertRangeRow {
  display: grid;
  grid-template-columns: 1fr 104px;
  gap: 12px;
  align-items: end;
  margin-bottom: 10px;
}

.radarAlertRangeLabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.radarAlertRangeLabel .title {
  color: #152239;
  font-size: 13px;
  font-weight: 900;
}

.radarAlertRangeLabel .bounds {
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 900;
}

.radarAlertRangeTrack {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #edf1f5;
  overflow: hidden;
}

.radarAlertRangeTrack input[type='range'] {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.radarAlertRangeFill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #14a79e, #356df3);
}

.radarAlertRangeThumb {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 4px solid #14a79e;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 167, 158, 0.28);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.radarAlertStepper {
  height: 44px;
  border: 1px solid #b7e5df;
  border-radius: 8px;
  background: #fff;
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  overflow: hidden;
}

.radarAlertStepper button {
  height: 100%;
  border: 0;
  background: #e7f8f6;
  color: #067f78;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
}

.radarAlertStepper strong {
  color: #102139;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.radarAlertChip {
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  white-space: nowrap;
}

.radarAlertChip .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.radarAlertPolicyGrid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 12px;
  margin-bottom: 12px;
}

.radarAlertPolicyCard {
  min-height: 90px;
  border-radius: 10px;
  padding: 10px 12px;
}

.radarAlertPolicyCard .policy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #17243b;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 6px;
}

.radarAlertPolicyRow {
  height: 25px;
}

.radarAlertExpression {
  border: 1px solid #bce8e3;
  border-radius: 10px;
  background: linear-gradient(180deg, #f9fffe, #ffffff);
  margin-bottom: 8px;
  padding: 10px 12px;
}

.radarAlertExpression .label {
  color: #075f5a;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 6px;
}

.radarAlertExpression .code {
  color: #142139;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.55;
}

.radarAlertExpression .code .hi {
  color: #14a79e;
}

.radarAlertEditorFooter {
  margin-top: auto;
  border-top: 1px solid #edf2f7;
  background: #fbfcfe;
  padding: 10px 16px;
}

.radarModal .radarField select[multiple] {
  min-height: 112px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.radarModal,
.radarModalGrid {
  overflow: visible;
}

.radarMonitorShopField {
  grid-column: span 2;
  position: relative;
  z-index: 60;
}

.radarMultiSelect {
  position: relative;
  isolation: isolate;
}

.radarMultiSelectTrigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255, 128, 31, 0.16);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-ink);
  font: inherit;
  font-weight: 700;
  padding: 0 12px;
  text-align: left;
  cursor: pointer;
}

.radarMultiSelectTrigger span {
  color: inherit;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarMultiSelectTrigger strong {
  flex: 0 0 auto;
  color: var(--radar-orange-strong);
  font-size: 12px;
  line-height: 1;
}

.radarMultiSelectTrigger:focus-visible {
  outline: none;
  border-color: rgba(255, 128, 31, 0.42);
  box-shadow: 0 0 0 3px rgba(255, 128, 31, 0.14);
}

.radarMultiSelectMenu {
  position: absolute;
  z-index: 120;
  inset-inline: 0;
  top: calc(100% + 6px);
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(255, 128, 31, 0.18);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.radarMultiSelectMenu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--radar-ink);
  font-weight: 700;
  padding: 6px 8px;
  text-align: left;
  cursor: pointer;
}

.radarMultiSelectMenu button span {
  color: inherit;
  font-size: 13px;
  font-weight: 800;
}

.radarMultiSelectMenu button:hover,
.radarMultiSelectMenu button.active {
  background: rgba(255, 128, 31, 0.1);
  color: var(--radar-orange-strong);
}

.radarMultiSelectCheck {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 128, 31, 0.28);
  border-radius: 5px;
  color: var(--radar-orange-strong);
  font-size: 12px;
}

.radarSearchSelect {
  position: relative;
  isolation: isolate;
}

.radarSearchSelectTrigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255, 128, 31, 0.16);
  border-radius: 8px;
  background: #ffffff;
  color: var(--radar-ink);
  font: inherit;
  font-weight: 800;
  padding: 0 12px;
  text-align: left;
  cursor: pointer;
}

.radarSearchSelectTrigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarSearchSelectTrigger strong {
  flex: 0 0 auto;
  color: var(--radar-orange-strong);
  font-size: 12px;
  line-height: 1;
}

.radarSearchSelectTrigger:focus-visible {
  outline: none;
  border-color: rgba(255, 128, 31, 0.42);
  box-shadow: 0 0 0 3px rgba(255, 128, 31, 0.14);
}

.radarSearchSelectMenu {
  position: absolute;
  z-index: 130;
  inset-inline: 0;
  top: calc(100% + 6px);
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 128, 31, 0.18);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  min-width: min(560px, calc(100vw - 64px));
  max-height: min(620px, calc(100vh - 140px));
  overflow: visible;
}

.radarSearchSelectMenu input {
  min-height: 36px;
  border-color: rgba(255, 128, 31, 0.2);
  background: #fffaf5;
}

.radarSearchCategoryPanel {
  position: absolute;
  left: calc(100% + 10px);
  top: 0;
  width: 300px;
  max-height: min(540px, calc(100vh - 180px));
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 128, 31, 0.14);
  border-radius: 8px;
  background: #fffaf5;
  padding: 8px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  transform-origin: left center;
  animation: radarSearchFilterSlide 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.radarSearchCategoryPanel > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--radar-ink);
  font-size: 12px;
  font-weight: 900;
}

.radarSearchCategoryPanel > div:first-child button {
  border: 0;
  background: transparent;
  color: var(--radar-orange-strong);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.radarSearchCategoryOptions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 430px;
  overflow: auto;
}

.radarSearchCategoryOptions button {
  min-height: 28px;
  border: 1px solid rgba(255, 128, 31, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 850;
  padding: 0 10px;
  cursor: pointer;
}

.radarSearchCategoryOptions button.active {
  border-color: rgba(255, 128, 31, 0.45);
  background: rgba(255, 128, 31, 0.12);
  color: var(--radar-orange-strong);
}

.radarSearchCategoryOptions span {
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 800;
}

.radarSearchSelectList {
  display: grid;
  gap: 4px;
  max-height: 472px;
  overflow: auto;
}

.radarSearchSelectList button {
  width: 100%;
  display: grid;
  gap: 3px;
  min-height: 54px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--radar-ink);
  padding: 7px 8px;
  text-align: left;
  cursor: pointer;
}

.radarSearchSelectFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(255, 128, 31, 0.12);
  padding-top: 8px;
}

.radarSearchSelectFooter span {
  min-width: 0;
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 800;
}

.radarSearchSelectFooterActions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.radarSearchSelectFooter button {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid rgba(255, 128, 31, 0.24);
  border-radius: 7px;
  background: #fff7ed;
  color: var(--radar-orange-strong);
  font-size: 12px;
  font-weight: 900;
  padding: 0 10px;
  cursor: pointer;
}

.radarSearchSelectFooter button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.radarSearchSelectList button:hover,
.radarSearchSelectList button.active {
  background: rgba(255, 128, 31, 0.1);
  color: var(--radar-orange-strong);
}

.radarSearchSelectList button span {
  color: inherit;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.radarSearchSelectList button em,
.radarSearchSelectEmpty {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.radarSearchSelectEmpty {
  padding: 10px 8px;
}

.radarPage .radarModal .radarSearchSelect {
  z-index: 80;
}

.radarPage .radarModal .radarSearchSelectMenu {
  position: relative;
  inset-inline: auto;
  top: auto;
  width: 100%;
  min-width: 0;
  max-height: none;
  overflow: visible;
}

.radarPage .radarModal .radarSearchSelectList {
  min-height: 132px;
  max-height: clamp(236px, 36dvh, 388px);
  overflow: auto;
  overscroll-behavior: contain;
}

.radarPage .radarModal .radarSearchSelectFooter {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -8px -8px;
  padding: 8px;
  border-radius: 0 0 8px 8px;
  background: #ffffff;
}

.radarPage .radarModal .radarSearchCategoryPanel {
  max-height: min(48dvh, 430px);
}

.radarPage .radarModal .radarSearchCategoryOptions {
  max-height: min(38dvh, 320px);
}

@media (max-width: 1180px) {
  .radarSearchCategoryPanel {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    max-height: none;
    box-shadow: none;
    transform-origin: top center;
    animation: radarSearchFilterDrop 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .radarSearchCategoryOptions {
    max-height: 180px;
  }

  .radarPage .radarModal .radarSearchSelectList {
    max-height: clamp(190px, 32dvh, 320px);
  }
}

.radarSearchSelectHint,
.radarSearchSelectError {
  padding: 8px;
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.radarSearchSelectError {
  color: #dc2626;
}

.radarModalError {
  margin: 10px 0 0;
  color: #dc2626;
  font-size: 13px;
  font-weight: 800;
}

.radarPage .radarReportBuilderPanel .radarReportFormGrid {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.radarPage .radarReportBuilderPanel .radarReportFormGrid .radarField,
.radarPage .radarReportBuilderPanel .radarReportFormGrid .radarField select,
.radarPage .radarReportBuilderPanel .radarReportFormGrid .radarDateRangeField,
.radarPage .radarReportBuilderPanel .radarReportFormGrid .radarDateRangeField > button {
  min-width: 0;
  width: 100%;
}

.radarPage .radarReportBuilderPanel .radarDateRangePopover {
  position: absolute;
  top: 0;
  left: calc(100% + 12px);
  right: auto;
  width: min(360px, calc(100vw - 48px));
  max-width: 360px;
  margin-top: 0;
  transform-origin: left top;
  animation: radarReportDatePopoverIn 160ms ease-out;
}

@media (max-width: 880px) {
  .radarPage .radarReportBuilderPanel .radarDateRangePopover {
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    margin-top: 0;
    transform-origin: top center;
  }
}

.radarAlertDateRange .radarBlankDateInput.is-empty,
.radarAlertDateRange .radarBlankDateInput.is-empty::-webkit-datetime-edit,
.radarAlertDateRange .radarBlankDateInput.is-empty::-webkit-datetime-edit-text,
.radarAlertDateRange .radarBlankDateInput.is-empty::-webkit-datetime-edit-month-field,
.radarAlertDateRange .radarBlankDateInput.is-empty::-webkit-datetime-edit-day-field,
.radarAlertDateRange .radarBlankDateInput.is-empty::-webkit-datetime-edit-year-field {
  color: transparent;
}

.radarAlertDateRange .radarBlankDateInput.is-empty::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
}

@keyframes radarOwnStorePickerFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes radarOwnStorePickerIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes radarReportChatTyping {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@keyframes radarSearchFilterSlide {
  from {
    opacity: 0;
    transform: translateX(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes radarSearchFilterDrop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes radarReportDatePopoverIn {
  from {
    opacity: 0;
    transform: translateX(-8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Historical rules still referenced by current components. Source: 8f536bfb. */
.radarMonitorLayoutSingle {
  grid-template-columns: 1fr;
}

.radarMonitorLayoutSingle .radarMonitorBoard,
.radarMonitorLayoutSingle > .radarPanel {
  min-width: 0;
}

.radarCompareDecisionPanel {
  min-height: 100%;
  align-content: start;
}

.radarCompareTemplatePanel {
  align-content: start;
}

.radarCompareTemplatePanel .radarTemplateList {
  grid-auto-rows: max-content;
}

.radarCompareTemplatePanel .radarTemplateList button {
  min-height: 68px;
}

.radarCompareDecisionPanel {
  align-content: space-between;
}

.radarAlertDistributionPanel .radarDistribution {
  grid-template-columns: 158px max-content;
  justify-content: center;
  align-content: center;
  gap: 20px;
  min-height: 292px;
}

.radarAlertDistributionPanel .radarDonut {
  width: min(158px, 100%);
}

.radarAlertDistributionPanel .radarDistributionList {
  width: max-content;
  gap: 7px;
  justify-self: start;
}

.radarAlertDistributionPanel .radarDistributionList span {
  grid-template-columns: 9px max-content auto;
  gap: 6px 14px;
  justify-content: start;
}

.radarAlertDistributionPanel .radarDistributionList em,
.radarAlertDistributionPanel .radarDistributionList strong {
  font-size: 12px;
  white-space: nowrap;
}

.radarReportLayout {
  display: grid;
  gap: 16px;
}

.radarReportLayout .radarStack,
.radarReportListPanel {
  min-width: 0;
}

.radarReportLayout .radarReportInsightGrid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.radarReportTable {
  min-width: 1420px;
  table-layout: fixed;
}

.radarReportTable th,
.radarReportTable td {
  white-space: nowrap;
}

.radarReportTable th:nth-child(1),
.radarReportTable td:nth-child(1) {
  width: 240px;
}

.radarReportTable th:nth-child(4),
.radarReportTable td:nth-child(4),
.radarReportTable th:nth-child(7),
.radarReportTable td:nth-child(7) {
  width: 160px;
}

.radarReportTable th:nth-child(12),
.radarReportTable td:nth-child(12) {
  width: 206px;
}

.radarReportTableActions {
  justify-content: flex-end;
}

.radarReportTableActions button {
  width: auto;
  min-width: 42px;
  padding: 0 9px;
}

.radarSheetResizeHandle {
  position: absolute;
  top: 0;
  right: -6px;
  z-index: 4;
  width: 12px;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: col-resize;
}

.radarSheetResizeHandle::after {
  content: '';
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 5px;
  width: 2px;
  border-radius: 999px;
  background: rgba(22, 119, 255, 0.22);
  opacity: 0;
  transition: opacity 120ms ease;
}

.radarSheetResizeHandle:hover::after {
  opacity: 1;
}

.radarReportLayout .radarReportOverviewPanel .radarReportInsightGrid {
  display: grid;
  grid-template-columns: minmax(250px, 0.82fr) minmax(260px, 1fr) minmax(360px, 1.28fr);
  gap: 14px;
}

.radarReportLayout .radarReportOverviewCard {
  min-height: 172px;
  border-radius: 14px;
  padding: 18px;
  box-shadow: none;
}

.radarReportLayout .radarReportOverviewCard.visual {
  grid-template-columns: 150px minmax(0, 1fr);
}

.radarReportLayout .radarReportOverviewCard.visual .radarDonut {
  width: 150px;
}

.radarReportLayout .radarReportOverviewCard.visual p {
  color: #183452;
  font-weight: 880;
}

.radarReportLayout .radarReportOverviewCard.stats {
  gap: 10px;
}

.radarReportLayout .radarReportOverviewCard.top {
  gap: 9px;
}

.radarReportLayout .radarReportOverviewCard.trend {
  grid-column: span 1;
  min-height: 182px;
}

.radarReportLayout .radarReportOverviewCard.action {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(150px, 0.45fr);
  gap: 14px;
  min-height: 182px;
}

.radarReportLayout .radarReportOverviewCard.action > div {
  min-width: 0;
}

@media (max-width: 1180px) {
  .radarReportLayout .radarReportInsightGrid,
  .radarReportLayout .radarReportOverviewPanel .radarReportInsightGrid {
    grid-template-columns: 1fr;
  }

  .radarReportLayout .radarReportOverviewCard.trend,
  .radarReportLayout .radarReportOverviewCard.action {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .radarReportLayout .radarReportOverviewCard.action {
    grid-template-columns: 1fr;
  }

  .radarSheetResizeHandle {
    display: none;
  }
}

/* Historical rules still referenced by current components. Source: 3f6820e1. */

/*
 * Preserved from feat/web-shop-competitor-zsyq during develop CSS partition sync.
 * Keep new changes in this module file; do not move them back to global styles.css.
 */

.radarTemplateList button {
  position: relative;
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.radarTemplateList button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.radarTemplateIncompatible {
  position: absolute;
  top: 6px;
  right: 8px;
  max-width: calc(100% - 16px);
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  border-radius: 4px;
  background: var(--surface-panel-strong);
  color: var(--warning);
  font-size: 10px;
  line-height: 1.2;
  white-space: normal;
}

.radarQuickEntry {
  min-width: 0;
  min-height: 74px;
  display: grid;
  grid-template-columns: 48px minmax(0, 0.9fr) minmax(132px, 1.1fr);
  align-items: center;
  column-gap: 12px;
  border: 1px solid var(--radar-line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--radar-text);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(33, 72, 128, 0.04);
}

.radarQuickEntryIcon {
  grid-row: 1 / span 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eaf3ff;
  color: #1677ff;
}

.radarQuickEntry.red > .radarQuickEntryIcon {
  background: #fff0f1;
  color: #ef4444;
}

.radarQuickEntry.cyan > .radarQuickEntryIcon {
  background: #eaf8ff;
  color: #0284c7;
}

.radarPage .radarDecisionShortcutGrid .radarQuickEntry > .radarQuickEntryCopy,
.radarPage .radarDecisionShortcutGrid .radarQuickEntry > .radarQuickEntryFlow {
  min-width: 0;
  width: auto;
  height: auto;
  display: grid;
  grid-row: auto;
  gap: 4px;
  place-items: initial;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.radarQuickEntryCopy strong,
.radarQuickEntryCopy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarQuickEntryFlow {
  align-self: stretch;
  align-content: center;
  border-left: 1px solid var(--radar-line);
  padding-left: 14px;
}

.radarQuickEntryFlow strong,
.radarQuickEntryFlow em {
  overflow: visible;
  white-space: normal;
}

.radarQuickEntryFlow strong {
  font-size: 13px;
  font-weight: 950;
}

.radarOwnStoreWorkspaceGrid {
  --radar-own-store-panel-height: 940px;
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  gap: 14px;
  align-items: stretch;
}

.radarOwnStorePortfolio,
.radarOwnStorePageSize {
  min-width: 0;
}

.radarOwnStorePortfolio,
.radarOwnStoreManager {
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(33, 72, 128, 0.04);
  height: var(--radar-own-store-panel-height);
  min-height: 0;
}

.radarOwnStorePortfolio {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  align-content: stretch;
  gap: 16px;
  overflow: hidden;
  padding: 16px;
}

.radarOwnStoreManager {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}

.radarOwnStorePortfolioHeader,
.radarOwnStorePortfolioChartHeader,
.radarOwnStoreManagerHeader,
.radarOwnStoreManagerActions,
.radarOwnStoreSearch,
.radarOwnStoreSectionTitle {
  display: flex;
  align-items: center;
}

.radarOwnStorePortfolioHeader,
.radarOwnStorePortfolioChartHeader,
.radarOwnStoreManagerHeader,
.radarOwnStoreSectionTitle {
  justify-content: space-between;
  gap: 12px;
}

.radarOwnStorePortfolioHeader > div,
.radarOwnStorePortfolioChartHeader > div,
.radarOwnStoreSectionTitle > div {
  min-width: 0;
}

.radarOwnStorePortfolioHeader span {
  display: block;
  color: #176b9c;
  font-size: 11px;
  font-weight: 850;
}

.radarOwnStorePortfolioHeader h3 {
  margin: 4px 0 0;
  color: var(--radar-text);
  font-size: 18px;
  line-height: 1.2;
}

.radarOwnStorePortfolioHeader small {
  max-width: 142px;
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.5;
  text-align: right;
}

.radarOwnStorePortfolioMetrics {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--radar-line);
  border-left: 1px solid var(--radar-line);
}

.radarOwnStorePortfolioMetrics > div {
  min-width: 0;
  display: grid;
  gap: 5px;
  border-right: 1px solid var(--radar-line);
  border-bottom: 1px solid var(--radar-line);
  padding: 11px 12px;
}

.radarOwnStorePortfolioMetrics span,
.radarOwnStorePortfolioChartHeader span,
.radarOwnStorePortfolioFeatured span {
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 760;
}

.radarOwnStorePortfolioMetrics strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarOwnStorePortfolioMetrics small {
  min-width: 0;
  min-height: 15px;
  overflow: hidden;
  color: var(--radar-muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarOwnStorePortfolioMetrics > .radarOwnStorePortfolioMetricActions {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 0;
  padding: 0;
  pointer-events: none;
}

.radarOwnStorePortfolioMetricActions button {
  min-width: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.radarOwnStorePortfolioMetricActions button:hover {
  background: rgba(32, 105, 214, 0.035);
}

.radarOwnStorePortfolioMetricActions button:focus-visible,
.radarOwnStorePortfolioMetricActions button.is-selected {
  background: rgba(32, 105, 214, 0.055);
  box-shadow: inset 0 0 0 2px rgba(32, 105, 214, 0.7);
  outline: 0;
}

.radarOwnStorePortfolioMetricActions button:disabled {
  cursor: wait;
}

.radarOwnStorePortfolioChart {
  min-width: 0;
  border-top: 1px solid var(--radar-line);
  padding-top: 14px;
}

.radarOwnStorePortfolioChartHeader strong {
  display: block;
  color: var(--radar-text);
  font-size: 14px;
  font-weight: 900;
}

.radarOwnStorePortfolioChartHeader span {
  display: block;
  margin-top: 3px;
}

.radarOwnStorePortfolioChartCanvas {
  margin-top: 4px;
}

.radarOwnStorePortfolioFeatured {
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--radar-line);
  padding-top: 13px;
}

.radarOwnStorePortfolioFeatured strong {
  min-width: 0;
  overflow: hidden;
  color: var(--radar-text);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarOwnStorePortfolioFeatured em {
  color: var(--radar-body);
  font-size: 12px;
  font-style: normal;
  font-weight: 720;
}

.radarOwnStorePortfolioLegend {
  display: grid;
  min-height: 0;
  gap: 2px;
  overflow-y: scroll;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-color: #95a7bd transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.radarOwnStorePortfolioLegend::-webkit-scrollbar {
  width: 6px;
}

.radarOwnStorePortfolioLegend::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #95a7bd;
}

.radarOwnStorePortfolioLegend::-webkit-scrollbar-track {
  background: #edf2f7;
}

.radarOwnStorePortfolioLegend button {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--radar-body);
  padding: 7px 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.radarOwnStorePortfolioLegend button:hover,
.radarOwnStorePortfolioLegend button:focus-visible,
.radarOwnStorePortfolioLegend button.is-selected {
  border-left-color: #2069d6;
  background: #f3f7fd;
  outline: 0;
}

.radarOwnStorePortfolioLegend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.radarOwnStorePortfolioLegend span {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarOwnStorePortfolioLegend strong {
  color: var(--radar-text);
  font-size: 12px;
  font-weight: 900;
}

.radarOwnStorePortfolioLegend button.is-unavailable strong {
  color: var(--radar-muted);
  font-weight: 780;
}

.radarOwnStoreSectionTitle strong {
  color: var(--radar-text);
  font-size: 15px;
  font-weight: 900;
}

.radarOwnStoreSectionTitle em {
  display: block;
  margin-top: 3px;
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 720;
}

.radarOwnStoreManagerActions {
  flex: 0 1 520px;
  justify-content: flex-end;
  gap: 8px;
}

.radarOwnStoreManagerHeader {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.radarOwnStoreTableWrap {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
}

.radarOwnStoreTable {
  min-height: 100%;
  border-spacing: 0 12px;
}

.radarOwnStorePager {
  flex: 0 0 auto;
  margin-top: auto;
}

.radarOwnStorePager .cuiPaginationActions {
  margin-right: 14px;
}

.radarOwnStorePageSize {
  flex: 0 0 auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--radar-muted);
  padding: 0 6px 0 10px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.radarOwnStorePageSize:focus-within {
  border-color: rgba(32, 105, 214, 0.62);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(32, 105, 214, 0.12);
}

.radarOwnStorePageSize select {
  min-width: 64px;
  min-height: 28px;
  appearance: auto;
  border: 0;
  border-left: 1px solid var(--radar-line);
  outline: 0;
  background: #ffffff;
  color: var(--radar-text);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  padding: 0 4px 0 8px;
  cursor: pointer;
  pointer-events: auto;
}

.radarOwnStoreManager .radarOwnStoreSearch input::placeholder {
  color: #a4adbb;
  font-weight: 720;
  opacity: 1;
}

@media (max-width: 900px) {
  .radarOwnStorePageSize {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .radarOwnStorePageSize select {
    flex: 1 1 auto;
  }
}

@media (max-width: 640px) {
  .radarOwnStorePortfolio {
    padding: 12px;
  }
}

@media (max-width: 640px) {
  .radarOwnStorePortfolioHeader {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .radarOwnStorePortfolioHeader small {
    max-width: none;
    text-align: left;
  }
}

@media (max-width: 1180px) {
  .radarOwnStorePortfolio,
  .radarOwnStoreManager {
    height: auto;
  }

  .radarOwnStorePortfolio {
    grid-template-rows: none;
    overflow: visible;
  }

  .radarOwnStorePortfolioLegend {
    max-height: 280px;
  }
}

.radarAlertTableToolbar {
  flex: 0 0 auto;
  gap: 6px;
  flex-wrap: nowrap;
}

.radarAlertTableToolbar > button {
  width: auto;
  min-width: 68px;
  padding: 0 10px;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .radarAlertTablePanel .radarPanelHeader {
    flex-direction: column;
  }
}

@media (max-width: 680px) {
  .radarAlertTableToolbar {
    justify-content: flex-start;
  }
}

.radarPage.competitorsPage .radarDecisionTodoPanel {
  border-color: #e5e5ea;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(29, 31, 36, 0.045);
}

.radarPage .radarDecisionTodoPanel .radarPanelHeader {
  padding: 14px 18px 10px;
}

.radarPanelTitleWithHelp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.radarPanelTitleWithHelp .radarMetricHelpTrigger {
  transform: translateY(1px);
}

.radarEventList {
  display: grid;
  gap: 5px;
  padding: 0 10px 6px;
}

.radarDecisionTodoHeaderActions,
.radarDecisionTodoSort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.radarDecisionTodoSort {
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.radarDecisionTodoDateRange {
  display: grid;
  gap: 5px;
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.radarSevereDateRangePicker {
  min-width: 256px;
}

.radarSevereDateRangePicker .cuiDatePickerTrigger {
  min-height: 34px;
  border-color: var(--radar-line);
  border-radius: 7px;
  background: var(--radar-control-bg);
  color: var(--radar-text);
}

.radarDecisionTodoSort select {
  min-width: 94px;
  height: 30px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: var(--radar-control-bg);
  color: var(--radar-body);
  font: inherit;
  font-weight: 850;
  padding: 0 8px;
}

.radarDecisionTodoPager {
  margin: 0 10px 6px;
  padding: 10px 2px 0;
}

.radarDecisionTodoPageSize {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.radarDecisionTodoPageSize select {
  min-width: 84px;
  height: 30px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: var(--radar-control-bg);
  color: var(--radar-body);
  font: inherit;
  font-weight: 850;
  padding: 0 8px;
}

.radarPage .radarDecisionTodoPanel .radarEventList .radarEventRow {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 134px minmax(150px, 220px) 94px;
  align-items: center;
  gap: 10px;
  border: 1px solid #e8e8ed;
  border-radius: 10px;
  background: #ffffff;
  color: inherit;
  padding: 10px 12px;
  text-align: left;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.radarPage .radarDecisionTodoPanel .radarEventList .radarEventRow.active,
.radarPage .radarDecisionTodoPanel .radarEventList .radarEventRow:hover {
  border-color: #c9daf5;
  background: #f6f9ff;
  box-shadow: 0 4px 12px rgba(28, 47, 80, 0.07);
  transform: translateY(-1px);
}

.radarPage .radarDecisionTodoPanel .radarEventList .radarEventRow:focus-visible {
  outline: 3px solid rgba(10, 102, 194, 0.2);
  outline-offset: 2px;
}

.radarPage .radarDecisionTodoPanel .radarEventItem.expanded .radarEventRow {
  border-color: #c7d7ef;
  border-bottom-color: transparent;
  border-radius: 8px 8px 0 0;
  background: #f7faff;
  box-shadow: none;
  transform: none;
}

.radarPage .radarDecisionTodoPanel .radarEventItem .radarEventDetailPanel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #c7d7ef;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #ffffff;
  box-shadow: none;
  padding: 14px 15px 12px;
}

.radarEventDisclosure {
  min-width: 0;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    grid-template-rows 280ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.radarEventDisclosure.expanded {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.radarEventDisclosureInner {
  min-height: 0;
  overflow: hidden;
}

.radarEventLevel {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffe0b2;
  border-radius: 6px;
  background: #fff9ed;
  color: #b45309;
  font-size: 11px;
  font-weight: 950;
}

.radarEventLevel.critical {
  border-color: #ffd3d5;
  background: #fff5f5;
  color: #c83b3f;
}

.radarEventLevel.resolved {
  border-color: #cfd8d3;
  background: #f4f7f5;
  color: #426655;
}

.radarEventItem.resolved .radarEventRow {
  background: #fafbfa;
}

.radarSevereStateStack {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 4px;
}

.radarEventRow > .radarSevereStateStack > em,
.radarAvailabilityLabel,
.radarReminderLabel,
.radarResolvedLabel {
  max-width: 100%;
  color: #526273;
  font-size: 11px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.radarAvailabilityLabel {
  color: #86590c;
}

.radarReminderLabel {
  color: #075c9d;
}

.radarResolvedLabel {
  color: #287552;
}

.radarEventRow > span > strong,
.radarEventRow > span > em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarEventRow > span > strong {
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 950;
}

.radarEventRow > span > em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.radarEventMeta b {
  color: #6e6e73;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.radarEventMeta em {
  font-size: 11px;
  color: #3a3a3c;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.35;
}

.radarPage .radarDecisionTodoPanel .radarEventList .statusPill {
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 8px;
}

.radarEventActions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  border-radius: 7px;
  background: #f2f7ff;
  color: #0a66c2;
  font-size: 12px;
  font-weight: 850;
  padding: 5px 7px;
  white-space: nowrap;
}

.radarEventRow:hover .radarEventActions,
.radarEventRow.active .radarEventActions {
  background: #e7f0ff;
}

.radarEventChevron {
  flex: 0 0 auto;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.radarEventItem.expanded .radarEventChevron {
  transform: rotate(180deg);
}

.radarEventDetailToolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid #ececf0;
}

.radarEventDetailContext,
.radarEventDetailPrimaryActions,
.radarActionDirectiveMeta,
.radarEventDetailFooter {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.radarEventDetailContext > span:not(.statusPill) {
  color: #6e6e73;
  font-size: 11px;
  font-weight: 750;
}

.radarEventDetailPrimaryActions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.radarPage .radarEventDetailHandleButton.radarButton {
  min-height: 32px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

.radarIgnoreStatus,
.radarIgnoreEscalation,
.radarCriticalReview {
  max-width: 100%;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 3px 7px;
}

.radarIgnoreStatus {
  border: 1px solid #c7d7e8;
  background: #f4f8fc;
  color: #35556f;
}

.radarIgnoreEscalation {
  border: 1px solid #f2c4c7;
  background: #fff3f3;
  color: #9c3036;
}

.radarCriticalReview {
  border: 1px solid #efcc7e;
  background: #fff8e8;
  color: #76530b;
}

.radarIgnoreDetail p {
  overflow-wrap: anywhere;
}

.radarIgnoreDuration {
  min-width: 0;
  display: grid;
  gap: 8px;
  margin: 0;
  border: 1px solid #d7e0e8;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.radarIgnoreDuration legend {
  color: #3f4f5f;
  font-size: 12px;
  font-weight: 850;
  padding: 0 4px;
}

.radarIgnorePresets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.radarIgnorePresets button {
  min-height: 32px;
  border: 1px solid #c7d2dc;
  border-radius: 6px;
  background: #fff;
  color: #415466;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 0 10px;
}

.radarIgnorePresets button.active {
  border-color: #1677b8;
  background: #e9f5fd;
  color: #075c9d;
}

.radarIgnorePresets button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.radarIgnoreCustom {
  width: 100%;
}

.radarIgnoreHint {
  margin: 0;
  color: #617284;
  font-size: 12px;
  line-height: 1.45;
}

.radarPage .radarActionDirectiveMeta .statusPill {
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  text-align: left;
}

.radarEventSummary {
  margin: 11px 0 0;
  color: var(--radar-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.radarEventDetailGroups,
.radarEventDetailGroup {
  display: grid;
  gap: 9px;
}

.radarEventDetailGroups {
  margin-top: 12px;
  gap: 13px;
}

.radarEventDetailSectionHeading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.radarEventDetailSectionHeading strong {
  color: #1d1d1f;
  font-size: 12px;
  font-weight: 850;
}

.radarEventDetailSectionHeading span {
  color: #86868b;
  font-size: 11px;
  font-weight: 650;
  overflow-wrap: anywhere;
  text-align: right;
}

.radarEvidenceGrid,
.radarImpactGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  background: #e5e5ea;
  margin: 0;
}

.radarEvidenceGrid > div,
.radarImpactGrid > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  background: #ffffff;
  padding: 9px 10px;
}

.radarEvidenceGrid dt,
.radarEvidenceGrid dd,
.radarImpactGrid dt,
.radarImpactGrid dd {
  min-width: 0;
  margin: 0;
}

.radarEvidenceGrid dt,
.radarImpactGrid dt {
  color: #86868b;
  font-size: 11px;
  font-weight: 750;
}

.radarEvidenceGrid dd,
.radarImpactGrid dd {
  color: var(--radar-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: normal;
}

.radarEvidenceNarrative {
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  border-left: 2px solid #c7d7ef;
  border-radius: 0 6px 6px 0;
  background: #f7f9fc;
  padding: 8px 10px;
}

.radarEvidenceNarrative span {
  color: #6e6e73;
  font-size: 11px;
  font-weight: 800;
}

.radarEvidenceNarrative p {
  min-width: 0;
  margin: 0;
  color: var(--radar-body);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.radarImpactEmpty {
  margin: 0;
  border: 1px dashed #d8d8de;
  border-radius: 7px;
  background: #fafafa;
  color: #6e6e73;
  font-size: 12px;
  font-weight: 700;
  padding: 11px 12px;
}

.radarActionDirective {
  display: grid;
  gap: 8px;
  border-left: 3px solid #9bbbe2;
  border-radius: 0 6px 6px 0;
  background: #f5f8fc;
  padding: 10px 11px;
}

.radarActionDirective p {
  margin: 0;
  color: var(--radar-body);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.radarEventDetailFooter {
  justify-content: flex-start;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #ececf0;
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarDecisionTodoPanel .radarEventList .radarEventRow,
  .radarEventDisclosure,
  .radarEventChevron {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarDecisionTodoPanel .radarEventList .radarEventRow.active,
  .radarPage .radarDecisionTodoPanel .radarEventList .radarEventRow:hover {
    transform: none;
  }
}

.radarQuickEntry.green > .radarQuickEntryIcon {
  background: #eafaf3;
  color: #059669;
}

@media (max-width: 1100px) {
  .radarEvidenceGrid,
  .radarImpactGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .radarSevereToolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .radarSevereToolbar .radarDecisionTodoSort {
    justify-content: space-between;
  }

  .radarPage .radarDecisionTodoPanel .radarEventList .radarEventRow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .radarDecisionTodoPager {
    align-items: stretch;
    flex-direction: column;
  }

  .radarDecisionTodoPager .cuiPaginationInfo {
    margin-right: 0;
  }

  .radarDecisionTodoPager .cuiPaginationActions {
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .radarPage .radarDecisionTodoPanel .radarPanelHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .radarDecisionTodoHeaderActions {
    justify-content: space-between;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .radarEventActions,
  .radarEventDetailPrimaryActions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .radarEventLevel,
  .radarEventRow > .statusPill {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .radarEventDetailToolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .radarIgnorePresets button {
    flex: 1 1 72px;
  }
}

@media (max-width: 760px) {
  .radarEventDetailSectionHeading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}

@media (max-width: 760px) {
  .radarEventDetailSectionHeading span {
    text-align: left;
  }
}

@media (max-width: 760px) {
  .radarEvidenceNarrative {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.radarPage .radarMonitorCollectionCell {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 5px;
}

.radarPage .radarMonitorCollectionCell em {
  overflow: hidden;
  max-width: 100%;
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarMonitorCadenceCell {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.radarPage .radarMonitorCadenceCell em {
  color: var(--warning);
  font-size: 10px;
  font-style: normal;
  line-height: 1.3;
  white-space: normal;
}

.radarPage .radarMonitorSummary,
.radarPage .radarMonitorTrendSkeleton {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.radarPage .radarMonitorInsightLayout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.42fr);
  align-items: stretch;
  gap: 16px;
}

.radarPage .radarMonitorMetricColumn,
.radarPage .radarMonitorTrendColumn {
  min-width: 0;
}

.radarPage .radarMonitorMetricColumn {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.radarPage .radarMonitorMetricToolbar {
  min-width: 0;
}

.radarPage .radarMonitorMetricToolbar .radarSegmented {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.radarPage .radarMonitorTrendFilters {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.radarPage .radarMonitorTrendFilters > span {
  flex: 0 0 auto;
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 750;
}

.radarPage .radarMonitorTrendQuickRanges {
  flex: 0 0 auto;
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--radar-line);
  border-radius: 7px;
  background: var(--radar-panel);
}

.radarPage .radarMonitorTrendQuickRanges button {
  min-height: 34px;
  border: 0;
  border-right: 1px solid var(--radar-line);
  background: transparent;
  color: var(--radar-body);
  cursor: pointer;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.radarPage .radarMonitorTrendQuickRanges button:last-child {
  border-right: 0;
}

.radarPage .radarMonitorTrendQuickRanges button:hover,
.radarPage .radarMonitorTrendQuickRanges button:focus-visible {
  background: color-mix(in srgb, var(--radar-blue) 8%, var(--radar-panel));
  color: var(--radar-blue);
  outline: 0;
}

.radarPage .radarMonitorTrendQuickRanges button.active {
  background: var(--radar-blue);
  color: #ffffff;
}

.radarPage .radarMonitorTrendRangePicker {
  width: 320px;
  min-width: 0;
}

.radarPage .radarMonitorTrendRangePicker .cuiDatePickerTrigger {
  width: 100%;
  min-width: 320px;
}

.radarPage .radarMonitorMetricColumn > .radarMetricGrid.compact {
  height: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(112px, 1fr);
}

.radarPage .radarMonitorMetricColumn .radarMetricCard {
  min-height: 0;
  height: 100%;
}

.radarPage .radarMonitorMetricColumn > .radarTableEmpty {
  min-height: 100%;
  display: grid;
  place-items: center;
}

.radarPage .radarMonitorTrendColumn {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.radarPage .radarMonitorTrendColumn .radarMonitorTrendFigure {
  min-height: 376px;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.radarPage .radarMonitorTrendColumn .radarMonitorTrendChart,
.radarPage .radarMonitorTrendColumn .radarMonitorTrendChart > div {
  min-height: 0;
  height: 100% !important;
}

.radarPage .radarMonitorInsightSkeleton {
  align-items: stretch;
}

.radarPage .radarMonitorInsightSkeleton .radarMonitorMetricSkeleton {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(112px, 1fr);
}

.radarPage .radarMonitorInsightSkeleton .radarMonitorChartSkeleton.cuiSkeletonBlock {
  min-height: 376px;
}

.radarPage .radarMetricLabelRow {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.radarPage .radarMetricLabelRow > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarMetricHelpTrigger {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--radar-blue) 34%, var(--radar-line));
  border-radius: 50%;
  background: var(--radar-panel);
  color: var(--radar-blue);
  cursor: help;
  line-height: 1;
}

.radarPage .radarMetricHelpTrigger:hover,
.radarPage .radarMetricHelpTrigger:focus-visible {
  border-color: var(--radar-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--radar-blue) 14%, transparent);
  outline: 0;
}

.radarPage .radarMonitorQuotaCard {
  min-height: 112px;
  align-content: stretch;
  gap: 7px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--radar-blue) 22%, var(--radar-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--radar-panel) 96%, #f5f8fc);
  box-shadow: 0 8px 24px rgba(31, 62, 108, 0.07);
  padding: 14px 16px;
}

.radarPage .radarMonitorQuotaHeader,
.radarPage .radarMonitorQuotaMeta,
.radarPage .radarMonitorQuotaValue {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.radarPage .radarMonitorQuotaHeader {
  gap: 8px;
}

.radarPage .radarMonitorQuotaUsage {
  flex: 0 0 auto;
  color: var(--radar-blue);
  font-size: 12px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.radarPage .radarMonitorQuotaCard.is-warning .radarMonitorQuotaUsage,
.radarPage .radarMonitorQuotaCard.is-warning .radarMonitorQuotaMeta span:last-child {
  color: #b45309;
}

.radarPage .radarMonitorQuotaCard.is-full .radarMonitorQuotaUsage,
.radarPage .radarMonitorQuotaCard.is-full .radarMonitorQuotaMeta span:last-child {
  color: #dc2626;
}

.radarPage .radarMonitorQuotaValue {
  justify-content: flex-start;
  gap: 5px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.radarPage .radarMonitorQuotaValue strong {
  color: var(--radar-text);
  font-size: 27px;
  line-height: 1;
  letter-spacing: 0;
}

.radarPage .radarMonitorQuotaValue span {
  align-self: flex-end;
  color: var(--radar-body);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
}

.radarPage .radarMonitorQuotaProgress {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--radar-line) 68%, transparent);
}

.radarPage .radarMonitorQuotaProgress > span {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--radar-blue);
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.radarPage .radarMonitorQuotaCard.is-warning .radarMonitorQuotaProgress > span {
  background: #d97706;
}

.radarPage .radarMonitorQuotaCard.is-full .radarMonitorQuotaProgress > span {
  background: #dc2626;
}

.radarPage .radarMonitorQuotaMeta {
  gap: 8px;
}

.radarPage .radarMonitorQuotaMeta span {
  min-width: 0;
  color: var(--radar-muted);
  font-size: 11px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.radarPage .radarMonitorTrendFigure {
  --radar-monitor-chart-height: 286px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--radar-line) 88%, #cbd5e1);
  border-radius: 8px;
  background: color-mix(in srgb, var(--radar-panel) 97%, #f8fafc);
  box-shadow: 0 10px 28px rgba(31, 62, 108, 0.06);
  margin: 0;
  padding: 14px 14px 4px;
  transition:
    border-color 180ms ease-out,
    box-shadow 180ms ease-out;
}

.radarPage .radarMonitorTrendFigure:hover {
  border-color: color-mix(in srgb, var(--radar-blue) 34%, var(--radar-line));
  box-shadow: 0 14px 34px rgba(31, 62, 108, 0.09);
}

.radarPage .radarMonitorTrendFigure:focus-visible {
  border-color: var(--radar-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--radar-blue) 16%, transparent);
  outline: 0;
}

.radarPage .radarMonitorTrendStats {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid color-mix(in srgb, var(--radar-line) 72%, transparent);
  padding: 1px 4px 12px;
}

.radarPage .radarMonitorTrendStats > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 0 14px;
}

.radarPage .radarMonitorTrendStats > div:first-child {
  padding-left: 4px;
}

.radarPage .radarMonitorTrendStats > div + div {
  border-left: 1px solid color-mix(in srgb, var(--radar-line) 72%, transparent);
}

.radarPage .radarMonitorTrendStats span {
  overflow: hidden;
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarMonitorTrendStats strong {
  min-width: 0;
  color: var(--radar-text);
  font-size: 17px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.2;
}

.radarPage .radarMonitorTrendStats strong em {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--radar-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarMonitorTrendChart {
  min-width: 0;
  width: 100%;
}

.radarPage .radarMonitorTrendA11y {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.cuiTooltipContent.radarMonitorQuotaTooltip,
.radarMonitorQuotaTooltip {
  width: min(360px, calc(100vw - 24px));
  max-width: min(360px, calc(100vw - 24px));
  border: 0 !important;
  border-radius: 6px !important;
  background: rgba(48, 48, 48, 0.98) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.34) !important;
  color: #ffffff !important;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.6;
  white-space: normal;
}

.cuiTooltipContent.radarMonitorQuotaTooltip::after,
.radarMonitorQuotaTooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 0;
  height: 0;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 8px solid rgba(48, 48, 48, 0.98);
  transform: translateX(-50%);
}

.radarPage .radarMonitorAsyncRegion {
  min-width: 0;
}

.radarPage .radarMonitorAsyncRegion[aria-busy='true'] {
  cursor: progress;
}

.radarPage .radarMonitorAsyncRegion[inert] {
  pointer-events: none;
}

.radarPage .radarMonitorRefreshing {
  opacity: 0.68;
  transition: opacity 160ms ease-out;
}

.radarPage .radarMonitorReveal {
  animation: radarMonitorReadyReveal 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.radarPage .radarMonitorMetricSkeleton .cuiSkeletonBlock,
.radarPage .radarMonitorTrendSkeleton .cuiSkeletonBlock {
  min-height: 104px;
}

.radarPage .radarMonitorChartSkeleton.cuiSkeletonBlock {
  min-height: 372px;
}

.radarPage .radarMonitorTableSkeleton {
  min-width: 980px;
}

.radarPage .radarMonitorRegionState {
  min-height: 128px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
}

.radarPage .radarMonitorRegionState > [role='alert'] {
  width: min(680px, 100%);
}

.radarPage .radarMonitorListPanel {
  min-width: 0;
}

.radarPage .radarMonitorTableToolbar {
  flex-wrap: nowrap;
}

.radarPage .radarMonitorSearch {
  width: min(360px, 40vw);
  min-width: 280px;
}

.radarPage .radarMonitorSearch input {
  width: 100%;
  min-width: 0;
}

.radarPage .radarMonitorViewMore {
  min-width: 104px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--radar-line);
  border-radius: 7px;
  background: var(--radar-panel);
  color: var(--radar-body);
  cursor: pointer;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.radarPage .radarMonitorViewMore:hover,
.radarPage .radarMonitorViewMore:focus-visible {
  border-color: var(--radar-blue);
  color: var(--radar-blue);
  outline: 0;
}

@keyframes radarMonitorReadyReveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1180px) {
  .radarPage .radarMonitorInsightLayout {
    grid-template-columns: minmax(0, 1fr);
  }

  .radarPage .radarMonitorMetricColumn > .radarMetricGrid.compact {
    height: auto;
  }

  .radarPage .radarMonitorTrendFilters {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .radarPage .radarMonitorTrendColumn .radarMonitorTrendFigure {
    min-height: 0;
    height: auto;
  }

  .radarPage .radarMonitorTrendColumn .radarMonitorTrendChart,
  .radarPage .radarMonitorTrendColumn .radarMonitorTrendChart > div {
    height: var(--radar-monitor-chart-height, 286px) !important;
  }
}

@media (max-width: 760px) {
  .radarPage .radarMonitorInsightLayout {
    grid-template-columns: minmax(0, 1fr);
  }

  .radarPage .radarMonitorMetricColumn > .radarMetricGrid.compact {
    height: auto;
  }

  .radarPage .radarMonitorMetricToolbar .radarSegmented {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .radarPage .radarMonitorTrendFilters {
    align-items: stretch;
    flex-direction: column;
  }

  .radarPage .radarMonitorTrendQuickRanges {
    width: 100%;
  }

  .radarPage .radarMonitorTrendQuickRanges button {
    flex: 1 1;
  }

  .radarPage .radarMonitorTrendRangePicker,
  .radarPage .radarMonitorTrendRangePicker .cuiDatePickerTrigger {
    width: 100%;
    min-width: 0;
  }

  .radarPage .radarMonitorTrendColumn .radarMonitorTrendFigure {
    min-height: 0;
    height: auto;
  }

  .radarPage .radarMonitorTrendColumn .radarMonitorTrendChart,
  .radarPage .radarMonitorTrendColumn .radarMonitorTrendChart > div {
    height: var(--radar-monitor-chart-height, 248px) !important;
  }

  .radarPage .radarMonitorTrendFigure {
    --radar-monitor-chart-height: 248px;
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media (max-width: 760px) {
  .radarPage .radarMonitorTrendStats > div {
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media (max-width: 760px) {
  .radarPage .radarMonitorTableToolbar {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .radarPage .radarMonitorSearch,
  .radarPage .radarMonitorViewMore {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarMonitorRefreshing,
  .radarPage .radarMonitorQuotaProgress > span,
  .radarPage .radarMonitorTrendFigure {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarMonitorReveal {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Decision workbench async loading */
.radarPage .radarWorkbenchAsyncRegion {
  position: relative;
  min-width: 0;
  isolation: isolate;
}

.radarPage .radarWorkbenchAsyncRegion[aria-busy='true'] {
  cursor: progress;
}

.radarPage .radarWorkbenchAsyncRegion[inert] {
  pointer-events: none;
}

.radarPage .radarWorkbenchProgress {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease-out;
}

.radarPage .radarWorkbenchProgress::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #1677ff, #16a085, transparent);
  transform: translateX(-120%);
}

.radarPage .radarWorkbenchAsyncRegion[aria-busy='true'] .radarWorkbenchProgress {
  opacity: 1;
}

.radarPage .radarWorkbenchAsyncRegion[aria-busy='true'] .radarWorkbenchProgress::after {
  animation: radarWorkbenchLoadingSweep 1050ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.radarPage .radarWorkbenchAsyncContent {
  min-width: 0;
  opacity: 1;
  filter: none;
  transition:
    opacity 180ms ease-out,
    filter 180ms ease-out;
}

.radarPage .radarWorkbenchRefreshing .radarWorkbenchAsyncContent {
  opacity: 0.62;
  filter: saturate(0.82);
}

.radarPage .radarWorkbenchReveal .radarWorkbenchAsyncContent {
  animation: radarWorkbenchReadyReveal 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.radarPage .radarWorkbenchMetricSkeleton,
.radarPage .radarWorkbenchMetricSkeleton .cuiSkeletonBlock,
.radarPage .radarWorkbenchStoreMetricSkeleton,
.radarPage .radarWorkbenchStoreMetricSkeleton .cuiSkeletonBlock {
  min-height: 96px;
}

.radarPage .radarWorkbenchEventSkeleton {
  min-height: 310px;
  align-content: center;
}

.radarPage .radarWorkbenchEventSkeleton .cuiSkeletonStack {
  width: 100%;
}

.radarPage .radarWorkbenchStoreSkeleton {
  min-height: 520px;
  display: grid;
  align-content: start;
  gap: 18px;
}

.radarPage .radarWorkbenchStoreSkeleton > .cuiSkeletonGrid .cuiSkeletonBlock {
  min-height: 86px;
}

.radarPage .radarWorkbenchStoreSkeletonGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
  gap: 18px;
}

.radarPage .radarWorkbenchStoreSkeletonGrid > * {
  min-width: 0;
}

.radarPage .radarEnglishWorkbenchSkeleton {
  min-height: 360px;
}

.radarPage .radarEnglishDecisionLayout {
  grid-template-columns: minmax(560px, 1.1fr) minmax(360px, 0.9fr);
  align-items: stretch;
}

.radarPage .radarEnglishDecisionLayout .radarWorkbenchSide {
  min-width: 0;
  display: grid;
  height: 100%;
}

.radarPage .radarEnglishDecisionLayout .radarCoreSignals {
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto repeat(3, minmax(0, 1fr));
}

.radarPage .radarEnglishDecisionLayout .radarCoreSignals article {
  display: grid;
  align-content: center;
}

@media (max-width: 1180px) {
  .radarPage .radarEnglishDecisionLayout {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .radarPage .radarEnglishDecisionLayout .radarWorkbenchSide,
  .radarPage .radarEnglishDecisionLayout .radarCoreSignals {
    height: auto;
  }

  .radarPage .radarEnglishDecisionLayout .radarCoreSignals {
    grid-template-rows: none;
  }
}

.radarPage .radarWorkbenchReveal .radarMetricCard,
.radarPage .radarWorkbenchReveal .radarEventItem,
.radarPage .radarWorkbenchReveal .radarOwnStoreTable tbody tr {
  animation: radarWorkbenchItemReveal 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.radarPage .radarWorkbenchReveal .radarMetricCard:nth-child(2),
.radarPage .radarWorkbenchReveal .radarEventItem:nth-child(2),
.radarPage .radarWorkbenchReveal .radarOwnStoreTable tbody tr:nth-child(2) {
  animation-delay: 35ms;
}

.radarPage .radarWorkbenchReveal .radarMetricCard:nth-child(3),
.radarPage .radarWorkbenchReveal .radarEventItem:nth-child(3),
.radarPage .radarWorkbenchReveal .radarOwnStoreTable tbody tr:nth-child(3) {
  animation-delay: 70ms;
}

.radarPage .radarWorkbenchReveal .radarMetricCard:nth-child(4),
.radarPage .radarWorkbenchReveal .radarEventItem:nth-child(4),
.radarPage .radarWorkbenchReveal .radarOwnStoreTable tbody tr:nth-child(4) {
  animation-delay: 105ms;
}

@keyframes radarWorkbenchLoadingSweep {
  to {
    transform: translateX(365%);
  }
}

@keyframes radarWorkbenchReadyReveal {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes radarWorkbenchItemReveal {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .radarPage .radarWorkbenchStoreSkeletonGrid,
  .radarPage .radarEnglishWorkbenchSkeleton {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .radarPage .radarWorkbenchMetricSkeleton,
  .radarPage .radarWorkbenchStoreMetricSkeleton {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarWorkbenchAsyncRegion[aria-busy='true'] .radarWorkbenchProgress::after {
    width: 100%;
    background: #1677ff;
    transform: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarWorkbenchAsyncContent {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarWorkbenchRefreshing .radarWorkbenchAsyncContent {
    opacity: 0.72;
    filter: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarWorkbenchReveal .radarWorkbenchAsyncContent,
  .radarPage .radarWorkbenchReveal .radarMetricCard,
  .radarPage .radarWorkbenchReveal .radarEventItem,
  .radarPage .radarWorkbenchReveal .radarOwnStoreTable tbody tr {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* End decision workbench async loading */
.radarPage {
  --radar-blue: var(--primary);
  --radar-blue-strong: var(--primary-light);
  --radar-blue-soft: var(--primary-soft);
  --radar-panel: var(--surface-panel);
  --radar-panel-soft: var(--surface-panel-strong);
  --radar-line: var(--line-dark);
  --radar-line-soft: var(--row-line);
  --radar-text: var(--text-1);
  --radar-body: var(--text-2);
  --radar-muted: var(--text-3);
  --radar-shadow: var(--shadow-dark);
  --radar-control-bg: var(--control-bg);
  --radar-tag-bg: var(--tag-bg);
  --radar-active-bg: var(--primary-active-bg);
  --radar-accent-border: var(--primary-border);
  --radar-accent-border-strong: var(--primary-border-strong);
  --radar-accent-soft: color-mix(in srgb, var(--primary) 18%, transparent);
  --radar-accent-faint: color-mix(in srgb, var(--primary) 9%, transparent);
  --radar-gradient-soft: linear-gradient(
    135deg,
    var(--primary-soft),
    color-mix(in srgb, var(--accent) 12%, transparent)
  );
  --radar-panel-gradient: linear-gradient(180deg, var(--radar-panel), var(--radar-panel-soft));
  color: var(--radar-text);
}

.radarPage .radarMetricCard.interactive {
  border-color: color-mix(in srgb, var(--radar-orange-strong, #f97316) 34%, var(--radar-line));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--radar-orange-strong, #f97316) 7%, transparent),
      transparent 58%
    ),
    var(--radar-panel-gradient);
  box-shadow:
    var(--radar-shadow),
    inset 0 0 0 1px color-mix(in srgb, var(--radar-orange-strong, #f97316) 12%, transparent);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.radarPage .radarMetricCard.interactive:hover {
  border-color: color-mix(in srgb, var(--radar-orange-strong, #f97316) 72%, var(--radar-line));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--radar-orange-strong, #f97316) 12%, transparent),
      transparent 62%
    ),
    var(--radar-panel-gradient);
  box-shadow:
    0 20px 48px rgba(249, 115, 22, 0.14),
    inset 0 0 0 1px color-mix(in srgb, var(--radar-orange-strong, #f97316) 24%, transparent);
}

.radarPage .radarHero,
.radarPage .radarReportCover,
.radarPage .radarReportCoverMini {
  background:
    linear-gradient(
      135deg,
      var(--radar-accent-soft),
      color-mix(in srgb, var(--accent) 12%, transparent)
    ),
    var(--radar-panel);
}

.radarPage .radarHero::before {
  background:
    linear-gradient(120deg, var(--radar-accent-soft), transparent 42%),
    radial-gradient(
      circle at 88% 12%,
      color-mix(in srgb, var(--accent) 18%, transparent),
      transparent 30%
    );
}

.radarPage .radarDecisionShortcutGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 640px) {
  .radarPage .radarDecisionShortcutGrid .radarQuickEntry {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
}

@media (max-width: 640px) {
  .radarPage .radarDecisionShortcutGrid .radarQuickEntryIcon {
    grid-row: 1;
  }
}

@media (max-width: 640px) {
  .radarPage .radarDecisionShortcutGrid .radarQuickEntryFlow {
    grid-column: 1 / -1;
    border-top: 1px solid var(--radar-line);
    border-left: 0;
    padding-top: 10px;
    padding-left: 0;
  }
}

.radarPage .radarDonut {
  background:
    radial-gradient(circle, var(--radar-panel) 0 43%, transparent 44%),
    conic-gradient(
      var(--radar-blue) 0 34%,
      var(--warning) 34% 58%,
      var(--accent) 58% 82%,
      var(--success) 82% 100%
    );
}

.radarPage .radarDonut.report {
  background:
    radial-gradient(circle, var(--radar-panel) 0 43%, transparent 44%),
    conic-gradient(
      var(--radar-blue) 0 50%,
      var(--warning) 50% 75%,
      var(--accent) 75% 91%,
      var(--success) 91% 100%
    );
}

.competitorsPage {
  min-width: var(--workspace-canvas-min-width);
}

.competitorsPage {
  min-width: var(--workspace-canvas-min-width);
}

.radarPage .radarReportChatDialog {
  width: min(1360px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  min-height: min(780px, calc(100dvh - 28px));
  border-radius: 8px;
}

.radarPage .radarReportChatHead {
  background: var(--radar-panel);
}

.radarPage .radarReportChatBody {
  grid-template-columns: minmax(420px, 0.86fr) minmax(0, 1.14fr);
  overflow: hidden;
}

/* Competitor report model selection */
.radarPage .radarReportModelBackdrop {
  z-index: 2700;
  padding: 20px;
  background: color-mix(in srgb, var(--overlay-bg) 62%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
          backdrop-filter: blur(14px) saturate(112%);
}

.radarPage .radarReportModelDialog {
  width: min(760px, calc(100vw - 40px));
  max-height: min(760px, calc(100dvh - 40px));
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: var(--radar-panel);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.radarPage .radarReportModelHead {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--radar-line);
  padding: 16px 18px;
}

.radarPage .radarReportModelHead h2,
.radarPage .radarReportModelHead p {
  margin: 0;
}

.radarPage .radarReportModelHead h2 {
  color: var(--radar-text);
  font-size: 17px;
  line-height: 1.35;
}

.radarPage .radarReportModelHead p {
  margin-top: 3px;
  color: var(--radar-muted);
  font-size: 11px;
  line-height: 1.45;
}

.radarPage .radarReportModelMark {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--radar-accent-border);
  border-radius: 8px;
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
}

.radarPage .radarReportModelHead > button {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--radar-line);
  border-radius: 7px;
  background: var(--radar-control-bg);
  color: var(--radar-body);
  cursor: pointer;
}

.radarPage .radarReportModelHead > button:hover:not(:disabled),
.radarPage .radarReportModelHead > button:focus-visible {
  border-color: var(--radar-accent-border);
  color: var(--radar-blue);
  outline: 2px solid color-mix(in srgb, var(--primary) 14%, transparent);
  outline-offset: 1px;
}

.radarPage .radarReportModelHead > button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.radarPage .radarReportModelBody {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
}

.radarPage .radarReportModelGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.radarPage .radarReportModelCard {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: var(--radar-panel);
  padding: 15px;
}

.radarPage .radarReportModelCard:hover {
  border-color: var(--radar-accent-border);
  box-shadow: 0 12px 28px rgba(31, 69, 120, 0.08);
}

.radarPage .radarReportModelCardTitle {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.radarPage .radarReportModelCardTitle > span {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: var(--radar-panel-soft);
  color: var(--radar-blue);
}

.radarPage .radarReportModelCardTitle > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.radarPage .radarReportModelCardTitle strong,
.radarPage .radarReportModelCardTitle small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.radarPage .radarReportModelCardTitle strong {
  color: var(--radar-text);
  font-size: 13px;
}

.radarPage .radarReportModelCardTitle small,
.radarPage .radarReportModelExpiry {
  color: var(--radar-muted);
  font-size: 10px;
}

.radarPage .radarReportModelCardTitle em {
  border: 1px solid var(--radar-line);
  border-radius: 999px;
  background: var(--radar-panel-soft);
  color: var(--radar-body);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  padding: 4px 7px;
  white-space: nowrap;
}

.radarPage .radarReportModelCardTitle em.ready {
  border-color: color-mix(in srgb, var(--success) 32%, var(--radar-line));
  background: color-mix(in srgb, var(--success) 9%, var(--radar-panel));
  color: var(--success);
}

.radarPage .radarReportModelCardTitle em.ready.warning {
  border-color: color-mix(in srgb, #b7791f 42%, var(--radar-line));
  background: color-mix(in srgb, #b7791f 10%, var(--radar-panel));
  color: #9b5f0b;
}

.radarPage .radarReportModelCardTitle em.ready.critical {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--radar-line));
  background: color-mix(in srgb, var(--danger) 9%, var(--radar-panel));
  color: var(--danger);
}

.radarPage .radarReportModelCard > p,
.radarPage .radarReportModelLead,
.radarPage .radarReportModelSecurity p {
  margin: 0;
  color: var(--radar-body);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.radarPage .radarReportModelExpiry {
  display: block;
  overflow-wrap: anywhere;
}

.radarPage .radarReportModelExpiry strong {
  display: inline-block;
  margin-left: 7px;
  color: var(--success);
  font-weight: 850;
}

.radarPage .radarReportModelExpiry.warning strong {
  color: #b7791f;
}

.radarPage .radarReportModelExpiry.critical strong {
  color: var(--danger);
}

.radarPage .radarReportModelTestResult {
  border-left: 3px solid var(--success);
  background: color-mix(in srgb, var(--success) 7%, var(--radar-panel));
  color: var(--success) !important;
  padding: 8px 10px;
}

.radarPage .radarReportExpiryPresets,
.radarPage .radarReportExpiryFields {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.radarPage .radarReportExpiryFields {
  grid-template-columns: minmax(0, 1.4fr) minmax(120px, 0.8fr);
}

.radarPage .radarReportExpiryPresets button {
  min-height: 36px;
  border: 1px solid var(--radar-line);
  border-radius: 6px;
  background: var(--radar-panel-soft);
  color: var(--radar-body);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 780;
}

.radarPage .radarReportExpiryPresets button:hover,
.radarPage .radarReportExpiryPresets button:focus-visible {
  border-color: var(--radar-accent-border);
  color: var(--radar-blue);
}

.radarPage .radarReportModelCardActions,
.radarPage .radarReportModelFormActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
}

.radarPage .radarReportModelCardActions button,
.radarPage .radarReportModelFormActions button,
.radarPage .radarReportModelState button,
.radarPage .radarReportModelError button {
  min-height: 36px;
  border: 1px solid var(--radar-line);
  border-radius: 6px;
  background: var(--radar-control-bg);
  color: var(--radar-body);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  padding: 0 12px;
}

.radarPage .radarReportModelCardActions button:hover:not(:disabled),
.radarPage .radarReportModelFormActions button:hover:not(:disabled),
.radarPage .radarReportModelState button:hover:not(:disabled),
.radarPage .radarReportModelError button:hover:not(:disabled) {
  border-color: var(--radar-accent-border);
  color: var(--radar-blue);
}

.radarPage .radarReportModelCardActions button.primary,
.radarPage .radarReportModelFormActions button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.radarPage .radarReportModelFormActions button.danger {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--radar-line));
  background: color-mix(in srgb, var(--danger) 8%, var(--radar-panel));
  color: var(--danger);
}

.radarPage .radarReportModelCardActions button:disabled,
.radarPage .radarReportModelFormActions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.radarPage .radarReportModelState {
  min-height: 220px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--radar-muted);
  text-align: center;
}

.radarPage .radarReportModelState strong {
  color: var(--radar-text);
  font-size: 13px;
}

.radarPage .radarReportModelForm {
  width: min(540px, 100%);
  display: grid;
  gap: 16px;
  margin: 0 auto;
}

.radarPage .radarReportModelForm > label {
  display: grid;
  gap: 7px;
}

.radarPage .radarReportModelForm > label > span {
  color: var(--radar-text);
  font-size: 12px;
  font-weight: 850;
}

.radarPage .radarReportModelForm input {
  width: 100%;
  min-width: 0;
  height: 42px;
  border: 1px solid var(--radar-line);
  border-radius: 6px;
  background: var(--radar-control-bg);
  color: var(--radar-text);
  font: inherit;
  padding: 0 11px;
}

.radarPage .radarReportModelForm input:focus {
  border-color: var(--radar-accent-border);
  outline: 2px solid color-mix(in srgb, var(--primary) 14%, transparent);
  outline-offset: 1px;
}

.radarPage .radarReportModelSecurity {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--success) 24%, var(--radar-line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--success) 6%, var(--radar-panel));
  color: var(--success);
  padding: 11px 12px;
}

.radarPage .radarReportModelError {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 0;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--radar-line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--danger) 7%, var(--radar-panel));
  color: var(--danger);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.5;
  overflow-wrap: anywhere;
  padding: 9px 11px;
}

@media (max-width: 640px) {
  .radarPage .radarReportModelBackdrop {
    padding: 6px;
  }

  .radarPage .radarReportModelDialog {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
  }

  .radarPage .radarReportModelHead {
    grid-template-columns: 36px minmax(0, 1fr) 34px;
    gap: 9px;
    padding: 12px;
  }

  .radarPage .radarReportModelMark {
    width: 36px;
    height: 36px;
  }

  .radarPage .radarReportModelHead > button {
    width: 34px;
    height: 34px;
  }

  .radarPage .radarReportModelHead p {
    display: none;
  }

  .radarPage .radarReportModelBody {
    padding: 12px;
  }

  .radarPage .radarReportModelGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .radarPage .radarReportModelCardTitle {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .radarPage .radarReportModelCardTitle em {
    grid-column: 2;
    width: fit-content;
  }

  .radarPage .radarReportModelCardActions,
  .radarPage .radarReportModelFormActions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .radarPage .radarReportModelCardActions button,
  .radarPage .radarReportModelFormActions button {
    min-width: 0;
    padding-inline: 8px;
  }

  .radarPage .radarReportModelError {
    align-items: stretch;
    flex-direction: column;
  }
}

.radarPage .radarGeneratedReportMarkdown {
  color: var(--radar-body);
  font-size: 14px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.radarPage .radarGeneratedReportMarkdown > :first-child {
  margin-top: 0;
}

.radarPage .radarGeneratedReportMarkdown > :last-child {
  margin-bottom: 0;
}

.radarPage .radarGeneratedReportMarkdown h3,
.radarPage .radarGeneratedReportMarkdown h4,
.radarPage .radarGeneratedReportMarkdown h5,
.radarPage .radarGeneratedReportMarkdown h6 {
  margin: 18px 0 8px;
  color: var(--radar-text);
  line-height: 1.4;
}

.radarPage .radarGeneratedReportMarkdown h3 {
  font-size: 17px;
}

.radarPage .radarGeneratedReportMarkdown h4 {
  font-size: 15px;
}

.radarPage .radarGeneratedReportMarkdown h5,
.radarPage .radarGeneratedReportMarkdown h6 {
  font-size: 14px;
}

.radarPage .radarGeneratedReportMarkdown p,
.radarPage .radarGeneratedReportMarkdown ul,
.radarPage .radarGeneratedReportMarkdown ol,
.radarPage .radarGeneratedReportMarkdown blockquote,
.radarPage .radarGeneratedReportMarkdown pre,
.radarPage .radarGeneratedReportMarkdownTableWrap {
  margin: 8px 0 12px;
}

.radarPage .radarGeneratedReportMarkdown ul,
.radarPage .radarGeneratedReportMarkdown ol {
  padding-left: 22px;
}

.radarPage .radarGeneratedReportMarkdown li + li {
  margin-top: 4px;
}

.radarPage .radarGeneratedReportMarkdown blockquote {
  border-left: 3px solid var(--radar-accent-border);
  background: var(--radar-panel-soft);
  color: var(--radar-body);
  padding: 8px 12px;
}

.radarPage .radarGeneratedReportMarkdown code {
  border-radius: 4px;
  background: var(--radar-panel-soft);
  color: var(--radar-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 2px 5px;
}

.radarPage .radarGeneratedReportMarkdown pre {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--radar-line);
  border-radius: 6px;
  background: var(--radar-panel-soft);
  padding: 12px;
}

.radarPage .radarGeneratedReportMarkdown pre code {
  background: transparent;
  padding: 0;
}

.radarPage .radarGeneratedReportMarkdown hr {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--radar-line);
}

.radarPage .radarGeneratedReportMarkdown a {
  color: var(--radar-blue);
}

.radarPage .radarGeneratedReportMarkdownTableWrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--radar-line);
  border-radius: 6px;
}

.radarPage .radarGeneratedReportMarkdown table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--radar-panel);
}

.radarPage .radarGeneratedReportMarkdown th,
.radarPage .radarGeneratedReportMarkdown td {
  border-bottom: 1px solid var(--radar-line);
  border-right: 1px solid var(--radar-line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.radarPage .radarGeneratedReportMarkdown th:last-child,
.radarPage .radarGeneratedReportMarkdown td:last-child {
  border-right: 0;
}

.radarPage .radarGeneratedReportMarkdown tr:last-child td {
  border-bottom: 0;
}

.radarPage .radarGeneratedReportMarkdown th {
  background: var(--radar-panel-soft);
  color: var(--radar-text);
  font-size: 12px;
}

.radarPage .radarMonitorDetailBackdrop {
  background: color-mix(in srgb, #07111f 54%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(112%);
          backdrop-filter: blur(10px) saturate(112%);
}

.radarPage .radarMonitorDetailModal {
  width: min(700px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  min-height: 0;
  overflow: hidden;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--radar-line) 88%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--radar-panel) 96%, transparent);
  box-shadow:
    0 28px 72px color-mix(in srgb, #07111f 25%, transparent),
    0 2px 10px color-mix(in srgb, #07111f 8%, transparent);
  padding: 0;
  animation: radarMonitorDetailEnter 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.radarPage .radarMonitorDetailHeader {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 36px;
  align-items: start;
  gap: 16px;
  border-bottom: 1px solid var(--radar-line-soft);
  padding: 24px;
}

.radarPage .radarMonitorDetailAvatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--radar-accent-border);
  border-radius: 8px;
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
  font-size: 18px;
  font-weight: 800;
}

.radarPage .radarMonitorDetailIdentity {
  min-width: 0;
}

.radarPage .radarMonitorDetailEyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}

.radarPage .radarMonitorDetailEyebrow > span:first-child {
  color: var(--radar-blue);
  font-size: 12px;
  font-weight: 750;
}

.radarPage .radarMonitorDetailIdentity h2 {
  margin: 0;
  color: var(--radar-text);
  font-size: 22px;
  font-weight: 760;
  line-height: 1.24;
  overflow-wrap: anywhere;
}

.radarPage .radarMonitorDetailIdentity p {
  margin: 7px 0 0;
  color: var(--radar-muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.radarPage .radarMonitorDetailClose {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--radar-line);
  border-radius: 50%;
  background: var(--radar-control-bg);
  color: var(--radar-body);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.radarPage .radarMonitorDetailClose:hover {
  border-color: var(--radar-accent-border-strong);
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
  transform: translateY(-1px);
}

.radarPage .radarMonitorDetailClose:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.radarPage .radarMonitorDetailStats {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--radar-line-soft);
  background: color-mix(in srgb, var(--radar-panel-soft) 64%, transparent);
}

.radarPage .radarMonitorDetailStats > div {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 18px 24px;
}

.radarPage .radarMonitorDetailStats > div + div {
  border-left: 1px solid var(--radar-line-soft);
}

.radarPage .radarMonitorDetailStats span {
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 650;
}

.radarPage .radarMonitorDetailStats strong {
  min-width: 0;
  color: var(--radar-text);
  font-size: 23px;
  font-weight: 760;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.radarPage .radarMonitorDetailBody {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 24px;
  padding: 24px;
  overscroll-behavior: contain;
}

.radarPage .radarMonitorDetailBody section {
  min-width: 0;
}

.radarPage .radarMonitorDetailSectionHead {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.radarPage .radarMonitorDetailSectionHead h3 {
  margin: 0;
  color: var(--radar-text);
  font-size: 14px;
  font-weight: 750;
}

.radarPage .radarMonitorDetailSectionHead span {
  color: var(--radar-muted);
  font-size: 12px;
}

.radarPage .radarMonitorDetailList {
  margin: 0;
  border-top: 1px solid var(--radar-line-soft);
}

.radarPage .radarMonitorDetailList > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  border-bottom: 1px solid var(--radar-line-soft);
  padding: 14px 0;
}

.radarPage .radarMonitorDetailList dt,
.radarPage .radarMonitorDetailList dd {
  min-width: 0;
  margin: 0;
}

.radarPage .radarMonitorDetailList dt {
  color: var(--radar-muted);
  font-size: 13px;
  font-weight: 650;
}

.radarPage .radarMonitorDetailList dd {
  color: var(--radar-body);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.radarPage .radarMonitorDetailDimensions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.radarPage .radarMonitorDetailDimensions > span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid var(--radar-line);
  border-radius: 999px;
  background: var(--radar-tag-bg);
  padding: 3px 9px;
  color: var(--radar-body);
  font-size: 12px;
}

.radarPage .radarMonitorDetailEvent {
  border-top: 1px solid var(--radar-line-soft);
  padding-top: 20px;
}

.radarPage .radarMonitorDetailEvent p {
  margin: 0;
  color: var(--radar-body);
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

@keyframes radarMonitorDetailEnter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 640px) {
  .radarPage .radarMonitorDetailBackdrop {
    padding: 12px;
  }
}

@media (max-width: 640px) {
  .radarPage .radarMonitorDetailModal {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
  }
}

@media (max-width: 640px) {
  .radarPage .radarMonitorDetailHeader {
    grid-template-columns: 40px minmax(0, 1fr) 34px;
    gap: 12px;
    padding: 18px;
  }
}

@media (max-width: 640px) {
  .radarPage .radarMonitorDetailAvatar {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  .radarPage .radarMonitorDetailIdentity h2 {
    font-size: 19px;
  }
}

@media (max-width: 640px) {
  .radarPage .radarMonitorDetailClose {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 640px) {
  .radarPage .radarMonitorDetailStats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .radarPage .radarMonitorDetailStats > div {
    grid-template-columns: minmax(96px, 0.45fr) minmax(0, 1fr);
    align-items: center;
    padding: 13px 18px;
  }
}

@media (max-width: 640px) {
  .radarPage .radarMonitorDetailStats > div + div {
    border-top: 1px solid var(--radar-line-soft);
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .radarPage .radarMonitorDetailStats strong {
    font-size: 18px;
    text-align: right;
  }
}

@media (max-width: 640px) {
  .radarPage .radarMonitorDetailBody {
    gap: 20px;
    padding: 20px 18px;
  }
}

@media (max-width: 640px) {
  .radarPage .radarMonitorDetailList > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .radarPage .radarMonitorDetailSectionHead {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarMonitorDetailModal {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarMonitorDetailClose {
    transition: none;
  }
}

.radarPage .radarAlertDetailBackdrop {
  z-index: 1700;
  padding: 16px;
  background: color-mix(in srgb, #08111f 42%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(118%);
          backdrop-filter: blur(12px) saturate(118%);
}

.radarPage .radarAlertDetailModal {
  width: min(700px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--radar-line) 84%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--radar-panel) 97%, transparent);
  box-shadow:
    0 30px 80px color-mix(in srgb, #07111f 28%, transparent),
    0 2px 12px color-mix(in srgb, #07111f 10%, transparent);
  padding: 0;
  animation: radarAlertDetailEnter 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.radarPage .radarAlertDetailHeader {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: start;
  gap: 16px;
  border-bottom: 1px solid var(--radar-line-soft);
  padding: 24px;
}

.radarPage .radarAlertDetailHeading {
  min-width: 0;
}

.radarPage .radarAlertDetailEyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.radarPage .radarAlertDetailEyebrow > span:first-child {
  color: var(--radar-blue);
  font-size: 12px;
  font-weight: 750;
}

.radarPage .radarAlertDetailHeading h2 {
  margin: 0;
  color: var(--radar-text);
  font-size: 22px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.radarPage .radarAlertDetailHeading p {
  margin: 8px 0 0;
  color: var(--radar-muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.radarPage .radarAlertDetailClose {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--radar-line);
  border-radius: 50%;
  background: var(--radar-control-bg);
  color: var(--radar-body);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.radarPage .radarAlertDetailClose:hover {
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
  transform: translateY(-1px);
}

.radarPage .radarAlertDetailClose:focus-visible {
  outline: 2px solid var(--radar-blue);
  outline-offset: 2px;
}

.radarPage .radarAlertDetailBody {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 4px 24px 12px;
  scrollbar-gutter: stable;
}

.radarPage .radarAlertDetailSection {
  min-width: 0;
  border-bottom: 1px solid var(--radar-line-soft);
  padding: 18px 0;
}

.radarPage .radarAlertDetailSection h3 {
  margin: 0 0 8px;
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.4;
}

.radarPage .radarAlertDetailSection p {
  margin: 0;
  color: var(--radar-body);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.radarPage .radarAlertDetailFacts {
  margin: 0;
}

.radarPage .radarAlertDetailFacts > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(122px, 0.42fr) minmax(0, 1fr);
  gap: 18px;
  border-top: 1px solid var(--radar-line-soft);
  padding: 11px 0;
}

.radarPage .radarAlertDetailFacts > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.radarPage .radarAlertDetailFacts dt,
.radarPage .radarAlertDetailFacts dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.radarPage .radarAlertDetailFacts dt {
  color: var(--radar-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

.radarPage .radarAlertDetailFacts dd {
  color: var(--radar-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.radarPage .radarAlertDetailRecommendation {
  border-bottom: 0;
}

.radarPage .radarAlertDetailRecommendation p {
  color: var(--radar-text);
  font-weight: 650;
}

.radarPage .radarAlertDetailFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--radar-line-soft);
  padding: 16px 24px;
}

@keyframes radarAlertDetailEnter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 640px) {
  .radarPage .radarAlertDetailBackdrop {
    padding: 12px;
  }
}

@media (max-width: 640px) {
  .radarPage .radarAlertDetailModal {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
  }
}

@media (max-width: 640px) {
  .radarPage .radarAlertDetailHeader {
    gap: 12px;
    padding: 18px;
  }
}

@media (max-width: 640px) {
  .radarPage .radarAlertDetailHeading h2 {
    font-size: 19px;
  }
}

@media (max-width: 640px) {
  .radarPage .radarAlertDetailClose {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 640px) {
  .radarPage .radarAlertDetailBody {
    padding: 2px 18px 8px;
  }
}

@media (max-width: 640px) {
  .radarPage .radarAlertDetailSection {
    padding: 16px 0;
  }
}

@media (max-width: 640px) {
  .radarPage .radarAlertDetailFacts > div {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 12px 0;
  }
}

@media (max-width: 640px) {
  .radarPage .radarAlertDetailFooter {
    padding: 14px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarAlertDetailModal {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarAlertDetailClose {
    transition: none;
  }
}

.radarPage .radarEventActionBackdrop {
  z-index: 1710;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, #07111f 40%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(118%);
          backdrop-filter: blur(14px) saturate(118%);
}

.radarPage .radarEventActionModal {
  width: min(524px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--radar-line) 84%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--radar-panel) 98%, transparent);
  box-shadow:
    0 30px 80px color-mix(in srgb, #07111f 30%, transparent),
    0 2px 12px color-mix(in srgb, #07111f 10%, transparent);
  animation: radarEventActionEnter 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.radarPage .radarEventActionHeader {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: start;
  gap: 16px;
  border-bottom: 1px solid var(--radar-line-soft);
  padding: 24px;
}

.radarPage .radarEventActionHeading {
  min-width: 0;
}

.radarPage .radarEventActionHeading > span {
  display: block;
  color: var(--radar-blue);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.4;
}

.radarPage .radarEventActionHeading h2 {
  margin: 6px 0 0;
  color: var(--radar-text);
  font-size: 22px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.3;
}

.radarPage .radarEventActionHeading p {
  margin: 8px 0 0;
  color: var(--radar-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.radarPage .radarEventActionClose {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--radar-line);
  border-radius: 50%;
  background: var(--radar-control-bg);
  color: var(--radar-body);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.radarPage .radarEventActionClose:hover:not(:disabled) {
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
  transform: translateY(-1px);
}

.radarPage .radarEventActionClose:focus-visible,
.radarPage .radarEventActionMode button:focus-visible,
.radarPage .radarEventActionAnalysis:focus-visible {
  outline: 2px solid var(--radar-blue);
  outline-offset: 2px;
}

.radarPage .radarEventActionBody {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 18px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 22px 24px 24px;
}

.radarPage .radarEventActionFacts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.radarPage .radarEventActionFacts span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--radar-line);
  border-radius: 999px;
  background: var(--radar-control-bg);
  color: var(--radar-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 0 9px;
}

.radarPage .radarEventActionFacts span:first-child {
  border-color: color-mix(in srgb, var(--radar-blue) 25%, var(--radar-line));
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
}

.radarPage .radarEventActionMode {
  min-width: 0;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.radarPage .radarEventActionMode legend,
.radarPage .radarEventActionReminder legend {
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 740;
  line-height: 1.4;
  padding: 0;
}

.radarPage .radarEventActionMode > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  border: 1px solid var(--radar-line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--radar-control-bg) 72%, var(--radar-panel));
  padding: 3px;
}

.radarPage .radarEventActionMode button {
  min-width: 0;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--radar-muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  padding: 0 10px;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.radarPage .radarEventActionMode button.active {
  border-color: color-mix(in srgb, var(--radar-line) 94%, transparent);
  background: var(--radar-panel);
  color: var(--radar-text);
  box-shadow: 0 1px 3px color-mix(in srgb, #07111f 10%, transparent);
}

.radarPage .radarEventActionMode button:disabled,
.radarPage .radarEventActionAnalysis:disabled,
.radarPage .radarEventActionClose:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.radarPage .radarEventActionReminder {
  gap: 10px;
  border-color: var(--radar-line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--radar-control-bg) 58%, var(--radar-panel));
  padding: 14px;
}

.radarPage .radarEventActionReminder .radarIgnorePresets button {
  border-color: var(--radar-line);
  background: var(--radar-panel);
  color: var(--radar-body);
}

.radarPage .radarEventActionReminder .radarIgnorePresets button.active {
  border-color: color-mix(in srgb, var(--radar-blue) 48%, var(--radar-line));
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
}

.radarPage .radarEventActionAnalysis {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--radar-blue) 28%, var(--radar-line));
  border-radius: 7px;
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 740;
  line-height: 1.3;
  padding: 0 14px;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.radarPage .radarEventActionAnalysis:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--radar-blue) 48%, var(--radar-line));
  background: color-mix(in srgb, var(--radar-accent-faint) 78%, var(--radar-panel));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--radar-blue) 13%, transparent);
  transform: translateY(-1px);
}

.radarPage .radarEventActionError {
  margin: -6px 0 0;
}

.radarPage .radarEventActionFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--radar-line-soft);
  padding: 16px 24px;
}

@keyframes radarEventActionEnter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 640px) {
  .radarPage .radarEventActionBackdrop {
    padding: 12px;
  }

  .radarPage .radarEventActionModal {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
  }

  .radarPage .radarEventActionHeader {
    gap: 12px;
    padding: 18px;
  }

  .radarPage .radarEventActionHeading h2 {
    font-size: 19px;
  }

  .radarPage .radarEventActionBody {
    gap: 16px;
    padding: 18px;
  }

  .radarPage .radarEventActionFooter {
    padding: 14px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarEventActionModal {
    animation: none;
  }

  .radarPage .radarEventActionClose,
  .radarPage .radarEventActionMode button,
  .radarPage .radarEventActionAnalysis {
    transition: none;
  }
}

.radarPage .radarSearchSelect[data-open='true'] {
  z-index: 140;
}

.radarSearchSelectMenu {
  position: absolute;
  z-index: 130;
  inset-inline: 0;
  top: calc(100% + 6px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 128, 31, 0.18);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  min-width: min(560px, calc(100vw - 64px));
  max-height: var(--radar-search-menu-max-height, min(620px, calc(100dvh - 140px)));
  overflow: hidden;
}

.radarSearchSelect[data-filter-open='true'] .radarSearchSelectMenu {
  overflow: visible;
}

.radarSearchSelectList {
  display: grid;
  gap: 4px;
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
}

.radarSearchSelectFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(255, 128, 31, 0.12);
  padding-top: 8px;
  position: sticky;
  bottom: 0;
  background: #ffffff;
  z-index: 1;
}

.radarCompareSlotGrid .radarSlotCard:nth-child(even) .radarSearchCategoryPanel {
  left: auto;
  right: calc(100% + 10px);
  transform-origin: right center;
}

.radarPage .radarGeneratedReportDetail {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 18px;
}

.radarPage .radarGeneratedReportDetailHeader {
  min-width: 0;
  display: grid;
  gap: 16px;
  border-bottom: 1px solid var(--radar-line);
  padding-bottom: 18px;
}

.radarPage .radarGeneratedReportDetailHeader > .radarBackButton {
  justify-self: start;
}

.radarPage .radarGeneratedReportTitleRow {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.radarPage .radarGeneratedReportTitleRow > div {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.radarPage .radarGeneratedReportEyebrow {
  color: var(--radar-blue);
  font-size: 12px;
  font-weight: 850;
}

.radarPage .radarGeneratedReportTitleRow h1 {
  margin: 0;
  color: var(--radar-text);
  font-size: 26px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.radarPage .radarGeneratedReportTitleRow p {
  margin: 0;
  color: var(--radar-muted);
  font-size: 13px;
  line-height: 1.5;
}

.radarPage .radarGeneratedReportMeta {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--radar-line);
  background: var(--radar-panel-soft);
}

.radarPage .radarGeneratedReportMeta > div {
  min-width: 0;
  display: grid;
  gap: 5px;
  border-right: 1px solid var(--radar-line);
  padding: 13px 16px;
}

.radarPage .radarGeneratedReportMeta > div:last-child {
  border-right: 0;
}

.radarPage .radarGeneratedReportMeta dt {
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 750;
}

.radarPage .radarGeneratedReportMeta dd {
  min-width: 0;
  margin: 0;
  color: var(--radar-text);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.radarPage .radarGeneratedReportContent {
  min-width: 0;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: var(--radar-panel);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
  padding: 28px 34px;
}

.radarPage .radarGeneratedReportContent .radarGeneratedReportMarkdown {
  max-width: 1080px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.8;
}

.radarPage .radarGeneratedReportState {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: var(--radar-muted);
  text-align: center;
}

.radarPage .radarGeneratedReportState > [role='alert'] {
  width: min(680px, 100%);
}

.radarPage .radarGeneratedReportFeedback {
  margin: 0;
  color: var(--success);
  font-size: 12px;
  font-weight: 750;
  text-align: right;
}

.radarPage .radarGeneratedReportFeedback.error {
  color: var(--danger);
}

@media (max-width: 720px) {
  .radarPage .radarGeneratedReportTitleRow {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .radarPage .radarGeneratedReportTitleRow .radarButton {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .radarPage .radarGeneratedReportMeta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .radarPage .radarGeneratedReportMeta > div,
  .radarPage .radarGeneratedReportMeta > div:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--radar-line);
  }
}

@media (max-width: 720px) {
  .radarPage .radarGeneratedReportMeta > div:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 720px) {
  .radarPage .radarGeneratedReportContent {
    border-radius: 0;
    margin-inline: -8px;
    padding: 20px 16px;
  }
}

.comparisonCompetitorPicker legend {
  color: var(--comparison-ink);
  font-size: 13px;
  font-weight: 800;
}

.comparisonCompetitorGrid label:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, #2563eb 28%, transparent);
  outline-offset: 2px;
}

.comparisonCompetitorPicker {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.comparisonCompetitorPicker legend span {
  color: var(--comparison-muted);
  font-weight: 500;
  margin-left: 6px;
}

.comparisonCompetitorGrid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 9px;
}

.comparisonCompetitorGrid label {
  align-items: center;
  border: 1px solid var(--comparison-border);
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  min-height: 64px;
  min-width: 0;
  padding: 10px;
}

.comparisonCompetitorGrid label.selected {
  background: color-mix(in srgb, #0f9f78 8%, var(--comparison-surface));
  border-color: #0f9f78;
}

.comparisonCompetitorGrid label:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

.comparisonCompetitorGrid input {
  height: 17px;
  margin: 0;
  width: 17px;
}

.comparisonCompetitorGrid label > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.comparisonCompetitorGrid strong,
.comparisonCompetitorGrid small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparisonCompetitorGrid strong {
  font-size: 13px;
}

.comparisonCompetitorGrid small {
  color: var(--comparison-muted);
  font-size: 12px;
}

@media (max-width: 760px) {
  .comparisonCompetitorGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .radarPage .radarComparePrimaryActions {
    align-items: stretch;
    flex-wrap: wrap;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .radarPage .radarComparePrimaryActions > * {
    flex: 1 1 150px;
  }
}

.radarRecentComparisons {
  --comparison-border: color-mix(in srgb, var(--shop-border, #dfe3e8) 88%, #94a3b8);
  --comparison-muted: var(--shop-text-muted, #667085);
  --comparison-ink: var(--shop-text, #17202a);
  --comparison-surface: var(--shop-panel, #ffffff);
  border-color: var(--comparison-border);
  box-shadow: 0 10px 28px rgba(31, 62, 108, 0.06);
}

.radarRecentComparisons .comparisonRecentToolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 12px;
}

.radarRecentComparisons .comparisonRecentToolbar form {
  max-width: none;
  min-height: 42px;
  border: 1px solid var(--comparison-border);
  border-radius: 8px;
  background: var(--comparison-surface);
  box-shadow: 0 1px 2px rgba(31, 62, 108, 0.04);
}

.radarRecentComparisons .comparisonRecentToolbar form button {
  background: color-mix(in srgb, #2563eb 8%, var(--comparison-surface));
  border-left-color: var(--comparison-border);
  color: #1769d2;
  min-width: 72px;
}

.radarRecentComparisons .comparisonStatusFilter,
.radarRecentComparisons .comparisonStatusFilter select {
  width: 100%;
}

.radarRecentComparisons .comparisonStatusFilter select {
  min-height: 42px;
  border: 1px solid var(--comparison-border);
  border-radius: 8px;
  background: var(--comparison-surface);
}

.radarCompareTemplatePanelEmpty {
  align-self: start;
}

.radarTemplateEmptyState {
  align-items: center;
  background: color-mix(in srgb, var(--surface-panel) 92%, #f4f7fb);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 146px;
  padding: 18px;
}

.radarTemplateEmptyIcon {
  align-items: center;
  background: var(--radar-blue-soft);
  border: 1px solid color-mix(in srgb, var(--radar-blue) 20%, var(--line-dark));
  border-radius: 8px;
  color: var(--radar-blue);
  display: inline-flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.radarTemplateEmptyState > div {
  min-width: 0;
}

.radarTemplateEmptyState strong {
  color: var(--text-1);
  display: block;
  font-size: 14px;
  line-height: 1.45;
}

.radarTemplateEmptyState p {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
  margin: 4px 0 0;
}

.radarTemplateCompetitors .radarSearchSelect {
  position: relative;
  z-index: 1;
}

.radarTemplateCompetitors .radarSearchSelect.open {
  z-index: 90;
}

.radarTemplateCompetitors .radarSearchSelect.open .radarSearchMenu {
  z-index: 100;
}

.radarTemplateManageEmpty {
  align-content: center;
  justify-items: center;
  min-height: 260px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: var(--radar-control-bg);
  color: var(--radar-body);
  display: grid;
  gap: 8px;
  padding: 24px 18px;
  text-align: center;
}

.radarTemplateManageEmptyIcon {
  align-items: center;
  background: var(--radar-blue-soft);
  border: 1px solid color-mix(in srgb, var(--radar-blue) 18%, var(--radar-line));
  border-radius: 8px;
  color: var(--radar-blue);
  display: inline-flex;
  height: 42px;
  justify-content: center;
  margin-bottom: 2px;
  width: 42px;
}

.radarTemplateManageEmpty strong {
  color: var(--radar-text);
  font-size: 14px;
}

.radarTemplateManageEmpty p {
  color: var(--radar-muted);
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
  max-width: 220px;
}

.radarTemplateManageEmpty button {
  min-height: 32px;
  border: 1px solid var(--radar-blue);
  border-radius: 6px;
  background: var(--radar-blue);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  margin-top: 4px;
  padding: 5px 11px;
}

.radarTemplateManageEmpty button:hover {
  background: var(--radar-blue-strong);
  border-color: var(--radar-blue-strong);
}

@media (max-width: 760px) {
  .radarRecentComparisons .comparisonRecentToolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .radarTemplateEmptyState {
    min-height: 0;
    padding: 16px;
  }
}

@media (max-width: 760px) {
  .radarTemplateManageEmpty {
    min-height: 180px;
  }
}

@media (min-width: 1181px) {
  .radarPage .radarAlertsTopRow {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.7fr) minmax(360px, 0.9fr);
  }
}

.radarPage .radarAlertStatusAnnouncement {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.radarPage .radarAlertAsyncRegion {
  min-width: 0;
}

.radarPage .radarAlertAsyncRegion[aria-busy='true'] {
  cursor: progress;
}

.radarPage .radarAlertAsyncRegion[inert] {
  pointer-events: none;
}

.radarPage .radarAlertRefreshing {
  opacity: 0.72;
  transition: opacity 160ms ease-out;
}

.radarPage .radarAlertReveal {
  animation: radarAlertReadyReveal 260ms ease-out both;
}

.radarPage .radarAlertMetricGroups {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
  gap: 14px;
}

.radarPage .radarAlertMetricGroup,
.radarPage .radarAlertMetricGroup > .radarMetricGrid {
  min-width: 0;
}

.radarPage .radarAlertMetricGroup.analytics > .radarMetricGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.radarPage .radarAlertMetricGroup.rules > .radarMetricGrid {
  grid-template-columns: minmax(0, 1fr);
}

.radarPage .radarAlertMetricSkeleton .cuiSkeletonBlock {
  min-height: 112px;
}

.radarPage .radarAlertsTopRow > .radarAlertTopRegion {
  min-width: 0;
  display: grid;
}

.radarPage .radarAlertTopRegion > .radarPanel,
.radarPage .radarAlertRailRegion > .radarSideStack {
  min-width: 0;
  height: 100%;
}

.radarPage .radarAlertChartSkeleton {
  min-height: 250px;
  align-content: center;
}

.radarPage .radarAlertChartSkeleton .cuiSkeletonBlock {
  min-height: 168px;
}

.radarPage .radarAlertRailSkeleton {
  min-height: 330px;
  align-content: start;
}

.radarPage .radarAlertTableSkeleton,
.radarPage .radarAlertHistorySkeleton,
.radarPage .radarEnglishAlertsSkeleton {
  min-width: 760px;
}

.radarPage .radarAlertRulesSkeleton {
  min-height: 390px;
}

.radarPage .radarAlertRuleDetailSkeleton {
  min-height: 270px;
}

.radarPage .radarAlertHistoryRegion,
.radarPage .radarAlertRulesRegion,
.radarPage .radarEnglishAlertsRegion {
  width: 100%;
}

@keyframes radarAlertReadyReveal {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .radarPage .radarAlertMetricGroups {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .radarPage .radarAlertMetricGroup.analytics > .radarMetricGrid,
  .radarPage .radarAlertMetricGroup.rules > .radarMetricGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarAlertReveal {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .radarAlertRefreshing {
    opacity: 1;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarPage .cuiSkeletonMedia::after,
  .radarPage .cuiSkeletonLine::after,
  .radarPage .cuiSkeletonTableHead span::after,
  .radarPage .cuiSkeletonTableRow span::after {
    animation: none;
    transform: none;
  }
}

.radarAlertQuickRanges {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.radarAlertQuickRanges > button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.radarAlertRangePicker {
  width: 260px;
  min-width: 0;
}

.radarAlertDateRange .radarAlertRangePicker .cuiDatePickerTrigger {
  width: 100%;
  min-width: 250px;
  min-height: 34px;
  border-color: var(--radar-line);
  border-radius: 999px;
  background: #ffffff;
  padding: 0 11px;
  color: var(--radar-body);
  font-size: 12px;
  font-weight: 850;
}

.radarAlertDateRange .radarAlertRangePicker .cuiDatePickerValue {
  color: var(--radar-body);
}

.radarAlertDateRange .radarAlertRangePicker .cuiDatePickerIcon,
.radarAlertDateRange .radarAlertRangePicker .cuiDatePickerTrailingIcon {
  color: var(--radar-muted);
}

.radarAlertDateRange .radarAlertRangePicker .cuiDatePickerTrigger:hover:not(:disabled),
.radarAlertDateRange .radarAlertRangePicker .cuiDatePickerTrigger:focus-visible {
  border-color: var(--radar-orange-strong, var(--warning, #f97316));
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
  outline: 0;
}

@media (max-width: 720px) {
  .radarAlertDateRange {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .radarAlertRangePicker,
  .radarAlertDateRange .radarAlertRangePicker .cuiDatePickerTrigger {
    width: 100%;
    min-width: 0;
  }
}

.radarPage .radarMonitorBoard > .radarPanelHeader .radarSegmented {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(520px, 100%);
}

.radarPage .radarMonitorBoard > .radarPanelHeader .radarSegmented button {
  min-width: 0;
  white-space: normal;
}

.radarMonitorFormHint {
  margin: 12px 0 0;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.radarCollectorBackdrop {
  z-index: 140;
}

.radarPage .radarCollectorDialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.radarCollectorHeader {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line-dark);
  padding: 20px 22px 17px;
}

.radarCollectorHeader > div {
  min-width: 0;
}

.radarCollectorHeader span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.radarCollectorHeader h2 {
  margin: 3px 0 0;
  font-size: 21px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.radarCollectorHeader > button {
  width: 36px;
  height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel);
  color: var(--text-2);
  cursor: pointer;
}

.radarCollectorHeader > button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.radarCollectorHeader > button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.radarCollectorCadences {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line-dark);
  background: var(--surface-panel-subtle);
  padding: 8px 22px;
}

.radarCollectorCadences button {
  min-width: 0;
  min-height: 38px;
  border: 0;
  border-left: 1px solid var(--line-dark);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0;
  padding: 7px 9px;
  white-space: normal;
}

.radarCollectorCadences button:first-child {
  border-left: 0;
}

.radarCollectorCadences button.active,
.radarCollectorCadences button[aria-pressed='true'] {
  background: var(--surface-panel-strong);
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--primary);
}

.radarCollectorCadences button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.radarCollectorBody {
  min-height: 280px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 20px 22px 22px;
}

.radarCollectorOverview {
  border-top: 1px solid var(--line-dark);
}

.radarCollectorOverview > button {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  letter-spacing: 0;
  padding: 17px 8px;
  text-align: left;
}

.radarCollectorOverview > button:hover {
  background: var(--surface-panel-subtle);
}

.radarCollectorOverview > button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.radarCollectorOverview > button > span {
  min-width: 0;
  display: grid;
  gap: 4px;
  overflow-wrap: anywhere;
}

.radarCollectorOverview strong {
  font-size: 13px;
}

.radarCollectorOverview em,
.radarCollectorOverview > button > span:nth-child(2) {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  line-height: 1.5;
}

.radarCollectorForm {
  display: grid;
  gap: 18px;
}

.radarCollectorToggle {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border-bottom: 1px solid var(--line-dark);
  padding: 0 0 16px;
}

.radarCollectorToggle input {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 2px 0 0;
}

.radarCollectorToggle > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.radarCollectorToggle strong {
  font-size: 13px;
}

.radarCollectorToggle em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.radarCollectorFields {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 18px;
}

.radarCollectorFields .wide {
  grid-column: 1 / -1;
}

.radarCollectorForm .radarModalActions {
  margin-top: 0;
  border-top: 1px solid var(--line-dark);
  padding-top: 16px;
}

@media (max-width: 720px) {
  .radarPage .radarMonitorBoard > .radarPanelHeader .radarSegmented {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .radarCollectorBackdrop {
    align-items: stretch;
    padding: 0;
  }
}

@media (max-width: 720px) {
  .radarPage .radarCollectorDialog {
    width: 100%;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}

@media (max-width: 720px) {
  .radarCollectorHeader,
  .radarCollectorBody {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 720px) {
  .radarCollectorCadences {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 520px) {
  .radarPage .radarMonitorBoard > .radarPanelHeader .radarSegmented,
  .radarCollectorCadences {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .radarCollectorCadences button:nth-child(3) {
    border-left: 0;
  }
}

@media (max-width: 520px) {
  .radarCollectorOverview > button {
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 10px;
  }
}

@media (max-width: 520px) {
  .radarCollectorOverview > button > span:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 520px) {
  .radarCollectorOverview > button > svg {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 520px) {
  .radarCollectorFields {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .radarCollectorFields .wide {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .radarCollectorForm .radarModalActions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .radarCollectorForm .radarModalActions .radarButton {
    min-width: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radarCollectorDialog *,
  .radarMonitorEditGrid * {
    scroll-behavior: auto;
    transition: none !important;
  }
}

.radarPage .radarCompareCountBlock {
  align-content: start;
  gap: 6px;
  padding: 12px 14px;
}

.radarPage .radarCompareConfigLeft {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.radarPage .radarCompareConfigLeft > .radarCompareCountBlock {
  margin-top: auto;
}

@media (max-width: 640px) {
  .radarPage .radarCompareConfigLeft > .radarCompareCountBlock {
    margin-top: 0;
  }
}

.radarPage .radarCompareOwnStoreBlock {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
}

.radarPage .radarCompareOwnStoreField {
  min-width: 0;
}

.radarPage .radarCompareRangeControl {
  min-width: 0;
  display: grid;
  grid-template-columns: 74px max-content minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--radar-line) 82%, #dce9f8);
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px 12px;
}

.radarPage .radarCompareRangeLabel {
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 800;
}

.radarPage .radarCompareRangePresets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  border: 1px solid #d9e4f2;
  border-radius: 8px;
  background: #eef4fb;
  padding: 3px;
}

.radarPage .radarCompareRangePresets button {
  min-width: 78px;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--radar-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 0 10px;
  cursor: pointer;
}

.radarPage .radarCompareRangePresets button:hover {
  background: #e2eefc;
  color: var(--radar-blue);
}

.radarPage .radarCompareRangePresets button.active {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(31, 60, 96, 0.14);
  color: var(--radar-blue);
}

.radarPage .radarCompareRangePresets button:focus-visible {
  outline: 2px solid var(--radar-blue);
  outline-offset: 1px;
}

.radarPage .radarCompareRangePicker {
  min-width: 0;
}

.radarPage .radarCompareRangePicker .cuiDatePickerTrigger {
  min-height: 34px;
  border-color: color-mix(in srgb, var(--radar-orange-strong) 28%, var(--radar-line));
  border-radius: 8px;
  background: var(--radar-panel);
  color: var(--radar-blue);
}

.radarPage .radarCompareRangePicker .cuiDatePickerIcon,
.radarPage .radarCompareRangePicker .cuiDatePickerTrailingIcon {
  color: var(--radar-orange-strong);
}

.radarPage .radarCompareRangePicker .cuiDatePickerTrigger:hover:not(:disabled),
.radarPage .radarCompareRangePicker .cuiDatePickerTrigger:focus-visible {
  border-color: var(--radar-orange-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--radar-orange-strong) 16%, transparent);
}

.radarPage .radarCompareActionRow {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid color-mix(in srgb, var(--radar-line) 78%, transparent);
  padding-top: 12px;
}

@media (max-width: 960px) {
  .radarPage .radarCompareRangeControl {
    grid-template-columns: 74px minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  .radarPage .radarCompareRangePicker {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .radarPage .radarCompareRangeControl {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .radarPage .radarCompareRangePresets,
  .radarPage .radarCompareRangePicker {
    grid-column: auto;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .radarPage .radarCompareRangePresets button {
    min-width: 0;
    padding: 0 6px;
  }
}

@media (max-width: 640px) {
  .radarPage .radarCompareActionRow {
    align-items: stretch;
    justify-content: stretch;
  }
}

@media (max-width: 640px) {
  .radarPage .radarCompareActionRow > .radarButton,
  .radarPage .radarCompareActionRow > .radarComparePrimaryActions {
    width: 100%;
  }
}

.radarCompareTemplatePanel,
.radarCompareTemplatePanel .radarTemplateList {
  align-content: start;
}

.radarCompareTemplatePanel .radarTemplateList {
  grid-auto-rows: max-content;
}

/* Smart comparison reports */

.comparisonReportsWorkspace,
.comparisonReportDetail {
  --comparison-border: color-mix(in srgb, var(--shop-border, #dfe3e8) 88%, #94a3b8);
  --comparison-muted: var(--shop-text-muted, #667085);
  --comparison-ink: var(--shop-text, #17202a);
  --comparison-surface: var(--shop-panel, #ffffff);
  color: var(--comparison-ink);
  display: grid;
  gap: 20px;
  letter-spacing: 0;
  min-width: 0;
}

.comparisonBuilderPanel,
.comparisonRecentPanel,
.comparisonReportSection,
.comparisonReportHero {
  background: var(--comparison-surface);
  border: 1px solid var(--comparison-border);
  border-radius: 8px;
  min-width: 0;
}

.comparisonBuilderPanel,
.comparisonRecentPanel,
.comparisonReportSection {
  padding: 22px;
}

.comparisonSectionHeader,
.comparisonPromptDialogHeader,
.comparisonReportHero {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.comparisonSectionHeader > div,
.comparisonPromptDialogHeader > div,
.comparisonReportHero > div:first-child {
  min-width: 0;
}

.comparisonSectionHeader > div > span,
.comparisonPromptDialogHeader > div > span {
  align-items: center;
  color: #16705a;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  letter-spacing: 0;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.comparisonSectionHeader h2,
.comparisonPromptDialogHeader h2,
.comparisonReportSection h2 {
  font-size: 20px;
  line-height: 1.25;
  margin: 0;
}

.comparisonSectionHeader p,
.comparisonPromptDialogHeader p {
  color: var(--comparison-muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 6px 0 0;
  max-width: 760px;
}

.comparisonBuilderGrid {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.38fr);
  margin-top: 22px;
}

.comparisonBuilderMain {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.comparisonField {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.comparisonField > span,
.comparisonCompetitorPicker legend,
.comparisonDimensionRow > span {
  color: var(--comparison-ink);
  font-size: 13px;
  font-weight: 800;
}

.comparisonField input,
.comparisonField select,
.comparisonField textarea,
.comparisonStatusFilter select {
  background: var(--comparison-surface);
  border: 1px solid var(--comparison-border);
  border-radius: 6px;
  color: var(--comparison-ink);
  font: inherit;
  font-size: 14px;
  min-height: 42px;
  min-width: 0;
  padding: 9px 11px;
  width: 100%;
}

.comparisonField input:focus-visible,
.comparisonField select:focus-visible,
.comparisonField textarea:focus-visible,
.comparisonRecentToolbar input:focus-visible,
.comparisonRecentToolbar select:focus-visible,
.comparisonButton:focus-visible,
.comparisonIconButton:focus-visible,
.comparisonSegmented button:focus-visible,
.comparisonCompetitorGrid label:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, #2563eb 28%, transparent);
  outline-offset: 2px;
}

.comparisonCompetitorPicker {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.comparisonCompetitorPicker legend span {
  color: var(--comparison-muted);
  font-weight: 500;
  margin-left: 6px;
}

.comparisonCompetitorGrid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 9px;
}

.comparisonCompetitorGrid label {
  align-items: center;
  border: 1px solid var(--comparison-border);
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  min-height: 64px;
  min-width: 0;
  padding: 10px;
}

.comparisonCompetitorGrid label.selected {
  background: color-mix(in srgb, #0f9f78 8%, var(--comparison-surface));
  border-color: #0f9f78;
}

.comparisonCompetitorGrid label:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

.comparisonCompetitorGrid input {
  height: 17px;
  margin: 0;
  width: 17px;
}

.comparisonCompetitorGrid label > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.comparisonCompetitorGrid strong,
.comparisonCompetitorGrid small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparisonCompetitorGrid strong {
  font-size: 13px;
}

.comparisonCompetitorGrid small,
.comparisonEmptyText {
  color: var(--comparison-muted);
  font-size: 12px;
}

.comparisonDimensionRow {
  display: grid;
  gap: 9px;
}

.comparisonDimensionRow > div,
.comparisonPromptMeta,
.comparisonEvidenceRefs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.comparisonDimensionRow > div > span,
.comparisonPromptMeta > span,
.comparisonEvidenceRefs code {
  background: #f2f4f7;
  border: 1px solid #e3e7ec;
  border-radius: 5px;
  color: #344054;
  font-size: 12px;
  padding: 5px 8px;
}

.comparisonRangePanel {
  align-self: start;
  background: #f7f8fa;
  border: 1px solid var(--comparison-border);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  padding: 16px;
}

.comparisonRangeTitle {
  align-items: center;
  display: flex;
  gap: 8px;
}

.comparisonSegmented {
  background: #e9edf2;
  border-radius: 7px;
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 3px;
}

.comparisonSegmented button {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #475467;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  min-height: 34px;
  padding: 6px 8px;
}

.comparisonSegmented button.active {
  background: var(--comparison-surface);
  box-shadow: 0 1px 3px rgb(15 23 42 / 12%);
  color: #123f7a;
}

.comparisonDateGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.comparisonSelectionSummary {
  border-top: 1px solid var(--comparison-border);
  display: grid;
  gap: 4px;
  padding-top: 14px;
}

.comparisonSelectionSummary strong {
  color: #0f7b61;
  font-size: 28px;
  line-height: 1;
}

.comparisonSelectionSummary span {
  font-size: 13px;
  font-weight: 750;
}

.comparisonSelectionSummary small {
  color: var(--comparison-muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.comparisonPromptOverview {
  align-items: center;
  background: color-mix(in srgb, #2563eb 4%, var(--comparison-surface));
  border: 1px solid color-mix(in srgb, #2563eb 24%, var(--comparison-border));
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  margin-top: 22px;
  padding: 14px;
}

.comparisonPromptOverviewIcon {
  align-items: center;
  background: #e8f0ff;
  border-radius: 7px;
  color: #1d4ed8;
  display: flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.comparisonPromptOverview strong {
  font-size: 14px;
}

.comparisonPromptOverview p {
  color: var(--comparison-muted);
  font-size: 12px;
  line-height: 1.5;
  margin: 3px 0;
}

.comparisonPromptOverview small {
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 750;
}

.comparisonButton,
.comparisonIconButton,
.comparisonBackButton,
.comparisonPagination button,
.comparisonRecentToolbar button,
.comparisonStateBox button {
  align-items: center;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  gap: 7px;
  justify-content: center;
}

.comparisonButton {
  border-radius: 6px;
  min-height: 38px;
  padding: 8px 13px;
}

.comparisonButton.primary {
  background: #1d4ed8;
  color: #fff;
}

.comparisonButton.secondary {
  background: var(--comparison-surface);
  border-color: var(--comparison-border);
  color: #344054;
}

.comparisonButton.ghost {
  background: transparent;
  color: #1d4ed8;
}

.comparisonButton.large {
  min-height: 46px;
  min-width: 190px;
  padding: 10px 18px;
}

.comparisonButton.compact {
  min-height: 32px;
  padding: 5px 9px;
}

.comparisonButton:disabled,
.comparisonIconButton:disabled,
.comparisonPagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.comparisonIconButton {
  background: var(--comparison-surface);
  border-color: var(--comparison-border);
  border-radius: 6px;
  color: #475467;
  height: 36px;
  padding: 0;
  width: 36px;
}

.comparisonGenerateRow {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.comparisonInlineError,
.comparisonExportNotice {
  align-items: flex-start;
  border-radius: 6px;
  display: flex;
  font-size: 13px;
  gap: 9px;
  line-height: 1.5;
  margin-top: 12px;
  padding: 10px 12px;
}

.comparisonInlineError {
  background: #fff2f0;
  border: 1px solid #ffccc7;
  color: #9f2118;
}

.comparisonInlineError > span {
  display: grid;
  gap: 2px;
}

.comparisonExportNotice {
  background: #ecfdf3;
  border: 1px solid #abefc6;
  color: #067647;
}

.comparisonStateBox,
.comparisonReportPageState {
  align-items: center;
  background: #f7f8fa;
  border: 1px dashed var(--comparison-border);
  border-radius: 7px;
  color: var(--comparison-muted);
  display: flex;
  gap: 9px;
  justify-content: center;
  min-height: 92px;
  padding: 18px;
  text-align: center;
}

.comparisonStateBox.error,
.comparisonReportPageState.error {
  background: #fff7f6;
  border-color: #f5b7b1;
  color: #9f2118;
}

.comparisonStateBox button {
  background: var(--comparison-surface);
  border-color: var(--comparison-border);
  border-radius: 5px;
  color: inherit;
  min-height: 30px;
  padding: 4px 9px;
}

.comparisonRecentPanel {
  display: grid;
  gap: 16px;
}

.comparisonRecentToolbar {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.comparisonRecentToolbar form {
  align-items: center;
  border: 1px solid var(--comparison-border);
  border-radius: 6px;
  display: flex;
  flex: 1 1;
  max-width: 620px;
  min-height: 40px;
  overflow: hidden;
  padding-left: 11px;
}

.comparisonRecentToolbar form svg {
  color: var(--comparison-muted);
  flex: none;
}

.comparisonRecentToolbar input {
  background: transparent;
  border: 0;
  caret-color: transparent;
  color: var(--comparison-ink);
  flex: 1 1;
  font: inherit;
  min-width: 0;
  outline: 0;
  padding: 9px;
}

.comparisonRecentToolbar form button {
  align-self: stretch;
  background: #f2f4f7;
  border: 0;
  border-left: 1px solid var(--comparison-border);
  color: #344054;
  padding: 0 14px;
}

.comparisonStatusFilter {
  min-width: 150px;
}

.comparisonRecentList {
  border: 1px solid var(--comparison-border);
  border-radius: 7px;
  overflow: hidden;
}

.comparisonRecentRow {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(240px, 1.5fr) 96px minmax(130px, 0.7fr) minmax(100px, 0.5fr) auto;
  min-height: 86px;
  padding: 12px 14px;
}

.comparisonRecentRow + .comparisonRecentRow {
  border-top: 1px solid var(--comparison-border);
}

.comparisonRecentIdentity,
.comparisonRecentMeta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.comparisonRecentIdentity strong,
.comparisonRecentIdentity span,
.comparisonRecentIdentity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparisonRecentIdentity strong {
  font-size: 14px;
}

.comparisonRecentIdentity span,
.comparisonRecentIdentity small,
.comparisonRecentMeta span {
  color: var(--comparison-muted);
  font-size: 11px;
}

.comparisonRecentMeta strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.comparisonRecentActions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.comparisonStatusBadge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  justify-content: center;
  padding: 5px 9px;
  white-space: nowrap;
}

.comparisonStatusBadge.pending {
  background: #f2f4f7;
  color: #475467;
}

.comparisonStatusBadge.running {
  background: #fff7e6;
  color: #a15c00;
}

.comparisonStatusBadge.succeeded {
  background: #eafbf2;
  color: #067647;
}

.comparisonStatusBadge.failed {
  background: #fff0ee;
  color: #b42318;
}

.comparisonPagination {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.comparisonPagination button {
  background: var(--comparison-surface);
  border-color: var(--comparison-border);
  border-radius: 5px;
  color: #344054;
  height: 34px;
  padding: 0;
  width: 34px;
}

.comparisonPagination span {
  color: var(--comparison-muted);
  font-size: 12px;
}

.comparisonPromptBackdrop {
  align-items: center;
  background: rgb(15 23 42 / 54%);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 1200;
}

.comparisonPromptDialog {
  background: var(--shop-panel, #fff);
  border: 1px solid var(--comparison-border, #dfe3e8);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgb(15 23 42 / 24%);
  color: var(--shop-text, #17202a);
  display: grid;
  gap: 16px;
  max-height: min(780px, calc(100vh - 48px));
  max-width: 900px;
  overflow: auto;
  padding: 20px;
  width: 100%;
}

.comparisonPreviewBackdrop {
  align-items: center;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  background: rgb(15 23 42 / 48%);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 1250;
}

.comparisonPreviewDialog {
  --comparison-border: color-mix(in srgb, var(--shop-border, #dfe3e8) 88%, #94a3b8);
  --comparison-ink: var(--shop-text, #17202a);
  --comparison-muted: var(--shop-text-muted, #667085);
  --comparison-surface: var(--shop-panel, #fff);
  background: var(--comparison-surface);
  border: 1px solid var(--comparison-border);
  border-radius: 8px;
  box-shadow: 0 28px 80px rgb(15 23 42 / 22%);
  color: var(--comparison-ink);
  display: flex;
  flex-direction: column;
  letter-spacing: 0;
  max-height: min(860px, calc(100vh - 48px));
  max-width: 1120px;
  min-width: 0;
  overflow: hidden;
  white-space: normal;
  width: 100%;
}

.comparisonPreviewHeader {
  align-items: flex-start;
  border-bottom: 1px solid var(--comparison-border);
  display: flex;
  flex: none;
  gap: 20px;
  justify-content: space-between;
  padding: 20px 22px 18px;
}

.comparisonPreviewHeader > div {
  min-width: 0;
}

.comparisonPreviewHeader > div > span {
  color: #14735b;
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 5px;
}

.comparisonPreviewHeader h2 {
  font-size: 22px;
  line-height: 1.25;
  margin: 0;
}

.comparisonPreviewHeader p {
  color: var(--comparison-muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 6px 0 0;
}

.comparisonPreviewBody {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 22px 22px;
}

.comparisonPreviewState {
  align-items: center;
  color: var(--comparison-muted);
  display: flex;
  gap: 10px;
  justify-content: center;
  min-height: 260px;
  padding: 30px;
  text-align: center;
}

.comparisonPreviewState.isError {
  color: #9f2d2d;
  flex-wrap: wrap;
}

.comparisonPreviewSummary {
  background: #f6f7f8;
  border-bottom: 1px solid var(--comparison-border);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 -22px 22px;
  padding: 8px 22px;
}

.comparisonPreviewSummary > div {
  min-width: 0;
  padding: 10px 14px 10px 0;
}

.comparisonPreviewSummary dt,
.comparisonPreviewSummary dd {
  margin: 0;
}

.comparisonPreviewSummary dt {
  color: var(--comparison-muted);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 3px;
}

.comparisonPreviewSummary dd {
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.comparisonPreviewManagedNotice {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  border: 1px solid #d7dce3;
  border-radius: 7px;
  background: #f7f8fa;
  color: #475467;
  margin: 0 0 18px;
  padding: 11px 12px;
}

.comparisonPreviewManagedNotice > svg {
  margin-top: 1px;
  color: #667085;
}

.comparisonPreviewManagedNotice strong,
.comparisonPreviewManagedNotice p,
.comparisonPreviewManagedNotice span {
  display: block;
  margin: 0;
  overflow-wrap: anywhere;
}

.comparisonPreviewManagedNotice strong {
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.comparisonPreviewManagedNotice p,
.comparisonPreviewManagedNotice span {
  font-size: 11px;
  line-height: 1.5;
}

.comparisonPreviewManagedNotice p {
  margin-top: 2px;
}

.comparisonPreviewManagedNotice span {
  color: #667085;
  margin-top: 3px;
}

.comparisonPreviewSectionTitle {
  font-size: 15px;
  line-height: 1.4;
  margin: 0 0 12px;
}

.comparisonPreviewStoreGrid {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.comparisonPreviewStoreCard {
  background: var(--comparison-surface);
  border: 1px solid var(--comparison-border);
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
}

.comparisonPreviewStoreCard.isOwn {
  border-color: color-mix(in srgb, #168467 48%, var(--comparison-border));
  box-shadow: inset 3px 0 0 #168467;
}

.comparisonPreviewStoreCard > header {
  align-items: flex-start;
  background: #fafafa;
  border-bottom: 1px solid var(--comparison-border);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  min-width: 0;
  padding: 15px 16px 13px;
}

.comparisonPreviewStoreCard > header > div {
  min-width: 0;
}

.comparisonPreviewStoreCard h4 {
  font-size: 16px;
  line-height: 1.35;
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}

.comparisonPreviewStoreCard > header p {
  color: var(--comparison-muted);
  flex: 0 1 44%;
  font-size: 11px;
  line-height: 1.45;
  margin: 1px 0 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.comparisonPreviewRole {
  color: #14735b;
  font-size: 11px;
  font-weight: 800;
}

.comparisonPreviewMetricList {
  margin: 0;
  padding: 0 16px;
}

.comparisonPreviewMetricRow {
  align-items: start;
  border-top: 1px solid color-mix(in srgb, var(--comparison-border) 72%, transparent);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(104px, 0.38fr) minmax(0, 1fr);
  padding: 13px 0;
}

.comparisonPreviewMetricRow:first-child {
  border-top: 0;
}

.comparisonPreviewMetricRow dt,
.comparisonPreviewMetricRow dd {
  margin: 0;
}

.comparisonPreviewMetricRow dt {
  color: #344054;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.comparisonPreviewMetricRow dd {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: right;
}

.comparisonPreviewMetricRow strong {
  font-size: 16px;
  line-height: 1.35;
}

.comparisonPreviewMetricRow strong.isUnavailable {
  color: #8a5a12;
  font-size: 13px;
}

.comparisonPreviewMetricRow dd span {
  color: var(--comparison-muted);
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.comparisonPreviewStatisticToggleRow {
  border-top: 1px solid color-mix(in srgb, var(--comparison-border) 72%, transparent);
  padding: 0 16px;
}

.comparisonPreviewPublicData {
  background: #fbfcfb;
  border-top: 1px solid var(--comparison-border);
  padding: 0 16px 12px;
}

.comparisonPreviewStatisticToggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: #14735b;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  gap: 6px;
  justify-content: center;
  letter-spacing: 0;
  min-height: 44px;
  padding: 8px;
  white-space: normal;
  width: 100%;
}

.comparisonPreviewStatisticToggle:hover {
  color: #0d5f49;
}

.comparisonPreviewStatisticToggle:focus-visible {
  border-radius: 5px;
  outline: 2px solid #168467;
  outline-offset: -3px;
}

.comparisonPreviewStatisticToggle svg {
  flex: none;
  transition: transform 160ms ease;
}

.comparisonPreviewStatisticToggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.comparisonPreviewStatistics {
  background: #f7f9f8;
  border-top: 1px solid var(--comparison-border);
  padding: 0 16px 12px;
}

.comparisonPreviewStatistics[hidden] {
  display: none;
}

.comparisonPreviewStatisticGroup {
  padding-top: 14px;
}

.comparisonPreviewStatisticGroup + .comparisonPreviewStatisticGroup {
  border-top: 1px solid color-mix(in srgb, var(--comparison-border) 72%, transparent);
  margin-top: 4px;
}

.comparisonPreviewStatisticGroup h5 {
  color: #344054;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 5px;
}

.comparisonPreviewStatisticList {
  display: grid;
  gap: 0 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  min-width: 0;
}

.comparisonPreviewStatisticRow {
  border-top: 1px solid color-mix(in srgb, var(--comparison-border) 58%, transparent);
  min-width: 0;
  padding: 10px 0;
}

.comparisonPreviewStatisticRow dt,
.comparisonPreviewStatisticRow dd {
  margin: 0;
  min-width: 0;
}

.comparisonPreviewStatisticRow dt {
  color: #475467;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.comparisonPreviewStatisticRow dd {
  display: grid;
  gap: 2px;
  margin-top: 4px;
}

.comparisonPreviewStatisticRow strong {
  color: var(--comparison-ink);
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.comparisonPreviewStatisticRow strong.isUnavailable {
  color: #8a5a12;
  font-size: 12px;
}

.comparisonPreviewStatisticRow dd span,
.comparisonPreviewStatisticEmpty {
  color: var(--comparison-muted);
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.comparisonPreviewStatisticEmpty {
  margin: 8px 0 12px;
}

.comparisonPreviewRefreshNote {
  align-items: flex-start;
  color: var(--comparison-muted);
  display: flex;
  font-size: 11px;
  gap: 7px;
  line-height: 1.5;
  margin: 14px 0 0;
}

.comparisonPreviewRefreshNote svg {
  flex: none;
  margin-top: 1px;
}

.comparisonPromptLanguage {
  display: flex;
  gap: 6px;
}

.comparisonPromptLanguage button {
  background: #f2f4f7;
  border: 1px solid var(--comparison-border);
  border-radius: 5px;
  color: #475467;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  min-height: 34px;
  padding: 6px 12px;
}

.comparisonPromptLanguage button.active {
  background: #e8f0ff;
  border-color: #8eb5ff;
  color: #1d4ed8;
}

.comparisonPromptField textarea {
  line-height: 1.55;
  min-height: 300px;
  resize: vertical;
}

.comparisonPromptField textarea[readonly] {
  background: #f7f8fa;
}

.comparisonGuardNote,
.comparisonReadonlyNote {
  color: var(--comparison-muted);
  display: flex;
  font-size: 12px;
  gap: 8px;
  line-height: 1.5;
  margin: 0;
}

.comparisonGuardNote svg {
  flex: none;
  margin-top: 1px;
}

.comparisonPromptActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.comparisonReportDetail {
  padding-bottom: 28px;
}

.comparisonBackButton {
  background: transparent;
  border: 0;
  color: #1d4ed8;
  justify-self: start;
  padding: 0;
}

.comparisonReportHero {
  padding: 24px;
}

.comparisonReportHeroStatus {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.comparisonReportHeroStatus > span:last-child {
  color: var(--comparison-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.comparisonReportHero h1 {
  font-size: 28px;
  letter-spacing: 0;
  line-height: 1.18;
  margin: 14px 0 8px;
}

.comparisonReportHero > div > p {
  color: var(--comparison-muted);
  line-height: 1.55;
  margin: 0;
}

.comparisonReportMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 18px;
}

.comparisonReportMeta > span {
  color: var(--comparison-muted);
  display: grid;
  font-size: 12px;
  gap: 2px;
}

.comparisonReportMeta strong {
  color: #344054;
  font-size: 11px;
}

.comparisonReportHeroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.comparisonGenerationState {
  align-items: center;
  background: #f4f7ff;
  border: 1px solid #b8cdfa;
  border-radius: 8px;
  color: #1e4f9a;
  display: flex;
  gap: 16px;
  min-height: 130px;
  padding: 24px;
}

.comparisonGenerationState.failed {
  background: #fff5f3;
  border-color: #f5b7b1;
  color: #9f2118;
}

.comparisonGenerationState svg {
  flex: none;
}

.comparisonGenerationState h2 {
  font-size: 18px;
  margin: 0;
}

.comparisonGenerationState p {
  line-height: 1.55;
  margin: 6px 0 0;
}

.comparisonGenerationState code {
  display: inline-block;
  margin-top: 8px;
}

.comparisonReportSection {
  display: grid;
  gap: 18px;
}

.comparisonDimensionFilter {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 560px;
}

.comparisonMetricsTableWrap {
  border: 1px solid var(--comparison-border);
  border-radius: 7px;
  overflow: auto;
}

.comparisonMetricsTable {
  border-collapse: collapse;
  min-width: 760px;
  width: 100%;
}

.comparisonMetricsTable th,
.comparisonMetricsTable td {
  border-bottom: 1px solid var(--comparison-border);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

.comparisonMetricsTable thead th {
  background: #f7f8fa;
  color: #344054;
  font-size: 12px;
}

.comparisonMetricsTable tbody tr:last-child > * {
  border-bottom: 0;
}

.comparisonMetricsTable th:first-child {
  left: 0;
  min-width: 190px;
  position: sticky;
  z-index: 1;
}

.comparisonMetricsTable tbody th:first-child {
  background: var(--comparison-surface);
}

.comparisonMetricsTable th span,
.comparisonMetricsTable th small,
.comparisonMetricsTable td strong,
.comparisonMetricsTable td small {
  display: block;
}

.comparisonMetricsTable th small,
.comparisonMetricsTable td small {
  color: var(--comparison-muted);
  font-size: 10px;
  margin-top: 4px;
}

.comparisonMetricsTable td strong {
  font-size: 14px;
}

.comparisonMetricsTable td strong.missing {
  color: #98a2b3;
  font-weight: 600;
}

.comparisonChartsGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.comparisonChartPanel {
  border: 1px solid var(--comparison-border);
  border-radius: 7px;
  min-width: 0;
  padding: 14px;
}

.comparisonChartPanel header h3 {
  font-size: 15px;
  margin: 0;
}

.comparisonChartPanel header p {
  color: var(--comparison-muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 4px 0 8px;
}

.comparisonInsightsGrid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.comparisonInsightList {
  display: grid;
  gap: 10px;
}

.comparisonInsightList > article {
  align-items: flex-start;
  border: 1px solid var(--comparison-border);
  border-radius: 7px;
  display: grid;
  gap: 12px;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 13px;
}

.comparisonInsightList > article > span {
  align-items: center;
  background: #eafbf2;
  border-radius: 5px;
  color: #067647;
  display: flex;
  font-size: 11px;
  font-weight: 850;
  height: 34px;
  justify-content: center;
}

.comparisonInsightList h3 {
  font-size: 14px;
  line-height: 1.35;
  margin: 0;
}

.comparisonInsightList p {
  color: var(--comparison-muted);
  font-size: 13px;
  line-height: 1.58;
  margin: 5px 0 0;
}

.comparisonEvidenceRefs {
  align-items: center;
  margin-top: 9px;
}

.comparisonEvidenceRefs strong {
  font-size: 11px;
}

.comparisonSourcesSection ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
}

.comparisonSourcesSection li,
.comparisonSourcesSection > p {
  color: var(--comparison-muted);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

.comparisonSpin {
  animation: comparisonSpin 900ms linear infinite;
}

.comparisonSrOnly {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@keyframes comparisonSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1050px) {
  .comparisonBuilderGrid,
  .comparisonChartsGrid,
  .comparisonInsightsGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .comparisonRangePanel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .comparisonRangeTitle,
  .comparisonSelectionSummary {
    grid-column: 1 / -1;
  }

  .comparisonRecentRow {
    grid-template-columns: minmax(220px, 1fr) 90px minmax(120px, 0.6fr) auto;
  }

  .comparisonRecentRow .comparisonRecentMeta:nth-of-type(4) {
    display: none;
  }
}

@media (max-width: 760px) {
  .comparisonBuilderPanel,
  .comparisonRecentPanel,
  .comparisonReportSection,
  .comparisonReportHero {
    padding: 16px;
  }

  .comparisonSectionHeader,
  .comparisonPromptDialogHeader,
  .comparisonReportHero {
    align-items: stretch;
    flex-direction: column;
  }

  .comparisonPromptDialogHeader .comparisonIconButton {
    position: absolute;
    right: 14px;
    top: 14px;
  }

  .comparisonCompetitorGrid,
  .comparisonDateGrid,
  .comparisonRangePanel {
    grid-template-columns: minmax(0, 1fr);
  }

  .comparisonRangeTitle,
  .comparisonSelectionSummary {
    grid-column: auto;
  }

  .comparisonPromptOverview {
    align-items: start;
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .comparisonPromptOverview .comparisonButton {
    grid-column: 1 / -1;
    width: 100%;
  }

  .comparisonGenerateRow .comparisonButton,
  .comparisonPromptActions .comparisonButton {
    width: 100%;
  }

  .comparisonRecentToolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .comparisonRecentToolbar form,
  .comparisonStatusFilter {
    max-width: none;
    width: 100%;
  }

  .comparisonRecentRow {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px;
  }

  .comparisonRecentIdentity,
  .comparisonRecentActions {
    grid-column: 1 / -1;
  }

  .comparisonRecentMeta {
    display: grid;
  }

  .comparisonRecentRow .comparisonRecentMeta:nth-of-type(4) {
    display: grid;
  }

  .comparisonRecentActions {
    justify-content: stretch;
  }

  .comparisonRecentActions .comparisonButton {
    flex: 1 1;
  }

  .comparisonPagination {
    justify-content: center;
  }

  .comparisonPromptBackdrop {
    align-items: stretch;
    padding: 0;
  }

  .comparisonPreviewBackdrop {
    align-items: stretch;
    padding: 0;
  }

  .comparisonPreviewDialog {
    border: 0;
    border-radius: 0;
    max-height: 100vh;
    max-width: none;
  }

  .comparisonPreviewHeader {
    padding: 17px 16px 15px;
  }

  .comparisonPreviewBody {
    padding: 0 16px 18px;
  }

  .comparisonPreviewSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 -16px 18px;
    padding: 8px 16px;
  }

  .comparisonPreviewStoreGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .comparisonPromptDialog {
    border: 0;
    border-radius: 0;
    max-height: 100vh;
    max-width: none;
    padding: 18px 14px;
  }

  .comparisonPromptField textarea {
    min-height: 42vh;
  }

  .comparisonReportHeroActions,
  .comparisonReportHeroActions .comparisonButton {
    width: 100%;
  }

  .comparisonReportHero h1 {
    font-size: 24px;
  }

  .comparisonDimensionFilter {
    display: flex;
    overflow-x: auto;
  }

  .comparisonDimensionFilter button {
    flex: 0 0 auto;
    min-width: 78px;
  }
}

@media (max-width: 480px) {
  .comparisonPreviewHeader h2 {
    font-size: 20px;
  }

  .comparisonPreviewSummary {
    grid-template-columns: minmax(0, 1fr);
  }

  .comparisonPreviewStoreCard > header {
    display: block;
  }

  .comparisonPreviewStoreCard > header p {
    margin-top: 7px;
    text-align: left;
  }

  .comparisonPreviewMetricRow {
    gap: 10px;
    grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr);
  }

  .comparisonPreviewStatisticList {
    grid-template-columns: minmax(0, 1fr);
  }

  .radarPage .radarComparePrimaryActions {
    align-items: stretch;
    flex-wrap: wrap;
    white-space: normal;
  }

  .radarPage .radarComparePrimaryActions > * {
    flex: 1 1 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .comparisonSpin {
    animation-duration: 1800ms;
  }

  .comparisonPreviewStatisticToggle svg {
    transition: none;
  }
}

.comparisonRecentEmptyState {
  align-items: center;
  background: color-mix(in srgb, var(--comparison-surface) 92%, #f2f4f7);
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--comparison-border) 72%, transparent);
  min-height: 148px;
  padding: 24px;
}

.radarRecentComparisons {
  --comparison-border: color-mix(in srgb, var(--shop-border, #dfe3e8) 88%, #94a3b8);
  --comparison-muted: var(--shop-text-muted, #667085);
  --comparison-ink: var(--shop-text, #17202a);
  --comparison-surface: var(--shop-panel, #ffffff);
  border-color: var(--comparison-border);
  box-shadow: 0 10px 28px rgba(31, 62, 108, 0.06);
}

.radarRecentComparisons .comparisonRecentToolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 12px;
}

.radarRecentComparisons .comparisonRecentToolbar form {
  max-width: none;
  min-height: 42px;
  border: 1px solid var(--comparison-border);
  border-radius: 8px;
  background: var(--comparison-surface);
  box-shadow: 0 1px 2px rgba(31, 62, 108, 0.04);
}

.radarRecentComparisons .comparisonRecentToolbar form button {
  background: color-mix(in srgb, #2563eb 8%, var(--comparison-surface));
  border-left-color: var(--comparison-border);
  color: #1769d2;
  min-width: 72px;
}

.radarRecentComparisons .comparisonStatusFilter,
.radarRecentComparisons .comparisonStatusFilter select {
  width: 100%;
}

.radarRecentComparisons .comparisonStatusFilter select {
  min-height: 42px;
  border: 1px solid var(--comparison-border);
  border-radius: 8px;
  background: var(--comparison-surface);
}

/* Recent smart-comparison history: structured fields first, actions last. */
.radarRecentComparisons .comparisonRecentToolbar {
  align-items: end;
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
}

.radarRecentComparisons .comparisonRecentFilterGroup {
  align-items: center;
  display: grid;
  gap: 10px 16px;
  grid-template-areas: "status created dates";
  grid-template-columns: minmax(220px, 1fr) max-content max-content;
  justify-content: stretch;
  min-width: 0;
}

.radarRecentComparisons .comparisonStatusFilter {
  align-items: center;
  display: flex;
  gap: 8px;
}

.radarRecentComparisons .comparisonStatusFilter > span {
  color: var(--comparison-muted);
  flex: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 42px;
}

.radarRecentComparisons .comparisonRecentDateControls {
  align-items: center;
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  gap: 8px;
  grid-area: dates;
  inline-size: max-content;
}

.radarRecentComparisons .comparisonRecentDatePresets,
.radarRecentComparisons .comparisonRecentDatePicker {
  flex: none;
}

.radarRecentComparisons .comparisonRecentDatePresets {
  align-items: center;
  background: color-mix(in srgb, var(--comparison-surface) 94%, var(--comparison-border));
  border: 1px solid var(--comparison-border);
  border-radius: 8px;
  display: inline-flex;
  min-height: 42px;
  overflow: hidden;
}

.radarRecentComparisons .comparisonRecentDatePresets button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--comparison-muted);
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  min-height: 40px;
  padding: 0 10px;
  white-space: nowrap;
}

.radarRecentComparisons .comparisonRecentDatePresets button + button {
  border-left: 1px solid var(--comparison-border);
}

.radarRecentComparisons .comparisonRecentDatePresets button.active {
  background: color-mix(in srgb, var(--primary) 12%, var(--comparison-surface));
  color: var(--primary);
}

.radarRecentComparisons .comparisonRecentDatePicker {
  min-width: 360px;
  width: 360px;
}

.radarRecentComparisons .comparisonRecentDatePicker .cuiDatePickerTrigger {
  background: var(--comparison-surface);
  border-color: var(--comparison-border);
  border-radius: 8px;
  min-height: 42px;
}

.radarRecentComparisons .comparisonStatusFilter {
  grid-area: status;
  min-width: 220px;
  width: max-content;
}

.radarRecentComparisons .comparisonStatusFilter select {
  appearance: auto;
  background: color-mix(in srgb, var(--comparison-surface) 94%, var(--comparison-border));
  border: 1px solid var(--comparison-border);
  border-radius: 8px;
  color: var(--comparison-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  min-height: 42px;
  padding: 0 12px;
  width: 132px;
}

.radarRecentComparisons .comparisonRecentCreatedTimeLabel {
  align-self: center;
  color: var(--comparison-muted);
  font-size: 11px;
  font-weight: 700;
  grid-area: created;
  line-height: 42px;
  white-space: nowrap;
}

.radarRecentComparisons .comparisonStatusFilter select:focus {
  border-color: color-mix(in srgb, var(--primary) 56%, var(--comparison-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
  outline: 0;
}

.radarRecentComparisons {
  --comparison-recent-columns:
    minmax(130px, 0.85fr)
    minmax(220px, 1.7fr)
    minmax(128px, 0.75fr)
    90px
    minmax(150px, 0.9fr)
    minmax(88px, 0.55fr)
    minmax(72px, auto);
}

.radarRecentComparisons .comparisonRecentTableHeader,
.radarRecentComparisons .comparisonRecentRow {
  column-gap: 16px;
  grid-template-columns: var(--comparison-recent-columns);
}

.radarRecentComparisons .comparisonRecentTableHeader {
  align-items: center;
  background: color-mix(in srgb, var(--comparison-surface) 92%, var(--comparison-border));
  border-bottom: 1px solid var(--comparison-border);
  color: var(--comparison-muted);
  display: grid;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  min-height: 40px;
  padding: 0 14px;
}

.radarRecentComparisons .comparisonRecentTableHeader > span:last-child {
  text-align: right;
}

.radarRecentComparisons .comparisonRecentRow {
  min-height: 78px;
}

.radarRecentComparisons .comparisonRecentStatus {
  justify-items: start;
}

.radarRecentComparisons .comparisonRecentIdentity,
.radarRecentComparisons .comparisonRecentStores,
.radarRecentComparisons .comparisonRecentRange,
.radarRecentComparisons .comparisonRecentStatus,
.radarRecentComparisons .comparisonRecentMeta,
.radarRecentComparisons .comparisonRecentActions {
  min-width: 0;
}

.radarRecentComparisons .comparisonRecentStores,
.radarRecentComparisons .comparisonRecentRange,
.radarRecentComparisons .comparisonRecentStatus {
  display: grid;
  gap: 4px;
}

.radarRecentComparisons .comparisonRecentStores > span:not(.comparisonRecentMobileLabel),
.radarRecentComparisons .comparisonRecentRange strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarRecentComparisons .comparisonRecentStores > span:not(.comparisonRecentMobileLabel),
.radarRecentComparisons .comparisonRecentRange strong,
.radarRecentComparisons .comparisonRecentMeta strong {
  color: var(--comparison-ink);
  font-size: 12px;
  font-weight: 600;
}

.radarRecentComparisons .comparisonRecentActions {
  justify-content: flex-end;
}

.radarRecentComparisons .comparisonRecentActionButton {
  border-radius: 6px;
  color: var(--primary);
  min-height: 30px;
  padding: 4px 6px;
}

.radarRecentComparisons .comparisonRecentActionButton:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.radarRecentComparisons .comparisonRecentNoAction {
  color: var(--comparison-muted);
  font-size: 13px;
  padding: 5px 6px;
}

.comparisonRecentMobileLabel {
  display: none;
}

@media (max-width: 1320px) {
  .radarRecentComparisons {
    --comparison-recent-columns:
      minmax(145px, 0.9fr)
      minmax(220px, 1.7fr)
      90px
      minmax(150px, 0.9fr)
      minmax(72px, auto);
  }

  .radarRecentComparisons .comparisonRecentTableHeader > span:nth-child(3),
  .radarRecentComparisons .comparisonRecentTableHeader > span:nth-child(6),
  .radarRecentComparisons .comparisonRecentRow > .comparisonRecentRange,
  .radarRecentComparisons .comparisonRecentRow > .comparisonRecentMeta:nth-of-type(6) {
    display: none;
  }
}

@media (max-width: 1080px) {
  .radarRecentComparisons .comparisonRecentToolbar {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .radarRecentComparisons .comparisonRecentFilterGroup {
    justify-content: flex-start;
  }

  .radarRecentComparisons {
    --comparison-recent-columns: minmax(180px, 1fr) 90px minmax(150px, 0.8fr) minmax(72px, auto);
  }

  .radarRecentComparisons .comparisonRecentTableHeader > span:nth-child(2),
  .radarRecentComparisons .comparisonRecentRow > .comparisonRecentStores {
    display: none;
  }
}

@media (max-width: 760px) {
  .radarRecentComparisons .comparisonRecentFilterGroup,
  .radarRecentComparisons .comparisonStatusFilter,
  .radarRecentComparisons .comparisonRecentDatePicker,
  .radarRecentComparisons .comparisonRecentCreatedTimeLabel {
    min-width: 0;
    width: 100%;
  }

  .radarRecentComparisons .comparisonRecentFilterGroup {
    grid-template-areas:
      "dates"
      "status"
      "created";
    grid-template-columns: minmax(0, 1fr);
  }

  .radarRecentComparisons .comparisonRecentDateControls {
    align-items: stretch;
    flex: 1 1;
    flex-wrap: wrap;
    inline-size: auto;
  }

  .radarRecentComparisons .comparisonRecentDatePresets {
    flex: 1 1;
  }

  .radarRecentComparisons .comparisonRecentDatePresets button {
    flex: 1 1;
    padding: 0 6px;
  }

  .radarRecentComparisons .comparisonRecentTableHeader {
    display: none;
  }

  .radarRecentComparisons .comparisonRecentRow {
    column-gap: 12px;
  }

  .radarRecentComparisons {
    --comparison-recent-columns: minmax(0, 1fr) minmax(98px, auto);
  }

  .radarRecentComparisons .comparisonRecentIdentity,
  .radarRecentComparisons .comparisonRecentStores,
  .radarRecentComparisons .comparisonRecentRange,
  .radarRecentComparisons .comparisonRecentStatus,
  .radarRecentComparisons .comparisonRecentMeta,
  .radarRecentComparisons .comparisonRecentActions {
    display: grid;
  }

  .radarRecentComparisons .comparisonRecentStores,
  .radarRecentComparisons .comparisonRecentRange,
  .radarRecentComparisons .comparisonRecentActions {
    grid-column: 1 / -1;
  }

  .radarRecentComparisons .comparisonRecentRow > .comparisonRecentRange,
  .radarRecentComparisons .comparisonRecentRow > .comparisonRecentMeta:nth-of-type(6),
  .radarRecentComparisons .comparisonRecentRow > .comparisonRecentStores {
    display: grid;
  }

  .radarRecentComparisons .comparisonRecentMobileLabel {
    color: var(--comparison-muted);
    display: block;
    font-size: 11px;
    font-weight: 700;
  }

  .radarRecentComparisons .comparisonRecentActions {
    justify-content: flex-end;
  }
}

.comparisonEmptyStateIcon {
  align-items: center;
  background: #eef4ff;
  border: 1px solid #cfdfff;
  border-radius: 8px;
  color: #2563eb;
  display: inline-flex;
  flex: none;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.comparisonRecentEmptyState > div {
  max-width: 420px;
  text-align: left;
}

.comparisonRecentEmptyState strong {
  color: var(--comparison-ink);
  display: block;
  font-size: 14px;
  line-height: 1.45;
}

.comparisonRecentEmptyState p {
  color: var(--comparison-muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 4px 0 0;
}

/* Smart comparison inherits the workspace accent instead of the legacy blue/orange palette. */
.radarPage {
  --radar-orange-strong: var(--primary);
}

.radarPage .radarTemplateList b {
  border-color: var(--radar-accent-border-strong);
  background: var(--grad);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 22%, transparent);
}

.radarPage .radarTemplateIcon {
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
}

.radarPage .radarTemplateIcon.tone-2 {
  background: color-mix(in srgb, var(--accent) 16%, var(--radar-panel));
  color: var(--accent);
}

.radarPage .radarTemplateIcon.tone-3 {
  background: color-mix(in srgb, var(--primary) 14%, var(--radar-panel));
  color: var(--radar-blue);
}

.radarPage .radarSearchSelectTrigger,
.radarPage .radarMultiSelectTrigger {
  border-color: var(--radar-accent-border);
  background: var(--radar-control-bg);
  color: var(--radar-blue);
}

.radarPage .radarSearchSelectList button:hover,
.radarPage .radarSearchSelectList button.active,
.radarPage .radarMultiSelectMenu button:hover,
.radarPage .radarMultiSelectMenu button.active {
  border-color: var(--radar-accent-border-strong);
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
}

.radarPage .radarSearchSelectTrigger:focus-visible,
.radarPage .radarMultiSelectTrigger:focus-visible {
  border-color: var(--radar-accent-border-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  outline: 0;
}

.radarPage .radarSearchSelectTrigger strong,
.radarPage .radarMultiSelectTrigger strong,
.radarPage .radarMultiSelectCheck,
.radarPage .radarSearchCategoryPanel > div:first-child button {
  color: var(--radar-blue);
}

.radarPage .radarSearchSelectMenu,
.radarPage .radarMultiSelectMenu,
.radarPage .radarSearchCategoryPanel {
  border-color: var(--radar-accent-border);
  background: var(--radar-panel);
}

.radarPage .radarSearchSelectMenu input,
.radarPage .radarSearchCategoryPanel,
.radarPage .radarSearchSelectFooter {
  border-color: var(--radar-accent-border);
  background: var(--radar-panel-soft);
}

.radarPage .radarSearchCategoryOptions button,
.radarPage .radarSearchSelectFooter button {
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
  color: var(--radar-blue);
}

.radarPage .radarSearchCategoryOptions button.active {
  border-color: var(--radar-accent-border-strong);
  background: var(--radar-active-bg);
  color: var(--radar-blue);
}

.radarPage .radarOwnStoreTableWrap {
  background: var(--radar-panel-soft);
}

.radarPage .radarOwnStoreTable tbody td {
  border-color: var(--radar-line);
  background: var(--radar-panel);
}

.radarPage .radarOwnStoreTable tr.active td {
  border-color: var(--radar-accent-border);
  background: var(--radar-accent-faint);
}

.radarPage .radarPanelTitleRow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.radarPage .radarPanelHelpTrigger {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--radar-blue);
  cursor: help;
}

.radarPage .radarPanelHelpTrigger:hover,
.radarPage .radarPanelHelpTrigger:focus-visible {
  background: var(--radar-accent-faint);
  color: var(--radar-accent);
  outline: 0;
}

.radarPage .radarPanelHelpTrigger:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.cuiTooltipContent.radarPanelHelpTooltip,
.radarPanelHelpTooltip {
  max-width: min(360px, calc(100vw - 28px));
  white-space: normal;
}

.radarPage .radarShopCover {
  display: block;
  object-fit: cover;
  background: var(--radar-panel-soft);
}

/* Monitoring rows present shop identity, not promotional cover art. */
.radarPage .radarMonitorStoreAvatarImage {
  object-fit: contain;
  object-position: center;
  background: var(--grad);
}

/* Smart-comparison directory keeps selected stores in their submitted order. */
.radarPage .radarCompareConfigSingle {
  grid-template-columns: minmax(0, 1fr);
}

.radarPage .radarComparisonDirectory {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--radar-line) 78%, transparent);
}

.radarPage .radarComparisonDirectoryHeading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.radarPage .radarComparisonDirectoryHeading > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.radarPage .radarComparisonDirectoryTitle {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.radarPage .radarComparisonDirectoryTitle .radarComparisonDirectoryHelpTrigger {
  border-color: var(--radar-accent-border);
  color: var(--radar-accent);
}

.radarPage .radarComparisonDirectoryTitle .radarComparisonDirectoryHelpTrigger:hover,
.radarPage .radarComparisonDirectoryTitle .radarComparisonDirectoryHelpTrigger:focus-visible {
  border-color: var(--radar-accent);
  box-shadow: 0 0 0 3px var(--radar-accent-faint);
}

.radarPage .radarComparisonDirectoryHeading strong {
  color: var(--radar-ink);
  font-size: 14px;
}

.radarPage .radarComparisonDirectoryHeading span {
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.radarPage .radarComparisonDirectoryCount {
  flex: 0 0 auto;
  color: var(--radar-accent) !important;
  font-weight: 900 !important;
}

.radarPage .radarSearchSelectTrigger:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.radarPage .radarSearchSelectOptionAction {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border-radius: 7px;
  padding: 7px 8px;
}

.radarPage .radarSearchSelectOptionAction:hover {
  background: rgba(255, 128, 31, 0.1);
}

.radarPage .radarSearchSelectOptionAction > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.radarPage .radarSearchSelectOptionAction strong,
.radarPage .radarSearchSelectOptionAction em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarSearchSelectOptionAction strong {
  color: var(--radar-ink);
  font-size: 13px;
  font-weight: 850;
}

.radarPage .radarSearchSelectOptionAction em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.radarPage .radarSearchSelectList .radarSearchSelectAddAction {
  width: auto;
  min-height: 30px;
  border: 1px solid var(--radar-accent-border);
  border-radius: 7px;
  background: var(--radar-accent-faint);
  color: var(--radar-accent);
  font-size: 12px;
  font-weight: 900;
  padding: 0 10px;
  text-align: center;
}

.radarPage .radarSearchSelectList .radarSearchSelectAddAction:disabled {
  cursor: default;
  opacity: 0.62;
}

.radarPage .radarSelectedCompetitorCards {
  display: grid;
  grid-auto-columns: minmax(250px, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-bottom: 2px;
}

.radarPage .radarSelectedCompetitorCard {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: var(--radar-panel);
  padding: 10px;
}

.radarPage .radarSelectedCompetitorLogo {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--radar-accent-faint);
  color: var(--radar-accent);
  font-size: 14px;
  font-weight: 900;
}

.radarPage .radarSelectedCompetitorLogo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--radar-panel-soft);
}

.radarPage .radarSelectedCompetitorCopy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.radarPage .radarSelectedCompetitorCopy strong,
.radarPage .radarSelectedCompetitorCopy em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarSelectedCompetitorCopy strong {
  color: var(--radar-ink);
  font-size: 13px;
}

.radarPage .radarSelectedCompetitorCopy em {
  color: var(--radar-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.radarPage .radarSelectedCompetitorRemove {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--radar-muted);
  cursor: pointer;
}

.radarPage .radarSelectedCompetitorRemove:hover,
.radarPage .radarSelectedCompetitorRemove:focus-visible {
  background: #fff1f0;
  color: #dc2626;
  outline: 0;
}

/* Smart comparison follows the V4 workbench hierarchy: configuration first,
   compact progress/templates rail second, and no auxiliary tool rail. */
.radarPage .radarTwoColumn.wideRight.radarCompareConfigLayout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.28fr);
  gap: 10px;
}

.radarPage .radarCompareRightRail {
  min-width: 0;
  gap: 0;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: var(--radar-panel);
  overflow: hidden;
}

.radarPage .radarCompareRightRail > .radarPanel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.radarPage .radarCompareCreationFlow {
  display: grid;
  gap: 12px;
  border-bottom: 1px solid var(--radar-line);
  padding: 16px;
}

.radarPage .radarCompareCreationFlow > span {
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 800;
}

.radarPage .radarCompareCreationFlow ol {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.radarPage .radarCompareCreationFlow li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border-radius: 8px;
  color: var(--radar-muted);
  padding: 8px;
}

.radarPage .radarCompareCreationFlow li.active {
  background: var(--radar-accent);
  color: #ffffff;
}

.radarPage .radarCompareCreationFlow li.complete {
  color: var(--radar-ink);
}

.radarPage .radarCompareCreationFlow li b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
}

.radarPage .radarCompareCreationFlow li.complete b {
  border-color: var(--radar-accent);
  color: var(--radar-accent);
}

.radarPage .radarCompareCreationFlow li strong,
.radarPage .radarCompareCreationFlow li small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarCompareCreationFlow li strong {
  font-size: 13px;
}

.radarPage .radarCompareCreationFlow li small {
  margin-top: 2px;
  color: inherit;
  font-size: 11px;
  opacity: 0.78;
}

.radarPage .radarCompareOwnStoreBlock {
  grid-template-columns: minmax(230px, 0.45fr) minmax(0, 1fr);
  align-items: end;
}

.radarPage .radarCompareOwnStoreBlock .radarCompareActionRow {
  grid-column: 1 / -1;
}

.radarPage .radarCompareSecondaryActions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.radarTemplatePromptSnapshotNote {
  margin: -4px 0 2px;
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.radarPage .radarTemplatePromptField textarea {
  min-height: 138px;
  resize: vertical;
  line-height: 1.65;
}

.radarPage .radarTemplatePromptField small {
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  text-align: right;
}

.radarPage .radarTemplateCreateAction {
  width: 100%;
  min-height: 36px;
  margin-top: 10px;
  border: 1px solid var(--radar-accent-border);
  border-radius: 7px;
  background: var(--radar-panel);
  color: var(--radar-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.radarPage .radarTemplateCreateAction:hover,
.radarPage .radarTemplateCreateAction:focus-visible {
  background: var(--radar-accent-faint);
  outline: 0;
}

.radarPage .radarComparePrimaryActions {
  flex-wrap: wrap;
}

@media (max-width: 1080px) {
  .radarPage .radarTwoColumn.wideRight.radarCompareConfigLayout {
    grid-template-columns: minmax(0, 1fr);
  }

  .radarPage .radarCompareRightRail {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .radarPage .radarCompareOwnStoreBlock {
    grid-template-columns: minmax(0, 1fr);
  }

  .radarPage .radarCompareOwnStoreBlock .radarCompareActionRow {
    grid-column: auto;
  }

  .radarPage .radarCompareSecondaryActions,
  .radarPage .radarComparePrimaryActions {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .radarPage .radarComparisonDirectoryHeading {
    align-items: flex-start;
  }

  .radarPage .radarSelectedCompetitorCards {
    grid-auto-columns: minmax(220px, 86vw);
  }
}

/* Smart comparison V4 workbench: one shared surface, an always-visible directory,
   and responsive creation/template guidance. */
.radarPage .radarTwoColumn.wideRight.radarCompareConfigLayout {
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  background: var(--radar-panel);
}

.radarPage .radarCompareConfigLayout > .radarStack {
  min-width: 0;
  align-self: stretch;
  gap: 0;
}

.radarPage .radarCompareConfigLayout > .radarStack > .radarCompareBuilder {
  min-height: 0;
  height: auto;
  align-self: stretch;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 22px 26px 20px;
}

.radarPage .radarCompareRightRail {
  grid-template-rows: max-content max-content;
  grid-auto-rows: max-content;
  align-content: start;
  align-self: stretch;
  height: auto;
  border: 0;
  border-left: 1px solid var(--radar-line);
  border-radius: 0;
  background: var(--radar-panel-soft);
}

.radarPage .radarComparisonDirectoryBrowser {
  display: grid;
  gap: 10px;
}

.radarPage .radarComparisonDirectoryFilters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(152px, 0.18fr);
  gap: 10px;
}

.radarPage .radarComparisonDirectorySearch,
.radarPage .radarComparisonDirectoryCategory {
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--radar-line);
  border-radius: 7px;
  background: var(--radar-panel);
  color: var(--radar-muted);
  padding: 0 11px;
}

.radarPage .radarComparisonDirectorySearch:focus-within,
.radarPage .radarComparisonDirectoryCategory:focus-within {
  border-color: var(--radar-accent-border);
  box-shadow: 0 0 0 3px var(--radar-accent-faint);
}

.radarPage .radarComparisonDirectorySearch input,
.radarPage .radarComparisonDirectoryCategory select {
  min-width: 0;
  flex: 1 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--radar-ink);
  font: inherit;
  font-size: 13px;
}

.radarPage .radarComparisonDirectoryCategory select {
  appearance: none;
  cursor: pointer;
}

.radarPage .radarComparisonDirectoryTableScroll {
  min-width: 0;
  overflow-x: auto;
  border-top: 1px solid var(--radar-line);
}

.radarPage .radarComparisonDirectoryTable {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
}

.radarPage .radarComparisonDirectoryTable th,
.radarPage .radarComparisonDirectoryTable td {
  border-bottom: 1px solid var(--radar-line);
  text-align: left;
  vertical-align: middle;
}

.radarPage .radarComparisonDirectoryTable th {
  padding: 9px 10px;
  background: var(--radar-panel-soft);
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 800;
}

.radarPage .radarComparisonDirectoryTable td {
  padding: 8px 10px;
  color: var(--radar-ink);
  font-size: 12px;
}

.radarPage .radarComparisonDirectoryTable th:nth-child(1) { width: 44%; }
.radarPage .radarComparisonDirectoryTable th:nth-child(2) { width: 18%; }
.radarPage .radarComparisonDirectoryTable th:nth-child(3) { width: 22%; }
.radarPage .radarComparisonDirectoryTable th:nth-child(4) { width: 16%; text-align: right; }
.radarPage .radarComparisonDirectoryTable td:last-child { text-align: right; }

.radarPage .radarComparisonDirectoryStore {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.radarPage .radarComparisonDirectoryLogo {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: var(--radar-accent-faint);
  color: var(--radar-accent);
  font-size: 12px;
  font-weight: 850;
}

.radarPage .radarComparisonDirectoryLogo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.radarPage .radarComparisonDirectoryStore > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.radarPage .radarComparisonDirectoryStore strong,
.radarPage .radarComparisonDirectoryStore em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radarPage .radarComparisonDirectoryStore strong { font-size: 12px; }
.radarPage .radarComparisonDirectoryStore em {
  color: var(--radar-muted);
  font-size: 11px;
  font-style: normal;
}

.radarPage .radarComparisonDirectoryAdd,
.radarPage .radarComparisonDirectoryLoadMore {
  border: 1px solid var(--radar-accent-border);
  border-radius: 7px;
  background: var(--radar-panel);
  color: var(--radar-accent);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.radarPage .radarComparisonDirectoryAdd {
  min-height: 30px;
  padding: 0 10px;
}

.radarPage .radarComparisonDirectoryAdd span { margin-right: 4px; }

.radarPage .radarComparisonDirectoryAdd:hover:not(:disabled),
.radarPage .radarComparisonDirectoryLoadMore:hover:not(:disabled) {
  background: var(--radar-accent-faint);
}

.radarPage .radarComparisonDirectoryAdd:disabled,
.radarPage .radarComparisonDirectoryLoadMore:disabled {
  cursor: default;
  opacity: 0.58;
}

.radarPage .radarComparisonDirectoryState {
  padding: 18px 10px !important;
  color: var(--radar-muted) !important;
  text-align: center !important;
}

.radarPage .radarComparisonDirectoryError {
  margin: 0;
  color: var(--danger, #dc2626);
  font-size: 12px;
}

.radarPage .radarComparisonDirectoryLoadMore {
  justify-self: center;
  min-height: 34px;
  padding: 0 14px;
}

.radarPage .radarCompareSetupBand {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  border-top: 1px solid var(--radar-line);
  background: var(--radar-panel-soft);
  margin-right: -26px;
  margin-bottom: -20px;
  margin-left: -26px;
  padding: 15px 26px 20px;
}

.radarPage .radarCompareSetupGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.radarPage .radarCompareSetupGrid > div { min-width: 0; }

.radarPage .radarCompareSetupLabel {
  display: block;
  margin-bottom: 8px;
  color: var(--radar-muted);
  font-size: 12px;
  font-weight: 800;
}

.radarPage .radarCompareDimensionChips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.radarPage .radarCompareDimensionChips span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--radar-accent-border);
  border-radius: 7px;
  background: var(--radar-accent-faint);
  color: var(--radar-accent);
  font-size: 12px;
  font-weight: 800;
  padding: 0 10px;
}

.radarPage .radarCompareCreationFlow li {
  display: block;
  padding: 0;
}

.radarPage .radarCompareCreationFlow li > button {
  width: 100%;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 8px;
}

.radarPage .radarCompareCreationFlow li > button > div {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
}

.radarPage .radarCompareCreationFlow li > button strong,
.radarPage .radarCompareCreationFlow li > button small {
  min-width: 0;
}

.radarPage .radarCompareCreationFlow li.active > button {
  background: var(--radar-accent);
  color: #ffffff;
  box-shadow: 0 7px 17px color-mix(in srgb, var(--radar-accent) 24%, transparent);
}

.radarPage .radarCompareCreationFlow li:not(.active) > button strong {
  color: var(--radar-ink);
}

.radarPage .radarCompareCreationFlow li:not(.active) > button small {
  color: var(--radar-muted);
}
.radarPage .radarCompareCreationFlow li > button:focus-visible {
  outline: 3px solid var(--radar-accent-faint);
  outline-offset: 1px;
}

.radarPage .radarCompareCreationStepIcon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: currentColor;
}

.radarPage .radarCompareCreationFlow li.complete .radarCompareCreationStepIcon {
  color: var(--radar-accent);
}

.radarPage .radarHero-compare {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 0 2px;
}

.radarPage .radarHero-compare::before {
  display: none;
}

.radarPage .radarHero-compare .radarTitleRow {
  margin-top: 3px;
}

.radarPage .radarHero-compare .radarTitleRow h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 800;
}

.radarPage .radarHero-compare .radarTitleRow > span {
  display: none;
}

.radarPage .radarHero-compare p {
  margin: 4px 0 0;
  font-size: 13px;
}

.radarPage .radarHero-compare .radarBackButton {
  margin-bottom: 4px;
}

.radarPage .radarCompareBuilderHeader {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.radarPage .radarCompareBuilderHeader > div {
  min-width: 0;
}

.radarPage .radarCompareBuilderHeader h2 {
  margin: 0;
  color: var(--radar-text);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 850;
}

.radarPage .radarCompareBuilderHeader p {
  margin: 3px 0 0;
  color: var(--radar-muted);
  font-size: 12px;
  line-height: 1.45;
}

.radarPage .radarCompareBuilderStatus {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  background: var(--radar-accent-faint);
  color: var(--radar-accent);
  font-size: 12px;
  font-weight: 850;
  padding: 0 12px;
}

.radarPage .radarCompareOwnStoreBlock {
  grid-template-columns: minmax(220px, 0.95fr) minmax(340px, 1.45fr);
  align-items: end;
  gap: 16px;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 15px 0;
}

.radarPage .radarCompareRangeControl {
  grid-template-columns: max-content minmax(215px, 1fr);
  gap: 8px 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.radarPage .radarCompareRangeLabel {
  grid-column: 1 / -1;
}

.radarPage .radarCompareRangePresets {
  height: 42px;
}

.radarPage .radarCompareRangePresets button {
  min-width: 70px;
}

.radarPage .radarCompareRangePicker .cuiDatePickerTrigger {
  min-height: 42px;
  border-color: var(--radar-line);
  color: var(--radar-ink);
}

.radarPage .radarCompareRangePicker .cuiDatePickerIcon,
.radarPage .radarCompareRangePicker .cuiDatePickerTrailingIcon {
  color: var(--radar-accent);
}

.radarPage .radarCompareRangePicker .cuiDatePickerTrigger:hover:not(:disabled),
.radarPage .radarCompareRangePicker .cuiDatePickerTrigger:focus-visible {
  border-color: var(--radar-accent-border-strong);
  box-shadow: 0 0 0 3px var(--radar-accent-faint);
}

.radarPage .radarComparisonDirectory {
  gap: 10px;
  margin-top: 0;
  border-top: 0;
  padding-top: 16px;
}

.radarPage .radarSelectedCompetitorCards {
  grid-auto-columns: 220px;
  padding: 2px 0 11px;
}

.radarPage .radarCompareActionRow {
  justify-content: space-between;
  border-top: 1px solid var(--radar-line);
  padding-top: 15px;
}

.radarPage .radarCompareCreationFlow {
  gap: 10px;
  padding: 22px 16px 17px;
}

.radarPage .radarCompareCreationFlow ol {
  gap: 3px;
}

.radarPage .radarCompareCreationFlow li > button {
  min-height: 50px;
  padding: 7px 8px;
}

.radarPage .radarCompareTemplatePanel {
  align-self: start;
  min-height: 0;
  height: auto;
  padding: 18px 16px 16px;
}

.radarPage .radarCompareTemplatePanel .radarTemplateList {
  gap: 9px;
  grid-template-rows: none;
  grid-auto-rows: max-content;
}

.radarPage .radarCompareTemplatePanel .radarTemplateList button {
  min-height: 68px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 9px;
  border-radius: 8px;
  padding: 10px;
}

.radarPage .radarCompareTemplatePanel .radarTemplateList button > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.radarPage .radarTemplatePromptIndicator {
  width: fit-content;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  color: #7657c8;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
}

.radarPage .radarTemplatePromptIndicator svg {
  flex: 0 0 auto;
}

.radarPage .radarComparePlanNote {
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--radar-line);
  background: color-mix(in srgb, var(--warning) 10%, var(--radar-panel));
  padding: 14px 16px 16px;
}

.radarPage .radarComparePlanNote strong {
  color: color-mix(in srgb, var(--warning) 72%, var(--radar-ink));
  font-size: 12px;
  font-weight: 850;
}

.radarPage .radarComparePlanNote span {
  color: var(--radar-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.radarPage .radarComparePlanNote a {
  width: fit-content;
  margin-top: 3px;
  color: color-mix(in srgb, var(--warning) 78%, var(--radar-ink));
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.radarPage .radarComparePlanNote a:hover,
.radarPage .radarComparePlanNote a:focus-visible {
  text-decoration: underline;
}

.radarPage .radarTemplateCreateAction:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.radarPage .radarCompareTemplatePanel .radarTemplateEmptyAction {
  display: none;
}

.radarPage .radarCompareTemplatePanel .radarTemplateIcon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

.radarPage .radarComparisonDirectoryPager {
  min-width: 0;
  padding-top: 10px;
}

.radarPage .radarComparisonDirectoryPager .radarDecisionTodoPageSize {
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .radarPage .radarTwoColumn.wideRight.radarCompareConfigLayout {
    grid-template-columns: minmax(0, 1fr);
  }

  .radarPage .radarCompareRightRail {
    grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.3fr);
    grid-template-rows: max-content;
    border-top: 1px solid var(--radar-line);
    border-left: 0;
  }

  .radarPage .radarCompareCreationFlow {
    border-right: 1px solid var(--radar-line);
    border-bottom: 0;
  }

  .radarPage .radarCompareCreationFlow ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .radarPage .radarCompareCreationFlow li > button {
    grid-template-columns: 24px minmax(0, 1fr) 18px;
  }

  .radarPage .radarCompareTemplatePanel .radarTemplateList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .radarPage .radarComparePlanNote {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .radarPage .radarComparisonDirectoryFilters,
  .radarPage .radarCompareSetupGrid,
  .radarPage .radarCompareRightRail {
    grid-template-columns: minmax(0, 1fr);
  }

  .radarPage .radarCompareOwnStoreBlock,
  .radarPage .radarCompareRangeControl {
    grid-template-columns: minmax(0, 1fr);
  }

  .radarPage .radarCompareRangeLabel,
  .radarPage .radarCompareRangePresets,
  .radarPage .radarCompareRangePicker {
    grid-column: auto;
    width: 100%;
  }

  .radarPage .radarCompareRangePresets button {
    min-width: 0;
    padding: 0 6px;
  }

  .radarPage .radarComparisonDirectoryTable { min-width: 0; }
  .radarPage .radarComparisonDirectoryTable th:nth-child(2),
  .radarPage .radarComparisonDirectoryTable td:nth-child(2),
  .radarPage .radarComparisonDirectoryTable th:nth-child(3),
  .radarPage .radarComparisonDirectoryTable td:nth-child(3) { display: none; }
  .radarPage .radarComparisonDirectoryTable th:nth-child(1) { width: auto; }
  .radarPage .radarComparisonDirectoryTable th:nth-child(4) { width: 94px; }

  .radarPage .radarCompareCreationFlow {
    border-right: 0;
    border-bottom: 1px solid var(--radar-line);
  }

  .radarPage .radarCompareCreationFlow ol,
  .radarPage .radarCompareTemplatePanel .radarTemplateList {
    grid-template-columns: minmax(0, 1fr);
  }

  .radarPage .radarComparisonDirectoryPager {
    align-items: flex-start;
    flex-wrap: wrap;
    overflow: visible;
  }

  .radarPage .radarCompareActionRow {
    align-items: stretch;
    justify-content: stretch;
  }

  .radarPage .radarCompareBuilderHeader {
    align-items: flex-start;
  }

  .radarPage .radarCompareConfigLayout > .radarStack > .radarCompareBuilder {
    padding: 17px 14px;
  }

  .radarPage .radarCompareSetupBand {
    margin-right: -14px;
    margin-bottom: -17px;
    margin-left: -14px;
    padding: 14px;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/lives.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Lives CSS.
 *
 * Owner: lives module.
 * Allowed: /lives pages, live search/history/detail, watch pills, and live-only
 * room cards. Old live compatibility lives in legacy-lives.css and
 * legacy-lives-search-results.css. Old live history mini widgets live in
 * legacy-lives-history-mini.css. Shared product/list primitives live in
 * legacy-commerce-shared.css until replaced by @compass/ui.
 */

/* Historical rules still referenced by current components. Source: 82384d52. */
.scheduleDrawerOverlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: flex-end;
  background: rgba(5, 7, 20, 0.58);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.scheduleDrawerShell {
  width: min(560px, 100%);
  height: 100vh;
  overflow-y: auto;
  border-left: 1px solid var(--line-dark-strong);
  background: var(--bg);
  box-shadow: var(--shadow-dark);
}

.scheduleDrawerPanel {
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 18px;
}

.scheduleFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.scheduleFormActions,
.scheduleConflictList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scheduleConflictList {
  display: grid;
}

.scheduleConflictList div {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 10px;
}

.scheduleConflictList strong,
.scheduleConflictList span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.scheduleConflictList span {
  color: var(--text-3);
  font-size: 12px;
}

.diagnosisExportButton {
  margin-left: auto;
}

@media (max-width: 1080px) {

  .scheduleDrawerShell {
    width: min(520px, 92vw);
  }
}

@media (max-width: 720px) {

  .scheduleDrawerOverlay {
    align-items: flex-end;
  }

  .scheduleDrawerShell {
    width: 100%;
    max-height: calc(100vh - 48px);
    height: auto;
    border-top: 1px solid var(--line-dark-strong);
    border-left: 0;
  }

  .scheduleDrawerPanel,
.scheduleFormGrid {
    grid-template-columns: 1fr;
  }

  .scheduleFormActions {
    display: grid;
  }

  .diagnosisExportButton {
    width: 100%;
    margin-left: 0;
  }
}

/* Historical rules still referenced by current components. Source: 9886c6ab. */

/* Member live module overrides: feat/live-search-liujia */

.liveSearchChipMeasure {
  position: fixed;
  top: 0;
  left: -10000px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  visibility: hidden;
  pointer-events: none;
}

.liveSearchChipExpand {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--primary);
  padding: 0 8px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.liveSearchChipExpand:hover {
  color: var(--primary-dark);
}

.liveSearchChipExpandIcon {
  transition: transform 160ms ease;
}

.liveSearchChipExpand.expanded .liveSearchChipExpandIcon {
  transform: rotate(180deg);
}

.liveCardCover {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.liveCard.is-live::before {
  content: none;
}

.liveCardLiveDot {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  width: 7px;
  height: 7px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
}

.liveCardInlineActions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  min-height: 28px;
  margin-top: -4px;
}

.liveCardInlineActions.empty {
  pointer-events: none;
}

.liveCardEntityLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.liveCardEntityLinks a {
  color: inherit;
  text-decoration: none;
}

.liveCardEntityLinks a:hover {
  color: var(--primary-light);
}

.liveAlertSourceText {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, #facc15 38%, var(--line-dark));
  border-radius: 8px;
  background: color-mix(in srgb, #facc15 12%, transparent);
  color: #854d0e;
  padding: 0 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.liveCardIconButton:hover:not(:disabled):not(.liveCardAlertIndicator) {
  border-color: var(--primary);
  color: var(--primary);
}

.liveCardIconButton.alerted:hover:not(:disabled):not(.liveCardAlertIndicator) {
  background: color-mix(in srgb, #facc15 18%, transparent);
  border-color: #a16207;
}

.liveCardAlertIndicator {
  cursor: pointer;
}

.liveCardIconButton.liveCardAlertIndicator.alerted:hover {
  background: color-mix(in srgb, #facc15 42%, transparent);
  border-color: #a16207;
  color: #713f12;
}

.liveAlertMutedText {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--tag-bg);
  color: var(--text-3);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.liveCardPulse > i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  background: currentColor;
  transform: translateY(0.5px);
}

.liveCardPulse.fresh {
  color: #16a34a;
}

.liveWarningSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}

.liveWarningSummary > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  border: 1px solid var(--row-line);
  border-radius: 10px;
  background: var(--control-bg);
  padding: 8px 10px;
}

.liveWarningSummary strong {
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.liveWarningSummary em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.liveWarningLedgerRow.clickable {
  cursor: pointer;
}

.liveWarningLedgerRow.clickable:hover {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.liveWarningLedgerLive,
.liveWarningLedgerActions a,
.liveWarningLedgerActions button {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}

.liveSearchDropdownMenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 224px;
  max-height: min(408px, calc(100dvh - 24px));
  display: grid;
  gap: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  padding: 9px;
}

.liveDetailDiagnosisHead > .liveDetailDiagnosisScoreSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, auto));
  gap: 10px;
}

.liveDetailDiagnosisScoreSummary > span {
  display: grid;
  gap: 2px;
  border-left: 2px solid var(--line-dark-strong);
  padding-left: 10px;
}

.liveDetailDiagnosisScoreSummary strong {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
}

.liveDetailDiagnosisScoreSummary em {
  color: var(--text-1);
  font-size: 24px;
  font-style: normal;
  font-weight: 950;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.liveDetailDiagnosisScores {
  display: grid;
  grid-template-columns: repeat(3, minmax(42px, auto));
  gap: 8px;
  text-align: right;
}

.liveDetailDiagnosisScores span {
  display: grid;
  gap: 1px;
}

.liveDetailDiagnosisScores em {
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.liveDetailDiagnosisScores strong {
  color: var(--text-1);
  font-size: 17px;
  font-weight: 950;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.liveDetailCategoryCard {
  min-width: 0;
  display: grid;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 18px;
}

.liveDetailCategoryCard h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 16px;
}

.liveDetailCategoryContent {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 0.72fr) minmax(230px, 1.28fr);
  align-items: center;
  gap: 20px;
}

.liveDetailCategoryChart {
  width: 100%;
  max-width: 240px;
  justify-self: center;
}

.liveDetailCategoryLegend {
  min-width: 0;
  display: grid;
  gap: 15px;
  border-left: 1px solid var(--line);
  padding-left: 20px;
}

.liveDetailCategoryLegendItem {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.liveDetailCategoryLegendItem i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.liveDetailCategoryLegendItem span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 850;
}

.liveDetailCategoryLegendItem strong {
  color: var(--text-2);
  font-size: 13px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.liveDetailCategoryEmpty {
  min-height: 210px;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 850;
}

@media (max-width: 760px) {
.liveDetailCategoryContent {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 760px) {
.liveDetailCategoryLegend {
    border-top: 1px solid var(--line);
    border-left: 0;
    padding-top: 16px;
    padding-left: 0;
  }
}

.diagnosisMetricGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.diagnosisAiStatus {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--line-dark));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  padding: 12px;
}

.diagnosisAiStatus.rule_fallback {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line-dark));
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.diagnosisAiStatus.ai_hybrid_v1 {
  border-color: color-mix(in srgb, #22c55e 42%, var(--line-dark));
  background: color-mix(in srgb, #22c55e 9%, transparent);
}

.diagnosisAiStatus.ai_scoring_v2 {
  border-color: color-mix(in srgb, #22c55e 42%, var(--line-dark));
  background: color-mix(in srgb, #22c55e 9%, transparent);
}

.diagnosisAiStatus strong,
.diagnosisAiStatus p {
  display: block;
  margin: 0;
}

.diagnosisAiStatus strong {
  color: var(--text-1);
  font-size: 14px;
}

.diagnosisAiStatus p {
  margin-top: 4px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.55;
}

.diagnosisDualScores {
  display: grid;
  grid-template-columns: repeat(3, minmax(58px, auto));
  gap: 12px;
  text-align: right;
}

.diagnosisDualScores span {
  display: grid;
  gap: 3px;
}

.diagnosisDualScores em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.diagnosisDualScores strong {
  color: var(--text-1);
  font-size: 1.55rem;
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.diagnosisDualScores strong.positive {
  color: #22c55e;
}

.diagnosisDualScores strong.negative {
  color: #f59e0b;
}

.liveSearchResultPanel:has(.liveSearchCalendar.open) {
  overflow: visible;
  position: relative;
  z-index: 20;
}

.liveSearchResultPanel .liveSearchCalendar {
  position: relative;
  z-index: 30;
  flex: 0 0 auto;
}

.liveSearchResultPanel .liveSearchCalendarPanel {
  z-index: 1200;
}

.liveCardInlineActions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  min-height: 28px;
  margin-top: -4px;
}

.liveCardInlineActions.empty {
  pointer-events: none;
}

.liveCardEntityLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.liveCardEntityLinks a {
  color: inherit;
  text-decoration: none;
}

.liveCardEntityLinks a:hover {
  color: var(--primary-light);
}

.liveAlertSourceText {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, #facc15 38%, var(--line-dark));
  border-radius: 8px;
  background: color-mix(in srgb, #facc15 12%, transparent);
  color: #854d0e;
  padding: 0 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.liveCardAlertIndicator {
  cursor: pointer;
}

.liveCardIconButton.liveCardAlertIndicator:hover {
  border-color: var(--line-dark);
  color: var(--text-3);
}

.liveCardIconButton.liveCardAlertIndicator.alerted:hover {
  border-color: #ca8a04;
  background: color-mix(in srgb, #facc15 42%, transparent);
  color: #854d0e;
}

.liveAlertMutedText {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--tag-bg);
  color: var(--text-3);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.liveAlertStatePill {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--text-3);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.liveAlertStatePill.active {
  border-color: color-mix(in srgb, #f59e0b 52%, var(--line-dark));
  background: color-mix(in srgb, #facc15 18%, transparent);
  color: #854d0e;
}

.liveAlertStatePill.handled,
.liveAlertStatePill.resolved {
  border-color: color-mix(in srgb, #22c55e 46%, var(--line-dark));
  background: color-mix(in srgb, #22c55e 14%, transparent);
  color: #047857;
}

.liveAlertStatePill.closed,
.liveAlertStatePill.ignored {
  border-color: var(--line-dark);
  background: color-mix(in srgb, var(--text-3) 8%, transparent);
  color: var(--text-2);
}

.liveAlertStatePill.none {
  background: transparent;
  color: var(--text-3);
}

.liveAlertStateButton {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, #f59e0b 46%, var(--line-dark));
  border-radius: 999px;
  background: color-mix(in srgb, #facc15 14%, transparent);
  color: #854d0e;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.liveAlertStateButton:hover {
  background: color-mix(in srgb, #facc15 24%, transparent);
}

.liveAlertRuleToolbarActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.liveAlertRuleManager {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  border: 1px solid var(--row-line);
  border-radius: 12px;
  background: var(--surface-panel);
  padding: 16px;
}

.liveAlertRuleManagerHead,
.liveAlertRuleEditor header,
.liveAlertRuleListHead,
.liveAlertRuleSaveBar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.liveAlertRuleManagerHead span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
}

.liveAlertRuleManagerHead h2 {
  margin: 3px 0 4px;
  color: var(--text-1);
  font-size: 22px;
  font-weight: 950;
}

.liveAlertRuleManagerHead p,
.liveAlertRuleEditor header em,
.liveAlertRuleSaveBar em {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.45;
}

.liveAlertRuleStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.liveAlertRuleStats span,
.liveAlertRuleList,
.liveAlertRuleEditor {
  border: 1px solid var(--row-line);
  border-radius: 12px;
  background: var(--control-bg);
}

.liveAlertRuleStats span {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.liveAlertRuleStats em,
.liveAlertRuleFormGrid span {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.liveAlertRuleStats strong {
  color: var(--text-1);
  font-size: 22px;
  font-weight: 950;
}

.liveAlertRuleWorkbench {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(420px, 1.4fr);
  gap: 12px;
}

.liveAlertRuleList,
.liveAlertRuleEditor {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
}

.liveAlertRuleList article {
  position: relative;
  display: grid;
  gap: 8px;
  border: 1px solid var(--row-line);
  border-left: 3px solid var(--line-dark);
  border-radius: 10px;
  background: var(--surface-panel);
  padding: 10px 12px;
}

.liveAlertRuleList article.active {
  border-left-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-panel));
}

.liveAlertRuleList article.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.liveAlertRuleItemButton {
  display: grid;
  gap: 4px;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0 72px 0 0;
  text-align: left;
  cursor: pointer;
}

.liveAlertRuleItemActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
}

.liveAlertRuleItemActions button {
  min-height: 26px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-2);
  padding: 0 9px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.liveAlertRuleItemActions button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.liveAlertRuleItemActions button.danger {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line-dark));
  color: var(--danger);
}

.liveAlertRuleList article span,
.liveAlertRuleList article em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.liveAlertRuleList article strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

.liveAlertRuleList article b {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 900;
}

.liveAlertRuleFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.liveAlertRuleFormGrid .wide {
  grid-column: 1 / -1;
}

.liveAlertRuleFormGrid label {
  display: grid;
  gap: 6px;
}

.liveAlertRuleFormGrid input,
.liveAlertRuleFormGrid select,
.liveAlertRuleEditor header select {
  min-height: 42px;
  border: 1px solid var(--row-line);
  border-radius: 9px;
  background: var(--surface-panel);
  color: var(--text-1);
  padding: 0 11px;
  font-size: 13px;
  font-weight: 800;
}

.liveAlertRuleMetricReadout {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 42px;
  border: 1px solid var(--row-line);
  border-radius: 9px;
  background: var(--surface-panel);
  padding: 7px 11px;
}

.liveAlertRuleMetricReadout strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
}

.liveAlertRuleMetricReadout em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.35;
}

.liveAlertRuleMetricTabs,
.liveAlertRuleChannels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.liveAlertRuleMetricTabs button,
.liveAlertRuleChannels button {
  min-height: 38px;
  border: 1px solid var(--row-line);
  border-radius: 9px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.liveAlertRuleChannels button {
  display: grid;
  gap: 2px;
  padding: 7px 12px;
  text-align: left;
}

.liveAlertRuleChannels button strong {
  font-size: 12px;
  font-weight: 950;
}

.liveAlertRuleChannels button em {
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.liveAlertRuleMetricTabs button.active,
.liveAlertRuleChannels button.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.liveAlertRuleChannels button.active em {
  color: var(--primary);
}

.liveAlertRuleChannelHint {
  margin: -2px 0 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
}

.liveAlertRuleMetricHint {
  margin: -2px 0 0;
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  color: var(--text-2);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.liveAlertConditionBuilder {
  display: grid;
  gap: 10px;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--control-bg);
  padding: 12px;
}

.liveAlertConditionBuilderHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.liveAlertConditionBuilderHead > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.liveAlertConditionBuilderHead strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

.liveAlertConditionBuilderHead em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.4;
}

.liveAlertConditionLogic {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel);
}

.liveAlertConditionLogic button {
  min-height: 34px;
  border: 0;
  border-right: 1px solid var(--row-line);
  background: transparent;
  color: var(--text-2);
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.liveAlertConditionLogic button:last-child {
  border-right: 0;
}

.liveAlertConditionLogic button.active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.liveAlertConditionList {
  display: grid;
  gap: 8px;
}

.liveAlertConditionRow {
  display: grid;
  grid-template-columns:
    62px
    minmax(150px, 1.3fr)
    minmax(145px, 0.9fr)
    minmax(100px, 0.7fr)
    74px
    34px;
  align-items: end;
  gap: 8px;
  border-top: 1px solid var(--row-line);
  padding-top: 8px;
}

.liveAlertConditionRow:first-child {
  border-top: 0;
  padding-top: 0;
}

.liveAlertConditionRow label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.liveAlertConditionRow label > span {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 900;
}

.liveAlertConditionRow input,
.liveAlertConditionRow select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-1);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
}

.liveAlertConditionIndex,
.liveAlertConditionUnit {
  display: flex;
  align-items: center;
  min-height: 38px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 900;
}

.liveAlertConditionUnit {
  color: var(--text-3);
}

.liveAlertConditionRemove {
  display: grid;
  place-items: center;
  width: 34px;
  height: 38px;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--danger);
  cursor: pointer;
}

.liveAlertConditionRemove:disabled,
.liveAlertConditionAdd:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.liveAlertConditionAdd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  justify-self: start;
  min-height: 34px;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--primary);
  padding: 0 11px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.liveAlertRuleNotice {
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 850;
}

.liveAlertRuleNotice.success {
  background: color-mix(in srgb, #16a34a 10%, transparent);
  color: #047857;
}

.liveAlertRuleNotice.warning {
  background: color-mix(in srgb, #d97706 11%, transparent);
  color: #a16207;
}

.liveAlertRuleNotice.info {
  background: color-mix(in srgb, #0f766e 10%, transparent);
  color: #0f766e;
}

.liveAlertRuleNotice.error {
  background: color-mix(in srgb, #dc2626 10%, transparent);
  color: #b91c1c;
}

@media (max-width: 1180px) {
.liveAlertRuleWorkbench {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
.liveAlertRuleStats,
  .liveAlertRuleFormGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
.liveAlertRuleFormGrid .wide {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
.liveAlertConditionBuilderHead {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
.liveAlertConditionLogic {
    width: 100%;
  }
}

@media (max-width: 720px) {
.liveAlertConditionRow {
    grid-template-columns: minmax(0, 1fr) 38px;
  }
}

@media (max-width: 720px) {
.liveAlertConditionRow label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
.liveAlertConditionIndex {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
.liveAlertConditionUnit {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
.liveAlertConditionRemove {
    grid-column: 2;
  }
}

.liveWarningSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}

.liveWarningSummary > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  border: 1px solid var(--row-line);
  border-radius: 10px;
  background: var(--control-bg);
  padding: 8px 10px;
}

.liveWarningSummary strong {
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.liveWarningSummary em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.liveWarningSummary .active strong {
  color: #ca8a04;
}

.liveWarningSummary .handled strong {
  color: #047857;
}

.liveWarningSummary .closed strong {
  color: var(--text-2);
}

.liveWarningSummary .total strong {
  color: var(--primary);
}

.liveWarningRuleDefinition {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.liveWarningRuleDefinition span {
  display: grid;
  gap: 3px;
  border: 1px solid var(--row-line);
  border-radius: 9px;
  background: var(--surface-panel);
  padding: 9px 10px;
}

.liveWarningRuleDefinition strong {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.liveWarningRuleDefinition em {
  color: var(--text-1);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.liveWarningLedgerRow.clickable {
  cursor: pointer;
}

.liveWarningLedgerRow.clickable:hover {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.liveWarningLedgerLive {
  width: max-content;
  max-width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.liveWarningStatusPill.processing {
  border-color: color-mix(in srgb, #2563eb 38%, var(--row-line));
  background: color-mix(in srgb, #2563eb 12%, transparent);
  color: #1d4ed8;
}

.liveWarningStatusPill.handled,
.liveWarningStatusPill.resolved {
  border-color: color-mix(in srgb, #22c55e 42%, var(--row-line));
  background: color-mix(in srgb, #22c55e 14%, transparent);
  color: #047857;
}

.liveWarningStatusPill.closed,
.liveWarningStatusPill.ignored {
  border-color: var(--row-line);
  background: color-mix(in srgb, var(--text-3) 8%, transparent);
  color: var(--text-2);
}

.liveWarningLedgerActions a,
.liveWarningLedgerActions button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}

.liveWarningLedgerActions a:hover,
.liveWarningLedgerActions button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.liveWarningKpiStrip em,
.liveWarningKpiStrip b {
  color: var(--text-3);
  font-style: normal;
  line-height: 1.35;
}

.liveWarningKpiStrip em {
  font-size: 12px;
  font-weight: 850;
}

.liveWarningKpiStrip b {
  font-size: 11px;
  font-weight: 800;
}

.liveWarningKpiStrip .red strong,
.liveWarningKpiStrip .red b {
  color: #b91c1c;
}

.liveWarningKpiStrip .amber strong,
.liveWarningKpiStrip .amber b {
  color: #b45309;
}

.liveWarningKpiStrip .blue strong,
.liveWarningKpiStrip .blue b {
  color: var(--primary);
}

.liveWarningKpiStrip .green strong,
.liveWarningKpiStrip .green b {
  color: #047857;
}

.liveWarningTimelineCard header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.liveWarningTimelineCard h4 {
  margin: 0;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

.liveWarningTimelineCard header em {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.liveWarningTimelineCard header > span {
  min-width: 30px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
}

.liveWarningTimelineRows {
  display: grid;
  gap: 9px;
}

.liveWarningTimelineRows article {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--row-line);
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  background: var(--surface-panel);
  padding: 10px 11px;
}

.liveWarningTimelineRows article.critical {
  border-left-color: #b91c1c;
}

.liveWarningTimelineRows article.warning {
  border-left-color: #ca8a04;
}

.liveWarningTimelineRows article > span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.45;
}

.liveWarningTimelineRows article div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.liveWarningTimelineRows article strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

.liveWarningTimelineRows article em,
.liveWarningTimelineRows article b {
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.45;
}

.liveWarningTimelineRows article b {
  color: var(--text-3);
  font-size: 11px;
}

.liveWarningTimelineRows article a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  color: var(--primary);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.liveWarningDetailWorkbench .liveWarningActionCard,
.liveWarningDetailWorkbench .liveWarningProcessCard {
  border: 1px solid var(--row-line);
  border-radius: 12px;
  background: var(--control-bg);
  padding: 13px;
}

.liveWarningDetailWorkbench .liveWarningProcessCard > div {
  grid-template-columns: 1fr;
}

.liveWarningEventPicker {
  min-width: 0;
  display: grid;
  gap: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--row-line) 82%, transparent);
  padding-bottom: 13px;
}

.liveWarningEventPickerHead {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.liveWarningEventPickerHead > strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

.liveWarningHandleCard .liveWarningEventPickerHead > em {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 760;
}

.liveWarningEventPickerList {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.liveWarningEventPickerList button {
  min-width: 0;
  min-height: 68px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title status"
    "metric status";
  align-items: center;
  gap: 3px 10px;
  border: 1px solid var(--row-line);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 10px 11px;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 120ms,
    background 120ms,
    box-shadow 120ms;
}

.liveWarningEventPickerList button.critical {
  border-left-color: var(--danger);
}

.liveWarningEventPickerList button.warning {
  border-left-color: var(--warning);
}

.liveWarningEventPickerList button.info {
  border-left-color: var(--primary);
}

.liveWarningEventPickerList button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--row-line));
  background: var(--surface-panel-hover);
}

.liveWarningEventPickerList button.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);
}

.liveWarningEventPickerList button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.liveWarningHandleCard .liveWarningEventPickerList button > span {
  min-width: 0;
  grid-area: title;
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveWarningHandleCard .liveWarningEventPickerList button > em {
  min-width: 0;
  grid-area: metric;
  overflow: hidden;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveWarningEventPickerList button > b {
  grid-area: status;
  align-self: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 13%, transparent);
  color: var(--warning);
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.liveWarningEventPickerList button[data-status='processing'] > b {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.liveWarningEventPickerList button[data-status='snoozed'] > b {
  background: color-mix(in srgb, var(--warning) 13%, transparent);
  color: #a16207;
}

.liveWarningEventPickerList button[data-status='handled'] > b,
.liveWarningEventPickerList button[data-status='resolved'] > b {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}

.liveWarningEventPickerList button[data-status='closed'] > b,
.liveWarningEventPickerList button[data-status='ignored'] > b {
  background: var(--surface-panel-hover);
  color: var(--text-3);
}

.liveWarningHandleCard span {
  color: #b45309;
  font-size: 11px;
  font-weight: 950;
}

.liveWarningHandleCard h4 {
  margin: 3px 0 4px;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 950;
}

.liveWarningHandleCard em {
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.liveWarningHandleCard header > strong {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--surface-panel);
  color: #b45309;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 950;
}

.liveWarningEventActions button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.liveWarningEventActions button:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.liveWarningEventActions button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.liveWarningReminderControl {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  align-items: center;
  gap: 14px;
  border-top: 1px solid color-mix(in srgb, var(--row-line) 82%, transparent);
  padding-top: 12px;
}

.liveWarningReminderIntro {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.liveWarningReminderIntro > strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 950;
}

.liveWarningHandleCard .liveWarningReminderIntro > em {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.5;
}

.liveWarningReminderOptions {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel);
}

.liveWarningReminderOptions button {
  min-width: 0;
  min-height: 36px;
  border: 0;
  border-right: 1px solid var(--row-line);
  background: transparent;
  color: var(--text-2);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.liveWarningReminderOptions button:last-child {
  border-right: 0;
}

.liveWarningReminderOptions button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-panel));
  color: var(--primary);
}

.liveWarningReminderOptions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.liveWarningReminderScheduled {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--primary);
}

.liveWarningHandleCard .liveWarningReminderScheduled > span {
  min-width: 0;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
}

.liveWarningDetailMetricGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1180px) {
.liveWarningDetailTop {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
.liveWarningDetailMetricGrid,
.liveWarningTimelineRows article {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
.liveWarningEventPickerList {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
.liveWarningHandleCard header {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
.liveWarningConclusionCard {
    grid-template-columns: 1fr;
  }
}

.liveHistoryReview {
  gap: 20px;
}

.liveHistoryDrawer {
  max-width: 92vw;
  background: var(--surface-panel);
}

.liveHistoryDrawerHeader {
  min-width: 0;
  display: grid;
  gap: 14px;
  border-bottom: 1px solid var(--line-dark);
  background: var(--surface-panel);
  padding: 18px 20px 16px;
}

.liveHistoryDrawerTopRow {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.liveHistoryDrawerIdentity {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.liveHistoryDrawerEyebrow {
  min-height: 22px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.liveHistoryDrawerIdentity h2 {
  overflow: hidden;
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveHistoryDrawerIdentity p {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
}

.liveHistoryDrawerIdentity .liveHistoryDrawerTime {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
}

.liveHistoryDrawerActions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.liveHistoryDrawerIconButton {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
  padding: 0;
  cursor: pointer;
}

.liveHistoryDrawerIconButton:hover:not(:disabled) {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary);
}

.liveHistoryDrawerIconButton:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.liveHistoryDrawerIconButton:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.liveHistoryDrawerMetrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
}

.liveHistoryDrawerMetrics > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
}

.liveHistoryDrawerMetrics > div + div {
  border-left: 1px solid var(--row-line);
}

.liveHistoryDrawerMetrics span {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 850;
}

.liveHistoryDrawerMetrics strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 16px;
  font-weight: 950;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveHistoryDrawerBody {
  padding: 0 20px 22px;
  background: var(--surface-panel);
}

.liveHistoryDrawerTabs {
  position: sticky;
  top: 0;
  z-index: 4;
  width: calc(100% + 40px);
  margin: 0 -20px 18px;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  background: var(--surface-panel);
  padding: 12px 20px;
}

.liveHistoryDrawerTabs .cuiSegmentedButton {
  flex: 1 1;
}

.liveHistoryDrawerBody .liveHistoryReview {
  min-width: 0;
  padding: 0;
}

.liveHistoryDrawerBody .liveHistoryOverview {
  display: none;
}

.liveHistoryReview[data-tab='trends'] .liveHistoryProductPanel,
.liveHistoryReview[data-tab='products'] .liveHistoryDrawerTrendContent {
  display: none;
}

.liveHistoryDrawerTrendContent {
  min-width: 0;
}

.liveHistoryDrawerBody .liveHistoryTrendSection,
.liveHistoryDrawerBody .liveHistoryProductPanel {
  min-width: 0;
}

.liveHistoryDrawerBody .liveHistoryProductPanel {
  border-radius: 8px;
}

.liveHistoryOverview {
  display: grid;
  gap: 18px;
}

.liveHistorySessionHeader,
.liveHistorySectionHeader {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.liveHistorySessionIdentity {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.liveHistorySessionEyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.liveHistorySessionIdentity h2,
.liveHistorySectionHeader h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  line-height: 1.35;
}

.liveHistorySectionHeader p,
.liveHistoryProductHeader p {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.5;
}

.liveHistoryRefreshButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-top: 0;
}

.liveHistoryKpiStrip {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.liveHistoryKpiStrip > div {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 14px 16px;
}

.liveHistoryKpiStrip > div + div {
  border-left: 1px solid var(--row-line);
}

.liveHistoryKpiStrip span {
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveHistoryKpiStrip strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 20px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveHistoryKpiStrip strong em {
  margin-left: 4px;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.liveHistoryMetaBand {
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(130px, 0.8fr)
    minmax(130px, 0.8fr)
    repeat(3, minmax(170px, 1fr));
  gap: 14px 20px;
  margin: 0;
  border-top: 1px solid var(--row-line);
  padding-top: 16px;
}

.liveHistoryMetaBand > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.liveHistoryMetaBand dt {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 850;
}

.liveHistoryMetaBand dd {
  overflow: hidden;
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveHistoryTrendSection {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.liveHistorySectionHeader {
  align-items: flex-end;
  padding: 0 2px;
}

.liveHistorySectionHeader > div:first-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.liveHistoryTrendSection .liveHistoryMiniCard {
  min-width: 0;
}

.cuiAgencyThemeScope[data-compass-theme-surface] .appShell .livesPage .panelHeader,
.cuiAgencyThemeScope[data-compass-theme-surface] .appShell .livesPage .liveSelectedDetailHeader,
.cuiAgencyThemeScope[data-compass-theme-surface] .appShell .scheduleDrawerPanel > .panelHeader {
  border-color: transparent;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.liveHistoryMiniCard[data-metric='online_users'] .liveHistoryMiniArea {
  fill: var(--accent);
}

.liveHistoryMiniCard[data-metric='online_users'] .liveHistoryMiniLine {
  stroke: var(--accent);
}

.liveHistoryMiniCard[data-metric='online_users'] .liveHistoryMiniDot {
  fill: var(--accent);
}

.liveHistoryMiniCard[data-metric='views'] .liveHistoryMiniArea {
  fill: var(--primary);
}

.liveHistoryMiniCard[data-metric='views'] .liveHistoryMiniLine {
  stroke: var(--primary);
}

.liveHistoryMiniCard[data-metric='views'] .liveHistoryMiniDot {
  fill: var(--primary);
}

.liveHistoryProductHeader {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}

.liveHistoryProductHeader > div:first-child {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 5px;
}

.liveHistoryProductTitleRow {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.liveHistoryProductTitleRow .statusPill,
.liveHistoryProductCount {
  width: fit-content;
  justify-self: start;
}

.liveHistoryProductCount {
  flex: 0 0 auto;
}

.liveHistoryProductPanel .productTrendTable {
  margin-top: 0;
  overflow-x: auto;
}

.liveHistoryProductPanel .liveProductSummaryRow {
  min-width: 700px;
  min-height: 42px;
  grid-template-columns:
    minmax(180px, 1.25fr)
    minmax(76px, 0.45fr)
    minmax(108px, 0.58fr)
    minmax(104px, 0.58fr)
    minmax(108px, 0.58fr);
}

.liveHistoryProductPanel .liveProductSummaryRow.head {
  min-height: 34px;
}

.liveHistoryProductPanel .liveProductSummaryRow > span:not(:first-child) {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.liveHistoryProductPanel .liveDetailProductToggle {
  min-height: 30px;
  margin: 9px auto 0;
  border-color: transparent;
  background: transparent;
  color: var(--primary);
  padding: 0 6px;
  font-size: 12px;
  font-weight: 850;
}

.liveHistoryProductPanel .liveDetailProductToggle:hover:not(:disabled) {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

@media (max-width: 1180px) {
.liveHistoryKpiStrip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
.liveHistoryKpiStrip > div:nth-child(4) {
    border-left: 0;
  }
}

@media (max-width: 1180px) {
.liveHistoryKpiStrip > div:nth-child(-n + 3) {
    border-bottom: 1px solid var(--row-line);
  }
}

@media (max-width: 1180px) {
.liveHistoryMetaBand {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
.liveHistorySessionHeader,
  .liveHistorySectionHeader,
  .liveHistoryProductHeader {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
.liveHistoryDrawer {
    width: 100vw !important;
    max-width: 100vw;
  }
}

@media (max-width: 720px) {
.liveHistoryDrawerHeader {
    gap: 12px;
    padding: 14px 14px 12px;
  }
}

@media (max-width: 720px) {
.liveHistoryDrawerTopRow {
    gap: 12px;
  }
}

@media (max-width: 720px) {
.liveHistoryDrawerIdentity h2 {
    font-size: 16px;
    white-space: normal;
  }
}

@media (max-width: 720px) {
.liveHistoryDrawerActions {
    display: grid;
    grid-template-columns: repeat(2, 32px);
  }
}

@media (max-width: 720px) {
.liveHistoryDrawerBody {
    padding-right: 14px;
    padding-bottom: 18px;
    padding-left: 14px;
  }
}

@media (max-width: 720px) {
.liveHistoryDrawerTabs {
    width: calc(100% + 28px);
    margin-right: -14px;
    margin-left: -14px;
    padding-right: 14px;
    padding-left: 14px;
  }
}

@media (max-width: 720px) {
.liveHistoryProductCount {
    align-self: flex-start;
  }
}

@media (max-width: 720px) {
.liveHistoryRefreshButton {
    width: fit-content;
  }
}

@media (max-width: 720px) {
.liveHistoryKpiStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
.liveHistoryKpiStrip > div {
    padding: 12px;
  }
}

@media (max-width: 720px) {
.liveHistoryKpiStrip > div:nth-child(odd) {
    border-left: 0;
  }
}

@media (max-width: 720px) {
.liveHistoryKpiStrip > div:nth-child(4) {
    border-left: 1px solid var(--row-line);
  }
}

@media (max-width: 720px) {
.liveHistoryKpiStrip > div:nth-child(-n + 4) {
    border-bottom: 1px solid var(--row-line);
  }
}

@media (max-width: 720px) {
.liveHistoryMetaBand {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
.liveHistoryProductPanel .liveProductSummaryRow {
    min-width: 0;
  }
}

@media (max-width: 720px) {
.liveHistoryProductPanel .liveProductSummaryRow:not(.head) > span {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(92px, 0.75fr) minmax(0, 1fr);
    gap: 12px;
    text-align: left;
  }
}

@media (max-width: 720px) {
.liveHistoryProductPanel .liveProductSummaryRow:not(.head) > span::before {
    content: attr(data-label);
    color: var(--text-3);
    font-size: 11px;
    font-weight: 850;
  }
}

.liveSearchDropdown.filterSelect {
  position: relative;
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.liveSearchDropdown.filterSelect .filterSelectTrigger {
  width: 100%;
  min-width: max-content;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-1);
  padding: 0 11px 0 14px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.liveSearchDropdown.filterSelect .filterSelectSelectedText {
  min-width: 0;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  overflow: visible;
  white-space: nowrap;
}

.liveSearchDropdown.filterSelect .filterSelectLabel {
  min-width: max-content;
  flex: 0 0 auto;
  display: inline;
  overflow: visible;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.liveSearchDropdown.filterSelect .filterSelectValue {
  min-width: max-content;
  flex: 0 0 auto;
  overflow: visible;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.liveSearchDropdown.filterSelect .filterSelectChevron {
  color: var(--text-2);
}

.liveSearchDropdown.filterSelect.open .filterSelectTrigger,
.liveSearchDropdown.filterSelect .filterSelectTrigger:focus-visible {
  border-color: var(--primary-border-strong);
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.liveSearchDropdownMenu.filterSelectMenu {
  min-width: min(224px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  display: grid;
  gap: 3px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  padding: 9px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.liveSearchDropdownMenu .filterSelectOption {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

.liveSearchDropdownMenu .filterSelectOptionMain {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.liveSearchDropdownMenu .filterSelectOptionDescription {
  order: -1;
  overflow: visible;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
  text-overflow: clip;
}

.liveSearchDropdownMenu .filterSelectOptionLabel {
  overflow: visible;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
  text-overflow: clip;
}

.liveSearchDropdownMenu .filterSelectOptionCheck {
  display: none;
}

.liveSearchDropdownMenu .filterSelectOption.active:not(.selected) {
  border-color: transparent;
  background: transparent;
  color: var(--text-2);
}

.liveSearchDropdownMenu .filterSelectOption:not(:disabled):not(.selected):hover,
.liveSearchDropdownMenu .filterSelectOption:not(.selected):focus-visible {
  border-color: transparent;
  outline: 0;
  background: var(--tag-bg);
  color: var(--text-1);
}

.liveSearchDropdownMenu .filterSelectOption.selected,
.liveSearchDropdownMenu .filterSelectOption.selected:hover,
.liveSearchDropdownMenu .filterSelectOption.selected.active,
.liveSearchDropdownMenu .filterSelectOption.selected:focus-visible {
  border-color: transparent;
  background: var(--primary-soft);
  color: var(--primary-light);
}

.liveSearchDropdownMenu .filterSelectOption.selected .filterSelectOptionDescription,
.liveSearchDropdownMenu .filterSelectOption.selected .filterSelectOptionLabel {
  color: var(--primary-light);
}

/*
 Live monitoring styles migrated from feat/live-search-liujia.
 */

.liveSearchChipScroller {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
}

.livesPage.isWarningDetail {
  width: 100%;
  min-width: 0;
}

.liveWarningDetailHero dd a {
  color: var(--primary);
  text-decoration: none;
}

.liveWarningDetailHero dd a:hover {
  text-decoration: underline;
}

.liveWarningMiniTrendHead span b {
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 900;
}

.liveWarningTrendAssessment {
  width: max-content;
  max-width: 100%;
  display: block;
  margin-top: 8px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--text-3) 8%, transparent);
  color: var(--text-2);
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.4;
}

.liveWarningTrendAssessment.recovering {
  background: color-mix(in srgb, #2563eb 10%, transparent);
  color: #1d4ed8;
}

.liveWarningTrendAssessment.recovered {
  background: color-mix(in srgb, #22c55e 12%, transparent);
  color: #047857;
}

.liveWarningTrendAssessment.worsening {
  background: color-mix(in srgb, #b91c1c 10%, transparent);
  color: #b91c1c;
}

.liveWarningTrendAssessment.steady {
  background: color-mix(in srgb, #facc15 16%, transparent);
  color: #854d0e;
}

.liveWarningHeroBadges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.liveWarningHeroBadges b {
  width: max-content;
  border: 1px solid var(--row-line);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 900;
}

.liveWarningDetailHero .liveWarningHeroLive {
  display: grid;
  gap: 3px;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
}

.liveWarningHeroLive em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.liveWarningHeroVerdict {
  display: grid;
  gap: 4px;
  border-left: 3px solid currentColor;
  color: var(--primary);
  padding-left: 11px;
}

.liveWarningDetailHero.critical .liveWarningHeroVerdict {
  color: #b91c1c;
}

.liveWarningDetailHero.warning .liveWarningHeroVerdict {
  color: #a16207;
}

.liveWarningHeroVerdictLabel {
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.liveWarningHeroVerdict strong {
  color: currentColor;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.4;
}

.liveWarningDetailHero .liveWarningHeroVerdict p {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
}

.liveWarningHeroLinks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.liveWarningHeroLinks a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.liveWarningHeroSnapshot > span {
  min-width: 0;
  display: grid;
  gap: 3px;
  border-right: 1px solid var(--row-line);
  border-radius: 0;
  background: transparent;
  color: var(--text-1);
  padding: 0 12px 0 0;
}

.liveWarningHeroSnapshot > span:last-child {
  border-right: 0;
}

.liveWarningHeroSnapshot em {
  color: var(--text-3);
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
}

.liveWarningHeroSnapshot strong {
  overflow-wrap: anywhere;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
}

.liveWarningHeroSnapshot b {
  color: var(--text-3);
  font-style: normal;
  overflow: hidden;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveWarningHandleCard .liveWarningEventPicker,
.liveWarningHandleCard .liveWarningReminderControl,
.liveWarningHandleCard .liveAlertRuleNotice {
  grid-column: 1 / -1;
}

.liveWarningTrendSpotlight {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(170px, 0.45fr) minmax(0, 1.55fr);
  align-items: stretch;
  gap: 10px;
}

.liveWarningTrendCurrent {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--row-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-panel));
  padding: 12px 14px;
}

.liveWarningTrendCurrent > span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.liveWarningTrendCurrent > strong {
  overflow-wrap: anywhere;
  color: var(--text-1);
  font-size: 28px;
  font-weight: 950;
  line-height: 1.1;
}

.liveWarningTrendCurrent > em {
  width: max-content;
  max-width: 100%;
  color: var(--text-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.4;
}

.liveWarningTrendCurrent > em.recovering {
  color: #1d4ed8;
}

.liveWarningTrendCurrent > em.recovered {
  color: #047857;
}

.liveWarningTrendCurrent > em.worsening,
.liveWarningTrendCurrent > em.steady {
  color: #b91c1c;
}

.liveWarningTrendFacts {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel);
}

.liveWarningTrendFacts > span {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
  border-right: 1px solid var(--row-line);
  padding: 12px 14px;
}

.liveWarningTrendFacts > span:last-child {
  border-right: 0;
}

.liveWarningTrendFacts em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.liveWarningTrendFacts strong {
  overflow-wrap: anywhere;
  color: var(--text-1);
  font-size: 17px;
  font-weight: 950;
}

.liveWarningChartFrame {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 11px 12px 2px;
}

.liveWarningChartLegend {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 0 4px 4px;
}

.liveWarningChartLegend span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 850;
}

.liveWarningChartLegend span.support {
  color: var(--text-3);
  font-weight: 650;
  opacity: 0.62;
}

.liveWarningChartLegend i {
  width: 18px;
  height: 3px;
  flex: 0 0 auto;
  border-radius: 2px;
}

.liveWarningChartLegend i.threshold {
  height: 0;
  border-top: 2px dashed #f59e0b;
  background: transparent;
}

.liveWarningChartLegend i.trigger {
  height: 14px;
  width: 0;
  border-left: 2px dashed #ef4444;
  background: transparent;
}

.liveWarningChartLegend b {
  border-radius: 4px;
  background: var(--surface-panel-hover);
  color: var(--text-3);
  padding: 2px 5px;
  font-size: 9px;
  font-weight: 700;
}

.liveWarningMainChart {
  width: 100%;
  min-width: 0;
}

.liveWarningTrendReadHint {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  margin: 0;
  border-top: 1px solid var(--row-line);
  color: var(--text-2);
  padding-top: 11px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.55;
}

.liveWarningTrendReadHint > i {
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.liveWarningTrendReadHint > span {
  min-width: 0;
  display: block;
  grid-column: 2;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.liveWarningTrendReadHint strong {
  color: var(--text-1);
}

.liveWarningDecisionMetrics article > header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.liveWarningDecisionMetrics article > header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.liveWarningDecisionMetrics article > header span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.liveWarningDecisionMetrics article > header strong {
  overflow-wrap: anywhere;
  color: var(--text-1);
  font-size: 22px;
  font-weight: 950;
}

.liveWarningDecisionMetrics article > header em {
  flex: 0 0 auto;
  border-radius: 6px;
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: #a16207;
  padding: 4px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.liveWarningDetailWorkbench {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.7fr);
  grid-template-areas: "trend trend"
    "decision action"
    "timeline timeline";
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  display: grid;
}

.liveWarningConditionVisual {
  height: 20px;
  position: relative;
  display: block;
  border-radius: 3px;
  background: var(--surface-panel-hover);
}

.liveWarningConditionVisual > span {
  width: var(--warning-current);
  height: 100%;
  display: block;
  border-radius: 3px;
  background: color-mix(in srgb, var(--primary) 34%, transparent);
}

.liveWarningDecisionMetrics article.warning .liveWarningConditionVisual > span {
  background: color-mix(in srgb, #ca8a04 34%, transparent);
}

.liveWarningDecisionMetrics article.critical .liveWarningConditionVisual > span {
  background: color-mix(in srgb, #b91c1c 30%, transparent);
}

.liveWarningConditionVisual > i {
  width: 2px;
  height: 28px;
  position: absolute;
  top: -4px;
  left: var(--warning-threshold);
  background: #f59e0b;
  box-shadow: 0 0 0 2px var(--surface-panel);
}

.liveWarningConditionVisual > b {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 5px;
  left: var(--warning-current);
  border: 2px solid var(--surface-panel);
  border-radius: 50%;
  background: var(--primary);
  transform: translateX(-50%);
}

.liveWarningDecisionMetrics article.warning .liveWarningConditionVisual > b {
  background: #ca8a04;
}

.liveWarningDecisionMetrics article.critical .liveWarningConditionVisual > b {
  background: #b91c1c;
}

.liveWarningConditionCompare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.liveWarningConditionCompare > span {
  min-width: 0;
  display: grid;
  gap: 3px;
  border-top: 1px solid var(--row-line);
  padding-top: 8px;
}

.liveWarningConditionCompare em {
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.liveWarningConditionCompare strong {
  overflow-wrap: anywhere;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 900;
}

.liveWarningDecisionEvidence summary {
  width: max-content;
  max-width: 100%;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.liveWarningDecisionEvidence > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.liveWarningDecisionEvidence > div > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.liveWarningActionCard > header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.liveWarningActionCard > header > span {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}

.liveWarningActionCard > header > div {
  min-width: 0;
}

.liveWarningActionCard > header em {
  display: block;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.45;
}

.liveWarningActionCard li {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.6;
  min-height: 32px;
  position: relative;
  padding: 7px 0 7px 34px;
}

.liveWarningActionCard li::before {
  counter-increment: warning-action;
  content: counter(warning-action);
  width: 22px;
  height: 22px;
  position: absolute;
  top: 7px;
  left: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-panel-hover);
  color: var(--primary);
  font-size: 10px;
  font-weight: 950;
}

.liveWarningStatusFlow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.liveWarningStatusFlow::before {
  height: 2px;
  position: absolute;
  top: 19px;
  right: calc(25% - 14px);
  left: calc(25% - 14px);
  background: var(--row-line);
  content: "";
}

.liveWarningStatusFlow article {
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.liveWarningStatusFlow article > span {
  width: 40px;
  height: 40px;
  z-index: 1;
  display: grid;
  place-items: center;
  border: 3px solid var(--control-bg);
  border-radius: 50%;
  background: var(--surface-panel-hover);
  color: var(--text-3);
}

.liveWarningStatusFlow article.done > span {
  background: color-mix(in srgb, #22c55e 15%, var(--surface-panel));
  color: #047857;
}

.liveWarningStatusFlow article.done.critical > span {
  background: color-mix(in srgb, #b91c1c 12%, var(--surface-panel));
  color: #b91c1c;
}

.liveWarningStatusFlow article.done.warning > span,
.liveWarningStatusFlow article.active > span {
  background: color-mix(in srgb, #f59e0b 14%, var(--surface-panel));
  color: #a16207;
}

.liveWarningStatusFlow article > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding-top: 2px;
}

.liveWarningStatusFlow em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.4;
}

.liveWarningStatusFlow strong {
  overflow-wrap: anywhere;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.4;
}

.liveWarningStatusFlow b {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .liveWarningHeroSnapshot > span {
    border-right: 0;
    border-bottom: 1px solid var(--row-line);
    padding: 0 0 8px;
  }
}

@media (max-width: 720px) {
  .liveWarningHeroSnapshot > span:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 720px) {
  .liveWarningHandleCard {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .liveWarningHandleCard .liveWarningEventPicker,
.liveWarningHandleCard .liveAlertRuleNotice {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
  .liveWarningEventActions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .liveWarningReminderControl {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .liveWarningReminderOptions button {
    min-height: 34px;
    padding: 0 4px;
    font-size: 11px;
  }
}

@media (max-width: 720px) {
  .liveWarningTrendHeader {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .liveWarningTrendSpotlight {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .liveWarningTrendFacts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .liveWarningTrendFacts > span {
    border-right: 0;
    border-bottom: 1px solid var(--row-line);
  }
}

@media (max-width: 720px) {
  .liveWarningTrendFacts > span:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 720px) {
  .liveWarningChartFrame {
    padding-inline: 4px;
  }
}

@media (max-width: 720px) {
  .liveWarningConditionCompare,
.liveWarningDecisionEvidence > div {
    grid-template-columns: 1fr;
  }
}

.livesPage .liveWatchPill {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
}

.livesPage .liveWatchPill:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}

.livesPage .liveWatchPill.active {
  border-color: #16a34a;
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
}

.livesPage .liveWatchPill.active:hover:not(:disabled) {
  background: color-mix(in srgb, #16a34a 22%, transparent);
}

.livesPage .liveWatchPill:disabled {
  opacity: 0.6;
  cursor: progress;
}

.liveDetailProductPager .liveSearchPagerControls,
.liveDetailProductPager .liveSearchPageNumbers {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.liveDetailProductPager .liveSearchPageArrow,
.liveDetailProductPager .liveSearchPageNumber,
.liveDetailProductPager .liveSearchPageEllipsis {
  width: 34px;
  height: 34px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  padding: 0;
}

.liveDetailProductPager .liveSearchPageNumber.active,
.liveDetailProductPager .liveSearchPageNumber[aria-current='page'] {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.livesPage .liveSearchPageJump {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}

.livesPage .liveSearchPageJump input {
  width: 54px;
  height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-1);
  font: inherit;
  text-align: center;
  padding: 0 8px;
  outline: none;
}

.livesPage .liveSearchPageJump input:focus {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.liveSchedulePager .liveSearchPagerControls {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.liveWarningDetailPanel {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 14px;
}

.liveWarningDetailHero dl {
  margin: 0;
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.liveWarningTrendHeader em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.55;
  max-width: 760px;
  display: block;
  margin-top: 3px;
}

.liveWarningConditionHeader > span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 900;
}

.liveWarningMiniTrendHead span {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
}

.liveWarningActionCard ol {
  margin: 0;
  padding-left: 18px;
  counter-reset: warning-action;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.55;
}

.liveWarningActionLinks a {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  padding: 0 10px;
}

.liveWarningStatusPill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  border-radius: 999px;
  background: color-mix(in srgb, #facc15 18%, transparent);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, #facc15 42%, var(--row-line));
  color: #854d0e;
}

.liveWarningDetailTop > * {
  min-width: 0;
  max-width: 100%;
}

.liveWarningSideStack {
  grid-area: side;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.liveWarningDecisionCard > header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.liveWarningDecisionCard > header > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.liveWarningDecisionCard > header span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
}

.liveWarningDecisionCard > header h4 {
  font-size: 20px;
  margin: 0;
  color: var(--text-1);
  font-weight: 950;
  line-height: 1.35;
}

.liveWarningDecisionCard > header em {
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.55;
}

.liveWarningDecisionCard > header > strong,
.liveWarningRecordCard > header span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: #854d0e;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.liveWarningDecisionCard > header > strong.recovering {
  background: color-mix(in srgb, #2563eb 10%, transparent);
  color: #1d4ed8;
}

.liveWarningDecisionCard > header > strong.recovered {
  background: color-mix(in srgb, #22c55e 12%, transparent);
  color: #047857;
}

.liveWarningDecisionCard > header > strong.worsening,
.liveWarningDecisionCard > header > strong.critical {
  background: color-mix(in srgb, #b91c1c 10%, transparent);
  color: #b91c1c;
}

.liveWarningDecisionMetrics {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  display: grid;
  gap: 9px;
}

.liveWarningDecisionMetrics article {
  grid-template-columns: minmax(130px, 0.7fr) minmax(220px, 1.3fr) auto;
  align-items: center;
  gap: 12px;
  border-radius: 9px;
  padding: 11px 12px;
  min-width: 0;
  display: grid;
  border: 1px solid var(--row-line);
  border-left: 3px solid var(--primary);
  background: var(--surface-panel);
}

.liveWarningDecisionMetrics article.critical {
  border-left-color: #b91c1c;
}

.liveWarningDecisionMetrics article.warning {
  border-left-color: #ca8a04;
}

.liveWarningDecisionMetrics article > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.liveWarningDecisionMetrics article > div span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.liveWarningDecisionMetrics article > div strong {
  color: var(--text-1);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.2;
}

.liveWarningDecisionMetrics dl {
  min-width: 0;
  display: grid;
  gap: 6px;
  margin: 0;
}

.liveWarningDecisionMetrics dl > div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
}

.liveWarningDecisionMetrics dt {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  margin: 0;
  line-height: 1.4;
}

.liveWarningDecisionMetrics dd {
  margin: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
  color: var(--text-1);
  font-size: 11px;
  font-weight: 800;
}

.liveWarningDecisionMetrics article > em {
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  color: var(--primary);
  padding: 5px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.liveWarningDecisionImpact {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid var(--row-line);
  border-bottom: 1px solid var(--row-line);
  padding: 10px 0;
}

.liveWarningDecisionImpact strong,
.liveWarningDecisionEvidence strong {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.liveWarningDecisionImpact p {
  margin: 0;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.55;
}

.liveWarningDecisionEvidence {
  display: grid;
  border-top: 1px solid var(--row-line);
  padding-top: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.liveWarningDecisionEvidence > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.liveWarningDecisionEvidence em {
  overflow-wrap: anywhere;
  color: var(--text-1);
  font-size: 12px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.5;
}

.liveWarningTimelineCard header > a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.liveWarningContextGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.liveWarningContextGrid > span {
  min-width: 0;
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--row-line);
  padding-top: 9px;
}

.liveWarningContextGrid strong {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.liveWarningContextGrid em {
  overflow-wrap: anywhere;
  color: var(--text-1);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.liveWarningTimelineRows .liveWarningTimelineStatus {
  width: max-content;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  padding: 4px 8px;
  font-weight: 900;
  white-space: nowrap;
}

.liveWarningDetailWorkbench .liveWarningActionCard h4 {
  margin: 0 0 10px;
  font-size: 14px;
}

.liveWarningRecordCard {
  grid-area: record;
  align-content: start;
  border-radius: 12px;
  border: 1px solid var(--row-line);
  background: var(--control-bg);
  padding: 13px;
  display: grid;
  gap: 10px;
}

.liveWarningRecordCard > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.liveWarningRecordCard h4 {
  margin: 0 0 10px;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 950;
}

.liveWarningRecordCard dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.liveWarningRecordCard dl > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid var(--row-line);
  padding: 9px 0;
}

.liveWarningRecordCard dt {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-3);
  font-weight: 900;
}

.liveWarningRecordCard dd {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-1);
  font-weight: 780;
}

.liveWarningHandleCard {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
  border-left-width: 4px;
  border-radius: 12px;
  padding: 13px 14px;
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, #facc15 45%, var(--row-line));
  border-left: 4px solid #ca8a04;
  background: color-mix(in srgb, #facc15 10%, var(--surface-panel));
}

.liveWarningHandleCard header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.liveWarningEventActions {
  justify-content: flex-end;
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.liveWarningDetailHero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 14px;
  border: 1px solid var(--row-line);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  background: var(--control-bg);
  padding: 14px;
  min-height: 120px;
  grid-template-areas: "cover body"
    "snapshot snapshot";
  align-items: stretch;
  border-left-width: 5px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--text-1) 5%, transparent);
}

.liveWarningConclusionCard {
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--row-line));
  border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 42%),
    var(--control-bg);
  display: grid;
  gap: 14px;
  padding: 14px;
  grid-template-columns: 128px minmax(0, 1fr);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--row-line));
}

@media (max-width: 1440px) {
  .liveWarningKpiStrip,
.liveWarningDetailMetricGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .liveWarningSideStack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .liveWarningDetailHero dl,
.liveWarningContextGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .liveWarningConditionHeader,
.liveWarningTimelineCard header {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .liveWarningDecisionCard > header {
    flex-direction: column;
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .liveWarningDecisionMetrics article {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .liveWarningDecisionImpact,
.liveWarningDecisionEvidence,
.liveWarningSideStack {
    grid-template-columns: 1fr;
  }
}

.liveWarningDetailTop {
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.72fr);
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  display: grid;
}

.liveWarningDetailPanel .liveWarningDetailHero {
  min-height: 0;
  grid-template-columns: 136px minmax(0, 1fr);
  grid-template-areas: "cover body"
    "snapshot snapshot";
  align-items: stretch;
  gap: 14px 16px;
  border-left-width: 5px;
  border-radius: 8px;
  padding: 16px;
}

.liveWarningDetailHero > .liveWarningHeroCover {
  grid-area: cover;
  min-height: 172px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: var(--surface-panel-hover);
  color: var(--text-3);
  height: 172px;
  align-self: start;
  padding: 0;
}

.liveWarningHeroCover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.liveWarningDetailHero > .liveWarningHeroBody {
  grid-area: body;
  min-width: 0;
  align-content: start;
  gap: 10px;
}

.liveWarningDetailHero h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
  line-height: 1.35;
}

.liveWarningDetailHero > .liveWarningHeroSnapshot {
  grid-area: snapshot;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px solid var(--row-line);
  padding-top: 12px;
}

.liveWarningDetailHero .liveWarningHeroSnapshot > span {
  width: auto;
  min-width: 0;
  display: grid;
  gap: 3px;
  border-right: 1px solid var(--row-line);
  border-radius: 0;
  background: transparent;
  color: var(--text-1);
  padding: 0 12px 0 0;
}

.liveWarningDetailHero .liveWarningHeroSnapshot > span:last-child {
  border-right: 0;
}

.liveWarningKpiStrip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.liveWarningKpiStrip > span {
  min-height: 0;
  align-content: center;
  border-radius: 8px;
  padding: 12px 13px;
  box-shadow: none;
  min-width: 0;
  display: grid;
  gap: 6px;
  border: 1px solid var(--row-line);
  background: var(--control-bg);
}

.liveWarningKpiStrip strong {
  overflow-wrap: anywhere;
  font-size: 21px;
  color: var(--text-1);
  font-weight: 950;
  line-height: 1.15;
}

@media (max-width: 1440px) {
  .liveWarningDetailTop {
    grid-template-columns: minmax(0, 1.4fr) minmax(330px, 0.7fr);
  }
}

@media (max-width: 1180px) {
  .liveWarningKpiStrip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .liveWarningDetailPanel .liveWarningDetailHero {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas: "cover body"
      "snapshot snapshot";
    gap: 12px;
    padding: 12px;
  }
}

@media (max-width: 720px) {
  .liveWarningDetailHero > .liveWarningHeroCover {
    min-height: 116px;
    height: 116px;
  }
}

@media (max-width: 720px) {
  .liveWarningDetailHero h3 {
    font-size: 17px;
  }
}

@media (max-width: 720px) {
  .liveWarningDetailHero > .liveWarningHeroSnapshot {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .liveWarningDetailHero .liveWarningHeroSnapshot > span {
    border-right: 0;
    border-bottom: 1px solid var(--row-line);
    padding: 0 0 8px;
  }
}

@media (max-width: 720px) {
  .liveWarningDetailHero .liveWarningHeroSnapshot > span:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 720px) {
  .liveWarningKpiStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .liveWarningKpiStrip > span {
    padding: 10px;
  }
}

@media (max-width: 720px) {
  .liveWarningKpiStrip strong {
    font-size: 18px;
  }
}

.liveWarningTrendCard {
  border: 1px solid var(--row-line);
  border-radius: 12px;
  background: var(--control-bg);
  display: grid;
  gap: 14px;
  padding: 13px;
  grid-area: trend;
}

.liveWarningTrendCard .liveWarningTrendReadHint {
  grid-template-columns: 8px minmax(0, 1fr);
}

.liveWarningTrendCard .liveWarningTrendReadHint > span {
  width: auto;
  min-width: 0;
  display: block;
  grid-column: 2;
  writing-mode: horizontal-tb;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.liveWarningDecisionCard {
  grid-area: decision;
  border-radius: 12px;
  min-width: 0;
  display: grid;
  gap: 13px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--row-line));
  border-left: 4px solid var(--primary);
  background: var(--control-bg);
  padding: 15px;
}

.liveWarningActionCard {
  grid-area: action;
  align-content: start;
  border-radius: 8px;
}

.liveWarningTimelineCard {
  grid-area: timeline;
  border-radius: 12px;
  border: 1px solid var(--row-line);
  background: var(--control-bg);
  padding: 13px;
}

.liveWarningRecordDetails {
  margin-top: 14px;
  border-top: 1px solid var(--row-line);
  padding-top: 12px;
}

.liveWarningRecordDetails summary {
  width: max-content;
  max-width: 100%;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.liveWarningRecordDetails dl {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.liveWarningRecordDetails dl > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  border-left: 2px solid var(--row-line);
  padding: 0 12px;
}

.liveWarningRecordDetails dt {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.5;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
}

.liveWarningRecordDetails dd {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.5;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 780;
}

.liveWarningRecordDetails dd small {
  display: block;
  margin-top: 2px;
  color: var(--warning-strong);
  font-size: 10px;
  font-weight: 750;
}

@media (max-width: 1180px) {
  .liveWarningDetailWorkbench {
    grid-template-columns: 1fr;
    grid-template-areas: "trend"
      "decision"
      "action"
      "timeline";
  }
}

@media (max-width: 1180px) {
  .liveWarningRecordDetails dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }
}

@media (max-width: 720px) {
  .liveWarningStatusFlow {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 720px) {
  .liveWarningStatusFlow::before {
    width: 2px;
    height: auto;
    top: 20px;
    right: auto;
    bottom: 20px;
    left: 19px;
    display: none;
  }
}

@media (max-width: 720px) {
  .liveWarningRecordDetails dl {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
}

@media (max-width: 720px) {
  .liveWarningRecordDetails dl > div {
    border-left: 0;
    border-top: 1px solid var(--row-line);
    padding: 10px 0 0;
  }
}

/* Trend series follow the active theme while custom brands receive a distinct companion hue. */
.liveDetailSection#traffic {
  --live-detail-trend-slot-a: var(--chart-series-a, var(--primary));
  --live-detail-trend-slot-b: var(--chart-series-b, var(--accent));
}

.liveDetailTrendLegend .slotA {
  background: var(--live-detail-trend-slot-a);
}

.liveDetailTrendLegend .slotB {
  background: var(--live-detail-trend-slot-b);
}

.liveDetailDimPill.active.slotA {
  color: var(--live-detail-trend-slot-a);
  border-color: var(--live-detail-trend-slot-a);
  background: color-mix(in srgb, var(--live-detail-trend-slot-a) 12%, var(--surface-panel));
}

.liveDetailDimPill.active.slotB {
  color: var(--live-detail-trend-slot-b);
  border-color: var(--live-detail-trend-slot-b);
  background: color-mix(in srgb, var(--live-detail-trend-slot-b) 12%, var(--surface-panel));
}

.liveDetailTrendChart :is(path, polyline) {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.liveDetailTrendChart :is(path, polyline).slotA {
  stroke: var(--live-detail-trend-slot-a);
}

.liveDetailTrendChart :is(path, polyline).slotB {
  stroke: var(--live-detail-trend-slot-b);
}

.liveDetailAxisLabel.slotA {
  fill: var(--live-detail-trend-slot-a);
}

.liveDetailAxisLabel.slotB {
  fill: var(--live-detail-trend-slot-b);
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/ads.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Recovered member module CSS.
 * Owner: ads / zjr.
 * Source: origin/feat/ads-material-search-zjr.
 * Generated by selector ownership; do not mix other module prefixes here.
 */

.adsSearchPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  align-content: start;
  gap: 18px;
  overflow-anchor: none;
}

.adsSearchPage .cuiResourceBody {
  display: grid;
  align-content: start;
  grid-template-rows: auto minmax(236px, auto);
  gap: 18px;
  overflow-anchor: none;
}

.adsSearchPanel {
  align-self: start;
  overflow-anchor: none;
}

.adsResultsSlot {
  min-height: 236px;
  display: grid;
  align-content: start;
  overflow-anchor: none;
}

.adsResultsSlot > .adsResultPanel {
  min-height: 236px;
  align-self: start;
}

.adsResultPanel .cuiDataListState {
  min-height: 180px;
  display: grid;
  place-items: center;
}

.adsSearchBox {
  overflow: hidden;
}

.adsSearchKeywordInput,
.adsSearchKeywordInput:hover,
.adsSearchKeywordInput:focus,
.adsSearchKeywordInput:active,
.adsSearchBox:focus-within .adsSearchKeywordInput {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}

.adsSearchSubmit,
.adsSearchSubmit:hover,
.adsSearchSubmit:focus,
.adsSearchSubmit:focus-visible,
.adsSearchSubmit:active {
  appearance: none;
  width: 72px;
  height: 100%;
  min-height: 0;
  flex: 0 0 72px;
  align-self: stretch;
  display: grid;
  place-items: center;
  margin: 0;
  border: 0;
  border-radius: 0 999px 999px 0;
  background: var(--primary);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 0;
  box-shadow: none;
  outline: 0;
  transform: none;
}

.adsSearchSubmit svg {
  color: currentColor;
}

.adsSearchResetButton {
  flex: 0 0 auto;
  align-self: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--text-2);
  padding: 0 18px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
}

.commerceSearchFilterPanel .adsSearchResetButton {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--commerce-control-line);
  border-radius: 999px;
  background: var(--commerce-control-bg);
  color: var(--primary);
  box-shadow: var(--commerce-control-shadow);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 900;
}

.commerceSearchFilterPanel .adsDateFilterGroup {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.commerceSearchFilterPanel .adsDatePresetList {
  flex: 0 1 auto;
}

.commerceSearchFilterPanel .adsDateFields {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.commerceSearchFilterPanel .adsDateField {
  position: relative;
  min-width: 224px;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #e4e8ef;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(24, 32, 51, 0.04);
  padding: 0 8px 0 14px;
  cursor: pointer;
}

.commerceSearchFilterPanel .adsDateField:focus-within {
  border-color: color-mix(in srgb, var(--primary) 30%, #e4e8ef);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.commerceSearchFilterPanel .adsDateField input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  cursor: pointer;
  opacity: 0;
  padding: 0;
}

.commerceSearchFilterPanel .adsDateValue,
.commerceSearchFilterPanel .adsDatePlaceholder {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 760;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerceSearchFilterPanel .adsDateIcon {
  color: #667085;
}

.commerceSearchFilterPanel .adsDateValue {
  color: #101828;
}

.commerceSearchFilterPanel .adsDatePlaceholder,
.commerceSearchFilterPanel .adsDateDash {
  color: #98a2b3;
}

.commerceSearchFilterPanel .adsDateDash {
  font-size: 14px;
  font-weight: 900;
}

.commerceSearchFilterPanel .adsPerformanceGrid.shopAdvancedGrid {
  width: min(560px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  gap: 10px;
}

.commerceSearchFilterPanel .adsPerformanceGrid.shopAdvancedGrid label {
  min-width: 0;
}

.commerceSearchFilterPanel .adsPerformanceGrid input {
  text-align: left;
}

/* Seed ads keep their dense filter treatment within the split ads boundary. */
.adsSeedSearchPanel.adsSearchPanel.commerceSearchFilterPanel.cuiSearchFilterPanel {
  --commerce-control-line: var(--line-dark);
  --commerce-control-line-hover: var(--primary-border-strong);
  --commerce-control-focus: var(--focus-ring);
  --commerce-control-bg: var(--control-bg);
  --commerce-control-shadow: none;
  --cui-search-filter-line: var(--line-dark);
  --cui-search-filter-surface: var(--surface-panel);
  --cui-search-filter-text: var(--text-1);
  --cui-search-filter-muted: var(--text-2);
  --cui-search-filter-label-width: 92px;
  gap: 18px;
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: none;
  padding: 18px 22px;
}

.adsSeedSearchPanel .adsSearchTop {
  align-items: center;
  gap: 12px;
}

.adsSeedSearchPanel .adsSearchBox {
  width: auto;
  min-width: 240px;
  max-width: 720px;
  flex: 1 1 520px;
  min-height: 48px;
  border: 1px solid var(--primary-border-strong);
  border-radius: 999px;
  background: var(--control-bg);
  box-shadow: none;
  padding: 0 2px 0 0;
  overflow: hidden;
}

.adsSeedSearchPanel .adsSearchBox:focus-within {
  border-color: var(--primary);
  box-shadow: none;
  outline: 0;
}

.adsSeedSearchPanel .adsSearchKeywordInput {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  min-height: 46px;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: transparent;
  background-image: none !important;
  box-shadow: none;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 800;
  line-height: 46px;
  margin: 0;
  outline: 0;
  padding: 0 18px;
  transform: none;
}

.adsSeedSearchPanel .adsSearchKeywordInput:hover,
.adsSeedSearchPanel .adsSearchKeywordInput:focus,
.adsSeedSearchPanel .adsSearchKeywordInput:focus-visible,
.adsSeedSearchPanel .adsSearchKeywordInput:active {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}

.adsSeedSearchPanel .adsSearchKeywordInput::placeholder {
  color: var(--text-3);
}

.adsSeedSearchPanel .adsSearchSubmit {
  appearance: none;
  min-width: 58px;
  min-height: 44px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--primary);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 12px 24px var(--primary-glow);
  outline: 0;
  padding: 0 18px;
}

.adsSeedSearchPanel .adsSearchSubmit:hover,
.adsSeedSearchPanel .adsSearchSubmit:focus,
.adsSeedSearchPanel .adsSearchSubmit:focus-visible,
.adsSeedSearchPanel .adsSearchSubmit:active {
  border-color: transparent;
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 12px 24px var(--primary-glow);
  outline: 0;
}

.adsSeedSearchPanel .adsSearchSubmit svg {
  color: currentColor;
}

.adsSeedSearchPanel .adsSearchResetButton {
  flex: 0 0 auto;
  align-self: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--text-2);
  box-shadow: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 0 18px;
  white-space: nowrap;
}

.adsSeedSearchPanel .adsSearchResetButton:hover,
.adsSeedSearchPanel .adsSearchResetButton:focus,
.adsSeedSearchPanel .adsSearchResetButton:focus-visible,
.adsSeedSearchPanel .adsSearchResetButton:active {
  border-color: var(--line-dark);
  background: var(--tag-bg);
  color: var(--text-2);
  box-shadow: none;
  outline: 0;
}

.adsSeedSearchPanel .cuiSearchFilterDivider {
  margin: 10px 0 6px;
  background: var(--line-dark);
}

.adsSeedSearchPanel .cuiSearchFilterRow {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 0;
}

.adsSeedSearchPanel .cuiSearchFilterLabel {
  width: auto;
  min-width: 0;
  min-height: 32px;
  justify-content: flex-start;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 900;
  line-height: 32px;
}

.adsSeedSearchPanel .cuiSearchFilterChipList,
.adsSeedSearchPanel .adsDateFields {
  gap: 8px;
}

.adsSeedSearchPanel .cuiSearchFilterChip {
  min-height: 32px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
  line-height: 32px;
  white-space: nowrap;
}

.adsSeedSearchPanel .cuiSearchFilterChip:not(:disabled):hover {
  border-color: transparent;
  background: var(--tag-bg);
  color: var(--text-1);
}

.adsSeedSearchPanel .cuiSearchFilterChipActive,
.adsSeedSearchPanel .cuiSearchFilterChipActive:not(:disabled):hover {
  border-color: transparent;
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 10px 20px var(--primary-glow);
}

.adsSeedSearchPanel .cuiSearchFilterChipBadge {
  top: -8px;
  right: -15px;
  background: #18d8c4;
  color: #ffffff;
  padding: 1px 4px;
  font-size: 10px;
  font-weight: 950;
}

.adsSeedSearchPanel .adsDateFilterGroup {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.adsSeedSearchPanel .adsDateField {
  min-width: 196px;
  display: inline-flex;
}

.adsSeedSearchPanel .adsDateField .cuiDatePickerTrigger {
  width: 100%;
  min-width: 196px;
  min-height: 34px;
  border-color: transparent;
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-1);
  box-shadow: none;
  padding: 0 12px 0 14px;
}

.adsSeedSearchPanel .adsDateField .cuiDatePickerTrigger:hover,
.adsSeedSearchPanel .adsDateField .cuiDatePickerTrigger:focus,
.adsSeedSearchPanel .adsDateField .cuiDatePickerTrigger:focus-visible,
.adsSeedSearchPanel .adsDateField .cuiDatePickerTrigger:active {
  border-color: transparent;
  box-shadow: none;
  outline: 0;
}

.adsSeedSearchPanel .adsDateField .cuiDatePickerValue {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
}

.adsSeedSearchPanel .adsDateField .cuiDatePickerTrigger[data-empty='true'] .cuiDatePickerValue,
.adsSeedSearchPanel .adsDateDash,
.adsSeedSearchPanel .adsDateIcon,
.adsSeedSearchPanel .adsDateField .cuiDatePickerClear {
  color: var(--text-2);
}

.adsSeedSearchPanel .adsPerformanceStack {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adsSeedSearchPanel .adsPerformanceSelectGrid {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.adsSeedSearchPanel .adsPerformanceSelectField {
  flex: 1 1 154px;
  min-width: 144px;
  max-width: 188px;
  height: 40px;
  display: inline-flex;
  --creator-line: var(--line-dark);
  --creator-accent: var(--primary);
  --creator-text: var(--text-1);
  --creator-popover-bg: var(--surface-panel);
  --filter-select-bg: var(--control-bg);
  border-radius: 999px;
  box-shadow: none;
}

.adsSeedSearchPanel .adsPerformanceSelectField .filterSelectTrigger {
  min-height: 40px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--control-bg);
  box-shadow: none;
  padding: 0 12px 0 16px;
}

.adsSeedSearchPanel .adsPerformanceSelectField.open .filterSelectTrigger,
.adsSeedSearchPanel .adsPerformanceSelectField:focus-within .filterSelectTrigger {
  border-color: var(--primary-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.adsSeedSearchPanel .adsPerformanceSelectField .filterSelectSelectedText {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.adsSeedSearchPanel .adsPerformanceSelectField .filterSelectLabel,
.adsSeedSearchPanel .adsPerformanceSelectField .filterSelectValue {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
}

.adsSeedSearchPanel .adsPerformanceSelectField .filterSelectLabel {
  flex: 0 0 auto;
}

.adsSeedSearchPanel .adsPerformanceSelectField .filterSelectValue {
  flex: 1 1 auto;
  font-weight: 850;
}

.adsPerformanceSelectMenu.filterSelectMenu {
  width: max(100%, 220px);
  max-height: 288px;
  border-color: var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.14);
}

.adsPerformanceSelectMenu .filterSelectOption {
  min-height: 34px;
  border-radius: 6px;
}

.adsPerformanceSelectMenu .filterSelectOption,
.adsPerformanceSelectMenu .filterSelectOption:hover,
.adsPerformanceSelectMenu .filterSelectOption.active,
.adsPerformanceSelectMenu .filterSelectOption.selected {
  box-sizing: border-box;
  padding: 0 9px 0 10px;
}

.adsPerformanceSelectMenu .filterSelectOptionLabel {
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
}

.adsSeedSearchPanel .adsSpecialFilterRow {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.adsSeedSearchPanel .adsSpecialToggle,
.adsSeedSearchPanel .adsViewedToggle {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 0;
}

.adsSeedSearchPanel .adsSpecialToggle {
  cursor: pointer;
}

/* Lifecycle filters use a radio treatment, so shared chip hover/active styles
 * must not add pill padding or change their dimensions. */
.adsSeedSearchPanel .adsSpecialToggle,
.adsSeedSearchPanel .adsSpecialToggle:not(:disabled):hover,
.adsSeedSearchPanel .adsSpecialToggle.cuiSearchFilterChipActive,
.adsSeedSearchPanel .adsSpecialToggle.cuiSearchFilterChipActive:not(:disabled):hover {
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-1);
}

.adsSeedSearchPanel .adsSpecialToggle::before {
  width: 16px;
  height: 16px;
  content: '';
  display: inline-block;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--control-bg);
  box-sizing: border-box;
}

.adsSeedSearchPanel .adsSpecialToggleActive::before {
  border-color: var(--primary);
  background: radial-gradient(circle at center, var(--primary) 0 42%, transparent 47%);
}

.adsSeedSearchPanel .adsViewedToggle input {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: var(--control-bg);
  box-shadow: none;
  cursor: pointer;
  margin: 0;
}

.adsSeedSearchPanel .adsViewedToggle input:checked {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 0 0 3px var(--control-bg);
}

@media (max-width: 760px) {
  .adsSeedSearchPanel.adsSearchPanel.commerceSearchFilterPanel.cuiSearchFilterPanel {
    padding: 16px;
  }

  .adsSeedSearchPanel .cuiSearchFilterRow {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .adsSeedSearchPanel .adsSearchTop {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .adsSeedSearchPanel .adsSearchBox {
    flex-basis: 100%;
  }

  .adsSeedSearchPanel .adsDateField,
  .adsSeedSearchPanel .adsDateField .cuiDatePickerTrigger,
  .adsSeedSearchPanel .adsPerformanceSelectField {
    width: 100%;
    max-width: none;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/media.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Recovered member module CSS.
 * Owner: media / lhx.
 * Source: origin/feat/media-source-clean-lhx.
 * Generated by selector ownership; do not mix other module prefixes here.
 */

.mediaPagination {
  width: 100%;
  justify-content: flex-end;
}

.mediaPagination .cuiPaginationInfo {
  margin-right: auto;
}

.mediaPagination .cuiPaginationActions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hotVideoPage {
  --hot-video-accent: var(--primary);
  --hot-video-soft: color-mix(in srgb, var(--primary) 12%, transparent);
  --hot-video-border: var(--line-dark);
  --hot-video-panel: var(--surface-panel);
  --hot-video-panel-strong: var(--surface-panel-strong);
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 14px;
  padding: 22px;
  color: var(--text-1);
}

.hotVideoPage > .cuiResourceMetrics {
  display: none;
}

.hotVideoTitleBar h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 0;
}

.hotVideoTitleBar {
  padding: 0 0 14px;
}

.hotVideoFilterPanel,
.hotVideoListPanel {
  min-width: 0;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--hot-video-panel);
  box-shadow: var(--shadow-light);
}

.hotVideoFilterPanel {
  display: grid;
  gap: 16px;
  padding: 22px 24px 24px;
}

.hotVideoSearch {
  width: min(610px, 100%);
  height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--control-bg);
}

.hotVideoSearch input {
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  padding: 0 18px;
  font-size: 14px;
  font-weight: 820;
}

.hotVideoSearch input::placeholder {
  color: var(--text-3);
}

.hotVideoSearch button {
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--hot-video-accent);
  color: #ffffff;
}

.hotVideoDivider {
  height: 1px;
  background: var(--hot-video-border);
}

.hotVideoFilterRow,
.hotVideoConditionRow {
  min-width: 0;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.hotVideoFilterRow strong,
.hotVideoConditionRow strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 920;
  line-height: 30px;
  text-align: left;
}

.hotVideoFilterRow > div,
.hotVideoConditionRow {
  min-width: 0;
}

.hotVideoFilterRow > div {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 18px;
}

.hotVideoFilterRow button {
  position: relative;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 760;
}

.hotVideoFilterRow button.active {
  background: var(--hot-video-accent);
  color: #ffffff;
  padding-inline: 17px;
}

.hotVideoFilterRow .hotVideoExpand {
  margin-left: auto;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  padding-inline: 14px;
}

.hotVideoFilterRow .hotVideoExpand svg {
  transition: transform 160ms ease;
}

.hotVideoFilterRow .hotVideoExpand.expanded svg {
  transform: rotate(180deg);
}

.hotVideoConditionRow {
  display: grid;
  grid-template-columns: 112px repeat(4, minmax(0, 1fr)) minmax(170px, 0.9fr);
  align-items: stretch;
  gap: 10px;
  padding-left: 0;
}

.hotVideoConditionRow strong {
  width: auto;
  margin-left: 0;
}

.hotVideoConditionRow select {
  min-width: 128px;
  height: 34px;
  border: 1px solid var(--hot-video-border);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-1);
  outline: 0;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 820;
}

.hotVideoRangeFilter {
  position: relative;
  min-width: 0;
}

.hotVideoRangeFilter > button {
  width: 100%;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--hot-video-border);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text-1);
  padding: 0 12px 0 14px;
  font-size: 13px;
  font-weight: 820;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-1) 5%, transparent);
}

.hotVideoRangeFilter > button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotVideoRangeFilter > button svg {
  flex: 0 0 auto;
  color: var(--text-2);
  transition: transform 160ms ease;
}

.hotVideoRangeFilter.open > button {
  border-color: var(--hot-video-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot-video-accent) 12%, transparent);
}

.hotVideoRangeFilter.open > button svg {
  transform: rotate(180deg);
}

.hotVideoRangeMenu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  width: 240px;
  overflow: hidden;
  border: 1px solid var(--hot-video-border);
  border-radius: 10px;
  background: var(--surface-panel);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--text-1) 16%, transparent);
  padding: 6px;
}

.hotVideoRangeMenu > button {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-1);
  padding: 0 11px;
  font-size: 13px;
  font-weight: 760;
  text-align: left;
  gap: 8px;
}

.hotVideoRangeMenu > button:hover,
.hotVideoRangeMenu > button.active {
  background: color-mix(in srgb, var(--hot-video-accent) 9%, var(--surface-panel));
  color: var(--hot-video-accent);
}

.hotVideoRangeMenu > button.active .hotVideoMultiSelectCheck {
  border-color: var(--hot-video-accent);
  background: var(--hot-video-accent);
  color: #ffffff;
}

.hotVideoRangeCustom {
  display: grid;
  gap: 7px;
  margin-top: 6px;
  border-top: 1px solid var(--hot-video-border);
  padding: 9px 5px 4px;
}

.hotVideoRangeCustom > span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 860;
}

.hotVideoRangeCustom > div:not(.hotVideoRangeActions) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

.hotVideoRangeCustom input {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--hot-video-border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-1);
  padding: 0 7px;
  font-size: 12px;
  font-weight: 760;
  outline: 0;
}

.hotVideoRangeCustom input:focus {
  border-color: var(--hot-video-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot-video-accent) 12%, transparent);
}

.hotVideoRangeCustom em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
  text-align: center;
}

.hotVideoRangeActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.hotVideoRangeActions button {
  height: 32px;
  border: 1px solid var(--hot-video-border);
  border-radius: 7px;
  background: var(--control-bg);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 880;
}

.hotVideoRangePopover {
  --hot-video-accent: var(--cui-primary, var(--primary));
  --hot-video-border: var(--cui-line, var(--line-dark));
  width: 260px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.hotVideoRangePopover .hotVideoRangeMenu {
  position: static;
  width: 100%;
}

.hotVideoRangePopover .hotVideoRangeActions .cuiButtonPrimary,
.hotVideoRangePopover .hotVideoRangeActions .cuiButtonPrimary:not(:disabled):hover {
  border-color: var(--cui-primary, var(--primary));
  background: var(--cui-primary, var(--primary));
  color: var(--cui-button-primary-text, #ffffff);
}

.hotVideoRangeOption {
  min-height: 34px;
  border-radius: 7px;
  padding: 6px 9px;
}

.hotVideoRangeOption:hover {
  background: color-mix(in srgb, var(--hot-video-accent) 9%, var(--surface-panel));
}

.hotVideoRangeOption .cuiChoiceLabel {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 760;
}

.hotVideoRangeCustom .cuiNumberRangeInput {
  width: 100%;
  background: var(--control-bg);
}

.hotVideoRangeActions button:last-child {
  border-color: var(--hot-video-accent);
  background: var(--hot-video-accent);
  color: #ffffff;
}

.hotVideoConditionRow > select {
  min-width: 170px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-1) 5%, transparent);
}

.hotVideoListPanel {
  display: grid;
  gap: 12px;
  padding: 0;
  overflow: hidden;
}

.hotVideoListToolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--hot-video-border);
  padding: 14px 22px;
}

.hotVideoListToolbar > span,
.hotVideoListToolbar > div > span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 820;
}

.hotVideoListToolbar > div,
.hotVideoPeriod {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hotVideoPeriod button,
.hotVideoExport {
  min-height: 32px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 950;
}

.hotVideoPeriod button.active,
.hotVideoExport {
  border-color: var(--hot-video-accent);
  background: var(--hot-video-accent);
  color: #ffffff;
}

.hotVideoExport {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Hot-video ranking shell: keep the shared controls, table and pagination visually aligned. */
.hotVideoTitleBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 2px 4px;
}

.hotVideoTitleActions,
.hotVideoSearchRow,
.hotVideoListHeading,
.hotVideoListTools {
  min-width: 0;
  display: flex;
  align-items: center;
}

.hotVideoTitleActions {
  flex: 0 0 auto;
  gap: 8px;
}

.hotVideoSummary {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--hot-video-panel);
  box-shadow: var(--shadow-light);
}

.hotVideoSummary .hotVideoSummaryCard {
  min-height: 102px;
  gap: 8px;
  border: 0;
  border-right: 1px solid var(--hot-video-border);
  border-radius: 0;
  background: var(--hot-video-panel);
  box-shadow: none;
  padding: 17px 22px;
}

.hotVideoSummary .hotVideoSummaryCard:last-child {
  border-right: 0;
}

.hotVideoSummary .hotVideoSummaryCard::before {
  display: none;
}

.hotVideoSummary .cuiMetricCardHeader {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.hotVideoSummary .cuiMetricCardIcon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.hotVideoSummary .cuiMetricCardValue {
  font-size: 24px;
}

.hotVideoFilterPanel {
  gap: 0;
  padding: 0;
}

.hotVideoSearchRow {
  gap: 10px;
  padding: 14px 18px;
}

.hotVideoSearchRow .hotVideoSearch {
  width: min(760px, 70%);
  height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.hotVideoSearchRow .hotVideoSearch input {
  height: 38px;
  border: 1px solid var(--hot-video-border);
  border-radius: 7px;
  background: var(--control-bg);
  padding: 0 13px;
  font-weight: 720;
}

.hotVideoSearchRow .hotVideoSearch .cuiButton {
  width: auto;
  height: 38px;
  min-height: 38px;
  display: inline-flex;
  border-radius: 7px;
  padding-inline: 15px;
}

.hotVideoSearchSupport {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotVideoFilterPanel .hotVideoDivider {
  background: var(--hot-video-border);
}

.hotVideoFilterPanel .hotVideoFilterRow {
  border-top: 1px solid var(--hot-video-border);
  padding: 10px 18px;
}

.hotVideoFilterPanel .hotVideoDivider + .hotVideoFilterRow {
  border-top: 0;
}

.hotVideoFilterPanel .hotVideoConditionRow {
  border-top: 1px solid var(--hot-video-border);
  padding: 12px 18px;
}

.hotVideoActiveFilters {
  min-width: 0;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--hot-video-border);
  background: color-mix(in srgb, var(--surface-muted) 52%, transparent);
  padding: 10px 18px;
}

.hotVideoActiveFilters > strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 920;
  line-height: 30px;
  text-align: left;
}

.hotVideoActiveFilterList {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.mediaRankingFilterActions .hotVideoActiveFilterList > span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.cuiBadge.hotVideoActiveFilterBadge {
  min-height: 26px;
  border-color: color-mix(in srgb, var(--hot-video-accent) 34%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--hot-video-accent) 11%, transparent);
  color: var(--hot-video-accent);
  font-size: 12px;
}

.hotVideoActiveFilterBadge::before {
  display: none;
}

.hotVideoActiveFilters .mediaSavedFilterBar {
  margin: 0;
}

.hotVideoActiveFilters .mediaSavedFilterBar > button {
  min-height: 32px;
  padding-inline: 10px;
  font-size: 12px;
}

.hotVideoClearFilters {
  white-space: nowrap;
}

.hotVideoListToolbar {
  min-height: 58px;
  padding: 10px 18px;
}

.hotVideoListHeading {
  order: 1;
  gap: 10px;
}

.hotVideoListToolbar > .mediaDataInsightTrigger {
  order: 2;
}

.hotVideoListHeading h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 920;
}

.hotVideoListHeading span,
.hotVideoListTools > span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.hotVideoListTools {
  order: 3;
  margin-left: auto;
  gap: 9px;
}

.mediaDataInsightTrigger {
  flex: 0 0 auto;
  white-space: nowrap;
}

.mediaDataInsightDialog.cuiDialogContent {
  width: min(760px, calc(100vw - 32px));
}

.mediaDataInsightDialog .cuiDialogBody {
  padding: 20px;
}

.mediaDataInsightGrid.cuiMetricGrid {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--cui-line);
  border-radius: 8px;
}

.mediaDataInsightGrid .mediaDataInsightCard {
  min-height: 116px;
  border: 0;
  border-right: 1px solid var(--cui-line);
  border-radius: 0;
  box-shadow: none;
  padding: 20px;
}

.mediaDataInsightGrid .mediaDataInsightCard:last-child {
  border-right: 0;
}

.mediaDataInsightState {
  min-height: 116px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 760;
}

.mediaDataInsightState.error {
  color: var(--danger);
}

.hotMusicAiInsightTrigger {
  border-color: color-mix(in srgb, var(--cui-primary, var(--primary)) 32%, var(--cui-line));
  color: var(--cui-primary, var(--primary));
}

.hotMusicAiInsightDialog.cuiDialogContent {
  width: min(1120px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
}

.hotMusicAiInsightDialog .cuiDialogBody {
  padding: 0;
}

.hotMusicAiInsightLoading {
  min-height: 420px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 32px;
  text-align: center;
}

.hotMusicAiInsightLoading > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cui-primary, var(--primary)) 28%, var(--cui-line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--cui-primary, var(--primary)) 9%, var(--surface));
  color: var(--cui-primary, var(--primary));
  animation: hotMusicAiInsightSpin 1.15s linear infinite;
}

.hotMusicAiInsightLoading strong {
  color: var(--text-1);
  font-size: 16px;
  font-weight: 880;
}

.hotMusicAiInsightLoading small {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 680;
}

@keyframes hotMusicAiInsightSpin {
  to { transform: rotate(360deg); }
}

.hotMusicAiInsightReport {
  display: grid;
}

.hotMusicAiInsightHero {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--cui-line);
  background: color-mix(in srgb, var(--cui-primary, var(--primary)) 5%, var(--surface));
  padding: 20px 24px;
}

.hotMusicAiInsightHero > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--cui-primary, var(--primary));
  color: #ffffff;
}

.hotMusicAiInsightHero > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.hotMusicAiInsightHero small {
  color: var(--cui-primary, var(--primary));
  font-size: 11px;
  font-weight: 850;
}

.hotMusicAiInsightHero strong {
  overflow-wrap: anywhere;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 920;
  letter-spacing: 0;
}

.hotMusicAiInsightHero p {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
}

.hotMusicAiInsightMetrics.cuiMetricGrid {
  gap: 0;
  border-bottom: 1px solid var(--cui-line);
}

.hotMusicAiInsightMetrics .cuiMetricCard {
  min-height: 104px;
  border: 0;
  border-right: 1px solid var(--cui-line);
  border-radius: 0;
  box-shadow: none;
  padding: 18px 22px;
}

.hotMusicAiInsightMetrics .cuiMetricCard:last-child {
  border-right: 0;
}

.hotMusicAiInsightMain {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

.hotMusicAiInsightNarrative {
  min-width: 0;
  padding: 22px 26px 26px;
}

.hotMusicAiInsightNarrative h2 {
  margin: 22px 0 8px;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
}

.hotMusicAiInsightNarrative h2:first-child {
  margin-top: 0;
}

.hotMusicAiInsightNarrative p,
.hotMusicAiInsightNarrative li {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.72;
}

.hotMusicAiInsightNarrative p {
  margin: 0;
}

.hotMusicAiInsightNarrative ol,
.hotMusicAiInsightNarrative ul {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding-left: 20px;
}

.hotMusicAiInsightNarrative strong {
  color: var(--text-1);
}

.hotMusicAiInsightWatchlist {
  min-width: 0;
  align-self: stretch;
  border-left: 1px solid var(--cui-line);
  background: var(--surface-muted);
  padding: 20px;
}

.hotMusicAiInsightWatchlist > header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.hotMusicAiInsightWatchlist > header > span {
  width: 32px;
  height: 32px;
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--cui-primary, var(--primary)) 10%, var(--surface));
  color: var(--cui-primary, var(--primary));
}

.hotMusicAiInsightWatchlist header > div,
.hotMusicAiInsightWatchlist > div {
  min-width: 0;
  display: grid;
}

.hotMusicAiInsightWatchlist header strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 880;
}

.hotMusicAiInsightWatchlist header small {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 680;
}

.hotMusicAiLifecycleList {
  display: grid;
  gap: 9px;
  margin: 0 0 18px;
}

.hotMusicAiLifecycleList > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.hotMusicAiLifecycleList dt,
.hotMusicAiLifecycleList dd {
  margin: 0;
}

.hotMusicAiLifecycleList dt {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 760;
}

.hotMusicAiLifecycleList dd {
  min-width: 0;
  height: 20px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface);
}

.hotMusicAiLifecycleList dd i {
  height: 100%;
  display: block;
  min-width: 2px;
  background: color-mix(in srgb, var(--cui-primary, var(--primary)) 28%, var(--surface));
}

.hotMusicAiLifecycleList dd span {
  position: absolute;
  inset: 0 7px 0 auto;
  display: grid;
  align-items: center;
  color: var(--text-1);
  font-size: 10px;
  font-weight: 850;
}

.hotMusicAiInsightWatchlist > h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 880;
  letter-spacing: 0;
}

.hotMusicAiInsightWatchlist article {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--cui-line);
  padding: 13px 0;
}

.hotMusicAiInsightWatchlist article > b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--surface);
  color: var(--cui-primary, var(--primary));
  font-size: 11px;
  font-weight: 900;
}

.hotMusicAiInsightWatchlist article > span,
.hotMusicAiInsightWatchlist article > em {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.hotMusicAiInsightWatchlist article strong,
.hotMusicAiInsightWatchlist article small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotMusicAiInsightWatchlist article strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 820;
}

.hotMusicAiInsightWatchlist article small {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 680;
}

.hotMusicAiInsightWatchlist article > em {
  color: var(--success, #0f937d);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.hotMusicAiInsightFooter {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  border-top: 1px solid var(--cui-line);
  background: var(--surface-muted);
  padding: 11px 24px;
}

.hotMusicAiInsightFooter span {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 680;
}

@media (max-width: 820px) {
  .hotMusicAiInsightHero {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .hotMusicAiInsightHero > .cuiBadge {
    grid-column: 2;
    justify-self: start;
  }

  .hotMusicAiInsightMetrics.cuiMetricGrid,
  .hotMusicAiInsightMain {
    grid-template-columns: minmax(0, 1fr);
  }

  .hotMusicAiInsightMetrics .cuiMetricCard {
    border-right: 0;
    border-bottom: 1px solid var(--cui-line);
  }

  .hotMusicAiInsightWatchlist {
    border-top: 1px solid var(--cui-line);
    border-left: 0;
  }
}

.aiCommerceDateToolbar {
  min-height: 66px;
}

.aiCommerceDateControl {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.aiCommerceDateControl > strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.aiCommerceDateControl .cuiDatePicker {
  width: 184px;
  flex: 0 0 184px;
}

.aiCommerceDateControl .cuiDatePickerTrigger {
  width: 100%;
}

.aiCommerceFilterPanel .hotVideoFilterRow {
  grid-template-columns: 126px minmax(0, 1fr);
}

.aiCommerceFilterPanel .hotVideoFilterRow > div {
  gap: 10px 24px;
  padding-right: 8px;
}

.aiCommerceRankPanel.hotVideoListPanel {
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.aiCommerceRankToolbar {
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--hot-video-border);
  background: color-mix(in srgb, var(--surface-muted) 52%, transparent);
  padding: 10px 18px;
}

.aiCommerceRankToolbar > span {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.aiCommerceRankPanel .aiCommerceTabs {
  min-width: 0;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--hot-video-border);
  border-radius: 7px;
  background: var(--control-bg);
  padding: 3px;
}

.aiCommerceRankPanel .aiCommerceTabs button {
  min-height: 32px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-2);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.aiCommerceRankPanel .aiCommerceTabs button[aria-pressed='true'],
.aiCommerceRankPanel .aiCommerceTabs button.active {
  border-color: transparent;
  background: var(--cui-primary, var(--hot-video-accent));
  color: #ffffff;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--cui-primary, var(--hot-video-accent)) 24%, transparent);
}

.aiCommerceRankBody {
  min-width: 0;
  display: grid;
  gap: 18px;
  padding: 18px;
}

.aiCommerceState {
  min-height: 280px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 760;
  text-align: center;
}

.aiCommerceState.error {
  color: var(--danger);
}

.aiCommercePage.cuiResourcePage {
  width: 100%;
  min-width: 0;
  gap: 0;
  padding: 0;
  transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width;
}

.aiCommercePage.cuiResourcePage > .cuiResourceFilters,
.aiCommercePage.cuiResourcePage > .cuiResourceBody {
  display: contents;
}

.aiCommercePage > .cuiResourceHeader {
  display: none;
}

.aiCommerceFilterPanel {
  gap: 0;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 0;
}

.aiCommerceFilterPanel .hotVideoSearchRow {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto auto auto;
}

.aiCommerceFilterPanel .hotVideoSearch {
  width: 100%;
}

.aiCommerceFilterTrigger {
  min-height: 38px;
  white-space: nowrap;
}

.aiCommercePage .aiCommerceRankPanel {
  border-radius: 0 0 8px 8px;
}

.aiCommercePage .companyIntroCard {
  margin-top: 14px;
}

.aiCommerceDrawerDateControl .cuiDatePicker,
.aiCommerceDrawerDateControl .cuiDatePickerTrigger {
  width: 100%;
}

.aiCommerceGrid {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

@media (min-width: 1101px) {
  .aiCommercePage.aiCommercePageFilterOpen {
    width: calc(100% - 480px);
    min-width: 0;
  }
}

@media (max-width: 1380px) {
  .aiCommerceFilterPanel .hotVideoSearchRow {
    grid-template-columns: minmax(260px, 1fr) auto auto auto;
  }
}

@media (max-width: 760px) {
  .aiCommerceFilterPanel .hotVideoSearchRow {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.hotVideoPeriod .cuiButton {
  min-height: 30px;
  border-radius: 6px;
  padding-inline: 10px;
}

.hotVideoTablePanel {
  min-width: 0;
  --commerce-list-row-height: 150px;
  --commerce-list-head-height: 62px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListTableRow:not(.cuiDataListTableHead) {
  min-height: 150px;
  height: 150px;
  border-bottom: 1px solid var(--commerce-list-line);
}

.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListTableRow:last-child {
  border-bottom: 0;
}

.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListTableCell,
.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListSortedCell {
  min-height: 150px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListTableHead {
  min-height: 58px;
  border-bottom: 1px solid var(--commerce-list-line);
  background: var(--surface-muted);
}

.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListTableHeadCell {
  min-height: 58px;
  background: var(--surface-muted);
}

.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListSortableHead.active {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-muted));
}

.hotVideoTable .cuiDataListTableHead,
.hotVideoTable .cuiDataListTableRow {
  min-height: inherit;
}

.hotVideoTable .cuiDataListTableRow:not(.cuiDataListTableHead) {
  align-items: stretch;
}

.hotVideoTable .cuiDataListTableHead > *,
.hotVideoTable .cuiDataListTableRow > * {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}

.hotVideoTable .cuiDataListTableHead > *:first-child,
.hotVideoTable .cuiDataListTableRow > *:first-child,
.hotVideoTable .cuiDataListTableHead > *:nth-child(2),
.hotVideoTable .cuiDataListTableRow > *:nth-child(2) {
  justify-content: flex-start;
}

.hotVideoTable .cuiDataListSortableHead.active,
.hotVideoTable .cuiDataListSortedCell.active {
  color: var(--hot-video-accent);
}

.hotVideoTable .cuiDataListSortedCell.active {
  background: var(--hot-video-panel-strong);
}

.hotVideoTable .cuiDataListSortedCell.active,
.hotVideoTable .cuiDataListSortedCell.active * {
  color: var(--hot-video-accent);
}

.hotVideoTable .cuiDataListSortableHead {
  gap: 5px;
  color: var(--text-1);
  white-space: nowrap;
  text-align: center;
}

.hotVideoTable .cuiDataListSortableHead > em {
  width: 20px;
  height: 20px;
  display: inline-grid;
  flex: 0 0 20px;
  place-items: center;
  border-radius: 5px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  font-size: 0;
  font-style: normal;
}

.hotVideoTable .cuiDataListSortableHead > em svg {
  width: 13px;
  height: 13px;
}

.hotVideoTable .cuiDataListTableHead .mediaMetricHeader {
  width: max-content;
  max-width: 100%;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 0;
  white-space: nowrap;
}

.hotVideoTable .cuiDataListTableHead .mediaMetricHeader > span,
.hotVideoTable .cuiDataListTableHead .mediaMetricHeader > .cuiTooltipWrap {
  padding: 0;
}

.hotVideoTable .cuiDataListTableHead .mediaMetricHeader > span:first-child {
  min-width: max-content;
  flex: 0 0 auto;
  white-space: nowrap;
}

.hotVideoTable .cuiDataListTableHead .mediaMetricHeader > .cuiTooltipWrap {
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
}

.hotVideoTable .cuiDataListTableHead .mediaMetricHeaderHelp {
  box-sizing: border-box;
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  margin: 0;
  padding: 0;
}

.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListTableHead .hotVideoPotentialMetricHeader {
  width: max-content;
  max-width: 100%;
  display: inline-grid;
  grid-template-columns: max-content 16px;
  align-items: center;
  column-gap: 5px;
  padding: 0;
  line-height: 1;
}

.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListTableHead .hotVideoPotentialMetricHeader > span:first-child {
  display: block;
  padding: 0;
  line-height: 20px;
  white-space: nowrap;
}

.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListTableHead .hotVideoPotentialMetricHeader > .cuiTooltipWrap {
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding: 0;
  line-height: 0;
}

.commerceDataListPanel.hotVideoTablePanel .hotVideoTable .cuiDataListTableHead .hotVideoPotentialMetricHeader .mediaMetricHeaderHelp {
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  margin: 0;
  padding: 0;
  line-height: 14px;
  transform: none;
}

.hotVideoTable .cuiDataListSortableHead > span {
  white-space: nowrap;
}

.hotVideoContentCell,
.hotVideoCreatorCell,
.hotVideoActions {
  min-width: 0;
  display: flex;
  align-items: center;
}

.hotVideoContentCell {
  gap: 18px;
  align-self: stretch;
}

.hotVideoCover {
  position: relative;
  width: 64px !important;
  height: 114px !important;
  flex: 0 0 64px !important;
  min-width: 64px;
  max-width: 64px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--tag-bg);
}

.hotVideoCover.cuiMediaThumbnail {
  aspect-ratio: auto;
}

.hotVideoCover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hotVideoCreatorCell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hotVideoCreatorAvatar {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
}

.hotVideoCover b {
  position: absolute;
  top: 6px;
  left: 4px;
  border-radius: 5px;
  background: var(--danger);
  color: #ffffff;
  padding: 3px 5px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.hotVideoContentCell div,
.hotVideoCreatorCell div {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.hotVideoContentCell strong,
.hotVideoCreatorCell strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotVideoTitleLine {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hotVideoCommerceBadge {
  min-height: 20px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--hot-video-accent) 22%, var(--hot-video-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--hot-video-accent) 8%, var(--surface));
  color: var(--hot-video-accent);
  padding: 0 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.hotVideoContentCell span,
.hotVideoCreatorCell span {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotVideoContentCell > .hotVideoRank {
  width: 28px;
  min-width: 28px;
  flex: 0 0 28px;
  overflow: visible;
  color: var(--hot-video-accent);
  font-size: 13px;
  font-weight: 950;
  text-align: center;
}

.hotVideoCreatorCell {
  gap: 14px;
}

.hotVideoCreatorLink {
  color: inherit;
  text-decoration: none;
}

.hotVideoCreatorLink:hover strong {
  color: var(--hot-video-accent);
}

.hotVideoCreatorCell img {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 999px;
}

.hotVideoCreatorCell em {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--text-2);
  padding: 0 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
}

.hotVideoCountryFlag {
  width: 18px !important;
  height: 13px !important;
  flex: 0 0 auto;
  margin-left: 5px;
  border-radius: 2px !important;
  object-fit: cover;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-1) 10%, transparent);
  vertical-align: -2px;
}

.hotVideoActions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  padding-inline: 8px !important;
}

.hotVideoActions button,
.hotVideoActions a {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  flex: 0 0 30px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
  text-decoration: none;
}

.hotVideoShareAction {
  flex: 0 0 30px;
  position: relative;
}

.hotVideoShareMenu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
}

.hotVideoShareBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.36);
}

.hotVideoSharePanel {
  position: relative;
  width: min(520px, calc(100vw - 40px));
  padding: 20px 22px 22px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.hotVideoSharePanel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.hotVideoSharePanel header strong {
  font-size: 16px;
  color: #111827;
}

.hotVideoSharePanel header button {
  width: 30px;
  height: 30px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  display: inline-grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
}

.hotVideoShareChoices {
  display: grid;
  grid-template-columns: repeat(4, minmax(84px, 1fr));
  gap: 14px;
}

.hotVideoShareChoices button {
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 100px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  color: #111827;
  text-align: center;
}

.hotVideoShareChoices button.active {
  border-color: #8b76ff;
  background: #f1edff;
}

.hotVideoShareChoices button:hover {
  border-color: #b8a6ff;
  background: #f4f0ff;
  transform: translateY(-1px);
}

.hotVideoShareChoices span {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.hotVideoShareChoices span.wechat {
  background: #18b357;
}

.hotVideoShareChoices span.qq {
  background: #2f83f7;
}

.hotVideoShareChoices span.tiktok {
  background: #111827;
}

.hotVideoShareChoices span.copy {
  background: #6d5dfc;
}

.hotVideoShareChoices em {
  max-width: 100%;
  color: #475569;
  font-size: 13px;
  font-style: normal;
  line-height: 1.25;
  white-space: normal;
}

.hotVideoShareDetail {
  margin-top: 18px;
  padding: 14px;
  display: grid;
  grid-template-columns: 156px 1fr;
  gap: 16px;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}

.hotVideoShareDetail img {
  width: 156px;
  height: 156px;
  display: block;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
}

.hotVideoShareDetail strong {
  display: block;
  margin-bottom: 6px;
  color: #111827;
  font-size: 14px;
}

.hotVideoShareDetail p {
  margin: 0 0 12px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.hotVideoShareDetail div div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hotVideoShareDetail button {
  width: auto;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #6d5dfc;
  color: #ffffff;
}

.hotVideoShareDetail button + button {
  border: 1px solid #d8dcef;
  background: #ffffff;
  color: #374151;
}

@media (max-width: 560px) {
  .hotVideoShareChoices {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .hotVideoShareDetail {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .hotVideoShareDetail div div {
    justify-content: center;
  }
}

.hotMusicFilterPanel {
  gap: 0;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.hotMusicPage.cuiResourcePage {
  width: 100%;
  gap: 0;
  padding: 0;
  transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width;
}

.hotMusicPage.cuiResourcePage > .cuiResourceFilters,
.hotMusicPage.cuiResourcePage > .cuiResourceBody {
  display: contents;
}

.hotMusicPage .hotMusicListPanel {
  border-radius: 0 0 8px 8px;
}

.hotMusicPage .companyIntroCard {
  margin-top: 14px;
}

.hotMusicPage > .cuiResourceHeader {
  display: none;
}

.hotMusicPage .hotVideoSearchRow {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto auto auto auto;
}

.hotMusicPage .hotVideoSearchRow .hotVideoSearch {
  width: 100%;
}

.hotMusicInlineFilters {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
}

.hotMusicInlineFilters > strong {
  flex: 0 0 auto;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
}

.hotMusicInlineFilters .hotVideoActiveFilterList {
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  overflow: hidden;
}

.hotMusicInlineFilters .hotVideoActiveFilterBadge {
  flex: 0 0 auto;
}

.hotMusicFilterOverview {
  display: none !important;
}

.hotMusicFilterOverflow {
  width: 28px;
  height: 26px;
  flex: 0 0 28px;
  border: 1px solid color-mix(in srgb, var(--hot-video-accent) 34%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--hot-video-accent) 11%, transparent);
  color: var(--hot-video-accent);
  padding: 0;
  font-size: 14px;
  font-weight: 900;
  line-height: 22px;
  cursor: help;
}

.hotMusicFilterMeasure {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: flex;
  gap: 6px;
  visibility: hidden;
  pointer-events: none;
}

.hotMusicFilterTrigger {
  flex: 0 0 auto;
  min-height: 38px;
  white-space: nowrap;
}

@media (min-width: 1101px) {
  .hotMusicPage.hotMusicPageFilterOpen {
    width: calc(100% - 480px);
    min-width: 0;
  }
}

@media (max-width: 1380px) {
  .hotMusicPage .hotVideoSearchRow {
    grid-template-columns: minmax(260px, 1fr) auto auto auto auto;
  }
}

.cuiDrawerOverlay.hotMusicFilterDrawerOverlay {
  background: transparent !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
}

body:has(.hotMusicFilterDrawer) {
  overflow-y: auto !important;
  padding-right: 0 !important;
}

.hotMusicFilterDrawer.cuiDrawer {
  --hot-video-accent: var(--cui-primary, var(--primary));
  --hot-video-border: var(--cui-line, var(--line-dark));
  --cui-search-filter-accent: var(--cui-primary, var(--primary));
  --cui-search-filter-text: var(--cui-text, var(--text-1));
  --cui-search-filter-muted: var(--cui-text-muted, var(--text-3));
  top: 78px;
  right: 24px;
  bottom: 16px;
  overflow: hidden;
  border: 1px solid var(--cui-drawer-border, #d4dce7);
  border-radius: 8px;
  background: var(--cui-drawer-surface, #ffffff);
  box-shadow: var(--cui-shadow-lg, 0 22px 56px rgba(15, 23, 42, 0.16));
}

.hotMusicFilterDrawer .cuiDrawerHeader {
  min-height: 64px;
  align-items: center;
  padding: 16px 18px;
}

.hotMusicFilterDrawer .cuiDrawerTitle {
  color: var(--cui-text, #0f172a);
  font-size: 16px;
  font-weight: 920;
}

.hotMusicFilterDrawer .cuiDrawerBody {
  min-height: 0;
  padding: 0 18px;
}

.hotMusicFilterDrawerPanel {
  display: grid;
}

.hotMusicFilterDrawerSection {
  display: grid;
  gap: 12px;
  border-bottom: 1px solid var(--cui-drawer-border, #d4dce7);
  padding: 18px 0;
}

.hotMusicFilterDrawerSection:last-child {
  border-bottom: 0;
}

.hotMusicFilterDrawerSection h3 {
  margin: 0;
  color: var(--cui-text, #0f172a);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
}

.hotMusicFilterDrawerOptions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.mediaCollapsibleFilterOptions {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.mediaCollapsibleFilterList {
  transition: max-height 180ms ease;
}

.mediaCollapsibleFilterList.collapsed {
  max-height: var(--media-filter-collapsed-height, 68px);
  overflow: hidden;
}

.mediaCollapsibleFilterList.expanded {
  max-height: none;
  overflow: visible;
}

.mediaCollapsibleFilterToggle.cuiButton {
  min-height: 28px;
  justify-self: end;
  color: var(--cui-primary, var(--primary));
  padding-inline: 4px;
}

.mediaCollapsibleFilterToggle svg {
  transition: transform 160ms ease;
}

.mediaCollapsibleFilterToggle svg.expanded {
  transform: rotate(180deg);
}

.hotMusicFilterDrawerOptions button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cui-line, #d4dce7);
  border-radius: 999px;
  background: var(--cui-control-bg, #ffffff);
  color: var(--cui-text-soft, #475569);
  padding: 0 13px;
  font-size: 13px;
  font-weight: 760;
}

.hotMusicFilterDrawerOptions button.active {
  border-color: var(--cui-primary, #6d5dfc);
  background: var(--cui-primary, #6d5dfc);
  color: #ffffff;
}

.hotMusicFilterDrawerOptions .cuiSearchFilterChipActive:not(:disabled):hover {
  border-color: var(--cui-search-filter-accent);
  background: var(--cui-search-filter-accent);
  color: #ffffff;
}

.hotMusicFilterDrawerActions {
  display: grid;
  gap: 12px;
  padding: 18px 0;
}

.hotMusicFilterDrawerActions .hotMusicInlineFilters.expanded {
  align-items: flex-start;
  flex-direction: column;
}

.hotMusicFilterDrawerActions .hotMusicInlineFilters.expanded .hotVideoActiveFilterList {
  width: 100%;
  flex-wrap: wrap;
  overflow: visible;
}

.hotMusicFilterDrawerActions .hotMusicInlineFilters.expanded .hotMusicFilterMeasure {
  display: none;
}

.hotMusicFilterDrawerActions .mediaSavedFilterBar {
  justify-content: flex-start;
  margin: 0;
}

.hotMusicFilterDrawer .cuiDrawerFooter {
  min-height: 64px;
  padding: 12px 18px;
  background: var(--cui-drawer-footer-bg, #f6f8fb);
}

.hotMusicFilterDrawerFooter {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hotMusicFilterDrawerFooter .cuiButtonPrimary {
  min-width: 112px;
}

@media (max-width: 720px) {
  .hotMusicFilterDrawer.cuiDrawer {
    top: 12px;
    right: 12px;
    bottom: 12px;
    max-width: calc(100vw - 24px);
  }
}

.hotVideoMainFilterPanel {
  gap: 0;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 0;
}

.hotVideoMainFilterPanel > :not(.hotVideoSearchRow) {
  display: none !important;
}

.hotVideoMainPage.cuiResourcePage {
  width: 100%;
  min-width: 0;
  gap: 0;
  padding: 0;
  transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width;
}

.hotVideoMainPage.cuiResourcePage > .cuiResourceFilters,
.hotVideoMainPage.cuiResourcePage > .cuiResourceBody {
  display: contents;
}

.hotVideoMainPage .hotVideoListPanel {
  border-radius: 0 0 8px 8px;
}

.hotVideoMainPage .companyIntroCard {
  margin-top: 14px;
}

.hotVideoMainPage > .cuiResourceHeader {
  display: none;
}

.hotVideoMainPage .hotVideoSearchRow {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto auto auto auto;
}

.hotVideoMainPage .hotVideoSearchRow .hotVideoSearch {
  width: 100%;
}

.hotVideoFilterTrigger {
  min-height: 38px;
  white-space: nowrap;
}

.hotVideoFilterDrawer.cuiDrawer {
  right: 24px;
  left: auto;
}

.hotVideoFilterDrawerAdvanced,
.hotTagFilterDrawerAdvanced {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.hotVideoFilterDrawerAdvanced .hotVideoRangeFilter,
.hotTagFilterDrawerAdvanced .hotVideoRangeFilter {
  --hot-video-accent: var(--cui-primary, var(--primary));
  --hot-video-border: var(--cui-line, var(--line-dark));
  min-width: 0;
}

.hotVideoFilterDrawerAdvanced .hotVideoRangeFilter > button,
.hotTagFilterDrawerAdvanced .hotVideoRangeFilter > button {
  border-color: var(--cui-line, var(--line-dark));
  background: var(--cui-control-bg, var(--control-bg));
  color: var(--cui-text, var(--text-1));
}

.hotVideoFilterDrawerAdvanced .hotVideoRangeFilter > button svg,
.hotTagFilterDrawerAdvanced .hotVideoRangeFilter > button svg {
  color: var(--cui-text-soft, var(--text-2));
}

.hotVideoFilterDrawerAdvanced .hotVideoRangeFilter > button:hover,
.hotTagFilterDrawerAdvanced .hotVideoRangeFilter > button:hover {
  border-color: var(--cui-primary, var(--primary));
  background: var(--cui-control-bg, var(--control-bg));
}

.hotVideoFilterDrawerAdvanced .hotVideoRangeFilter > button:focus-visible,
.hotTagFilterDrawerAdvanced .hotVideoRangeFilter > button:focus-visible {
  outline: 2px solid var(--cui-primary, var(--primary));
  outline-offset: 2px;
}

.hotVideoFilterDrawerAdvanced .hotVideoRangeFilter.open > button,
.hotTagFilterDrawerAdvanced .hotVideoRangeFilter.open > button {
  border-color: var(--cui-primary, var(--primary));
  background: var(--cui-control-bg, var(--control-bg));
  color: var(--cui-text, var(--text-1));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cui-primary, var(--primary)) 12%, transparent);
}

.hotVideoFilterDrawerAdvanced .hotVideoRangeMenu,
.hotTagFilterDrawerAdvanced .hotVideoRangeMenu {
  width: min(240px, calc(100vw - 80px));
  scroll-margin-block: 18px;
  background: var(--cui-drawer-surface, var(--surface-panel));
}

.hotVideoFilterDrawerAdvanced .hotVideoRangeMenu > button:hover,
.hotVideoFilterDrawerAdvanced .hotVideoRangeMenu > button.active,
.hotTagFilterDrawerAdvanced .hotVideoRangeMenu > button:hover,
.hotTagFilterDrawerAdvanced .hotVideoRangeMenu > button.active {
  background: color-mix(
    in srgb,
    var(--cui-primary, var(--primary)) 14%,
    var(--cui-drawer-surface, var(--surface-panel))
  );
}

.hotVideoFilterDrawerAdvanced .hotVideoRangeActions button,
.hotTagFilterDrawerAdvanced .hotVideoRangeActions button {
  background: var(--cui-control-bg, var(--control-bg));
  color: var(--cui-text-soft, var(--text-2));
}

.hotVideoFilterDrawerAdvanced .hotVideoRangeActions button:last-child,
.hotTagFilterDrawerAdvanced .hotVideoRangeActions button:last-child {
  border-color: var(--cui-primary, var(--primary));
  background: var(--cui-primary, var(--primary));
  color: #ffffff;
}

.hotVideoFilterDrawerAdvanced .hotVideoRangeFilter:nth-child(even) .hotVideoRangeMenu,
.hotTagFilterDrawerAdvanced .hotVideoRangeFilter:nth-child(even) .hotVideoRangeMenu {
  right: 0;
  left: auto;
}

@media (min-width: 1101px) {
  .hotVideoMainPage.hotVideoMainPageFilterOpen {
    width: calc(100% - 480px);
  }
}

@media (max-width: 1380px) {
  .hotVideoMainPage .hotVideoSearchRow {
    grid-template-columns: minmax(260px, 1fr) auto auto auto auto;
  }
}

@media (max-width: 760px) {
  .hotVideoFilterDrawer.cuiDrawer {
    right: 12px;
    left: auto;
  }
}

.hotMusicListPanel {
  padding: 0;
}

.commerceDataListPanel.hotMusicTablePanel {
  --commerce-list-row-height: 116px;
  --commerce-list-head-height: 58px;
}

.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListTableHead {
  min-height: 58px;
  border-bottom: 1px solid var(--commerce-list-line);
  background: var(--surface-muted);
}

.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListTableHeadCell {
  min-height: 58px;
  background: var(--surface-muted);
}

.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListTableRow:not(.cuiDataListTableHead) {
  min-height: 116px;
  height: 116px;
  border-bottom: 1px solid var(--commerce-list-line);
}

.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListTableRow:last-child {
  border-bottom: 0;
}

.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListTableCell,
.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListSortedCell {
  min-height: 116px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.hotMusicTable .cuiDataListTableHead > *,
.hotMusicTable .cuiDataListTableRow > * {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}

.hotMusicTable .cuiDataListTableHead > *:first-child,
.hotMusicTable .cuiDataListTableRow > *:first-child {
  justify-content: flex-start;
}

.hotMusicTable .cuiDataListSortableHead.active,
.hotMusicTable .cuiDataListSortedCell.active,
.hotMusicTable .cuiDataListSortedCell.active * {
  color: var(--hot-video-accent);
}

.hotMusicTable .cuiDataListSortableHead.active {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-muted));
}

.hotMusicTable .cuiDataListSortedCell.active {
  background: var(--hot-video-panel-strong);
}

.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListSortableHead > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListSortableHead .mediaMetricHeader {
  width: max-content;
  max-width: 100%;
  display: inline-grid;
  grid-template-columns: max-content 16px;
  align-items: center;
  column-gap: 5px;
  padding: 0;
  line-height: 1;
}

.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListSortableHead .mediaMetricHeader > span:first-child {
  display: block;
  padding: 0;
  line-height: 20px;
  white-space: nowrap;
}

.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListSortableHead .mediaMetricHeader > .cuiTooltipWrap {
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding: 0;
  line-height: 0;
}

.commerceDataListPanel.hotMusicTablePanel .hotMusicTable .cuiDataListSortableHead .mediaMetricHeaderHelp {
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  margin: 0;
  padding: 0;
  line-height: 14px;
  transform: none;
}

.hotMusicCell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hotMusicCell img {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: block;
  border-radius: 8px;
  background: var(--tag-bg);
  object-fit: cover;
}

.hotMusicCover.cuiMediaThumbnail {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 8px;
}

.hotMusicCell div {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.hotMusicCell strong,
.hotMusicCreatorName {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotMusicCell span,
.hotMusicCell em {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 13px;
  font-style: normal;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotVideoCountryFlag {
  width: 18px !important;
  height: 13px !important;
  flex: 0 0 auto;
  margin-left: 5px;
  border-radius: 2px !important;
  object-fit: cover;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-1) 10%, transparent);
  vertical-align: -2px;
}

.hotMusicCell span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hotMusicCell em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hotMusicCell .hotVideoCountryFlag {
  width: 18px !important;
  height: 13px !important;
  flex: 0 0 auto;
  margin-left: 0;
}

.hotMusicCreatorLink {
  width: 100%;
  min-width: 0;
}

.hotMusicCreatorLink img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.hotMusicCreatorLink span {
  gap: 6px;
}

.hotMusicCreatorLink em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.hotTagTitleBar {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.hotTagTitleBar span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 760;
}

.hotTagFilterPanel {
  gap: 0;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 0;
}

.hotTagFilterPanel > :not(.hotVideoSearchRow) {
  display: none !important;
}

.hotTagPage.cuiResourcePage {
  width: 100%;
  gap: 0;
  padding: 0;
  transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width;
}

.hotTagPage.cuiResourcePage > .cuiResourceFilters,
.hotTagPage.cuiResourcePage > .cuiResourceBody {
  display: contents;
}

.hotTagPage > .cuiResourceHeader {
  display: none;
}

.hotTagPage .hotVideoSearchRow {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto auto auto auto;
}

.hotTagPage .hotVideoSearchRow .hotVideoSearch {
  width: 100%;
}

.hotTagPage .hotTagListPanel {
  border-radius: 0 0 8px 8px;
}

.hotTagPage .companyIntroCard {
  margin-top: 14px;
}

.hotTagFilterTrigger {
  min-height: 38px;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .hotVideoFilterDrawerAdvanced,
  .hotTagFilterDrawerAdvanced {
    grid-template-columns: minmax(0, 1fr);
  }

  .hotVideoFilterDrawerAdvanced .hotVideoRangeFilter .hotVideoRangeMenu,
  .hotTagFilterDrawerAdvanced .hotVideoRangeFilter .hotVideoRangeMenu {
    right: auto;
    left: 0;
    width: min(240px, 100%);
  }
}

@media (min-width: 1101px) {
  .hotTagPage.hotTagPageFilterOpen {
    width: calc(100% - 480px);
    min-width: 0;
  }
}

@media (max-width: 1380px) {
  .hotTagPage .hotVideoSearchRow {
    grid-template-columns: minmax(260px, 1fr) auto auto auto auto;
  }
}

.hotTagFilterPanel .hotVideoFilterRow {
  grid-template-columns: 126px minmax(0, 1fr);
}

.hotTagFilterPanel .hotVideoFilterRow > div {
  gap: 10px 24px;
  padding-right: 8px;
}

.hotTagFilterPanel .hotVideoFilterRow .hotVideoExpand {
  margin-left: auto;
}

.hotTagFilterPanel .hotVideoConditionRow {
  grid-template-columns: 126px repeat(2, minmax(190px, 240px));
  padding-left: 18px;
}

.hotTagFilterPanel .hotVideoActiveFilters {
  grid-template-columns: 126px minmax(0, 1fr) auto auto;
}

.hotTagFilterPanel .hotVideoConditionRow strong {
  width: auto;
  margin-left: 0;
}

.hotTagAdvancedRow select {
  min-width: 150px;
}

.hotTagAdvancedRow .hotVideoRangeFilter {
  min-width: 0;
}

.hotTagAdvancedRow .hotVideoRangeMenu {
  width: 242px;
}

.hotTagListPanel {
  padding: 0;
}

.commerceDataListPanel.hotTagTablePanel {
  --commerce-list-row-height: 116px;
  --commerce-list-head-height: 58px;
}

.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListTableHead {
  min-height: 58px;
  border-bottom: 1px solid var(--commerce-list-line);
  background: var(--surface-muted);
}

.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListTableHeadCell {
  min-height: 58px;
  background: var(--surface-muted);
}

.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListTableRow:not(.cuiDataListTableHead) {
  min-height: 116px;
  height: 116px;
  border-bottom: 1px solid var(--commerce-list-line);
}

.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListTableRow:last-child {
  border-bottom: 0;
}

.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListTableCell,
.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListSortedCell {
  min-height: 116px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.hotTagTable .cuiDataListTableHead > *,
.hotTagTable .cuiDataListTableRow > * {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}

.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListTableHead > *:nth-child(n + 3),
.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListTableRow > *:nth-child(n + 3) {
  justify-content: center;
  text-align: center;
}

.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListTableHead .mediaMetricHeader {
  width: max-content;
  max-width: 100%;
  justify-content: center;
  gap: 4px;
  padding: 0;
}

.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListTableHead .mediaMetricHeader > span,
.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListTableHead .mediaMetricHeader > .cuiTooltipWrap {
  padding: 0;
}

.commerceDataListPanel.hotTagTablePanel .hotTagTable .cuiDataListTableHead .mediaMetricHeaderHelp {
  box-sizing: border-box;
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  padding: 0;
}

.hotTagTable .cuiDataListTableHead > *:first-child,
.hotTagTable .cuiDataListTableRow > *:first-child {
  justify-content: flex-start;
}

.hotTagTable .cuiDataListSortableHead.active,
.hotTagTable .cuiDataListSortedCell.active,
.hotTagTable .cuiDataListSortedCell.active * {
  color: var(--hot-video-accent);
}

.hotTagTable .cuiDataListSortableHead.active {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-muted));
}

.hotTagTable .cuiDataListSortedCell.active {
  background: var(--hot-video-panel-strong);
}

.hotTagName {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px 28px;
  align-items: center;
  gap: 8px;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 850;
}

.hotTagName button {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text-3);
  padding: 0;
}

.hotTagName > .hotTagNameText {
  width: 100%;
  max-width: none;
  display: inline-block;
  overflow: hidden;
  color: var(--text-1);
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.hotTagName > .hotTagNameText:hover {
  color: var(--hot-video-accent);
}

.hotTagName > button:not(.hotTagNameText),
.hotTagName > .cuiTooltipWrap {
  justify-self: center;
}

.mediaInsightLinkCell {
  width: 100%;
  min-width: 0;
  display: block;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.mediaInsightLinkCell:hover .hotMusicCell strong {
  color: var(--hot-video-accent);
}

.hotTagPreviewList {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hotTagPreviewList a {
  width: 58px;
  height: 82px;
  flex: 0 0 58px;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--tag-bg);
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.hotTagPreviewList a:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--text-1) 16%, transparent);
  transform: translateY(-1px);
}

.hotTagPreviewList a:focus-visible {
  outline: 2px solid var(--hot-video-accent);
  outline-offset: 2px;
}

.hotTagPreviewList img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hotTagPreviewCover.cuiMediaThumbnail {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.mediaInsightOverlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(15 23 42 / 34%);
  padding: 28px;
}

.mediaInsightDialog {
  width: min(980px, calc(100vw - 56px));
  max-height: calc(100vh - 56px);
  overflow: auto;
  position: relative;
  display: grid;
  gap: 18px;
  border: 1px solid var(--hot-video-border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 28px 80px rgb(15 23 42 / 22%);
  padding: 24px;
}

.mediaInsightDialog.tag {
  width: min(1040px, calc(100vw - 56px));
}

.mediaInsightClose {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
}

.mediaInsightClose:hover {
  color: var(--hot-video-accent);
  border-color: color-mix(in srgb, var(--hot-video-accent) 38%, var(--hot-video-border));
}

.mediaInsightHero,
.mediaInsightTagHero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding-right: 44px;
}

.mediaInsightTagHero {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 18px 44px 18px 18px;
  border-radius: 10px;
  background: var(--surface-muted);
}

.mediaInsightHero > img {
  width: 116px;
  height: 116px;
  border-radius: 12px;
  background: var(--tag-bg);
  object-fit: cover;
}

.mediaInsightHero h2,
.mediaInsightTagHero h2 {
  margin: 6px 0 8px;
  color: var(--text-1);
  font-size: 22px;
  line-height: 1.25;
}

.mediaInsightHero span,
.mediaInsightHero p,
.mediaInsightTagHero p {
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 760;
}

.mediaInsightTags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mediaInsightTags em,
.mediaInsightRelatedTags button {
  border: 1px solid var(--hot-video-border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 6px 10px;
}

.mediaInsightMetricGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mediaInsightMetricGrid article {
  display: grid;
  gap: 6px;
  border-radius: 10px;
  background: var(--surface-muted);
  padding: 16px;
}

.mediaInsightMetricGrid strong {
  color: var(--text-1);
  font-size: 22px;
  font-weight: 900;
}

.mediaInsightMetricGrid span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
}

.mediaInsightBlock {
  display: grid;
  gap: 14px;
  border-radius: 12px;
  background: var(--surface-muted);
  padding: 18px;
}

.mediaInsightBlock h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 900;
}

.mediaInsightChartShell {
  display: grid;
  gap: 12px;
}

.mediaInsightChartSummary {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  background: var(--surface);
  padding: 12px 14px;
}

.mediaInsightChartSummary strong {
  color: var(--text-1);
  font-size: 20px;
  font-weight: 900;
}

.mediaInsightChartSummary span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 780;
}

.mediaInsightChartSummary em {
  margin-left: auto;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 860;
  padding: 6px 9px;
}

.mediaInsightChartSummary em.up {
  background: color-mix(in srgb, #0f766e 12%, var(--surface-muted));
  color: #0f766e;
}

.mediaInsightChartSummary em.down {
  background: color-mix(in srgb, #b91c1c 10%, var(--surface-muted));
  color: #b91c1c;
}

.mediaInsightChartCanvas {
  position: relative;
  border-radius: 12px;
  background: var(--surface);
  padding: 16px 14px 10px;
}

.mediaInsightVideoGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.mediaInsightVideoGrid article {
  min-width: 0;
  display: grid;
  gap: 7px;
  border-radius: 10px;
  background: var(--surface);
  padding: 10px;
}

.mediaInsightVideoLink {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: inherit;
  text-decoration: none;
}

.mediaInsightVideoGrid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  background: var(--tag-bg);
  object-fit: cover;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.mediaInsightVideoGrid strong,
.mediaInsightVideoGrid span,
.mediaInsightVideoGrid small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaInsightVideoGrid strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 860;
}

.mediaInsightVideoLink:hover img {
  box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
  transform: translateY(-1px);
}

.mediaInsightVideoLink:hover strong {
  color: var(--hot-video-accent);
}

.mediaInsightVideoGrid span,
.mediaInsightVideoGrid small {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 740;
}

.mediaInsightHeroActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.mediaInsightHeroActions button,
.mediaInsightHeroActions a {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 820;
  padding: 0 12px;
  cursor: pointer;
  text-decoration: none;
}

.mediaInsightHeroActions button:hover,
.mediaInsightHeroActions a:hover {
  color: var(--hot-video-accent);
  border-color: color-mix(in srgb, var(--hot-video-accent) 38%, var(--hot-video-border));
}

.mediaInsightTier {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 860;
  line-height: 1;
  padding: 7px 10px;
}

.mediaInsightTier.surging {
  background: color-mix(in srgb, var(--hot-video-accent) 13%, var(--surface-muted));
  color: var(--hot-video-accent);
}

.mediaInsightTier.hot {
  background: color-mix(in srgb, #0f766e 12%, var(--surface-muted));
  color: #0f766e;
}

.mediaInsightTier.potential {
  background: color-mix(in srgb, #b45309 13%, var(--surface-muted));
  color: #b45309;
}

.mediaInsightTier.cooling {
  background: color-mix(in srgb, var(--text-3) 14%, var(--surface-muted));
  color: var(--text-2);
}

.mediaInsightRelatedTags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mediaInsightRelatedTags button {
  cursor: pointer;
}

.mediaInsightRelatedTags button:hover {
  color: var(--hot-video-accent);
  border-color: color-mix(in srgb, var(--hot-video-accent) 38%, var(--hot-video-border));
}

@media (max-width: 760px) {
  .mediaInsightOverlay {
    align-items: stretch;
    padding: 14px;
  }

  .mediaInsightDialog,
.mediaInsightDialog.tag {
    width: 100%;
    max-height: calc(100vh - 28px);
    padding: 18px;
  }

  .mediaInsightHero,
.mediaInsightTagHero {
    grid-template-columns: 1fr;
    padding-right: 42px;
  }

  .mediaInsightMetricGrid,
.mediaInsightVideoGrid {
    grid-template-columns: 1fr;
  }
}

/* Refreshed music and tag insight dialogs */
.mediaInsightOverlayV2 {
  background: rgba(15, 23, 42, 0.48);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.mediaInsightDialogV2 {
  width: min(1220px, calc(100vw - 24px));
  max-height: min(920px, calc(100vh - 24px));
  border: 1px solid #dfe3e9;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
}

.mediaInsightDialogHeaderV2 {
  min-height: 72px;
  align-items: center;
  border-bottom: 1px solid #e5e8ed;
  background: #ffffff;
  padding: 16px 20px;
}

.mediaInsightDialogHeaderV2 .cuiDialogTitle {
  color: #202b3c;
  font-size: 18px;
  font-weight: 880;
}

.mediaInsightDialogHeaderV2 .cuiDialogDescription {
  margin-top: 4px;
  color: #7b8494;
  font-size: 12px;
  font-weight: 650;
}

.mediaInsightDialogCloseV2 {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  color: #697586;
}

.mediaInsightDialogCloseV2:hover {
  background: #f1f3f6;
  color: #202b3c;
}

.mediaInsightDialogBodyV2 {
  display: grid;
  overflow-y: auto;
  background: #ffffff;
  padding: 0;
}

.mediaInsightDialogV2 .mediaInsightHero,
.mediaInsightDialogV2 .mediaInsightTagHero {
  min-height: 188px;
  display: grid;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #e7eaf0;
  border-radius: 0;
  background: #ffffff;
  padding: 20px;
}

.mediaInsightDialogV2 .mediaInsightHero {
  grid-template-columns: 148px minmax(0, 1fr);
}

.mediaInsightDialogV2 .mediaInsightTagHero {
  grid-template-columns: minmax(0, 1fr) auto;
}

.mediaInsightDialogV2 .mediaInsightHero > img {
  width: 148px;
  height: 148px;
  border: 1px solid #e1e5ec;
  border-radius: 7px;
  background: #f0f2f5;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
  object-fit: cover;
}

.mediaInsightDialogV2 .mediaInsightHero > div,
.mediaInsightDialogV2 .mediaInsightTagHero > div:first-child {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
}

.mediaInsightDialogV2 .mediaInsightHero h2,
.mediaInsightDialogV2 .mediaInsightTagHero h2 {
  overflow: hidden;
  margin: 0;
  color: #182230;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaInsightDialogV2 .mediaInsightHero p,
.mediaInsightDialogV2 .mediaInsightTagHero p {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.mediaInsightRegion {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #667085;
  font-size: 11px;
  font-weight: 760;
}

.mediaInsightRegion img {
  width: 20px;
  height: 14px;
  flex: 0 0 auto;
  display: block;
  border: 1px solid #e1e5ec;
  border-radius: 2px;
  object-fit: cover;
}

.mediaInsightTagMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.mediaInsightDialogV2 .mediaInsightTags {
  gap: 6px;
  margin-top: 2px;
}

.mediaInsightDialogV2 .mediaInsightTags em {
  border: 1px solid #e1e5ec;
  border-radius: 4px;
  background: #f6f7f9;
  color: #5f6b7c;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 750;
}

.mediaInsightDialogV2 .mediaInsightTier {
  border-radius: 4px;
  padding: 6px 9px;
  font-size: 11px;
}

.mediaInsightDialogV2 .mediaInsightHeroActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.mediaInsightDialogV2 .mediaInsightHeroActions .cuiButton {
  min-height: 34px;
  border-radius: 5px;
  padding: 0 11px;
  font-size: 11px;
}

.mediaInsightDialogV2 .mediaInsightHeroActions .cuiButtonPrimary {
  border-color: #6957d9;
  background: #6957d9;
  color: #ffffff;
}

.mediaInsightDialogV2 .mediaInsightHeroActions .cuiButtonSecondary {
  border-color: #d9dee7;
  background: #ffffff;
  color: #344054;
}

.mediaInsightDialogV2 .mediaInsightMetricGrid.cuiMetricGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid #e7eaf0;
  background: #ffffff;
  padding: 0 20px;
}

.mediaInsightDialogV2 .mediaInsightMetricGrid .cuiMetricCard {
  min-height: 112px;
  border: 0;
  border-right: 1px solid #e7eaf0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'label label'
    'value icon';
  align-content: center;
  gap: 10px 12px;
  padding: 16px;
}

.mediaInsightDialogV2 .mediaInsightMetricGrid .cuiMetricCard:last-child {
  border-right: 0;
}

.mediaInsightDialogV2 .mediaInsightMetricGrid .cuiMetricCardHeader {
  display: contents;
}

.mediaInsightDialogV2 .mediaInsightMetricGrid .cuiMetricCardLabel {
  grid-area: label;
  color: #7b8494;
  font-size: 11px;
  font-weight: 760;
}

.mediaInsightDialogV2 .mediaInsightMetricGrid .cuiMetricCardIcon {
  width: 32px;
  height: 32px;
  grid-area: icon;
  align-self: center;
  border-radius: 999px;
  background: #f0edff;
  color: #6957d9;
}

.mediaInsightDialogV2 .mediaInsightMetricGrid .cuiMetricCard:nth-child(2) .cuiMetricCardIcon {
  background: #ecf8f5;
  color: #0f937d;
}

.mediaInsightDialogV2 .mediaInsightMetricGrid .cuiMetricCard:nth-child(3) .cuiMetricCardIcon {
  background: #fff3e8;
  color: #c06216;
}

.mediaInsightDialogV2 .mediaInsightMetricGrid .cuiMetricCardValueRow {
  display: contents;
}

.mediaInsightDialogV2 .mediaInsightMetricGrid .cuiMetricCardValue {
  grid-area: value;
  align-self: center;
  color: #202b3c;
  font-size: 20px;
  font-weight: 920;
}

.mediaInsightDialogV2 .mediaInsightBlock {
  display: grid;
  gap: 16px;
  border: 0;
  border-bottom: 1px solid #e7eaf0;
  border-radius: 0;
  background: #ffffff;
  padding: 20px;
}

.mediaInsightDialogV2 .mediaInsightBlock:last-child {
  border-bottom: 0;
}

.mediaInsightBlockHeader {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mediaInsightBlockHeader > span {
  width: 32px;
  height: 32px;
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 6px;
  background: #f0edff;
  color: #6957d9;
}

.mediaInsightBlockHeader > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.mediaInsightDialogV2 .mediaInsightBlockHeader h3 {
  margin: 0;
  color: #202b3c;
  font-size: 14px;
  font-weight: 850;
}

.mediaInsightBlockHeader small {
  color: #8a93a3;
  font-size: 10px;
  font-weight: 680;
}

.mediaInsightBlockHeader > .mediaInsightBlockActions {
  min-width: auto;
  display: flex;
  align-items: center;
  margin-left: auto;
}

.mediaInsightDialogV2 .mediaInsightChartShell {
  --insight-chart-color: #6957d9;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid #e4e8ee;
  border-radius: 8px;
  background: #ffffff;
}

.mediaInsightDialogV2 .mediaInsightChartShell.tag {
  --insight-chart-color: #0f937d;
}

.mediaInsightDialogV2 .mediaInsightChartSummary {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 0;
  border-bottom: 1px solid #e7eaf0;
  border-radius: 0;
  background: #ffffff;
  padding: 0;
}

.mediaInsightDialogV2 .mediaInsightChartSummary > div {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  border-right: 1px solid #e7eaf0;
  padding: 12px 16px;
}

.mediaInsightDialogV2 .mediaInsightChartSummary > div:last-child {
  border-right: 0;
}

.mediaInsightDialogV2 .mediaInsightChartSummary strong {
  overflow: hidden;
  color: #202b3c;
  font-size: 18px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaInsightDialogV2 .mediaInsightChartSummary span {
  overflow: hidden;
  color: #8a93a3;
  font-size: 11px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaInsightDialogV2 .mediaInsightChartSummary small {
  color: var(--insight-chart-color);
  font-size: 10px;
  font-weight: 760;
}

.mediaInsightDialogV2 .mediaInsightChartSummary em {
  width: fit-content;
  margin: 0;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 11px;
}

.mediaInsightDialogV2 .mediaInsightChartCanvas {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  padding: 8px 12px 2px;
}

.mediaInsightDialogV2 .mediaInsightTrendChart {
  width: 100%;
  height: 320px;
  overflow: hidden;
}

.mediaInsightDialogV2 .mediaInsightVideoGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.mediaInsightDialogV2 .mediaInsightVideoGrid article {
  min-width: 0;
  border: 1px solid #e4e8ee;
  border-radius: 6px;
  background: #ffffff;
  padding: 8px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.mediaInsightDialogV2 .mediaInsightVideoGrid article:hover {
  border-color: #c9c0ff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.09);
  transform: translateY(-1px);
}

.mediaInsightDialogV2 .mediaInsightVideoGrid img {
  aspect-ratio: 4 / 5;
  border-radius: 5px;
}

.mediaInsightDialogV2 .mediaInsightVideoGrid strong {
  font-size: 12px;
}

.mediaInsightDialogV2 .mediaInsightVideoGrid span,
.mediaInsightDialogV2 .mediaInsightVideoGrid small {
  font-size: 10px;
}

.mediaInsightDialogV2 .mediaInsightRelatedTags {
  gap: 8px;
}

.mediaInsightDialogV2 .mediaInsightRelatedTags .mediaInsightRelatedTagButton {
  min-width: 180px;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  border: 1px solid #e1e5ec;
  border-radius: 5px;
  background: #f7f8fa;
  color: #5f6b7c;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 760;
  box-shadow: none;
  text-decoration: none;
}

.mediaInsightDialogV2 .mediaInsightRelatedTagButton > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaInsightDialogV2 .mediaInsightRelatedTagButton > b {
  min-width: 28px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  font-size: 11px;
  font-weight: 900;
}

.mediaInsightDialogV2 .mediaInsightRelatedTagButton > small {
  grid-column: 1 / -1;
  overflow: hidden;
  color: var(--text-3);
  font-size: 9px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaInsightRelatedEmpty {
  color: var(--text-3);
  font-size: 11px;
}

.mediaInsightDialogV2 .mediaInsightRelatedTags .mediaInsightRelatedTagButton:hover {
  border-color: #c9c0ff;
  background: #f0edff;
  color: #5f4ccf;
}

@media (max-width: 900px) {
  .mediaInsightDialogV2 {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .mediaInsightDialogV2 .mediaInsightChartShell {
    grid-template-columns: 1fr;
  }

  .mediaInsightDialogV2 .mediaInsightVideoGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .mediaInsightDialogV2 {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .mediaInsightDialogHeaderV2 {
    min-height: 64px;
    padding: 13px 16px;
  }

  .mediaInsightDialogV2 .mediaInsightHero,
  .mediaInsightDialogV2 .mediaInsightTagHero {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .mediaInsightDialogV2 .mediaInsightHero > img {
    width: 104px;
    height: 104px;
  }

  .mediaInsightDialogV2 .mediaInsightHeroActions {
    justify-content: flex-start;
  }

  .mediaInsightDialogV2 .mediaInsightMetricGrid.cuiMetricGrid {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }

  .mediaInsightDialogV2 .mediaInsightMetricGrid .cuiMetricCard {
    min-height: 88px;
    border-right: 0;
    border-bottom: 1px solid #e7eaf0;
    padding: 13px 10px;
  }

  .mediaInsightDialogV2 .mediaInsightMetricGrid .cuiMetricCard:last-child {
    border-bottom: 0;
  }

  .mediaInsightDialogV2 .mediaInsightBlock {
    padding: 16px;
  }

  .mediaInsightDialogV2 .mediaInsightChartSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mediaInsightDialogV2 .mediaInsightChartSummary > div:nth-child(2) {
    border-right: 0;
  }

  .mediaInsightDialogV2 .mediaInsightChartSummary > div:nth-child(-n + 2) {
    border-bottom: 1px solid #e7eaf0;
  }

  .mediaInsightDialogV2 .mediaInsightTrendChart {
    height: 260px;
  }
}

.aiAnalysisPage {
  --hot-video-accent: var(--primary, #6d5dfc);
  --hot-video-soft: color-mix(in srgb, var(--primary, #6d5dfc) 12%, transparent);
  --hot-video-border: color-mix(in srgb, var(--primary, #6d5dfc) 18%, #e5e7eb);
  min-height: calc(100vh - 72px);
  display: grid;
  gap: 16px;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 242, 249, 0.7), transparent 28%),
    radial-gradient(circle at 78% 28%, rgba(218, 250, 246, 0.78), transparent 34%),
    var(--surface-muted);
  align-content: start;
  padding: 18px 20px 22px;
}

.aiAnalysisBack {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 820;
  text-decoration: none;
}

.aiAnalysisBack:hover {
  color: var(--hot-video-accent, #6d5dfc);
}

.aiAnalysisLanding {
  width: min(1240px, 100%);
  justify-self: center;
  display: grid;
  gap: 26px;
  padding-top: 18px;
}

.aiAnalysisHero {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.aiAnalysisHero h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 30px;
  font-weight: 950;
}

.aiAnalysisHero p {
  max-width: 680px;
  margin: 0;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 760;
}

.aiAnalysisSearchPanel {
  display: grid;
  justify-items: center;
  gap: 24px;
}

.aiAnalysisInputDivider {
  width: min(760px, 100%);
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.aiAnalysisInputDivider::before,
.aiAnalysisInputDivider::after {
  height: 1px;
  flex: 1 1 auto;
  background: var(--hot-video-border);
  content: '';
}

.aiAnalysisUpload {
  position: relative;
  width: min(760px, 100%);
  min-height: 96px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px dashed var(--hot-video-border);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px 18px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.aiAnalysisUpload:hover,
.aiAnalysisUpload.hasFile {
  border-color: var(--hot-video-accent, #6d5dfc);
  background: var(--hot-video-soft, rgba(109, 93, 252, 0.06));
  box-shadow: 0 10px 28px rgba(40, 35, 77, 0.08);
}

.aiAnalysisUpload > input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.aiAnalysisUpload > video,
.aiAnalysisUploadIcon {
  width: 54px;
  height: 66px;
  border-radius: 6px;
}

.aiAnalysisUpload > video {
  display: block;
  background: #15151b;
  object-fit: cover;
}

.aiAnalysisUploadIcon {
  display: grid;
  place-items: center;
  background: var(--hot-video-soft, rgba(109, 93, 252, 0.12));
  color: var(--hot-video-accent, #6d5dfc);
}

.aiAnalysisUploadCopy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.aiAnalysisUploadCopy strong,
.aiAnalysisUploadCopy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiAnalysisUploadCopy strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
}

.aiAnalysisUploadCopy small {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 720;
}

.aiAnalysisUpload > button {
  position: relative;
  z-index: 1;
  min-height: 32px;
  border: 1px solid var(--hot-video-border);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text-2);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.aiAnalysisSearchBar {
  width: min(960px, 100%);
  justify-self: center;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--hot-video-border);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(109, 93, 252, 0.14);
  padding: 6px 8px 6px 20px;
}

.aiAnalysisSearchBar span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiAnalysisSearchInput {
  min-width: 0;
  flex: 1 1 auto;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 760;
}

.aiAnalysisSearchInput::placeholder {
  color: var(--text-3);
}

.aiAnalysisSearchBar button {
  flex: 0 0 auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 920;
  white-space: nowrap;
}

.aiAnalysisSearchBar button > span {
  flex: 0 0 auto !important;
  display: inline !important;
  min-width: max-content !important;
  overflow: visible !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 920 !important;
  line-height: 1 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.aiAnalysisSearchBar .aiAnalysisRandomButton {
  min-width: 88px;
  background: var(--hot-video-soft, rgba(109, 93, 252, 0.12)) !important;
  color: var(--hot-video-accent, #6d5dfc) !important;
}

.aiAnalysisSearchBar .aiAnalysisAnalyzeButton {
  min-width: 116px;
  border: 0 !important;
  background: var(--hot-video-accent, #6d5dfc) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(109, 93, 252, 0.22);
}

.aiAnalysisSearchBar .aiAnalysisAnalyzeButton > span {
  color: #ffffff !important;
}

.aiAnalysisSearchBar .aiAnalysisRandomButton > span {
  color: var(--hot-video-accent, #6d5dfc) !important;
}

.aiAnalysisSearchBar .aiAnalysisAnalyzeButton svg {
  color: #ffffff !important;
}

.aiAnalysisSearchBar .aiAnalysisAnalyzeButton:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  box-shadow: none;
}

.aiAnalysisError {
  width: min(920px, 100%);
  border: 1px solid #fecdd3;
  border-radius: 8px;
  background: #fff1f2;
  color: #be123c;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 850;
}

.aiAnalysisModeNotice {
  position: fixed;
  top: 78px;
  right: 24px;
  z-index: 2200;
  width: min(390px, calc(100vw - 32px));
  min-height: 64px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid rgba(109, 93, 252, 0.28);
  border-radius: 8px;
  background: #ffffff;
  color: var(--hot-video-accent, #6d5dfc);
  padding: 13px 15px;
  box-shadow: 0 18px 44px rgba(30, 25, 65, 0.18);
}

.aiAnalysisModeNotice.simulated {
  border-color: #fed7aa;
  background: #fffaf2;
  color: #c2410c;
}

.aiAnalysisModeNotice > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.aiAnalysisModeNotice strong {
  color: inherit;
  font-size: 13px;
  font-weight: 920;
}

.aiAnalysisModeNotice span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.45;
}

.aiAnalysisSamples {
  width: min(800px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.aiAnalysisSamples article {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.aiAnalysisSamples article > div {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--tag-bg);
  aspect-ratio: 0.72;
  box-shadow: var(--shadow-light);
}

.aiAnalysisSamples img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.aiAnalysisSamples article > div::after,
.aiAnalysisVideoCover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(15, 23, 42, 0.68));
}

.aiAnalysisSamples article > div > button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  background: var(--hot-video-accent);
  color: #ffffff;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.aiAnalysisSamples article > div > span {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #ffffff;
}

.aiAnalysisSamples dl,
.aiAnalysisVideoCover dl {
  position: absolute;
  right: 10px;
  bottom: 16px;
  z-index: 2;
  display: grid;
  gap: 7px;
  margin: 0;
}

.aiAnalysisSamples dd,
.aiAnalysisVideoCover dd {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.52);
  color: #ffffff;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
}

.aiAnalysisSamples p {
  min-height: 44px;
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 790;
  line-height: 1.55;
}

.aiAnalysisSearchPanel footer {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 800;
}

.aiAnalysisSearchPanel footer strong {
  color: var(--hot-video-accent, #6d5dfc) !important;
  font-size: 18px;
  font-weight: 950;
}

.aiAnalysisSearchPanel footer button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0 !important;
  border-radius: 999px;
  background: var(--hot-video-accent, #6d5dfc) !important;
  color: #ffffff !important;
  padding: 0 14px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(109, 93, 252, 0.2);
}

.aiAnalysisSearchPanel footer button svg {
  color: #ffffff !important;
}

.aiAnalysisResultPage {
  width: 100%;
  display: grid;
  gap: 16px;
}

.aiAnalysisResultLayout {
  width: 100%;
  min-height: calc(100vh - 150px);
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 24px;
}

.aiAnalysisVideoCard,
.aiAnalysisScriptPanel {
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--shadow-light);
}

.aiAnalysisVideoCard {
  align-content: start;
  display: grid;
  gap: 12px;
  padding: 20px;
}

.aiAnalysisVideoCover {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: var(--tag-bg);
  aspect-ratio: 9 / 16;
}

.aiAnalysisVideoCover img,
.aiAnalysisVideoCover video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #101014;
}

.aiAnalysisVideoCover .play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #ffffff;
}

.aiAnalysisPlaybackButton {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 3;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(16, 16, 20, 0.62);
  color: #ffffff;
  padding: 0 0 0 3px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.aiAnalysisPlaybackButton:hover {
  background: rgba(16, 16, 20, 0.78);
}

.aiAnalysisVideoCard h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 860;
  line-height: 1.5;
}

.aiAnalysisVideoCard p {
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 760;
}

.aiAnalysisUploadedFile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}

.aiAnalysisUploadedFile > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.aiAnalysisUploadedFile strong,
.aiAnalysisUploadedFile span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiAnalysisUploadedFile strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 880;
}

.aiAnalysisUploadedFile span {
  color: var(--text-3);
  font-size: 12px;
}

.aiAnalysisUploadedFile > a {
  min-height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--hot-video-border);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text-2);
  padding: 0 12px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 850;
}

.aiAnalysisUploadedFile > a:hover {
  border-color: var(--hot-video-accent);
  color: var(--hot-video-accent);
}

.aiAnalysisPlaybackError {
  margin: 0;
  border-radius: 6px;
  background: #fff7ed;
  color: #9a3412 !important;
  padding: 9px 10px;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.5;
}

.aiAnalysisVideoCard > button {
  min-height: 96px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px dashed var(--hot-video-border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 820;
}

.aiAnalysisVideoCard > a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 8px;
  background: var(--hot-video-accent);
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
}

.aiAnalysisVideoCard small {
  color: var(--warning);
  font-size: 12px;
  line-height: 1.6;
}

.aiAnalysisScriptPanel {
  min-width: 0;
  display: grid;
  align-content: start;
  grid-template-rows: auto;
  gap: 14px;
  padding: 18px 18px 16px;
}

.aiAnalysisScriptPanel > header {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--hot-video-border);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 242, 249, 0.9), rgba(219, 232, 255, 0.96));
  color: var(--hot-video-accent);
}

.aiAnalysisRunning {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: #6d4aff;
  font-size: 13px;
  font-weight: 600;
}

.aiAnalysisRunning svg {
  animation: mediaAnalysisSpin 1.1s linear infinite;
}

@keyframes mediaAnalysisSpin {
  to { transform: rotate(360deg); }
}

.aiAnalysisResultError {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 22px 0;
  padding: 14px 16px;
  border: 1px solid #f2b8b5;
  border-radius: 6px;
  background: #fff6f5;
  color: #b42318;
}

.aiAnalysisResultError div {
  display: grid;
  gap: 4px;
}

.aiAnalysisResultError span {
  color: #7a271a;
  font-size: 13px;
}

.aiAnalysisLoadingSections {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.aiAnalysisLoadingSections section {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 92px;
  padding: 18px;
  border: 1px solid #e8e8ef;
  border-radius: 6px;
  background: #fff;
}

.aiAnalysisLoadingIcon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 6px;
  background: #f2efff;
  color: #6d4aff;
}

.aiAnalysisLoadingSections strong {
  color: #24242b;
  font-size: 14px;
}

.aiAnalysisLoadingSections p {
  margin: 8px 0 0;
  color: #74747f;
  font-size: 13px;
}

.aiAnalysisStructure {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 22px 8px 14px;
}

.aiAnalysisOverview {
  display: grid;
  gap: 12px;
  border-radius: 10px;
  background: #f6f7fb;
  padding: 14px;
}

.aiAnalysisOverview p {
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 780;
  line-height: 1.7;
}

.aiAnalysisMetricGrid,
.aiAnalysisScoreGrid,
.aiAnalysisInsightGrid {
  display: grid;
  gap: 10px;
}

.aiAnalysisMetricGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aiAnalysisMetricGrid article,
.aiAnalysisScoreCard,
.aiAnalysisInsightGrid article {
  min-width: 0;
  border-radius: 8px;
  background: #f6f7fb;
}

.aiAnalysisMetricGrid article {
  padding: 12px;
}

.aiAnalysisMetricGrid strong {
  display: block;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
}

.aiAnalysisMetricGrid span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 820;
}

.aiAnalysisStructure span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 820;
}

.aiAnalysisStructure em {
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--text-2);
  padding: 6px 12px;
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

.aiAnalysisScoreGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.aiAnalysisScoreHeading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.aiAnalysisScoreHeading strong {
  color: var(--text-1);
  font-size: 14px;
}

.aiAnalysisScoreHeading span {
  color: var(--text-3);
  font-size: 12px;
}

.aiAnalysisScoreCard {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.aiAnalysisScoreValue {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.aiAnalysisScoreValue strong {
  color: var(--hot-video-accent);
  font-size: 22px;
  font-weight: 950;
}

.aiAnalysisScoreValue small {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 760;
}

.aiAnalysisScoreLabel {
  display: flex;
  align-items: center;
  gap: 5px;
}

.aiAnalysisScoreLabel > span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 860;
}

.aiAnalysisScoreCard i {
  height: 4px;
  border-radius: 999px;
  background: var(--hot-video-accent);
}

.aiAnalysisInsightGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aiAnalysisInsightGrid article {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
}

.aiAnalysisInsightGrid h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 920;
}

.aiAnalysisInsightGrid p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.6;
}

.aiAnalysisTranscriptSection {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--hot-video-border);
  padding-top: 18px;
}

.aiAnalysisTranscriptSection > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.aiAnalysisTranscriptSection h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 16px;
  font-weight: 920;
}

.aiAnalysisTranscriptActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aiAnalysisTranscriptActions > span {
  border: 1px solid var(--hot-video-border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
}

.aiAnalysisTranscriptActions > button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hot-video-border);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text-2);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 820;
}

.aiAnalysisTranscriptActions > button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.aiAnalysisTranscriptNotice {
  margin: 0;
  border-left: 3px solid var(--hot-video-accent);
  background: var(--surface-2);
  color: var(--text-2);
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.55;
}

.aiAnalysisTranscript {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 22px;
  padding: 8px 0 16px;
}

.aiAnalysisTranscript article {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
}

.aiAnalysisTranscript time {
  color: var(--text-3);
  font-size: 14px;
  font-weight: 780;
}

.aiAnalysisTranscript p {
  margin: 0 0 8px;
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.55;
}

.aiAnalysisTranscript span {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.55;
}

.aiAnalysisScriptPanel footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--hot-video-border);
  padding: 14px 0 0;
}

.aiAnalysisScriptPanel footer button {
  min-height: 34px;
  border: 1px solid var(--hot-video-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-2);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 880;
}

.aiAnalysisScriptPanel footer button:nth-child(n + 3) {
  border-color: transparent;
  background: var(--hot-video-accent);
  color: #ffffff;
}

@media (max-width: 980px) {
  .aiAnalysisSamples,
.aiAnalysisResultLayout,
.aiAnalysisMetricGrid,
.aiAnalysisScoreGrid,
.aiAnalysisInsightGrid {
    grid-template-columns: 1fr;
  }

  .aiAnalysisSearchPanel {
    grid-template-columns: 1fr;
  }

  .aiAnalysisUpload {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .aiAnalysisUpload > button {
    grid-column: 2;
    justify-self: start;
  }

  .aiAnalysisSamples,
.aiAnalysisSearchPanel footer {
    grid-column: 1;
  }

  .aiAnalysisCurrentVideo img {
    min-height: 300px;
  }
}

/* Video AI insight result: product-insight density with video-specific evidence and actions. */
.videoAiInsightPage {
  width: 100%;
  color: var(--text-1);
  padding: 0 0 16px;
}

.aiAnalysisPage.hasResult {
  gap: 12px;
  background: var(--surface-muted);
  padding: 10px 12px 18px;
}

.videoAiInsightDialog {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: 0 20px 54px rgba(24, 24, 36, 0.16);
}

.videoAiInsightHeader {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--hot-video-border);
  padding: 17px 22px;
}

.videoAiInsightHeader > div:first-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.videoAiInsightHeader h1,
.videoAiInsightHeader p,
.videoAiInsightSourceCopy h2,
.videoAiInsightSourceCopy p,
.videoAiInsightSummaryCard p,
.videoAiInsightPerformanceCard p,
.videoAiInsightSuggestionCard p,
.videoAiInsightActions h3,
.videoAiInsightActions p,
.videoAiInsightTranscript h3,
.videoAiInsightTranscript p {
  margin: 0;
}

.videoAiInsightHeader h1 {
  color: var(--text-1);
  font-size: 24px;
  font-weight: 950;
  letter-spacing: 0;
}

.videoAiInsightHeader p,
.videoAiInsightEvidence {
  color: var(--text-3);
  font-size: 14px;
  font-weight: 720;
}

.videoAiInsightEvidence {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoAiInsightHeaderActions {
  min-width: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.videoAiInsightMode {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hot-video-border);
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}

.videoAiInsightMode.ai {
  border-color: color-mix(in srgb, var(--hot-video-accent) 28%, var(--hot-video-border));
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.videoAiInsightMode.simulated {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.videoAiInsightClose {
  width: 38px;
  height: 38px;
  display: inline-grid;
  flex: 0 0 38px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  padding: 0;
}

.videoAiInsightClose:hover {
  background: var(--surface-muted);
  color: var(--text-1);
}

.videoAiInsightBody {
  display: grid;
  gap: 18px;
  padding: 20px 22px 24px;
}

.videoAiInsightSource {
  min-width: 0;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: stretch;
  gap: 24px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-muted) 62%, var(--surface-panel));
  padding: 16px;
}

.videoAiInsightMedia {
  position: relative;
  width: 240px;
  height: 360px;
  overflow: hidden;
  border-radius: 7px;
  background: #111118;
}

.videoAiInsightMedia img,
.videoAiInsightMedia video {
  width: 100%;
  height: 100%;
  display: block;
  background: #111118;
  object-fit: contain;
}

.videoAiInsightMedia .aiAnalysisPlaybackButton {
  width: 58px;
  height: 58px;
}

.videoAiInsightPlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: rgba(17, 17, 24, 0.18);
}

.videoAiInsightSourceCopy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 11px;
}

.videoAiInsightEyebrow {
  color: var(--hot-video-accent);
  font-size: 13px;
  font-weight: 900;
}

.videoAiInsightSourceCopy h2 {
  max-width: 920px;
  overflow: hidden;
  color: var(--text-1);
  font-size: 21px;
  font-weight: 920;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoAiInsightSourceCopy > p {
  color: var(--text-3);
  font-size: 14px;
  font-weight: 760;
}

.videoAiInsightSourceCopy > small {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.55;
}

.videoAiInsightMetrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.videoAiInsightMetrics > span {
  min-width: 142px;
  display: grid;
  gap: 2px;
  border-right: 1px solid var(--hot-video-border);
  color: var(--text-3);
  padding: 5px 22px;
  font-size: 13px;
  font-weight: 760;
}

.videoAiInsightMetrics > span:first-child {
  padding-left: 0;
}

.videoAiInsightMetrics > span:last-child {
  border-right: 0;
}

.videoAiInsightMetrics strong {
  color: var(--text-1);
  font-size: 22px;
  font-weight: 950;
}

.videoAiInsightSourceActions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.videoAiInsightSourceActions a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hot-video-border);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.videoAiInsightPlaybackError {
  border-left: 3px solid #f97316;
  background: #fff7ed;
  color: #9a3412;
  padding: 7px 9px;
  font-size: 13px;
  line-height: 1.55;
}

.videoAiInsightSummaryGrid,
.videoAiInsightPairGrid,
.videoAiInsightSuggestionGrid {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.videoAiInsightSummaryGrid {
  grid-template-columns: 220px minmax(420px, 1fr) minmax(330px, 0.72fr);
}

.videoAiInsightPairGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.videoAiInsightSuggestionGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.videoAiInsightScoreCard,
.videoAiInsightSummaryCard,
.videoAiInsightPerformanceCard,
.videoAiInsightListCard,
.videoAiInsightSuggestionCard,
.videoAiInsightActions,
.videoAiInsightTranscript {
  min-width: 0;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 18px;
}

.videoAiInsightScoreCard {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
}

.videoAiInsightScoreCard > span,
.videoAiInsightSummaryCard > span,
.videoAiInsightPerformanceCard > span {
  justify-self: start;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 900;
}

.videoAiInsightScoreRing {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.videoAiInsightScoreRing > div {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-panel);
  padding-top: 27px;
}

.videoAiInsightScoreRing strong {
  color: var(--hot-video-accent);
  font-size: 38px;
  font-weight: 950;
  line-height: 1;
}

.videoAiInsightScoreRing small,
.videoAiInsightScoreCard > small {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.videoAiInsightScoreCard > em {
  border-radius: 999px;
  background: #e9f8f3;
  color: #0f9f79;
  padding: 5px 12px;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.videoAiInsightSummaryCard,
.videoAiInsightPerformanceCard,
.videoAiInsightListCard,
.videoAiInsightSuggestionCard,
.videoAiInsightActions,
.videoAiInsightTranscript {
  display: grid;
  align-content: start;
  gap: 12px;
}

.videoAiInsightSummaryCard p,
.videoAiInsightPerformanceCard p,
.videoAiInsightSuggestionCard p,
.videoAiInsightActions p {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.72;
}

.videoAiInsightSummaryCard footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.videoAiInsightSummaryCard footer em {
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  padding: 5px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.videoAiInsightPerformanceCard > strong {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #0f9f79;
  font-size: 22px;
  font-weight: 950;
}

.videoAiInsightPerformanceCard.tone-steady > strong {
  color: var(--hot-video-accent);
}

.videoAiInsightPerformanceCard.tone-warning > strong {
  color: #d97706;
}

.videoAiInsightScoreBars {
  height: 56px;
  display: flex;
  align-items: end;
  gap: 7px;
  margin-top: auto;
  border-bottom: 1px solid #cdebe3;
  padding: 0 8px;
}

.videoAiInsightScoreBars i {
  width: 24px;
  max-height: 52px;
  display: block;
  border-radius: 4px 4px 0 0;
  background: #58c9ae;
}

.videoAiInsightScoreBars i:nth-child(2) {
  background: var(--hot-video-accent);
}

.videoAiInsightScoreBars i:nth-child(3) {
  background: #4d9de0;
}

.videoAiInsightScoreBars i:nth-child(4) {
  background: #f5a623;
}

.videoAiInsightListCard h3,
.videoAiInsightSuggestionCard h3,
.videoAiInsightActions h3,
.videoAiInsightTranscript h3 {
  color: var(--text-1);
  font-size: 16px;
  font-weight: 920;
  letter-spacing: 0;
}

.videoAiInsightListCard h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.videoAiInsightListCard h3 > span,
.videoAiInsightSuggestionCard header > span {
  width: 30px;
  height: 30px;
  display: inline-grid;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 6px;
}

.videoAiInsightListCard.tone-positive h3 > span {
  background: #e8f8f3;
  color: #0f9f79;
}

.videoAiInsightListCard.tone-warning h3 > span {
  background: #fff2e8;
  color: #ea6a22;
}

.videoAiInsightListCard ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.65;
}

.videoAiInsightListCard.tone-positive li::marker {
  color: #20b894;
}

.videoAiInsightListCard.tone-warning li::marker {
  color: #f58a42;
}

.videoAiInsightSuggestionCard {
  min-height: 210px;
}

.videoAiInsightSuggestionCard header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.videoAiInsightSuggestionCard:nth-child(1) header > span {
  background: #e9f3ff;
  color: #2783d8;
}

.videoAiInsightSuggestionCard:nth-child(2) header > span {
  background: #e8f8f3;
  color: #0f9f79;
}

.videoAiInsightSuggestionCard:nth-child(3) header > span {
  background: #f0edff;
  color: #6957e8;
}

.videoAiInsightSuggestionCard:nth-child(4) header > span {
  background: #fff3df;
  color: #d97706;
}

.videoAiInsightSuggestionCard header em {
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-2);
  padding: 4px 8px;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.videoAiInsightSuggestionCard > small {
  margin-top: auto;
  color: var(--hot-video-accent);
  font-size: 13px;
  font-weight: 850;
}

.videoAiInsightActions > h3 {
  margin: 0 0 2px;
}

.videoAiInsightActions article {
  min-height: 68px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--hot-video-border);
  padding: 9px 4px;
}

.videoAiInsightActions article:first-of-type {
  border-top: 0;
}

.videoAiInsightActionIndex {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hot-video-accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
}

.videoAiInsightActions article > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.videoAiInsightActions article > div strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
}

.videoAiInsightActions article > small {
  color: var(--text-3);
  font-size: 13px;
  white-space: nowrap;
}

.videoAiInsightActions article > em {
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.videoAiInsightActions article > em.priority-high {
  background: #fff0ed;
  color: #dc542f;
}

.videoAiInsightActions article > em.priority-medium {
  background: #fff6e6;
  color: #c87908;
}

.videoAiInsightActions article > em.priority-low {
  background: #e9f8f3;
  color: #0f9f79;
}

.videoAiInsightTranscript > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.videoAiInsightTranscript > header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.videoAiInsightTranscript > header > div:first-child > span {
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-3);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 850;
}

.videoAiInsightTranscript > header button,
.videoAiInsightState button,
.videoAiInsightFooter button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--hot-video-border);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 0 15px;
  font-size: 14px;
  font-weight: 880;
}

.videoAiInsightTranscript > header button:disabled,
.videoAiInsightFooter button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.videoAiInsightTranscriptNotice {
  border-left: 3px solid #f59e0b;
  background: #fff9ed;
  color: #8a5a09;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.6;
}

.videoAiInsightTranscriptEmpty {
  color: var(--text-3);
  padding: 18px 2px;
  font-size: 14px;
  text-align: center;
}

.videoAiInsightTranscript > div:last-child {
  display: grid;
  gap: 0;
}

.videoAiInsightTranscript article {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  border-top: 1px solid var(--hot-video-border);
  padding: 10px 2px;
}

.videoAiInsightTranscript article:first-child {
  border-top: 0;
}

.videoAiInsightTranscript time {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--hot-video-accent);
  font-size: 13px;
  font-weight: 900;
}

.videoAiInsightTranscript time span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 750;
}

.videoAiInsightTranscript time span::before {
  content: '-';
  margin-right: 4px;
}

.videoAiInsightTranscriptActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.videoAiInsightTranscriptStructure {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 2px 0 4px;
}

.videoAiInsightTranscriptStructure strong {
  color: var(--text-3);
  font-size: 13px;
}

.videoAiInsightTranscriptStructure span {
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-2);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
}

.videoAiInsightTranscript article p {
  display: grid;
  gap: 4px;
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.65;
}

.videoAiInsightTranscript article p span {
  color: var(--text-3);
  font-size: 13px;
}

.videoAiInsightFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--hot-video-border);
  background: var(--surface-panel);
  padding: 14px 22px;
}

.videoAiInsightFooter button.primary {
  min-width: 132px;
  border-color: var(--hot-video-accent);
  background: var(--hot-video-accent);
  color: #ffffff;
}

.videoAiInsightState {
  min-height: 430px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
  color: var(--text-3);
  padding: 32px;
  text-align: center;
}

.videoAiInsightStateIcon {
  width: 50px;
  height: 50px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  animation: videoAiInsightPulse 1.3s ease-in-out infinite;
}

.videoAiInsightState strong {
  color: var(--text-1);
  font-size: 15px;
}

.videoAiInsightState > span:not(.videoAiInsightStateIcon) {
  max-width: 520px;
  font-size: 12px;
  line-height: 1.6;
}

.videoAiInsightState.is-error {
  color: #c2410c;
}

.videoAiInsightLoadingLines {
  width: min(520px, 78vw);
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.videoAiInsightLoadingLines i {
  height: 9px;
  border-radius: 999px;
  background: var(--surface-muted);
  animation: videoAiInsightLine 1.2s ease-in-out infinite;
}

.videoAiInsightLoadingLines i:nth-child(2) {
  width: 88%;
  animation-delay: 0.1s;
}

.videoAiInsightLoadingLines i:nth-child(3) {
  width: 72%;
  animation-delay: 0.2s;
}

.videoAiInsightLoadingLines i:nth-child(4) {
  width: 54%;
  animation-delay: 0.3s;
}

@keyframes videoAiInsightPulse {
  50% { opacity: 0.55; }
}

@keyframes videoAiInsightLine {
  50% { background: var(--hot-video-soft); }
}

@media (max-width: 1040px) {
  .videoAiInsightSummaryGrid {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .videoAiInsightPerformanceCard {
    grid-column: 1 / -1;
  }

  .videoAiInsightSuggestionGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .videoAiInsightSource {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .videoAiInsightMedia {
    width: 200px;
    height: 320px;
  }
}

@media (max-width: 720px) {
  .videoAiInsightHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .videoAiInsightHeaderActions {
    width: 100%;
    flex-wrap: wrap;
  }

  .videoAiInsightEvidence {
    margin-right: auto;
  }

  .videoAiInsightSource,
  .videoAiInsightSummaryGrid,
  .videoAiInsightPairGrid,
  .videoAiInsightSuggestionGrid {
    grid-template-columns: 1fr;
  }

  .videoAiInsightMedia {
    width: min(280px, 100%);
    height: auto;
    aspect-ratio: 9 / 16;
    justify-self: center;
  }

  .videoAiInsightPerformanceCard {
    grid-column: auto;
  }

  .videoAiInsightMetrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .videoAiInsightMetrics > span,
  .videoAiInsightMetrics > span:first-child {
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid var(--hot-video-border);
    padding: 8px 0;
  }

  .videoAiInsightActions article {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .videoAiInsightActions article > small {
    display: none;
  }

  .videoAiInsightTranscript > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .videoAiInsightFooter {
    flex-wrap: wrap;
  }

  .videoAiInsightFooter button {
    flex: 1 1 128px;
  }
}

.mediaScriptRewritePage {
  width: min(1480px, 100%);
  display: grid;
  gap: 16px;
  margin: 0 auto;
  padding: 20px 28px 36px;
}

.mediaScriptRewriteHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.mediaScriptRewriteHeader > div {
  display: grid;
  gap: 6px;
}

.mediaScriptRewriteHeader a {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.mediaScriptRewriteHeader h1 {
  color: var(--text-1);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0;
}

.mediaScriptRewriteHeader p {
  color: var(--text-3);
  font-size: 14px;
}

.mediaScriptRewriteLayout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.mediaScriptRewriteLayout > form {
  position: sticky;
  top: 16px;
  min-width: 0;
}

.mediaScriptRewriteControls {
  border-radius: 8px;
}

.mediaScriptRewriteControls .cuiPanelBody {
  display: grid;
  gap: 17px;
}

.mediaScriptRewriteControls .cuiField {
  min-width: 0;
}

.mediaScriptRewriteControls .cuiInput,
.mediaScriptRewriteControls .cuiSelect,
.mediaScriptRewriteControls .cuiTextarea {
  width: 100%;
}

.mediaScriptRewriteControls .cuiTextarea {
  min-height: 116px;
  resize: vertical;
}

.mediaScriptRewriteSource {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--hot-video-border);
  padding-bottom: 14px;
}

.mediaScriptRewriteSource img {
  width: 58px;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  object-fit: cover;
}

.mediaScriptRewriteSource div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.mediaScriptRewriteSource strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaScriptRewriteSource span {
  color: var(--text-3);
  font-size: 12px;
}

.mediaScriptRewriteSuggestions {
  display: grid;
  gap: 9px;
}

.mediaScriptRewriteSuggestions > strong {
  color: var(--text-2);
  font-size: 13px;
}

.mediaScriptRewriteSuggestions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mediaScriptRewriteSuggestions > div > span {
  color: var(--text-3);
  font-size: 13px;
}

.mediaScriptRewriteResults {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.mediaScriptRewriteResultsHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 2px 0;
}

.mediaScriptRewriteResultsHeader div {
  display: grid;
  gap: 3px;
}

.mediaScriptRewriteResultsHeader h2 {
  color: var(--text-1);
  font-size: 19px;
  letter-spacing: 0;
}

.mediaScriptRewriteResultsHeader p,
.mediaScriptRewriteResultsHeader > span {
  color: var(--text-3);
  font-size: 12px;
}

.mediaScriptRewriteScript {
  display: grid;
  gap: 14px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-light);
  padding: 18px 20px;
}

.mediaScriptRewriteScript.is-source {
  border-left: 3px solid var(--hot-video-accent);
}

.mediaScriptRewriteScript > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mediaScriptRewriteScript > header span {
  color: var(--hot-video-accent);
  font-size: 14px;
  font-weight: 900;
}

.mediaScriptRewriteScript > header em {
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-3);
  padding: 4px 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.mediaScriptRewriteStructure {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.mediaScriptRewriteStructure strong {
  margin-right: 2px;
  color: var(--text-3);
  font-size: 12px;
}

.mediaScriptRewriteStructure span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--hot-video-accent) 9%, var(--surface-panel));
  color: var(--text-2);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 750;
}

.mediaScriptRewriteTimeline {
  display: grid;
}

.mediaScriptRewriteTimeline > div {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 12px;
}

.mediaScriptRewriteTimeline > div:nth-child(even) {
  border-radius: 6px;
  background: var(--surface-muted);
}

.mediaScriptRewriteTimeline time {
  color: var(--hot-video-accent);
  font-size: 12px;
  font-weight: 850;
}

.mediaScriptRewriteTimeline p,
.mediaScriptRewriteContent,
.mediaScriptRewriteTranslation p {
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
}

.mediaScriptRewriteScript > small {
  color: var(--text-3);
  font-size: 11px;
}

.mediaScriptRewriteTranslation {
  display: grid;
  gap: 6px;
  border-left: 2px solid var(--hot-video-accent);
  background: var(--surface-muted);
  padding: 10px 12px;
}

.mediaScriptRewriteTranslation strong {
  color: var(--text-3);
  font-size: 12px;
}

.mediaScriptRewriteTranslation p {
  color: var(--text-2);
  font-size: 13px;
}

.mediaScriptRewriteScript > footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--hot-video-border);
  padding-top: 12px;
}

.mediaScriptRewriteState,
.mediaScriptRewriteMissing {
  width: min(760px, calc(100% - 32px));
  min-height: 360px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  margin: 30px auto;
  color: var(--text-3);
  text-align: center;
}

.mediaScriptRewriteState span {
  width: min(520px, 80vw);
  height: 18px;
  border-radius: 4px;
  background: var(--surface-muted);
}

.mediaScriptRewriteState span:nth-child(2) {
  width: min(420px, 68vw);
}

.mediaScriptRewriteMissing h1 {
  color: var(--text-1);
  font-size: 22px;
  letter-spacing: 0;
}

.mediaScriptRewriteMissing p {
  max-width: 520px;
  font-size: 14px;
  line-height: 1.6;
}

.mediaScriptRewriteReturn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  background: var(--hot-video-accent);
  color: #ffffff;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
}

@media (max-width: 980px) {
  .mediaScriptRewriteLayout {
    grid-template-columns: 1fr;
  }

  .mediaScriptRewriteLayout > form {
    position: static;
  }
}

@media (max-width: 640px) {
  .mediaScriptRewritePage {
    padding: 16px 14px 28px;
  }

  .mediaScriptRewriteHeader h1 {
    font-size: 23px;
  }

  .mediaScriptRewriteResultsHeader,
  .videoAiInsightTranscriptActions {
    align-items: flex-start;
    flex-direction: column;
  }

  .mediaScriptRewriteTimeline > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .mediaScriptRewriteScript {
    padding: 16px 14px;
  }
}

.videoMonitorPage {
  gap: 10px;
  padding: 16px 22px;
}

.videoMonitorPage > .videoMonitorTabs,
.videoMonitorPage > .videoMonitorPanel {
  width: min(1180px, 100%);
  justify-self: center;
}

.videoMonitorTabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  border-bottom: 1px solid var(--hot-video-border);
  background: transparent;
}

.videoMonitorTabs button {
  position: relative;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  padding: 0 4px;
  font-size: 15px;
  font-weight: 900;
}

.videoMonitorTabs button.active {
  color: var(--hot-video-accent);
}

.videoMonitorTabs button.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--hot-video-accent);
}

.videoMonitorPanel {
  display: grid;
  gap: 14px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--hot-video-panel);
  box-shadow: var(--shadow-light);
  padding: 20px 28px 18px;
}

.videoMonitorCreatePanel {
  width: 100% !important;
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  row-gap: 18px;
  padding: 20px 28px 22px;
}

.videoMonitorCreatePanel .videoMonitorHero {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  border-bottom: 1px solid var(--hot-video-border);
  padding-bottom: 16px;
}

.videoMonitorCreatePanel .videoMonitorHero p {
  max-width: 860px;
}

.videoMonitorCreatePanel .videoMonitorBlock {
  min-height: 194px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.videoMonitorCreatePanel .videoMonitorBlock:first-of-type {
  grid-column: 1;
  grid-row: 2;
}

.videoMonitorCreatePanel .videoMonitorDurationBlock {
  grid-column: 1;
  grid-row: 3;
  min-height: 116px;
}

.videoMonitorCreatePanel .videoMonitorFooter {
  grid-column: 1;
  grid-row: 4;
}

.videoMonitorCreatePanel .videoMonitorLivePanel {
  grid-column: 1 / -1;
}

.videoMonitorAccountBlock {
  order: 1;
}

.videoMonitorScheduleBlock {
  order: 2;
}

.videoMonitorDurationBlock {
  order: 3;
}

.videoMonitorFooter {
  order: 4;
}

.videoMonitorHero {
  max-width: 720px;
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0 auto;
  text-align: center;
}

.videoMonitorHero h1,
.videoMonitorHistoryHeader h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 22px;
  font-weight: 950;
  letter-spacing: 0;
}

.videoMonitorHero p,
.videoMonitorHistoryHeader p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}

.videoMonitorModeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(716px, 100%);
  margin: 4px auto 0;
}

.videoMonitorModeGrid button,
.videoMonitorDurationGrid button {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
  padding: 13px 16px;
  text-align: left;
}

.videoMonitorModeGrid button {
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
}

.videoMonitorModeGrid button svg {
  margin-top: 1px;
  color: var(--text-3);
}

.videoMonitorModeGrid button strong,
.videoMonitorDurationGrid button span {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 930;
}

.videoMonitorModeGrid button span {
  grid-column: 2;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.videoMonitorModeGrid button.active,
.videoMonitorDurationGrid button.active {
  border-color: var(--primary-border);
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  box-shadow: inset 0 0 0 1px var(--primary-border);
}

.videoMonitorModeGrid button.active svg,
.videoMonitorModeGrid button.active strong,
.videoMonitorDurationGrid button.active span {
  color: var(--hot-video-accent);
}

.videoMonitorBlock {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--hot-video-border);
  padding-top: 14px;
}

.videoMonitorBlock > header {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
}

.videoMonitorBlock h2 {
  position: relative;
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 950;
}

.videoMonitorBlock h2::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: var(--hot-video-accent);
  opacity: 0.72;
}

.videoMonitorBlock > header span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
  display: none;
}

.videoMonitorSearch {
  height: 46px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-self: stretch;
  overflow: hidden;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--control-bg);
}

.videoMonitorSearch input {
  min-width: 0;
  flex: 1 1;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
}

.videoMonitorSearch button {
  width: 56px;
  height: 100%;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--hot-video-border);
  background: var(--hot-video-accent);
  color: #ffffff;
}

.videoMonitorPreview {
  min-height: 132px;
  display: grid;
  place-items: center;
  gap: 5px;
  border: 1px dashed #d8dde6;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--text-3);
  padding: 16px 20px;
  text-align: center;
}

.videoMonitorPreview > strong {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 900;
}

.videoMonitorPreview > span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.videoMonitorPreview.hasVideo {
  min-height: 74px;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  place-items: stretch;
  align-items: center;
  border-style: solid;
  background: var(--hot-video-panel);
  text-align: left;
}

.videoMonitorPreviewCover {
  width: 72px;
  height: 96px;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  background: #eef1f5;
}

.videoMonitorPreviewIcon {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.videoMonitorPreview.hasVideo div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.videoMonitorPreview.hasVideo p {
  overflow: hidden;
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoMonitorPreview.hasVideo button,
.videoMonitorHistoryHeader button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 850;
}

.videoMonitorDurationGrid {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 38px;
  flex-wrap: wrap;
}

.videoMonitorDurationGrid button {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
  padding: 0;
}

.videoMonitorDurationGrid button::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 1px solid var(--hot-video-border);
  border-radius: 999px;
  background: var(--control-bg);
}

.videoMonitorDurationGrid button.active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.videoMonitorDurationGrid button.active::before {
  border: 4px solid var(--hot-video-accent);
  background: #ffffff;
}

.videoMonitorDurationGrid button small {
  display: none;
}

.videoMonitorScheduleBlock {
  padding-top: 14px;
}

.videoMonitorScheduleBlock .videoMonitorBlock > header span,
.videoMonitorScheduleBlock header span {
  display: inline;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.videoMonitorDateRange {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.videoMonitorDateRange label {
  min-width: 190px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--hot-video-border);
  color: var(--text-2);
}

.videoMonitorDateRange label span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
  white-space: nowrap;
}

.videoMonitorDateRange input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  font-size: 12px;
  font-weight: 820;
}

.videoMonitorDateRange em {
  color: var(--text-2);
  font-style: normal;
  font-weight: 900;
}

.videoMonitorDateRange svg {
  color: var(--text-3);
}

.videoMonitorFooter {
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border: 0;
  border-top: 1px solid var(--hot-video-border);
  border-radius: 0;
  background: transparent;
  padding: 16px 0 0;
}

.videoMonitorPrimary {
  min-width: 112px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  background: var(--hot-video-accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 930;
}

.videoMonitorPrimary:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.videoMonitorFooter span {
  flex-basis: 100%;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.5;
  text-align: left;
}

.videoMonitorHistoryPanel {
  gap: 16px;
  width: 100% !important;
  max-width: none;
  align-content: start;
  padding: 16px 20px 18px;
}

.videoMonitorHistoryHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--hot-video-border);
  margin: 0;
  padding: 0 0 14px;
}

.videoMonitorHistoryHeader > div {
  display: grid;
  gap: 8px;
}

.videoMonitorHistoryList {
  display: grid;
  gap: 12px;
}

.videoMonitorHistoryItem {
  display: grid;
  gap: 14px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--control-bg);
  padding: 16px;
}

.videoMonitorHistoryItem > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.videoMonitorHistoryItem strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 930;
}

.videoMonitorHistoryItem span {
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoMonitorHistoryItem dl {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.videoMonitorHistoryItem dl div {
  display: grid;
  gap: 4px;
  border-radius: 8px;
  background: var(--hot-video-soft);
  padding: 9px 10px;
}

.videoMonitorHistoryItem dt,
.videoMonitorHistoryItem dd {
  margin: 0;
}

.videoMonitorHistoryItem dt {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 760;
}

.videoMonitorHistoryItem dd {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 900;
}

.hotVideoActions button.active,
.hotTagName button.active {
  border-color: var(--primary-border);
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.mediaActionToast {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 80;
  min-width: 180px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-medium);
  color: var(--text-1);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 880;
}

.hotVideoTitleLink {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotVideoTitleLink:hover {
  color: var(--hot-video-accent);
}

.mediaVideoDetailPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
  padding: 22px;
  color: var(--text-1);
}

.mediaVideoBreadcrumb,
.mediaVideoDetailTabs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mediaVideoBreadcrumb {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 820;
}

.mediaVideoBreadcrumb a {
  color: var(--text-3);
  text-decoration: none;
}

.mediaVideoBreadcrumb strong,
.mediaVideoBreadcrumb a:hover {
  color: var(--text-1);
}

.mediaVideoDetailTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mediaVideoDetailTitle h1 {
  min-width: 0;
  margin: 0;
  color: var(--text-1);
  font-size: 22px;
  font-weight: 950;
  letter-spacing: 0;
}

.mediaVideoReplicaPrimary {
  flex: 0 0 auto;
  min-width: 136px;
  min-height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 8px;
  background: var(--hot-video-accent, var(--primary));
  color: #ffffff !important;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none !important;
}

.mediaVideoReplicaPrimary:hover {
  color: #ffffff !important;
  filter: brightness(0.95);
}

.mediaVideoDetailHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;
}

.mediaVideoDetailMain,
.mediaVideoCreatorCard,
.mediaVideoDetailPanel {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-light);
}

.mediaVideoDetailMain {
  position: relative;
  min-height: 360px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding: 16px;
}

.mediaVideoPoster {
  position: relative;
  width: 206px;
  height: 274px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--tag-bg);
}

.mediaVideoPoster img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mediaVideoPoster span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.18);
}

.mediaVideoCopy {
  width: 206px;
  min-height: 40px;
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  background: var(--hot-video-accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 920;
}

.mediaVideoCopy.copied {
  background: var(--success);
}

.mediaVideoMeta {
  min-width: 0;
  display: grid;
  gap: 18px;
  padding-top: 18px;
}

.mediaVideoMeta h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 930;
}

.mediaVideoMeta p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 780;
}

.mediaVideoMeta b {
  color: var(--text-3);
  font-weight: 820;
}

.mediaVideoMeta a {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hot-video-accent);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.mediaVideoHeroActions {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  gap: 8px;
}

.mediaVideoHeroActions button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
}

.mediaVideoHeroActions button.active {
  border-color: var(--primary-border);
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.mediaVideoCreatorCard {
  overflow: hidden;
}

.mediaVideoCreatorCard header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
}

.mediaVideoCreatorCard img {
  width: 86px;
  height: 86px;
  border-radius: 999px;
  object-fit: cover;
}

.mediaVideoCreatorCard h2 {
  margin: 0 0 6px;
  color: var(--text-1);
  font-size: 17px;
  font-weight: 950;
}

.mediaVideoCreatorCard span {
  display: block;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 780;
}

.mediaVideoCreatorCard em {
  width: max-content;
  display: inline-flex;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--text-2);
  padding: 6px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 820;
}

.mediaVideoCreatorCard dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  margin: 0;
  padding: 22px;
}

.mediaVideoCreatorCard dl div {
  display: grid;
  gap: 8px;
  padding: 12px;
  text-align: center;
}

.mediaVideoCreatorCard dt,
.mediaVideoCreatorCard dd {
  margin: 0;
}

.mediaVideoCreatorCard dd {
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
  order: -1;
}

.mediaVideoCreatorCard dt {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 820;
}

.mediaVideoDetailTabs {
  border-bottom: 1px solid var(--line-dark);
  padding-left: 16px;
}

.mediaVideoDetailTabs button {
  position: relative;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  padding: 0 0;
  font-size: 14px;
  font-weight: 900;
}

.mediaVideoDetailTabs button.active {
  color: var(--text-1);
}

.mediaVideoDetailTabs button.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--hot-video-accent);
}

.mediaVideoDetailPanel {
  display: grid;
  gap: 20px;
  padding: 24px 16px;
}

.mediaVideoDetailPanel h2,
.mediaVideoTrendHeader h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
  font-weight: 950;
}

.mediaVideoDetailPanel h2 span {
  margin-left: 10px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 780;
}

.mediaVideoMetricGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.mediaVideoMetricGrid article {
  min-height: 118px;
  display: grid;
  align-content: space-between;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 20px 16px;
}

.mediaVideoMetricGrid strong {
  color: var(--text-1);
  font-size: 24px;
  font-weight: 950;
}

.mediaVideoMetricGrid span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 850;
}

.mediaVideoTrendHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mediaVideoTrendHeader div {
  display: inline-flex;
  gap: 8px;
}

.mediaVideoTrendHeader button {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}

.mediaVideoTrendHeader button.active {
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.mediaVideoTrendChart {
  width: 100%;
  height: 270px;
}

.mediaVideoTrendChart line {
  stroke: var(--line-dark);
}

.mediaVideoTrendChart path {
  fill: none;
  stroke: var(--hot-video-accent);
  stroke-width: 3;
}

.mediaVideoTrendChart circle {
  fill: var(--hot-video-accent);
}

.mediaVideoTrendChart text {
  fill: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.mediaVideoEmptyBox {
  min-height: 130px;
  display: grid;
  place-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 820;
}

.mediaSimilarVideoGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.mediaSimilarVideoGrid article {
  min-width: 0;
  display: grid;
  gap: 10px;
  border-radius: 8px;
  background: var(--surface-panel-strong);
  padding: 14px;
}

.mediaSimilarVideoGrid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
}

.mediaSimilarVideoGrid strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaSimilarVideoGrid span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
}

.mediaVideoDetailState {
  min-height: 300px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 860;
}

.mediaVideoDetailPage {
  background: var(--surface-muted);
  gap: 14px;
  padding: 18px 22px 24px;
}

.mediaVideoDetailHero {
  grid-template-columns: minmax(0, 1fr) 464px;
}

.mediaVideoDetailMain,
.mediaVideoCreatorCard,
.mediaVideoDetailPanel {
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: none;
}

.mediaVideoDetailMain {
  min-height: 360px;
  grid-template-columns: 206px minmax(0, 1fr);
  gap: 24px;
  padding: 16px;
}

.mediaVideoLeftRail {
  display: grid;
  gap: 8px;
}

.mediaVideoPoster {
  height: 274px;
}

.mediaVideoMeta {
  align-content: start;
  gap: 20px;
  padding: 18px 0 0;
}

.mediaVideoMeta p em {
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--text-2);
  padding: 5px 12px;
  font-style: normal;
  font-weight: 820;
}

.mediaVideoMetaActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mediaVideoHeroActions {
  gap: 8px;
}

.mediaVideoHeroActions a,
.mediaVideoHeroActions button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
  text-decoration: none;
}

.mediaVideoReplica {
  width: max-content;
  min-width: 148px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  background: var(--hot-video-accent, var(--primary));
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 920;
  text-decoration: none !important;
}

.mediaVideoReplica:hover {
  background: color-mix(in srgb, var(--hot-video-accent) 88%, #000000);
  color: #ffffff;
}

.mediaVideoLeftRail .mediaVideoReplica {
  width: 206px;
}

.mediaVideoHeroActions a:hover,
.mediaVideoHeroActions button:hover {
  border-color: var(--primary-border);
  color: var(--hot-video-accent);
}

.mediaVideoCreatorCard header {
  min-height: 134px;
}

.mediaVideoCreatorCard dl {
  min-height: 222px;
  align-content: center;
}

.mediaVideoDetailTabs {
  position: sticky;
  top: 0;
  z-index: 5;
  gap: 28px;
  background: var(--surface-muted);
  padding: 0 16px;
}

.mediaVideoDetailPanel {
  scroll-margin-top: 62px;
  padding: 0;
  overflow: hidden;
}

.mediaVideoOverviewPanel,
.mediaVideoTrendPanel,
.mediaVideoProductsPanel,
.mediaVideoSimilarPanel {
  background: var(--surface-panel);
}

.mediaVideoDetailPanel > h2,
.mediaVideoTrendHeader {
  min-height: 80px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(226, 232, 240, 0.72);
  padding: 0 20px;
}

.mediaVideoMetricGrid,
.mediaVideoTrendMetrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin: 16px;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 18px;
}

.mediaVideoTrendMetrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 14px;
}

.mediaVideoMetricGrid article,
.mediaVideoTrendMetrics article {
  min-height: 132px;
  display: grid;
  align-content: space-between;
  border-radius: 8px;
  background: #ffffff;
  padding: 22px 16px 20px;
}

.mediaVideoMetricGrid strong,
.mediaVideoTrendMetrics strong {
  color: var(--text-1);
  font-size: 26px;
  font-weight: 950;
}

.mediaVideoMetricGrid span,
.mediaVideoTrendMetrics span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 850;
}

.mediaVideoTrendHeader {
  justify-content: space-between;
  background: #ffffff;
}

.mediaVideoTrendControls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mediaVideoTrendControls span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
}

.mediaVideoTrendControls button {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: #f5f6f8;
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}

.mediaVideoTrendControls button.active {
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.mediaVideoChartShell {
  margin: 0 16px 24px;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 24px;
}

.mediaVideoChartToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.mediaVideoChartToolbar > span {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 880;
}

.mediaVideoChartToolbar div {
  display: inline-flex;
  gap: 8px;
}

.mediaVideoChartToolbar button {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-2);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
}

.mediaVideoChartToolbar button.active {
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.mediaVideoTrendChart {
  height: 300px;
}

.mediaVideoProductTable {
  margin: 16px;
  overflow: hidden;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 12px;
}

.mediaVideoProductTable .head {
  min-height: 56px;
  display: grid;
  grid-template-columns: 1.5fr 0.85fr 0.85fr 0.85fr 0.85fr 0.8fr 0.9fr 0.7fr;
  align-items: center;
  border-radius: 8px 8px 0 0;
  background: #eef1f5;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 930;
}

.mediaVideoProductTable .head span {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 18px;
}

.mediaVideoProductTable .head span.active {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-muted));
  color: var(--hot-video-accent);
}

.mediaVideoProductTable .empty {
  min-height: 166px;
  display: grid;
  place-items: center;
  gap: 8px;
  background: #ffffff;
  border-radius: 0 0 8px 8px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 820;
}

.mediaVideoSimilarPanel {
  padding-bottom: 24px;
}

.mediaSimilarVideoGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 16px 0;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 18px;
}

.mediaSimilarVideoGrid article {
  overflow: hidden;
  gap: 0;
  background: #ffffff;
  padding: 0;
}

.mediaSimilarVideoGrid article > header {
  min-height: 98px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
}

.mediaSimilarVideoGrid article > header img {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
}

.mediaSimilarVideoGrid article > header div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.mediaSimilarVideoGrid article > header strong,
.mediaSimilarVideoGrid article > header em,
.mediaSimilarVideoGrid article > header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaSimilarVideoGrid article > header strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
}

.mediaSimilarVideoGrid article > header em {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--text-2);
  padding: 4px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 780;
}

.mediaSimilarVideoGrid article > header span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
}

.mediaSimilarCover {
  position: relative;
  width: calc(100% - 64px);
  margin: 24px auto 12px;
}

.mediaSimilarCover > img {
  width: 100%;
  aspect-ratio: 1 / 1.08;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.mediaSimilarCover > button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  transform: translate(-50%, -50%);
}

.mediaSimilarCover dl {
  position: absolute;
  right: 8px;
  bottom: 10px;
  display: grid;
  gap: 7px;
  margin: 0;
}

.mediaSimilarCover dl div {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.52);
  color: #ffffff;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 850;
}

.mediaSimilarCover dt,
.mediaSimilarCover dd {
  margin: 0;
}

.mediaSimilarVideoGrid article > p {
  min-height: 44px;
  overflow: hidden;
  margin: 0;
  color: var(--text-1);
  padding: 0 20px 18px;
  font-size: 13px;
  font-weight: 820;
  line-height: 1.55;
}

.mediaVideoDetailPage {
  background: #f3f5f8;
  gap: 14px;
  padding: 18px 22px 24px;
}

.mediaVideoDetailTitle {
  min-height: 48px;
}

.mediaVideoReplicaPrimary {
  border: 0 !important;
  background: var(--hot-video-accent, #7c3aed) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.mediaVideoReplicaPrimary:hover,
.mediaVideoReplicaPrimary:focus-visible {
  background: var(--hot-video-accent, #7c3aed) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  outline: none;
}

.mediaVideoDetailMain,
.mediaVideoCreatorCard,
.mediaVideoDetailPanel {
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.mediaVideoDetailPanel {
  overflow: hidden;
  padding: 0 !important;
}

.mediaVideoDetailPanel > h2,
.mediaVideoTrendHeader {
  min-height: 68px;
  border-bottom: 1px solid #eef1f5 !important;
  background: #ffffff;
  padding: 0 16px !important;
}

.mediaVideoMetricGrid,
.mediaVideoTrendMetrics,
.mediaVideoChartShell,
.mediaVideoProductTable,
.mediaSimilarVideoGrid {
  margin: 16px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f7f8fa !important;
  box-shadow: none !important;
}

.mediaVideoMetricGrid,
.mediaVideoTrendMetrics {
  padding: 16px !important;
}

.mediaVideoMetricGrid article,
.mediaVideoTrendMetrics article,
.mediaVideoProductTable .empty,
.mediaSimilarVideoGrid article {
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.mediaVideoChartShell {
  padding: 24px !important;
}

.mediaVideoChartToolbar button {
  background: #ffffff !important;
}

.mediaVideoProductTable {
  padding: 12px !important;
}

.mediaVideoProductTable .head {
  border: 0 !important;
  background: #eef1f5 !important;
}

.mediaSimilarVideoGrid {
  padding: 16px !important;
}

@media (max-width: 1200px) {
  .videoMonitorDurationGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .videoMonitorHistoryItem dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.mediaPrototypePage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
  padding: 22px;
}

.mediaHero,
.mediaFilterBar,
.mediaToolbar,
.mediaMetricCard,
.mediaDetailPanel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.mediaHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
}

.mediaEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 850;
}

.mediaHero h1 {
  margin: 8px 0 6px;
  color: var(--text);
  font-size: 26px;
  font-weight: 950;
  letter-spacing: 0;
}

.mediaHero p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.mediaHeroActions,
.mediaTableActions,
.mediaSegment,
.mediaToolbar > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mediaHeroActions button,
.mediaSearchBox button,
.mediaTableActions button,
.mediaTableActions a,
.mediaDetailCover button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
}

.mediaHeroActions button {
  min-height: 36px;
  gap: 7px;
  border-radius: 8px;
  padding: 0 12px;
}

.mediaHeroActions button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.mediaFilterBar {
  display: grid;
  grid-template-columns: minmax(300px, 1.4fr) repeat(6, minmax(130px, 0.65fr));
  gap: 10px;
  padding: 14px;
}

.mediaSearchBox {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 40px;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--input-bg);
  padding: 0 8px 0 13px;
}

.mediaSearchBox input {
  min-width: 0;
  flex: 1 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 760;
}

.mediaSearchBox button {
  height: 28px;
  border-radius: 999px;
  color: var(--primary);
  padding: 0 12px;
}

.mediaFilterSelect,
.mediaSortSelect {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.mediaFilterSelect span,
.mediaSortSelect span,
.mediaToolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.mediaFilterSelect select,
.mediaSortSelect select {
  min-width: 0;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 820;
  outline: 0;
  padding: 0 12px;
}

.mediaToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
}

.mediaSegment {
  padding: 3px;
  border-radius: 999px;
  background: var(--surface);
}

.mediaSegment button {
  min-height: 30px;
  min-width: 52px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}

.mediaSegment button.active {
  background: var(--primary);
  color: #ffffff;
}

.mediaMetricGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.mediaMetricCard {
  display: flex;
  gap: 12px;
  padding: 14px;
}

.mediaMetricCard > span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.mediaMetricCard strong,
.mediaMetricCard em,
.mediaMetricCard small {
  display: block;
}

.mediaMetricCard strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
}

.mediaMetricCard em {
  margin-top: 2px;
  color: var(--text);
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

.mediaMetricCard small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mediaMainGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 14px;
}

.mediaVideoTablePanel {
  min-width: 0;
}

.mediaVideoTablePanel .cuiDataListRow {
  cursor: pointer;
}

.mediaVideoTablePanel .cuiDataListRow.is-selected {
  background: color-mix(in srgb, var(--primary) 7%, var(--panel));
}

.mediaVideoCell,
.mediaCreatorCell {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.mediaCover {
  position: relative;
  width: 54px;
  height: 78px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface);
}

.mediaCover img,
.mediaCreatorCell img,
.mediaDetailCover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mediaCover span,
.mediaCover b {
  position: absolute;
  left: 4px;
  border-radius: 5px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  padding: 3px 4px;
}

.mediaCover span {
  bottom: 4px;
  background: rgba(15, 23, 42, 0.78);
}

.mediaCover b {
  top: 4px;
  background: var(--danger);
}

.mediaVideoText,
.mediaCreatorCell div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.mediaVideoText strong,
.mediaCreatorCell strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaVideoText span,
.mediaVideoText em,
.mediaCreatorCell span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaCreatorCell img {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.mediaStrongMetric {
  color: var(--text);
  font-weight: 950;
}

.mediaTableActions button,
.mediaTableActions a {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  text-decoration: none;
}

.mediaDetailPanel {
  position: sticky;
  top: 88px;
  overflow: hidden;
}

.mediaDetailPanel.empty {
  display: grid;
  min-height: 360px;
  align-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--muted);
  padding: 22px;
  text-align: center;
}

.mediaDetailPanel.empty strong {
  color: var(--text);
  font-size: 16px;
}

.mediaDetailPanel.empty span {
  max-width: 240px;
  font-size: 13px;
  line-height: 1.5;
}

.mediaDetailCover {
  position: relative;
  height: 230px;
  background: var(--surface);
}

.mediaDetailCover button {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
}

.mediaDetailBody {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.mediaDetailTag {
  width: max-content;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  padding: 5px 9px;
}

.mediaDetailBody h2 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.35;
}

.mediaDetailBody p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 730;
  line-height: 1.55;
}

.mediaDetailStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mediaDetailStats span {
  display: grid;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.mediaDetailStats b {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.mediaDetailBody section {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.mediaDetailBody section strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.videoMonitorLivePanel {
  display: grid;
  gap: 16px;
  border-radius: 8px;
  background: #ffffff;
  padding: 18px;
}

.videoMonitorLivePanel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.videoMonitorLivePanel h2,
.videoMonitorTrendPanel h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
}

.videoMonitorLivePanel p {
  max-width: 760px;
  overflow: hidden;
  margin: 6px 0 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoMonitorLivePanel > header > strong {
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
}

.videoMonitorLivePanel > header > strong.status-paused {
  background: color-mix(in srgb, #b45309 13%, var(--surface));
  color: #b45309;
}

.videoMonitorLivePanel > header > strong.status-completed {
  background: color-mix(in srgb, var(--text-3) 13%, var(--surface));
  color: var(--text-2);
}

.videoMonitorLivePanel > header > strong.status-error {
  background: color-mix(in srgb, #b91c1c 10%, var(--surface));
  color: #b91c1c;
}

.videoMonitorLiveStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.videoMonitorLiveStats article {
  min-height: 104px;
  display: grid;
  align-content: space-between;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 18px 16px;
}

.videoMonitorLiveStats strong {
  color: var(--text-1);
  font-size: 24px;
  font-weight: 950;
}

.videoMonitorLiveStats span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 850;
}

.videoMonitorTrendPanel {
  display: grid;
  gap: 12px;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 18px;
}

.videoMonitorTrendPanel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.videoMonitorTrendPanel > header span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
}

.videoMonitorTrendLegend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
}

.videoMonitorTrendLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 850;
}

.videoMonitorTrendLegend span::before {
  content: '';
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

.videoMonitorTrendLegend .likes {
  color: var(--hot-video-accent);
}

.videoMonitorTrendLegend .comments {
  color: #2563eb;
}

.videoMonitorTrendLegend .shares {
  color: #16a34a;
}

.videoMonitorTrendChart {
  width: 100%;
  height: 300px;
  display: block;
}

.videoMonitorTrendChart line {
  stroke: #d9e0ea;
  stroke-width: 1;
}

.videoMonitorTrendChart line.axis {
  stroke: #8f99a8;
  stroke-width: 1.3;
}

.videoMonitorTrendChart path {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.videoMonitorTrendChart path.likes {
  stroke: var(--hot-video-accent);
}

.videoMonitorTrendChart path.comments {
  stroke: #2563eb;
}

.videoMonitorTrendChart path.shares {
  stroke: #16a34a;
}

.videoMonitorTrendChart text {
  fill: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.videoMonitorTrendChart text.yTick {
  text-anchor: end;
}

.videoMonitorSampleList {
  overflow: hidden;
  border-radius: 8px;
  background: #f7f8fa;
}

.videoMonitorSampleList header,
.videoMonitorSampleList article {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(120px, 0.5fr));
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 16px;
}

.videoMonitorSampleList header {
  background: #eef1f5;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
}

.videoMonitorSampleList article {
  border-top: 1px solid #eef1f5;
  background: #ffffff;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
}

.videoMonitorSampleList b {
  color: var(--text-1);
  font-weight: 900;
}

.videoMonitorBreadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 820;
}

.videoMonitorBreadcrumb button {
  border: 0;
  background: transparent;
  color: var(--text-3);
  padding: 0;
  font: inherit;
}

.videoMonitorBreadcrumb strong,
.videoMonitorBreadcrumb button:hover {
  color: var(--text-1);
}

.videoMonitorDetailHero,
.videoMonitorDetailTrend,
.videoMonitorDetailSamples {
  border-radius: 8px;
  background: #ffffff;
}

.videoMonitorDetailHero {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}

.videoMonitorDetailCover {
  position: relative;
  width: 150px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  background: #eef1f5;
}

.videoMonitorDetailCover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.videoMonitorDetailCover span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--hot-video-accent);
  color: #ffffff;
  padding: 8px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.videoMonitorDetailSummary {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 8px 0;
}

.videoMonitorDetailSummary header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.videoMonitorDetailSummary h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
}

.videoMonitorDetailSummary p {
  overflow: hidden;
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoMonitorDetailSummary button,
.videoMonitorDetailTrend > header button,
.videoMonitorHistoryActions button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  background: #f5f6f8;
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}

.videoMonitorDetailMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 174px));
  gap: 14px;
}

.videoMonitorDetailMetrics article {
  min-height: 112px;
  display: grid;
  align-content: space-between;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 18px 16px;
}

.videoMonitorDetailMetrics strong {
  color: var(--text-1);
  font-size: 24px;
  font-weight: 950;
}

.videoMonitorDetailMetrics span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 850;
}

.videoMonitorDetailTrend {
  overflow: hidden;
}

.videoMonitorDetailTrend > header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #eef1f5;
  padding: 0 16px;
}

.videoMonitorDetailTrend h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
  font-weight: 950;
}

.videoMonitorDetailTrend .videoMonitorTrendPanel {
  margin: 16px;
}

.videoMonitorDetailSamples {
  overflow: hidden;
}

.videoMonitorDetailSamples header,
.videoMonitorDetailSamples article {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(140px, 0.5fr));
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 16px;
}

.videoMonitorDetailSamples header {
  background: #eef1f5;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 900;
}

.videoMonitorDetailSamples article {
  border-top: 1px solid #eef1f5;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
}

.videoMonitorDetailSamples b {
  color: var(--text-1);
  font-weight: 900;
}

.videoMonitorHistoryActions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px !important;
  padding: 0 !important;
}

.videoMonitorHistoryActions button:hover,
.videoMonitorDetailTrend > header button:hover,
.videoMonitorDetailSummary button:hover {
  color: var(--hot-video-accent);
}

.videoMonitorHistoryFilters {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 0;
  padding-top: 0;
}

.videoMonitorHistoryFilters strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 850;
}

.videoMonitorHistorySelect {
  position: relative;
  z-index: 5;
}

.videoMonitorHistorySelectNative.cuiSelect {
  min-width: 148px;
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background-color: #f5f6f8;
  color: var(--text-2);
  padding: 0 34px 0 12px;
  font-size: 13px;
  font-weight: 850;
  box-shadow: none;
}

.videoMonitorHistorySelectNative.cuiSelect:focus {
  background-color: #eef0f4;
  color: var(--text-1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hot-video-accent) 14%, transparent);
}

.videoMonitorHistorySelectTrigger {
  min-width: 132px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: #f5f6f8;
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 850;
}

.videoMonitorHistorySelectTrigger svg {
  flex: 0 0 auto;
  transition: transform 160ms ease;
}

.videoMonitorHistorySelect.open .videoMonitorHistorySelectTrigger {
  color: var(--text-1);
  background: #eef0f4;
}

.videoMonitorHistorySelect.open .videoMonitorHistorySelectTrigger svg {
  transform: rotate(180deg);
}

.videoMonitorHistorySelectMenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 148px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid #e2e6ee;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
}

.videoMonitorHistorySelectMenu button {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  padding: 0 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.videoMonitorHistorySelectMenu button:hover,
.videoMonitorHistorySelectMenu button.active {
  background: #eef0f4;
  color: var(--text-1);
}

.videoMonitorHistoryState {
  min-height: 118px;
  display: grid;
  place-items: center;
  gap: 6px;
  border: 1px solid #e2e6ee;
  border-radius: 8px;
  background: #f7f8fa;
  color: var(--text-2);
  padding: 20px;
  text-align: center;
}

.videoMonitorHistoryState strong {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 850;
}

.videoMonitorHistoryState span {
  max-width: 520px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}

.videoMonitorHistoryState.error {
  border-color: rgba(220, 38, 38, 0.22);
  background: #fff7f7;
}

.videoMonitorHistoryState.error svg {
  color: #dc2626;
}

.videoMonitorHistoryCards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  width: 100%;
  padding-top: 10px;
}

.videoMonitorHistoryCard {
  min-width: 0;
  min-height: 330px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  border: 1px solid #d7dce4;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

.videoMonitorHistoryCard header {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
}

.videoMonitorHistoryCard .cover {
  width: 72px;
  height: 92px;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: #eef1f5;
  padding: 0;
}

.videoMonitorHistoryCard .cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.videoMonitorHistoryCard .title {
  max-width: 100%;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--text-1);
  padding: 2px 0 0;
  text-align: left;
  font-size: 13px;
  font-weight: 900;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoMonitorHistoryCard .title:hover {
  color: var(--hot-video-accent);
}

.videoMonitorHistoryCard header span {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 780;
}

.videoMonitorHistoryCountry .hotVideoCountryFlag {
  margin-left: 1px;
}

.videoMonitorHistoryCard header small {
  display: block;
  margin-top: 18px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}

.videoMonitorHistoryPagination {
  margin-top: 2px;
}

.videoMonitorHistoryCard .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 4px;
  background: #f7f8fa;
  margin-top: 10px;
  padding: 6px 8px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 850;
}

.videoMonitorHistoryCard .meta button {
  min-height: 28px;
  margin-left: auto;
  border: 1px solid var(--hot-video-accent);
  border-radius: 999px;
  background: #ffffff;
  color: var(--hot-video-accent);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
}

.videoMonitorHistoryCard .trend {
  position: relative;
  display: grid;
  gap: 7px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 8px;
}

.videoMonitorHistoryCard .trend > span {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 850;
}

.videoMonitorHistoryCard .trend button {
  position: absolute;
  top: 52%;
  left: 50%;
  z-index: 2;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--hot-video-accent);
  color: #ffffff;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 900;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.videoMonitorHistoryCard .trend:hover button {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.02);
}

.videoMonitorHistoryCard .trend svg {
  width: 100%;
  height: 104px;
  display: block;
  border-radius: 8px;
  background: #f7f8fb;
}

.videoMonitorHistoryCard .trend:hover svg {
  filter: saturate(0.88) brightness(0.98);
}

.videoMonitorHistoryCard .trend polyline {
  fill: none;
  stroke: var(--hot-video-accent);
  stroke-width: 2.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
  shape-rendering: geometricPrecision;
}

.videoMonitorHistoryCard .trend .trendGrid {
  stroke: rgba(148, 163, 184, 0.34);
  stroke-width: 1;
}

.videoMonitorHistoryCard .trend .trendDot {
  fill: #ffffff;
  stroke: var(--hot-video-accent);
  stroke-width: 2;
}

.videoMonitorHistoryCard footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 820;
}

.videoMonitorHistoryCard footer b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-1);
  font-weight: 900;
}

.videoMonitorHistoryCard footer button {
  min-height: 28px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 8px;
  background: #f5f6f8;
  color: var(--text-2);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.videoMonitorHistoryCard footer button.deleteHistory {
  margin-left: auto;
  color: #b4233c;
}

.videoMonitorHistoryCard footer button.deleteHistory + button {
  margin-left: 0;
}

.videoMonitorHistoryCard footer button.deleteHistory:hover {
  background: #fff1f2;
  color: #991b31;
}

.videoMonitorDeleteOverlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.38);
  padding: 24px;
}

.videoMonitorDeleteDialog {
  position: relative;
  width: min(420px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  border-radius: 12px;
  background: #ffffff;
  padding: 28px 24px 22px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.videoMonitorDeleteClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
}

.videoMonitorDeleteClose:hover {
  background: #f3f4f6;
  color: var(--text-1);
}

.videoMonitorDeleteIcon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff1f2;
  color: #b4233c;
}

.videoMonitorDeleteDialog h2 {
  margin: 4px 0 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 900;
}

.videoMonitorDeleteDialog p {
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  color: var(--text-2);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 760;
}

.videoMonitorDeleteDialog > div {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.videoMonitorDeleteDialog > div button {
  min-height: 36px;
  border: 1px solid #d7dce4;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text-2);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 900;
}

.videoMonitorDeleteDialog > div button.danger {
  border-color: #b4233c;
  background: #b4233c;
  color: #ffffff;
}

@media (max-width: 1440px) {
  .videoMonitorHistoryCards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .videoMonitorCreatePanel {
    grid-template-columns: 1fr;
  }

  .videoMonitorCreatePanel .videoMonitorBlock:first-of-type,
.videoMonitorCreatePanel .videoMonitorDurationBlock,
.videoMonitorCreatePanel .videoMonitorFooter {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 1120px) {
  .videoMonitorHistoryCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mediaDetailV2Page {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 14px;
  background: #f3f5f8;
  color: var(--text-1);
  padding: 18px 22px 24px;
}

.mediaDetailV2Crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 820;
}

.mediaDetailV2Crumb a {
  color: var(--text-3);
  text-decoration: none;
}

.mediaDetailV2Crumb strong,
.mediaDetailV2Crumb a:hover {
  color: var(--text-1);
}

.mediaDetailV2Header {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mediaDetailV2Header h1 {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--text-1);
  font-size: 22px;
  font-weight: 950;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaDetailV2Replica {
  width: max-content;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 8px;
  background: var(--hot-video-accent, #7c3aed);
  color: #ffffff;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.mediaDetailV2Replica:hover,
.mediaDetailV2Replica:focus-visible {
  color: #ffffff;
  text-decoration: none;
}

.mediaDetailV2Hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;
}

.mediaDetailV2VideoCard,
.mediaDetailV2Creator,
.mediaDetailV2Panel,
.mediaDetailV2State {
  border-radius: 8px;
  background: #ffffff;
}

.mediaDetailV2VideoCard {
  position: relative;
  min-height: 332px;
  display: grid;
  grid-template-columns: 206px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding: 16px;
}

.mediaDetailV2Poster {
  position: relative;
  width: 206px;
  height: 300px;
  overflow: hidden;
  border-radius: 8px;
  background: #eef1f5;
  display: block;
}

.mediaDetailV2Poster img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mediaDetailV2Poster span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.18);
  color: #ffffff;
}

.mediaDetailV2Meta {
  min-width: 0;
  display: grid;
  gap: 18px;
  padding: 18px 60px 0 0;
}

.mediaDetailV2Meta h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 930;
  line-height: 1.45;
}

.mediaDetailV2TitleLink {
  color: inherit;
  text-decoration: none;
}

.mediaDetailV2TitleLink:hover,
.mediaDetailV2TitleLink:focus-visible {
  color: var(--hot-video-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mediaDetailV2Meta dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.mediaDetailV2Meta dl div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mediaDetailV2Meta dt,
.mediaDetailV2Meta dd {
  margin: 0;
  font-size: 14px;
}

.mediaDetailV2Meta dt {
  min-width: 88px;
  color: var(--text-3);
  font-weight: 820;
}

.mediaDetailV2Meta dd {
  color: var(--text-2);
  font-weight: 780;
}

.mediaDetailV2Meta a {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hot-video-accent);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.mediaDetailV2Links {
  display: grid;
  justify-items: start;
  gap: 16px;
}

.mediaDetailV2IconActions {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  gap: 8px;
}

.mediaDetailV2IconActions.hotVideoActions > button,
.mediaDetailV2IconActions.hotVideoActions .hotVideoShareAction > button {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-2);
  box-shadow: none;
}

.mediaDetailV2IconActions.hotVideoActions > button.active,
.mediaDetailV2IconActions.hotVideoActions .hotVideoShareAction > button.active {
  border-color: var(--primary-border);
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.mediaDetailV2ListActions {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mediaDetailV2VideoCard .mediaDetailV2ListActions.hotVideoActions > button,
.mediaDetailV2VideoCard .mediaDetailV2ListActions.hotVideoActions > .hotVideoShareAction > button {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid #d9deea !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #667085 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.mediaDetailV2VideoCard .mediaDetailV2ListActions.hotVideoActions > button.active,
.mediaDetailV2VideoCard .mediaDetailV2ListActions.hotVideoActions > .hotVideoShareAction > button.active {
  border-color: #8b76ff !important;
  background: #f1edff !important;
  color: #6d5dfc !important;
}

.mediaDetailV2VideoCard .mediaDetailV2ListActions .mediaDetailV2ActionButton {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid #d9deea !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #667085 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  line-height: 1 !important;
}

.mediaDetailV2VideoCard .mediaDetailV2ListActions .mediaDetailV2ActionButton.active,
.mediaDetailV2VideoCard .mediaDetailV2ListActions .mediaDetailV2ActionButton:hover,
.mediaDetailV2VideoCard .mediaDetailV2ListActions .mediaDetailV2ActionButton:focus-visible {
  border-color: #8b76ff !important;
  background: #f1edff !important;
  color: #6d5dfc !important;
}

.mediaDetailV2Creator {
  overflow: hidden;
}

.mediaDetailV2Creator header {
  min-height: 134px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
}

.mediaDetailV2CreatorMainLink {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  color: inherit;
  text-decoration: none;
}

.mediaDetailV2CreatorMainLink:hover h2 {
  color: var(--hot-video-accent);
}

.mediaDetailV2Creator header img {
  width: 86px;
  height: 86px;
  border-radius: 999px;
  object-fit: cover;
}

.mediaDetailV2Creator h2 {
  margin: 0 0 6px;
  color: var(--text-1);
  font-size: 17px;
  font-weight: 950;
}

.mediaDetailV2Creator span {
  display: block;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 780;
}

.mediaDetailV2Creator em {
  width: max-content;
  display: inline-flex;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--text-2);
  padding: 6px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 820;
}

.mediaDetailV2Creator dl {
  min-height: 198px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  margin: 0;
  padding: 18px 22px 22px;
}

.mediaDetailV2Creator dl div {
  display: grid;
  gap: 8px;
  padding: 12px;
  text-align: center;
}

.mediaDetailV2Creator dt,
.mediaDetailV2Creator dd {
  margin: 0;
}

.mediaDetailV2Creator dd {
  color: var(--text-1);
  font-size: 18px;
  font-weight: 950;
  order: -1;
}

.mediaDetailV2Creator dt {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 820;
}

.mediaDetailV2Tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid #e6eaf0;
  background: #f3f5f8;
  padding: 0 16px;
}

.mediaDetailV2Tabs.cuiSegmented {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.mediaDetailV2Tabs button {
  position: relative;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  padding: 0;
  font-size: 14px;
  font-weight: 900;
}

.mediaDetailV2Tabs button.active {
  color: var(--text-1);
}

.mediaDetailV2Tabs button.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--hot-video-accent);
}

.mediaDetailV2Panel {
  scroll-margin-top: 62px;
  overflow: hidden;
}

.mediaDetailV2Panel > h2,
.mediaDetailV2PanelHeader {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #eef1f5;
  padding: 0 16px;
}

.mediaDetailV2Panel h2,
.mediaDetailV2PanelHeader h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
  font-weight: 950;
}

.mediaDetailV2Panel h2 span {
  margin-left: 10px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 780;
}

.mediaDetailV2MetricGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 16px;
  padding: 16px;
}

.mediaDetailV2MetricGrid.overview {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.mediaDetailV2MetricGrid article {
  min-height: 132px;
  display: grid;
  align-content: space-between;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 22px 16px 20px;
}

.mediaDetailV2MetricGrid strong {
  color: var(--text-1);
  font-size: 26px;
  font-weight: 950;
}

.mediaDetailV2MetricGrid span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 850;
}

.mediaDetailV2Range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mediaDetailV2Range span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
}

.mediaDetailV2Range button,
.mediaDetailV2ChartToolbar button {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: #f5f6f8;
  color: var(--text-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}

.mediaDetailV2Range button.active,
.mediaDetailV2ChartToolbar button.active {
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.mediaDetailV2ChartBox {
  margin: 16px;
  border-radius: 8px;
  background: #f7f8fa;
  padding: 28px 18px 24px;
}

.mediaDetailV2ChartToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.mediaDetailV2ChartToolbar > span {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 880;
}

.mediaDetailV2ChartToolbar div {
  display: inline-flex;
  gap: 8px;
}

.mediaDetailV2ChartToolbar button {
  background: #ffffff;
}

.mediaDetailV2ChartControls {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.mediaDetailV2ChartControls > div {
  display: inline-flex;
  overflow: hidden;
  gap: 0;
  border-radius: 8px;
  background: #ffffff;
}

.mediaDetailV2ChartControls > .cuiSegmented {
  padding: 0;
  border: 0;
  box-shadow: none;
}

.mediaDetailV2ChartControls > div button {
  border-radius: 0;
}

.mediaDetailV2Chart {
  width: 100%;
  height: 390px;
  display: block;
  overflow: visible;
}

.mediaDetailV2ProductTable {
  overflow: hidden;
  padding: 12px;
}

.mediaDetailV2ProductTable .head,
.mediaDetailV2ProductTable .row {
  min-height: 56px;
  display: grid;
  grid-template-columns: 1.5fr 0.85fr 0.85fr 0.85fr 0.85fr 0.8fr 0.9fr 0.7fr;
  align-items: center;
}

.mediaDetailV2ProductTable .head {
  border-radius: 8px 8px 0 0;
  background: #eef1f5;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 930;
}

.mediaDetailV2ProductTable .head > span,
.mediaDetailV2ProductTable .row > span {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 18px;
}

.mediaDetailV2ProductTable .head > .mediaMetricHeader {
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
  gap: 4px;
}

.mediaDetailV2ProductTable .head > .mediaMetricHeader > span:first-child {
  width: auto;
  min-width: 0;
  height: auto;
  display: inline;
  flex: 0 1 auto;
  padding: 0;
  line-height: 1.2;
}

.mediaDetailV2ProductTable .head > .mediaMetricHeader > .cuiTooltipWrap {
  box-sizing: border-box;
  width: 14px;
  min-width: 14px;
  max-width: 14px;
  height: 14px;
  min-height: 14px;
  max-height: 14px;
  display: inline-flex;
  flex: 0 0 14px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.mediaDetailV2ProductTable .head .mediaMetricHeaderHelp {
  box-sizing: border-box;
  width: 14px;
  min-width: 14px;
  max-width: 14px;
  height: 14px;
  min-height: 14px;
  max-height: 14px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
}

.mediaDetailV2ProductTable .row {
  min-height: 76px;
  border-top: 1px solid #e8ebf0;
  background: #ffffff;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 760;
}

.mediaDetailV2ProductTable .row > span {
  height: 76px;
  min-width: 0;
}

.mediaDetailV2ProductTable .row .product {
  gap: 10px;
}

.mediaDetailV2ProductTable .row .product img {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 6px;
  object-fit: cover;
}

.mediaDetailV2ProductTable .row .product strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mediaDetailV2ProductTable .row a {
  color: var(--hot-video-accent);
  font-weight: 880;
  text-decoration: none;
}

.mediaDetailV2ProductTable .empty {
  min-height: 166px;
  display: grid;
  place-items: center;
  gap: 8px;
  border-radius: 0 0 8px 8px;
  background: #ffffff;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 820;
}

.mediaDetailV2AsyncState {
  min-height: 166px;
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border-radius: 0 0 8px 8px;
  background: #ffffff;
  color: var(--text-3);
  padding: 24px;
  font-size: 13px;
  font-weight: 820;
  text-align: center;
}

.mediaDetailV2AsyncState.error {
  color: #b42318;
}

.mediaDetailV2SimilarGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
}

.mediaDetailV2SimilarGrid article {
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #f2f4f7;
  padding: 12px;
}

.mediaDetailV2SimilarGrid article > header {
  min-height: 98px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e4e8ef;
  padding: 4px 4px 12px;
}

.mediaSimilarityScore {
  min-width: 34px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  font-size: 12px;
  font-weight: 920;
}

.mediaSimilarityReasons {
  min-height: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.mediaSimilarityReasons > span {
  border-radius: 5px;
  background: var(--surface-panel);
  color: var(--text-3);
  padding: 4px 6px;
  font-size: 9px;
  font-weight: 720;
}

.mediaDetailV2SimilarGrid article > header img {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
}

.mediaDetailV2SimilarGrid article > header a {
  color: inherit;
  text-decoration: none;
}

.mediaDetailV2SimilarGrid article > header div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.mediaDetailV2SimilarGrid article > header strong,
.mediaDetailV2SimilarGrid article > header em,
.mediaDetailV2SimilarGrid article > header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaDetailV2SimilarGrid article > header strong {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
}

.mediaDetailV2SimilarCreatorLink:hover strong,
.mediaDetailV2SimilarCreatorLink:focus-visible strong {
  color: var(--hot-video-accent);
}

.mediaDetailV2SimilarGrid article > header em {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--text-2);
  padding: 4px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 780;
}

.mediaDetailV2SimilarGrid article > header span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 780;
}

.mediaDetailV2SimilarCover {
  position: relative;
  width: 100%;
  margin: 12px 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

.mediaDetailV2SimilarCover > img {
  width: 100%;
  aspect-ratio: 1 / 1.08;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.mediaDetailV2SimilarCover > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  transform: translate(-50%, -50%);
}

.mediaDetailV2SimilarCover dl {
  position: absolute;
  right: 8px;
  bottom: 10px;
  display: grid;
  gap: 7px;
  margin: 0;
}

.mediaDetailV2SimilarCover dl div {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.52);
  color: #ffffff;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 850;
}

.mediaDetailV2SimilarCover dt,
.mediaDetailV2SimilarCover dd {
  margin: 0;
}

.mediaDetailV2SimilarTitle {
  min-height: 44px;
  overflow: hidden;
  display: block;
  margin: 0;
  color: var(--text-1);
  padding: 0 4px 2px;
  font-size: 13px;
  font-weight: 820;
  line-height: 1.55;
  text-decoration: none;
}

.mediaDetailV2SimilarTitle:hover,
.mediaDetailV2SimilarTitle:focus-visible {
  color: var(--hot-video-accent);
}

.mediaDetailV2State {
  min-height: 300px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 860;
}

.mediaDetailV2LoadingShell {
  min-height: 332px;
  display: grid;
  grid-template-columns: 206px minmax(0, 1fr);
  gap: 24px;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.mediaDetailV2LoadingShell > span,
.mediaDetailV2LoadingShell i {
  display: block;
  border-radius: 6px;
  background: #eef1f5;
  animation: mediaDetailLoadingPulse 1.2s ease-in-out infinite alternate;
}

.mediaDetailV2LoadingShell > span {
  width: 206px;
  height: 300px;
}

.mediaDetailV2LoadingShell > div {
  display: grid;
  align-content: start;
  gap: 18px;
  padding-top: 18px;
}

.mediaDetailV2LoadingShell i:nth-child(1) {
  width: min(520px, 72%);
  height: 28px;
}

.mediaDetailV2LoadingShell i:nth-child(2) {
  width: min(390px, 54%);
  height: 18px;
}

.mediaDetailV2LoadingShell i:nth-child(3) {
  width: min(460px, 64%);
  height: 90px;
}

.mediaDetailV2SkeletonLine,
.mediaDetailV2CreatorSkeleton i,
.mediaDetailV2CreatorSkeleton b,
.mediaDetailV2CreatorSkeleton span,
.mediaDetailV2CreatorSkeleton em,
.mediaDetailV2MetricSkeleton i,
.mediaDetailV2MetricSkeleton span,
.mediaDetailV2ChartSkeleton,
.mediaDetailV2SectionSkeleton i {
  display: block;
  border-radius: 6px;
  background: #eef1f5;
  animation: mediaDetailLoadingPulse 1.2s ease-in-out infinite alternate;
}

.mediaDetailV2SkeletonLine.title {
  width: min(620px, 56%);
  height: 24px;
}

.mediaDetailV2CreatorSkeleton header > i {
  width: 86px;
  height: 86px;
  flex: 0 0 auto;
  border-radius: 999px;
}

.mediaDetailV2CreatorSkeleton header > div {
  width: 100%;
  display: grid;
  gap: 10px;
}

.mediaDetailV2CreatorSkeleton header b {
  width: 62%;
  height: 18px;
}

.mediaDetailV2CreatorSkeleton header span {
  width: 78%;
  height: 13px;
}

.mediaDetailV2CreatorSkeleton header em {
  width: 42%;
  height: 24px;
  margin: 0;
}

.mediaDetailV2CreatorSkeleton dl div {
  min-height: 72px;
  align-content: center;
}

.mediaDetailV2CreatorSkeleton dl i {
  width: 56%;
  height: 18px;
  margin: 0 auto;
}

.mediaDetailV2CreatorSkeleton dl span {
  width: 72%;
  height: 12px;
  margin: 0 auto;
}

.mediaDetailV2SkeletonTabs span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 900;
}

.mediaDetailV2MetricSkeleton article {
  gap: 22px;
}

.mediaDetailV2MetricSkeleton article i {
  width: 74%;
  height: 26px;
}

.mediaDetailV2MetricSkeleton article span {
  width: 48%;
  height: 13px;
}

.mediaDetailV2ChartSkeleton {
  height: 390px;
  margin: 16px;
}

.mediaDetailV2SectionSkeleton {
  margin: 16px;
}

.mediaDetailV2SectionSkeleton.rows {
  display: grid;
  gap: 10px;
}

.mediaDetailV2SectionSkeleton.rows i {
  height: 68px;
}

.mediaDetailV2SectionSkeleton.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.mediaDetailV2SectionSkeleton.cards i {
  height: 320px;
}

@keyframes mediaDetailLoadingPulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

.mediaSavedFilterBar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: -6px 0 12px;
}

.mediaSavedFilterBar > button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--hot-video-border);
  border-radius: 7px;
  background: #ffffff;
  color: var(--text-1);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 820;
}

.mediaSavedFilterBar .mediaSavedFilterCount {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  font-size: 11px;
}

.mediaSavedFilterBar > button:hover {
  border-color: var(--hot-video-accent);
  color: var(--hot-video-accent);
}

.mediaSavedFilterDialog {
  background: #ffffff;
}

.cuiTooltipContent.mediaSavedFilterTooltip {
  width: max-content;
  max-width: min(520px, calc(100vw - 32px));
  border-color: rgba(255, 255, 255, 0.16);
  background: #20232b;
  color: #ffffff;
  white-space: normal;
}

.mediaSavedFilterList {
  overflow: hidden;
  border: 1px solid var(--hot-video-border);
  border-radius: 7px;
}

.mediaSavedFilterList > p {
  margin: 0;
  color: var(--text-3);
  padding: 30px 16px;
  text-align: center;
}

.mediaSavedFilterList table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.mediaSavedFilterList th,
.mediaSavedFilterList td {
  height: 48px;
  border-bottom: 1px solid var(--hot-video-border);
  color: var(--text-2);
  padding: 0 14px;
  font-size: 13px;
  text-align: left;
}

.mediaSavedFilterList th {
  height: 40px;
  background: #f7f8fa;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}

.mediaSavedFilterList th:first-child,
.mediaSavedFilterList td:first-child {
  width: 190px;
}

.mediaSavedFilterList th:nth-child(3),
.mediaSavedFilterList td:nth-child(3) {
  width: 150px;
}

.mediaSavedFilterList th:last-child,
.mediaSavedFilterList td:last-child {
  width: 110px;
  text-align: right;
}

.mediaSavedFilterList tbody tr:last-child td {
  border-bottom: 0;
}

.mediaSavedFilterList td strong {
  display: block;
  overflow: hidden;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaSavedFilterNameButton {
  width: 100%;
  min-width: 0;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-1);
  padding: 0 6px;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.mediaSavedFilterNameButton:hover {
  background: #f4f5f7;
  color: var(--hot-video-accent);
}

.mediaSavedFilterNameButton > span {
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaSavedFilterNameEditor {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mediaSavedFilterNameEditor input {
  width: 118px;
  min-width: 0;
  height: 30px;
  border: 1px solid var(--hot-video-accent);
  border-radius: 5px;
  outline: 0;
  padding: 0 8px;
  color: var(--text-1);
  font-size: 13px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot-video-accent) 10%, transparent);
}

.mediaSavedFilterNameEditor button {
  height: 30px;
  border: 1px solid var(--hot-video-accent);
  border-radius: 5px;
  background: var(--hot-video-accent);
  color: #ffffff;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.mediaSavedFilterList td:nth-child(2) .cuiTooltipWrap {
  display: block;
  min-width: 0;
}

.mediaSavedFilterSummary {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  cursor: help;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaSavedFilterActions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.mediaSavedFilterActions button {
  height: 30px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hot-video-border);
  border-radius: 5px;
  background: #ffffff;
  color: var(--text-2);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.mediaSavedFilterActions button:last-child {
  width: 30px;
  padding: 0;
}

.mediaSavedFilterActions button:hover {
  border-color: var(--hot-video-accent);
  color: var(--hot-video-accent);
}

.mediaMetricHeader {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mediaMetricHeaderHelp {
  width: 14px;
  height: 14px;
  display: inline-grid;
  flex: 0 0 14px;
  place-items: center;
  border: 1px solid #aab2bf;
  border-radius: 999px;
  background: #ffffff;
  color: #7c8797;
  padding: 0;
  font-size: 9px;
  font-family: inherit;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  cursor: help;
}

.mediaMetricHeaderHelp:hover,
.mediaMetricHeaderHelp:focus-visible {
  border-color: var(--hot-video-accent);
  color: var(--hot-video-accent);
  outline: none;
}

.hotVideoMultiSelect {
  position: relative;
  min-width: 0;
}

.hotVideoMultiSelect.cuiMultiSelect {
  min-height: 34px;
  border-color: var(--hot-video-border);
  border-radius: 999px;
  background: var(--control-bg);
}

.hotVideoMultiSelect.cuiMultiSelect--open {
  border-color: var(--hot-video-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot-video-accent) 12%, transparent);
}

.hotVideoMultiSelect .cuiMultiSelectControl {
  min-width: 0;
}

.hotVideoMultiSelect .cuiMultiSelectTag {
  max-width: calc(100% - 8px);
  border: 0;
  background: transparent;
  color: var(--text-1);
}

.videoMonitorHistoryFilters .hotVideoMultiSelect {
  width: 180px;
}

.hotVideoMultiSelect > button {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--hot-video-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-1);
  padding: 0 12px 0 14px;
  font-size: 13px;
  font-weight: 820;
}

.hotVideoMultiSelect > button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotVideoMultiSelect.open > button {
  border-color: var(--hot-video-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot-video-accent) 12%, transparent);
}

.hotVideoMultiSelectMenu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  width: max(100%, 210px);
  display: grid;
  gap: 2px;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 32px color-mix(in srgb, var(--text-1) 16%, transparent);
  padding: 6px;
}

.hotVideoMultiSelectMenu > button {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-1);
  padding: 0 9px;
  font-size: 13px;
  text-align: left;
}

.hotVideoMultiSelectMenu > button:hover,
.hotVideoMultiSelectMenu > button.active {
  background: color-mix(in srgb, var(--hot-video-accent) 9%, #ffffff);
}

.hotVideoMultiSelectCheck {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hot-video-border);
  border-radius: 4px;
  color: transparent;
}

.hotVideoMultiSelectMenu > button.active .hotVideoMultiSelectCheck {
  border-color: var(--hot-video-accent);
  background: var(--hot-video-accent);
  color: #ffffff;
}

@media (max-width: 720px) {
  .mediaSavedFilterList {
    overflow-x: auto;
  }

  .mediaSavedFilterList table {
    min-width: 620px;
  }
}

/* Video detail: dense, video-first layout aligned with the Compass detail system. */
.mediaDetailV2Page {
  gap: 16px;
  background: #f5f6f9;
  padding: 18px 20px 28px;
}

.mediaDetailV2Topbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.mediaDetailV2CommandBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.mediaDetailV2CommandButton {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #dfe3ea;
  border-radius: 7px;
  background: #ffffff;
  color: #344054;
  padding: 0 13px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-size: 13px;
  font-weight: 820;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.mediaDetailV2CommandButton:hover,
.mediaDetailV2CommandButton:focus-visible,
.mediaDetailV2CommandButton.active {
  border-color: #8b76ff;
  background: #f5f2ff;
  color: #6957d9;
  outline: none;
  text-decoration: none;
}

.mediaDetailV2CommandButton.accent {
  border-color: #7765dc;
  background: #ffffff;
  color: #6957d9;
}

.mediaDetailV2CommandButton:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.mediaDetailV2CommandBar .hotVideoShareAction {
  position: relative;
  display: inline-flex;
}

.mediaDetailV2Hero {
  min-height: 476px;
  display: grid;
  grid-template-columns: 354px minmax(430px, 1fr) 294px;
  align-items: stretch;
  gap: 20px;
  border: 1px solid #e1e5ec;
  border-radius: 8px;
  background: #ffffff;
  padding: 18px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.035);
}

.mediaDetailV2MediaGallery {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  gap: 10px;
}

.mediaDetailV2Poster {
  width: 100%;
  height: 440px;
  border-radius: 7px;
  background: #111827;
}

.mediaDetailV2Poster::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  background: linear-gradient(180deg, transparent, rgba(10, 16, 28, 0.78));
  pointer-events: none;
}

.mediaDetailV2Poster .mediaDetailV2Play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  inset: auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.42);
  color: #ffffff;
  transform: translate(-50%, -50%);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.mediaDetailV2PosterStats {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #ffffff;
}

.mediaDetailV2PosterStats b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 840;
}

.mediaDetailV2Keyframes {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.mediaDetailV2Keyframes > span {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: block;
  border: 1px solid #e3e7ee;
  border-radius: 6px;
  background: #eef1f5;
}

.mediaDetailV2Keyframes > span:first-child {
  border: 2px solid #7864df;
}

.mediaDetailV2Keyframes img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mediaDetailV2Keyframes em {
  position: absolute;
  right: 4px;
  bottom: 4px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  padding: 2px 4px;
  font-size: 9px;
  font-style: normal;
  font-weight: 760;
}

.mediaDetailV2Meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 6px 0;
}

.mediaDetailV2Badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.mediaDetailV2Badges > span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 5px;
  background: #f2f0ff;
  color: #6957d9;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 820;
}

.mediaDetailV2Badges > span.commerce {
  background: #fff2e8;
  color: #b54708;
}

.mediaDetailV2Badges img {
  width: 17px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
}

.mediaDetailV2Meta h1 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #182230;
  font-size: 22px;
  font-weight: 930;
  line-height: 1.42;
  letter-spacing: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mediaDetailV2Byline {
  overflow: hidden;
  margin: -6px 0 0;
  color: #7b8494;
  font-size: 12px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaDetailV2Description {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--hot-video-border, #e8ebf0);
  border-radius: 6px;
  background: var(--surface-muted, #f7f8fa);
}

.mediaDetailV2DescriptionHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mediaDetailV2DescriptionHeader > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3, #7b8494);
  font-size: 11px;
  font-weight: 720;
}

.mediaDetailV2Description > p,
.mediaDetailV2Translation > p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--text-1, #263244);
  font-size: 13px;
  font-weight: 560;
  line-height: 1.65;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.mediaDetailV2TranslateButton.cuiButton {
  min-height: 28px;
  flex: 0 0 auto;
  padding: 0 8px;
}

.mediaDetailV2Translation {
  display: grid;
  gap: 5px;
  border-top: 1px solid var(--hot-video-border, #e8ebf0);
  padding-top: 8px;
}

.mediaDetailV2Translation > span {
  color: var(--hot-video-accent, #6957d9);
  font-size: 10px;
  font-weight: 800;
}

.mediaDetailV2TranslationError {
  color: var(--danger, #c44747) !important;
  font-size: 11px !important;
  -webkit-line-clamp: 2 !important;
}

.mediaDetailV2Facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid #e8ebf0;
  border-left: 1px solid #e8ebf0;
}

.mediaDetailV2Facts > div {
  min-width: 0;
  display: grid;
  gap: 5px;
  border-right: 1px solid #e8ebf0;
  border-bottom: 1px solid #e8ebf0;
  padding: 13px 14px;
}

.mediaDetailV2Facts dt,
.mediaDetailV2Facts dd {
  min-width: 0;
  margin: 0;
}

.mediaDetailV2Facts dt {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8a93a3;
  font-size: 11px;
  font-weight: 720;
}

.mediaDetailV2Facts dd {
  overflow: hidden;
  color: #263244;
  font-size: 12px;
  font-weight: 830;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaDetailV2Facts > .mediaDetailV2CountryFact {
  grid-column: 1 / -1;
}

.mediaDetailV2CountryFact dd {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.mediaDetailV2CountryFact dd span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mediaDetailV2CountryFlag {
  width: 20px;
  height: 14px;
  flex: 0 0 auto;
  display: block;
  border: 1px solid #e1e5ec;
  border-radius: 2px;
  object-fit: cover;
}

.mediaDetailV2Workflow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.mediaDetailV2Workflow a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #d9dee7;
  border-radius: 6px;
  background: #ffffff;
  color: #344054;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 830;
  text-decoration: none;
}

.mediaDetailV2Workflow a:hover {
  border-color: #7864df;
  color: #6957d9;
}

.mediaDetailV2Workflow a.primary {
  border-color: #7864df;
  background: #7864df;
  color: #ffffff;
}

.mediaDetailV2Creator {
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #e6e9ef;
  border-radius: 0;
  background: transparent;
  padding: 8px 0 4px 20px;
}

.mediaDetailV2Creator header {
  min-height: 98px;
  padding: 4px 0 14px;
}

.mediaDetailV2CreatorMainLink {
  gap: 12px;
}

.mediaDetailV2Creator header img {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px #e2e6ed;
}

.mediaDetailV2Creator h2 {
  overflow: hidden;
  margin-bottom: 4px;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaDetailV2Creator em {
  margin-top: 7px;
  border-radius: 5px;
  padding: 4px 7px;
}

.mediaDetailV2Creator dl {
  min-height: 0;
  align-content: initial;
  border-top: 1px solid #e7eaf0;
  padding: 10px 0 12px;
}

.mediaDetailV2Creator dl div {
  gap: 5px;
  padding: 9px 4px;
  text-align: left;
}

.mediaDetailV2Creator dd {
  font-size: 15px;
}

.mediaDetailV2CreatorButton {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  border: 1px solid #7864df;
  border-radius: 6px;
  color: #6957d9;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.mediaDetailV2CreatorButton:hover {
  background: #f5f2ff;
}

.mediaDetailV2Tabs.cuiSegmented {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow-x: auto;
  border: 1px solid #e1e5ec;
  border-width: 1px 1px 0;
  border-radius: 8px 8px 0 0;
  background: #ffffff;
  padding: 8px 18px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.035);
  scrollbar-width: none;
}

.mediaDetailV2Tabs.cuiSegmented::-webkit-scrollbar {
  display: none;
}

.mediaDetailV2Tabs .cuiSegmentedButton {
  min-height: 44px;
  position: relative;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #697586;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 820;
  box-shadow: none;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.mediaDetailV2Tabs .cuiSegmentedButton:hover {
  background: #f6f7f9;
  color: #344054;
}

.mediaDetailV2Tabs .cuiSegmentedButton[aria-pressed='true'],
.mediaDetailV2Tabs .cuiSegmentedButton.active {
  border-color: color-mix(in srgb, var(--cui-primary, var(--primary)) 34%, var(--cui-line, #e1e5ec));
  background: color-mix(in srgb, var(--cui-primary, var(--primary)) 10%, var(--cui-surface, #ffffff));
  color: var(--cui-primary, var(--primary));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cui-primary, var(--primary)) 14%, transparent);
  transform: translateY(-1px);
}

.mediaDetailV2Tabs .cuiSegmentedButton[aria-pressed='true']::after,
.mediaDetailV2Tabs .cuiSegmentedButton.active::after {
  right: 14px;
  bottom: -9px;
  left: 14px;
  height: 3px;
  background: var(--cui-primary, var(--primary));
}

.mediaDetailV2TabLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mediaDetailV2TabLabel svg {
  flex: 0 0 auto;
}

.mediaDetailV2Range {
  gap: 6px;
}

.mediaDetailV2Range > span {
  margin-right: 6px;
  color: #7b8494;
  font-size: 11px;
  font-weight: 720;
}

.mediaDetailV2Range button {
  min-width: 48px;
  min-height: 32px;
  border: 1px solid #e1e5ec;
  border-radius: 5px;
  background: #ffffff;
  color: #5f6b7c;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 800;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.mediaDetailV2Range button:hover {
  border-color: #bdb3f2;
  color: #5f4ccf;
}

.mediaDetailV2Range button.active {
  border-color: #6957d9;
  background: #6957d9;
  color: #ffffff;
  box-shadow: 0 2px 7px rgba(105, 87, 217, 0.22);
}

.mediaDetailV2MetricBand {
  scroll-margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #e1e5ec;
  border-radius: 0 0 8px 8px;
  background: #ffffff;
}

.mediaDetailV2MetricBand article {
  min-width: 0;
  min-height: 100px;
  display: grid;
  align-content: space-between;
  gap: 12px;
  border-right: 1px solid #e8ebf0;
  padding: 14px 12px;
}

.mediaDetailV2MetricBand article:last-child {
  border-right: 0;
}

.mediaDetailV2MetricBand header,
.mediaDetailV2MetricBand article > div {
  display: flex;
  align-items: center;
}

.mediaDetailV2MetricBand header {
  gap: 5px;
  color: #657184;
  font-size: 11px;
  font-weight: 790;
}

.mediaDetailV2MetricBand header i {
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #aab2bf;
  border-radius: 999px;
  color: #7c8797;
  font-size: 9px;
  font-style: normal;
  line-height: 1;
  cursor: help;
}

.mediaDetailV2MetricBand article > div {
  justify-content: space-between;
  gap: 8px;
}

.mediaDetailV2MetricBand strong {
  overflow: hidden;
  color: #202b3c;
  font-size: 20px;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaDetailV2MetricBand article > div em {
  width: 32px;
  height: 32px;
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 999px;
  background: #f2f0ff;
  color: #6957d9;
  font-style: normal;
}

.mediaDetailV2MetricBand article:nth-child(2n) > div em {
  background: #ecf8f5;
  color: #0f937d;
}

.mediaDetailV2MetricBand article:nth-child(3n) > div em {
  background: #fff3e8;
  color: #c06216;
}

.mediaDetailV2Panel {
  border: 1px solid #e1e5ec;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.025);
}

.mediaDetailV2Panel > h2,
.mediaDetailV2PanelHeader {
  min-height: 58px;
  padding: 0 16px;
}

.mediaDetailV2Panel h2,
.mediaDetailV2PanelHeader h2 {
  font-size: 16px;
}

.mediaDetailV2MetricGrid {
  gap: 0;
  margin: 0;
  border-bottom: 1px solid #e7eaf0;
  padding: 0 16px;
}

.mediaDetailV2MetricGrid article {
  min-height: 92px;
  border-right: 1px solid #e7eaf0;
  border-radius: 0;
  background: #ffffff;
  padding: 16px;
}

.mediaDetailV2MetricGrid article:last-child {
  border-right: 0;
}

.mediaDetailV2MetricGrid strong {
  font-size: 20px;
}

.mediaDetailV2MetricGrid.trend article.interactive {
  --metric-color: #6957d9;
  --metric-soft: rgba(105, 87, 217, 0.08);
  position: relative;
  padding: 0;
  transition: background 170ms ease, box-shadow 170ms ease;
}

.mediaDetailV2MetricGrid.trend article.interactive:nth-child(2) {
  --metric-color: #d94f70;
  --metric-soft: rgba(217, 79, 112, 0.08);
}

.mediaDetailV2MetricGrid.trend article.interactive:nth-child(3) {
  --metric-color: #0f937d;
  --metric-soft: rgba(15, 147, 125, 0.08);
}

.mediaDetailV2MetricGrid.trend article.interactive:nth-child(4) {
  --metric-color: #c76a16;
  --metric-soft: rgba(199, 106, 22, 0.08);
}

.mediaDetailV2MetricGrid.trend article.interactive:hover {
  background: var(--metric-soft);
}

.mediaDetailV2MetricGrid.trend article.interactive.active {
  background: var(--metric-soft);
  box-shadow: inset 0 -3px 0 var(--metric-color);
}

.mediaDetailV2MetricGrid.trend article.interactive button {
  width: 100%;
  min-height: 91px;
  display: grid;
  align-content: space-between;
  border: 0;
  background: transparent;
  padding: 16px;
  text-align: left;
  cursor: pointer;
}

.mediaDetailV2MetricGrid.trend article.interactive button:focus-visible {
  outline: 2px solid var(--metric-color);
  outline-offset: -3px;
}

.mediaDetailV2MetricGrid.trend article.interactive.active strong {
  color: var(--metric-color);
}

.mediaDetailV2TrendLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 294px;
  gap: 16px;
  padding: 16px;
}

.mediaDetailV2ChartBox {
  --trend-color: #6957d9;
  --trend-soft: rgba(105, 87, 217, 0.14);
  min-width: 0;
  height: 100%;
  overflow: hidden;
  margin: 0;
  border: 1px solid #e6e9ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 18px 18px 8px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.mediaDetailV2ChartBox.metric-likes {
  --trend-color: #d94f70;
  --trend-soft: rgba(217, 79, 112, 0.14);
}

.mediaDetailV2ChartBox.metric-comments {
  --trend-color: #0f937d;
  --trend-soft: rgba(15, 147, 125, 0.14);
}

.mediaDetailV2ChartBox.metric-shares {
  --trend-color: #c76a16;
  --trend-soft: rgba(199, 106, 22, 0.14);
}

.mediaDetailV2ChartToolbar {
  min-height: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.mediaDetailV2ChartToolbar .mediaDetailV2ChartTitle {
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mediaDetailV2ChartTitle > i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 999px;
  background: var(--trend-color);
  box-shadow: 0 0 0 5px var(--trend-soft);
}

.mediaDetailV2ChartToolbar .mediaDetailV2ChartTitle > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mediaDetailV2ChartTitle strong {
  color: #202b3c;
  font-size: 14px;
  font-weight: 880;
}

.mediaDetailV2ChartTitle span {
  color: #8a93a3;
  font-size: 10px;
  font-weight: 700;
}

.mediaDetailV2ChartControls > .cuiSegmented {
  gap: 3px;
  border: 1px solid #e2e6ec;
  border-radius: 6px;
  background: #f5f6f8;
  padding: 3px;
  box-shadow: none;
}

.mediaDetailV2ChartControls .cuiSegmentedButton {
  min-height: 28px;
  border-radius: 4px;
  background: transparent;
  color: #697586;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 780;
  box-shadow: none;
}

.mediaDetailV2ChartControls .cuiSegmentedButton:hover {
  color: #344054;
}

.mediaDetailV2ChartControls .cuiSegmentedButton[aria-pressed='true'],
.mediaDetailV2ChartControls .cuiSegmentedButton.active {
  background: #ffffff;
  color: var(--trend-color);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12), inset 0 -2px 0 var(--trend-color);
}

.mediaDetailV2ChartSummary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 2px;
  border-top: 1px solid #eceff3;
  border-bottom: 1px solid #eceff3;
}

.mediaDetailV2ChartSummary > div {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  border-right: 1px solid #eceff3;
  padding: 11px 14px;
}

.mediaDetailV2ChartSummary > div:last-child {
  border-right: 0;
}

.mediaDetailV2ChartSummary span {
  overflow: hidden;
  color: #8a93a3;
  font-size: 10px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaDetailV2ChartSummary strong {
  overflow: hidden;
  color: #202b3c;
  font-size: 17px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaDetailV2ChartSummary strong.positive {
  color: #0f937d;
}

.mediaDetailV2ChartSummary strong.negative {
  color: #c44747;
}

.mediaDetailV2ChartSummary em {
  color: var(--trend-color);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.mediaDetailV2Chart {
  width: 100%;
  height: 340px;
  display: block;
  overflow: hidden;
}

.mediaDetailV2Insight {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border-left: 1px solid #e4e8ee;
  padding: 4px 0 4px 16px;
}

.mediaDetailV2Insight > header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mediaDetailV2Insight > header > span {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 7px;
  background: #f2f0ff;
  color: #6957d9;
}

.mediaDetailV2Insight header div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mediaDetailV2Insight header strong {
  color: #202b3c;
  font-size: 13px;
  font-weight: 880;
}

.mediaDetailV2Insight header em {
  color: #8a93a3;
  font-size: 10px;
  font-style: normal;
  font-weight: 680;
}

.mediaDetailV2Insight > p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.7;
}

.mediaDetailV2Insight dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.mediaDetailV2Insight dl div {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-radius: 6px;
  background: #f6f7f9;
  padding: 9px 10px;
}

.mediaDetailV2Insight dt,
.mediaDetailV2Insight dd {
  margin: 0;
  font-size: 11px;
}

.mediaDetailV2Insight dt {
  flex: 0 0 auto;
  color: #6f7a8c;
  font-weight: 740;
}

.mediaDetailV2Insight dd {
  overflow: hidden;
  color: #0f937d;
  font-weight: 840;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaDetailV2Insight > div {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.mediaDetailV2Insight > div a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #7864df;
  border-radius: 6px;
  color: #6957d9;
  font-size: 11px;
  font-weight: 840;
  text-decoration: none;
}

.mediaDetailV2Insight > div a:first-child {
  background: #7864df;
  color: #ffffff;
}

.mediaCommentAnalysisDialog.cuiDialogContent {
  border: 1px solid var(--hot-video-border);
  background: var(--surface-panel);
}

.mediaCommentAnalysisDialog .cuiDialogBody {
  background: var(--surface-muted);
  padding: 16px;
}

.mediaCommentAnalysisState {
  min-height: 420px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: var(--hot-video-accent);
  text-align: center;
}

.mediaCommentSpinner {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  animation: mediaCommentSpinnerRotate 850ms linear infinite;
}

.mediaCommentAnalysisState strong {
  max-width: 680px;
  color: var(--text-2);
  font-size: 16px;
  font-weight: 820;
  line-height: 1.6;
}

.mediaCommentAnalysisState > em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
}

.mediaCommentAnalysisState.error {
  color: var(--danger, #dc2626);
}

@keyframes mediaCommentSpinnerRotate {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mediaCommentSpinner {
    animation: none;
  }
}

.mediaCommentSectionHeader {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--hot-video-border);
  padding: 12px 20px;
}

.mediaCommentSectionTitle,
.mediaCommentSectionActions,
.mediaCommentSectionTitle > div,
.mediaCommentBody,
.mediaCommentBody header {
  min-width: 0;
}

.mediaCommentSectionTitle,
.mediaCommentSectionActions {
  display: flex;
  align-items: center;
}

.mediaCommentSectionTitle {
  gap: 12px;
}

.mediaCommentSectionTitle > span {
  width: 38px;
  height: 38px;
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 7px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.mediaCommentSectionTitle > div {
  display: grid;
  gap: 3px;
}

.mediaCommentSectionTitle h2 {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 900;
}

.mediaCommentSectionTitle h2 em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.mediaCommentSectionTitle p {
  margin: 0;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 650;
}

.mediaCommentSectionActions {
  flex: 0 0 auto;
  gap: 10px;
}

.mediaCommentStream {
  display: grid;
}

.mediaCommentStreamState {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--hot-video-accent);
  text-align: center;
}

.mediaCommentStreamState strong {
  max-width: 560px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.6;
}

.mediaCommentStreamState.error {
  color: var(--danger, #c44747);
}

.mediaCommentStreamState .mediaCommentSpinner {
  width: 44px;
  height: 44px;
}

.mediaCommentStream > article {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 44px;
  align-items: start;
  gap: 13px;
  border-bottom: 1px solid var(--hot-video-border);
  padding: 17px 20px;
  transition: background-color 160ms ease;
}

.mediaCommentStream > article:hover {
  background: var(--surface-muted);
}

.mediaCommentStream > article:last-child {
  border-bottom: 0;
}

.mediaCommentAvatar {
  width: 42px;
  height: 42px;
  display: block;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hot-video-accent) 13%, var(--surface-panel));
  object-fit: cover;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-1) 9%, transparent);
}

.mediaCommentBody {
  display: grid;
  gap: 7px;
}

.mediaCommentBody header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mediaCommentBody header strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaCommentBody header span,
.mediaCommentBody time {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 650;
}

.mediaCommentBody p {
  max-width: 820px;
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.mediaCommentBody footer {
  color: var(--hot-video-accent);
  font-size: 10px;
  font-weight: 760;
}

.mediaCommentReaction {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--text-3);
  padding-top: 3px;
}

.mediaCommentReaction strong {
  font-size: 10px;
  font-weight: 720;
}

.mediaCommentAnalysisDialog.cuiDialogContent {
  width: min(1280px, calc(100vw - 24px));
  max-width: 1280px;
}

.mediaCommentAnalysisDialog .cuiDialogHeader {
  padding: 20px 24px;
}

.mediaCommentAnalysisDialog .cuiDialogTitle {
  font-size: 22px;
  font-weight: 920;
}

.mediaCommentAnalysisDialog .cuiDialogDescription {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
}

.mediaCommentAnalysisDialog .cuiDialogBody {
  max-height: min(84vh, 920px);
  overflow-y: auto;
  background: var(--surface-muted);
  padding: 22px;
}

.mediaCommentReport {
  display: grid;
  gap: 16px;
}

.mediaCommentReportSummary {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(220px, auto);
  align-items: start;
  gap: 17px;
  border: 1px solid color-mix(in srgb, var(--hot-video-accent) 24%, var(--hot-video-border));
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 22px;
}

.mediaCommentReportSummary > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.mediaCommentReportSummary > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.mediaCommentReportSummary > div > em {
  color: var(--hot-video-accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.mediaCommentReportSummary h3,
.mediaCommentReportSummary p,
.mediaCommentReportSummary dl,
.mediaCommentReportSummary dt,
.mediaCommentReportSummary dd {
  margin: 0;
}

.mediaCommentReportSummary h3 {
  color: var(--text-1);
  font-size: 18px;
  font-weight: 900;
}

.mediaCommentReportSummary p {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.75;
}

.mediaCommentReportSummary dl {
  min-width: 220px;
  display: grid;
  gap: 8px;
  border-left: 1px solid var(--hot-video-border);
  padding-left: 14px;
}

.mediaCommentReportSummary dl > div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mediaCommentReportSummary dt {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
}

.mediaCommentReportSummary dd {
  overflow: hidden;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 820;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaCommentReportKpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--surface-panel);
}

.mediaCommentReportKpis > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  border-right: 1px solid var(--hot-video-border);
  padding: 17px 19px;
}

.mediaCommentReportKpis > div:last-child {
  border-right: 0;
}

.mediaCommentReportKpis span,
.mediaCommentReportKpis em {
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaCommentReportKpis strong {
  color: var(--text-1);
  font-size: 28px;
  font-weight: 920;
}

.mediaCommentReportDistributions,
.mediaCommentReportMain,
.mediaCommentReportSignals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mediaCommentReportDistributions > section,
.mediaCommentReportFindings,
.mediaCommentReportTopics,
.mediaCommentReportSignals > section,
.mediaCommentEvidence,
.mediaCommentReportActions {
  min-width: 0;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 18px;
}

.mediaCommentReportDistributions header,
.mediaCommentReportFindings > header,
.mediaCommentReportTopics > header,
.mediaCommentEvidence > header,
.mediaCommentReportActions > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mediaCommentReport h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 880;
}

.mediaCommentReport section > header > span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 680;
}

.mediaCommentStackedBar {
  height: 9px;
  display: flex;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface-muted);
}

.mediaCommentStackedBar > i {
  height: 100%;
  display: block;
}

.mediaCommentStackedBar .positive,
.mediaCommentReportDistributions dt i.positive {
  background: #0f937d;
}

.mediaCommentStackedBar .neutral,
.mediaCommentReportDistributions dt i.neutral {
  background: #d19a3d;
}

.mediaCommentStackedBar .negative,
.mediaCommentReportDistributions dt i.negative {
  background: #c44747;
}

.mediaCommentStackedBar .high,
.mediaCommentReportDistributions dt i.high {
  background: var(--hot-video-accent);
}

.mediaCommentStackedBar .medium,
.mediaCommentReportDistributions dt i.medium {
  background: #3986c6;
}

.mediaCommentStackedBar .low,
.mediaCommentReportDistributions dt i.low {
  background: #9aa3b2;
}

.mediaCommentReportDistributions dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}

.mediaCommentReportDistributions dl > div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.mediaCommentReportDistributions dt,
.mediaCommentReportDistributions dd {
  margin: 0;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 730;
}

.mediaCommentReportDistributions dt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mediaCommentReportDistributions dt i {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 2px;
}

.mediaCommentReportFindings > article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid var(--hot-video-border);
  padding: 11px 0;
}

.mediaCommentReportFindings > article:last-child {
  padding-bottom: 0;
}

.mediaCommentReportFindings > article > b {
  color: var(--hot-video-accent);
  font-size: 11px;
  font-weight: 900;
}

.mediaCommentReportFindings article > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.mediaCommentReportFindings strong,
.mediaCommentReportActions strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 830;
}

.mediaCommentReportFindings p,
.mediaCommentReportActions p {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.mediaCommentReportFindings article span {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 680;
}

.mediaCommentReportEmpty {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
}

.mediaCommentReportTopics > div {
  display: grid;
  gap: 7px;
}

.mediaCommentReportTopics article {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-left: 3px solid #0f937d;
  background: var(--surface-muted);
  padding: 8px 10px;
}

.mediaCommentReportTopics article.neutral {
  border-left-color: #d19a3d;
}

.mediaCommentReportTopics article.negative {
  border-left-color: #c44747;
}

.mediaCommentReportTopics article > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.mediaCommentReportTopics strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaCommentReportTopics em {
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
  font-weight: 680;
}

.mediaCommentReportTopics article > b {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 900;
}

.mediaCommentReportSignals > section > header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.mediaCommentReportSignals header > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: color-mix(in srgb, #c44747 10%, var(--surface-panel));
  color: #c44747;
}

.mediaCommentReportSignals > section:last-child header > span {
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
}

.mediaCommentReportSignals ul {
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--text-2);
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.6;
}

.mediaCommentEvidence > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.mediaCommentEvidence blockquote {
  min-width: 0;
  display: grid;
  gap: 9px;
  margin: 0;
  border-left: 3px solid #0f937d;
  background: var(--surface-muted);
  padding: 11px 12px;
}

.mediaCommentEvidence blockquote.neutral {
  border-left-color: #d19a3d;
}

.mediaCommentEvidence blockquote.negative {
  border-left-color: #c44747;
}

.mediaCommentEvidence blockquote > p {
  margin: 0;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 730;
  line-height: 1.55;
}

.mediaCommentEvidence blockquote footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mediaCommentEvidence footer strong,
.mediaCommentEvidence footer span {
  overflow: hidden;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaCommentReportActions ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mediaCommentReportActions li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  border-top: 1px solid var(--hot-video-border);
  padding: 13px 0;
}

.mediaCommentReportActions li:last-child {
  padding-bottom: 0;
}

.mediaCommentReportActions li > b {
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: color-mix(in srgb, #d19a3d 12%, var(--surface-panel));
  color: #9a6518;
  font-size: 10px;
  font-weight: 850;
}

.mediaCommentReportActions li > b.high {
  background: color-mix(in srgb, #c44747 11%, var(--surface-panel));
  color: #b13e3e;
}

.mediaCommentReportActions li > b.low {
  background: var(--surface-muted);
  color: var(--text-3);
}

.mediaCommentReportActions li > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.mediaCommentReportActions.primary {
  border-color: color-mix(in srgb, var(--hot-video-accent) 32%, var(--hot-video-border));
  border-left: 4px solid var(--hot-video-accent);
  background: color-mix(in srgb, var(--hot-video-accent) 4%, var(--surface-panel));
  padding: 20px 22px;
}

.mediaCommentReportActions.primary > header h3 {
  font-size: 17px;
}

.mediaCommentReportActions.primary li > div > strong {
  font-size: 14px;
}

.mediaCommentReportActions.primary li > div > p {
  font-size: 12px;
}

@media (max-width: 860px) {
  .mediaCommentSectionHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .mediaCommentSectionActions {
    justify-content: space-between;
  }

  .mediaCommentReportSummary,
  .mediaCommentReportKpis,
  .mediaCommentReportDistributions,
  .mediaCommentReportMain,
  .mediaCommentReportSignals,
  .mediaCommentEvidence > div {
    grid-template-columns: 1fr;
  }

  .mediaCommentReportSummary dl {
    border-top: 1px solid var(--hot-video-border);
    border-left: 0;
    padding-top: 12px;
    padding-left: 0;
  }

  .mediaCommentReportKpis > div {
    border-right: 0;
    border-bottom: 1px solid var(--hot-video-border);
  }

  .mediaCommentReportKpis > div:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 560px) {
  .mediaCommentSectionActions {
    align-items: stretch;
    flex-direction: column;
  }

  .mediaCommentStream > article {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 10px;
    padding: 14px;
  }

  .mediaCommentAvatar {
    width: 36px;
    height: 36px;
  }

  .mediaCommentBody header {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .mediaCommentAnalysisDialog.cuiDialogContent {
    width: calc(100vw - 20px);
  }
}

@media (max-width: 1460px) {
  .mediaDetailV2Hero {
    grid-template-columns: 324px minmax(390px, 1fr) 264px;
    gap: 16px;
  }

  .mediaDetailV2MediaGallery {
    grid-template-columns: minmax(0, 1fr) 70px;
  }

  .mediaDetailV2MetricBand strong {
    font-size: 17px;
  }

  .mediaDetailV2MetricBand article {
    padding-right: 9px;
    padding-left: 9px;
  }
}

.mediaDetailV2Meta h1 .mediaDetailV2TitleLink {
  width: auto;
  display: inline;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.mediaDetailV2SkeletonLine.actions {
  width: 480px;
  height: 38px;
}

.mediaDetailV2LoadingGallery,
.mediaDetailV2LoadingMeta {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.mediaDetailV2LoadingGallery {
  grid-template-columns: minmax(0, 1fr) 78px;
}

.mediaDetailV2LoadingGallery > span,
.mediaDetailV2LoadingGallery i,
.mediaDetailV2LoadingMeta i {
  display: block;
  border-radius: 6px;
  background: #eef1f5;
  animation: mediaDetailLoadingPulse 1.2s ease-in-out infinite alternate;
}

.mediaDetailV2LoadingGallery > div {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.mediaDetailV2LoadingMeta {
  align-content: start;
  padding: 12px 6px;
}

.mediaDetailV2LoadingMeta i:nth-child(1) {
  width: 160px;
  height: 24px;
}

.mediaDetailV2LoadingMeta i:nth-child(2) {
  width: 92%;
  height: 58px;
}

.mediaDetailV2LoadingMeta i:nth-child(3) {
  width: 54%;
  height: 36px;
}

.mediaDetailV2LoadingMeta i:nth-child(4) {
  width: 100%;
  height: 126px;
}

.mediaDetailV2LoadingMeta i:nth-child(5) {
  width: 78%;
  height: 40px;
}

.mediaDetailV2MetricBand.mediaDetailV2MetricSkeleton article {
  min-height: 124px;
  align-content: center;
  gap: 14px;
  background: #ffffff;
}

.mediaDetailV2MetricBand.mediaDetailV2MetricSkeleton article i {
  width: 72%;
  height: 20px;
}

.mediaDetailV2MetricBand.mediaDetailV2MetricSkeleton article span {
  width: 48%;
  height: 12px;
}

/* Ranking differentiation and the cross-ranking creative workflow. */
.mediaRankingTitleBar {
  min-height: 42px;
  align-items: center;
}

.mediaRankingTitleGroup,
.mediaRankingTitleGroup h1,
.mediaRankingPrimaryCell {
  min-width: 0;
}

.mediaRankingTitleGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.mediaRankingModeSwitch {
  flex: 0 0 auto;
  border-color: var(--hot-video-border);
  border-radius: 7px;
  background: var(--control-bg);
  padding: 3px;
}

.mediaRankingModeSwitch .cuiSegmentedButton {
  min-width: 76px;
  min-height: 30px;
  border: 0;
  border-radius: 5px;
  color: var(--text-2);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0;
}

.mediaRankingModeSwitch .cuiSegmentedButton[aria-pressed='true'] {
  background: var(--hot-video-accent);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--hot-video-accent) 25%, transparent);
  color: #ffffff;
}

.mediaCreativeBasketLink {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--primary-border);
  border-radius: 7px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  padding: 0 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 850;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.mediaCreativeBasketLink b {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  background: var(--hot-video-accent);
  color: #ffffff;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 900;
}

.mediaCreativeBasketLink:hover {
  border-color: var(--hot-video-accent);
}

.mediaBasketRowButton {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  flex: 0 0 28px;
  border: 1px solid var(--hot-video-border) !important;
  border-radius: 6px !important;
  background: var(--control-bg) !important;
  color: var(--text-3) !important;
  padding: 0 !important;
}

.mediaBasketRowButton.active {
  border-color: var(--primary-border) !important;
  background: var(--hot-video-soft) !important;
  color: var(--hot-video-accent) !important;
}

.hotVideoMetaLine {
  width: 100%;
  max-width: 100%;
  display: block !important;
  align-items: center;
  overflow: visible !important;
}

.hotVideoContentCell > .hotVideoContentDetails {
  width: 100%;
  min-width: 0;
}

.hotVideoMetaLine > .hotVideoMetaDetails {
  min-width: 0;
  display: grid;
  align-items: start;
  gap: 2px;
  overflow: visible;
}

.hotVideoMetaDetails > span,
.hotVideoMetaDetails > em {
  min-width: 0;
  line-height: 1.35;
}

.hotVideoMetaDetails > em {
  color: var(--text-3);
  font-style: normal;
  font-weight: 760;
}

.hotVideoContentCell > .cuiTooltipWrap,
.mediaRankingPrimaryCell > .cuiTooltipWrap {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  line-height: 0;
  overflow: visible;
}

.hotVideoContentCell > .cuiTooltipWrap > .mediaBasketRowButton,
.mediaRankingPrimaryCell > .cuiTooltipWrap > .mediaBasketRowButton {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
}

.hotMusicPrimaryCell .mediaBasketRowButton {
  margin: 0;
}

.mediaCreativeBasketDrawer {
  background: var(--surface-panel);
}

.mediaCreativeBasketDrawer .cuiDrawerHeader {
  border-bottom: 1px solid var(--hot-video-border);
  padding: 18px 20px;
}

.mediaCreativeBasketDrawer .cuiDrawerTitle {
  color: var(--text-1);
  font-size: 17px;
  font-weight: 930;
  letter-spacing: 0;
}

.mediaCreativeBasketDrawer .cuiDrawerDescription {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 720;
}

.mediaCreativeBasketDrawer .cuiDrawerBody {
  min-width: 0;
  overflow-y: auto;
  background: var(--surface-muted);
  padding: 14px;
}

.mediaCreativeBasketDrawer .cuiDrawerFooter {
  border-top: 1px solid var(--hot-video-border);
  background: var(--surface-panel);
  padding: 14px 16px;
}

.mediaCreativeBasketDrawerList {
  display: grid;
  gap: 10px;
}

.mediaCreativeBasketDrawerContent {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.mediaCreativeBasketLimits {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mediaCreativeBasketLimits span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--hot-video-accent) 18%, var(--hot-video-border));
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 760;
  padding: 8px 9px;
}

.mediaCreativeBasketLimits b {
  color: var(--hot-video-accent);
  font-size: 11px;
  font-weight: 900;
}

.mediaCreativeBasketDrawerItem {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px 58px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--hot-video-border);
  border-radius: 7px;
  background: var(--surface-muted);
  box-shadow: none;
  padding: 9px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.mediaCreativeBasketDrawerItem.selected {
  border-color: color-mix(in srgb, var(--hot-video-accent) 55%, var(--hot-video-border));
  background: var(--surface-panel);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text-1) 9%, transparent);
}

.mediaCreativeBasketDrawerItem > .cuiCheckbox {
  margin: 0;
}

.mediaCreativeBasketDrawerItem > img,
.mediaCreativeBasketDrawerItem > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  object-fit: cover;
}

.mediaCreativeBasketDrawerItem > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mediaCreativeBasketDrawerItem small {
  color: var(--hot-video-accent);
  font-size: 9px;
  font-weight: 900;
}

.mediaCreativeBasketDrawerItem strong,
.mediaCreativeBasketDrawerItem em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaCreativeBasketDrawerItem strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 850;
}

.mediaCreativeBasketDrawerItem em {
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
  font-weight: 680;
}

.mediaCreativeBasketDrawerItem > button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
}

.mediaCreativeBasketDrawerFooter {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mediaCreativeBasketDrawerFooter > div {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.mediaCreativeBasketDrawerFooter .mediaCreativeBasketFooterStatus {
  flex: 1 1 auto;
  justify-content: flex-start;
}

.mediaCreativeBasketFooterStatus > span {
  color: var(--danger, #dc2626);
  font-size: 10px;
  font-weight: 760;
}

.mediaCreativeBasketFooterStatus > span.ready {
  color: var(--success, #15803d);
}

.mediaCreativeBasketDrawerFooter .mediaCreativeBasketFooterActions {
  flex: 0 0 auto;
}

.mediaCreativeBasketDrawerEmpty {
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: var(--text-3);
  text-align: center;
}

.mediaCreativeBasketDrawerEmpty strong {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 860;
}

.mediaCreativeBasketDrawerEmpty span {
  max-width: 280px;
  font-size: 11px;
  line-height: 1.6;
}

.mediaRankingPrimaryCell {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
}

.mediaRankingPrimaryCell.hotMusicPrimaryCell {
  padding-right: 0;
}

.hotVideoContentCell {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 64px minmax(0, 1fr) 28px;
  align-items: center;
}

.mediaRankingPrimaryCell .mediaInsightLinkCell {
  min-width: 0;
  flex: 1 1 auto;
}

.mediaRankingScore {
  min-width: 50px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-3) 10%, var(--surface-muted));
  color: var(--text-2);
  padding: 0 8px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.mediaRankingScore.medium {
  background: color-mix(in srgb, #d97706 12%, var(--surface-muted));
  color: #a15c05;
}

.mediaRankingScore.high {
  background: color-mix(in srgb, #0f937d 13%, var(--surface-muted));
  color: #0b806d;
}

.mediaRankingMiniTrend {
  width: 132px;
  height: 34px;
  display: inline-flex;
  align-items: flex-end;
  gap: 5px;
  border-bottom: 1px solid var(--hot-video-border);
  padding: 0 3px 3px;
}

.mediaRankingMiniTrend i {
  width: 12px;
  max-height: 30px;
  display: block;
  border-radius: 3px 3px 1px 1px;
  background: color-mix(in srgb, var(--hot-video-accent) 68%, #ffffff);
}

.mediaCreativePlanPage {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.mediaCreativePlanHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.mediaCreativePlanHeader > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mediaCreativePlanHeader > div:last-child {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.mediaCreativePlanHeaderActions .cuiSelect {
  width: min(280px, 38vw);
}

.mediaCreativePlanAlert {
  margin: 0;
}

.mediaCreativePlanHeader > div:first-child > span {
  color: var(--hot-video-accent);
  font-size: 11px;
  font-weight: 880;
}

.mediaCreativePlanHeader h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 0;
}

.mediaCreativePlanMetrics {
  margin: 0;
}

.mediaCreativePlanLayout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(330px, 390px) minmax(620px, 1fr);
  align-items: start;
  gap: 16px;
}

.mediaCreativePlanSidebar {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.mediaCreativeVersionList {
  display: grid;
  gap: 8px;
}

.mediaCreativeVersionList > button {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--hot-video-border);
  border-radius: 7px;
  background: var(--control-bg);
  color: var(--text-1);
  padding: 9px;
  text-align: left;
  cursor: pointer;
}

.mediaCreativeVersionList > button:hover,
.mediaCreativeVersionList > button:focus-visible {
  border-color: color-mix(in srgb, var(--hot-video-accent) 48%, var(--hot-video-border));
  background: var(--hot-video-soft);
  outline: none;
}

.mediaCreativeVersionList > button > span {
  display: grid;
  place-items: center;
  min-height: 34px;
  border-radius: 6px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  font-size: 11px;
  font-weight: 900;
}

.mediaCreativeVersionList > button > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.mediaCreativeVersionList strong {
  font-size: 12px;
}

.mediaCreativeVersionList small,
.mediaCreativeVersionEmpty {
  margin: 0;
  color: var(--text-3);
  font-size: 10px;
}

.mediaCreativePlanPage .cuiPanel {
  min-width: 0;
  border: 1px solid var(--hot-video-border);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-light);
}

.mediaCreativePlanPage .cuiPanelHeader {
  min-height: 54px;
  border-bottom: 1px solid var(--hot-video-border);
  padding: 13px 16px;
}

.mediaCreativePlanPage .cuiPanelTitle {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
}

.mediaCreativePlanPage .cuiPanelBody {
  padding: 16px;
}

.mediaCreativeReferencePanel .cuiPanelBody {
  max-height: 430px;
  overflow-y: auto;
}

.mediaCreativeReferenceList {
  display: grid;
  gap: 9px;
}

.mediaCreativeReferenceItem {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--hot-video-border);
  border-radius: 7px;
  background: var(--control-bg);
  padding: 8px;
}

.mediaCreativeReferenceItem > img,
.mediaCreativeReferenceItem > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  object-fit: cover;
}

.mediaCreativeReferenceItem > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.mediaCreativeReferenceItem small {
  color: var(--hot-video-accent);
  font-size: 9px;
  font-weight: 900;
}

.mediaCreativeReferenceItem > div > a,
.mediaCreativeReferenceItem em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaCreativeReferenceItem > div > a {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.mediaCreativeReferenceItem em {
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
  font-weight: 680;
}

.mediaCreativeReferenceItem .cuiButton {
  min-width: 30px;
  padding: 0 7px;
}

.mediaCreativeReferenceItem .cuiButton span {
  display: none;
}

.mediaCreativePlanEmpty,
.mediaCreativeDraftEmpty {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--text-3);
  text-align: center;
}

.mediaCreativePlanEmpty strong,
.mediaCreativeDraftEmpty strong {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 850;
}

.mediaCreativeDraftState {
  min-height: 180px;
}

.mediaCreativePlanEmpty > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.mediaCreativePlanDestinationButton.cuiButton {
  min-width: 112px;
  min-height: 34px;
  justify-content: center;
  border-color: color-mix(in srgb, var(--cui-primary, var(--primary)) 28%, var(--cui-line));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cui-primary, var(--primary)) 10%, transparent);
}

.mediaCreativePlanDestinationButton.cuiButton:hover {
  border-color: var(--cui-primary, var(--primary));
  transform: translateY(-1px);
}

.mediaCreativePlanExecutionActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.mediaCreativeGenerationProgress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 0;
  border: 1px solid var(--hot-video-border);
  border-radius: 7px;
  background: var(--surface-muted);
  padding: 12px;
}

.mediaCreativeGenerationProgress > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
}

.mediaCreativeGenerationProgress span {
  width: 26px;
  height: 26px;
  display: inline-flex;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hot-video-border);
  border-radius: 50%;
  background: var(--surface);
  font-size: 11px;
  font-weight: 900;
}

.mediaCreativeGenerationProgress strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaCreativeGenerationProgress > div.active,
.mediaCreativeGenerationProgress > div.completed {
  color: var(--cui-primary, var(--primary));
}

.mediaCreativeGenerationProgress > div.active span,
.mediaCreativeGenerationProgress > div.completed span {
  border-color: var(--cui-primary, var(--primary));
  background: color-mix(in srgb, var(--cui-primary, var(--primary)) 10%, var(--surface));
}

.mediaCreativeGenerationProgress > div.active span {
  animation: mediaCreativeStagePulse 1.1s ease-in-out infinite;
}

@keyframes mediaCreativeStagePulse {
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cui-primary, var(--primary)) 12%, transparent); }
}

.mediaCreativeMaterialAnalysis > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mediaCreativeMaterialAnalysis article {
  min-width: 0;
  border: 1px solid var(--hot-video-border);
  border-radius: 6px;
  background: var(--surface-muted);
  padding: 12px;
}

.mediaCreativeMaterialAnalysis article > strong {
  color: var(--cui-primary, var(--primary));
  font-size: 12px;
  font-weight: 900;
}

.mediaCreativeMaterialAnalysis ul {
  display: grid;
  gap: 6px;
  margin: 9px 0 0;
  padding-left: 17px;
}

.mediaCreativeMaterialAnalysis li,
.mediaCreativeMaterialAnalysis article > span {
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.55;
}

.mediaCreativeBriefForm {
  display: grid;
  gap: 13px;
}

.mediaCreativeBriefGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mediaCreativeBriefForm .cuiField {
  min-width: 0;
}

.mediaCreativeBriefForm .cuiFieldLabel {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
}

.mediaCreativeBriefForm .cuiInput,
.mediaCreativeBriefForm .cuiSelect {
  min-width: 0;
  width: 100%;
}

.mediaCreativeDraftPanel {
  min-height: 760px;
}

.mediaCreativeDraftPanel > .cuiPanelBody {
  padding: 0 18px 18px;
}

.mediaCreativeVideoPanel {
  display: grid;
  gap: 12px;
  border-bottom: 1px solid var(--hot-video-border);
  padding: 18px 0;
}

.mediaCreativeVideoPanel > header,
.mediaCreativeVideoPanel > header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mediaCreativeVideoPanel > header {
  justify-content: space-between;
}

.mediaCreativeVideoPanel h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
}

.mediaCreativeVideoPanel video {
  width: min(100%, 440px);
  max-height: 620px;
  border-radius: 7px;
  background: #000000;
}

.mediaCreativeVideoPanel > small {
  color: var(--text-3);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.mediaCreativeDraftList {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.65;
}

.mediaCreativeDraft {
  min-width: 0;
  display: grid;
}

.mediaCreativeDraft > section,
.mediaCreativeStrategyGrid > section {
  min-width: 0;
  display: grid;
  gap: 12px;
  border-bottom: 1px solid var(--hot-video-border);
  padding: 18px 0;
}

.mediaCreativeDraft section > header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hot-video-accent);
}

.mediaCreativeDraft section > header h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.mediaCreativeDraft .cuiTextarea,
.mediaCreativeDraft .cuiInput {
  width: 100%;
  resize: vertical;
  color: var(--text-1);
  font-size: 12px;
  line-height: 1.65;
}

.mediaCreativeHookList {
  display: grid;
  gap: 9px;
}

.mediaCreativeHookList label {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}

.mediaCreativeHookList label b {
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--hot-video-soft);
  color: var(--hot-video-accent);
  font-size: 11px;
  font-weight: 900;
}

.mediaCreativeShotTable {
  min-width: 0;
  display: grid;
  overflow-x: auto;
}

.mediaCreativeShotTable > div {
  min-width: 860px;
  display: grid;
  grid-template-columns: 90px minmax(280px, 1fr) minmax(230px, 0.8fr) minmax(170px, 0.55fr);
  gap: 8px;
  border-bottom: 1px solid var(--hot-video-border);
  padding: 8px 0;
}

.mediaCreativeVideoDialogForm {
  display: grid;
  gap: 16px;
}

.mediaCreativeVideoSettings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mediaCreativeVideoDialogForm .cuiInput,
.mediaCreativeVideoDialogForm .cuiSelect,
.mediaCreativeVideoDialogForm .cuiTextarea {
  width: 100%;
}

.mediaCreativeShotTable > div:last-child {
  border-bottom: 0;
}

.mediaCreativeShotTable > .head {
  color: var(--text-3);
  padding: 0 2px 8px;
  font-size: 10px;
  font-weight: 820;
}

.mediaCreativeStrategyGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  border-bottom: 1px solid var(--hot-video-border);
}

.mediaCreativeStrategyGrid > section {
  border-bottom: 0;
}

.mediaCreativeValidationList {
  display: grid;
  gap: 8px;
}

.mediaCreativeValidationList label {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.mediaCreativeValidationList .cuiCheckbox {
  margin: 0;
}

@media (max-width: 1280px) {
  .mediaCreativePlanLayout {
    grid-template-columns: minmax(300px, 340px) minmax(540px, 1fr);
  }
}

@media (max-width: 980px) {
  .mediaRankingTitleBar,
  .mediaCreativePlanHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .mediaCreativePlanLayout {
    grid-template-columns: minmax(0, 1fr);
  }

  .mediaCreativeReferencePanel .cuiPanelBody {
    max-height: none;
  }

  .mediaCreativeDraftPanel {
    min-height: 520px;
  }
}

@media (max-width: 680px) {
  .mediaRankingTitleGroup,
  .mediaRankingModeSwitch,
  .mediaCreativePlanHeader > div:last-child {
    width: 100%;
    justify-content: flex-start;
  }

  .mediaCreativePlanHeaderActions .cuiSelect {
    width: min(100%, 320px);
  }

  .mediaRankingModeSwitch .cuiSegmentedButton {
    min-width: 0;
    flex: 1 1;
  }

  .mediaCreativePlanMetrics,
  .mediaCreativeBriefGrid,
  .mediaCreativeStrategyGrid,
  .mediaCreativeGenerationProgress,
  .mediaCreativeMaterialAnalysis > div,
  .mediaCreativeVideoSettings {
    grid-template-columns: minmax(0, 1fr);
  }

  .mediaCreativePlanExecutionActions {
    width: 100%;
    justify-content: flex-start;
  }

  .mediaCreativePlanHeader > div:last-child > button {
    flex: 1 1;
  }

  .mediaCreativeReferenceItem {
    grid-template-columns: 46px minmax(0, 1fr) auto;
  }

  .mediaCreativeReferenceItem > img,
  .mediaCreativeReferenceItem > span {
    width: 46px;
    height: 46px;
  }

  .mediaCreativeBasketDrawerFooter {
    align-items: stretch;
    flex-direction: column;
  }

  .mediaCreativeBasketDrawerFooter > div {
    width: 100%;
  }

  .mediaCreativeBasketDrawerFooter > div > button {
    min-width: 0;
    flex: 1 1;
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/openapi.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Recovered member module CSS.
 * Owner: OpenAPI / wjy.
 * Source: origin/feat/auth-agreements-captcha-wjy.
 * Generated by selector ownership; do not mix other module prefixes here.
 */

.openapiPage {
  min-width: var(--workspace-canvas-min-width);
}

.openapiPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 16px;
}

.openapiHeroPanel {
  background:
    linear-gradient(135deg, rgba(6, 182, 212, 0.14), var(--primary-soft)), var(--surface-panel);
}

.openapiForm {
  display: grid;
  gap: 12px;
}

.openapiScopePicker,
.openapiKeyList {
  display: grid;
  gap: 10px;
}

.openapiScopeOption {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 10px 12px;
}

.openapiScopeOption.disabled {
  opacity: 0.64;
}

.openapiScopeOption input {
  width: 16px;
  height: 16px;
}

.openapiScopeOption strong,
.openapiScopeOption em,
.openapiScopeOption small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openapiScopeOption strong {
  color: var(--text-1);
}

.openapiScopeOption em,
.openapiScopeOption small {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.openapiKeyCard {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.openapiKeyCard h2,
.openapiKeyCard p,
.openapiKeyCard .cuiDataListItemTitle,
.openapiKeyCard .cuiDataListItemDescription {
  margin: 8px 0 0;
}

.openapiKeyCard h2,
.openapiKeyCard .cuiDataListItemTitle {
  color: var(--text-1);
  font-size: 18px;
}

.openapiKeyCard p,
.openapiKeyCard .cuiDataListItemDescription,
.openapiSecretOnce code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.openapiKeyCard p,
.openapiKeyCard .cuiDataListItemDescription {
  color: #67e8f9;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.openapiSecretOnce {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(245, 158, 11, 0.26);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
  padding: 12px;
}

.openapiSecretOnce span {
  color: #fbbf24;
  font-size: 12px;
  font-weight: 900;
}

.openapiSecretOnce code {
  color: var(--text-1);
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.openapiLogList {
  display: grid;
  gap: 8px;
}

.openapiLogDataList.cuiDataList {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.openapiLogDataList .cuiDataListBody {
  overflow-x: auto;
}

.openapiLogRow {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(180px, 1.3fr) 80px 88px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.openapiLogRow.head {
  min-height: 30px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.openapiLogRow:last-child,
.openapiLogList .cuiDataListTableRow:last-child .cuiDataListTableCell {
  border-bottom: 0;
}

.openapiLogRow strong,
.openapiLogRow span,
.openapiLogRow em,
.openapiLogRow small,
.openapiLogRow .cuiDataListTableHeadCell,
.openapiLogRow .cuiDataListTableCell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openapiLogRow strong,
.openapiLogRow .cuiDataListTableCell strong {
  color: var(--text-1);
}

.openapiLogRow em,
.openapiLogRow small,
.openapiLogRow .cuiDataListTableCell em,
.openapiLogRow .cuiDataListTableCell small {
  color: var(--text-3);
  font-style: normal;
}

.openapiForm {
  display: grid;
  gap: 12px;
}

.openapiScopePicker,
.openapiKeyList {
  display: grid;
  gap: 10px;
}

.openapiScopeOption {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 10px 12px;
}

.openapiScopeOption.disabled {
  opacity: 0.64;
}

.openapiScopeOption input {
  width: 16px;
  height: 16px;
}

.openapiScopeOption strong,
.openapiScopeOption em,
.openapiScopeOption small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openapiScopeOption strong {
  color: var(--text-1);
}

.openapiScopeOption em,
.openapiScopeOption small {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.openapiKeyCard {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.openapiKeyCard h2,
.openapiKeyCard p {
  margin: 8px 0 0;
}

.openapiKeyCard h2 {
  color: var(--text-1);
  font-size: 18px;
}

.openapiKeyCard p,
.openapiSecretOnce code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.openapiKeyCard p {
  color: #67e8f9;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.openapiSecretOnce {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(245, 158, 11, 0.26);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
  padding: 12px;
}

.openapiSecretOnce span {
  color: #fbbf24;
  font-size: 12px;
  font-weight: 900;
}

.openapiSecretOnce code {
  color: var(--text-1);
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.openapiLogList {
  display: grid;
  gap: 8px;
}

.openapiLogRow {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(180px, 1.3fr) 80px 88px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--row-line);
  color: var(--text-2);
  font-size: 13px;
}

.openapiLogRow.head {
  min-height: 30px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.openapiLogRow:last-child,
.openapiLogList .cuiDataListTableRow:last-child .cuiDataListTableCell {
  border-bottom: 0;
}

.openapiLogRow strong,
.openapiLogRow span,
.openapiLogRow em,
.openapiLogRow small,
.openapiLogRow .cuiDataListTableHeadCell,
.openapiLogRow .cuiDataListTableCell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openapiLogRow strong,
.openapiLogRow .cuiDataListTableCell strong {
  color: var(--text-1);
}

.openapiLogRow em,
.openapiLogRow small,
.openapiLogRow .cuiDataListTableCell em,
.openapiLogRow .cuiDataListTableCell small {
  color: var(--text-3);
  font-style: normal;
}

@media (max-width: 720px) {
  .openapiScopeOption,
  .openapiLogRow {
    grid-template-columns: 1fr;
  }

  .openapiLogRow.head {
    display: none;
  }
}

@media (max-width: 1180px) {
  .openapiLogRow {
    align-items: center;
    gap: 10px;
    padding: 0;
  }

  .openapiScopeOption {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .openapiLogRow {
    grid-template-columns: minmax(120px, 0.9fr) minmax(180px, 1.3fr) 80px 88px;
  }

  .openapiLogRow.head {
    display: grid;
  }
}

.openapiPage {
  min-width: var(--workspace-canvas-min-width);
}

.openapiPage {
  min-width: var(--workspace-canvas-min-width);
}

.openapiKeyUsage {
  display: grid;
  gap: 8px;
}

.openapiUsageBuckets {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.openapiUsageBuckets li {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-2);
}

.openapiUsageBuckets li strong {
  color: var(--text-1);
  font-size: 13px;
}

.openapiUsageBuckets li em {
  color: #67e8f9;
  font-style: normal;
}

.appContent:has(.openapiPage) {
  padding-top: 12px;
}

.openapiPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  gap: 12px;
}

.openapiPage > * {
  min-width: 0;
  align-self: start;
}

.openapiPage .cuiPanelHeader {
  padding: 14px 16px;
}

.openapiPage .cuiPanelBody {
  min-width: 0;
  padding: 14px 16px;
}

.openapiPage .noPermissionPanel.compact.cuiInlineState {
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
}

.openapiPage .noPermissionPanel.compact .cuiInlineStateCopy h2 {
  white-space: normal;
}

.openapiPage .noPermissionPanel.compact .noPermissionDetails {
  gap: 8px;
}

.openapiPage .noPermissionPanel.compact .permissionRequirementList {
  margin-top: 8px;
}

.openapiPage .noPermissionPanel.compact small {
  margin-top: 0;
}

.openapiRequestIdNote {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--text-3);
  font-size: 12px;
}

.openapiRequestIdNote code,
.openapiCodeText {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text-2);
}

.openapiErrorActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--text-3);
  font-size: 12px;
}

.openapiTabBar {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.openapiSegmented {
  width: min(100%, 480px);
  max-width: 100%;
  flex: 0 1 480px;
  display: inline-grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.openapiSegmentedButton {
  min-width: 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
}

.openapiTabStack {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.openapiPage .openapiChartLoadingState.cuiState {
  height: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
}

.openapiPage .openapiUsageTrendChart.compassChart {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.openapiRateLimitGrid {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}

.openapiRateLimitCard {
  --openapi-rate-limit-accent: var(--accent, #7c3aed);
  position: relative;
  min-width: 0;
  display: grid;
  gap: 16px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--openapi-rate-limit-accent) 7%, transparent),
      transparent 34%
    ),
    var(--surface-panel);
  padding: 18px 20px;
}

.openapiRateLimitCard.is-ip {
  --openapi-rate-limit-accent: var(--info, #0ea5e9);
}

.openapiRateLimitCard.is-team {
  --openapi-rate-limit-accent: var(--success, #059669);
}

.openapiRateLimitCard::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--openapi-rate-limit-accent);
  content: '';
}

.openapiRateLimitCardHeader {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.openapiRateLimitIdentity {
  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.openapiRateLimitIdentity > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.openapiRateLimitIdentity strong {
  color: var(--text-1);
  font-size: 18px;
}

.openapiRateLimitWindows {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  padding-top: 15px;
}

.openapiRateLimitWindow {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding-right: 22px;
}

.openapiRateLimitWindow + .openapiRateLimitWindow {
  border-left: 1px solid var(--line-dark);
  padding-right: 0;
  padding-left: 22px;
}

.openapiRateLimitWindow > div:first-child {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

.openapiRateLimitWindow strong {
  color: var(--text-1);
  font-size: 12px;
}

.openapiRateLimitWindow span,
.openapiRateLimitWindow small,
.openapiRateLimitExpiry {
  color: var(--text-3);
  font-size: 11px;
}

.openapiRateLimitResetTime {
  min-width: 0;
  display: grid;
  gap: 2px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.openapiRateLimitResetTime em {
  color: color-mix(in srgb, var(--brand-accent, #14b8a6) 82%, var(--text-2));
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.openapiRateLimitWindow .cuiProgressLabel {
  min-width: 86px;
  color: var(--text-2);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.openapiRateLimitExpiry {
  border-top: 1px solid var(--line-dark);
  padding-top: 10px;
}

.openapiLogPager {
  margin-top: 12px;
}

.openapiLogPageSize {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.openapiLogPageSize span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}

.openapiUsageQuota {
  display: grid;
  gap: 16px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 52%),
    var(--surface-panel);
  padding: 18px;
}

.openapiUsageQuotaHeader {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}

.openapiUsagePlanIdentity {
  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: center;
}

.openapiUsagePlanIcon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--accent);
}

.openapiUsagePlanIdentity > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.openapiUsagePlanIdentity strong {
  color: var(--text-1);
  font-size: 17px;
}

.openapiUsagePlanIdentity span,
.openapiUsageQuotaReadout small {
  color: var(--text-3);
  font-size: 12px;
}

.openapiUsageQuotaReadout {
  min-width: 220px;
  display: grid;
  gap: 3px;
  justify-items: end;
  text-align: right;
}

.openapiUsageRemainingRate {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}

.openapiUsageRemainingRate strong {
  color: var(--success, #059669);
  font-size: 16px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.openapiUsageRemainingRate.is-warning strong {
  color: var(--warning, #d97706);
}

.openapiUsageRemainingRate.is-danger strong {
  color: var(--danger, #dc2626);
}

.openapiUsageQuotaFraction {
  display: flex;
  gap: 5px;
  align-items: baseline;
  color: var(--text-3);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.openapiUsageQuotaFraction strong {
  color: var(--text-1);
  font-size: 28px;
  line-height: 1.05;
}

.openapiUsageQuotaFraction span {
  font-size: 15px;
  font-weight: 700;
}

.openapiUsageQuotaBar .cuiProgressTrack {
  height: 10px;
}

.openapiUsageQuotaMeta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.openapiUsageQuotaMeta > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 88%, transparent);
  padding: 9px 11px;
}

.openapiUsageQuotaMeta dt {
  min-width: 0;
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}

.openapiUsageQuotaMeta dt svg {
  flex: 0 0 auto;
  color: var(--accent);
}

.openapiUsageQuotaMeta dd {
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 800;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.openapiQuotaBatchList {
  display: grid;
  gap: 14px;
}

.openapiUsageDonut {
  width: 100%;
  max-width: 920px;
  gap: 32px;
  margin: 0 auto;
  padding: 8px;
}

.openapiUsageDonutCenter {
  display: grid;
  gap: 2px;
  justify-items: center;
}

.openapiUsageDonut .cuiDonutLegend {
  gap: 7px;
}

.openapiUsageDonut .cuiDonutLegendItem {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) max-content;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 9px 11px;
}

.openapiUsageDonut .cuiDonutLegendLabel {
  overflow: visible;
  white-space: normal;
}

.openapiUsageDonut .cuiDonutLegendValue {
  color: var(--text-2);
  font-size: 12px;
}

.openapiUsageDonutKey {
  min-width: 0;
  display: grid;
  gap: 2px;
  color: var(--text-1);
  text-decoration: none;
}

.openapiUsageDonutKey :is(strong, span, code) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.openapiUsageDonutKey strong {
  font-size: 13px;
}

.openapiUsageDonutKey span,
.openapiUsageDonutKey code {
  color: var(--text-3);
  font-size: 11px;
}

.openapiUsageDonutKey[href]:hover strong {
  color: var(--accent);
}

.openapiUsageDonutOther {
  cursor: default;
}

.openapiUsageDonutKey:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.openapiLogFilters {
  margin-bottom: 14px;
}

.openapiLogFilterGrid {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1.3fr) minmax(160px, 0.7fr) auto;
  gap: 12px;
  align-items: end;
}

.openapiLogFilterGrid > label {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}

.openapiLogFilterActions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.openapiLogRequest {
  overflow-wrap: anywhere;
}

.openapiLogDetails {
  display: grid;
  gap: 0;
  margin: 0;
}

.openapiLogDetails > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.35fr) minmax(0, 1fr);
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-dark);
}

.openapiLogDetails > div:last-child {
  border-bottom: 0;
}

.openapiLogDetails dt {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
}

.openapiLogDetails dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-1);
}

.openapiExportSection,
.openapiExportTable,
.openapiExportDialog {
  display: grid;
  gap: 12px;
}

.openapiExportTable .cuiPagination {
  margin-top: 0;
}

.openapiExportResult {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.openapiExportResult small {
  color: var(--text-3);
  overflow-wrap: anywhere;
}

.openapiExportActions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  min-height: 32px;
}

.openapiExportSummary {
  margin: 0;
  display: grid;
  gap: 0;
}

.openapiExportSummary > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(110px, 0.35fr) minmax(0, 1fr);
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-dark);
}

.openapiExportSummary > div:last-child {
  border-bottom: 0;
}

.openapiExportSummary dt {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
}

.openapiExportSummary dd {
  min-width: 0;
  margin: 0;
  color: var(--text-1);
  overflow-wrap: anywhere;
}

.openapiFormDivider {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-dark);
}

.openapiFormRow {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.openapiField {
  min-width: 0;
}

.openapiFieldWide {
  grid-column: 1 / -1;
}

.openapiLifetimeControl {
  display: grid;
  grid-template-columns: max-content minmax(220px, 1fr);
  align-items: center;
  gap: 12px;
}

.openapiFormActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.openapiFormActionsStart {
  justify-content: flex-start;
}

.openapiScopeGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.openapiScopeCard {
  min-width: 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 10px 12px;
}

.openapiScopeCard.is-disabled {
  opacity: 0.64;
}

.openapiScopeCardBody {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.openapiScopeCardBody strong {
  color: var(--text-1);
  font-size: 13px;
}

.openapiScopeCardBody small {
  color: var(--text-3);
  font-size: 11px;
}

.openapiScopeTags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.openapiTrendControls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.openapiTrendControls .cuiDateRangePicker {
  min-width: 280px;
}

.openapiSecretReveal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #67e8f9;
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.08);
  padding: 12px 14px;
}

.openapiSecretRevealTag {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 600;
}

.openapiSecretRevealValue {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: #67e8f9;
  overflow-wrap: anywhere;
}

.openapiSecretRevealHint {
  color: var(--text-3);
  font-size: 12px;
}

.openapiKeyList,
.openapiWebhookList {
  display: grid;
  gap: 10px;
}

.openapiKeyItem,
.openapiWebhookItem {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.openapiKeyItemBadges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.openapiKeyPrimaryCell,
.openapiKeyStatusCell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.openapiKeyTable tbody tr {
  height: 64px;
}

.openapiKeyScopeDisclosure {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.openapiKeyScopeDisclosureTags {
  min-width: 0;
  overflow: hidden;
}

.openapiKeyScopeDisclosureTags .openapiScopeTags {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

.openapiKeyScopeDisclosure.is-expanded {
  align-items: start;
}

.openapiKeyScopeDisclosure.is-expanded .openapiKeyScopeDisclosureTags {
  overflow: visible;
}

.openapiKeyScopeDisclosure.is-expanded .openapiScopeTags {
  flex-wrap: wrap;
  overflow: visible;
}

.openapiKeyScopeDisclosureButton {
  flex: 0 0 auto;
}

.openapiKeyPrimaryCell strong {
  color: var(--text-1);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.openapiKeyPrimaryCell code {
  color: var(--text-3);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.openapiKeyStatusCell {
  align-items: flex-start;
}

.openapiKeyStatusCell small {
  color: var(--text-3);
  font-size: 11px;
}

.openapiKeyStatusHeader {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.openapiKeyStatusHelp {
  display: inline-grid;
  width: 17px;
  height: 17px;
  padding: 0;
  place-items: center;
  appearance: none;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  cursor: help;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.openapiKeyStatusHelp:hover {
  color: var(--text-1);
}

.openapiKeyStatusHelp:focus-visible {
  color: var(--text-1);
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.cuiTooltipContent.openapiKeyStatusTooltip {
  width: min(360px, calc(100vw - 24px));
  max-width: min(360px, calc(100vw - 24px));
  padding: 12px;
  font-weight: 500;
}

.openapiKeyStatusTooltipBody {
  display: grid;
  gap: 10px;
}

.openapiKeyStatusTooltipBody > strong {
  font-size: 13px;
  font-weight: 800;
}

.openapiKeyStatusTooltipList {
  display: grid;
  gap: 7px;
  margin: 0;
}

.openapiKeyStatusTooltipItem {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px;
}

.openapiKeyStatusTooltipItem dt {
  color: #99f6e4;
  font-weight: 800;
}

.openapiKeyStatusTooltipItem dd {
  margin: 0;
  color: rgb(255 255 255 / 78%);
}

.openapiKeyActionCell {
  display: flex;
  justify-content: flex-end;
}

.openapiKeyUsageDialog {
  display: grid;
  gap: 16px;
}

.openapiKeyUsageDialog .cuiMetricGrid {
  margin: 0;
}

.openapiKeyMetricRow {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.openapiKeyMetricRow span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.openapiKeyMetricRow strong {
  color: var(--text-1);
  font-size: 13px;
}

.openapiKeyMetricRow em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
}

.openapiInlineStats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--text-2);
  font-size: 12px;
}

.openapiInlineStats strong {
  color: var(--text-1);
}

.openapiStepUpDialog,
.openapiStepUpForm,
.openapiRevealedSecret {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.openapiStepUpMethod {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-2);
}

.openapiStepUpMethod span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.openapiStepUpMethod strong {
  color: var(--text-1);
  font-size: 13px;
}

.openapiStepUpMethod small,
.openapiRevealedSecret > small {
  color: var(--text-3);
  font-size: 12px;
}

.openapiStepUpCodeRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.openapiStepUpCodeRow .cuiButton {
  min-width: 126px;
}

.openapiSecretInputRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

.openapiSecretInputRow .cuiInput {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.openapiEventGrid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.openapiWebhookMeta {
  color: var(--text-3);
  font-size: 12px;
}

.openapiWebhookEventPicker {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 12px;
}

.openapiWebhookEventPickerSummary,
.openapiWebhookEventCategoryTitle {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.openapiWebhookEventPickerSummary > span {
  color: var(--text-2);
  font-size: 12px;
}

.openapiWebhookEventCategoryTitle {
  width: 100%;
}

.openapiWebhookEventCategoryTitle strong {
  color: var(--text-1);
  font-size: 13px;
}

.openapiWebhookEventCategoryTitle small,
.openapiWebhookEventOption small {
  color: var(--text-3);
  font-size: 12px;
}

.openapiWebhookEventOptions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}

.openapiWebhookEventOption {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.openapiWebhookEventOption strong {
  color: var(--text-1);
  font-size: 13px;
}

.openapiWebhookFilters {
  margin-bottom: 16px;
}

.openapiWebhookFilters .cuiSearchFilterRowBody,
.openapiWebhookFilters .cuiDateRangePicker {
  min-width: 0;
}

.openapiWebhookAdvancedFilters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.openapiWebhookFilterActions {
  justify-content: flex-end;
}

.openapiWebhookResponseCodeInput {
  width: 100%;
}

.openapiWebhookResponseCodeHelp {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.openapiWebhookActionCell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.openapiWebhookDeliveryDetail {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.openapiWebhookDeliveryDetail section {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.openapiWebhookDeliveryDetail h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 13px;
}

.openapiWebhookDeliveryDetail pre {
  max-height: 280px;
  overflow: auto;
  margin: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text-2);
  font:
    12px/1.6 ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  overflow-wrap: anywhere;
  padding: 12px;
  white-space: pre-wrap;
}

.openapiDocsLink,
.openapiDocsPrimaryButton {
  min-height: 40px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(20, 184, 166, 0.42);
  border-radius: 8px;
  background: linear-gradient(135deg, #14b8a6, #38bdf8);
  color: #06151b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  padding: 0 16px;
  white-space: nowrap;
}

.openapiDocsLink:hover,
.openapiDocsPrimaryButton:hover:not(:disabled) {
  filter: brightness(1.04);
}

.openapiDocsPrimaryButton:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.openapiDocsPage {
  min-width: var(--workspace-canvas-min-width);
  display: grid;
  gap: 12px;
  align-content: start;
  grid-auto-rows: max-content;
  color: var(--text-1);
}

.openapiDocsTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.openapiDocsDebugTrigger {
  flex: 0 0 auto;
}

.openapiDocsBackLink {
  min-height: 36px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(20, 184, 166, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #0f766e;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  padding: 0 14px 0 12px;
  box-shadow: 0 8px 22px rgba(15, 118, 110, 0.08);
}

.openapiDocsBackLink:hover {
  border-color: rgba(20, 184, 166, 0.58);
  background: #ecfeff;
  color: #0891b2;
}

.openapiDocsBackLink:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.45);
  outline-offset: 2px;
}

.openapiDocsMuted {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}

.openapiDocsKicker {
  color: #0f9f8f;
  font-size: 12px;
  font-weight: 800;
}

.openapiDocsInfoBand > div {
  min-width: 0;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.openapiDocsInfoBand svg {
  flex: 0 0 auto;
  color: #0f9f8f;
}

.openapiDocsInfoBand span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
}

.openapiDocsInfoBand strong {
  min-width: 0;
  color: var(--text-1);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: normal;
}

.openapiDocsLayout {
  --openapi-docs-sidebar-w: minmax(230px, 272px);
  display: grid;
  gap: 16px;
  grid-template-columns: var(--openapi-docs-sidebar-w) minmax(0, 1fr);
  align-items: start;
}

.openapiDocsLayout.is-sidebar-collapsed {
  --openapi-docs-sidebar-w: 52px;
}

.openapiDocsMain {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.openapiDocsSidebar,
.openapiDocsDebugPanel {
  position: sticky;
  top: 16px;
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 14px;
}

.openapiDocsSidebar {
  max-height: calc(100dvh - 96px);
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.openapiDocsSidebarTitle,
.openapiDocsDebugParamsTitle {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
}

.openapiDocsEndpointList {
  display: grid;
  gap: 8px;
}

.openapiDocsEndpointItem {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--text-1);
  text-align: left;
  padding: 10px;
}

.openapiDocsEndpointItem.is-active {
  border-color: rgba(20, 184, 166, 0.62);
  background: rgba(20, 184, 166, 0.12);
}

.openapiDocsEndpointMethod {
  border-radius: 6px;
  background: rgba(20, 184, 166, 0.16);
  color: #0f766e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 6px;
}

.openapiDocsEndpointMethod.is-guide {
  background: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
  font-family: inherit;
}

.openapiDocsEndpointText {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.openapiDocsEndpointText strong,
.openapiDocsEndpointText small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openapiDocsEndpointText strong {
  font-size: 13px;
}

.openapiDocsEndpointText small,
.openapiDocsSidebarNote {
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.6;
}

.openapiDocsSidebar.is-collapsed {
  justify-items: center;
  gap: 0;
  padding: 10px 8px;
}

.openapiDocsSidebarTop {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.openapiDocsSidebarToggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--text-2);
  cursor: pointer;
  padding: 0;
}

.openapiDocsSidebarToggle:hover {
  border-color: rgba(20, 184, 166, 0.58);
  color: #0f766e;
}

.openapiDocsSidebarToggle:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.45);
  outline-offset: 2px;
}

.openapiDocsNavGroup {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.openapiDocsNavGroupHeader {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 6px 4px;
}

.openapiDocsNavGroupHeader:hover {
  background: rgba(20, 184, 166, 0.08);
}

.openapiDocsNavGroupHeader svg {
  color: var(--text-3);
}

.openapiDocsNavGroupHeader.has-active svg:first-of-type,
.openapiDocsNavGroupHeader.has-active strong {
  color: #0f766e;
}

.openapiDocsNavGroupHeader strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openapiDocsNavGroupHeader > span {
  color: var(--text-3);
  font-size: 11px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.openapiDocsNavChevron {
  transition: transform 0.15s ease;
}

.openapiDocsNavGroupHeader[aria-expanded='false'] .openapiDocsNavChevron {
  transform: rotate(-90deg);
}

.openapiDocsDetail {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.openapiDocsDetailHeader,
.openapiDocsSection {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 16px;
}

.openapiDocsDetailHeader {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.openapiDocsDetailHeader h1,
.openapiDocsSection h2 {
  margin: 0;
  color: var(--text-1);
}

.openapiDocsDetailHeader h1 {
  margin-top: 4px;
  font-size: 24px;
}

.openapiDocsDetailHeader p {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}

.openapiDocsMethodPath {
  min-width: 220px;
  display: grid;
  gap: 6px;
  justify-items: start;
  border: 1px solid rgba(56, 189, 248, 0.26);
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.08);
  padding: 10px;
}

.openapiDocsMethodPath span {
  color: #0284c7;
  font-size: 12px;
  font-weight: 800;
}

.openapiDocsMethodPath code,
.openapiDocsParamRow code,
.openapiDocsHeaderList code,
.openapiDocsErrorMeta strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.openapiDocsMethodPath code {
  max-width: 100%;
  color: var(--text-1);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.openapiDocsInfoBand {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  padding: 10px 12px;
}

.openapiDocsInfoBand > div + div {
  padding-left: 18px;
  border-left: 1px solid rgba(15, 23, 42, 0.1);
}

.openapiDocsSection {
  display: grid;
  gap: 12px;
}

.openapiDocsSection h2 {
  font-size: 17px;
}

.openapiDocsGuideGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.openapiDocsGuideItem {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: 8px;
  background: rgba(20, 184, 166, 0.07);
  padding: 10px 12px;
}

.openapiDocsGuideItem span {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
}

.openapiDocsGuideItem strong {
  min-width: 0;
  color: var(--text-1);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.openapiDocsBulletList {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.65;
}

.openapiDocsHeaderTable,
.openapiDocsFaqList {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
}

.openapiDocsHeaderTable > div,
.openapiDocsFaqList > div {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

.openapiDocsHeaderTable > div {
  grid-template-columns: minmax(150px, 0.6fr) minmax(0, 1fr);
}

.openapiDocsHeaderTable > div + div,
.openapiDocsFaqList > div + div {
  border-top: 1px solid var(--line-dark);
}

.openapiDocsHeaderTable code {
  color: var(--text-1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.openapiDocsHeaderTable span,
.openapiDocsFaqList span {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.openapiDocsFaqList strong {
  color: var(--text-1);
  font-size: 13px;
}

.openapiDocsParamTable {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
}

.openapiDocsParamHead,
.openapiDocsParamRow {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(120px, 0.8fr) minmax(90px, 0.5fr) minmax(0, 2fr);
  align-items: center;
  padding: 10px 12px;
}

.openapiDocsParamHead {
  background: rgba(15, 23, 42, 0.04);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
}

.openapiDocsParamRow + .openapiDocsParamRow {
  border-top: 1px solid var(--line-dark);
}

.openapiDocsParamRow {
  color: var(--text-2);
  font-size: 12px;
}

.openapiDocsCodeBlock {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: #0f172a;
}

.openapiDocsCodeHeader {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px 0 12px;
}

.openapiDocsCopyButton {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(45, 212, 191, 0.38);
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.12);
  color: #ccfbf1;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 0 10px;
  white-space: nowrap;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.openapiDocsCopyButton:hover {
  border-color: rgba(94, 234, 212, 0.72);
  background: rgba(20, 184, 166, 0.2);
  color: #f0fdfa;
  transform: translateY(-1px);
}

.openapiDocsCopyButton.is-copied {
  border-color: rgba(134, 239, 172, 0.72);
  background: rgba(34, 197, 94, 0.18);
  color: #dcfce7;
}

.openapiDocsCodeBlock pre {
  max-height: 360px;
  margin: 0;
  overflow: auto;
  padding: 12px;
}

.openapiDocsCodeBlock code {
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre;
}

.openapiDocsIconButton {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-2);
}

.openapiDocsErrorList {
  display: grid;
  gap: 12px;
}

.openapiDocsErrorItem {
  display: grid;
  gap: 8px;
}

.openapiDocsErrorMeta,
.openapiDocsDebugResultMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--text-2);
  font-size: 12px;
}

.openapiDocsStatus {
  min-width: 42px;
  display: inline-flex;
  justify-content: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
}

.openapiDocsStatus-success {
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}

.openapiDocsStatus-warning {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.openapiDocsStatus-danger {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

.openapiDocsStatus-neutral {
  background: rgba(100, 116, 139, 0.14);
  color: #475569;
}

.openapiDocsDebugHeader {
  display: grid;
  gap: 4px;
}

.openapiDocsDebugHeader strong {
  color: var(--text-1);
  font-size: 17px;
}

.openapiDocsDebugHeader code {
  color: var(--text-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.openapiDocsDebugForm,
.openapiDocsDebugParams,
.openapiDocsDebugResult {
  display: grid;
  gap: 12px;
}

.openapiDocsDebugField {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.openapiDocsDebugField > span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
}

.openapiDocsDebugField b {
  color: #dc2626;
}

.openapiDocsDebugField small {
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.5;
}

.openapiDocsDebugSecretInput {
  width: 100%;
}

.openapiDocsDebugSecretInput .cuiInput {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.openapiDocsDebugField > .cuiFieldError {
  color: var(--cui-danger);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.openapiDocsDebugNotice,
.openapiDocsDebugError {
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  padding: 10px 12px;
}

.openapiDocsDebugNotice {
  border: 1px solid rgba(56, 189, 248, 0.24);
  background: rgba(56, 189, 248, 0.08);
  color: var(--text-2);
}

.openapiDocsDebugError {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(239, 68, 68, 0.26);
  background: rgba(239, 68, 68, 0.08);
  color: #991b1b;
}

.openapiDocsDebugError code,
.openapiDocsDebugError small {
  color: #7f1d1d;
}

.openapiDocsHeaderList {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
}

.openapiDocsHeaderList > div {
  min-width: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1fr);
  color: var(--text-2);
  font-size: 12px;
  padding: 9px 10px;
}

.openapiDocsHeaderList > div + div {
  border-top: 1px solid var(--line-dark);
}

.openapiDocsHeaderList span,
.openapiDocsHeaderList code {
  min-width: 0;
  overflow-wrap: anywhere;
}

.openapiDocsSpin {
  animation: openapiDocsSpin 0.8s linear infinite;
}

@media (max-width: 720px) {
  .openapiLifetimeControl {
    grid-template-columns: minmax(0, 1fr);
  }
  .openapiFormRow {
    grid-template-columns: minmax(0, 1fr);
  }

  .openapiUsageQuotaHeader,
  .openapiUsageQuotaMeta {
    grid-template-columns: minmax(0, 1fr);
  }

  .openapiUsageQuotaReadout {
    min-width: 0;
    justify-items: start;
    text-align: left;
  }

  .openapiUsageDonut.cuiDonut {
    flex-direction: column;
    align-items: center;
  }

  .openapiUsageDonut .cuiDonutLegend {
    width: 100%;
  }

  .openapiTrendControls {
    align-items: stretch;
    justify-content: flex-start;
  }

  .openapiTrendControls .cuiDateRangePicker {
    width: 100%;
    min-width: 0;
  }

  .openapiStepUpCodeRow,
  .openapiSecretInputRow {
    grid-template-columns: minmax(0, 1fr);
  }

  .openapiStepUpCodeRow .cuiButton,
  .openapiSecretInputRow .cuiButton {
    width: 100%;
  }

  .openapiWebhookEventOptions,
  .openapiWebhookAdvancedFilters {
    grid-template-columns: minmax(0, 1fr);
  }

  .openapiWebhookEventPickerSummary,
  .openapiWebhookFilterActions {
    align-items: stretch;
    flex-direction: column;
  }

  .openapiWebhookFilterActions .openapiLogFilterActions,
  .openapiWebhookFilterActions .cuiButton {
    width: 100%;
  }

  .openapiWebhookFilterActions .openapiLogFilterActions {
    flex-direction: column;
  }
}

@media (max-width: 1280px) {
  .openapiDocsLayout {
    --openapi-docs-sidebar-w: minmax(200px, 236px);
  }
}

@media (max-width: 900px) {
  .openapiDocsDetailHeader,
  .openapiDocsLayout {
    grid-template-columns: minmax(0, 1fr);
  }

  .openapiDocsMethodPath {
    min-width: 0;
  }

  .openapiDocsSidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
    scrollbar-gutter: auto;
  }

  .openapiDocsInfoBand {
    gap: 8px 14px;
  }

  .openapiDocsInfoBand > div + div {
    border-left: 0;
    padding-left: 0;
  }

  .openapiDocsGuideGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .openapiRateLimitCardHeader {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .openapiRateLimitWindows {
    grid-template-columns: minmax(0, 1fr);
  }

  .openapiRateLimitWindow {
    padding-right: 0;
  }

  .openapiRateLimitWindow + .openapiRateLimitWindow {
    border-top: 1px solid var(--line-dark);
    border-left: 0;
    margin-top: 14px;
    padding-top: 14px;
    padding-left: 0;
  }

  .openapiTabBar {
    align-items: stretch;
  }

  .openapiSegmented {
    flex-basis: 100%;
  }

  .openapiUsageQuota {
    padding: 14px;
  }

  .openapiUsageDonut .cuiDonutLegendItem {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .openapiUsageDonut .cuiDonutLegendValue {
    grid-column: 2;
    justify-self: start;
  }

  .openapiLogFilterGrid,
  .openapiLogDetails > div,
  .openapiExportSummary > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .openapiLogFilterActions {
    align-items: stretch;
  }

  .openapiDocsLink,
  .openapiDocsPrimaryButton {
    width: 100%;
  }

  .openapiDocsTopBar .openapiDocsDebugTrigger {
    width: auto;
  }

  .openapiDocsDetailHeader,
  .openapiDocsSection,
  .openapiDocsSidebar,
  .openapiDocsDebugPanel {
    padding: 12px;
  }

  .openapiDocsParamHead {
    display: none;
  }

  .openapiDocsParamRow,
  .openapiDocsHeaderTable > div,
  .openapiDocsHeaderList > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

.openapiDocsFieldLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.openapiDocsRequiredTag {
  border: 1px solid rgba(220, 38, 38, 0.28);
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  padding: 3px 7px;
}

.openapiDocsParamName {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.openapiDocsDebugToolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.openapiDocsSampleButton {
  justify-self: start;
}

.openapiDocsSubmitButton {
  margin-top: 2px;
}

.openapiDocsDrawerRoot {
  position: fixed;
  inset: 0;
  z-index: var(--cui-z-overlay, 1200);
}

.openapiDocsDrawerBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
}

.openapiDocsDrawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  min-width: 0;
  max-width: 100vw;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  background: var(--surface-panel);
  box-shadow: -18px 0 48px rgba(15, 23, 42, 0.22);
}

.openapiDocsDrawerHandle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  border-right: 1px solid var(--line-dark);
  background: var(--surface-muted);
  color: var(--text-3);
  cursor: col-resize;
  touch-action: none;
}

.openapiDocsDrawerHandle:hover {
  background: rgba(20, 184, 166, 0.12);
  color: #0f766e;
}

.openapiDocsDrawerHandle:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.45);
  outline-offset: -2px;
}

body.openapiDocsResizing {
  cursor: col-resize;
  -webkit-user-select: none;
          user-select: none;
}

.openapiDocsDrawerBody {
  position: relative;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
}

.openapiDocsDrawerClose {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text-2);
  cursor: pointer;
  padding: 0;
}

.openapiDocsDrawerClose:hover {
  border-color: rgba(20, 184, 166, 0.58);
  color: #0f766e;
}

.openapiDocsDrawerClose:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.45);
  outline-offset: 2px;
}

.openapiDocsDrawer .openapiDocsDebugPanel {
  position: static;
  min-height: 0;
  height: 100%;
  align-content: start;
  grid-auto-rows: max-content;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: none;
  border-radius: 0;
  padding: 16px 16px 20px;
}

.openapiDocsDrawer .openapiDocsDebugHeader {
  padding-right: 42px;
}

.openapiDocsDrawer .openapiDocsDebugForm {
  align-content: start;
  grid-auto-rows: max-content;
}

@container (min-width: 640px) {
  .openapiDocsDrawer .openapiDocsDebugParams {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .openapiDocsDrawer .openapiDocsDebugParamsTitle {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .openapiDocsDrawer {
    width: 100vw !important;
  }

  .openapiDocsDrawerHandle {
    display: none;
  }
}

@keyframes openapiDocsSpin {
  to {
    transform: rotate(360deg);
  }
}

.openapiKeyModeStack,
.openapiScopeCatalog,
.openapiScopeCategoryList,
.openapiAccessKeyEditor,
.openapiAccessKeyDetail,
.openapiAccessKeySecret {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.openapiKeyModeStack {
  width: 100%;
}

.openapiKeyModeBar {
  min-width: 0;
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
}

.openapiScopeCatalogToolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.openapiScopeCategory {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  overflow: hidden;
}

.openapiScopeCategoryHeader {
  min-height: 44px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--row-line);
  background: var(--surface-muted);
  padding: 8px 12px;
}

.openapiScopeCategoryHeader strong,
.openapiScopeCategoryHeader small {
  min-width: 0;
}

.openapiScopeCategoryHeader small {
  color: var(--text-3);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.openapiScopeCategory.is-collapsed .openapiScopeCategoryHeader {
  border-bottom: none;
}

.openapiScopeCategoryToggle {
  min-width: 0;
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}

.openapiScopeCategoryToggle strong,
.openapiScopeCategoryToggle small {
  min-width: 0;
}

.openapiScopeCategoryToggle small {
  color: var(--text-3);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.openapiScopeCategoryChevron {
  color: var(--text-3);
  transition: transform 0.15s ease;
}

.openapiScopeCategoryToggle[aria-expanded='true'] .openapiScopeCategoryChevron {
  transform: rotate(180deg);
}

.openapiScopeCapabilityList {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.openapiScopeCapability {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  border-bottom: 1px solid var(--row-line);
  padding: 10px 12px;
  cursor: pointer;
}

.openapiScopeCapability:nth-child(odd) {
  border-right: 1px solid var(--row-line);
}

.openapiScopeCapability.is-disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.openapiScopeCapability > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.openapiScopeCapability strong,
.openapiScopeCapability small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.openapiScopeCapability small,
.openapiScopeCatalogEmpty {
  color: var(--text-3);
  font-size: 12px;
}

.openapiScopeSelectionSummary,
.openapiAccessKeyActions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.openapiScopeCatalogEmpty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px dashed var(--line-dark);
  border-radius: 8px;
  padding: 12px;
}

.openapiAccessKeyFilters {
  margin-bottom: 16px;
}

.openapiAccessKeyFilters .cuiSearchFilterBox {
  width: min(100%, 520px);
}

.openapiAccessKeyAdvancedFilters {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
}

.openapiAccessKeyStatusFilterBody {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.openapiAccessKeyMoreFilters,
.openapiAccessKeyFilterActions {
  flex: 0 0 auto;
}

.openapiAccessKeyFilterActions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.openapiAccessKeyTagList {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.openapiAccessKeyActionCell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.openapiAccessKeyDataKeyCount {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.openapiAccessKeyCallTrend {
  width: 226px;
  display: grid;
  grid-template-columns: minmax(96px, 1fr) 120px;
  gap: 10px;
  align-items: center;
}

.openapiAccessKeyCallTrend strong {
  min-width: 0;
  font-size: 13px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.openapiAccessKeyCallTrend .cuiSparkline {
  display: block;
}

.openapiAccessKeyPager {
  margin-top: 12px;
}

.openapiAccessKeyPageSize {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.openapiAccessKeyPageSize span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}

.openapiAccessKeyDataKeysDrawer {
  min-width: 0;
}

.openapiAccessKeyDataKeysDrawerHeader {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  border-bottom: 1px solid var(--cui-drawer-border, var(--line-dark));
  padding: 18px 20px;
}

.openapiAccessKeyDataKeysResizeHandle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -7px;
  z-index: 1;
  width: 14px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  cursor: col-resize;
  touch-action: none;
}

.openapiAccessKeyDataKeysResizeHandle::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
  background: transparent;
  content: '';
  transition: background 140ms ease;
}

.openapiAccessKeyDataKeysResizeHandle:hover::after,
.openapiAccessKeyDataKeysResizeHandle:focus-visible::after {
  background: var(--accent);
}

.openapiAccessKeyDataKeysResizeHandle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

.openapiAccessKeyDataKeysResizeHandle svg {
  position: relative;
  z-index: 1;
  border-radius: 4px;
  background: var(--surface-panel);
}

.openapiAccessKeyDataKeysDrawerHeading {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.openapiAccessKeyDataKeysDrawerHeading h2,
.openapiAccessKeyDataKeysDrawerHeading p {
  margin: 0;
  letter-spacing: 0;
}

.openapiAccessKeyDataKeysDrawerHeading h2 {
  color: var(--text-1);
  font-size: 16px;
  line-height: 1.4;
}

.openapiAccessKeyDataKeysDrawerHeading p {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
}

.openapiAccessKeyDataKeysFilters,
.openapiAccessKeyDataKeysFilters .cuiSearchFilterBox {
  width: 100%;
}

.openapiAccessKeyDataKeysFilterFields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 12px;
  margin-top: 12px;
}

.openapiAccessKeyDataKeysFilterActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.openapiAccessKeyDataKeysTableToolbar {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.openapiAccessKeyDataKeysScopeDetails {
  min-width: 0;
  padding: 4px 0;
}

.openapiAccessKeyDataKeysPager {
  margin-top: 4px;
}

.openapiAccessKeyDataKeysPageSize {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.openapiAccessKeyDataKeysPageSize span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}

.openapiAccessKeyDetail dl {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.openapiAccessKeyDetail dl > div {
  min-width: 0;
  display: grid;
  gap: 5px;
  border-bottom: 1px solid var(--row-line);
  padding-bottom: 10px;
}

.openapiAccessKeyDetail dt {
  color: var(--text-3);
  font-size: 12px;
}

.openapiAccessKeyDetail dd {
  min-width: 0;
  margin: 0;
  color: var(--text-1);
  overflow-wrap: anywhere;
}

.openapiDocsAccessKeyGuide {
  min-width: 0;
  display: grid;
  gap: 16px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding: 18px 0;
}

.openapiDocsAccessKeyGuide > header,
.openapiDocsAccessKeyGrid > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.openapiDocsAccessKeyGuide h1,
.openapiDocsAccessKeyGuide h2,
.openapiDocsAccessKeyGuide p {
  margin: 0;
}

.openapiDocsAccessKeyGuide h1 {
  color: var(--text-1);
  font-size: 24px;
}

.openapiDocsAccessKeyGuide h2 {
  color: var(--text-1);
  font-size: 15px;
}

.openapiDocsAccessKeyGuide p,
.openapiDocsAccessKeyGuide li {
  color: var(--text-2);
  line-height: 1.65;
}

.openapiDocsAccessKeyGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.openapiDocsAccessKeyGrid ul {
  margin: 0;
  padding-left: 20px;
}

@media (max-width: 900px) {
  .openapiAccessKeyAdvancedFilters {
    grid-template-columns: minmax(0, 1fr);
  }

  .openapiAccessKeyDataKeysFilterFields {
    grid-template-columns: minmax(0, 1fr);
  }

  .openapiAccessKeyDataKeysFilterActions {
    justify-content: stretch;
  }

  .openapiAccessKeyDataKeysFilterActions .cuiButton {
    flex: 1 1;
  }

  .openapiAccessKeyStatusFilterBody {
    align-items: stretch;
    flex-direction: column;
  }

  .openapiAccessKeyMoreFilters,
  .openapiAccessKeyFilterActions,
  .openapiAccessKeyFilterActions .cuiButton {
    width: 100%;
  }

  .openapiAccessKeyFilterActions {
    flex-direction: column;
    margin-left: 0;
  }

  .openapiScopeCapabilityList,
  .openapiAccessKeyDetail dl,
  .openapiDocsAccessKeyGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .openapiScopeCapability:nth-child(odd) {
    border-right: 0;
  }
}

@media (max-width: 640px) {
  .openapiAccessKeyDataKeysDrawer {
    width: 100vw;
    max-width: 100vw;
  }

  .openapiAccessKeyDataKeysResizeHandle {
    display: none;
  }

  .openapiAccessKeyDataKeysDrawerHeader {
    padding: 16px;
  }

  .openapiAccessKeyDataKeysDrawer .cuiDrawerBody {
    padding: 16px;
  }

  .openapiScopeCatalogToolbar {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .openapiScopeCatalogEmpty {
    align-items: stretch;
    flex-direction: column;
  }

  .openapiScopeCatalogEmpty .cuiButton,
  .openapiAccessKeyEditor .cuiButton {
    width: 100%;
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/account-team.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Account/team CSS.
 *
 * Owner: account/team/user framework.
 * Allowed: account center, favorites, team, billing, invitations, and user
 * settings surfaces. Old account/favorites compatibility lives in
 * legacy-account-favorites.css until replaced by @compass/ui patterns.
 */

.teamRolesPage {
  min-width: 0;
}

.teamManagementShell {
  min-width: 0;
}

.teamManagementNav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.teamHubMainGridSingle {
  grid-template-columns: minmax(0, 1fr);
}

.teamHubInviteDialog .teamHubInviteTabs {
  margin-bottom: 16px;
}

.teamHubInviteDialog .teamHubInviteForm {
  display: grid;
  gap: 16px;
}

.teamHubInviteDialog .teamHubInlineFields {
  align-items: end;
}

.teamHubEmbeddedInvitationList {
  display: grid;
  gap: 8px;
}

.teamHubEmbeddedInvitationList .teamHubInvitationStatusStack {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.teamHubAuditTimeline {
  width: 100%;
  min-width: 0;
  padding: 4px 2px;
}

.teamHubAuditTimeline .cuiTimelineItem {
  padding-bottom: 20px;
}

.teamHubAuditTimeline .cuiTimelineDot {
  margin-top: 7px;
}

.teamHubAuditTimeline .cuiTimelineHead {
  align-items: flex-start;
}

.teamHubAuditTimeline .cuiTimelineTitle {
  flex: 1 1;
  min-width: 0;
}

.teamHubAuditTitle {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.teamHubAuditTitle .cuiTag {
  flex: 0 0 auto;
}

.teamHubAuditHeadline {
  min-width: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: normal;
}

.teamHubAuditDescription {
  margin-top: 6px;
}

.teamHubAuditMetaRow {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  color: var(--text-3);
  line-height: 1.5;
}

.teamHubAuditMetaRow > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.teamHubAuditMetaRow .cuiButton {
  min-height: 28px;
  padding-inline: 0;
}

.teamHubAuditDetail {
  min-width: 0;
  display: grid;
  gap: 22px;
}

.teamHubAuditDetail .cuiDescriptionsValue,
.teamHubAuditDetail .cuiDescriptionsValue code {
  overflow-wrap: anywhere;
  white-space: normal;
}

.teamHubAuditDetailSection {
  min-width: 0;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--team-line);
  padding-top: 18px;
}

.teamHubAuditDetailSection h3,
.teamHubAuditNoChanges {
  margin: 0;
  letter-spacing: 0;
}

.teamHubAuditDetailSection h3 {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 700;
}

.teamHubAuditNoChanges {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.6;
}

.teamHubAuditValueChange {
  min-width: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.teamHubAuditValueChange > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.teamHubEmbeddedJoinRequests {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.teamHubEmbeddedJoinRequests .teamHubJoinRequestItem {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-bottom: 1px solid var(--team-line);
  grid-template-areas: 'media main actions';
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.teamHubEmbeddedJoinRequests .cuiDataListItemMedia {
  grid-area: media;
}

.teamHubEmbeddedJoinRequests .cuiDataListItemMain {
  grid-area: main;
  width: auto;
  min-width: 0;
  justify-self: stretch;
  text-align: left;
}

.teamHubEmbeddedJoinRequests .cuiDataListItemActions {
  grid-area: actions;
  width: auto;
  min-width: max-content;
  justify-self: end;
}

.teamHubEmbeddedJoinRequests .teamHubJoinRequestActions {
  width: auto;
  display: inline-flex;
  flex-wrap: nowrap;
}

.teamHubEmbeddedJoinRequests .teamHubJoinRequestActions .cuiButton {
  width: auto;
  min-width: 64px;
}

.teamHubTableToolbar .teamHubFilterButton {
  justify-self: end;
  min-width: 108px;
}

.teamHubTableActions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.teamHubTableActions .cuiButton {
  min-width: 108px;
  white-space: nowrap;
}

.teamHubUserIdCell {
  color: var(--text-2);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.teamHubMemberTable .cuiDataListSortedCell.active {
  background: transparent;
}

.teamHubMemberTable .teamHubInviteUsageProgress {
  width: 100%;
  min-width: 190px;
}

.teamHubMemberTable .teamHubInviteUsageProgress .cuiProgressTrack {
  min-width: 64px;
}

.teamHubMemberTable .teamHubInviteUsageProgress .cuiProgressLabel {
  min-width: max-content;
  white-space: nowrap;
}

.teamHubFilterCount {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  padding: 0 6px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.teamHubFilterDrawer {
  min-width: 0;
}

.teamHubFilterDrawerHeader {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  border-bottom: 1px solid var(--cui-drawer-border, var(--line-dark));
  padding: 18px 20px;
}

.teamHubFilterDrawerResizeHandle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -7px;
  width: 14px;
  z-index: 1;
  cursor: col-resize;
  touch-action: none;
}

.teamHubFilterDrawerResizeHandle::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
  background: transparent;
  content: '';
  transition: background 140ms ease;
}

.teamHubFilterDrawerResizeHandle:hover::after,
.teamHubFilterDrawerResizeHandle:focus-visible::after {
  background: var(--accent);
}

.teamHubFilterDrawerResizeHandle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

.teamHubFilterDrawerHeading {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.teamHubFilterDrawerHeading h2,
.teamHubFilterDrawerHeading p {
  margin: 0;
  letter-spacing: 0;
}

.teamHubFilterDrawerHeading h2 {
  color: var(--text-1);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.teamHubFilterDrawerHeading p {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}

.teamHubFilterDrawerForm {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 18px;
}

.teamJoinDialogBody {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.teamJoinDialog .teamJoinForm {
  grid-template-columns: minmax(0, 1fr);
}

.teamJoinEmptyState {
  width: min(100%, 720px);
  min-width: 0;
  margin: 0 auto;
  padding: 32px 16px;
}

.teamJoinRestrictedState {
  width: 100%;
  min-width: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: clamp(24px, 6vh, 64px) 16px;
}

.teamJoinRestrictedPanel.cuiState {
  width: min(100%, 680px);
}

.teamRolesFeedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.teamRolesHeaderMeta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.teamRolesFeedback > :first-child {
  min-width: min(100%, 320px);
  flex: 1 1;
}

.settingsRoleRequiredHint {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  color: var(--text-2);
  line-height: 1.5;
}

.settingsRoleRequiredHint a {
  color: var(--accent);
  font-weight: 650;
}

.teamRolePrimaryCell,
.teamRoleReferenceCell,
.teamPermissionLabel {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.teamRolePrimaryCell strong,
.teamRoleReferenceCell strong,
.teamPermissionLabel strong {
  color: var(--text-1);
  overflow-wrap: anywhere;
}

.teamRolePrimaryCell span,
.teamRoleReferenceCell span,
.teamPermissionLabel small {
  color: var(--text-3);
  line-height: 1.45;
}

.teamRoleTagList {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.teamRoleActionCell {
  justify-content: center;
}

.teamRoleEditor {
  display: grid;
  gap: 18px;
}

.teamPermissionGroups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

.teamPermissionGroup {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.teamPermissionGroup > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.teamPermissionGroup h3,
.teamRoleImpactPreview h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
}

.teamRoleDetails {
  display: grid;
  min-width: 0;
  gap: 16px;
}

.teamRolePermissionList,
.teamRoleImpactPermissionChanges ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-inline-start: 20px;
  color: var(--text-2);
  line-height: 1.5;
}

.teamRolePermissionEmpty {
  margin: 0;
  color: var(--text-3);
}

.teamPermissionOptions {
  display: grid;
  gap: 12px;
}

.teamRoleImpactPreview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--surface-panel-strong);
}

.teamRoleImpactPreview h3,
.teamRoleImpactPreview p {
  grid-column: 1 / -1;
}

.teamRoleImpactPreview > div {
  display: grid;
  gap: 4px;
}

.teamRoleImpactPreview span,
.teamRoleImpactPreview p {
  margin: 0;
  color: var(--text-3);
  line-height: 1.5;
}

.teamRoleImpactPreview strong {
  color: var(--text-1);
  font-size: 20px;
}

.teamRoleImpactPermissionChanges {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.teamRoleImpactPermissionChanges section {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.teamRoleImpactPermissionChanges h4 {
  margin: 0;
  color: var(--text-1);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
}

.accountProfileNameRow .cuiButton {
  flex: 0 0 auto;
  width: auto;
}

.accountSecurityProgress {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 2px 0 4px;
}

.accountSecurityProgressTitle {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.accountSecurityProgressBar .cuiProgressLabel {
  min-width: 44px;
  color: var(--text-1);
  font-weight: 800;
}

.accountSettingsHub .accountContactField .cuiInput:not(:disabled),
.accountSettingsHub .accountContactField .cuiSelect:not(:disabled) {
  background-color: var(--cui-input-bg);
}

.accountSettingsHub .accountContactField .cuiFieldLabel {
  color: var(--cui-text);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
}

.accountSettingsHub .accountContactField .cuiFieldRequired {
  display: inline;
  color: var(--cui-danger);
  font-size: inherit;
  line-height: inherit;
}

.accountSettingsHub .accountContactField .cuiHelpLabel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.accountSettingsHub .accountContactField .cuiHelpLabelText {
  display: inline;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.accountPasswordHelpContent {
  display: grid;
  gap: 6px;
}

.accountPasswordHelpContent ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-inline-start: 18px;
}

.accountPasswordHelpContent p {
  margin: 0;
}

.accountPasswordProgress {
  width: 100%;
}

.accountContactCodeRow > .cuiButton {
  min-width: 118px;
  min-height: 42px;
}

.accountNicknameField .accountNicknameInput {
  min-height: 48px;
  border-color: #d8e4f0;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  color: var(--text-1);
  padding: 0 14px;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: 0;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.accountNicknameField .accountNicknameInput::placeholder {
  color: #94a3b8;
  font-weight: 700;
}

.accountNicknameField .accountNicknameInput:hover {
  border-color: rgba(6, 182, 212, 0.34);
  background: #ffffff;
}

.accountNicknameField .accountNicknameInput:focus {
  border-color: rgba(20, 184, 166, 0.72);
  background: #ffffff;
  box-shadow:
    0 0 0 3px rgba(20, 184, 166, 0.16),
    0 10px 24px rgba(15, 23, 42, 0.08);
}

.accountNicknameField.cuiFieldInvalid .accountNicknameInput {
  border-color: rgba(239, 68, 68, 0.58);
  box-shadow:
    0 0 0 3px rgba(239, 68, 68, 0.12),
    0 8px 22px rgba(15, 23, 42, 0.06);
}

.accountNicknameField .accountNicknameInput:disabled {
  background: #f4f7fb;
  color: var(--text-3);
}

@media (max-width: 720px) {
  .teamJoinRestrictedState {
    padding: 24px 0;
  }

  .teamJoinRestrictedPanel.cuiState {
    padding: 24px 18px;
  }

  .teamManagementNav {
    grid-template-columns: minmax(0, 1fr);
  }

  .teamRolesFeedback {
    align-items: stretch;
  }

  .teamRolesFeedback > * {
    max-width: 100%;
  }

  .teamPermissionGroups,
  .teamRoleImpactPreview,
  .teamRoleImpactPermissionChanges,
  .teamHubInviteDialog .teamHubInlineFields {
    grid-template-columns: minmax(0, 1fr);
  }

  .teamHubTableToolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .teamHubTableActions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .teamHubTableActions .cuiButton,
  .teamHubTableToolbar .teamHubFilterButton {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  .teamHubEmbeddedJoinRequests .teamHubJoinRequestItem {
    grid-template-areas:
      'media main'
      'actions actions';
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
  }

  .teamHubEmbeddedJoinRequests .cuiDataListItemActions {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  .teamHubEmbeddedJoinRequests .teamHubJoinRequestActions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teamHubEmbeddedJoinRequests .teamHubJoinRequestActions .cuiButton {
    width: 100%;
    min-width: 0;
  }

  .teamHubAuditTimeline .cuiTimelineHead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .teamHubAuditTimeline .cuiTimelineTime {
    white-space: normal;
  }

  .teamHubAuditMetaRow {
    align-items: flex-start;
  }

  .teamRoleImpactPreview h3,
  .teamRoleImpactPreview p {
    grid-column: auto;
  }

  .accountContactCodeRow > .cuiButton {
    min-width: 0;
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/title-optimizer.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Recovered member module CSS.
 * Owner: AI toolbox / guliym.
 * Source: origin/feat/chatbi-agent-fastmoss-style-guliym.
 * Generated by selector ownership; do not mix other module prefixes here.
 */

.aiToolWorkflowPage {
  display: grid;
  gap: 20px;
  min-width: 0;
  padding: 24px;
}

.aiToolWorkflowHeader {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-light);
}

[data-theme='dark'] .aiToolWorkflowHeader {
  box-shadow: none;
}

.aiToolWorkflowHeader > div:first-child {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.aiToolWorkflowHeader h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 28px;
  line-height: 1.2;
}

.aiToolWorkflowHeader p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
}

.aiToolResultHeader span,
.aiToolResultHeader em,
.aiToolField span,
.aiToolTableHead span {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.aiToolCard {
  display: grid;
  gap: 10px;
  min-height: 190px;
  padding: 20px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: inherit;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.aiToolCard:hover {
  border-color: var(--primary-border);
  background: var(--surface-panel-hover);
  transform: translateY(-2px);
}

.aiToolCardIcon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-light);
}

.aiToolCard span {
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 700;
}

.aiToolCard strong {
  color: var(--text-1);
  font-size: 18px;
}

.aiToolCard p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.65;
}

.aiToolPrimaryButton,
.aiToolSearchPanel button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.aiToolWorkspace {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
}

.aiToolConfigPanel,
.aiToolResultPanel,
.aiToolSearchPanel,
.aiToolVideoSummary,
.aiToolTimeline,
.aiToolScriptCard {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.aiToolConfigPanel {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 18px;
}

.aiToolInputCard {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-light);
}

[data-theme='dark'] .aiToolInputCard {
  box-shadow: none;
}

.aiToolInlineFields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.aiToolWideField textarea {
  min-height: 96px;
}

.aiToolField {
  display: grid;
  gap: 8px;
}

.aiToolField input,
.aiToolField select,
.aiToolField textarea,
.aiToolSearchPanel input,
.aiToolSearchPanel select {
  width: 100%;
  border: 1px solid var(--line-dark-strong);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-1);
  font: inherit;
  outline: none;
}

.aiToolField input,
.aiToolField select,
.aiToolSearchPanel input,
.aiToolSearchPanel select {
  height: 40px;
  padding: 0 12px;
}

.aiToolField textarea {
  min-height: 116px;
  padding: 12px;
  resize: vertical;
}

.aiToolField input:focus,
.aiToolField select:focus,
.aiToolField textarea:focus,
.aiToolSearchPanel input:focus,
.aiToolSearchPanel select:focus {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.aiToolResultPanel {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 18px;
}

.aiToolResultHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.aiToolResultHeader div {
  display: grid;
  gap: 4px;
}

.aiToolResultHeader strong {
  color: var(--text-1);
  font-size: 18px;
}

.aiToolTagRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aiToolTagRow span {
  padding: 5px 10px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-light);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.aiToolTable {
  overflow: hidden;
}

.aiToolTableHead,
.aiToolTableRow {
  display: grid;
  grid-template-columns: 1.25fr 0.8fr 0.8fr 0.9fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-dark);
}

.aiToolTableHead {
  background: var(--surface-dark);
}

.aiToolTableRow {
  grid-template-rows: auto auto;
}

.aiToolTableRow strong {
  color: var(--text-1);
  font-size: 14px;
}

.aiToolTableRow span {
  color: var(--text-2);
  font-size: 13px;
}

.aiToolTableRow p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.aiToolTableRow:last-child {
  border-bottom: 0;
}

.aiToolInsightGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.aiToolInsightGrid article {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-dark);
}

.aiToolInsightGrid span,
.aiToolVideoSummary span,
.aiToolScriptCard span {
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 700;
}

.aiToolInsightGrid p,
.aiToolVideoSummary p,
.aiToolScriptCard p,
.aiToolTimeline p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.65;
}

.aiToolAiResult {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary-border) 52%, var(--line-dark));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-soft) 34%, var(--surface-panel));
}

.aiToolAiResult > div {
  display: grid;
  gap: 4px;
}

.aiToolAiResult span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 850;
}

.aiToolAiResult strong {
  color: var(--text-1);
  font-size: 15px;
}

.aiToolAiResult p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}

.aiToolAiResult p.error {
  color: var(--danger);
  font-weight: 800;
}

.aiToolAiResult pre {
  overflow: auto;
  max-height: 520px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-1);
  font: 13px/1.75 var(--font-sans, system-ui, sans-serif);
}

.aiToolEmptyState {
  display: grid;
  min-height: 280px;
  place-items: center;
  color: var(--text-3);
}

.aiToolSearchPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 112px;
  gap: 10px;
  padding: 14px;
}

.aiToolSearchPanelLarge {
  padding: 18px;
  box-shadow: var(--shadow-light);
}

[data-theme='dark'] .aiToolSearchPanelLarge {
  box-shadow: none;
}

.aiToolSampleSection {
  margin-top: 0;
}

.aiToolSampleSection .consumerExampleCard {
  min-height: 190px;
}

.aiToolSampleSection .consumerExampleCard p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.65;
}

.aiToolVideoGrid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
}

.aiToolVideoSummary {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 18px;
}

.aiToolVideoSummary strong {
  color: var(--text-1);
  font-size: 22px;
}

.aiToolVideoSummary div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
}

.aiToolVideoSummary b {
  flex-basis: 100%;
  color: var(--text-1);
  font-size: 13px;
}

.aiToolVideoSummary em {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface-dark);
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
}

.aiToolTimeline {
  display: grid;
  gap: 0;
  overflow: hidden;
}

.aiToolTimeline article {
  display: grid;
  grid-template-columns: 76px minmax(0, 140px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--line-dark);
}

.aiToolTimeline article:last-child {
  border-bottom: 0;
}

.aiToolTimeline span {
  color: var(--primary-light);
  font-size: 13px;
  font-weight: 800;
}

.aiToolTimeline strong {
  color: var(--text-1);
  font-size: 14px;
}

.aiToolScriptCard {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 18px;
}

.aiToolScriptCard h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 20px;
}

@media (max-width: 1100px) {
  .aiToolInsightGrid,
.aiToolVideoGrid,
.aiToolWorkspace,
.aiToolInlineFields {
    grid-template-columns: 1fr;
  }

  .aiToolWorkflowHeader {
    flex-direction: column;
  }

  .aiToolSearchPanel {
    grid-template-columns: 1fr;
  }
}

.titleOptimizerPage {
  min-height: calc(100vh - 88px);
  padding: 24px;
}

.titleOptimizerFacade {
  display: grid;
  min-height: calc(100vh - 136px);
  align-content: start;
  gap: 22px;
  padding: 32px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 10%, var(--primary-glow), transparent 26%),
    radial-gradient(circle at 80% 12%, rgba(6, 182, 212, 0.12), transparent 24%),
    var(--surface-panel);
}

.titleOptimizerFacadeInner {
  display: grid;
  gap: 18px;
  width: min(860px, 100%);
  margin: 0 auto;
  padding: 32px;
}

.titleOptimizerSamples {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.titleOptimizerEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--primary-light);
  font-size: 14px;
  font-weight: 800;
}

.titleOptimizerFacadeInner h1,
.titleOptimizerConfig h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 34px;
  line-height: 1.2;
}

.titleOptimizerFacadeInner p {
  max-width: 820px;
  margin: 0;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.75;
}

.titleOptimizerSearch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  width: min(760px, 100%);
  min-height: 52px;
  border: 1px solid var(--line-dark-strong);
  border-radius: 8px;
  background: var(--surface-panel-strong);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
}

.titleOptimizerSearch input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-1);
  padding: 0 16px;
  font-size: 15px;
  outline: none;
}

.titleOptimizerSearch button {
  display: grid;
  place-items: center;
  width: 54px;
  border: 0;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}

.titleOptimizerTryButton,
.titleOptimizerPrimary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.titleOptimizerDataNote,
.titleOptimizerHint {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
}

.titleOptimizerTopbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.titleOptimizerTopbar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-1);
  cursor: pointer;
}

.titleOptimizerTopbar span {
  color: var(--text-3);
  font-size: 12px;
}

.titleOptimizerWorkspace {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 16px;
}

.titleOptimizerConfig,
.titleOptimizerResults {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.titleOptimizerConfig {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 18px;
}

.titleOptimizerConfig header {
  display: grid;
  gap: 8px;
}

.titleOptimizerConfig h1 {
  font-size: 24px;
}

.titleOptimizerField {
  display: grid;
  gap: 8px;
}

.titleOptimizerField span,
.titleOptimizerTagBlock strong {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}

.titleOptimizerField input,
.titleOptimizerField select,
.titleOptimizerField textarea {
  width: 100%;
  border: 1px solid var(--line-dark-strong);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text-1);
  font: inherit;
  outline: none;
}

.titleOptimizerField select,
.titleOptimizerField input {
  height: 40px;
  padding: 0 12px;
}

.titleOptimizerField textarea {
  min-height: 112px;
  padding: 12px;
  resize: vertical;
}

.titleOptimizerField input:focus,
.titleOptimizerField select:focus,
.titleOptimizerField textarea:focus {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.titleOptimizerField em {
  justify-self: end;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.titleOptimizerProductSnapshot {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-dark);
}

.titleOptimizerProductSnapshot strong {
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.5;
}

.titleOptimizerProductSnapshot dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.titleOptimizerProductSnapshot dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.titleOptimizerProductSnapshot dt,
.titleOptimizerProductSnapshot dd {
  margin: 0;
  font-size: 12px;
}

.titleOptimizerProductSnapshot dt {
  color: var(--text-3);
}

.titleOptimizerProductSnapshot dd {
  color: var(--text-1);
  text-align: right;
}

.titleOptimizerTagBlock {
  display: grid;
  gap: 10px;
}

.titleOptimizerTagBlock div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.titleOptimizerTagBlock button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: var(--surface-dark);
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
}

.titleOptimizerTagBlock button.accent,
.titleOptimizerTagBlock button:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-light);
}

.titleOptimizerPrimary {
  width: 100%;
}

.titleOptimizerResults {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 520px;
  padding: 18px;
}

.titleOptimizerState {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 360px;
  color: var(--text-2);
  text-align: center;
}

.titleOptimizerState strong {
  color: var(--text-1);
}

.titleOptimizerState p {
  max-width: 420px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.titleOptimizerState.error {
  color: var(--danger);
}

.titleOptimizerSourceBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-dark);
}

.titleOptimizerSourceBar span {
  color: var(--text-3);
  font-size: 12px;
}

.titleOptimizerSourceBar strong {
  color: var(--text-1);
  font-size: 14px;
}

.titleOptimizerResultCard {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-strong);
}

.titleOptimizerBadgeRow,
.titleOptimizerResultMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.titleOptimizerBadgeRow span,
.titleOptimizerBadgeRow em {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.titleOptimizerBadgeRow span {
  background: var(--primary-soft);
  color: var(--primary-light);
}

.titleOptimizerBadgeRow em {
  background: var(--surface-dark);
  color: var(--text-2);
}

.titleOptimizerResultCard p {
  margin: 0;
  color: var(--text-1);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.55;
}

.titleOptimizerResultMeta strong {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}

.titleOptimizerResultMeta div {
  display: flex;
  gap: 8px;
}

.titleOptimizerResultMeta button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-dark);
  color: var(--text-2);
  cursor: pointer;
}

.titleOptimizerResultMeta button:hover {
  border-color: var(--primary-border);
  color: var(--primary-light);
}

.titleOptimizerToast {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .titleOptimizerWorkspace {
    grid-template-columns: 1fr;
  }

  .titleOptimizerFacadeInner {
    padding: 22px;
  }
}

/* Rules integrated from the ChatBI/Agent member branch. */
.titleOptimizerPage {
  min-height: calc(100vh - 88px);
  padding: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(167, 139, 250, 0.2), transparent 34%),
    linear-gradient(180deg, #fbfaff 0%, #ffffff 46%, #ffffff 100%);
}

.titleOptimizerFacade {
  display: grid;
  min-height: calc(100vh - 136px);
  align-content: start;
  justify-items: center;
  gap: 24px;
  padding: 54px 32px 34px;
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.98)),
    #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 24px 80px rgba(88, 28, 135, 0.08);
}

.titleOptimizerFacadeInner {
  display: grid;
  justify-items: center;
  gap: 0;
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.titleOptimizerSamples {
  width: min(1040px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  padding: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 46px rgba(17, 24, 39, 0.06);
}

.titleOptimizerEyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  margin-bottom: 18px;
  color: #8b5cf6;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.titleOptimizerFacadeInner h1,
.titleOptimizerConfig h1 {
  margin: 0;
  color: #111827;
  font-size: 44px;
  font-weight: 950;
  line-height: 1.12;
}

.titleOptimizerFacadeInner p {
  max-width: 660px;
  margin: 24px auto 0;
  color: rgba(17, 24, 39, 0.58);
  font-size: 14px;
  line-height: 1.72;
}

.titleOptimizerSearch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: center;
  width: min(680px, 100%);
  min-height: 56px;
  margin-top: 34px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  padding: 4px;
  box-shadow:
    inset 0 1px 2px rgba(17, 24, 39, 0.03),
    0 18px 42px rgba(88, 28, 135, 0.08);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.titleOptimizerSearch:hover {
  border-color: rgba(139, 92, 246, 0.42);
}

.titleOptimizerSearch:focus-within {
  border-color: rgba(139, 92, 246, 0.58);
  box-shadow:
    inset 0 1px 2px rgba(17, 24, 39, 0.03),
    0 0 0 4px rgba(139, 92, 246, 0.1),
    0 18px 42px rgba(88, 28, 135, 0.1);
}

.titleOptimizerSearch input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #111827;
  padding: 0 16px;
  font-size: 15px;
  outline: none;
}

.titleOptimizerSearch input::placeholder {
  color: rgba(17, 24, 39, 0.38);
}

.titleOptimizerSearch button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 10px;
  background: #7c3aed;
  color: #fff;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 22px rgba(124, 58, 237, 0.26);
  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.titleOptimizerSearch button:hover {
  background: #6d28d9;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 13px 26px rgba(124, 58, 237, 0.3);
}

.titleOptimizerTryButton,
.titleOptimizerPrimary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: #7c3aed;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.titleOptimizerTryButton {
  width: min(680px, 100%);
  margin-top: 12px;
  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.18);
  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.titleOptimizerTryButton:hover {
  background: #6d28d9;
  transform: translateY(-1px);
  box-shadow: 0 15px 30px rgba(124, 58, 237, 0.22);
}

.titleOptimizerDataNote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 8px;
  color: #9ca3af;
  font-size: 12px;
  line-height: 1.5;
}

.titleOptimizerHint {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
}

.titleOptimizerSamplesHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.titleOptimizerSamplesHead div {
  display: grid;
  gap: 4px;
  text-align: left;
}

.titleOptimizerSamplesHead span {
  color: #8b5cf6;
  font-size: 12px;
  font-weight: 900;
}

.titleOptimizerSamplesHead h2 {
  margin: 0;
  color: #111827;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.3;
}

.titleOptimizerSampleGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.titleOptimizerSampleCard {
  min-width: 0;
  min-height: 218px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  padding: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 28px rgba(17, 24, 39, 0.045);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.titleOptimizerSampleCard:hover {
  border-color: rgba(139, 92, 246, 0.28);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 14px 34px rgba(17, 24, 39, 0.07);
}

.titleOptimizerSampleCard em {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.titleOptimizerSampleCard h3 {
  margin: 0 0 10px;
  color: #111827;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.32;
}

.titleOptimizerSampleCard p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #9ca3af;
  font-size: 13px;
  line-height: 1.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.titleOptimizerSampleCard button {
  width: 116px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 12px;
  background: #7c3aed;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.titleOptimizerSampleCard button:hover {
  background: #6d28d9;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.2);
}

body:has(.titleOptimizerPage) .globalRuntimeDbStatus {
  right: 10px;
  bottom: 10px;
  width: auto;
  max-width: 168px;
  opacity: 0.46;
  transform: scale(0.78);
  transform-origin: right bottom;
}

body:has(.titleOptimizerPage) .globalRuntimeDbStatus:hover {
  opacity: 0.78;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/agent-floating.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Floating Agent ownership module. Loaded after legacy compatibility styles. */

.agentFloatingOrb {
  width: 98px;
  height: 82px;
}

.agentFloatingOrb > .chatbiMascot {
  scale: 0.84;
}

.agentFloatingTeaser {
  width: min(300px, calc(100vw - 140px));
}

.agentFloatingTeaser.is-right {
  right: auto;
  left: clamp(16px, calc(var(--agent-orb-left, calc(100vw - 122px)) - 312px), calc(100vw - 324px));
}

.agentFloatingTeaser.is-left {
  right: auto;
  left: clamp(122px, calc(var(--agent-orb-left, 24px) + 110px), calc(100vw - 316px));
}

.agentFloatingTeaser.is-left::after {
  right: auto;
  left: -6px;
  border: 0;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  border-left: 1px solid rgba(17, 24, 39, 0.08);
}

.agentFloatingEdgeTab {
  width: 34px;
  min-width: 34px;
  height: 58px;
  position: fixed;
  z-index: 1100;
  top: 50%;
  display: grid;
  place-content: center;
  gap: 1px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, #d8dee9);
  background: color-mix(in srgb, var(--primary) 12%, #ffffff);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  transform: translateY(-50%);
  transition: width 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.agentFloatingEdgeTab.is-left {
  left: 0;
  border-left: 0;
  border-radius: 0 12px 12px 0;
}

.agentFloatingEdgeTab.is-right {
  right: 0;
  border-right: 0;
  border-radius: 12px 0 0 12px;
}

.agentFloatingEdgeTab:hover,
.agentFloatingEdgeTab:focus-visible {
  width: 40px;
  background: color-mix(in srgb, var(--primary) 18%, #ffffff);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--primary) 20%, transparent);
  outline: none;
}

.agentFloatingEdgeTab span {
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 860px) {
  .agentFloatingOrb {
    width: 88px;
    height: 70px;
  }

  .agentFloatingOrb > .chatbiMascot {
    scale: 0.76;
  }

  .agentFloatingTeaser {
    width: min(260px, calc(100vw - 116px));
  }

  .agentFloatingTeaser.is-left {
    left: 104px;
  }

  .agentFloatingEdgeTab {
    width: 32px;
    min-width: 32px;
    height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agentFloatingEdgeTab {
    transition: none;
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/personalization.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.personalizationBackdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  background: rgb(15 23 42 / 46%);
  padding: 24px;
}

.personalizationDialog {
  width: min(840px, 100%);
  max-height: min(760px, calc(100dvh - 48px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: 0 24px 64px rgb(15 23 42 / 24%);
}

.personalizationDialog > header,
.personalizationDialog > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
}

.personalizationDialog > header {
  border-bottom: 1px solid var(--line-dark);
}

.personalizationDialog > footer {
  border-top: 1px solid var(--line-dark);
}

.personalizationHeaderMain {
  min-width: 0;
  width: 100%;
}

.personalizationHeaderTop {
  display: flex;
  align-items: center;
  gap: 12px;
}

.personalizationHeaderTop > span {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 12px;
  font-weight: 750;
}

.personalizationHeaderTop > em {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.personalizationProgress {
  display: grid;
  grid-template-columns: repeat(3, minmax(24px, 1fr));
  gap: 4px;
  width: min(160px, 28vw);
  margin-left: auto;
}

.personalizationProgress span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--line-dark);
  transition: background-color 160ms ease;
}

.personalizationProgress span.isActive {
  background: var(--primary);
}

.personalizationDialog header h2 {
  margin: 8px 0 0;
  color: var(--text-1);
  font-size: 20px;
  letter-spacing: 0;
  line-height: 1.3;
}

.personalizationHeaderHint {
  margin: 6px 0 0;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.5;
}

.personalizationStepBody {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: personalizationStepIn 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.personalizationSelectionSummary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  padding: 16px 22px 4px;
}

.personalizationSelectionSummary strong {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.personalizationSelectionSummary span {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personalizationRoleGrid,
.personalizationGoalList,
.personalizationScopeGrid {
  min-height: 0;
  overflow: auto;
  padding: 14px 22px 22px;
}

.personalizationRoleGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.personalizationRoleGrid > button {
  position: relative;
  min-height: 104px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 20px;
  align-items: start;
  gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 14px;
  text-align: left;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.personalizationRoleGrid > button:hover {
  border-color: var(--primary-border);
  background: color-mix(in srgb, var(--primary) 3%, var(--surface-panel));
}

.personalizationRoleGrid > button.isSelected {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line-dark));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 7%, transparent);
}

.personalizationRoleGrid > button:focus-visible,
.personalizationGoalList button:focus-visible,
.personalizationScopeGrid button:focus-visible,
.personalizationDialog footer button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 62%, transparent);
  outline-offset: 2px;
}

.personalizationRoleIcon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 5px;
  color: var(--text-2);
  background: var(--surface-panel-strong, var(--surface-panel));
  transition:
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}

.personalizationRoleGrid > button.isSelected .personalizationRoleIcon {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line-dark));
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-panel));
}

.personalizationRoleCopy {
  min-width: 0;
  display: block;
}

.personalizationRoleCopy strong,
.personalizationRoleCopy small {
  display: block;
}

.personalizationRoleCopy strong {
  color: var(--text-1);
  font-size: 13px;
  line-height: 1.35;
}

.personalizationRoleCopy small {
  margin-top: 5px;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.45;
}

.personalizationRoleBadge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-top: 8px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.personalizationSelectionMark,
.personalizationGoalMark {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  color: transparent;
  background: var(--surface-panel);
  transition:
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}

.personalizationRoleGrid > button.isSelected .personalizationSelectionMark,
.personalizationGoalList button.isSelected .personalizationGoalMark {
  border-color: var(--primary);
  color: #fff;
  background: var(--primary);
  animation: personalizationMarkIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.personalizationSelectionMark .compassIcon,
.personalizationGoalMark .compassIcon {
  display: block;
}

.personalizationGoalList {
  display: grid;
  align-content: start;
  gap: 8px;
}

.personalizationGoalList button {
  display: grid;
  grid-template-columns: 24px minmax(160px, 0.7fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  min-height: 52px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-3);
  padding: 0 14px;
  text-align: left;
  transition:
    background-color 140ms ease,
    border-color 140ms ease;
}

.personalizationGoalList button:hover {
  border-color: var(--primary-border);
  background: color-mix(in srgb, var(--primary) 3%, var(--surface-panel));
}

.personalizationGoalList button.isSelected {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line-dark));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-panel));
}

.personalizationGoalList button.isSelected strong,
.personalizationGoalList button.isSelected small {
  animation: personalizationCopyIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.personalizationGoalList strong {
  color: var(--text-1);
  font-size: 13px;
}

.personalizationGoalList small {
  color: var(--text-3);
  font-size: 12px;
}

.personalizationScopeGrid {
  display: grid;
  gap: 20px;
  align-content: start;
}

.personalizationScopeGrid section {
  min-width: 0;
}

.personalizationScopeGrid h3 {
  margin: 0 0 10px;
  color: var(--text-1);
  font-size: 13px;
}

.personalizationScopeGrid section > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.personalizationScopeGrid button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 0 12px;
  text-align: left;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.personalizationScopeGrid button:hover {
  border-color: var(--primary-border);
  background: color-mix(in srgb, var(--primary) 3%, var(--surface-panel));
}

.personalizationScopeGrid button.isSelected {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line-dark));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-panel));
  color: var(--primary);
}

.personalizationScopeImpact {
  margin: 0;
  border-top: 1px solid var(--line-dark);
  padding-top: 14px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.55;
}

.personalizationError {
  margin: 0;
  color: var(--danger);
  padding: 0 22px 12px;
  font-size: 12px;
}

.personalizationDialog footer button {
  min-height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 0 12px;
}

.personalizationDialog footer > div {
  display: flex;
  gap: 8px;
}

.personalizationDialog footer button.isPrimary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.personalizationDialog footer button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.personalizationSnooze {
  position: relative;
}

.personalizationSnoozeTrigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0 !important;
  background: transparent !important;
  color: var(--text-3) !important;
  padding: 0 6px !important;
}

.personalizationSnoozeTrigger:hover {
  color: var(--text-1) !important;
}

.personalizationSnoozeMenu {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: calc(100% + 8px);
  min-width: 144px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  padding: 5px;
  box-shadow: 0 10px 24px rgb(15 23 42 / 14%);
  transform-origin: left bottom;
  animation: personalizationMenuIn 150ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.personalizationSnoozeMenu button {
  width: 100%;
  min-height: 30px !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: var(--text-2) !important;
  padding: 0 9px !important;
  text-align: left;
}

.personalizationSnoozeMenu button:hover {
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-panel)) !important;
  color: var(--text-1) !important;
}

@keyframes personalizationStepIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes personalizationMarkIn {
  0% {
    opacity: 0.4;
    transform: scale(0.84);
  }

  68% {
    transform: scale(1.08);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes personalizationCopyIn {
  from {
    opacity: 0.65;
    transform: translateX(-3px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes personalizationMenuIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .personalizationStepBody,
  .personalizationSelectionMark,
  .personalizationGoalMark,
  .personalizationGoalList button.isSelected strong,
  .personalizationGoalList button.isSelected small,
  .personalizationSnoozeMenu {
    animation: none;
    transition: none;
  }
}

@media (max-width: 760px) {
  .personalizationBackdrop {
    padding: 0;
    align-items: end;
  }

  .personalizationDialog {
    width: 100%;
    max-height: 92dvh;
    border-radius: 8px 8px 0 0;
  }

  .personalizationDialog > header,
  .personalizationDialog > footer {
    padding: 16px;
  }

  .personalizationHeaderTop {
    gap: 8px;
  }

  .personalizationProgress {
    width: min(140px, 32vw);
  }

  .personalizationDialog header h2 {
    font-size: 18px;
  }

  .personalizationSelectionSummary {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px 4px;
  }

  .personalizationSelectionSummary span {
    white-space: normal;
  }

  .personalizationRoleGrid,
  .personalizationGoalList,
  .personalizationScopeGrid {
    padding: 12px 16px 18px;
  }

  .personalizationRoleGrid {
    grid-template-columns: 1fr;
  }

  .personalizationRoleGrid > button {
    min-height: 86px;
  }

  .personalizationGoalList button {
    grid-template-columns: 24px minmax(0, 1fr);
    row-gap: 2px;
    padding: 9px 12px;
  }

  .personalizationGoalList small {
    grid-column: 2;
  }

  .personalizationDialog > footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .personalizationDialog footer > div {
    flex-wrap: wrap;
  }

  .personalizationDialog footer > div:last-child {
    justify-content: flex-end;
  }

  .personalizationSnoozeMenu {
    left: auto;
    right: 0;
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/chatbi.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Rules integrated from the ChatBI/Agent member branch. */
.appContent:has(.chatbiWorkspace) {
  overflow: hidden;
  padding: 0;
}

.appContent > .chatbiWorkspace {
  min-width: 0;
}

.chatbiWorkspace {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  overflow: hidden;
  background: var(--bg-app);
  color: var(--text-1);
}

.chatbiConversations {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  border-right: 1px solid var(--line-dark);
  background: var(--surface-panel);
  padding: 16px 12px;
}

.chatbiNewChat,
.chatbiHistoryList button,
.chatbiSuggestionGrid button,
.chatbiResultTabs button,
.chatbiIconButton,
.chatbiSendButton,
.chatbiToolMenu button {
  font: inherit;
}

.chatbiNewChat {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel-hover);
  color: var(--text-1);
  font-size: 13px;
  font-weight: 800;
}

.chatbiHistoryList {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  overflow-y: auto;
}

.chatbiHistoryList button {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  padding: 9px 10px;
  text-align: left;
}

.chatbiHistoryList button:hover,
.chatbiHistoryList button.active {
  background: var(--surface-panel-hover);
  color: var(--text-1);
}

.chatbiHistoryList span {
  overflow: hidden;
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbiHistoryList small {
  color: var(--text-3);
  font-size: 11px;
}

.chatbiConversationMain {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) auto;
  overflow: hidden;
}

.chatbiConversationHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line-dark);
  background: var(--surface-panel);
  padding: 0 20px;
  font-size: 14px;
}

.chatbiMessages {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 28px max(24px, calc((100% - 820px) / 2)) 16px;
}

.chatbiMessages.empty {
  display: grid;
  align-items: center;
}

.chatbiEmpty {
  width: min(680px, 100%);
  display: grid;
  gap: 24px;
  margin: 0 auto 5vh;
}

.chatbiEmpty h1 {
  margin: 0;
  text-align: center;
  font-size: 28px;
  letter-spacing: 0;
}

.chatbiSuggestionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.chatbiSuggestionGrid button {
  min-height: 52px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel);
  color: var(--text-2);
  padding: 10px 12px;
  text-align: left;
  line-height: 1.45;
}

.chatbiSuggestionGrid button:hover {
  border-color: var(--primary-border);
  color: var(--text-1);
}

.chatbiUserMessage {
  width: fit-content;
  max-width: min(680px, 86%);
  margin: 0 0 24px auto;
  border-radius: 8px 8px 2px 8px;
  background: var(--primary-active-bg);
  padding: 10px 14px;
  line-height: 1.65;
}

.chatbiAssistantMessage,
.chatbiError {
  max-width: 820px;
  margin: 0 0 30px;
}

.chatbiAssistantMessage > p,
.chatbiAnswer > p {
  margin: 0 0 16px;
  line-height: 1.75;
}

.chatbiResultTabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line-dark);
}

.chatbiResultTabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-3);
  padding: 8px 10px;
}

.chatbiResultTabs button.active {
  border-bottom-color: var(--primary);
  color: var(--text-1);
}

.chatbiTableWrap {
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
}

.chatbiTableWrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.chatbiTableWrap th,
.chatbiTableWrap td {
  border-bottom: 1px solid var(--line-dark);
  padding: 9px 12px;
  text-align: left;
  white-space: nowrap;
}

.chatbiDisclosure {
  margin-top: 10px;
  border-top: 1px solid var(--line-dark);
  padding-top: 10px;
}

.chatbiDisclosure summary {
  color: var(--text-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.chatbiDisclosure p {
  margin: 10px 0 0;
  line-height: 1.65;
}

.chatbiTechnical {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  color: var(--text-3);
  font-size: 12px;
}

.chatbiTechnical pre {
  max-height: 160px;
  overflow: auto;
  margin: 0;
  border-radius: 6px;
  background: var(--surface-panel-hover);
  padding: 10px;
  white-space: pre-wrap;
}

.chatbiNotice,
.chatbiToolChips span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 5px;
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
  padding: 5px 8px;
  font-size: 12px;
}

.chatbiThinking {
  display: flex;
  gap: 5px;
}

.chatbiThinking span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  animation: chatbiDot 1s ease-in-out infinite alternate;
}

.chatbiThinking span:nth-child(2) { animation-delay: 150ms; }

.chatbiThinking span:nth-child(3) { animation-delay: 300ms; }

@keyframes chatbiDot { to { opacity: 0.25; transform: translateY(-3px); } }

.chatbiError {
  color: var(--danger);
  font-size: 13px;
}

.chatbiComposerDock {
  background: linear-gradient(transparent, var(--bg-app) 24%);
  padding: 12px max(24px, calc((100% - 820px) / 2)) 18px;
}

.chatbiComposer {
  position: relative;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  padding: 10px;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.1);
}

.chatbiComposer .cuiTextarea {
  width: 100%;
  min-height: 44px;
  max-height: 140px;
  resize: none;
  border: 0;
  background: transparent;
  padding: 4px 6px;
  color: var(--text-1);
  box-shadow: none;
  outline: 0;
}

.chatbiToolChips,
.chatbiComposerTools {
  display: flex;
  align-items: center;
}

.chatbiToolChips {
  gap: 6px;
  margin-bottom: 4px;
}

.chatbiToolChips span {
  background: var(--primary-soft);
  color: var(--primary-light);
}

.chatbiComposerTools {
  justify-content: space-between;
  gap: 8px;
}

.chatbiComposerTools select {
  min-width: 0;
  max-width: 190px;
  margin-right: auto;
  border: 0;
  background: transparent;
  color: var(--text-2);
  padding: 5px 4px;
  font-size: 12px;
}

.chatbiPlusMenu {
  position: relative;
}

.chatbiIconButton,
.chatbiSendButton {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
}

.chatbiSendButton {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--accent-on-primary, #fff);
}

.chatbiSendButton:disabled {
  opacity: 0.42;
}

.chatbiToolMenu {
  width: 220px;
  position: absolute;
  z-index: 30;
  left: 0;
  bottom: 42px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-panel);
  padding: 6px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18);
}

.chatbiToolMenu button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-1);
  padding: 9px;
  text-align: left;
}

.chatbiToolMenu button:hover { background: var(--surface-panel-hover); }

.chatbiToolMenu button:disabled { opacity: 0.45; }

.chatbiToolMenu span { display: grid; gap: 2px; }

.chatbiToolMenu small { color: var(--text-3); font-size: 10px; }

.chatbiToolMenu em { color: var(--success); font-style: normal; }

@media (max-width: 760px) {
  .chatbiWorkspace { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .chatbiConversations { display: none; }
}

@media (max-width: 760px) {
  .chatbiMessages { padding: 20px 14px 10px; }
}

@media (max-width: 760px) {
  .chatbiComposerDock { padding: 10px 12px 12px; }
}

@media (max-width: 760px) {
  .chatbiSuggestionGrid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .chatbiEmpty { margin-bottom: 0; }
}

@media (max-width: 760px) {
  .chatbiUserMessage { max-width: 92%; }
}

.aiDashboardPage {
  min-width: 0;
  min-height: calc(100vh - 64px);
  background: var(--surface-canvas);
}

.aiDashboardTabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line-dark);
  background: var(--surface-panel);
}

.aiDashboardTabList {
  display: flex;
  align-self: stretch;
  min-width: 0;
  overflow-x: auto;
}

.aiDashboardTabList button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 142px;
  padding: 0 20px;
  border: 0;
  border-right: 1px solid var(--line-dark);
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.aiDashboardTabList button.active {
  background: var(--surface-panel-strong);
  color: var(--text-1);
  box-shadow: inset 0 -2px 0 var(--primary);
}

.aiDashboardTabList button.add {
  min-width: 124px;
  color: var(--primary-light);
}

.aiDashboardLiveStatus {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 12px;
}

.aiDashboardLiveStatus i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
}

.aiDashboardCreate {
  display: grid;
  justify-items: center;
  gap: 20px;
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 54px 24px 64px;
}

.aiDashboardCreateHeading {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.aiDashboardCreateHeading > span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-light);
}

.aiDashboardCreateHeading h1,
.aiDashboardViewHeader h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 25px;
  line-height: 1.3;
}

.aiDashboardCreateHeading p,
.aiDashboardViewHeader p,
.aiDashboardComparison header p {
  margin: 5px 0 0;
  color: var(--text-3);
  font-size: 13px;
}

.aiDashboardObjectPicker {
  width: 100%;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  overflow: hidden;
}

.aiDashboardSubjectTypes {
  display: grid;
  grid-template-columns: repeat(7, minmax(92px, 1fr));
  border-bottom: 1px solid var(--line-dark);
}

.aiDashboardSubjectTypes button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 50px;
  padding: 8px;
  border: 0;
  border-right: 1px solid var(--line-dark);
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
}

.aiDashboardSubjectTypes button:last-child {
  border-right: 0;
}

.aiDashboardSubjectTypes button.active {
  background: var(--primary-soft);
  color: var(--primary-light);
  font-weight: 700;
}

.aiDashboardSubjectTypes button:disabled {
  color: var(--text-3);
  cursor: not-allowed;
  opacity: 0.72;
}

.aiDashboardSubjectTypes small {
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--surface-panel-strong);
  font-size: 9px;
}

.aiDashboardSearch {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 18px 20px 0;
  padding-left: 13px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  color: var(--text-3);
  background: var(--surface-input);
}

.aiDashboardSearch:focus-within {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.aiDashboardSearch input {
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
}

.aiDashboardSearch button,
.aiDashboardStartButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border: 0;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.aiDashboardSearch button {
  height: 44px;
  padding: 0 18px;
  border-radius: 0 5px 5px 0;
}

.aiDashboardSourceTabs {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 20px;
  min-height: 51px;
  border-bottom: 1px solid var(--line-dark);
}

.aiDashboardSourceTabs button {
  align-self: stretch;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
}

.aiDashboardSourceTabs button.active {
  border-bottom-color: var(--primary);
  color: var(--primary-light);
  font-weight: 700;
}

.aiDashboardSourceTabs span {
  margin-left: auto;
  color: var(--text-3);
  font-size: 12px;
}

.aiDashboardCreatorList {
  min-height: 316px;
  max-height: 420px;
  padding: 8px 20px 16px;
  overflow-y: auto;
}

.aiDashboardCreatorRow {
  display: grid;
  grid-template-columns: 24px 42px minmax(150px, 1.5fr) repeat(3, minmax(100px, 1fr));
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
}

.aiDashboardCreatorRow:hover,
.aiDashboardCreatorRow.selected {
  background: var(--surface-panel-hover);
}

.aiDashboardCheckbox {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--primary-light);
}

.aiDashboardCreatorRow.selected .aiDashboardCheckbox {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.aiDashboardAvatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-panel-strong);
  color: var(--text-2);
  overflow: hidden;
}

.aiDashboardAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aiDashboardCreatorRow > span:not(.aiDashboardCheckbox, .aiDashboardAvatar) {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.aiDashboardCreatorRow strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiDashboardCreatorRow small,
.aiDashboardCreatorRow em {
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiDashboardListState {
  display: grid;
  place-items: center;
  min-height: 280px;
  color: var(--text-3);
  font-size: 13px;
}

.aiDashboardListState.error,
.aiDashboardNotice {
  color: var(--danger);
}

.aiDashboardNotice {
  min-height: 18px;
  margin: -8px 0;
  font-size: 12px;
}

.aiDashboardNotice.viewNotice {
  margin: -6px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--danger-line);
  border-radius: 6px;
  background: var(--danger-bg);
}

.aiDashboardStartButton {
  min-width: 150px;
  padding: 0 20px;
}

.aiDashboardStartButton:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.aiDashboardView {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.aiDashboardMatrixView {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px 40px;
}

.aiDashboardMatrixToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
}

.aiDashboardMatrixToolbar > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.aiDashboardMatrixToolbar > div:last-child {
  justify-content: flex-end;
}

.aiDashboardMatrixToolbar button,
.aiDashboardInlinePicker button,
.aiDashboardMatrixAddQuestion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.aiDashboardMatrixToolbar button:hover,
.aiDashboardInlinePicker button:hover,
.aiDashboardMatrixAddQuestion:hover {
  border-color: var(--primary-border);
  color: var(--primary-light);
}

.aiDashboardMatrixToolbar button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.aiDashboardMatrixToolbar button.icon,
.aiDashboardInlinePicker button.icon {
  width: 36px;
  padding: 0;
}

.aiDashboardMatrixToolbar button.danger {
  color: var(--danger);
}

.aiDashboardMatrixToolbar button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.aiDashboardMatrixToolbar > div:last-child > span {
  overflow: hidden;
  max-width: 340px;
  margin-right: 6px;
  color: var(--text-3);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiDashboardInlinePicker {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-light);
}

.aiDashboardInlinePicker > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.aiDashboardInlinePicker > header > div {
  display: grid;
  gap: 4px;
}

.aiDashboardInlinePicker > header strong {
  color: var(--text-1);
  font-size: 14px;
}

.aiDashboardInlinePicker > header p,
.aiDashboardQuestionOptions > p,
.aiDashboardObjectOptions > p {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
}

.aiDashboardCustomQuestion {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--primary-border);
  border-radius: 7px;
  background: var(--primary-soft);
}

.aiDashboardCustomQuestion textarea {
  width: 100%;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  outline: 0;
  resize: vertical;
  background: var(--surface-panel);
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
}

.aiDashboardCustomQuestion textarea:focus {
  border-color: var(--primary-border);
}

.aiDashboardCustomQuestion > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.aiDashboardCustomQuestion > div > span {
  color: var(--text-3);
  font-size: 11px;
}

.aiDashboardCustomQuestion button {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.aiDashboardCustomQuestion button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.aiDashboardPickerDivider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-3);
  font-size: 11px;
}

.aiDashboardPickerDivider::before,
.aiDashboardPickerDivider::after {
  content: '';
  flex: 1 1;
  height: 1px;
  background: var(--line-dark);
}

.aiDashboardQuestionOptions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.aiDashboardQuestionOptions > button {
  justify-content: flex-start;
  height: auto;
  min-height: 58px;
  padding: 10px 12px;
  text-align: left;
}

.aiDashboardQuestionOptions > button > span,
.aiDashboardObjectOptions button > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.aiDashboardQuestionOptions strong,
.aiDashboardObjectOptions strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiDashboardQuestionOptions small,
.aiDashboardObjectOptions small {
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiDashboardInlineSearch {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding-left: 11px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  color: var(--text-3);
  background: var(--surface-input);
}

.aiDashboardInlineSearch:focus-within {
  border-color: var(--primary-border);
}

.aiDashboardInlineSearch input {
  min-width: 0;
  height: 38px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
}

.aiDashboardInlineSearch button {
  height: 40px;
  border-radius: 0 5px 5px 0;
  background: var(--primary);
  color: #fff;
}

.aiDashboardObjectOptions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.aiDashboardObjectOptions > button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  justify-content: stretch;
  height: auto;
  min-height: 56px;
  padding: 8px 10px;
  text-align: left;
}

.aiDashboardObjectOptions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.aiDashboardObjectOptions em {
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
}

.aiDashboardObjectOptions > p.error {
  color: var(--danger);
}

.aiDashboardMatrixWrap {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  overflow: auto;
}

.aiDashboardMatrixTable {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.aiDashboardMatrixTable th,
.aiDashboardMatrixTable td {
  width: 320px;
  min-width: 320px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: var(--surface-panel);
  text-align: left;
  vertical-align: top;
}

.aiDashboardMatrixTable tr:last-child th,
.aiDashboardMatrixTable tr:last-child td {
  border-bottom: 0;
}

.aiDashboardMatrixTable th:last-child,
.aiDashboardMatrixTable td:last-child {
  border-right: 0;
}

.aiDashboardMatrixTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 78px;
  padding: 13px 16px;
  background: var(--surface-panel-strong);
}

.aiDashboardMatrixTable th:first-child,
.aiDashboardMatrixTable td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 255px;
  min-width: 255px;
}

.aiDashboardMatrixTable thead th:first-child {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-2);
  font-size: 13px;
}

.aiDashboardMatrixTable thead th:first-child small {
  color: var(--text-3);
  font-size: 11px;
}

.aiDashboardMatrixCreator {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
}

.aiDashboardMatrixCreator > span:nth-child(2) {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.aiDashboardMatrixCreator strong,
.aiDashboardMatrixCreator small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiDashboardMatrixCreator strong {
  color: var(--text-1);
  font-size: 14px;
}

.aiDashboardMatrixCreator small {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 400;
}

.aiDashboardMatrixCreator button,
.aiDashboardMatrixTable tbody th button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}

.aiDashboardMatrixCreator button:hover,
.aiDashboardMatrixTable tbody th button:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.aiDashboardMatrixTable tbody th {
  z-index: 1;
  height: 128px;
  padding: 20px 14px 18px 18px;
  background: var(--surface-panel-strong);
  color: var(--text-1);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

.aiDashboardMatrixTable tbody th > span {
  display: inline;
}

.aiDashboardMatrixTable tbody th > small {
  display: block;
  margin-top: 12px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
}

.aiDashboardMatrixTable tbody th button {
  float: right;
  margin: -6px -4px 0 8px;
}

.aiDashboardMatrixTable td {
  height: 128px;
  padding: 20px;
}

.aiDashboardMatrixTable td > strong {
  display: block;
  margin-bottom: 9px;
  color: var(--text-1);
  font-size: 21px;
  font-weight: 650;
  line-height: 1.25;
}

.aiDashboardMatrixTable td > small,
.aiDashboardMatrixTable td > time {
  display: block;
  color: var(--text-3);
  font-size: 11px;
}

.aiDashboardMatrixTable td > time {
  margin-top: 15px;
}

.aiDashboardMatrixTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 10px;
}

.aiDashboardMatrixTags em {
  padding: 4px 7px;
  border-radius: 4px;
  background: var(--surface-panel-strong);
  color: var(--text-2);
  font-size: 11px;
  font-style: normal;
}

.aiDashboardAiBadge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 20px;
  margin-right: 7px;
  padding: 0 6px;
  border: 1px solid var(--primary-border);
  border-radius: 4px;
  background: var(--primary-soft);
  color: var(--primary-light);
  font-size: 10px;
  font-weight: 800;
}

.aiDashboardQuestionActions {
  display: inline-flex !important;
  float: right;
  margin: -6px -4px 0 8px;
}

.aiDashboardQuestionActions button {
  float: none !important;
  margin: 0 !important;
}

.aiDashboardQuestionActions button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.aiDashboardAiQuestionRow th,
.aiDashboardAiQuestionRow td {
  min-height: 156px;
}

.aiDashboardMatrixTable .aiDashboardAiCell > strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.65;
}

.aiDashboardAiCell.analyzing > strong {
  color: var(--primary-light);
}

.aiDashboardAiCell.error > strong {
  color: var(--danger);
}

.aiDashboardAiCell.pending > strong {
  color: var(--warning);
}

.aiDashboardMatrixAddQuestion {
  justify-self: center;
  margin-top: 2px;
  border-color: var(--primary-border);
  color: var(--primary-light);
}

.aiDashboardViewHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.aiDashboardViewHeader .aiToolsEyebrow {
  margin-bottom: 8px;
}

.aiDashboardHeaderActions,
.aiDashboardMetricSwitch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.aiDashboardHeaderActions button,
.aiDashboardMetricSwitch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
}

.aiDashboardHeaderActions button.danger {
  width: 36px;
  padding: 0;
  color: var(--danger);
}

.aiDashboardHeaderActions button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.aiDashboardMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  overflow: hidden;
}

.aiDashboardMetrics article {
  display: grid;
  gap: 7px;
  min-height: 116px;
  padding: 19px;
  border-right: 1px solid var(--line-dark);
}

.aiDashboardMetrics article:last-child {
  border-right: 0;
}

.aiDashboardMetrics span,
.aiDashboardMetrics em,
.aiDashboardDataSummary article span {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.aiDashboardMetrics strong {
  color: var(--text-1);
  font-size: 26px;
  line-height: 1;
}

.aiDashboardComparison,
.aiDashboardDataSummary {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.aiDashboardComparison > header,
.aiDashboardDataSummary > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-dark);
}

.aiDashboardComparison h2,
.aiDashboardDataSummary h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 16px;
}

.aiDashboardMetricSwitch {
  padding: 3px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel-strong);
}

.aiDashboardMetricSwitch button {
  height: 28px;
  border: 0;
  background: transparent;
}

.aiDashboardMetricSwitch button.active {
  background: var(--surface-panel);
  color: var(--primary-light);
  box-shadow: var(--shadow-light);
}

.aiDashboardBars {
  display: grid;
  gap: 16px;
  padding: 22px 20px 24px;
}

.aiDashboardBarRow {
  display: grid;
  grid-template-columns: minmax(110px, 180px) minmax(180px, 1fr) 100px;
  align-items: center;
  gap: 16px;
  min-height: 25px;
}

.aiDashboardBarCreator,
.aiDashboardBarRow strong {
  overflow: hidden;
  color: var(--text-2);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiDashboardBarRow strong {
  color: var(--text-1);
  text-align: right;
}

.aiDashboardBarTrack {
  display: block;
  height: 10px;
  border-radius: 3px;
  background: var(--surface-panel-strong);
  overflow: hidden;
}

.aiDashboardBarTrack i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
}

.aiDashboardDataSummary > header {
  justify-content: flex-start;
  color: var(--primary-light);
}

.aiDashboardDataSummary > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aiDashboardDataSummary article {
  display: grid;
  gap: 7px;
  padding: 18px;
  border-right: 1px solid var(--line-dark);
}

.aiDashboardDataSummary article:last-child {
  border-right: 0;
}

.aiDashboardDataSummary article strong {
  color: var(--text-1);
  font-size: 17px;
}

.aiDashboardDataSummary article p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .aiDashboardQuestionOptions,
  .aiDashboardObjectOptions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {

  .aiDashboardMatrixToolbar > div:last-child > span {
    display: none;
  }
}

@media (max-width: 1100px) {

  .aiDashboardSubjectTypes {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }
}

@media (max-width: 1100px) {

  .aiDashboardCreatorRow {
    grid-template-columns: 24px 42px minmax(150px, 1fr) repeat(2, minmax(92px, 1fr));
  }
}

@media (max-width: 1100px) {

  .aiDashboardCreatorRow > span:last-child {
    display: none;
  }
}

@media (max-width: 760px) {
  .aiDashboardTabs,
  .aiDashboardViewHeader,
  .aiDashboardComparison > header {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 760px) {

  .aiDashboardTabs {
    gap: 8px;
    padding: 0 14px 10px;
  }
}

@media (max-width: 760px) {

  .aiDashboardLiveStatus {
    align-self: flex-end;
  }
}

@media (max-width: 760px) {

  .aiDashboardCreate {
    padding: 28px 14px 40px;
  }
}

@media (max-width: 760px) {

  .aiDashboardMatrixView {
    padding: 12px 10px 28px;
  }
}

@media (max-width: 760px) {

  .aiDashboardMatrixToolbar {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 760px) {

  .aiDashboardMatrixToolbar > div,
  .aiDashboardMatrixToolbar > div:last-child {
    justify-content: flex-start;
    overflow-x: auto;
  }
}

@media (max-width: 760px) {

  .aiDashboardQuestionOptions,
  .aiDashboardObjectOptions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {

  .aiDashboardMatrixTable th,
  .aiDashboardMatrixTable td {
    width: 260px;
    min-width: 260px;
  }
}

@media (max-width: 760px) {

  .aiDashboardMatrixTable th:first-child,
  .aiDashboardMatrixTable td:first-child {
    width: 190px;
    min-width: 190px;
  }
}

@media (max-width: 760px) {

  .aiDashboardSubjectTypes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {

  .aiDashboardCreatorRow {
    grid-template-columns: 24px 42px minmax(0, 1fr) 88px;
  }
}

@media (max-width: 760px) {

  .aiDashboardCreatorRow > span:nth-last-child(-n + 2) {
    display: none;
  }
}

@media (max-width: 760px) {

  .aiDashboardView {
    padding: 16px 14px;
  }
}

@media (max-width: 760px) {

  .aiDashboardMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {

  .aiDashboardMetrics article:nth-child(2) {
    border-right: 0;
  }
}

@media (max-width: 760px) {

  .aiDashboardMetrics article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-dark);
  }
}

@media (max-width: 760px) {

  .aiDashboardMetricSwitch {
    overflow-x: auto;
  }
}

@media (max-width: 760px) {

  .aiDashboardBarRow {
    grid-template-columns: 90px minmax(100px, 1fr) 84px;
    gap: 10px;
  }
}

@media (max-width: 760px) {

  .aiDashboardDataSummary > div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {

  .aiDashboardDataSummary article {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }
}

@media (max-width: 760px) {

  .aiDashboardDataSummary article:last-child {
    border-bottom: 0;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/agent.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.agentFloatingTeaser {
  --agent-teaser-gap: 12px;
  width: min(300px, calc(100vw - 32px));
  position: fixed;
  top: clamp(16px, calc(var(--agent-orb-top, calc(100vh - 168px)) + 4px), calc(100vh - 116px));
  z-index: 1099;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16), 0 10px 28px rgba(20, 184, 166, 0.12);
  color: var(--text-1);
  cursor: pointer;
  padding: 12px 14px;
  text-align: left;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.agentFloatingTeaser.is-left-of-orb {
  right: calc(100vw - var(--agent-orb-left, calc(100vw - 144px)) + var(--agent-teaser-gap));
  left: auto;
  width: min(300px, calc(var(--agent-orb-left, calc(100vw - 144px)) - var(--agent-teaser-gap) - 16px));
}

.agentFloatingTeaser.is-right-of-orb {
  right: auto;
  left: calc(var(--agent-orb-left, 24px) + var(--agent-orb-width, 118px) + var(--agent-teaser-gap));
  width: min(
    300px,
    calc(100vw - var(--agent-orb-left, 24px) - var(--agent-orb-width, 118px) - var(--agent-teaser-gap) - 16px)
  );
}

.agentFloatingTeaser.is-right-of-orb::after {
  right: auto;
  left: -6px;
  border: 0;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  border-left: 1px solid rgba(17, 24, 39, 0.08);
}

.agentFloatingTeaser strong {
  color: #111827;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.agentFloatingTeaser span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.agentEmbeddedHeader {
  min-height: 60px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: #ffffff;
  padding: 10px 310px 10px 14px;
}

.agentFloatingPanelHeader {
  min-height: 76px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.96);
  padding: 14px 18px;
  cursor: grab;
  touch-action: none;
}

.agentFloatingPanelHeaderActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.agentFloatingPanelHeaderActions button {
  display: grid;
  place-items: center;
  padding: 0;
}

.agentConversationList > div.menu-open {
  z-index: 4;
}

.agentConversationMenu {
  position: absolute;
  z-index: 3;
  right: 0;
  top: 30px;
  min-width: 126px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  padding: 4px;
}

.agentConversationMenu button {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #334155;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  padding: 0 10px;
  text-align: left;
}

.agentConversationMenu button:hover {
  background: #f1f5f9;
}

.agentConversationMenu button.danger {
  color: #ef4444;
}

.agentContextStrip {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: #ffffff;
  color: #172033;
  padding: 12px 28px 10px;
}

.agentExecutionActions {
  min-width: 0;
  display: grid;
  gap: 8px;
  margin-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  padding-top: 12px;
}

.agentExecutionActions > span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.agentExecutionActions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.agentExecutionActions a,
.agentExecutionActions button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: #ffffff;
  color: #344256;
  cursor: pointer;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-decoration: none;
}

.agentExecutionActions a.primary,
.agentExecutionActions button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.agentExecutionActions a:hover,
.agentExecutionActions button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 50%, transparent);
  color: var(--primary);
}

.agentExecutionActions a.primary:hover,
.agentExecutionActions button.primary:hover:not(:disabled) {
  color: #ffffff;
  filter: brightness(0.96);
}

.agentExecutionActions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-theme='dark'] .agentExecutionActions a,
[data-theme='dark'] .agentExecutionActions button {
  border-color: var(--line-dark);
  background: var(--surface-panel);
  color: var(--text-2);
}

[data-theme='dark'] .agentExecutionActions a.primary,
[data-theme='dark'] .agentExecutionActions button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.agentFloatingComposer {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  background: #ffffff;
  padding: 12px 14px;
}

.agentFloatingComposer input {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  outline: 0;
  background: #f8fafc;
  color: #172033;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 780;
}

.agentComposer {
  width: min(950px, 100%);
  min-height: 182px;
  justify-self: center;
  display: grid;
  grid-template-rows: auto minmax(84px, 1fr) 44px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  padding: 18px;
}

.agentStandalonePage {
  width: 100%;
  height: 100dvh;
  min-height: 620px;
  display: grid;
  grid-template-rows: 66px minmax(0, 1fr);
  overflow: hidden;
  background: #f7f8fc;
  color: #172033;
}

.agentStandalonePanel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #ffffff;
}

[data-theme='dark'] .agentStandalonePage,
[data-theme='dark'] .agentStandalonePanel {
  background: #080b15;
  color: var(--text-1);
}

.agentComposerTools {
  position: relative;
  min-width: 0;
  z-index: 5;
}

.agentComposerToolRow {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
  padding-bottom: 9px;
}

.agentComposerToolButton {
  width: auto !important;
  min-width: 32px;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #334155 !important;
  padding: 0 9px !important;
  font-weight: 850;
}

.agentComposerToolButton.active {
  border-color: color-mix(in srgb, var(--primary) 36%, transparent) !important;
  background: color-mix(in srgb, var(--primary) 8%, #ffffff) !important;
  color: var(--primary) !important;
}

.agentComposerToolButton span {
  font-size: 17px;
  line-height: 1;
}

.agentComposerToolButton em {
  max-width: 150px;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentFileInput {
  display: none;
}

.agentComposerUploadStatus,
.agentComposerUploadError {
  max-width: 220px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentComposerUploadStatus {
  color: #526174;
}

.agentComposerUploadError {
  color: #b42318;
}

.agentReferenceChip {
  max-width: 190px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 6%, #ffffff);
  color: #24324a;
  padding: 0 5px 0 7px;
  font-size: 12px;
}

.agentReferenceChip > img {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  object-fit: cover;
}

.agentAttachmentChip > svg {
  flex: 0 0 auto;
  color: #64748b;
}

.agentReferenceChip strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentReferenceChip button {
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #64748b !important;
  padding: 0 !important;
}

.agentComposerMenu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 7px);
  z-index: 40;
  width: min(430px, calc(100vw - 40px));
  max-height: min(520px, 65vh);
  overflow: auto;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
  padding: 8px;
}

.agentComposerMenu > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px 10px;
}

.agentComposerMenu > header strong {
  color: #172033;
  font-size: 13px;
}

.agentComposerMenu > header span {
  color: #94a3b8;
  font-size: 11px;
  text-align: right;
}

.agentComposerMenu > button,
.agentReferenceResults > button {
  width: 100% !important;
  min-height: 54px;
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #172033 !important;
  padding: 8px !important;
  text-align: left;
}

.agentConversationMenu button:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

.agentConversationDialogOverlay {
  position: fixed;
  z-index: 10060;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.48);
  padding: 20px;
}

.agentConversationDialog {
  width: min(440px, 100%);
  max-height: calc(100dvh - 40px);
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.agentConversationDialog > header {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 22px;
}

.agentConversationDialog > header > strong {
  color: #111827;
  font-size: 18px;
  font-weight: 800;
}

.agentConversationDialog > header > button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  padding: 0;
}

.agentRenameDialog {
  padding-bottom: 20px;
}

.agentRenameDialog > label {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 22px 22px 8px;
}

.agentRenameDialog > label > span {
  color: #475569;
  font-size: 13px;
  font-weight: 750;
}

.agentRenameDialog > label input {
  width: 100%;
  height: 42px;
  padding-right: 58px;
}

.agentRenameDialog > label > em {
  position: absolute;
  right: 34px;
  bottom: 20px;
  color: #94a3b8;
  font-size: 12px;
  font-style: normal;
}

.agentConversationDialogError {
  margin: 4px 22px 0;
  color: #dc2626;
  font-size: 13px;
}

.agentRenameDialog > footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 22px 0;
}

.agentRenameDialog > footer button {
  min-width: 88px;
  height: 38px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 750;
}

.agentConversationDialogCancel {
  border: 1px solid #dbe1e8;
  background: #ffffff;
  color: #475569;
}

.agentConversationDialogPrimary {
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.agentRenameDialog > footer button:disabled,
.agentShareDialog > footer button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.agentShareDialog {
  width: min(900px, 100%);
  height: min(860px, calc(100dvh - 40px));
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.agentShareDialogPreview {
  min-height: 0;
  overflow: auto;
  background: #eef1f7;
  padding: 24px;
}

.agentShareCanvas {
  width: min(760px, 100%);
  min-height: 520px;
  margin: 0 auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  padding: 28px 30px 36px;
}

.agentShareCanvas > header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 22px;
}

.agentShareCanvas > header > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--primary);
}

.agentShareCanvas > header .brandLogo-mark {
  width: 30px;
  height: 30px;
}

.agentShareCanvas > header strong,
.agentShareCanvas > header em {
  display: block;
}

.agentShareCanvas > header strong {
  overflow: hidden;
  color: #111827;
  font-size: 20px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentShareCanvas > header em {
  margin-top: 4px;
  color: #9ca3af;
  font-size: 13px;
  font-style: normal;
}

.agentShareDialogState {
  display: grid;
  min-height: 180px;
  place-items: center;
  color: #64748b;
  font-size: 14px;
}

.agentShareDialogState.error {
  color: #dc2626;
}

.agentShareMessage {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.agentShareMessage.user {
  justify-content: flex-end;
}

.agentShareMessage > span {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.agentShareMessage > div {
  max-width: 88%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2937;
  padding: 14px 16px;
}

.agentShareMessage.user > div {
  border-color: #eef0f4;
  background: #eef0f4;
}

.agentShareMessage p {
  margin: 0;
  color: inherit;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.agentShareMessage small {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.agentShareMessage aside {
  margin-top: 12px;
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
}

.agentShareMessage aside strong {
  display: block;
  margin-bottom: 5px;
  color: #111827;
  font-size: 13px;
}

.agentShareMessage .agentMarkdownContent {
  color: #1f2937;
  font-size: 14px;
}

.agentShareDialog > footer {
  min-height: 104px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 52px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 14px 24px 28px;
}

.agentShareDialog > footer > button {
  display: grid;
  justify-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #475569;
  cursor: pointer;
  padding: 0;
}

.agentShareDialog > footer > button > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
}

.agentShareDialog > footer > button:nth-child(2) > span {
  background: #2563eb;
}

.agentShareDialog > footer > button strong {
  font-size: 13px;
}

.agentShareDialog > footer > p {
  position: absolute;
  right: 18px;
  bottom: 8px;
  left: 18px;
  margin: 0;
  color: #64748b;
  font-size: 12px;
  text-align: center;
}

[data-theme='dark'] .agentConversationDialog {
  border-color: rgba(148, 163, 184, 0.28);
  background: #172033;
}

[data-theme='dark'] .agentConversationDialog > header,
[data-theme='dark'] .agentShareDialog > footer {
  border-color: rgba(148, 163, 184, 0.22);
  background: #172033;
}

[data-theme='dark'] .agentConversationDialog > header > strong,
[data-theme='dark'] .agentRenameDialog > label > span {
  color: #f8fafc;
}

[data-theme='dark'] .agentConversationDialogCancel {
  border-color: #475569;
  background: #1e293b;
  color: #e2e8f0;
}

[data-theme='dark'] .agentShareDialog > footer > button {
  color: #e2e8f0;
}

@media (max-width: 700px) {
  .agentConversationDialogOverlay {
    padding: 10px;
  }
}

@media (max-width: 700px) {

  .agentShareDialog {
    height: calc(100dvh - 20px);
  }
}

@media (max-width: 700px) {

  .agentShareDialogPreview {
    padding: 12px;
  }
}

@media (max-width: 700px) {

  .agentShareCanvas {
    padding: 20px 16px 28px;
  }
}

.agentDeleteDialogOverlay {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.38);
  padding: 20px;
}

.agentDeleteDialog {
  position: relative;
  width: min(400px, 100%);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
  padding: 28px 24px 24px;
}

.agentDeleteDialog header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 28px;
}

.agentDeleteDialog header strong {
  color: #1f2937;
  font-size: 18px;
  font-weight: 700;
}

.agentDeleteDialogWarning {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f5a900;
  color: #ffffff;
}

.agentDeleteDialog > p {
  margin: 12px 0 0 34px;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.6;
}

.agentDeleteDialogClose {
  position: absolute;
  top: 20px;
  right: 18px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  padding: 0;
}

.agentDeleteDialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 40px;
}

.agentDeleteDialog footer button {
  width: 110px;
  height: 40px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.agentDeleteDialogCancel {
  border: 1px solid #d7dce4;
  background: #ffffff;
  color: #4b5563;
}

.agentDeleteDialogConfirm {
  border: 1px solid #ff735f;
  background: #ff735f;
  color: #ffffff;
}

.agentDeleteDialog button:disabled {
  cursor: wait;
  opacity: 0.62;
}

[data-theme='dark'] .agentDeleteDialog {
  border-color: rgba(148, 163, 184, 0.26);
  background: #172033;
}

[data-theme='dark'] .agentDeleteDialog header strong {
  color: #f8fafc;
}

[data-theme='dark'] .agentDeleteDialog > p {
  color: #aeb8c8;
}

[data-theme='dark'] .agentDeleteDialogCancel {
  border-color: #475569;
  background: #1e293b;
  color: #e2e8f0;
}

.agentComposerMenu > button:hover,
.agentComposerMenu > button.selected,
.agentReferenceResults > button:hover,
.agentReferenceResults > button.selected {
  background: #f1f5f9 !important;
}

.agentComposerMenu button > span:not(.agentSkillCommand, .agentReferenceAvatar) {
  width: 100%;
  min-width: 0;
  display: grid;
  justify-self: stretch;
  justify-items: start;
  gap: 3px;
  text-align: left;
}

.agentComposerMenu button strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentComposerMenu button em {
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentSkillCommand {
  width: 88px;
  overflow: hidden;
  color: var(--primary);
  font-size: 11px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentComposerMenu > .agentCreateSkillButton {
  border-top: 1px solid #e2e8f0 !important;
  grid-template-columns: 88px minmax(0, 1fr);
  margin-top: 5px;
}

.agentCustomSkillForm {
  display: grid;
  gap: 8px;
  border-top: 1px solid #e2e8f0;
  margin-top: 6px;
  padding: 10px 8px 4px;
}

.agentCustomSkillForm input,
.agentCustomSkillForm textarea,
.agentReferenceSearch input {
  width: 100%;
  border: 1px solid #dbe2ea !important;
  border-radius: 6px !important;
  outline: 0;
  background: #ffffff !important;
  color: #172033 !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
}

.agentCustomSkillForm textarea {
  min-height: 82px;
  resize: vertical;
}

.agentCustomSkillForm > div {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.agentCustomSkillForm button {
  width: auto !important;
  height: 31px !important;
  border: 1px solid #dbe2ea !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #334155 !important;
  padding: 0 10px !important;
}

.agentCustomSkillForm button:last-child {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #ffffff !important;
}

.agentReferenceSearch {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border: 1px solid #dbe2ea;
  border-radius: 6px;
  margin: 2px 4px 7px;
  padding-left: 9px;
  color: #64748b;
}

.agentReferenceSearch input {
  border: 0 !important;
}

.agentReferenceResults {
  display: grid;
}

.agentReferenceResults > p {
  margin: 0;
  padding: 18px 10px;
  color: #64748b;
  font-size: 12px;
  text-align: center;
}

.agentReferenceResults > p.error {
  color: #b42318;
}

.agentReferenceResults > button {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.agentReferenceAvatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 12px;
}

.agentReferenceAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agentCurrentReference {
  grid-template-columns: 24px minmax(0, 1fr) !important;
}

.agentFloatingComposer .agentComposerTools {
  grid-column: 1 / -1;
}

.agentFloatingComposer .agentComposerToolRow {
  max-height: 72px;
  overflow-y: auto;
  padding-bottom: 0;
}

.agentFloatingComposer .agentComposerMenu {
  bottom: calc(100% + 5px);
  width: min(390px, calc(100vw - 52px));
}

.agentFloatingComposer:has(.agentComposerTools) {
  grid-template-rows: auto 40px;
}

.agentExecutionTimeline {
  max-width: 720px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 7px;
  background: #f8fafc;
  margin: 8px 0 10px;
  padding: 0 10px;
}

.agentExecutionTimeline summary {
  min-height: 35px;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: #334155;
  font-size: 12px;
  list-style: none;
}

.agentExecutionTimeline summary span {
  font-weight: 800;
}

.agentExecutionTimeline summary em {
  margin-left: auto;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
}

.agentExecutionTimeline[open] summary {
  border-bottom: 1px solid #e2e8f0;
}

.agentExecutionTimeline ol {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 9px 0 5px;
}

.agentExecutionTimeline li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #475569;
  font-size: 11px;
}

.agentExecutionTimeline li.running svg {
  color: var(--primary);
  animation: agentExecutionSpin 1s linear infinite;
}

@keyframes agentExecutionSpin {
  to { transform: rotate(360deg); }
}

.agentExecutionTimeline li.completed svg {
  color: #16803c;
}

.agentExecutionTimeline li.failed svg {
  color: #b42318;
}

.agentExecutionTimeline li span {
  display: grid;
  gap: 2px;
}

.agentExecutionTimeline li em,
.agentExecutionTimeline > p {
  color: #94a3b8;
  font-size: 10px;
  font-style: normal;
}

.agentExecutionTimeline > p {
  margin: 3px 0 9px 21px;
}

.agentComposerCancel {
  color: #334155 !important;
}

[data-theme='dark'] .agentComposerMenu,
[data-theme='dark'] .agentReferenceChip,
[data-theme='dark'] .agentExecutionTimeline {
  border-color: var(--line-dark);
  background: #151d2d;
  color: var(--text-1);
}

[data-theme='dark'] .agentComposerMenu :is(strong, input, textarea),
[data-theme='dark'] .agentExecutionTimeline summary {
  color: var(--text-1) !important;
}

.agentEmbeddedHeader {
  display: none;
}

.agentContextStrip {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 9px 18px;
}

.agentContextIdentity,
.agentContextStatus {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.agentContextIdentity i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #16a36a;
  box-shadow: 0 0 0 3px rgba(22, 163, 106, 0.1);
}

.agentContextStrip .agentContextIdentity strong {
  max-width: 280px;
  font-size: 13px;
}

.agentContextStrip .agentContextIdentity span,
.agentContextStrip .agentContextStatus span,
.agentContextStrip .agentContextStatus strong {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.agentContextStrip .agentContextIdentity span {
  border-left: 1px solid #e2e8f0;
  padding-left: 8px;
}

.agentContextStrip .agentContextStatus strong::before {
  content: '·';
  margin-right: 8px;
  color: #cbd5e1;
}

.agentContextStrip > p {
  flex-basis: 100%;
  font-size: 11px;
}

.agentPromptWelcome {
  width: min(760px, calc(100% - 36px));
  display: grid;
  gap: 14px;
  margin: 34px auto 24px;
}

.agentConversationScroll.is-empty {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.agentConversationScroll.is-empty .agentPromptWelcome {
  align-self: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.agentPromptWelcome > header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agentPromptWelcome > header > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  background: #f7faf9;
  color: #167a5b;
}

.agentPromptWelcome > header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.agentPromptWelcome > header strong {
  color: #172033;
  font-size: 14px;
  font-weight: 850;
}

.agentPromptWelcome > header em {
  color: #7b8798;
  font-size: 11px;
  font-style: normal;
}

.agentPromptQuestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.agentPromptQuestions button {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
  text-align: left;
}

.agentPromptQuestions button:hover {
  border-color: #b9c7d3;
  background: #f8fafc;
}

.agentPromptQuestions button svg {
  flex: 0 0 auto;
  color: #8491a3;
}

.agentFloatingPanel .agentPromptQuestions {
  grid-template-columns: 1fr;
}

.agentFloatingPanel .agentPromptWelcome {
  width: calc(100% - 28px);
  margin-top: 18px;
  margin-bottom: 18px;
}

.agentFloatingComposer {
  grid-template-areas:
    'input send'
    'tools send';
  grid-template-columns: minmax(0, 1fr) 40px;
  grid-template-rows: 32px auto !important;
  align-items: center;
  gap: 3px 9px;
  border: 1px solid #d9e1e8;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.06);
  margin: 10px 12px 12px;
  padding: 7px 8px 7px 12px;
}

.agentFloatingComposer:focus-within {
  border-color: color-mix(in srgb, var(--primary) 62%, #94a3b8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 8%, transparent);
}

.agentFloatingComposer > input,
.agentFloatingComposer > .cuiInput {
  grid-area: input;
}

.agentFloatingComposer input {
  height: 32px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 13px;
  font-weight: 650;
}

.agentFloatingComposer > .agentComposerTools {
  grid-area: tools;
}

.agentFloatingComposer > button {
  grid-area: send;
  align-self: end;
  width: 38px;
  height: 38px;
  border-radius: 9px;
}

.agentFloatingComposer .agentComposerToolRow {
  max-height: none;
  min-height: 28px;
  gap: 4px;
  overflow: visible;
  padding: 0;
}

.agentFloatingComposer .agentComposerToolButton {
  min-width: 28px;
  height: 27px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: #5f6f82 !important;
  padding: 0 7px !important;
}

.agentFloatingComposer .agentComposerToolButton:hover {
  background: #f1f5f9 !important;
}

.agentFloatingComposer .agentComposerToolButton.active {
  border-color: #dbe4ea !important;
  background: #f3f7f6 !important;
  color: #176f56 !important;
}

.agentComposerRequirement {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  color: #b54708;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentFloatingComposer .agentReferenceChip {
  height: 27px;
  border-color: #dbe4ea;
  background: #f3f7f6;
  color: #285948;
}

.agentFloatingComposer .agentComposerMenu {
  bottom: calc(100% + 9px);
}

.agentComposer {
  grid-template-areas:
    'input'
    'tools'
    'bar';
  grid-template-rows: minmax(76px, 1fr) auto 40px;
}

.agentComposer > textarea,
.agentComposer > .cuiTextarea {
  grid-area: input;
}

.agentComposer > .agentComposerTools {
  grid-area: tools;
}

.agentComposer > .agentComposerBar {
  grid-area: bar;
}

@media (max-width: 760px) {
  .agentPromptQuestions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {

  .agentContextStatus {
    display: none;
  }
}

[data-theme='dark'] .agentPromptWelcome > header strong {
  color: var(--text-1);
}

[data-theme='dark'] .agentPromptQuestions button,
[data-theme='dark'] .agentFloatingComposer {
  border-color: var(--line-dark);
  background: #111827;
  color: var(--text-1);
}

body:has(.titleOptimizerPage) .agentFloatingOrb {
  width: 82px !important;
  height: 68px !important;
  top: 18px !important;
  right: 24px !important;
  left: auto !important;
  opacity: 0.48;
  filter: saturate(0.82);
}

body:has(.titleOptimizerPage) .agentFloatingOrb:hover {
  opacity: 0.72;
  transform: translateY(-1px);
}

body:has(.titleOptimizerPage) .agentFloatingTeaser {
  display: none;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/ai-tools.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Rules integrated from the ChatBI/Agent member branch. */
.aiToolsPage,
.aiToolWorkflowPage {
  display: grid;
  gap: 20px;
  min-width: 0;
  padding: 24px;
}

.aiToolsHero,
.aiToolWorkflowHeader {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-light);
}

[data-theme='dark'] .aiToolsHero,
[data-theme='dark'] .aiToolWorkflowHeader {
  box-shadow: none;
}

.aiToolsHero > div:first-child,
.aiToolWorkflowHeader > div:first-child {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.aiToolsEyebrow {
  width: fit-content;
  padding: 4px 10px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 700;
}

.aiToolsHero h1,
.aiToolWorkflowHeader h1 {
  margin: 0;
  color: var(--text-1);
  font-size: 28px;
  line-height: 1.2;
}

.aiToolsHero p,
.aiToolWorkflowHeader p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
}

.aiToolsHeroPanel {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 220px;
  padding: 18px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel-strong);
}

.aiToolsHeroPanel span,
.aiToolsHeroPanel em,
.aiToolResultHeader span,
.aiToolResultHeader em,
.aiToolField span,
.aiToolTableHead span {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

.aiToolsHeroPanel strong {
  color: var(--text-1);
  font-size: 34px;
  line-height: 1;
}

.aiToolsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.aiToolSampleSection .consumerExampleCard {
  min-height: 190px;
}

.aiToolSampleSection .consumerExampleCard p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.65;
}

.videoInsightPage {
  min-width: 0;
  display: grid;
  gap: 22px;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(184, 197, 185, 0.18), transparent 34%),
    linear-gradient(225deg, rgba(169, 181, 202, 0.16), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-panel) 92%, #eef2ef), var(--surface-panel));
}

.videoInsightHero {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 18px;
  align-items: end;
  padding: 26px 4px 8px;
}

.videoInsightHeroCopy {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.videoInsightEyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb, var(--primary-border) 42%, #b8c5b9);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-panel) 76%, #dfe7e1);
  color: color-mix(in srgb, var(--primary) 68%, #677b6c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 8px 22px rgba(65, 80, 90, 0.08);
  font-size: 12px;
  font-weight: 850;
}

.videoInsightHero h1 {
  margin: 0;
  color: var(--text-1);
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 950;
  line-height: 1.08;
}

.videoInsightHero p {
  max-width: 720px;
  margin: 0;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.75;
}

.videoInsightHeroPanel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line-dark) 72%, #c7d1cc);
  border-radius: 8px;
  background: color-mix(in srgb, var(--line-dark) 62%, #d7ddd9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 18px 45px rgba(74, 85, 104, 0.1);
}

.videoInsightHeroPanel div {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface-panel) 88%, #eef2ef);
}

.videoInsightHeroPanel span,
.videoInsightPanelHead span,
.videoInsightSampleCard em {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.videoInsightHeroPanel strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 930;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoInsightWorkbench {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.52fr) minmax(300px, 0.78fr);
  gap: 18px;
}

.videoInsightComposer,
.videoInsightFramework,
.videoInsightResult {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line-dark) 78%, #cbd5d1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-panel) 94%, #f2f5f2), var(--surface-panel)),
    var(--surface-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -18px 34px rgba(118, 130, 145, 0.025),
    0 18px 46px rgba(63, 77, 94, 0.09);
}

.videoInsightComposer {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.videoInsightFramework {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px;
}

.videoInsightPanelHead {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.videoInsightPanelHead.compact {
  align-items: center;
}

.videoInsightPanelHead > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.videoInsightPanelHead h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 940;
  line-height: 1.25;
}

.videoInsightPanelHead em {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--line-dark) 70%, #c7d1cc);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-panel-hover) 74%, #edf1ed);
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.videoInsightComposer textarea {
  width: 100%;
  min-height: 152px;
  resize: vertical;
  border: 1px solid color-mix(in srgb, var(--line-dark-strong) 72%, #bfc8c3);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent),
    var(--control-bg);
  color: var(--text-1);
  font: 14px/1.68 var(--font-sans, system-ui, sans-serif);
  outline: 0;
  padding: 15px;
  box-shadow: inset 0 1px 5px rgba(63, 77, 94, 0.05);
}

.videoInsightComposer textarea:focus {
  border-color: color-mix(in srgb, var(--primary-border) 70%, #9caeaa);
  box-shadow:
    inset 0 1px 5px rgba(63, 77, 94, 0.05),
    0 0 0 3px color-mix(in srgb, var(--focus-ring) 70%, transparent);
}

.videoInsightComposer textarea::placeholder {
  color: var(--text-3);
}

.videoInsightAngleGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.videoInsightAngleGrid button,
.videoInsightActions button,
.videoInsightSampleCard button {
  min-height: 38px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 890;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.videoInsightAngleGrid button {
  border: 1px solid color-mix(in srgb, var(--line-dark) 76%, #c4cfca);
  background: color-mix(in srgb, var(--surface-panel-hover) 78%, #edf1ed);
  color: var(--text-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.videoInsightAngleGrid button:hover,
.videoInsightAngleGrid button.active {
  border-color: color-mix(in srgb, var(--primary-border) 62%, #9fb1ab);
  background: color-mix(in srgb, var(--primary-soft) 46%, var(--surface-panel));
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(73, 96, 102, 0.08);
}

.videoInsightActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.videoInsightActions button,
.videoInsightSampleCard button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  padding: 0 15px;
}

.videoInsightActions button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.videoInsightActions button.ghost {
  border-color: color-mix(in srgb, var(--line-dark) 82%, #cbd5d1);
  background: color-mix(in srgb, var(--surface-panel-hover) 80%, #edf1ed);
  color: var(--text-2);
}

.videoInsightActions button.primary {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 86%, #8fa9a0), color-mix(in srgb, var(--primary) 70%, #9d8faa)),
    var(--primary);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 12px 24px color-mix(in srgb, var(--primary) 22%, transparent);
}

.videoInsightActions button:not(:disabled):hover,
.videoInsightSampleCard button:hover {
  transform: translateY(-2px);
}

.videoInsightDimensionList {
  display: grid;
  gap: 10px;
}

.videoInsightDimensionList article {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line-dark) 74%, #ccd4d0);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 72%, #edf1ed);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.videoInsightDimensionList article > span,
.videoInsightSampleIcon,
.videoInsightLoading > span {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-soft) 42%, #e3e8e4);
  color: color-mix(in srgb, var(--primary) 74%, #61746c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 8px 18px rgba(63, 77, 94, 0.06);
}

.videoInsightDimensionList strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 930;
}

.videoInsightDimensionList p,
.videoInsightSampleCard p,
.videoInsightLoading p,
.videoInsightEmpty p,
.videoInsightError p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.65;
}

.videoInsightSamples {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.videoInsightSampleGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.videoInsightSampleCard {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 13px;
  min-height: 238px;
  border: 1px solid color-mix(in srgb, var(--line-dark) 76%, #cbd5d1);
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-panel) 92%, #f0f3f1), var(--surface-panel)),
    var(--surface-panel);
  padding: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 14px 36px rgba(63, 77, 94, 0.075);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.videoInsightSampleCard:hover {
  border-color: color-mix(in srgb, var(--primary-border) 48%, #b7c3bf);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 18px 42px rgba(63, 77, 94, 0.105);
}

.videoInsightSampleCard h3 {
  margin: 5px 0 7px;
  color: var(--text-1);
  font-size: 17px;
  font-weight: 940;
  line-height: 1.3;
}

.videoInsightTagRow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.videoInsightTagRow span {
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--line-dark) 72%, #ccd5d0);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-panel-hover) 76%, #edf1ed);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 820;
}

.videoInsightSampleCard button {
  width: fit-content;
  border-color: color-mix(in srgb, var(--primary-border) 46%, #b4c0ba);
  background: color-mix(in srgb, var(--primary-soft) 38%, var(--surface-panel));
  color: var(--primary);
}

.videoInsightResult {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.videoInsightResult pre {
  overflow: auto;
  max-height: 560px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--line-dark) 74%, #cbd5d1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-panel-hover) 72%, #f3f5f3), var(--surface-panel)),
    var(--surface-panel);
  color: var(--text-1);
  font: 13px/1.78 var(--font-sans, system-ui, sans-serif);
  padding: 16px;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: inset 0 1px 8px rgba(63, 77, 94, 0.045);
}

.videoInsightLoading,
.videoInsightError,
.videoInsightEmpty {
  min-height: 150px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  border: 1px dashed color-mix(in srgb, var(--line-dark) 80%, #cbd5d1);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 72%, #edf1ed);
  padding: 20px;
  text-align: center;
}

.videoInsightLoading {
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  text-align: left;
}

.videoInsightLoading strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 930;
}

.videoInsightError {
  border-color: color-mix(in srgb, var(--danger) 36%, var(--line-dark));
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-panel));
  color: var(--danger);
}

[data-theme='dark'] .videoInsightPage {
  background:
    linear-gradient(135deg, rgba(85, 102, 92, 0.18), transparent 34%),
    linear-gradient(225deg, rgba(87, 93, 120, 0.18), transparent 32%),
    var(--surface-panel);
}

[data-theme='dark'] .videoInsightHeroPanel,
[data-theme='dark'] .videoInsightComposer,
[data-theme='dark'] .videoInsightFramework,
[data-theme='dark'] .videoInsightSampleCard,
[data-theme='dark'] .videoInsightResult {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@media (max-width: 1100px) {
  .aiToolsGrid,
  .aiToolInsightGrid,
  .aiToolVideoGrid,
  .aiToolWorkspace,
  .aiToolInlineFields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {

  .aiToolsHero,
  .aiToolWorkflowHeader {
    flex-direction: column;
  }
}

@media (max-width: 1100px) {

  .videoInsightHero,
  .videoInsightWorkbench {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {

  .videoInsightSampleGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .videoInsightPage {
    padding: 16px;
  }
}

@media (max-width: 760px) {

  .videoInsightHero {
    padding-top: 8px;
  }
}

@media (max-width: 760px) {

  .videoInsightHeroPanel,
  .videoInsightAngleGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {

  .videoInsightPanelHead,
  .videoInsightActions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 760px) {

  .videoInsightActions button,
  .videoInsightSampleCard button {
    width: 100%;
  }
}

@media (max-width: 760px) {

  .videoInsightLoading {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

.creatorPlanPage {
  width: min(1480px, calc(100% - 40px));
  margin: 0 auto;
  padding: 26px 0 48px;
}

.creatorPlanHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.creatorPlanHeader > div:first-child {
  min-width: 0;
}

.creatorPlanBack,
.creatorPlanEyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
}

.creatorPlanBack {
  color: var(--text-3);
  text-decoration: none;
}

.creatorPlanBack:hover {
  color: var(--primary);
}

.creatorPlanEyebrow {
  color: var(--primary);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.creatorPlanHeader h1,
.creatorPlanCard h2 {
  margin: 0;
  color: var(--text-1);
}

.creatorPlanHeader h1 {
  max-width: 760px;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -.035em;
}

.creatorPlanHeader p,
.creatorPlanCardHead p,
.creatorPlanSectionTitle p {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.creatorPlanHeaderActions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.creatorPlanStatus {
  padding: 7px 10px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}

.creatorPlanStatus.ready {
  border-color: color-mix(in srgb, #14b8a6 42%, var(--line-dark));
  background: color-mix(in srgb, #14b8a6 10%, var(--surface-panel));
  color: #0f8b7e;
}

.creatorPlanPrimary,
.creatorPlanCandidateActions a,
.creatorPlanCandidateActions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.creatorPlanPrimary {
  border: 1px solid var(--primary);
  padding: 0 15px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--primary) 24%, transparent);
}

.creatorPlanPrimary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px color-mix(in srgb, var(--primary) 30%, transparent);
}

.creatorPlanPrimary:disabled,
.creatorPlanCandidateActions button:disabled {
  cursor: wait;
  opacity: .62;
}

.creatorPlanWorkspace {
  display: grid;
  grid-template-columns: minmax(290px, 350px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.creatorPlanConfig,
.creatorPlanCard,
.creatorPlanKpis article {
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: var(--surface-panel);
  box-shadow: 0 10px 32px rgba(15, 23, 42, .035);
}

.creatorPlanConfig {
  position: sticky;
  top: 18px;
  display: grid;
  overflow: hidden;
}

.creatorPlanConfig > section {
  padding: 18px;
  border-bottom: 1px solid var(--line-dark);
}

.creatorPlanConfig > section:last-child {
  border-bottom: 0;
}

.creatorPlanSectionTitle {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.creatorPlanSectionTitle > span {
  display: grid;
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
}

.creatorPlanSectionTitle strong {
  color: var(--text-1);
  font-size: 14px;
}

.creatorPlanSectionTitle p {
  margin-top: 2px;
  font-size: 12px;
}

.creatorPlanField,
.creatorPlanFieldGrid {
  display: grid;
  gap: 7px;
}

.creatorPlanField.wide {
  margin-bottom: 12px;
}

.creatorPlanFieldGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.creatorPlanField > span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 750;
}

.creatorPlanField input,
.creatorPlanField select,
.creatorPlanField textarea {
  width: 100%;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  outline: none;
  background: var(--surface-dark);
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.creatorPlanField input,
.creatorPlanField select {
  min-height: 36px;
  padding: 0 9px;
}

.creatorPlanField textarea {
  min-height: 112px;
  padding: 10px;
  resize: vertical;
  line-height: 1.55;
}

.creatorPlanField input:focus,
.creatorPlanField select:focus,
.creatorPlanField textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.creatorPlanExamples > div {
  display: grid;
  gap: 8px;
}

.creatorPlanExamples button {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-dark);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.creatorPlanExamples button:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.creatorPlanExamples span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
}

.creatorPlanExamples strong {
  color: var(--text-1);
  font-size: 12px;
}

.creatorPlanCanvas {
  display: grid;
  min-width: 0;
  gap: 18px;
}

.creatorPlanKpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.creatorPlanKpis article {
  display: grid;
  gap: 6px;
  min-height: 108px;
  padding: 15px;
}

.creatorPlanKpis span,
.creatorPlanCardHead > div > span,
.creatorPlanInsightGrid article > span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 850;
}

.creatorPlanKpis strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorPlanKpis p {
  margin: auto 0 0;
  color: var(--text-3);
  font-size: 12px;
}

.creatorPlanCard {
  min-width: 0;
  padding: 18px;
}

.creatorPlanCardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.creatorPlanCard h2 {
  margin-top: 4px;
  font-size: 18px;
  letter-spacing: -.02em;
}

.creatorPlanCardHead em {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.creatorPlanCardHead em.valid {
  background: rgba(20, 184, 166, .12);
  color: #0f8b7e;
}

.creatorPlanCardHead em.invalid {
  background: rgba(245, 158, 11, .13);
  color: #b45309;
}

.creatorPlanBudgetTable {
  overflow: auto;
  border: 1px solid var(--line-dark);
  border-radius: 9px;
}

.creatorPlanBudgetHead,
.creatorPlanBudgetRow {
  display: grid;
  grid-template-columns: 1.15fr .8fr .76fr .84fr 1.1fr;
  min-width: 680px;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-dark);
  font-size: 13px;
}

.creatorPlanBudgetHead {
  background: var(--surface-dark);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
}

.creatorPlanBudgetRow:last-child {
  border-bottom: 0;
}

.creatorPlanBudgetRow strong {
  color: var(--text-1);
}

.creatorPlanBudgetRow > span {
  color: var(--text-2);
}

.creatorPlanBudgetRow label {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-dark);
}

.creatorPlanBudgetRow input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  padding: 6px 2px 6px 8px;
  font: inherit;
}

.creatorPlanBudgetRow label b {
  padding: 0 8px 0 2px;
  color: var(--text-3);
  font-size: 12px;
}

.creatorPlanBudgetCard footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: var(--text-3);
  font-size: 12px;
}

.creatorPlanBudgetCard footer span:first-child {
  color: var(--text-1);
  font-weight: 750;
}

.creatorPlanLoading,
.creatorPlanEmpty {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 24px;
  color: var(--text-3);
  text-align: center;
}

.creatorPlanLoading {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  place-items: start;
  min-height: 120px;
  text-align: left;
}

.creatorPlanLoading > svg {
  color: var(--primary);
  animation: creatorPlanSpin 1s linear infinite;
}

.creatorPlanLoading strong,
.creatorPlanEmpty strong {
  display: block;
  color: var(--text-1);
  font-size: 14px;
}

.creatorPlanLoading p,
.creatorPlanEmpty p {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

.creatorPlanEmpty > svg {
  margin-bottom: 8px;
  color: var(--primary);
}

.creatorPlanEmpty.compact {
  min-height: 150px;
}

.creatorPlanError {
  margin: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--line-dark));
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-panel));
  color: var(--danger);
  font-size: 13px;
  line-height: 1.6;
}

.creatorPlanOverview {
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.72;
}

.creatorPlanInsightGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.creatorPlanInsightGrid article {
  padding: 13px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-dark);
}

.creatorPlanInsightGrid ul {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding-left: 17px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}

.creatorPlanStrategyCard details {
  margin-top: 14px;
  border-top: 1px solid var(--line-dark);
  padding-top: 12px;
}

.creatorPlanStrategyCard summary {
  color: var(--text-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
}

.creatorPlanStrategyCard pre {
  overflow: auto;
  max-height: 330px;
  margin: 12px 0 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-dark);
  color: var(--text-2);
  font: 12px/1.7 var(--font-sans, system-ui, sans-serif);
  white-space: pre-wrap;
}

.creatorPlanCandidateActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.creatorPlanCandidateActions button,
.creatorPlanCandidateActions a {
  padding: 0 10px;
  border: 1px solid var(--line-dark);
  background: var(--surface-dark);
  color: var(--text-2);
  cursor: pointer;
}

.creatorPlanCandidateActions a {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary);
}

.creatorPlanCandidates {
  overflow: auto;
  border: 1px solid var(--line-dark);
  border-radius: 9px;
}

.creatorPlanCandidateHead,
.creatorPlanCandidates article {
  display: grid;
  grid-template-columns: 1.05fr 1.55fr .7fr .6fr .9fr;
  min-width: 850px;
  gap: 13px;
  align-items: center;
  padding: 12px 13px;
  border-bottom: 1px solid var(--line-dark);
}

.creatorPlanCandidateHead {
  background: var(--surface-dark);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
}

.creatorPlanCandidates article:last-child {
  border-bottom: 0;
}

.creatorPlanCreator {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.creatorPlanCreator > span {
  display: grid;
  flex: 0 0 auto;
  width: 35px;
  height: 35px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 850;
}

.creatorPlanCreator img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorPlanCreator div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.creatorPlanCreator strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorPlanCreator em {
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorPlanCandidates article > p {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
}

.creatorPlanCandidates article > span {
  display: grid;
  gap: 3px;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 700;
}

.creatorPlanCandidates article > span small {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 650;
}

.creatorPlanCandidates article > div:last-child {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.creatorPlanCandidates article > div:last-child a,
.creatorPlanCandidates article > div:last-child button {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-dark);
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 28px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.creatorPlanCandidates article > div:last-child button.selected {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary);
}

.creatorPlanSelectionBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--text-1);
  font-size: 13px;
}

.creatorPlanSelectionBar b {
  color: var(--primary);
}

.creatorPlanSelectionBar a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

@keyframes creatorPlanSpin { to { transform: rotate(360deg); } }

@media (max-width: 1120px) {
  .creatorPlanWorkspace { grid-template-columns: 300px minmax(0, 1fr); }
}

@media (max-width: 1120px) {
  .creatorPlanKpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .creatorPlanPage { width: min(100% - 24px, 1480px); padding-top: 16px; }
}

@media (max-width: 860px) {
  .creatorPlanHeader { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 860px) {
  .creatorPlanHeaderActions { width: 100%; justify-content: space-between; }
}

@media (max-width: 860px) {
  .creatorPlanWorkspace { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .creatorPlanConfig { position: static; }
}

@media (max-width: 560px) {
  .creatorPlanHeaderActions { align-items: stretch; flex-direction: column; }
}

@media (max-width: 560px) {
  .creatorPlanPrimary { width: 100%; }
}

@media (max-width: 560px) {
  .creatorPlanFieldGrid,
  .creatorPlanInsightGrid,
  .creatorPlanKpis { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .creatorPlanCard { padding: 14px; }
}

@media (max-width: 560px) {
  .creatorPlanCardHead { flex-direction: column; }
}

@media (max-width: 560px) {
  .creatorPlanCandidateActions { width: 100%; justify-content: stretch; }
}

@media (max-width: 560px) {
  .creatorPlanCandidateActions a,
  .creatorPlanCandidateActions button { flex: 1 1; }
}

@media (max-width: 560px) {
  .creatorPlanBudgetCard footer,
  .creatorPlanSelectionBar { align-items: flex-start; flex-direction: column; }
}

.creatorPlanCancel {
  min-height: 38px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 0 13px;
}

.creatorPlanCancel:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.creatorPlanError {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.creatorPlanError p {
  margin: 0;
}

.creatorPlanError button {
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--line-dark));
  border-radius: 7px;
  background: var(--surface-panel);
  color: var(--danger);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 0 10px;
}

.creatorPlanSecondary,
.creatorPlanLoading button,
.creatorPlanNotice button,
.creatorPlanError button {
  min-height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--surface-dark);
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.creatorPlanLoading button {
  margin-top: 10px;
}

.creatorPlanNotice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, #d97706 38%, var(--line-dark));
  border-radius: 8px;
  background: color-mix(in srgb, #d97706 8%, var(--surface-panel));
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}

.creatorPlanNotice p,
.creatorPlanInsightGrid article > p {
  margin: 0;
}

.creatorPlanStructuredTiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.creatorPlanStructuredTiers article {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-dark);
}

.creatorPlanStructuredTiers span,
.creatorPlanStructuredTiers p,
.creatorPlanStructuredTiers em {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .creatorPlanStructuredTiers { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .creatorPlanNotice { align-items: stretch; flex-direction: column; }
}

.creatorFlowPage {
  width: min(100% - 48px, 1440px);
  min-height: calc(100vh - 78px);
  margin: 0 auto;
  padding: 30px 0 96px;
  color: var(--text-1);
}

.creatorFlowPage:not(.hasResults) {
  width: min(100% - 48px, 1120px);
  padding-top: 54px;
}

.creatorFlowHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}

.creatorFlowHeader > div:first-child {
  min-width: 0;
}

.creatorFlowHeader a,
.creatorFlowHeader > div:first-child > span {
  display: inline-flex;
  margin-right: 14px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.creatorFlowHeader > div:first-child > span {
  color: var(--brand-primary);
}

.creatorFlowHeader h1 {
  max-width: 900px;
  margin: 12px 0 8px;
  overflow: hidden;
  color: var(--text-1);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorFlowPage.hasResults .creatorFlowHeader h1 {
  font-size: 30px;
}

.creatorFlowHeader p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}

.creatorFlowHeaderActions,
.creatorFlowSectionHead > div:last-child,
.creatorFlowRowActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.creatorFlowHeaderActions button,
.creatorFlowSectionHead button,
.creatorFlowSectionHead a,
.creatorFlowSelection button,
.creatorFlowDrawer footer button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  padding: 0 14px;
  background: var(--surface-panel);
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.creatorFlowHeaderActions button.primary,
.creatorFlowSelection button,
.creatorFlowDrawer footer button.primary {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #fff;
}

.creatorFlowPrompt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  min-height: 62px;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 30%, var(--line-dark));
  border-radius: 8px;
  padding: 7px 7px 7px 18px;
  background: var(--surface-panel);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.creatorFlowPage:not(.hasResults) .creatorFlowPrompt {
  min-height: 70px;
  margin-top: 34px;
}

.creatorFlowPrompt > svg {
  color: var(--text-2);
}

.creatorFlowPrompt input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  font-size: 16px;
}

.creatorFlowPrompt input::placeholder {
  color: var(--text-3);
}

.creatorFlowPrompt button {
  border: 0;
  font: inherit;
}

.creatorFlowPrompt button.icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.creatorFlowPrompt button.generate {
  display: inline-flex;
  min-width: 158px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 7px;
  padding: 0 18px;
  background: var(--brand-primary);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 850;
}

.creatorFlowPrompt button:disabled,
.creatorFlowSelection button:disabled,
.creatorFlowDrawer button:disabled,
.creatorFlowSectionHead button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.creatorFlowMessage {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #0f766e 34%, var(--line-dark));
  border-radius: 7px;
  background: color-mix(in srgb, #0f766e 7%, var(--surface-panel));
  color: var(--text-2);
  font-size: 13px;
}

.creatorFlowMessage.error {
  border-color: color-mix(in srgb, var(--danger) 36%, var(--line-dark));
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-panel));
  color: var(--danger);
}

.creatorFlowStart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
  gap: 56px;
  margin-top: 80px;
  padding-top: 30px;
  border-top: 1px solid var(--line-dark);
}

.creatorFlowStart > div:first-child > span,
.creatorFlowSectionHead > div > span,
.creatorFlowProduct > div:nth-child(2) > span,
.creatorFlowStrategy summary > div:first-child > span,
.creatorFlowStrategyBody article > span,
.creatorFlowDrawer header span {
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 850;
}

.creatorFlowStart h2 {
  margin: 8px 0;
  font-size: 23px;
  letter-spacing: 0;
}

.creatorFlowStart p {
  max-width: 540px;
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
}

.creatorFlowRecent {
  display: grid;
  gap: 0;
}

.creatorFlowRecent > div {
  display: flex;
  justify-content: space-between;
  padding: 0 2px 10px;
  color: var(--text-2);
  font-size: 12px;
}

.creatorFlowRecent > div strong {
  color: var(--text-1);
  font-size: 14px;
}

.creatorFlowRecent button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  border: 0;
  border-top: 1px solid var(--line-dark);
  padding: 0 2px;
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.creatorFlowRecent button span {
  overflow: hidden;
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorFlowRecent button small {
  color: var(--text-3);
  font-size: 11px;
}

.creatorFlowResults {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.creatorFlowProduct {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.creatorFlowProductImage {
  display: grid;
  width: 48px;
  height: 48px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: var(--surface-dark);
  color: var(--text-2);
}

.creatorFlowProductImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorFlowProduct strong,
.creatorFlowProduct p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorFlowProduct strong {
  margin-top: 3px;
  font-size: 14px;
}

.creatorFlowProduct p {
  margin: 3px 0 0;
  color: var(--text-2);
  font-size: 12px;
}

.creatorFlowProduct em {
  border-radius: 999px;
  padding: 6px 9px;
  background: color-mix(in srgb, #0f766e 10%, var(--surface-dark));
  color: #0f766e;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.creatorFlowCandidates,
.creatorFlowStrategy {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--surface-panel);
}

.creatorFlowSectionHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 16px;
}

.creatorFlowSectionHead h2 {
  margin: 5px 0 3px;
  font-size: 20px;
  letter-spacing: 0;
}

.creatorFlowSectionHead p {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
}

.creatorFlowTable {
  border-top: 1px solid var(--line-dark);
}

.creatorFlowTableHead,
.creatorFlowTable article {
  display: grid;
  grid-template-columns: 44px minmax(190px, 1.15fr) minmax(220px, 1.35fr) minmax(120px, 0.75fr) minmax(125px, 0.75fr) 100px;
  align-items: center;
  gap: 14px;
}

.creatorFlowTableHead {
  min-height: 42px;
  padding: 0 20px;
  background: var(--surface-dark);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
}

.creatorFlowTable article {
  min-height: 78px;
  border-top: 1px solid var(--line-dark);
  padding: 10px 20px;
  transition: background 120ms ease;
}

.creatorFlowTable article:first-of-type {
  border-top: 0;
}

.creatorFlowTable article.selected {
  background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface-panel));
}

.creatorFlowTable article > label {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  cursor: pointer;
}

.creatorFlowTable article > label input {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: var(--surface-panel);
  box-shadow: none;
  cursor: pointer;
}

.creatorFlowTable article > label input:checked {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  box-shadow: inset 0 0 0 3px var(--surface-panel);
}

.creatorFlowCreator {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.creatorFlowCreator > div {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  overflow: hidden;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary) 13%, var(--surface-dark));
  color: var(--brand-primary);
  font-size: 14px;
  font-weight: 850;
}

.creatorFlowCreator img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creatorFlowCreator > span {
  min-width: 0;
}

.creatorFlowCreator strong,
.creatorFlowCreator small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorFlowCreator strong {
  font-size: 13px;
}

.creatorFlowCreator small,
.creatorFlowMetric small {
  margin-top: 4px;
  color: var(--text-3);
  font-size: 11px;
}

.creatorFlowTable article > p {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.5;
}

.creatorFlowMetric strong,
.creatorFlowMetric small {
  display: block;
}

.creatorFlowMetric strong {
  font-size: 13px;
}

.creatorFlowRowActions {
  justify-content: flex-end;
}

.creatorFlowRowActions button,
.creatorFlowRowActions a {
  display: inline-grid;
  min-width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-panel);
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.creatorFlowRowActions a {
  padding: 0 9px;
}

.creatorFlowRowActions button.favorited {
  border-color: color-mix(in srgb, #dc2626 35%, var(--line-dark));
  color: #dc2626;
}

.creatorFlowLoading,
.creatorFlowEmpty {
  display: grid;
  min-height: 270px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border-top: 1px solid var(--line-dark);
  color: var(--text-2);
  text-align: center;
}

.creatorFlowLoading > svg {
  animation: creatorPlanSpin 1s linear infinite;
  color: var(--brand-primary);
}

.creatorFlowLoading span,
.creatorFlowEmpty p {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
}

.creatorFlowLoading button {
  margin-top: 6px;
  border: 0;
  background: transparent;
  color: var(--brand-primary);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.creatorFlowStrategy {
  overflow: hidden;
}

.creatorFlowStrategy summary {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 22px;
  cursor: pointer;
  list-style: none;
}

.creatorFlowStrategy summary::-webkit-details-marker {
  display: none;
}

.creatorFlowStrategy summary > div:first-child {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.creatorFlowStrategy summary > div:first-child strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorFlowStrategy summary > div:last-child {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.creatorFlowStrategy summary em {
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--text-2);
  font-size: 11px;
  font-style: normal;
}

.creatorFlowStrategy[open] summary svg {
  transform: rotate(180deg);
}

.creatorFlowStrategyBody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}

.creatorFlowStrategyBody article {
  min-width: 0;
  padding: 18px 22px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.creatorFlowStrategyBody article:nth-child(2n) {
  border-right: 0;
}

.creatorFlowStrategyBody article:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.creatorFlowStrategyBody ul {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
}

.creatorFlowStrategyBody article p {
  margin: 10px 0 0;
}

.creatorFlowStrategyBody article p strong,
.creatorFlowStrategyBody article p small {
  display: block;
}

.creatorFlowStrategyBody article p strong {
  font-size: 12px;
}

.creatorFlowStrategyBody article p small {
  margin-top: 3px;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.5;
}

.creatorFlowSelection {
  position: sticky;
  z-index: 20;
  bottom: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: min(100%, 900px);
  min-height: 64px;
  margin: 20px auto 0;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 26%, var(--line-dark));
  border-radius: 8px;
  padding: 9px 10px 9px 18px;
  background: color-mix(in srgb, var(--surface-panel) 94%, transparent);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.creatorFlowSelection span {
  font-size: 13px;
  font-weight: 750;
}

.creatorFlowSelection b {
  color: var(--brand-primary);
  font-size: 17px;
}

.creatorFlowSelection p {
  overflow: hidden;
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creatorFlowDrawerLayer {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.38);
}

.creatorFlowDrawer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(460px, 100vw);
  height: 100%;
  border-left: 1px solid var(--line-dark);
  background: var(--surface-panel);
  box-shadow: -18px 0 48px rgba(15, 23, 42, 0.18);
}

.creatorFlowDrawer header,
.creatorFlowDrawer footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-dark);
}

.creatorFlowDrawer header h2 {
  margin: 4px 0 0;
  font-size: 18px;
  letter-spacing: 0;
}

.creatorFlowDrawer header button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: var(--surface-dark);
  color: var(--text-2);
  cursor: pointer;
}

.creatorFlowDrawerBody {
  display: grid;
  align-content: start;
  gap: 15px;
  overflow-y: auto;
  padding: 20px;
}

.creatorFlowDrawerBody > label,
.creatorFlowDrawerGrid label,
.creatorFlowDrawer fieldset > label {
  display: grid;
  gap: 7px;
}

.creatorFlowDrawerBody label > span,
.creatorFlowDrawer legend {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 750;
}

.creatorFlowDrawer input,
.creatorFlowDrawer select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  padding: 0 11px;
  outline: 0;
  background: var(--surface-dark);
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
}

.creatorFlowDrawer input:focus,
.creatorFlowDrawer select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

.creatorFlowDrawerGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.creatorFlowDrawer fieldset {
  display: grid;
  gap: 10px;
  margin: 0;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  padding: 14px;
}

.creatorFlowDrawer fieldset > label {
  grid-template-columns: minmax(0, 1fr) 94px;
  align-items: center;
}

.creatorFlowDrawer fieldset > label > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
}

.creatorFlowDrawer fieldset > label input {
  min-height: 36px;
}

.creatorFlowDrawer fieldset b {
  color: var(--text-2);
  font-size: 12px;
  text-align: right;
}

.creatorFlowDrawer fieldset p {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.creatorFlowDrawer fieldset p.valid {
  color: #0f766e;
}

.creatorFlowDrawer fieldset p.invalid {
  color: var(--danger);
}

.creatorFlowDrawer footer {
  justify-content: flex-end;
  border-top: 1px solid var(--line-dark);
  border-bottom: 0;
}

@media (max-width: 1120px) {
  .creatorFlowTableHead,
  .creatorFlowTable article {
    grid-template-columns: 38px minmax(170px, 1.1fr) minmax(190px, 1.2fr) 110px 90px;
  }
}

@media (max-width: 1120px) {

  .creatorFlowTableHead > span:nth-child(5),
  .creatorFlowTable article > .creatorFlowMetric:nth-child(5) {
    display: none;
  }
}

@media (max-width: 820px) {
  .creatorFlowPage,
  .creatorFlowPage:not(.hasResults) {
    width: min(100% - 24px, 720px);
    padding-top: 20px;
  }
}

@media (max-width: 820px) {

  .creatorFlowHeader {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 820px) {

  .creatorFlowHeader h1,
  .creatorFlowPage.hasResults .creatorFlowHeader h1 {
    font-size: 26px;
    white-space: normal;
  }
}

@media (max-width: 820px) {

  .creatorFlowHeaderActions {
    width: 100%;
  }
}

@media (max-width: 820px) {

  .creatorFlowHeaderActions button {
    flex: 1 1;
  }
}

@media (max-width: 820px) {

  .creatorFlowPrompt {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

@media (max-width: 820px) {

  .creatorFlowPrompt button.generate {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 820px) {

  .creatorFlowStart {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 48px;
  }
}

@media (max-width: 820px) {

  .creatorFlowSectionHead {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 820px) {

  .creatorFlowTableHead {
    display: none;
  }
}

@media (max-width: 820px) {

  .creatorFlowTable article {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 0;
    padding: 14px;
  }
}

@media (max-width: 820px) {

  .creatorFlowTable article > p {
    grid-column: 2 / -1;
  }
}

@media (max-width: 820px) {

  .creatorFlowTable article > .creatorFlowMetric {
    grid-column: 2;
  }
}

@media (max-width: 820px) {

  .creatorFlowRowActions {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 820px) {

  .creatorFlowStrategy summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 820px) {

  .creatorFlowStrategyBody {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {

  .creatorFlowStrategyBody article,
  .creatorFlowStrategyBody article:nth-child(2n),
  .creatorFlowStrategyBody article:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }
}

@media (max-width: 820px) {

  .creatorFlowStrategyBody article:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 820px) {

  .creatorFlowSelection {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-width: 820px) {

  .creatorFlowSelection p {
    display: none;
  }
}

@media (max-width: 520px) {
  .creatorFlowProduct {
    grid-template-columns: 44px minmax(0, 1fr);
  }
}

@media (max-width: 520px) {

  .creatorFlowProduct em {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 520px) {

  .creatorFlowSectionHead > div:last-child {
    width: 100%;
  }
}

@media (max-width: 520px) {

  .creatorFlowSectionHead button,
  .creatorFlowSectionHead a {
    flex: 1 1;
  }
}

@media (max-width: 520px) {

  .creatorFlowDrawerGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {

  .creatorFlowSelection {
    bottom: 8px;
    gap: 8px;
    padding-left: 12px;
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/favorites.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Rules integrated from the ChatBI/Agent member branch. */
.favoriteSearchInput {
  min-width: 0;
  flex: 1 1 auto;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-1);
  padding: 0;
}

.creatorFavoriteAction.active {
  border-color: var(--creator-accent);
  background: var(--creator-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--creator-accent) 24%, transparent);
  animation: favoritePulse 320ms ease-out;
}

.favoriteGroupBar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--row-line);
  padding: 2px 0 12px;
}

.favoriteGroupTabs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.favoriteGroupTabs button,
.favoriteGroupCreate,
.favoriteGroupActions > button,
.favoriteGroupEditor button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
  cursor: pointer;
}

.favoriteGroupTabs button {
  padding: 0 10px;
}

.favoriteGroupTabs button:hover,
.favoriteGroupActions > button:hover,
.favoriteGroupEditor button:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--row-line));
  color: #111827;
}

.favoriteGroupTabs button.active {
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--text-1);
}

.favoriteGroupTabs button b {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-panel-hover) 82%, transparent);
  color: var(--text-3);
  font-size: 10px;
}

.favoriteGroupActions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.favoriteGroupActions > button {
  width: 34px;
  padding: 0;
}

.favoriteGroupActions > button.favoriteGroupCreate {
  width: auto;
  padding: 0 11px;
}

.favoriteGroupActions > button.danger:hover {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--row-line));
  color: var(--danger);
}

.favoriteGroupActions button:disabled,
.favoriteGroupEditor button:disabled {
  opacity: 0.5;
  cursor: wait;
}

.favoriteGroupEditor {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--row-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel-hover) 56%, transparent);
}

.favoriteGroupEditor .cuiInput,
.favoriteGroupEditor input {
  width: min(320px, 100%);
}

.favoriteGroupEditor button {
  padding: 0 12px;
}

.favoriteGroupError {
  margin: -2px 0 0;
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
}

.favoriteRowGroupSelect {
  width: 124px;
}

@media (max-width: 760px) {
  .favoriteGroupBar {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 760px) {

  .favoriteGroupActions {
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {

  .favoriteGroupEditor {
    align-items: stretch;
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {

  .favoriteGroupEditor .cuiInput,
  .favoriteGroupEditor input {
    width: 100%;
    flex: 1 0 100%;
  }
}

.creatorFavoriteAction.active {
  border-color: var(--creator-accent);
  background: var(--creator-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--creator-accent) 24%, transparent);
  animation: favoritePulse 320ms ease-out;
}

.favoriteTableTags .favoriteTableRegion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 26px;
  padding: 0;
}

.favoriteTableRegion img {
  width: 18px;
  height: 12px;
  flex: 0 0 18px;
  border: 1px solid color-mix(in srgb, var(--row-line) 75%, transparent);
  border-radius: 2px;
  object-fit: cover;
}

.favoriteTableRegion span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/billing.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.teamBillingShell {
  /* Local pricing tokens are scoped to Billing and adapt through Compass theme tokens. */
  --bp-line: color-mix(in srgb, var(--cui-text) 9%, transparent);
  --bp-line-strong: color-mix(in srgb, var(--cui-text) 17%, transparent);
  --bp-wash: color-mix(in srgb, var(--cui-text) 4%, transparent);
  --bp-wash-strong: color-mix(in srgb, var(--cui-text) 7%, transparent);
  /* Brand-mark sky paired with --cui-primary, from public/brand/compass-mark.svg. */
  --bp-accent-2: #38bdf8;
  --bp-grad: linear-gradient(120deg, var(--bp-accent-2), var(--cui-primary));
  --bp-glow: 0 10px 30px color-mix(in srgb, var(--cui-primary) 32%, transparent);
  --bp-spot-color: color-mix(in srgb, var(--cui-primary) 62%, transparent);
  --bp-card-bg: var(--cui-surface-strong);
  --bp-card-hot-bg: color-mix(in srgb, var(--cui-primary) 5%, var(--cui-surface-strong));
  min-height: 100dvh;
  background: var(--cui-bg);
  color: var(--cui-text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.teamBillingStateShell {
  display: grid;
  place-items: center;
  padding: var(--cui-space-6);
}

.teamBillingStateShell > .workspaceStatePanel {
  width: min(720px, 100%);
}

.teamBillingShellHeader {
  position: sticky;
  z-index: var(--cui-z-sticky);
  top: 0;
  border-bottom: 1px solid var(--cui-line);
  background: color-mix(in srgb, var(--cui-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
}

.teamBillingTopbarInner {
  display: flex;
  width: min(calc(100% - 48px), 1240px);
  min-height: 68px;
  align-items: center;
  gap: 28px;
  margin-inline: auto;
}

.teamBillingBrand,
.teamBillingNav,
.teamBillingNav a,
.teamBillingTopbarSide,
.teamBillingTeamChip,
.teamBillingRegionChip,
.teamBillingAvatar,
.teamBillingPrimaryLink,
.teamBillingStateLink {
  display: inline-flex;
  align-items: center;
}

.teamBillingBrand {
  flex: 0 0 auto;
  gap: 11px;
  min-width: 0;
  color: var(--cui-text);
  text-decoration: none;
}

.teamBillingBrandMark {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--cui-primary) 34%, transparent));
}

.teamBillingBrand > span:last-child {
  display: grid;
  min-width: 0;
}

.teamBillingBrand strong,
.teamBillingBrand small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamBillingBrand strong {
  font-size: 16px;
  line-height: 1.25;
}

.teamBillingBrand small {
  color: var(--cui-text-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.teamBillingNav a:hover,
.teamBillingNav a:focus-visible {
  color: var(--cui-text);
}

.teamBillingNav {
  gap: 4px;
  margin-left: 12px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.teamBillingNav a {
  min-height: 36px;
  padding: 0 15px;
  border-radius: var(--cui-radius-full);
  color: var(--cui-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.teamBillingNav a.active {
  background: color-mix(in srgb, var(--cui-primary) 12%, transparent);
  color: var(--cui-primary);
}

.teamBillingTopbarSide {
  flex: 0 0 auto;
  gap: 14px;
  margin-left: auto;
}

.teamBillingRegionChip {
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-full);
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.teamBillingTeamChip {
  max-width: 180px;
  min-height: 34px;
  overflow: hidden;
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamBillingRegionChip i {
  width: 6px;
  height: 6px;
  border-radius: var(--cui-radius-full);
  background: var(--cui-success);
}

.teamBillingThemeToggle,
.teamBillingAvatar {
  width: 34px;
  height: 34px;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-full);
  background: transparent;
  color: var(--cui-text-muted);
}

.teamBillingThemeToggle {
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}

.teamBillingThemeToggle:disabled {
  cursor: default;
  opacity: 0.55;
}

.teamBillingThemeToggle:not(:disabled):hover,
.teamBillingThemeToggle:focus-visible,
.teamBillingAvatar:hover,
.teamBillingAvatar:focus-visible {
  border-color: var(--cui-line-strong);
  color: var(--cui-text);
}

.teamBillingAvatar {
  justify-content: center;
  background: color-mix(in srgb, var(--cui-text) 7%, transparent);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.teamBillingShellContent {
  width: min(calc(100% - 48px), 1240px);
  margin: 0 auto;
  padding: 44px 0 88px;
}

.teamBillingShellContent > .cuiResourcePage {
  min-width: 0;
}

.teamBillingPrimaryLink,
.teamBillingStateLink {
  justify-content: center;
  gap: var(--cui-space-2);
  min-height: var(--cui-control-md);
  padding: 0 var(--cui-space-4);
  border: 1px solid var(--cui-primary);
  border-radius: var(--cui-radius-sm);
  background: var(--cui-primary);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.teamBillingPrimaryLink:hover,
.teamBillingPrimaryLink:focus-visible,
.teamBillingStateLink:hover,
.teamBillingStateLink:focus-visible {
  border-color: var(--cui-primary-light);
  background: var(--cui-primary-light);
  color: #ffffff;
}

/* ===================================================================
   Billing overview - layout adapted from design/billing-prototype/index.html
   =================================================================== */
.teamBillingOverviewPage {
  gap: 28px;
}

.teamBillingOverviewPage > .cuiResourceHeader {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.teamBillingOverviewPage > .cuiResourceBody {
  display: grid;
  gap: 28px;
}

.teamBillingOverviewSkeleton {
  display: grid;
  min-width: 0;
  gap: 28px;
}

.teamBillingPlanSkeleton.cuiSkeletonBlock {
  min-height: 108px;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  padding: 26px 28px;
  border-color: var(--bp-line);
  background: var(--bp-card-bg);
}

.teamBillingPlanSkeleton .cuiSkeletonMedia {
  width: 56px;
  height: 56px;
}

.teamBillingMetricSkeletons.cuiSkeletonGrid {
  gap: 16px;
}

.teamBillingMetricSkeletons .cuiSkeletonBlock {
  min-height: 150px;
  padding: 20px 22px;
  border-color: var(--bp-line);
  background: var(--bp-card-bg);
}

.teamBillingTrendSkeleton.cuiSkeletonBlock {
  min-height: 338px;
  align-content: space-between;
  padding: 22px 24px;
  border-color: var(--bp-line);
  background: var(--bp-card-bg);
}

.teamBillingQuotaSkeletons .cuiSkeletonBlock {
  min-height: 120px;
  grid-template-columns: 86px minmax(0, 1fr);
  padding: 17px 20px;
  border-color: var(--bp-line);
  background: var(--bp-card-bg);
}

.teamBillingQuotaSkeletons .cuiSkeletonMedia {
  width: 86px;
  height: 86px;
  border-radius: var(--cui-radius-full);
}

.teamBillingTrendBodySkeleton.cuiSkeletonBlock {
  height: 100%;
  align-content: space-between;
  padding: 22px;
  border: 0;
  background: transparent;
}

.teamBillingRecentOrdersSkeleton {
  padding-block: 22px;
}

.teamBillingRecentOrdersSkeleton .cuiSkeletonTable,
.teamBillingRecentOrdersTableSkeleton.cuiSkeletonTable {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.teamBillingPlanBanner,
.teamBillingOverviewMetrics .cuiMetricCard,
.teamBillingOverviewTrend.cuiChartPanel,
.teamBillingQuotaCard,
.teamBillingRecentOrders {
  border: 1px solid var(--bp-line);
  border-radius: var(--cui-radius-md);
  background: var(--bp-card-bg);
}

.teamBillingPlanBanner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px 32px;
  padding: 26px 28px;
}

.teamBillingPlanBannerMain,
.teamBillingPlanTitleRow,
.teamBillingPlanSummary,
.teamBillingOverviewTableLink,
.teamBillingRecentOrders > header a,
.teamBillingTrendLegend {
  display: flex;
  align-items: center;
}

.teamBillingPlanBannerMain {
  min-width: 0;
  gap: 20px;
}

.teamBillingPlanMark {
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  place-items: center;
  border-radius: var(--cui-radius-md);
  background: var(--bp-grad);
  box-shadow: var(--bp-glow);
  color: #ffffff;
}

.teamBillingPlanIdentity {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.teamBillingPlanTitleRow {
  min-width: 0;
  flex-wrap: wrap;
  gap: 10px;
}

.teamBillingPlanTitleRow h2 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--cui-text);
  font-size: 21px;
  font-weight: 820;
  letter-spacing: 0;
  line-height: 1.25;
}

.teamBillingPlanIdentity > p {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 0;
  color: var(--cui-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.teamBillingPlanIdentity > p span {
  overflow-wrap: anywhere;
}

.teamBillingPlanIdentity > p span + span::before {
  margin-inline: 8px;
  color: var(--cui-text-soft);
  content: '\00b7';
}

.teamBillingPlanSummary {
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 22px;
}

.teamBillingPlanSummary > div {
  display: grid;
  min-width: 0;
  gap: 3px;
  text-align: right;
}

.teamBillingPlanSummary > div span {
  color: var(--cui-text-muted);
  font-size: 11px;
  font-weight: 700;
}

.teamBillingPlanSummary > div strong {
  color: var(--cui-text);
  font-size: 16px;
  font-weight: 820;
  overflow-wrap: anywhere;
}

.teamBillingPlanBanner .teamBillingPrimaryLink {
  min-height: 40px;
  padding-inline: 20px;
  border: 0;
  border-radius: var(--cui-radius-full);
  background: var(--bp-grad);
  box-shadow: var(--bp-glow);
}

.teamBillingChangeNotice {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--cui-warning) 30%, var(--bp-line));
  border-radius: var(--cui-radius-md);
  background: color-mix(in srgb, var(--cui-warning) 7%, var(--cui-surface));
  color: var(--cui-warning);
}

.teamBillingChangeNotice > div {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.teamBillingChangeNotice strong,
.teamBillingChangeNotice span {
  overflow-wrap: anywhere;
}

.teamBillingChangeNotice strong {
  color: var(--cui-text);
  font-size: 13px;
}

.teamBillingChangeNotice span {
  color: var(--cui-text-muted);
  font-size: 12px;
}

.teamBillingOverviewMetrics.cuiMetricGrid {
  align-items: stretch;
  gap: 16px;
}

.teamBillingOverviewMetrics .cuiMetricCard {
  min-height: 150px;
  gap: 10px;
  padding: 20px 22px;
}

.teamBillingOverviewMetrics .cuiMetricCardLabel {
  overflow: visible;
  color: var(--cui-text-muted);
  text-overflow: clip;
  white-space: normal;
}

.teamBillingOverviewMetrics .cuiMetricCardIcon {
  border: 0;
  background: var(--bp-wash-strong);
}

.teamBillingOverviewMetrics .cuiMetricCardValue {
  font-size: 34px;
  letter-spacing: 0;
}

.teamBillingOverviewMetrics .cuiMetricCardDescriptionText {
  overflow: visible;
  color: var(--cui-text-muted);
  text-overflow: clip;
  white-space: normal;
}

.teamBillingOverviewDataGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.85fr);
  gap: 18px;
}

.teamBillingOverviewDataGrid.withoutQuotas {
  grid-template-columns: minmax(0, 1fr);
}

.teamBillingOverviewTrend.cuiChartPanel {
  min-width: 0;
  gap: 16px;
  padding: 22px 24px;
}

.teamBillingOverviewTrend .cuiChartPanelTitle {
  font-size: 15px;
  font-weight: 760;
}

.teamBillingTrendLegend {
  gap: 7px;
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.teamBillingTrendLegend i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--cui-primary);
}

.teamBillingTrendChart {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.teamBillingTrendGrid line {
  stroke: var(--bp-line);
  stroke-width: 1;
}

.teamBillingTrendArea {
  fill: color-mix(in srgb, var(--cui-primary) 18%, transparent);
}

.teamBillingTrendLine {
  fill: none;
  stroke: var(--cui-primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.teamBillingTrendDot {
  fill: var(--cui-primary);
  stroke: var(--cui-surface);
  stroke-width: 3;
}

.teamBillingTrendAxis {
  fill: var(--cui-text-muted);
  font-family: inherit;
  font-size: 10px;
}

.teamBillingQuotaStack {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 14px;
}

.teamBillingQuotaCard {
  display: flex;
  min-width: 0;
  min-height: 120px;
  align-items: center;
  gap: 18px;
  padding: 17px 20px;
}

.teamBillingQuotaRing {
  position: relative;
  width: 86px;
  height: 86px;
  flex: 0 0 86px;
}

.teamBillingQuotaRing svg {
  display: block;
  width: 86px;
  height: 86px;
  transform: rotate(-90deg);
}

.teamBillingQuotaRing circle {
  stroke-width: 7;
}

.teamBillingQuotaTrack {
  stroke: var(--bp-wash-strong);
}

.teamBillingQuotaValue {
  stroke: var(--cui-primary);
  stroke-linecap: round;
}

.teamBillingQuotaCard.is-warning .teamBillingQuotaValue {
  stroke: var(--cui-warning);
}

.teamBillingQuotaCard.is-danger .teamBillingQuotaValue {
  stroke: var(--cui-danger);
}

.teamBillingQuotaRing > strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--cui-text);
  font-size: 15px;
  font-weight: 820;
}

.teamBillingQuotaCard.is-warning .teamBillingQuotaRing > strong {
  color: var(--cui-warning);
}

.teamBillingQuotaCard.is-danger .teamBillingQuotaRing > strong {
  color: var(--cui-danger);
}

.teamBillingQuotaMeta {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.teamBillingQuotaMeta > span,
.teamBillingQuotaMeta > small,
.teamBillingQuotaMeta strong,
.teamBillingQuotaMeta strong small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.teamBillingQuotaMeta > span {
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 680;
}

.teamBillingQuotaMeta strong {
  color: var(--cui-text);
  font-size: 21px;
  font-weight: 820;
  line-height: 1.25;
}

.teamBillingQuotaMeta strong small {
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.teamBillingQuotaMeta > small {
  color: var(--cui-text-soft);
  font-size: 11px;
}

.teamBillingRecentOrders {
  min-width: 0;
  padding: 22px 24px 10px;
}

.teamBillingRecentOrders > header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.teamBillingRecentOrders > header h2 {
  margin: 0;
  color: var(--cui-text);
  font-size: 15px;
  font-weight: 760;
  letter-spacing: 0;
}

.teamBillingRecentOrders > header a,
.teamBillingOverviewTableLink {
  gap: 4px;
  color: var(--cui-primary);
  font-size: 12px;
  font-weight: 740;
  text-decoration: none;
  white-space: nowrap;
}

.teamBillingRecentOrders > header a:hover,
.teamBillingRecentOrders > header a:focus-visible,
.teamBillingOverviewTableLink:hover,
.teamBillingOverviewTableLink:focus-visible {
  color: var(--cui-primary-light);
}

.teamBillingRecentOrdersTable.cuiTableWrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.teamBillingRecentOrdersTable .cuiTable {
  min-width: 920px;
  background: transparent;
}

.teamBillingRecentOrdersTable .cuiTable th {
  background: transparent;
  color: var(--cui-text-muted);
  font-size: 11px;
}

.teamBillingRecentOrdersTable .cuiTable th:first-child,
.teamBillingRecentOrdersTable .cuiTable td:first-child {
  padding-left: 0;
}

.teamBillingRecentOrdersTable .cuiTable th:last-child,
.teamBillingRecentOrdersTable .cuiTable td:last-child {
  padding-right: 0;
}

.teamBillingOrderNumber {
  color: var(--cui-text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.teamBillingOrderNumber:hover,
.teamBillingOrderNumber:focus-visible {
  color: var(--cui-primary);
  text-decoration: underline;
}

.teamBillingOrderDate {
  color: var(--cui-text-muted);
  font-size: 12px;
}

/* ===================================================================
   Products pricing page — ported from design/billing-prototype
   (pcard/pfeats naming kept for traceability; scoped to the shell)
   =================================================================== */

/* --- page header: prototype left title + right lead composition --- */
.ppPricingPage {
  gap: 28px;
}

.ppPricingPage .cuiResourceHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 22px;
  margin-bottom: 26px;
  text-align: left;
}

.ppPricingPage .cuiResourceTitleBlock {
  display: contents;
}

.ppPricingPage .cuiResourceBody {
  display: grid;
  gap: 28px;
}

.teamBillingShell .ppPricingPage .cuiResourceEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 5px 13px;
  border: 1px solid var(--bp-line);
  border-radius: var(--cui-radius-full);
  background: var(--bp-wash);
  color: var(--cui-text-muted);
  font-size: 12px;
  letter-spacing: 0;
}

.teamBillingShell .ppPricingPage .cuiResourceEyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--cui-radius-full);
  background: var(--cui-text-muted);
}

.teamBillingShell .ppPricingPage .cuiResourceTitle {
  max-width: 560px;
  font-size: 38px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.08;
  white-space: pre-line;
}

.teamBillingShell .ppPricingPage .cuiResourceDescription {
  max-width: 384px;
  margin: 0;
  color: var(--cui-text-muted);
  font-size: 14px;
  line-height: 1.7;
}

@media (min-width: 1024px) {
  .ppPricingPage .cuiResourceHeader {
    grid-template-columns: minmax(0, 560px) minmax(280px, 384px);
    justify-content: space-between;
    column-gap: 64px;
  }

  .teamBillingShell .ppPricingPage .cuiResourceEyebrow {
    grid-column: 1;
    grid-row: 1;
  }

  .teamBillingShell .ppPricingPage .cuiResourceTitle {
    grid-column: 1;
    grid-row: 2;
  }

  .teamBillingShell .ppPricingPage .cuiResourceDescription {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
  }
}

/* --- pricing prototype motion: viewport reveal + pointer-follow border --- */
.ppPricingPage .cuiResourceEyebrow,
.ppPricingPage .cuiResourceTitle,
.ppPricingPage .cuiResourceDescription,
.ppPricingPage .cuiResourceHeaderMeta,
.ppPricingPage [data-pricing-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--pp-reveal-delay, 0ms);
}

.ppPricingPage .ppPrototypeVisible {
  opacity: 1;
  transform: none;
}

/* --- geometry-matched loading skeletons --- */
.ppProductsSkeleton {
  display: grid;
  min-width: 0;
  gap: 28px;
}

.ppProductsCycleSkeleton.cuiSkeletonBlock {
  width: 220px;
  min-height: 50px;
  margin-inline: auto;
  padding: 10px 28px;
  border-color: var(--bp-line);
  border-radius: var(--cui-radius-full);
  background: var(--bp-wash);
}

.ppProductsCycleSkeleton .cuiSkeletonLine,
.ppProductsCycleSkeleton .cuiSkeletonLine.strong,
.ppProductsCycleSkeleton .cuiSkeletonLine.short {
  width: 100%;
}

.ppProductsCardSkeletons.cuiSkeletonGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.ppProductsCardSkeletons .cuiSkeletonBlock {
  width: 100%;
  max-width: 285px;
  min-height: 520px;
  flex: 0 1 285px;
  align-content: start;
  padding: 28px 26px;
  border-color: var(--bp-line);
  border-radius: 8px;
  background: var(--bp-card-bg);
  box-shadow:
    0 0 0 10px var(--cui-bg),
    0 0 0 11px var(--bp-line);
}

.ppProductsCardSkeletons .cuiSkeletonLines {
  gap: 28px;
}

.ppProductsCardSkeletons .cuiSkeletonLine {
  height: 12px;
}

.ppProductsCardSkeletons .cuiSkeletonLine.strong {
  width: 66%;
  height: 40px;
}

.ppProductsCardSkeletons .cuiSkeletonLine.short {
  width: 82%;
}

.ppProductsCompareSkeleton {
  display: grid;
  min-width: 0;
  gap: 20px;
  padding: 28px 30px 30px;
  border: 1px solid var(--bp-line);
  border-radius: 8px;
  background: var(--bp-card-bg);
}

.ppProductsCompareHeadingSkeleton.cuiSkeletonBlock {
  max-width: 320px;
  padding: 0;
  border: 0;
  background: transparent;
}

.ppProductsCompareSkeleton .cuiSkeletonTable {
  border-color: var(--bp-line);
  background: transparent;
}

@media (min-width: 1100px) {
  .ppProductsCardSkeletons .cuiSkeletonBlock {
    min-height: 650px;
    padding: 26px 22px;
  }
}

.ppAddonsCatalogSkeleton {
  display: grid;
  min-width: 0;
  gap: 32px;
}

.ppAddonsSkeletonSection,
.ppAddonsMarketingSkeletonSection {
  display: grid;
  min-width: 0;
  gap: 16px;
}

.ppAddonsHeadingSkeleton.cuiSkeletonBlock {
  max-width: 360px;
  padding: 0;
  border: 0;
  background: transparent;
}

.ppAddonPlanFilterSkeleton.cuiSkeletonBlock {
  min-height: 126px;
  padding: 18px 20px;
  border-color: var(--bp-line);
  background: var(--bp-card-bg);
}

.ppAddonsCardSkeletons.cuiSkeletonGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.ppAddonsCardSkeletons .cuiSkeletonBlock {
  width: 100%;
  min-height: 420px;
  align-content: start;
  padding: 22px 20px;
  border-color: var(--bp-line);
  border-radius: 4px;
  background: var(--bp-card-bg);
}

.ppAddonsCardSkeletons .cuiSkeletonLines {
  gap: 22px;
}

.ppAddonsCardSkeletons .cuiSkeletonLine.strong {
  width: 68%;
  height: 36px;
}

.ppAddonsOfferSkeletons .cuiSkeletonBlock {
  min-height: 86px;
  padding: 18px 20px;
  border-color: var(--bp-line);
  background: var(--bp-card-bg);
}

.ppAddonsOfferSkeletons .cuiSkeletonMedia {
  width: 44px;
  height: 44px;
  border-radius: var(--cui-radius-full);
}

/* --- billing-cycle switch (SegmentedControl skin) --- */
.ppCycleRow {
  display: flex;
  justify-content: center;
}

.ppCycleRow .cuiSegmented {
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--bp-line);
  border-radius: var(--cui-radius-full);
  background: var(--bp-wash);
}

.ppCycleRow .cuiSegmentedButton {
  min-height: 40px;
  padding: 0 26px;
  border-radius: var(--cui-radius-full);
  font-size: 13px;
  font-weight: 700;
}

.ppCycleRow .cuiSegmentedButton[aria-pressed='true'] {
  background: var(--bp-grad);
  box-shadow: var(--bp-glow);
  color: #ffffff;
}

.ppCycleLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ppCycleLabel small {
  color: var(--bp-accent-2);
  font-size: 11px;
  font-weight: 800;
}

.ppCycleRow .cuiSegmentedButton[aria-pressed='true'] .ppCycleLabel small {
  color: color-mix(in srgb, #ffffff 80%, transparent);
}

.ppCycleNote {
  margin-top: var(--cui-space-2);
  color: var(--cui-text-muted);
  font-size: 12px;
  text-align: center;
}

/* --- tier cards: stable card width with every incomplete row centered --- */
.pcards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.ppProductMotion {
  --pp-spot-x: -9999px;
  --pp-spot-y: -9999px;
  position: relative;
  display: flex;
  width: 100%;
  max-width: 285px;
  flex: 0 1 285px;
  justify-self: center;
  border-radius: 18px;
}

.ppProductMotion::after {
  position: absolute;
  z-index: 2;
  inset: -11px;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(
    circle 460px at calc(var(--pp-spot-x) + 11px) calc(var(--pp-spot-y) + 11px),
    var(--bp-spot-color),
    transparent 60%
  );
  content: '';
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.ppProductMotion > .pcard {
  max-width: none;
  flex: 1 1 auto;
}

.pcard {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 285px;
  flex: 0 1 285px;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  border: 1px solid var(--bp-line);
  border-radius: 8px;
  padding: 28px 26px;
  background: var(--bp-card-bg);
  box-shadow:
    0 0 0 10px var(--cui-bg),
    0 0 0 11px var(--bp-line);
  transition:
    border-color var(--cui-duration-base) ease,
    box-shadow var(--cui-duration-base) ease;
}

@media (min-width: 1100px) {
  .pcard {
    min-height: 650px;
    padding: 26px 22px;
  }
}

.pcard:hover {
  border-color: var(--bp-line-strong);
}

.pcard.hot {
  border-color: color-mix(in srgb, var(--cui-primary) 45%, var(--bp-line));
  background: var(--bp-card-hot-bg);
}

.pcard.selected {
  border-color: var(--cui-primary);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--cui-primary) 24%, var(--cui-bg)),
    0 0 0 10px var(--cui-bg),
    0 0 0 11px var(--cui-primary);
}

.pcard-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  max-width: calc(100% - 24px);
  transform: translateX(-50%);
  overflow: hidden;
  padding: 4px 13px;
  border: 1px solid var(--bp-line-strong);
  border-radius: var(--cui-radius-full);
  background: var(--cui-text);
  color: var(--cui-bg);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcard-eyebrow {
  color: var(--cui-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.pcard-div {
  margin-top: 12px;
  border-top: 1px solid var(--bp-line);
}

.pcard-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  row-gap: 4px;
  margin-top: 30px;
  min-width: 0;
}

.pcard-price .amt {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  overflow-wrap: anywhere;
}

.pcard-price .was {
  color: color-mix(in srgb, var(--cui-text) 40%, transparent);
  font-size: 16px;
  text-decoration: line-through;
}

.pcard-price .per {
  color: var(--cui-text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.pcard-desc {
  margin: 14px 0 0;
  color: var(--cui-text-muted);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.pcard-cta {
  display: grid;
  gap: var(--cui-space-2);
  margin-top: 24px;
}

.pbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--cui-radius-full);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--cui-duration-base) ease,
    transform var(--cui-duration-base) ease,
    border-color var(--cui-duration-base) ease;
}

.pbtn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.pbtn-primary {
  background: var(--cui-text);
  color: var(--cui-bg);
}

.pbtn-primary:not(:disabled):hover {
  transform: translateY(-1px);
}

.pbtn-secondary {
  border: 1px solid var(--bp-line);
  background: var(--bp-wash-strong);
  color: var(--cui-text);
}

.pbtn-secondary:not(:disabled):hover {
  background: var(--bp-wash);
  border-color: var(--bp-line-strong);
}

.pfeats {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.pfeats li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  color: var(--cui-text);
  font-size: 13px;
}

.pfeats li + li {
  border-top: 1px solid var(--bp-line);
}

.pfeats li.off {
  color: color-mix(in srgb, var(--cui-text) 42%, transparent);
}

.pfeats li > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pfeats li > strong {
  flex: 0 0 auto;
  margin-left: auto;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.pdot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--cui-radius-full);
  border: 1px solid var(--bp-line-strong);
  background: var(--bp-wash-strong);
  color: var(--cui-text);
}

.pfeats li.off .pdot {
  border-color: var(--bp-line);
  background: transparent;
  color: color-mix(in srgb, var(--cui-text) 42%, transparent);
}

.pcard-qty {
  display: grid;
  gap: var(--cui-space-2);
  margin-top: 16px;
  color: var(--cui-text-soft);
  font-size: 12px;
}

/* --- section shells shared by addons / compare / marketing --- */
.ppSection {
  display: grid;
  gap: var(--cui-space-4);
  min-width: 0;
}

.ppSectionHead {
  display: grid;
  gap: 4px;
}

.ppSectionHead h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ppSectionHead p {
  margin: 0;
  color: var(--cui-text-muted);
  font-size: 13px;
}

/* --- add-on products: compact specification cards, separate from plan tiers --- */
.ppAddonPlanPanel {
  display: grid;
  gap: var(--cui-space-8);
  min-width: 0;
}

.ppAddonProductsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  min-width: 0;
}

.ppAddonProductMotion {
  display: flex;
  min-width: 0;
}

.ppAddonProductCard {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 420px;
  flex-direction: column;
  border: 1px solid var(--bp-line);
  border-radius: 4px;
  background: var(--bp-card-bg);
  box-shadow: var(--cui-shadow-xs);
  transition:
    border-color var(--cui-duration-base) ease,
    box-shadow var(--cui-duration-base) ease,
    transform var(--cui-duration-base) ease;
}

.ppAddonProductCard:hover {
  border-color: var(--bp-line-strong);
  box-shadow: var(--cui-shadow-sm);
  transform: translateY(-2px);
}

.ppAddonProductCard.isSelected {
  border-color: var(--cui-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cui-primary) 16%, transparent);
}

.ppAddonProductCard.isRestricted {
  border-color: var(--cui-line-strong);
}

.ppAddonProductCardHeader {
  display: grid;
  gap: 12px;
  min-height: 122px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--bp-line);
}

.ppAddonProductCardHeader > div:first-child {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.ppAddonProductCardHeader h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--cui-text);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ppAddonProductCardHeader p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--cui-text-muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ppAddonProductCardTags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ppAddonProductCardTags .cuiTag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppAddonProductSpecs {
  display: grid;
  margin: 0;
  padding: 0 20px;
}

.ppAddonProductSpecs > div {
  display: grid;
  grid-template-columns: minmax(72px, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border-bottom: 1px solid var(--bp-line);
}

.ppAddonProductSpecs dt,
.ppAddonProductSpecs dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.ppAddonProductSpecs dt {
  color: var(--cui-text-muted);
  font-size: 12px;
}

.ppAddonProductSpecs dd {
  color: var(--cui-text);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

.ppAddonProductQuantityRow dd {
  display: flex;
  justify-content: flex-end;
}

.ppAddonProductQuantity {
  width: min(132px, 100%);
}

.ppAddonProductMore {
  margin: 10px 20px 0;
  color: var(--cui-text-muted);
  font-size: 12px;
}

.ppAddonProductFooter {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding: 18px 20px 20px;
}

.ppAddonProductPrice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  color: var(--cui-primary);
}

.ppAddonProductPrice.isActivity {
  color: var(--cui-danger);
}

.ppAddonProductPrice > span,
.ppAddonProductPrice > small {
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 500;
}

.ppAddonProductPrice > strong {
  min-width: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  overflow-wrap: anywhere;
}

.ppAddonProductListPrice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--cui-text-muted);
  font-size: 12px;
}

.ppAddonProductRestriction {
  margin: 0;
  color: var(--cui-warning-text, var(--cui-text-muted));
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ppAddonProductFooter .cuiButton {
  min-height: 40px;
  border-radius: 2px;
}

.ppCardShell {
  border: 1px solid var(--bp-line);
  border-radius: 16px;
  background: var(--bp-card-bg);
  padding: var(--cui-space-6);
  min-width: 0;
}

/* --- comparison table skin --- */
.ppCompare {
  gap: 0;
  padding: 28px 30px 30px;
  border: 1px solid var(--bp-line);
  border-radius: 8px;
  background: var(--bp-card-bg);
}

.ppCompare .ppSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ppCompare .ppSectionHead h2 {
  font-size: 16px;
}

.ppCompare .ppSectionHead p {
  font-size: 12px;
  text-align: right;
}

.ppCompare .ppCardShell {
  margin-top: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ppCompare .cuiTableWrap {
  overflow-x: auto;
}

.ppCompare .cuiTable th {
  font-weight: 700;
}

.ppCompare .cuiTable th,
.ppCompare .cuiTable td {
  padding: 15px 14px;
  overflow-wrap: anywhere;
}

.ppCompare .ppCompareHotColumn {
  background: color-mix(in srgb, var(--cui-primary) 10%, transparent);
  font-weight: 700;
}

.ppCompareCheck {
  display: inline-grid;
  place-items: center;
  color: var(--cui-success);
}

.ppFootnote {
  margin: 0;
  padding-top: 12px;
  color: var(--cui-text-muted);
  font-size: 12px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .ppPricingPage .cuiResourceEyebrow,
  .ppPricingPage .cuiResourceTitle,
  .ppPricingPage .cuiResourceDescription,
  .ppPricingPage .cuiResourceHeaderMeta,
  .ppPricingPage [data-pricing-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ppProductMotion::after {
    display: none;
  }
}

/* --- marketing offers --- */
.ppOffers {
  display: grid;
  gap: var(--cui-space-3);
}

.ppOffer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cui-space-4);
  min-width: 0;
  padding: var(--cui-space-4) var(--cui-space-5);
  border: 1px solid var(--bp-line);
  border-radius: 14px;
  background: var(--bp-wash);
}

.ppOfferInfo {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ppOfferInfo strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.ppOfferInfo span {
  color: var(--cui-text-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.ppOfferSide {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--cui-space-3);
}

/* --- sticky selection bar --- */
.ppBar {
  position: sticky;
  z-index: calc(var(--cui-z-sticky) - 1);
  bottom: var(--cui-space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--cui-space-4);
  padding: var(--cui-space-4) var(--cui-space-5);
  border: 1px solid var(--bp-line-strong);
  border-radius: 16px;
  background: color-mix(in srgb, var(--cui-surface-strong) 88%, transparent);
  box-shadow: var(--cui-shadow-md);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.ppBar > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ppBar > div span,
.ppBarNote {
  color: var(--cui-text-muted);
  font-size: 12px;
}

/* --- responsive --- */
@media (max-width: 920px) {
  .ppAddonProductsGrid,
  .ppAddonsCardSkeletons.cuiSkeletonGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ppBar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ppBar > .ppBarNote {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 560px) {
  .ppAddonProductsGrid,
  .ppAddonsCardSkeletons.cuiSkeletonGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ppAddonProductCard {
    min-height: 0;
  }

  .ppBar {
    position: static;
    grid-template-columns: minmax(0, 1fr);
  }

  .ppBar .cuiButton,
  .ppBar .pbtn {
    width: 100%;
  }

  .ppOffer {
    align-items: flex-start;
    flex-direction: column;
  }
}

.teamBillingCheckoutGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  align-items: start;
  gap: var(--cui-space-5);
  min-width: 0;
}

.ppAddonsPage > .cuiResourceHeader .cuiResourceTitle,
.teamBillingCheckoutPage > .cuiResourceHeader .cuiResourceTitle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.teamBillingCheckoutPage .cuiDataListItemTitle {
  color: var(--cui-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.teamBillingCheckoutPage .cuiDataListItemDescription {
  color: var(--cui-text-muted);
  font-size: 13px;
  letter-spacing: 0;
}

.teamBillingCheckoutMain,
.teamBillingCheckoutAside,
.teamBillingCheckoutPrimaryActions,
.teamBillingSuccessActions {
  display: grid;
  gap: var(--cui-space-4);
  min-width: 0;
}

.teamBillingCheckoutAside {
  position: sticky;
  top: 96px;
}

.teamBillingCheckoutItemActions {
  display: inline-grid;
  grid-template-columns: minmax(120px, 170px) var(--cui-control-md);
  align-items: center;
  gap: var(--cui-space-2);
}

.teamBillingCouponControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--cui-space-3);
}

.teamBillingCouponControls.hasAction {
  grid-template-columns: minmax(0, 1fr) auto;
}

.teamBillingMoneyBreakdown .cuiDescriptionsItem:last-child {
  padding-top: var(--cui-space-3);
  border-top: 1px solid var(--cui-line-strong);
  color: var(--cui-text);
  font-weight: 800;
}

.teamBillingQuoteAmountMotion {
  transition: opacity 160ms ease;
}

.teamBillingQuoteAmountMotion.isPending {
  opacity: 0.58;
}

.teamBillingQuoteAmountMotion .cuiDescriptionsValue {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.teamBillingQuoteAmountMotion .teamBillingMoneyValue {
  display: inline-block;
  transform-origin: right center;
  will-change: opacity, transform;
  animation: teamBillingQuoteAmountUpdate 440ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--team-billing-amount-order, 0) * 24ms);
}

@keyframes teamBillingQuoteAmountUpdate {
  0% {
    opacity: 0;
    transform: translateY(9px) scale(0.96);
    text-shadow: 0 0 0 transparent;
  }

  58% {
    opacity: 1;
    transform: translateY(-2px) scale(1.035);
    text-shadow: 0 0 16px color-mix(in srgb, var(--cui-primary) 44%, transparent);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    text-shadow: 0 0 0 transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .teamBillingQuoteAmountMotion .cuiDescriptionsValue {
    animation: none;
  }

  .teamBillingCheckoutAside .teamBillingQuoteAmountMotion,
  .teamBillingCheckoutAside .teamBillingQuoteAmountMotion.isPending {
    opacity: 1;
    transition: none;
  }

  .teamBillingCheckoutAside .teamBillingQuoteAmountMotion .teamBillingMoneyValue {
    animation: none;
    will-change: auto;
  }
}

.teamBillingQuoteExpiry {
  display: block;
  margin-top: var(--cui-space-3);
  color: var(--cui-text-muted);
  font-size: 12px;
}

.teamBillingEffectDetails {
  display: grid;
  gap: var(--cui-space-1);
  color: var(--cui-text-muted);
  font-size: 12px;
}

.teamBillingCheckoutSuccessPage {
  gap: var(--cui-space-5);
}

.teamBillingSuccessHero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--cui-space-4);
  overflow: hidden;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--cui-success) 34%, var(--cui-line));
  border-radius: var(--cui-radius-md);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cui-success) 13%, var(--cui-surface)) 0%,
    color-mix(in srgb, var(--cui-primary) 7%, var(--cui-surface)) 100%
  );
  box-shadow: 0 18px 44px color-mix(in srgb, var(--cui-success) 11%, transparent);
}

.teamBillingSuccessHero::after {
  position: absolute;
  right: -74px;
  bottom: -108px;
  width: 220px;
  height: 220px;
  border-radius: var(--cui-radius-full);
  background: color-mix(in srgb, var(--cui-primary) 9%, transparent);
  content: '';
  pointer-events: none;
}

.teamBillingSuccessIcon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cui-success) 42%, transparent);
  border-radius: 18px;
  background: var(--cui-success);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--cui-success) 24%, transparent);
  color: var(--cui-on-primary);
}

.teamBillingSuccessHeroContent {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.teamBillingSuccessHeroContent h2 {
  margin: 0;
  color: var(--cui-text);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 820;
  letter-spacing: -0.02em;
}

.teamBillingSuccessHeroContent p {
  margin: 0;
  max-width: 720px;
  margin-top: var(--cui-space-2);
  color: var(--cui-text-muted);
  font-size: 14px;
  line-height: 1.65;
}

.teamBillingSuccessGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  align-items: stretch;
  gap: var(--cui-space-5);
  min-width: 0;
}

.teamBillingSuccessQuantity {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding-inline: var(--cui-space-3);
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-full);
  background: var(--cui-surface-subtle);
  color: var(--cui-text);
  font-size: 12px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  white-space: nowrap;
}

.teamBillingSuccessOrderValue,
.teamBillingSuccessOrderNumber {
  overflow-wrap: anywhere;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.teamBillingCheckoutPrimaryActions {
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--cui-space-4);
}

.teamBillingSuccessActions {
  grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: start;
}

.teamBillingSuccessActions .teamBillingSecondaryLink {
  gap: var(--cui-space-2);
}

.teamBillingUsageFilters .cuiSearchFilterTop {
  display: grid;
  grid-template-columns: minmax(200px, 0.85fr) minmax(320px, 1.25fr) auto;
  align-items: end;
}

.teamBillingUsageFilters .cuiFormField,
.teamBillingUsageFilters .cuiFormItem {
  min-width: 0;
}

.teamBillingUsageFilters .cuiDateRangePicker,
.teamBillingUsageFilters .cuiDatePickerTrigger {
  width: 100%;
  min-width: 0;
}

.teamBillingUsageAdvancedGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cui-space-3);
  min-width: 0;
}

.teamBillingFilterActions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cui-space-2);
}

.teamBillingPageSizeSelect {
  width: min(170px, 100%);
}

.teamBillingTableActionMenu {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.teamBillingResourceTableSkeleton {
  display: grid;
  min-width: 0;
  overflow-x: auto;
}

.teamBillingResourceTableSkeleton .cuiSkeletonTable {
  min-width: 720px;
}

.teamBillingOrdersPage > .cuiResourceHeader,
.teamBillingUsagePage > .cuiResourceHeader {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.teamBillingOrdersPage > .cuiResourceBody {
  min-width: 0;
}

.teamBillingUsageSection {
  display: grid;
  gap: var(--cui-space-4);
  min-width: 0;
  padding-top: var(--cui-space-5);
  border-top: 1px solid var(--cui-line);
}

.teamBillingUsageSection:first-child {
  padding-top: 0;
  border-top: 0;
}

.teamBillingUsageSection > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cui-space-4);
}

.teamBillingUsageSection > header > div {
  display: grid;
  gap: var(--cui-space-1);
  min-width: 0;
}

.teamBillingUsageSection > header h2,
.teamBillingUsageSection > header p {
  margin: 0;
}

.teamBillingUsageSection > header h2 {
  color: var(--cui-text);
  font-size: 17px;
}

.teamBillingUsageSection > header p {
  max-width: 780px;
  color: var(--cui-text-muted);
  font-size: 13px;
  line-height: 1.6;
}

.teamBillingUsageMetrics.cuiMetricGrid {
  align-items: stretch;
}

.teamBillingUsageAnalytics {
  gap: var(--cui-space-4);
}

.teamBillingUsageAnalyticsHeader {
  align-items: center;
}

.teamBillingUsageAnalyticsHeader .cuiSegmented {
  display: flex;
  flex-direction: row;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  width: max-content;
}

.teamBillingUsageAnalyticsHeader .cuiSegmentedButton {
  flex: 0 0 auto;
}

.teamBillingUsageAnalyticsMetrics.cuiMetricGrid {
  align-items: stretch;
}

.teamBillingUsageAnalyticsChart.cuiChartPanel {
  min-width: 0;
  gap: var(--cui-space-3);
  padding: var(--cui-space-5);
}

.teamBillingUsageAnalyticsChart .cuiChartPanelTitle {
  font-size: 15px;
  font-weight: 760;
}

.teamBillingUsageAnalyticsMeta,
.teamBillingUsageAnalyticsUpdatedAt {
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.teamBillingUsageAnalyticsUpdatedAt {
  margin: 0;
}

.teamBillingAnalyticsTrendChart {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.teamBillingQuotaBatchList {
  display: grid;
  gap: var(--cui-space-4);
}

.billingQuotaBatchCard {
  min-width: 0;
  background: var(--cui-surface-strong);
}

.billingQuotaBatchCard.billingQuotaBatchCard--compact .cuiCardBody {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--cui-space-3);
  column-gap: var(--cui-space-6);
}

.billingQuotaBatchCard--compact .billingQuotaBatchBalance {
  align-self: center;
  grid-column: 1;
}

.billingQuotaBatchCard--compact .billingQuotaBatchBalance strong {
  font-size: 20px;
}

.billingQuotaBatchCard--compact .billingQuotaBatchDates {
  align-self: center;
  border-top: 0;
  grid-column: 2;
  padding-top: 0;
}

.billingQuotaBatchCard .cuiCardHeader {
  flex-wrap: wrap;
}

.billingQuotaBatchActions {
  display: inline-flex;
  align-items: center;
  gap: var(--cui-space-2);
}

.billingQuotaBatchTitle {
  min-width: 0;
  display: grid;
  gap: var(--cui-space-1);
}

.billingQuotaBatchTitle small,
.billingQuotaBatchBalance span,
.billingQuotaBatchMetrics dt,
.billingQuotaBatchDates dt {
  color: var(--cui-text-muted);
  font-weight: 700;
}

.billingQuotaBatchTitle small,
.billingQuotaBatchMetrics dt,
.billingQuotaBatchDates dt {
  font-size: 11px;
}

.billingQuotaBatchTitle strong {
  color: var(--cui-text);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.billingQuotaBatchCard .cuiCardBody {
  display: grid;
  gap: var(--cui-space-4);
}

.billingQuotaBatchBalance {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--cui-space-4);
}

.billingQuotaBatchBalance > div {
  min-width: 0;
  display: grid;
  gap: var(--cui-space-1);
}

.billingQuotaBatchBalance span {
  font-size: 12px;
}

.billingQuotaBatchBalance strong {
  color: var(--cui-text);
  font-size: 24px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.billingQuotaBatchBalance > strong {
  flex: 0 0 auto;
  color: var(--cui-success);
  font-size: 17px;
}

.billingQuotaBatchBalance strong small {
  color: var(--cui-text-muted);
  font-size: 14px;
}

.billingQuotaBatchMetrics,
.billingQuotaBatchDates {
  display: grid;
  gap: var(--cui-space-3);
  margin: 0;
}

.billingQuotaBatchMetrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.billingQuotaBatchDates {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: var(--cui-space-3);
  border-top: 1px solid var(--cui-line);
}

.billingQuotaBatchMetrics > div,
.billingQuotaBatchDates > div {
  min-width: 0;
  display: grid;
  gap: var(--cui-space-1);
}

.billingQuotaBatchMetrics dd,
.billingQuotaBatchDates dd {
  min-width: 0;
  margin: 0;
  color: var(--cui-text);
  font-size: 13px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.teamBillingQuotaBatchPagination {
  min-width: 0;
}

.teamBillingUsageSection .cuiResourceTable,
.teamBillingUsageSection .cuiTableWrap,
.teamBillingUsageSection .cuiDialogContent {
  min-width: 0;
}

.teamBillingUsageSection .cuiDataListTable,
.teamBillingUsageSection .cuiTableWrap {
  overflow-x: auto;
}

.teamBillingUsageSection .cuiDataListCell,
.teamBillingUsageSection .cuiTable td,
.teamBillingUsageSection .cuiTable th,
.teamBillingShell .cuiDialog .cuiDescriptionsValue {
  overflow-wrap: anywhere;
}

.teamBillingShell .cuiDialog .cuiTableWrap {
  margin-top: var(--cui-space-4);
  overflow-x: auto;
}

.teamBillingOrdersTabs .cuiTabsPanel {
  min-width: 0;
  padding-top: var(--cui-space-2);
}

.teamBillingOrdersTabs .cuiResourceTable,
.teamBillingOrdersTabs .cuiDataListTable {
  min-width: 0;
}

.teamBillingOrdersTabs .cuiDataListTable {
  overflow-x: auto;
}

.teamBillingOrdersTabs .cuiDataListCell {
  overflow-wrap: anywhere;
}

.teamBillingTableValueStack {
  display: grid;
  gap: var(--cui-space-1);
  min-width: 0;
}

.teamBillingTableValueStack > span {
  color: var(--cui-text-muted);
  font-size: 12px;
}

.teamBillingOrderMetrics.cuiMetricGrid {
  align-items: stretch;
}

.teamBillingOrderMetrics .cuiMetricCardValue {
  overflow-wrap: anywhere;
}

.teamBillingOrderDetailSkeleton {
  display: grid;
  gap: var(--cui-space-5);
  min-width: 0;
}

.teamBillingOrderDetailMetricSkeletons {
  align-items: stretch;
}

.teamBillingOrderDetailSummarySkeleton {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: var(--cui-space-5);
  min-width: 0;
}

.teamBillingOrderDetailSkeleton > .cuiSkeletonTable {
  min-width: 0;
}

.teamBillingOrderSummaryGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: start;
  gap: var(--cui-space-5);
  min-width: 0;
}

.teamBillingCopyValue {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cui-space-2);
  min-width: 0;
}

.teamBillingCopyValue > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.teamBillingCopyValue .cuiCopyButton {
  flex: 0 0 auto;
}

.teamBillingOrderItemDetails {
  padding: var(--cui-space-4);
  background: var(--cui-surface-subtle);
}

.teamBillingOrderItemDetails .cuiDescriptionsValue {
  overflow-wrap: anywhere;
}

.teamBillingShellContent > .cuiResourcePage > .cuiResourceBody > .cuiPanel {
  min-width: 0;
}

.teamBillingShellContent .cuiPanel .cuiTableWrap {
  overflow-x: auto;
}

.teamBillingSecondaryLink {
  display: inline-flex;
  min-height: var(--cui-control-md);
  align-items: center;
  justify-content: center;
  padding: 0 var(--cui-space-4);
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-sm);
  background: var(--cui-control-bg);
  color: var(--cui-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.teamBillingSecondaryLink:hover,
.teamBillingSecondaryLink:focus-visible {
  border-color: var(--cui-primary);
  color: var(--cui-primary);
}

@media (max-width: 920px) {
  .teamBillingTopbarInner {
    flex-wrap: wrap;
    gap: 12px;
    padding-block: 12px;
  }

  .teamBillingNav {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .teamBillingPlanBanner {
    grid-template-columns: minmax(0, 1fr);
  }

  .teamBillingPlanSummary {
    justify-content: space-between;
  }

  .teamBillingPlanSummary > div {
    text-align: left;
  }

  .teamBillingOverviewDataGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .teamBillingQuotaStack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .teamBillingQuotaSkeletons.cuiSkeletonStack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .teamBillingQuotaSkeletons .cuiSkeletonBlock {
    grid-template-columns: minmax(0, 1fr);
  }

  .teamBillingQuotaCard {
    align-items: flex-start;
    flex-direction: column;
  }

  .teamBillingCheckoutGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .teamBillingCheckoutSuccessPage .teamBillingSuccessGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .teamBillingCheckoutAside {
    position: static;
  }

  .teamBillingUsageFilters .cuiSearchFilterTop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .billingQuotaBatchMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .billingQuotaBatchCard.billingQuotaBatchCard--compact .cuiCardBody {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .billingQuotaBatchCard--compact .billingQuotaBatchBalance,
  .billingQuotaBatchCard--compact .billingQuotaBatchDates {
    grid-column: 1;
  }

  .billingQuotaBatchCard--compact .billingQuotaBatchDates {
    border-top: 1px solid var(--cui-line);
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--cui-space-3);
  }

  .billingQuotaBatchDates {
    grid-template-columns: minmax(0, 1fr);
  }

  .billingQuotaBatchBalance {
    align-items: start;
    flex-direction: column;
  }

  .teamBillingFilterActions {
    grid-column: 1 / -1;
  }

  .teamBillingOrderSummaryGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .teamBillingOrderDetailSummarySkeleton {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .teamBillingTopbarInner,
  .teamBillingShellContent {
    width: min(calc(100% - 32px), 1240px);
  }

  .teamBillingBrand small {
    display: none;
  }

  .teamBillingShellContent {
    padding: 32px 0 64px;
  }

  .teamBillingNav a {
    flex: 0 0 auto;
  }

  .teamBillingRegionChip {
    display: none;
  }

  .teamBillingTeamChip {
    max-width: 120px;
  }

  .teamBillingCheckoutSuccessPage .teamBillingSuccessHero {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
  }

  .teamBillingCheckoutSuccessPage .teamBillingSuccessIcon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .teamBillingShell .ppPricingPage .cuiResourceTitle {
    font-size: 32px;
  }

  .ppCycleRow .cuiSegmentedButton {
    padding-inline: 18px;
  }

  .pcard {
    max-width: none;
    flex-basis: 100%;
  }

  .ppProductMotion {
    max-width: none;
    flex-basis: 100%;
  }

  .ppProductsCardSkeletons .cuiSkeletonBlock {
    max-width: none;
    flex-basis: 100%;
  }

  .ppAddonsCardSkeletons .cuiSkeletonBlock {
    max-width: none;
    flex-basis: 100%;
  }

  .ppProductsCompareSkeleton {
    padding: 22px 18px;
  }

  .ppCompare {
    padding: 22px 18px;
  }

  .ppCompare .ppSectionHead {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .ppCompare .ppSectionHead p {
    text-align: left;
  }

  .teamBillingPlanBanner {
    gap: 20px;
    padding: 22px 20px;
  }

  .teamBillingPlanBannerMain,
  .teamBillingPlanSummary {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
  }

  .teamBillingPlanSummary {
    gap: 14px;
  }

  .teamBillingPlanSummary .teamBillingPrimaryLink {
    width: 100%;
  }

  .teamBillingOverviewMetrics.cuiMetricGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teamBillingMetricSkeletons.cuiSkeletonGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teamBillingOverviewMetrics .cuiMetricCard {
    min-height: 142px;
    padding: 18px;
  }

  .teamBillingQuotaStack {
    grid-template-columns: minmax(0, 1fr);
  }

  .teamBillingQuotaSkeletons.cuiSkeletonStack {
    grid-template-columns: minmax(0, 1fr);
  }

  .teamBillingQuotaSkeletons .cuiSkeletonBlock {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .teamBillingQuotaCard {
    align-items: center;
    flex-direction: row;
  }

  .teamBillingOverviewTrend.cuiChartPanel,
  .teamBillingRecentOrders {
    padding-inline: 18px;
  }

  .teamBillingRecentOrders > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .teamBillingCouponControls,
  .teamBillingSuccessActions {
    grid-template-columns: minmax(0, 1fr);
  }

  .teamBillingCheckoutItemActions {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) var(--cui-control-md);
  }

  .teamBillingUsageFilters {
    padding: var(--cui-space-4);
  }

  .teamBillingPageSizeSelect {
    width: 100%;
  }

  .teamBillingUsageFilters .cuiSearchFilterTop {
    grid-template-columns: minmax(0, 1fr);
  }

  .teamBillingUsageAdvancedGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .teamBillingFilterActions {
    grid-column: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teamBillingFilterActions .cuiButton {
    width: 100%;
  }

  .teamBillingFilterActions .teamBillingApplyFiltersButton {
    grid-column: 1 / -1;
  }

  .teamBillingUsageSection > header {
    flex-direction: column;
  }

  .teamBillingUsageAnalyticsHeader .cuiSegmented {
    width: 100%;
  }

  .teamBillingUsageAnalyticsHeader .cuiSegmentedButton {
    flex: 1 1;
    min-width: 0;
  }

  .teamBillingCopyValue {
    align-items: stretch;
    flex-direction: column;
  }

  .teamBillingCopyValue .cuiCopyButton {
    align-self: flex-start;
  }
}

/* ---------------------------------------------------------------------------
 * Team payment flow (W3D): positive-payable checkout renders server-owned
 * payment methods, attempt display (QR payload / redirect) and status polling.
 * All surfaces use --cui-* tokens so light/dark adapt.
 * ------------------------------------------------------------------------- */

.teamBillingPaymentFlow {
  display: grid;
  gap: var(--cui-space-4);
  min-width: 0;
}

.teamBillingPaymentSectionTitle {
  margin: 0;
  color: var(--cui-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.teamBillingPaymentSectionDescription {
  margin: 0;
  color: var(--cui-text-muted);
  font-size: 13px;
  line-height: 1.6;
}

.teamBillingPaymentMethods,
.teamBillingPaymentActive,
.teamBillingPaymentTerminal,
.teamBillingPaymentSuccess,
.teamBillingPaymentRedirect,
.teamBillingPaymentQr {
  display: grid;
  gap: var(--cui-space-3);
  min-width: 0;
}

.teamBillingPaymentPlatformList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cui-space-2);
}

.teamBillingPaymentPlatformList .cuiButton {
  justify-content: center;
  min-height: var(--cui-control-lg);
}

.teamBillingPaymentQrPayload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--cui-space-2);
  padding: var(--cui-space-3);
  border: 1px solid var(--cui-line-strong);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface-subtle);
}

.teamBillingPaymentQrPayloadValue {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--cui-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.teamBillingPaymentExpiry {
  display: block;
  color: var(--cui-text-muted);
  font-size: 12px;
  line-height: 1.6;
}

.teamBillingPaymentRedirectLink,
.teamBillingPaymentTextLink {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--cui-space-2);
  color: var(--cui-primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.teamBillingPaymentRedirectLink:hover,
.teamBillingPaymentTextLink:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.teamBillingPaymentPrimaryActions,
.teamBillingPaymentSecondaryActions,
.teamBillingPaymentSuccessLinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cui-space-3);
}

.teamBillingPaymentSuccess {
  justify-items: start;
}

.teamBillingPaymentSuccessIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cui-success) 14%, transparent);
  color: var(--cui-success);
}

.teamBillingPaymentExpiry + .teamBillingPaymentExpiry {
  margin-top: var(--cui-space-1);
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/notifications.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.messageCenterPage {
  --mc-accent: var(--brand-primary, #315efb);
  --mc-accent-soft: color-mix(in srgb, var(--mc-accent) 8%, var(--surface-panel, #fff));
  --mc-accent-line: color-mix(in srgb, var(--mc-accent) 26%, var(--border-subtle, #dfe4ee));
  --mc-surface: var(--surface-panel, #fff);
  --mc-surface-hover: color-mix(in srgb, var(--mc-accent) 2.5%, var(--surface-panel, #fff));
  --mc-line: var(--border-subtle, #dfe4ee);
  --mc-line-soft: color-mix(in srgb, var(--border-subtle, #dfe4ee) 64%, transparent);
  --mc-text: var(--text-1, #182033);
  --mc-muted: var(--text-2, #667085);
  --mc-subtle: var(--text-3, #98a2b3);
  --mc-danger: #d63d55;
  --mc-danger-soft: #fff0f2;
  --mc-warning: #b76a04;
  --mc-warning-soft: #fff7e8;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(100%, 1480px);
  height: calc(100dvh - 110px);
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  padding: 28px 32px 18px;
  overflow: hidden;
  color: var(--mc-text);
}

.appContent > .messageCenterPage {
  width: 100%;
  min-width: 0;
}

.messageCenterPage *,
.messageCenterPage *::before,
.messageCenterPage *::after {
  box-sizing: border-box;
}

.messageCenterPageHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 0 2px 17px;
  border-bottom: 1px solid var(--mc-line);
}

.messageCenterHeading h1,
.messageCenterHeading p,
.messageCenterItemMain p {
  margin: 0;
}

.messageCenterHeading h1 {
  position: relative;
  padding-left: 13px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
}

.messageCenterHeading h1::before {
  position: absolute;
  inset: 3px auto 3px 0;
  width: 3px;
  border-radius: 2px;
  background: var(--mc-accent);
  content: '';
}

.messageCenterHeading p {
  margin-top: 7px;
  color: var(--mc-muted);
  font-size: 12px;
  line-height: 1.6;
}

.messageCenterPanel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--mc-line);
  border-radius: 8px;
  background: var(--mc-surface);
  box-shadow: 0 2px 9px rgba(23, 31, 50, 0.035);
}

.messageCenterPanelHead {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 11px 19px;
  border-bottom: 1px solid var(--mc-line-soft);
}

.messageCenterToolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
  flex: 0 0 auto;
}

.messageCenterToolbar > .cuiSegmented {
  flex: 0 0 auto;
  min-width: max-content;
}

.messageCenterToolbar .messageCenterSearch {
  flex: 0 1 310px;
  min-width: 220px;
  width: min(310px, 30vw);
}

.messageCenterFilters {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 7px;
  min-width: 0;
}

.messageCenterFilters button {
  position: relative;
  min-width: 56px;
  height: 31px;
  padding: 0 11px;
  border: 1px solid var(--mc-line);
  border-radius: 6px;
  background: var(--mc-surface);
  color: var(--mc-muted);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}

.messageCenterFilters button:hover,
.messageCenterFilters button.active {
  border-color: var(--mc-accent-line);
  background: var(--mc-accent-soft);
  color: var(--mc-accent);
}

.messageCenterFilters em {
  margin-left: 6px;
  font-style: normal;
  opacity: 0.72;
}

.messageCenterFilters .isCritical em {
  color: var(--mc-danger);
  opacity: 1;
}

.messageCenterMoreTrigger {
  flex: 0 0 auto;
  height: 31px;
}

.messageCenterMoreOption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
}

.messageCenterMoreOption em {
  color: var(--mc-subtle);
  font-style: normal;
}

.messageCenterList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.messageCenterList > .cuiState {
  min-height: min(320px, 100%);
}

.messageCenterItem {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 16px 19px;
  border-bottom: 1px solid var(--mc-line-soft);
  background: var(--mc-surface);
  transition:
    background-color 150ms ease,
    opacity 150ms ease;
}

.messageCenterItem:last-child {
  border-bottom: 0;
}

.messageCenterItem:hover {
  background: var(--mc-surface-hover);
}

.messageCenterDot {
  align-self: start;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--mc-accent);
  box-shadow: 0 0 0 4px var(--mc-accent-soft);
}

.messageCenterItem[data-severity='critical'] .messageCenterDot {
  background: var(--mc-danger);
  box-shadow: 0 0 0 4px var(--mc-danger-soft);
}

.messageCenterItem[data-severity='warning'] .messageCenterDot {
  background: var(--mc-warning);
  box-shadow: 0 0 0 4px var(--mc-warning-soft);
}

.messageCenterItem.isRead .messageCenterDot {
  background: var(--mc-subtle);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mc-subtle) 10%, var(--mc-surface));
}

.messageCenterItemMain {
  min-width: 0;
}

.messageCenterItem > .messageCenterItemActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  grid-column: var(--mc-actions-column, auto);
  white-space: nowrap;
}

.messageCenterItemTitle,
.messageCenterItemMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.messageCenterItemTitle {
  gap: 7px;
}

.messageCenterItemTitle strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messageCenterStatus,
.messageCenterReadState,
.messageCenterItemMeta > span,
.messageCenterItemMeta > button {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.messageCenterStatus {
  background: var(--mc-accent-soft);
  color: var(--mc-accent);
}

.messageCenterStatus.critical {
  background: var(--mc-danger-soft);
  color: var(--mc-danger);
}

.messageCenterStatus.warning {
  background: var(--mc-warning-soft);
  color: var(--mc-warning);
}

.messageCenterReadState.isUnread {
  background: var(--mc-danger-soft);
  color: var(--mc-danger);
}

.messageCenterReadState.isRead {
  background: color-mix(in srgb, var(--mc-subtle) 10%, var(--mc-surface));
  color: var(--mc-subtle);
}

.messageCenterItemMain > p {
  margin-top: 7px;
  color: var(--mc-muted);
  font-size: 12px;
  line-height: 1.65;
}

.messageCenterItemMeta {
  gap: 8px;
  margin-top: 9px;
}

.messageCenterItemMeta > span,
.messageCenterItemMeta > button {
  border: 0;
  background: var(--mc-accent-soft);
  color: var(--mc-accent);
}

.messageCenterItemMeta > button {
  cursor: pointer;
  font-family: inherit;
}

.messageCenterItemMeta > button:hover {
  text-decoration: underline;
}

.messageCenterItemMeta > .messageCenterType {
  background: color-mix(in srgb, var(--mc-line) 48%, transparent);
  color: var(--mc-muted);
}

.messageCenterItemMeta time {
  color: var(--mc-subtle);
  font-size: 11px;
}

.messageCenterPagination {
  flex: 0 0 auto;
  min-height: 58px;
  padding: 10px 19px;
  border-top: 1px solid var(--mc-line-soft);
  background: color-mix(in srgb, var(--mc-surface) 97%, var(--mc-accent));
}

@media (max-width: 900px) {
  .messageCenterPage {
    height: calc(100dvh - 106px);
    padding: 24px 20px 48px;
  }

  .messageCenterPanelHead {
    align-items: flex-start;
    flex-direction: column;
  }

  .messageCenterToolbar {
    width: 100%;
    justify-content: space-between;
  }

  .messageCenterToolbar .messageCenterSearch {
    min-width: 0;
    width: min(100%, 360px);
  }
}

@media (max-width: 640px) {
  .messageCenterPage {
    padding: 20px 12px 42px;
  }

  .messageCenterPageHead {
    align-items: stretch;
    flex-direction: column;
  }

  .messageCenterPageHead > .cuiButton {
    align-self: flex-start;
  }

  .messageCenterToolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .messageCenterToolbar .messageCenterSearch {
    width: 100%;
  }

  .messageCenterItem {
    --mc-actions-column: 2;
    grid-template-columns: 10px minmax(0, 1fr);
    padding: 15px 13px;
  }

  .messageCenterItem > .cuiButton {
    grid-column: 2;
    justify-self: start;
  }

}

@media (prefers-reduced-motion: reduce) {
  .messageCenterPage *,
  .messageCenterPage *::before,
  .messageCenterPage *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/landing-home.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Generated from Compass-首页完整源码-20260730/index.html. */
.landing-page {
  --ai-home-bg: #ffffff;
  --ai-home-surface: #ffffff;
  --ai-home-soft: #f5f6f8;
  --ai-home-line: #dde1e8;
  --ai-home-text: #111827;
  --ai-home-muted: #667085;
  --ai-home-accent: #5661d7;
  min-height: 100vh;
  background: var(--ai-home-bg);
  color: var(--ai-home-text);
  overflow-x: clip;
}

.landing-page .landing-source-hidden {
  display: none;
}

.landing-page {
  --landing-accent: #9b87ff;
  --landing-accent-strong: #c4b5fd;
  --landing-accent-2: #36d6a6;
  --landing-accent-3: #60a5fa;
  --landing-bg-1: #050714;
  --landing-bg-2: #071323;
  --landing-bg-3: #120d22;
  --landing-surface: rgba(15, 21, 37, 0.78);
  --landing-surface-strong: rgba(22, 28, 48, 0.88);
  --landing-border: rgba(166, 179, 221, 0.16);
  --landing-border-strong: rgba(155, 135, 255, 0.36);
  --landing-text: #f8fbff;
  --landing-muted: #9fb0cf;
  --landing-soft: rgba(155, 135, 255, 0.15);
  --landing-shadow: 0 34px 90px rgba(0, 0, 0, 0.38);
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--landing-text);
  background:
    radial-gradient(
      circle at 78% 14%,
      color-mix(in srgb, var(--landing-accent-3) 18%, transparent),
      transparent 30%
    ),
    radial-gradient(
      circle at 20% 22%,
      color-mix(in srgb, var(--landing-accent) 18%, transparent),
      transparent 34%
    ),
    linear-gradient(135deg, var(--landing-bg-1), var(--landing-bg-2) 52%, var(--landing-bg-3));
}

.landing-page[data-theme='white'] {
  --landing-accent: #9b87ff;
  --landing-accent-strong: #c4b5fd;
  --landing-accent-2: #36d6a6;
  --landing-accent-3: #60a5fa;
  --landing-bg-1: #050714;
  --landing-bg-2: #071323;
  --landing-bg-3: #120d22;
  background:
    radial-gradient(circle at 78% 14%, rgba(96, 165, 250, 0.18), transparent 30%),
    radial-gradient(circle at 20% 22%, rgba(155, 135, 255, 0.18), transparent 34%),
    linear-gradient(135deg, var(--landing-bg-1), var(--landing-bg-2) 52%, var(--landing-bg-3));
}

.landing-page[data-theme='light'] {
  --landing-accent: #a78bfa;
  --landing-accent-strong: #ddd6fe;
  --landing-accent-2: #34d399;
  --landing-accent-3: #818cf8;
  --landing-bg-1: #060617;
  --landing-bg-2: #0c1225;
  --landing-bg-3: #1a1430;
}

.landing-page[data-theme='black'] {
  --landing-accent: #8b7cff;
  --landing-accent-strong: #d8d4ff;
  --landing-accent-2: #22d3ee;
  --landing-accent-3: #f59e0b;
  --landing-bg-1: #03040a;
  --landing-bg-2: #070b16;
  --landing-bg-3: #101322;
  --landing-surface: rgba(10, 14, 26, 0.82);
}

.landing-page[data-theme='green'] {
  --landing-accent: #34d399;
  --landing-accent-strong: #a7f3d0;
  --landing-accent-2: #86efac;
  --landing-accent-3: #38bdf8;
  --landing-bg-1: #03120f;
  --landing-bg-2: #08251f;
  --landing-bg-3: #071827;
}

.landing-page[data-theme='blue'] {
  --landing-accent: #60a5fa;
  --landing-accent-strong: #bfdbfe;
  --landing-accent-2: #22d3ee;
  --landing-accent-3: #a78bfa;
  --landing-bg-1: #041021;
  --landing-bg-2: #092544;
  --landing-bg-3: #071627;
}

.landing-page[data-theme='redblue'] {
  --landing-accent: #fb7185;
  --landing-accent-strong: #fecdd3;
  --landing-accent-2: #60a5fa;
  --landing-accent-3: #f59e0b;
  --landing-bg-1: #150710;
  --landing-bg-2: #0b1b3f;
  --landing-bg-3: #09111f;
}

.landing-page[data-theme='custom'] {
  --landing-accent: var(--custom-accent, #7c3aed);
  --landing-accent-strong: color-mix(in srgb, var(--custom-accent, #7c3aed) 34%, #ffffff);
  --landing-accent-2: var(--custom-accent-2, #2563eb);
  --landing-accent-3: color-mix(in srgb, var(--custom-accent-2, #2563eb) 70%, #22d3ee);
  --landing-bg-1: color-mix(in srgb, var(--custom-accent, #7c3aed) 13%, #050714);
  --landing-bg-2: color-mix(in srgb, var(--custom-accent-2, #2563eb) 16%, #071323);
  --landing-bg-3: color-mix(in srgb, var(--custom-accent, #7c3aed) 10%, #111827);
}

.landing-page {
  display: none;
}

.landing-page {
  display: block;
}

.landing-page .app,
.landing-page .login-gate,
.landing-page .feedback-page,
body.login-active .landing-page {
  display: none;
}

body.feedback-active .landing-page,
body.feedback-active .login-gate,
body.feedback-active .app {
  display: none;
}

.landing-page {
  position: relative;
  min-height: 100vh;
  overflow: clip;
  color: var(--landing-text);
  background:
    radial-gradient(
      circle at 78% 14%,
      color-mix(in srgb, var(--landing-accent-3) 18%, transparent),
      transparent 30%
    ),
    radial-gradient(
      circle at 20% 22%,
      color-mix(in srgb, var(--landing-accent) 18%, transparent),
      transparent 34%
    ),
    linear-gradient(135deg, var(--landing-bg-1), var(--landing-bg-2) 52%, var(--landing-bg-3));
  isolation: isolate;
}

.landing-page::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.16));
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.16));
  content: '';
}

.landing-page::after {
  position: fixed;
  inset: auto -14% -22% 44%;
  z-index: -1;
  height: 420px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--landing-accent-2) 18%, transparent);
  filter: blur(90px);
  content: '';
}

.landing-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1440px, calc(100vw - 64px));
  height: 76px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: color-mix(in srgb, var(--landing-bg-1) 82%, transparent);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 208px;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

.landing-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--landing-accent) 32%, transparent);
}

.landing-brand small {
  display: block;
  margin-top: 1px;
  color: var(--landing-muted);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.landing-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.landing-nav button,
.landing-ghost-button,
.landing-login-button,
.landing-primary-button,
.landing-secondary-button {
  border: 0;
  cursor: pointer;
}

.landing-nav button {
  min-width: 86px;
  padding: 9px 16px;
  border-radius: 999px;
  background: transparent;
  color: var(--landing-muted);
  font-size: 13px;
  font-weight: 820;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.landing-nav button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateY(-1px);
}

.landing-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 370px;
}

.landing-switcher .theme-toggle,
.landing-switcher .language-toggle {
  min-width: 112px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: #edf2ff;
  box-shadow: none;
}

.landing-switcher .theme-toggle:hover,
.landing-switcher .theme-toggle[aria-expanded='true'],
.landing-switcher .language-toggle:hover,
.landing-switcher .language-toggle[aria-expanded='true'] {
  border-color: color-mix(in srgb, var(--landing-accent) 54%, rgba(255, 255, 255, 0.14));
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.landing-switcher .theme-menu,
.landing-switcher .language-menu {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(14, 18, 32, 0.96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
}

.landing-switcher .theme-option,
.landing-switcher .language-option,
.landing-switcher .theme-section-title,
.landing-switcher .theme-custom-panel small,
.landing-switcher .theme-custom-head small {
  color: #aebbd6;
}

.landing-switcher .theme-option:hover,
.landing-switcher .theme-option.active,
.landing-switcher .language-option:hover,
.landing-switcher .language-option.active {
  border-color: color-mix(in srgb, var(--landing-accent) 48%, transparent);
  background: color-mix(in srgb, var(--landing-accent) 14%, transparent);
  color: #fff;
}

.landing-login-button,
.landing-ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 860;
}

.landing-login-button {
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.055);
  color: #eef2ff;
}

.landing-ghost-button {
  background: linear-gradient(
    135deg,
    var(--landing-accent),
    color-mix(in srgb, var(--landing-accent-3) 78%, var(--landing-accent))
  );
  color: #fff;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--landing-accent) 26%, transparent);
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(440px, 0.78fr);
  gap: clamp(42px, 6vw, 104px);
  align-items: center;
  width: min(1260px, calc(100vw - 64px));
  min-height: calc(100vh - 76px);
  margin: 0 auto;
  padding: 74px 0 90px;
}

.landing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 9px 15px;
  border: 1px solid color-mix(in srgb, var(--landing-accent) 36%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--landing-accent) 16%, transparent);
  color: #d9d4ff;
  font-size: 14px;
  font-weight: 900;
}

.landing-kicker::before {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--landing-accent-2);
  box-shadow: 0 0 18px var(--landing-accent-2);
  content: '';
}

.landing-title {
  max-width: 760px;
  margin: 24px 0 18px;
  color: #fff;
  font-size: clamp(56px, 6.1vw, 94px);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: 0;
}

.landing-title span {
  display: block;
  color: #fff;
}

.landing-title span:last-child {
  color: var(--landing-accent-strong);
}

.landing-copy {
  max-width: 680px;
  margin: 0;
  color: var(--landing-muted);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.8;
}

.landing-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.landing-primary-button,
.landing-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 164px;
  height: 52px;
  padding: 0 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 900;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.landing-primary-button {
  background: linear-gradient(
    135deg,
    var(--landing-accent),
    color-mix(in srgb, var(--landing-accent-3) 70%, var(--landing-accent))
  );
  color: #fff;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--landing-accent) 32%, transparent);
}

.landing-secondary-button {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.035);
  color: #dce7ff;
}

.landing-primary-button:hover,
.landing-secondary-button:hover,
.landing-login-button:hover,
.landing-ghost-button:hover {
  transform: translateY(-1px);
}

.landing-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 760px;
  margin-top: 44px;
}

.landing-stat {
  padding: 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.landing-stat strong {
  display: block;
  color: var(--landing-accent-strong);
  font-size: 30px;
  line-height: 1;
}

.landing-stat span {
  display: block;
  margin-top: 8px;
  color: var(--landing-muted);
  font-size: 13px;
  font-weight: 760;
}

.landing-visual {
  position: relative;
  min-height: 610px;
}

.landing-visual-card {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  padding: 42px;
  border: 1px solid var(--landing-border-strong);
  border-radius: 8px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--landing-accent) 74%, #1e3a8a),
      color-mix(in srgb, var(--landing-bg-2) 68%, #312e81)
    ),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent);
  box-shadow: var(--landing-shadow);
}

.landing-visual-card::before,
.landing-visual-card::after {
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  content: '';
}

.landing-visual-card::before {
  top: 28px;
  right: -42px;
}

.landing-visual-card::after {
  bottom: -78px;
  left: -62px;
}

.landing-product-card {
  position: relative;
  z-index: 2;
  margin-top: 42px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.landing-product-card h2 {
  margin: 14px 0 8px;
  color: #fff;
  font-size: 36px;
  line-height: 1.05;
}

.landing-product-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  font-weight: 720;
}

.landing-mini-label {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.landing-dashboard-mock {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  margin-top: 30px;
  padding: 18px;
  border-radius: 8px;
  background: rgba(7, 10, 25, 0.82);
}

.landing-mock-nav,
.landing-mock-main {
  display: grid;
  gap: 10px;
}

.landing-mock-line,
.landing-mock-pill {
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
}

.landing-mock-line:nth-child(1) {
  width: 70%;
}

.landing-mock-line:nth-child(2) {
  width: 88%;
}

.landing-mock-line:nth-child(3) {
  width: 58%;
}

.landing-mock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}

.landing-mock-tile {
  min-height: 76px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.landing-mock-tile.primary {
  position: relative;
  overflow: hidden;
}

.landing-mock-tile.primary::after {
  position: absolute;
  inset: auto 16px 18px 16px;
  height: 30px;
  border-bottom: 5px solid var(--landing-accent-2);
  border-right: 5px solid var(--landing-accent-2);
  border-radius: 0 0 28px 0;
  transform: skew(-18deg);
  content: '';
}

.landing-mock-tile.accent {
  background: var(--landing-accent-2);
}

.landing-visual-foot {
  position: absolute;
  right: 0;
  bottom: 46px;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(10, 14, 26, 0.82);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.landing-visual-foot strong {
  display: block;
  color: #fff;
  font-size: 18px;
}

.landing-visual-foot span {
  color: var(--landing-muted);
  font-size: 13px;
  font-weight: 700;
}

.landing-ai-bot {
  position: absolute;
  top: 170px;
  right: -122px;
  width: 108px;
  height: 108px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.landing-ai-bot::before {
  position: absolute;
  top: 28px;
  left: 18px;
  width: 72px;
  height: 42px;
  border-radius: 22px;
  background: #eef8ff;
  box-shadow: inset 0 -8px 0 rgba(96, 165, 250, 0.16);
  content: '';
}

.landing-ai-bot::after {
  position: absolute;
  top: 42px;
  left: 37px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #071323;
  box-shadow:
    26px 0 0 #071323,
    13px 18px 0 -2px var(--landing-accent-2);
  content: '';
}

.landing-section {
  width: min(1260px, calc(100vw - 64px));
  margin: 0 auto;
  padding: 86px 0;
}

.landing-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 28px;
}

.landing-section-head h2 {
  margin: 0;
  color: #fff;
  font-size: 36px;
  line-height: 1.14;
}

.landing-section-head p {
  max-width: 520px;
  margin: 0;
  color: var(--landing-muted);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.7;
}

.landing-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.landing-capability-card {
  min-height: 196px;
  padding: 24px;
  border: 1px solid var(--landing-border);
  border-radius: 8px;
  background: var(--landing-surface);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.landing-capability-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--landing-accent) 42%, var(--landing-border));
  background: var(--landing-surface-strong);
}

.landing-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--landing-accent) 18%, transparent);
  color: var(--landing-accent-strong);
}

.landing-capability-card h3 {
  margin: 18px 0 9px;
  color: #fff;
  font-size: 20px;
}

.landing-capability-card p {
  margin: 0;
  color: var(--landing-muted);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.65;
}

.landing-coverage {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 18px;
}

.landing-coverage-panel,
.landing-plan-card {
  border: 1px solid var(--landing-border);
  border-radius: 8px;
  background: var(--landing-surface);
}

.landing-coverage-panel {
  padding: 28px;
}

.landing-coverage-panel h3,
.landing-plan-card h3 {
  margin: 0;
  color: #fff;
  font-size: 24px;
}

.landing-coverage-list {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.landing-coverage-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--landing-muted);
  font-size: 14px;
  font-weight: 740;
}

.landing-coverage-item:last-child {
  border-bottom: 0;
}

.landing-coverage-item strong {
  color: #fff;
}

.landing-region-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.landing-region-cloud span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: #d7e3ff;
  font-size: 13px;
  font-weight: 760;
}

.landing-workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.landing-flow-card {
  position: relative;
  min-height: 172px;
  padding: 22px;
  border: 1px solid var(--landing-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.landing-flow-card::after {
  position: absolute;
  top: 35px;
  right: -19px;
  z-index: 2;
  width: 26px;
  height: 1px;
  background: color-mix(in srgb, var(--landing-accent) 54%, transparent);
  content: '';
}

.landing-flow-card:last-child::after {
  content: none;
}

.landing-flow-card small {
  color: var(--landing-accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.landing-flow-card strong {
  display: block;
  margin-top: 12px;
  color: #fff;
  font-size: 18px;
}

.landing-flow-card span {
  display: block;
  margin-top: 10px;
  color: var(--landing-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.6;
}

.landing-plan-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 32px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--landing-accent) 20%, transparent),
      transparent 52%
    ),
    var(--landing-surface);
}

.landing-plan-card p {
  max-width: 720px;
  margin: 10px 0 0;
  color: var(--landing-muted);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.7;
}

.landing-footer {
  width: min(1260px, calc(100vw - 64px));
  margin: 0 auto;
  padding: 34px 0 46px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--landing-muted);
}

.landing-footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.landing-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 900;
}

.landing-footer-brand img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #fff;
}

.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
}

.landing-footer-links button {
  border: 0;
  background: transparent;
  color: var(--landing-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 760;
}

.landing-footer-links button:hover {
  color: #fff;
}

html[data-language-length='long'] .landing-title {
  font-size: clamp(46px, 4.8vw, 76px);
}

html[data-language-length='long'] .landing-nav button {
  min-width: 72px;
  padding-inline: 12px;
  font-size: 12px;
}

html[data-language-length='long'] .landing-actions {
  min-width: 420px;
}

html[data-language-length='long'] .landing-hero {
  grid-template-columns: minmax(0, 1fr) minmax(410px, 0.72fr);
}

@media (max-width: 1180px) {
  .landing-page {
    min-width: 0;
  }

  .landing-top {
    width: min(100vw - 32px, 980px);
  }

  .landing-nav {
    display: none;
  }

  .landing-actions {
    min-width: auto;
  }

  .landing-login-button {
    display: none;
  }

  .landing-hero,
  .landing-section,
  .landing-footer {
    width: min(100vw - 32px, 980px);
  }

  .landing-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 54px;
  }

  .landing-visual {
    min-height: 520px;
  }

  .landing-ai-bot {
    right: 18px;
  }

  .landing-capability-grid,
  .landing-coverage,
  .landing-workflow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-flow-card::after {
    content: none;
  }
}

@media (max-width: 720px) {
  .landing-top {
    height: auto;
    padding: 14px 0;
    align-items: flex-start;
  }

  .landing-brand small,
  .landing-switcher .theme-toggle {
    display: none;
  }

  .landing-actions {
    gap: 8px;
  }

  .landing-ghost-button {
    padding-inline: 12px;
  }

  .landing-title {
    font-size: 44px;
  }

  .landing-stats,
  .landing-capability-grid,
  .landing-coverage,
  .landing-workflow,
  .landing-plan-card {
    grid-template-columns: 1fr;
  }

  .landing-section-head,
  .landing-footer-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-visual-card {
    min-height: 440px;
    padding: 26px;
  }

  .landing-product-card h2 {
    font-size: 30px;
  }

  .landing-visual-foot {
    position: static;
    margin-top: 14px;
    flex-direction: column;
    align-items: flex-start;
  }
}

.landing-page[data-theme='white'] {
  --landing-accent: #6d5dfc;
  --landing-accent-strong: #4f46e5;
  --landing-accent-2: #11b981;
  --landing-accent-3: #2f80ed;
  --landing-bg-1: #ffffff;
  --landing-bg-2: #f7f9fd;
  --landing-bg-3: #eef4ff;
  --landing-text: #0f172a;
  --landing-muted: #64748b;
  --landing-heading: #0b1220;
  --landing-surface: rgba(255, 255, 255, 0.92);
  --landing-surface-strong: rgba(255, 255, 255, 0.98);
  --landing-border: rgba(15, 23, 42, 0.1);
  --landing-border-strong: rgba(109, 93, 252, 0.22);
  --landing-header-bg: rgba(255, 255, 255, 0.82);
  --landing-nav-bg: rgba(241, 245, 249, 0.82);
  --landing-control-bg: rgba(255, 255, 255, 0.96);
  --landing-control-text: #334155;
  --landing-menu-bg: rgba(255, 255, 255, 0.98);
  --landing-grid-line: rgba(15, 23, 42, 0.045);
  --landing-visual-bg: linear-gradient(180deg, #ffffff, #f3f6ff);
  --landing-window-bg: rgba(255, 255, 255, 0.86);
  --landing-window-text: #111827;
  --landing-mock-bg: #111827;
  --landing-foot-bg: rgba(255, 255, 255, 0.94);
  --landing-foot-text: #0f172a;
  --landing-shadow: 0 30px 80px rgba(59, 65, 100, 0.14);
  background:
    radial-gradient(circle at 76% 18%, rgba(109, 93, 252, 0.13), transparent 32%),
    radial-gradient(circle at 16% 18%, rgba(47, 128, 237, 0.08), transparent 34%),
    linear-gradient(135deg, var(--landing-bg-1), var(--landing-bg-2) 48%, var(--landing-bg-3));
}

.landing-page[data-theme='light'] {
  --landing-accent: #8b5cf6;
  --landing-accent-strong: #c4b5fd;
  --landing-accent-2: #22d3ee;
  --landing-accent-3: #6366f1;
  --landing-heading: #f8fbff;
  --landing-header-bg: rgba(8, 8, 20, 0.82);
  --landing-nav-bg: rgba(255, 255, 255, 0.045);
  --landing-control-bg: rgba(255, 255, 255, 0.08);
  --landing-control-text: #edf2ff;
  --landing-menu-bg: rgba(14, 18, 32, 0.98);
  --landing-grid-line: rgba(255, 255, 255, 0.035);
  --landing-visual-bg: linear-gradient(180deg, #6d5dfc, #211a58);
  --landing-window-bg: rgba(255, 255, 255, 0.14);
  --landing-window-text: #ffffff;
  --landing-mock-bg: rgba(7, 10, 25, 0.82);
  --landing-foot-bg: rgba(8, 10, 24, 0.88);
  --landing-foot-text: #ffffff;
}

.landing-page[data-theme='black'] {
  --landing-heading: #f8fbff;
  --landing-header-bg: rgba(3, 4, 10, 0.82);
  --landing-nav-bg: rgba(255, 255, 255, 0.045);
  --landing-control-bg: rgba(255, 255, 255, 0.075);
  --landing-control-text: #edf2ff;
  --landing-menu-bg: rgba(9, 11, 20, 0.98);
  --landing-grid-line: rgba(255, 255, 255, 0.032);
  --landing-visual-bg: linear-gradient(180deg, #1f2937, #070b16);
  --landing-window-bg: rgba(255, 255, 255, 0.1);
  --landing-window-text: #ffffff;
  --landing-mock-bg: rgba(3, 7, 18, 0.9);
  --landing-foot-bg: rgba(5, 7, 16, 0.9);
  --landing-foot-text: #ffffff;
}

.landing-page[data-theme='green'] {
  --landing-accent: #059669;
  --landing-accent-strong: #047857;
  --landing-accent-2: #34d399;
  --landing-accent-3: #0ea5e9;
  --landing-bg-1: #fbfffc;
  --landing-bg-2: #effdf6;
  --landing-bg-3: #e8f8f0;
  --landing-text: #10201a;
  --landing-muted: #59756b;
  --landing-heading: #08251d;
  --landing-surface: rgba(255, 255, 255, 0.9);
  --landing-surface-strong: rgba(255, 255, 255, 0.98);
  --landing-border: rgba(5, 150, 105, 0.14);
  --landing-border-strong: rgba(5, 150, 105, 0.26);
  --landing-header-bg: rgba(255, 255, 255, 0.82);
  --landing-nav-bg: rgba(220, 252, 231, 0.72);
  --landing-control-bg: rgba(255, 255, 255, 0.96);
  --landing-control-text: #23433a;
  --landing-menu-bg: rgba(255, 255, 255, 0.98);
  --landing-grid-line: rgba(5, 150, 105, 0.05);
  --landing-visual-bg: linear-gradient(180deg, #ecfdf5, #d9fbe9);
  --landing-window-bg: rgba(255, 255, 255, 0.84);
  --landing-window-text: #063f30;
  --landing-mock-bg: #052e2b;
  --landing-foot-bg: rgba(255, 255, 255, 0.94);
  --landing-foot-text: #063f30;
}

.landing-page[data-theme='blue'] {
  --landing-accent: #2563eb;
  --landing-accent-strong: #1d4ed8;
  --landing-accent-2: #06b6d4;
  --landing-accent-3: #7c3aed;
  --landing-bg-1: #ffffff;
  --landing-bg-2: #f3f8ff;
  --landing-bg-3: #eaf3ff;
  --landing-text: #0f172a;
  --landing-muted: #5f6f86;
  --landing-heading: #081b3f;
  --landing-surface: rgba(255, 255, 255, 0.9);
  --landing-surface-strong: rgba(255, 255, 255, 0.98);
  --landing-border: rgba(37, 99, 235, 0.14);
  --landing-border-strong: rgba(37, 99, 235, 0.26);
  --landing-header-bg: rgba(255, 255, 255, 0.82);
  --landing-nav-bg: rgba(219, 234, 254, 0.7);
  --landing-control-bg: rgba(255, 255, 255, 0.96);
  --landing-control-text: #1e3a8a;
  --landing-menu-bg: rgba(255, 255, 255, 0.98);
  --landing-grid-line: rgba(37, 99, 235, 0.045);
  --landing-visual-bg: linear-gradient(180deg, #eff6ff, #dbeafe);
  --landing-window-bg: rgba(255, 255, 255, 0.85);
  --landing-window-text: #082f6f;
  --landing-mock-bg: #0b1f43;
  --landing-foot-bg: rgba(255, 255, 255, 0.94);
  --landing-foot-text: #082f6f;
}

.landing-page[data-theme='redblue'] {
  --landing-accent: #dc2626;
  --landing-accent-strong: #b91c1c;
  --landing-accent-2: #2563eb;
  --landing-accent-3: #0ea5e9;
  --landing-bg-1: #fffafa;
  --landing-bg-2: #f8fbff;
  --landing-bg-3: #eef4ff;
  --landing-text: #111827;
  --landing-muted: #667085;
  --landing-heading: #111827;
  --landing-surface: rgba(255, 255, 255, 0.9);
  --landing-surface-strong: rgba(255, 255, 255, 0.98);
  --landing-border: rgba(220, 38, 38, 0.12);
  --landing-border-strong: rgba(37, 99, 235, 0.24);
  --landing-header-bg: rgba(255, 255, 255, 0.84);
  --landing-nav-bg: rgba(239, 246, 255, 0.76);
  --landing-control-bg: rgba(255, 255, 255, 0.96);
  --landing-control-text: #1f2937;
  --landing-menu-bg: rgba(255, 255, 255, 0.98);
  --landing-grid-line: rgba(37, 99, 235, 0.045);
  --landing-visual-bg: linear-gradient(180deg, #fff1f2, #dbeafe);
  --landing-window-bg: rgba(255, 255, 255, 0.85);
  --landing-window-text: #111827;
  --landing-mock-bg: #111827;
  --landing-foot-bg: rgba(255, 255, 255, 0.94);
  --landing-foot-text: #111827;
}

.landing-page[data-theme='custom'] {
  --landing-heading: color-mix(in srgb, var(--custom-accent, #7c3aed) 35%, #0f172a);
  --landing-header-bg: color-mix(
    in srgb,
    var(--custom-accent, #7c3aed) 5%,
    rgba(255, 255, 255, 0.84)
  );
  --landing-nav-bg: color-mix(
    in srgb,
    var(--custom-accent, #7c3aed) 10%,
    rgba(248, 250, 252, 0.76)
  );
  --landing-control-bg: rgba(255, 255, 255, 0.96);
  --landing-control-text: #334155;
  --landing-menu-bg: rgba(255, 255, 255, 0.98);
  --landing-grid-line: color-mix(in srgb, var(--custom-accent, #7c3aed) 6%, transparent);
  --landing-visual-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--custom-accent, #7c3aed) 8%, #ffffff),
    color-mix(in srgb, var(--custom-accent-2, #2563eb) 12%, #f8fafc)
  );
  --landing-window-bg: rgba(255, 255, 255, 0.85);
  --landing-window-text: #111827;
  --landing-mock-bg: #111827;
  --landing-foot-bg: rgba(255, 255, 255, 0.94);
  --landing-foot-text: #111827;
}

.landing-page[data-theme='custom'][data-custom-mode='dark'] {
  --landing-heading: #f8fbff;
  --landing-header-bg: rgba(8, 12, 24, 0.84);
  --landing-nav-bg: rgba(255, 255, 255, 0.055);
  --landing-control-bg: rgba(255, 255, 255, 0.08);
  --landing-control-text: #edf2ff;
  --landing-menu-bg: rgba(14, 18, 32, 0.98);
  --landing-grid-line: rgba(255, 255, 255, 0.032);
  --landing-visual-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--custom-accent, #7c3aed) 56%, #111827),
    #0f172a
  );
  --landing-window-bg: rgba(255, 255, 255, 0.12);
  --landing-window-text: #ffffff;
  --landing-mock-bg: rgba(3, 7, 18, 0.9);
  --landing-foot-bg: rgba(8, 12, 24, 0.9);
  --landing-foot-text: #ffffff;
}

.landing-page {
  background:
    radial-gradient(
      circle at 78% 16%,
      color-mix(in srgb, var(--landing-accent-3) 13%, transparent),
      transparent 30%
    ),
    radial-gradient(
      circle at 16% 18%,
      color-mix(in srgb, var(--landing-accent) 10%, transparent),
      transparent 34%
    ),
    linear-gradient(135deg, var(--landing-bg-1), var(--landing-bg-2) 48%, var(--landing-bg-3));
}

.landing-page::before {
  background:
    linear-gradient(var(--landing-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--landing-grid-line) 1px, transparent 1px);
  opacity: 0.72;
}

.landing-top {
  border: 1px solid var(--landing-border);
  border-top: 0;
  background: var(--landing-header-bg);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.landing-brand {
  color: var(--landing-heading);
}

.landing-logo {
  background: #fff;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--landing-accent) 20%, transparent);
}

.landing-nav {
  border-color: var(--landing-border);
  background: var(--landing-nav-bg);
}

.landing-nav button {
  color: var(--landing-muted);
}

.landing-nav button:hover {
  background: var(--landing-surface-strong);
  color: var(--landing-heading);
}

.landing-switcher .theme-toggle,
.landing-switcher .language-toggle,
.landing-login-button {
  border-color: var(--landing-border);
  background: var(--landing-control-bg);
  color: var(--landing-control-text);
}

.landing-switcher .theme-toggle:hover,
.landing-switcher .theme-toggle[aria-expanded='true'],
.landing-switcher .language-toggle:hover,
.landing-switcher .language-toggle[aria-expanded='true'],
.landing-login-button:hover {
  border-color: var(--landing-border-strong);
  background: var(--landing-surface-strong);
  color: var(--landing-accent-strong);
}

.landing-switcher .theme-menu,
.landing-switcher .language-menu {
  border-color: var(--landing-border);
  background: var(--landing-menu-bg);
  box-shadow: var(--landing-shadow);
}

.landing-switcher .theme-option,
.landing-switcher .language-option,
.landing-switcher .theme-section-title,
.landing-switcher .theme-custom-panel small,
.landing-switcher .theme-custom-head small {
  color: var(--landing-muted);
}

.landing-hero {
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.82fr);
  gap: clamp(48px, 7vw, 118px);
  min-height: calc(100vh - 76px);
  padding: 92px 0 72px;
}

.landing-kicker {
  border-color: var(--landing-border-strong);
  background: color-mix(in srgb, var(--landing-accent) 10%, transparent);
  color: var(--landing-accent-strong);
}

.landing-title {
  max-width: 720px;
  margin: 26px 0 22px;
  color: var(--landing-heading);
  font-size: clamp(46px, 4.6vw, 74px);
  font-weight: 950;
  line-height: 1.12;
}

.landing-title span {
  display: block;
  color: var(--landing-heading);
}

.landing-title span:first-child {
  margin-bottom: 14px;
  color: var(--landing-accent-strong);
  font-size: clamp(18px, 1.4vw, 24px);
  font-weight: 920;
}

.landing-title span:empty {
  display: none;
}

.landing-title span:last-child {
  color: var(--landing-heading);
}

.landing-copy {
  max-width: 620px;
  color: var(--landing-muted);
  font-size: 16px;
  line-height: 1.75;
}

.landing-secondary-button {
  border-color: var(--landing-border);
  background: var(--landing-control-bg);
  color: var(--landing-control-text);
}

.landing-stat,
.landing-capability-card,
.landing-coverage-panel,
.landing-plan-card,
.landing-flow-card {
  border-color: var(--landing-border);
  background: var(--landing-surface);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.landing-stat strong,
.landing-section-head h2,
.landing-capability-card h3,
.landing-coverage-panel h3,
.landing-plan-card h3,
.landing-flow-card strong,
.landing-footer-brand {
  color: var(--landing-heading);
}

.landing-visual {
  min-height: 520px;
}

.landing-visual-card {
  min-height: 470px;
  padding: 34px;
  border-color: var(--landing-border-strong);
  background: var(--landing-visual-bg);
  box-shadow: var(--landing-shadow);
}

.landing-product-card {
  margin-top: 24px;
  border-color: var(--landing-border);
  background: var(--landing-window-bg);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
}

.landing-product-card h2 {
  color: var(--landing-window-text);
}

.landing-product-card p {
  color: color-mix(in srgb, var(--landing-window-text) 68%, transparent);
}

.landing-mini-label {
  background: color-mix(in srgb, var(--landing-accent) 14%, transparent);
  color: var(--landing-accent-strong);
}

.landing-dashboard-mock {
  background: var(--landing-mock-bg);
}

.landing-visual-foot {
  bottom: 28px;
  border-color: var(--landing-border);
  background: var(--landing-foot-bg);
}

.landing-visual-foot strong {
  color: var(--landing-foot-text);
}

.landing-ai-bot {
  display: none;
}

.landing-footer {
  border-top-color: var(--landing-border);
}

.landing-footer-links button {
  color: var(--landing-muted);
}

.landing-footer-links button:hover {
  color: var(--landing-accent-strong);
}

.landing-page .landing-top,
.landing-page .landing-brand,
.landing-page .landing-nav,
.landing-page .landing-actions,
.landing-page .landing-switcher,
.landing-page .landing-hero-copy,
.landing-page .landing-plan-card > div {
  min-width: 0;
}

.landing-page .landing-top {
  width: min(1480px, calc(100vw - 72px));
  height: 82px;
  padding: 0 22px;
}

.landing-page .landing-brand {
  flex: 0 0 auto;
  gap: 14px;
  padding-left: 2px;
}

.landing-page .landing-logo {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.landing-page .landing-actions {
  flex: 0 1 auto;
  gap: 12px;
  padding-right: 2px;
}

.landing-page .landing-login-button {
  padding-inline: 18px;
  background: color-mix(in srgb, var(--landing-surface-strong) 58%, transparent);
  box-shadow: none;
}

.landing-page .landing-ghost-button {
  padding-inline: 20px;
}

.landing-page .landing-login-button:hover {
  background: color-mix(in srgb, var(--landing-accent) 8%, var(--landing-surface-strong));
}

.landing-page .landing-brand > span,
.landing-page .landing-brand small,
.landing-page .landing-title,
.landing-page .landing-copy,
.landing-page .landing-section-head h2,
.landing-page .landing-section-head p,
.landing-page .landing-capability-card h3,
.landing-page .landing-capability-card p,
.landing-page .landing-flow-card strong,
.landing-page .landing-flow-card span,
.landing-page .landing-plan-card h3,
.landing-page .landing-plan-card p {
  overflow-wrap: anywhere;
}

.landing-page .landing-title {
  text-wrap: balance;
}

.landing-page .landing-copy,
.landing-page .landing-section-head p,
.landing-page .landing-capability-card p,
.landing-page .landing-flow-card span,
.landing-page .landing-plan-card p {
  text-wrap: pretty;
}

.landing-page .landing-switcher .theme-toggle,
.landing-page .landing-switcher .language-toggle {
  min-width: 0;
  flex: 0 0 auto;
}

.landing-page .landing-switcher .theme-toggle {
  min-width: 112px;
  max-width: 132px;
}

.landing-page .landing-switcher .language-toggle {
  min-width: 156px;
  max-width: 176px;
}

.landing-page .landing-switcher .theme-current,
.landing-page .landing-switcher .language-current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-page .landing-switcher .theme-current {
  max-width: 74px;
}

.landing-page .landing-switcher .language-current {
  max-width: 72px;
}

.landing-page[data-language-length='long'] .landing-top {
  gap: 14px;
  padding-inline: 18px;
}

.landing-page[data-language-length='long'] .landing-brand {
  gap: 10px;
  min-width: 178px;
}

.landing-page[data-language-length='long'] .landing-brand small {
  max-width: 150px;
  font-size: 9px;
  line-height: 1.25;
}

.landing-page[data-language-length='long'] .landing-nav {
  flex: 1 1 340px;
  justify-content: center;
  max-width: 372px;
  padding: 5px;
}

.landing-page[data-language-length='long'] .landing-nav button {
  min-width: 0;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
}

.landing-page[data-language-length='long'] .landing-actions {
  flex: 0 1 auto;
  gap: 8px;
  min-width: 0;
}

.landing-page[data-language-length='long'] .landing-switcher .language-toggle {
  min-width: 154px;
  max-width: 168px;
}

.landing-page[data-language-length='long'] .landing-switcher .language-current {
  max-width: 66px;
}

.landing-page[data-language-length='long'] .landing-login-button,
.landing-page[data-language-length='long'] .landing-ghost-button {
  max-width: 154px;
  min-width: 0;
  padding-inline: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-page[data-language-length='long'] .landing-hero {
  grid-template-columns: minmax(0, 0.94fr) minmax(390px, 0.72fr);
  gap: clamp(36px, 5vw, 76px);
}

.landing-page[data-language-length='long'] .landing-kicker {
  max-width: min(100%, 640px);
  line-height: 1.35;
}

.landing-page[data-language-length='long'] .landing-title {
  max-width: 680px;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1.16;
}

.landing-page[data-language-length='long'] .landing-title span:first-child {
  margin-bottom: 12px;
  font-size: clamp(16px, 1.25vw, 21px);
  line-height: 1.3;
}

.landing-page[data-language-length='long'] .landing-copy {
  max-width: 660px;
  font-size: 15px;
  line-height: 1.72;
}

.landing-page[data-language-length='long'] .landing-primary-button,
.landing-page[data-language-length='long'] .landing-secondary-button {
  height: auto;
  min-height: 52px;
  max-width: 270px;
  padding-block: 11px;
  line-height: 1.25;
  white-space: normal;
}

.landing-page[data-language-length='long'] .landing-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 560px;
}

.landing-page[data-language-length='long'] .landing-stat {
  min-height: 96px;
}

.landing-page[data-language-length='long'] .landing-section-head {
  align-items: flex-start;
}

.landing-page[data-language-length='long'] .landing-capability-card {
  min-height: 218px;
}

.landing-page[data-language-length='long'] .landing-coverage {
  grid-template-columns: minmax(310px, 0.78fr) minmax(0, 1.22fr);
}

.landing-page[data-language-length='long'] .landing-coverage-item {
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
}

.landing-page[data-language-length='long'] .landing-workflow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-page[data-language-length='long'] .landing-flow-card::after {
  content: none;
}

.landing-page[data-language='ru'] .landing-title,
.landing-page[data-language='de'] .landing-title {
  font-size: clamp(38px, 3.7vw, 60px);
}

.landing-page[data-language-family='thai'] .landing-title {
  font-weight: 900;
  line-height: 1.3;
}

.landing-page[data-language-family='thai'] .landing-title span:first-child,
.landing-page[data-language-family='thai'] .landing-kicker,
.landing-page[data-language-family='thai'] .landing-primary-button,
.landing-page[data-language-family='thai'] .landing-secondary-button {
  line-height: 1.45;
}

.landing-page[data-language-family='cjk'] .landing-title {
  line-height: 1.12;
}

.landing-page[data-language-family='cjk'] .landing-copy {
  line-height: 1.82;
}

@media (max-width: 1180px) {
  .landing-page .landing-top {
    gap: 14px;
  }

  .landing-page .landing-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .landing-page[data-language-length='long'] .landing-hero {
    grid-template-columns: 1fr;
  }

  .landing-page[data-language-length='long'] .landing-title {
    max-width: 780px;
    font-size: clamp(40px, 6vw, 66px);
  }

  .landing-page[data-language-length='long'] .landing-capability-grid,
  .landing-page[data-language-length='long'] .landing-coverage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .landing-page .landing-brand {
    min-width: 0;
  }

  .landing-page .landing-switcher .language-toggle {
    min-width: 76px;
    max-width: 92px;
  }

  .landing-page .landing-switcher .language-current {
    display: none;
  }

  .landing-page[data-language-length='long'] .landing-title {
    font-size: 38px;
    line-height: 1.18;
  }

  .landing-page[data-language-family='thai'] .landing-title {
    font-size: 34px;
    line-height: 1.34;
  }

  .landing-page[data-language-length='long'] .landing-stats,
  .landing-page[data-language-length='long'] .landing-capability-grid,
  .landing-page[data-language-length='long'] .landing-coverage,
  .landing-page[data-language-length='long'] .landing-workflow,
  .landing-page[data-language-length='long'] .landing-plan-card {
    grid-template-columns: 1fr;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.app button,
.app [role='button'],
.login-gate button,
.landing-page button,
.feedback-page button {
  -webkit-tap-highlight-color: transparent;
}

.app button:not(:disabled),
.app [role='button']:not([aria-disabled='true']),
.login-gate button:not(:disabled),
.landing-page button:not(:disabled),
.feedback-page button:not(:disabled) {
  transition:
    transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease,
    opacity 140ms ease;
}

.top-actions
  :where(
    button,
    .market-toggle,
    .theme-toggle,
    .language-toggle,
    .account-button,
    .notification-button,
    .chatbi-top-button
  ):not(:disabled):hover,
.segmented button:not(:disabled):hover,
.dashboard-template-tabs button:not(:disabled):hover,
.dashboard-time-tabs button:not(:disabled):hover,
.nav-item:not(:disabled):hover,
.subnav button:not(:disabled):hover,
.ops-loop-action:not(:disabled):hover,
.alert-group-chip:not(:disabled):hover,
.alert-summary-toggle:not(:disabled):hover,
.landing-page button:not(:disabled):hover,
.login-gate button:not(:disabled):hover {
  transform: translateY(-1px);
}

.top-actions
  :where(
    button,
    .market-toggle,
    .theme-toggle,
    .language-toggle,
    .account-button,
    .notification-button,
    .chatbi-top-button
  ):not(:disabled):active,
.segmented button:not(:disabled):active,
.dashboard-template-tabs button:not(:disabled):active,
.dashboard-time-tabs button:not(:disabled):active,
.nav-item:not(:disabled):active,
.subnav button:not(:disabled):active,
.ops-loop-action:not(:disabled):active,
.alert-group-chip:not(:disabled):active,
.alert-summary-toggle:not(:disabled):active,
.landing-page button:not(:disabled):active,
.login-gate button:not(:disabled):active {
  transform: translateY(0) scale(0.97);
}

.top-actions
  :where(
    button,
    .market-toggle,
    .theme-toggle,
    .language-toggle,
    .account-button,
    .notification-button,
    .chatbi-top-button
  ):focus-visible,
.segmented button:focus-visible,
.dashboard-template-tabs button:focus-visible,
.dashboard-time-tabs button:focus-visible,
.nav-item:focus-visible,
.subnav button:focus-visible,
.ops-loop-action:focus-visible,
.alert-group-chip:focus-visible,
.alert-summary-toggle:focus-visible,
.landing-page button:focus-visible,
.login-gate button:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--theme-accent, #6366f1) 18%, transparent),
    0 10px 24px color-mix(in srgb, var(--theme-accent, #6366f1) 12%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .app button,
  .app [role='button'],
  .login-gate button,
  .landing-page button,
  .feedback-page button,
  :where(
    .kpi-card,
    .consumer-product-card,
    .consumer-kpi-card,
    .consumer-cluster-card,
    .consumer-recommend-item,
    .consumer-review-item,
    .consumer-compare-card,
    .notification-item,
    .notification-kpi-card,
    .notification-task,
    .kdl-card,
    .kdl-rank-card,
    .creator-opportunity-card,
    .content-deal-card,
    .creator-profile,
    .radar-item,
    .opportunity-item,
    .action-card,
    .action-row,
    .slice-card,
    .product-card,
    .store-card,
    .live-card
  ) {
    transition: none !important;
  }

  .app button:hover,
  .app [role='button']:hover,
  .login-gate button:hover,
  .landing-page button:hover,
  .feedback-page button:hover,
  :where(
    .kpi-card,
    .consumer-product-card,
    .consumer-kpi-card,
    .consumer-cluster-card,
    .consumer-recommend-item,
    .consumer-review-item,
    .consumer-compare-card,
    .notification-item,
    .notification-kpi-card,
    .notification-task,
    .kdl-card,
    .kdl-rank-card,
    .creator-opportunity-card,
    .content-deal-card,
    .creator-profile,
    .radar-item,
    .opportunity-item,
    .action-card,
    .action-row,
    .slice-card,
    .product-card,
    .store-card,
    .live-card
  ):hover {
    transform: none !important;
  }
}

body[data-selected-theme='solid'] .category-kpi-card::before,
body[data-selected-theme='solid'] .kpi-card::before,
body[data-selected-theme='solid'] .alert-item,
body[data-selected-theme='solid'] .ai-chat-panel,
body[data-selected-theme='solid'] .hero-visual,
body[data-selected-theme='solid'] .landing-hero::before,
body[data-selected-theme='solid'] .landing-hero::after {
  background: none;
}

body[data-selected-theme='solid'].landing-active {
  --landing-accent: #315cf6;
  --landing-accent-strong: #2447c6;
  --landing-accent-2: #315cf6;
  --landing-accent-3: #315cf6;
  --landing-bg-1: #ffffff;
  --landing-bg-2: #f8fafc;
  --landing-bg-3: #eef2f8;
  --landing-text: #344054;
  --landing-muted: #667085;
  --landing-heading: #101828;
  --landing-surface: rgba(255, 255, 255, 0.92);
  --landing-surface-strong: #ffffff;
  --landing-border: rgba(103, 113, 142, 0.14);
  --landing-border-strong: rgba(49, 92, 246, 0.22);
  --landing-header-bg: rgba(255, 255, 255, 0.9);
  --landing-nav-bg: #f5f7fb;
  --landing-control-bg: #ffffff;
  --landing-control-text: #344054;
  --landing-menu-bg: #ffffff;
  --landing-grid-line: rgba(103, 113, 142, 0.05);
  --landing-visual-bg: linear-gradient(180deg, #ffffff, #f5f7fb);
  --landing-window-bg: #ffffff;
  --landing-window-text: #172033;
  --landing-mock-bg: #172033;
  --landing-foot-bg: #ffffff;
  --landing-foot-text: #172033;
  --landing-shadow: 0 18px 46px rgba(24, 32, 51, 0.08);
}

body[data-selected-theme='solid'].landing-active .landing-page {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

body[data-selected-theme='solid'].landing-active .landing-page::after,
body[data-selected-theme='solid'].landing-active .landing-hero::before,
body[data-selected-theme='solid'].landing-active .landing-hero::after,
body[data-selected-theme='solid'].login-active .login-hero-panel::after {
  display: none;
}

body[data-selected-theme='solid'].landing-active .landing-top,
body[data-selected-theme='solid'].landing-active .landing-stat,
body[data-selected-theme='solid'].landing-active .landing-capability-card,
body[data-selected-theme='solid'].landing-active .landing-coverage-panel,
body[data-selected-theme='solid'].landing-active .landing-plan-card,
body[data-selected-theme='solid'].landing-active .landing-footer,
body[data-selected-theme='solid'].landing-active .landing-visual-card,
body[data-selected-theme='solid'].login-active .login-card,
body[data-selected-theme='solid'].feedback-active .feedback-form-card {
  border-color: rgba(103, 113, 142, 0.14);
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(24, 32, 51, 0.065);
}

body[data-selected-theme='solid'].landing-active .landing-visual-card,
body[data-selected-theme='solid'].login-active .login-hero-panel {
  background: #172033;
  box-shadow: 0 18px 42px rgba(24, 32, 51, 0.14);
}

body[data-selected-theme='solid'].landing-active .landing-kicker,
body[data-selected-theme='solid'].landing-active .landing-nav,
body[data-selected-theme='solid'].landing-active .landing-switcher .theme-toggle,
body[data-selected-theme='solid'].landing-active .landing-switcher .language-toggle,
body[data-selected-theme='solid'].landing-active .landing-login-button,
body[data-selected-theme='solid'].login-active .login-brand-main,
body[data-selected-theme='solid'].login-active .login-theme-switcher .theme-toggle,
body[data-selected-theme='solid'].login-active .language-toggle,
body[data-selected-theme='solid'].login-active .login-method-tabs,
body[data-selected-theme='solid'].feedback-active .feedback-theme-switcher .theme-toggle,
body[data-selected-theme='solid'].feedback-active .language-toggle {
  border-color: rgba(103, 113, 142, 0.14);
  background: #f8fafc;
  color: #344054;
  box-shadow: none;
}

body[data-selected-theme='solid'].landing-active .landing-switcher .theme-menu,
body[data-selected-theme='solid'].landing-active .landing-switcher .language-menu,
body[data-selected-theme='solid'].login-active .login-theme-switcher .theme-menu,
body[data-selected-theme='solid'].login-active .language-menu,
body[data-selected-theme='solid'].feedback-active .theme-menu,
body[data-selected-theme='solid'].feedback-active .language-menu {
  border-color: rgba(103, 113, 142, 0.14);
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(24, 32, 51, 0.11);
}

body[data-selected-theme='solid'].landing-active .landing-switcher .theme-option:hover,
body[data-selected-theme='solid'].landing-active .landing-switcher .theme-option.active,
body[data-selected-theme='solid'].landing-active .landing-switcher .language-option:hover,
body[data-selected-theme='solid'].landing-active .landing-switcher .language-option.active,
body[data-selected-theme='solid'].login-active .theme-option:hover,
body[data-selected-theme='solid'].login-active .theme-option.active,
body[data-selected-theme='solid'].login-active .language-option:hover,
body[data-selected-theme='solid'].login-active .language-option.active,
body[data-selected-theme='solid'].feedback-active .theme-option:hover,
body[data-selected-theme='solid'].feedback-active .theme-option.active,
body[data-selected-theme='solid'].feedback-active .language-option:hover,
body[data-selected-theme='solid'].feedback-active .language-option.active {
  border-color: rgba(49, 92, 246, 0.22);
  background: #f4f7ff;
  color: #2447c6;
}

body[data-selected-theme='solid'].landing-active .landing-primary-button,
body[data-selected-theme='solid'].landing-active .landing-ghost-button,
body[data-selected-theme='solid'].login-active .login-submit,
body[data-selected-theme='solid'].login-active .login-register-submit,
body[data-selected-theme='solid'].feedback-active .feedback-submit-button {
  background: #315cf6;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(49, 92, 246, 0.16);
}

body[data-selected-theme='solid'].landing-active .landing-secondary-button {
  border-color: rgba(103, 113, 142, 0.16);
  background: #ffffff;
  color: #344054;
  box-shadow: none;
}

body[data-selected-theme='solid'].landing-active .landing-title,
body[data-selected-theme='solid'].landing-active .landing-title span,
body[data-selected-theme='solid'].landing-active .landing-section-head h2,
body[data-selected-theme='solid'].landing-active .landing-capability-card h3,
body[data-selected-theme='solid'].landing-active .landing-coverage-panel h3,
body[data-selected-theme='solid'].landing-active .landing-plan-card h3,
body[data-selected-theme='solid'].login-active .login-title h1,
body[data-selected-theme='solid'].feedback-active .feedback-form-head h2 {
  color: #101828;
}

body[data-selected-theme='solid'].landing-active .landing-copy,
body[data-selected-theme='solid'].landing-active .landing-section-head p,
body[data-selected-theme='solid'].landing-active .landing-capability-card p,
body[data-selected-theme='solid'].landing-active .landing-coverage-item span,
body[data-selected-theme='solid'].landing-active .landing-plan-card p,
body[data-selected-theme='solid'].login-active .login-title p,
body[data-selected-theme='solid'].feedback-active .feedback-form-head p {
  color: #667085;
}

body[data-selected-theme='solid'].landing-active .landing-mock-tile.primary,
body[data-selected-theme='solid'].landing-active .landing-mock-tile.accent,
body[data-selected-theme='solid'].landing-active .landing-mock-pill {
  background: #315cf6;
}

body[data-selected-theme='solid'].landing-active .landing-mock-tile,
body[data-selected-theme='solid'].landing-active .landing-mock-line {
  background: rgba(255, 255, 255, 0.16);
}

body[data-selected-theme='solid'].landing-active .landing-flow-card,
body[data-selected-theme='solid'].landing-active .landing-coverage-item {
  border-color: rgba(103, 113, 142, 0.12);
  background: #f8fafc;
}

body[data-selected-theme='solid'].landing-active .landing-flow-card small,
body[data-selected-theme='solid'].landing-active .landing-coverage-item strong {
  color: #2447c6;
}

body[data-selected-theme='solid'].landing-active .landing-flow-card::after {
  background: #d8dee9;
}

body[data-selected-theme='solid'].landing-active,
body[data-selected-theme='solid'].login-active,
body[data-selected-theme='solid'].feedback-active,
body[data-selected-theme='solid'] .main,
body[data-selected-theme='solid'] .content,
body[data-selected-theme='solid'] .category-page,
body[data-selected-theme='solid'] .products-page,
body[data-selected-theme='solid'] .creators-page,
body[data-selected-theme='solid'] .store-page,
body[data-selected-theme='solid'] .live-page,
body[data-selected-theme='solid'] .competitor-page,
body[data-selected-theme='solid'] .chat-bi-page,
body[data-selected-theme='solid'] .settings-page,
body[data-selected-theme='solid'] .notifications-page,
body[data-selected-theme='solid'] .team-page,
body[data-selected-theme='solid'] .account-page,
body[data-selected-theme='solid'] .consumer-page,
body[data-selected-theme='solid'] .api-page {
  background: var(--solid-bg) !important;
}

body[data-selected-theme='solid'].landing-active .landing-page,
body[data-selected-theme='solid'].login-active .login-page,
body[data-selected-theme='solid'].feedback-active .feedback-page {
  background: var(--solid-bg) !important;
}

body[data-selected-theme='solid'] .topbar,
body[data-selected-theme='solid'] .sidebar,
body[data-selected-theme='solid'] .board,
body[data-selected-theme='solid'] .alerts,
body[data-selected-theme='solid'] .kpi-card,
body[data-selected-theme='solid'] .cockpit-panel,
body[data-selected-theme='solid'] .category-card,
body[data-selected-theme='solid'] .category-tabs,
body[data-selected-theme='solid'] .category-kpi-card,
body[data-selected-theme='solid'] .metric-trend-card,
body[data-selected-theme='solid'] .category-overview-card,
body[data-selected-theme='solid'] .category-overview-chart,
body[data-selected-theme='solid'] .product-filter-panel,
body[data-selected-theme='solid'] .product-results,
body[data-selected-theme='solid'] .sales-rank-filter,
body[data-selected-theme='solid'] .sales-rank-results,
body[data-selected-theme='solid'] .creator-search-panel,
body[data-selected-theme='solid'] .creator-rank-filter,
body[data-selected-theme='solid'] .creator-rank-results,
body[data-selected-theme='solid'] .store-filter-panel,
body[data-selected-theme='solid'] .store-rank-filter,
body[data-selected-theme='solid'] .store-rank-results,
body[data-selected-theme='solid'] .live-search-panel,
body[data-selected-theme='solid'] .live-rank-filter,
body[data-selected-theme='solid'] .live-rank-results,
body[data-selected-theme='solid'] .competitor-panel,
body[data-selected-theme='solid'] .competitor-kpi-card,
body[data-selected-theme='solid'] .competitor-alerts,
body[data-selected-theme='solid'] .chat-bi-main,
body[data-selected-theme='solid'] .chat-bi-sidebar,
body[data-selected-theme='solid'] .chat-bi-composer,
body[data-selected-theme='solid'] .notification-shell,
body[data-selected-theme='solid'] .notification-kpi-card,
body[data-selected-theme='solid'] .settings-card,
body[data-selected-theme='solid'] .settings-main-panel,
body[data-selected-theme='solid'] .settings-preview-panel,
body[data-selected-theme='solid'] .team-kpi-card,
body[data-selected-theme='solid'] .team-card,
body[data-selected-theme='solid'] .account-main,
body[data-selected-theme='solid'] .consumer-kpi-card,
body[data-selected-theme='solid'] .consumer-panel,
body[data-selected-theme='solid'] .api-kpi-card,
body[data-selected-theme='solid'] .api-panel,
body[data-selected-theme='solid'].landing-active .landing-top,
body[data-selected-theme='solid'].landing-active .landing-stat,
body[data-selected-theme='solid'].landing-active .landing-capability-card,
body[data-selected-theme='solid'].landing-active .landing-coverage-panel,
body[data-selected-theme='solid'].landing-active .landing-plan-card,
body[data-selected-theme='solid'].landing-active .landing-footer,
body[data-selected-theme='solid'].landing-active .landing-visual-card,
body[data-selected-theme='solid'].login-active .login-card,
body[data-selected-theme='solid'].login-active .login-demo-list,
body[data-selected-theme='solid'].login-active .login-hero-panel {
  border-color: var(--solid-line) !important;
  border-radius: 8px !important;
  background: var(--solid-panel) !important;
  box-shadow: var(--solid-shadow) !important;
}

body[data-selected-theme='solid'] .kpi-card:hover,
body[data-selected-theme='solid'] .metric-trend-card:hover,
body[data-selected-theme='solid'] .category-kpi-card:hover,
body[data-selected-theme='solid'] .competitor-kpi-card:hover,
body[data-selected-theme='solid'].landing-active .landing-capability-card:hover {
  border-color: rgba(86, 97, 215, 0.24) !important;
  box-shadow: var(--solid-shadow-hover) !important;
  transform: translateY(-1px);
}

body[data-selected-theme='solid'] .primary-button,
body[data-selected-theme='solid'] .board-export-button,
body[data-selected-theme='solid'] .board-tool-button.primary,
body[data-selected-theme='solid'] .category-action-button,
body[data-selected-theme='solid'] .consumer-action-button,
body[data-selected-theme='solid'] .api-primary,
body[data-selected-theme='solid'] .team-primary-button,
body[data-selected-theme='solid'] .ai-send-button,
body[data-selected-theme='solid'].landing-active .landing-primary-button,
body[data-selected-theme='solid'].landing-active .landing-ghost-button,
body[data-selected-theme='solid'].login-active .login-submit,
body[data-selected-theme='solid'].login-active .login-register-submit {
  border-color: var(--solid-accent) !important;
  border-radius: 6px !important;
  background: var(--solid-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(86, 97, 215, 0.16) !important;
}

body[data-selected-theme='solid'] .ghost-button,
body[data-selected-theme='solid'] .icon-button,
body[data-selected-theme='solid'] .chat-button,
body[data-selected-theme='solid'] .market-toggle,
body[data-selected-theme='solid'] .theme-toggle,
body[data-selected-theme='solid'] .language-toggle,
body[data-selected-theme='solid'] .account-entry-button,
body[data-selected-theme='solid'] .filter-chip,
body[data-selected-theme='solid'] .metric-chip,
body[data-selected-theme='solid'] .quick-filter-chip,
body[data-selected-theme='solid'] .category-filter-chip,
body[data-selected-theme='solid'] .sales-period-button,
body[data-selected-theme='solid'] .theme-option,
body[data-selected-theme='solid'] .language-option,
body[data-selected-theme='solid'] .market-option,
body[data-selected-theme='solid'].landing-active .landing-secondary-button,
body[data-selected-theme='solid'].login-active .login-demo-toggle,
body[data-selected-theme='solid'].login-active .login-extra-actions button {
  border-color: var(--solid-line) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #475467 !important;
  box-shadow: none !important;
}

body[data-selected-theme='solid'] .score-fill,
body[data-selected-theme='solid'] .score-fill.green,
body[data-selected-theme='solid'] .score-fill.muted,
body[data-selected-theme='solid'] .trend-mini-fill,
body[data-selected-theme='solid'] .category-heat-fill,
body[data-selected-theme='solid'] .category-overview-bar,
body[data-selected-theme='solid'] .landing-mock-tile.primary,
body[data-selected-theme='solid'] .landing-mock-tile.accent,
body[data-selected-theme='solid'] .landing-mock-pill {
  background: var(--solid-accent) !important;
  box-shadow: none !important;
}

body[data-selected-theme='solid'].landing-active .landing-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
}

body[data-selected-theme='solid'].landing-active .landing-title {
  max-width: 840px;
  font-size: clamp(46px, 6vw, 76px) !important;
  line-height: 0.98 !important;
}

body[data-selected-theme='solid'].landing-active .landing-kicker,
body[data-selected-theme='solid'].landing-active .landing-nav,
body[data-selected-theme='solid'].landing-active .landing-switcher .theme-toggle,
body[data-selected-theme='solid'].landing-active .landing-switcher .language-toggle,
body[data-selected-theme='solid'].login-active .login-theme-switcher .theme-toggle,
body[data-selected-theme='solid'].login-active .login-language-switcher .language-toggle {
  background: #ffffff !important;
}

body[data-selected-theme='solid'].landing-active .landing-visual-card,
body[data-selected-theme='solid'].login-active .login-hero-panel {
  background: #161d2f !important;
  border-color: #252f46 !important;
}

body[data-selected-theme='solid'].landing-active .landing-dashboard-mock,
body[data-selected-theme='solid'].landing-active .landing-visual-card,
body[data-selected-theme='solid'].login-active .login-hero-panel,
body[data-selected-theme='solid'] .ai-orb-button,
body[data-selected-theme='solid'] .ai-chat-panel,
body[data-selected-theme='solid'] .network-status,
body[data-selected-theme='solid'] .route-loader-card {
  background-image: none !important;
}

@media (max-width: 1180px) {
  .landing-page,
  body.login-active,
  body.feedback-active {
    min-width: 0;
    overflow-x: hidden;
  }
}

@media (max-width: 980px) {
  .landing-top,
  .login-top {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .landing-nav,
  .login-feedback {
    display: none;
  }

  .landing-actions,
  .login-top-actions {
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
  }

  .landing-switcher .theme-toggle,
  .landing-switcher .language-toggle,
  .login-theme-switcher .theme-toggle,
  .login-language-switcher .language-toggle {
    min-width: 0;
    width: 42px;
    padding: 0;
  }

  .landing-switcher .theme-current,
  .landing-switcher .language-current,
  .landing-switcher .theme-caret,
  .landing-switcher .language-caret,
  .login-theme-switcher .theme-current,
  .login-language-switcher .language-current,
  .login-theme-switcher .theme-caret,
  .login-language-switcher .language-caret {
    display: none;
  }

  .landing-hero,
  .login-main {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .landing-title,
  .login-title {
    font-size: clamp(32px, 7vw, 54px);
    line-height: 1.04;
  }

  .landing-copy,
  .login-subtitle {
    max-width: 60ch;
    font-size: clamp(14px, 2.2vw, 16px);
  }
}

@media (max-width: 720px) {
  .top-left,
  .top-actions,
  .landing-actions,
  .login-top-actions {
    min-width: 0;
  }

  .landing-top,
  .login-top {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .landing-brand,
  .login-brand {
    min-width: 0;
  }

  .landing-brand span,
  .login-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .landing-login-button,
  .landing-ghost-button {
    min-width: 0;
    padding: 0 12px;
  }

  .login-gate,
  .landing-page {
    min-width: 0 !important;
    overflow-x: hidden;
  }

  .login-card,
  .landing-visual-card,
  .landing-product-card {
    max-width: 100%;
  }
}

.landing-title,
.login-title h1,
.login-register-title h2,
.feedback-title,
.category-title,
.product-page-title,
.creator-page-title,
.store-page-title,
.live-page-title,
.competitor-page-title,
.competitor-title,
.chat-bi-title,
.creator-crm-title,
.team-title,
.notifications-title,
.settings-title,
.consumer-title,
.api-title,
.account-page-title,
.sales-rank-title,
.creator-rank-title,
.live-rank-title,
.results-title,
.board-title h2,
.alerts-title strong,
.category-card-head h2,
.settings-card h2,
.competitor-card-title,
.consumer-section-title,
.ops-loop-title,
.data-trust-title,
.footer-column-title,
.site-footer-column-title {
  font-family: var(--title-font) !important;
  color: var(--title-ink) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
  font-feature-settings:
    'kern' 1,
    'tnum' 1;
}

.landing-title {
  font-weight: 860 !important;
  line-height: 1.02 !important;
}

.landing-carousel-hero {
  width: min(1480px, calc(100vw - 64px));
  margin: clamp(16px, 2.6vh, 28px) auto 0;
}

.landing-carousel-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 0.28fr) minmax(760px, 1fr);
  gap: clamp(18px, 2.8vw, 38px);
  min-height: clamp(580px, calc(100vh - 142px), 1160px);
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid color-mix(in srgb, var(--landing-accent) 14%, var(--landing-border));
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--landing-bg-1) 94%, #ffffff),
    color-mix(in srgb, var(--landing-bg-2) 76%, #ffffff)
  );
  box-shadow: 0 20px 54px rgba(24, 32, 51, 0.08);
}

.landing-carousel-copy {
  display: grid;
  align-content: center;
  gap: 14px;
  min-width: 0;
  padding-right: clamp(0px, 1vw, 10px);
}

.landing-carousel-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--landing-accent) 18%, var(--landing-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--landing-accent) 8%, #ffffff);
  color: color-mix(in srgb, var(--landing-accent) 86%, var(--landing-heading));
  font-size: 12px;
  font-weight: 860;
}

.landing-carousel-kicker::before {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--landing-accent);
  content: '';
}

.landing-carousel-copy h2 {
  max-width: 430px;
  margin: 0;
  color: var(--landing-heading);
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
}

.landing-carousel-copy p {
  max-width: 390px;
  margin: 0;
  color: var(--landing-muted);
  font-size: 15px;
  font-weight: 690;
  line-height: 1.72;
}

.landing-carousel-stage {
  position: relative;
  overflow: hidden;
  min-height: clamp(470px, calc(100vh - 238px), 910px);
  border-radius: 8px;
}

.landing-carousel-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(300px, 0.42fr);
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #141b2d 0%, #0f1627 58%, #0b1020 100%);
  background-size:
    100% 64px,
    72px 100%,
    auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 54px rgba(10, 16, 31, 0.2);
  opacity: 0;
  transform: translateX(18px);
  pointer-events: none;
  transition:
    opacity 0.42s ease,
    transform 0.42s ease;
}

.landing-carousel-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.landing-slide-visual,
.landing-slide-caption {
  min-width: 0;
  border-radius: 8px;
}

.landing-slide-visual {
  display: grid;
  align-content: stretch;
  gap: 14px;
  padding: 0;
  background: transparent;
  color: #f8fafc;
  box-shadow: none;
}

.landing-slide-visual.product,
.landing-slide-visual.creator,
.landing-slide-visual.live,
.landing-slide-visual.alert {
  background: transparent;
}

.landing-slide-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.landing-slide-toolbar span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: #dbe4ff;
  font-size: 11px;
  font-weight: 840;
}

.landing-slide-toolbar strong {
  max-width: 260px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  text-align: right;
}

.landing-slide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-height: 0;
}

.landing-slide-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.landing-slide-card.main {
  grid-row: span 2;
}

.landing-slide-card span,
.landing-live-row span,
.landing-alert-preview span,
.landing-ai-preview span {
  color: #aeb8cc;
  font-size: 12px;
  font-weight: 760;
}

.landing-slide-card strong {
  color: #ffffff;
  font-size: 28px;
  font-weight: 920;
}

.landing-slide-card em {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--landing-accent) var(--value),
    rgba(255, 255, 255, 0.14) var(--value)
  );
}

.landing-slide-line {
  position: relative;
  min-height: 210px;
  margin-top: 12px;
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size:
    100% 32px,
    54px 100%;
}

.landing-slide-line::before {
  position: absolute;
  inset: 28px 14px 18px;
  border-bottom: 3px solid var(--landing-accent);
  border-left: 3px solid transparent;
  border-radius: 40% 60% 42% 58%;
  transform: skew(-12deg) rotate(-9deg);
  content: '';
}

.landing-slide-line i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9px;
  height: 9px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--landing-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--landing-accent) 18%, transparent);
}

.landing-slide-caption {
  display: grid;
  align-self: center;
  gap: 12px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 40px rgba(3, 7, 18, 0.2);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.landing-slide-caption::before {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--landing-accent);
  content: '';
}

.landing-slide-caption small {
  color: color-mix(in srgb, var(--landing-accent) 86%, var(--landing-heading));
  font-size: 11px;
  font-weight: 880;
}

.landing-slide-caption h3 {
  margin: 0;
  color: #101828;
  font-size: clamp(21px, 2vw, 30px);
  font-weight: 900;
  line-height: 1.15;
}

.landing-slide-caption p {
  margin: 0;
  color: #667085;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.62;
}

.landing-creator-preview-list {
  display: grid;
  gap: 10px;
  align-self: center;
}

.landing-creator-preview-list div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.landing-creator-preview-list b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--landing-accent) 22%, #ffffff);
  color: #ffffff;
  font-size: 12px;
}

.landing-creator-preview-list span {
  color: #ffffff;
  font-weight: 860;
}

.landing-creator-preview-list strong {
  color: #dbe4ff;
  font-size: 13px;
}

.landing-slide-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: end;
}

.landing-slide-tags span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #dbe4ff;
  font-size: 12px;
  font-weight: 800;
}

.landing-live-wave {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  min-height: clamp(270px, 44vh, 520px);
  padding: 18px;
  border-radius: 8px;
  background: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 100% 42px;
}

.landing-live-wave span {
  display: block;
  height: var(--h);
  min-height: 44px;
  border-radius: 8px 8px 4px 4px;
  background: color-mix(in srgb, var(--landing-accent) 76%, #ffffff);
}

.landing-live-row,
.landing-alert-preview {
  display: grid;
  grid-template-columns: repeat(4, auto);
  align-items: center;
  gap: 10px 16px;
}

.landing-live-row b,
.landing-alert-preview b,
.landing-ai-preview strong {
  color: #ffffff;
  font-weight: 900;
}

.landing-alert-preview {
  grid-template-columns: 1fr;
}

.landing-alert-preview div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.landing-ai-preview {
  display: grid;
  gap: 9px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.landing-carousel-controls {
  position: absolute;
  right: clamp(42px, 4vw, 62px);
  bottom: clamp(34px, 4vh, 52px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 30px rgba(3, 7, 18, 0.16);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  z-index: 2;
}

.landing-carousel-arrow,
.landing-carousel-dots button {
  border: 1px solid color-mix(in srgb, var(--landing-accent) 16%, var(--landing-border));
  background: #ffffff;
  color: var(--landing-heading);
  cursor: pointer;
}

.landing-carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 22px;
  font-weight: 800;
}

.landing-carousel-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.landing-carousel-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 999px;
}

.landing-carousel-dots button.active {
  width: 28px;
  background: var(--landing-accent);
}

.landing-page .landing-hero {
  min-height: auto !important;
  padding-top: 14px !important;
  padding-bottom: 64px !important;
}

.landing-page[data-theme='light'] .landing-slide-caption,
.landing-page[data-theme='black'] .landing-slide-caption,
.landing-page[data-theme='custom'][data-custom-mode='dark'] .landing-slide-caption {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.86);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.landing-page[data-theme='light'] .landing-slide-caption h3,
.landing-page[data-theme='black'] .landing-slide-caption h3,
.landing-page[data-theme='custom'][data-custom-mode='dark'] .landing-slide-caption h3 {
  color: #f8fafc;
}

.landing-page[data-theme='light'] .landing-slide-caption p,
.landing-page[data-theme='black'] .landing-slide-caption p,
.landing-page[data-theme='custom'][data-custom-mode='dark'] .landing-slide-caption p {
  color: #cbd5e1;
}

.landing-page[data-theme='light'] .landing-carousel-controls,
.landing-page[data-theme='black'] .landing-carousel-controls,
.landing-page[data-theme='custom'][data-custom-mode='dark'] .landing-carousel-controls {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.72);
}

.landing-page[data-theme='light'] .landing-carousel-arrow,
.landing-page[data-theme='light'] .landing-carousel-dots button,
.landing-page[data-theme='black'] .landing-carousel-arrow,
.landing-page[data-theme='black'] .landing-carousel-dots button,
.landing-page[data-theme='custom'][data-custom-mode='dark'] .landing-carousel-arrow,
.landing-page[data-theme='custom'][data-custom-mode='dark'] .landing-carousel-dots button {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}

body[data-selected-theme='solid'].landing-active .landing-carousel-shell,
body[data-selected-theme='solid'].landing-active .landing-slide-caption {
  border-color: rgba(103, 113, 142, 0.14);
  background: #ffffff;
}

body[data-selected-theme='solid'].landing-active .landing-carousel-shell {
  box-shadow: 0 14px 34px rgba(24, 32, 51, 0.065);
}

body[data-selected-theme='solid'].landing-active .landing-carousel-copy h2,
body[data-selected-theme='solid'].landing-active .landing-slide-caption h3 {
  color: #101828;
}

body[data-selected-theme='solid'].landing-active .landing-carousel-copy p,
body[data-selected-theme='solid'].landing-active .landing-slide-caption p {
  color: #667085;
}

@media (prefers-reduced-motion: reduce) {
  .landing-carousel-slide {
    transition: none;
  }
}

@media (max-width: 1180px) {
  .landing-carousel-shell {
    grid-template-columns: 1fr;
  }

  .landing-carousel-stage {
    min-height: 520px;
  }
}

@media (max-width: 860px) {
  .landing-carousel-hero {
    width: min(100% - 32px, 760px);
    margin-top: 28px;
  }

  .landing-carousel-slide {
    grid-template-columns: 1fr;
  }

  .landing-carousel-stage {
    min-height: 650px;
  }

  .landing-slide-grid {
    min-height: 0;
  }

  .landing-carousel-controls {
    position: static;
    justify-content: center;
    margin-top: 14px;
  }
}

@media (max-width: 620px) {
  .landing-carousel-shell {
    padding: 16px;
  }

  .landing-slide-visual,
  .landing-slide-caption {
    padding: 16px;
  }

  .landing-slide-toolbar {
    flex-direction: column;
  }

  .landing-slide-toolbar strong {
    text-align: left;
  }

  .landing-slide-grid,
  .landing-live-row {
    grid-template-columns: 1fr;
  }
}

.landing-page .landing-reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
  transition-delay: calc(var(--reveal-index, 0) * 58ms);
  will-change: opacity, transform;
}

.landing-page .landing-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.landing-page .landing-capability-card,
.landing-page .landing-coverage-panel,
.landing-page .landing-flow-card,
.landing-page .landing-product-card,
.landing-page .landing-visual-foot,
.landing-page .landing-slide-card,
.landing-page .landing-slide-caption,
.landing-page .landing-slide-visual {
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.landing-page .landing-capability-card:hover,
.landing-page .landing-coverage-panel:hover,
.landing-page .landing-flow-card:hover,
.landing-page .landing-product-card:hover {
  border-color: color-mix(in srgb, var(--landing-accent) 34%, rgba(255, 255, 255, 0.18));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--landing-accent) 13%, rgba(15, 23, 42, 0.08));
  transform: translateY(-3px);
}

.landing-page .landing-carousel-slide.active .landing-slide-visual,
.landing-page .landing-carousel-slide.active .landing-slide-caption {
  animation: landingModuleRise 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-page .landing-carousel-slide.active .landing-slide-card,
.landing-page .landing-carousel-slide.active .landing-creator-preview-list > div,
.landing-page .landing-carousel-slide.active .landing-live-wave span,
.landing-page .landing-carousel-slide.active .landing-alert-preview > div,
.landing-page .landing-carousel-slide.active .landing-ai-preview {
  animation: landingModulePop 540ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--slide-pop-index, 0) * 70ms + 90ms);
}

.landing-page .landing-carousel-slide.active .landing-slide-card:nth-child(2),
.landing-page .landing-carousel-slide.active .landing-creator-preview-list > div:nth-child(2),
.landing-page .landing-carousel-slide.active .landing-alert-preview > div:nth-child(2) {
  --slide-pop-index: 1;
}

.landing-page .landing-carousel-slide.active .landing-slide-card:nth-child(3),
.landing-page .landing-carousel-slide.active .landing-creator-preview-list > div:nth-child(3),
.landing-page .landing-carousel-slide.active .landing-alert-preview > div:nth-child(3) {
  --slide-pop-index: 2;
}

.landing-page .landing-carousel-slide.active .landing-live-wave span:nth-child(2) {
  --slide-pop-index: 1;
}

.landing-page .landing-carousel-slide.active .landing-live-wave span:nth-child(3) {
  --slide-pop-index: 2;
}

.landing-page .landing-carousel-slide.active .landing-live-wave span:nth-child(4) {
  --slide-pop-index: 3;
}

.landing-page .landing-carousel-slide.active .landing-live-wave span:nth-child(5) {
  --slide-pop-index: 4;
}

.landing-page .landing-carousel-slide.active .landing-live-wave span:nth-child(6) {
  --slide-pop-index: 5;
}

.landing-page .landing-carousel-slide.active .landing-live-wave span:nth-child(7) {
  --slide-pop-index: 6;
}

@keyframes landingModuleRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes landingModulePop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  72% {
    opacity: 1;
    transform: translateY(-1px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .landing-reveal,
  .landing-page .landing-carousel-slide.active .landing-slide-visual,
  .landing-page .landing-carousel-slide.active .landing-slide-caption,
  .landing-page .landing-carousel-slide.active .landing-slide-card,
  .landing-page .landing-carousel-slide.active .landing-creator-preview-list > div,
  .landing-page .landing-carousel-slide.active .landing-live-wave span,
  .landing-page .landing-carousel-slide.active .landing-alert-preview > div,
  .landing-page .landing-carousel-slide.active .landing-ai-preview {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.landing-page {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--landing-accent) 5%, transparent) 0 1px,
      transparent 1px 100%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--landing-accent) 4%, transparent) 0 1px,
      transparent 1px 100%
    ),
    linear-gradient(
      180deg,
      var(--landing-bg-1) 0%,
      var(--landing-bg-2) 56%,
      var(--landing-bg-1) 100%
    );
  background-size:
    88px 100%,
    100% 88px,
    auto;
}

.landing-page .landing-signal-strip {
  position: relative;
  top: auto;
  z-index: 1;
  width: min(1480px, calc(100vw - 72px));
  height: 34px;
  margin: 10px auto 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.landing-page .landing-signal-strip.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: none;
  visibility: hidden;
}

.landing-page .landing-signal-strip::before,
.landing-page .landing-signal-strip::after {
  display: none;
}

.landing-page .landing-signal-strip::before {
  left: 0;
  background: linear-gradient(
    90deg,
    var(--landing-bg-1),
    color-mix(in srgb, var(--landing-bg-1) 0%, transparent)
  );
}

.landing-page .landing-signal-strip::after {
  right: 0;
  background: linear-gradient(
    270deg,
    var(--landing-bg-1),
    color-mix(in srgb, var(--landing-bg-1) 0%, transparent)
  );
}

.landing-page .landing-signal-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: landingSignalMarquee 25s linear infinite;
  will-change: transform;
}

.landing-page .landing-signal-strip:hover .landing-signal-track {
  animation-play-state: paused;
}

.landing-page .landing-signal-row {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  height: 100%;
  padding: 0 clamp(14px, 1.8vw, 24px);
  white-space: nowrap;
}

.landing-page .landing-signal-row span {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 840;
  letter-spacing: 0;
}

.landing-page .landing-signal-row span:nth-of-type(odd) {
  color: color-mix(in srgb, var(--landing-accent) 72%, #2563eb);
}

.landing-page .landing-signal-row span:nth-of-type(even) {
  color: var(--landing-heading);
}

.landing-page .landing-signal-row i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--landing-accent) 45%, transparent);
  box-shadow: none;
}

.landing-page[data-theme='black'] .landing-signal-strip,
.landing-page[data-theme='custom'][data-custom-mode='dark'] .landing-signal-strip {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.landing-page[data-theme='black'] .landing-signal-strip::before,
.landing-page[data-theme='custom'][data-custom-mode='dark'] .landing-signal-strip::before {
  background: linear-gradient(90deg, #070b15, rgba(7, 11, 21, 0));
}

.landing-page[data-theme='black'] .landing-signal-strip::after,
.landing-page[data-theme='custom'][data-custom-mode='dark'] .landing-signal-strip::after {
  background: linear-gradient(270deg, #070b15, rgba(7, 11, 21, 0));
}

.landing-page[data-theme='black'] .landing-signal-row span,
.landing-page[data-theme='custom'][data-custom-mode='dark'] .landing-signal-row span {
  color: color-mix(in srgb, var(--landing-accent) 76%, #ffffff);
}

.landing-page[data-theme='black'] .landing-signal-row span:nth-of-type(even),
.landing-page[data-theme='custom'][data-custom-mode='dark']
  .landing-signal-row
  span:nth-of-type(even) {
  color: rgba(255, 255, 255, 0.86);
}

@keyframes landingSignalMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.landing-page .landing-carousel-hero {
  display: flex;
  width: min(1480px, calc(100vw - 72px));
  min-height: calc(100vh - 132px);
  align-items: center;
  margin: 0 auto;
  padding: clamp(14px, 2vh, 28px) 0 clamp(12px, 2vh, 26px);
}

.landing-page .landing-carousel-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  min-height: clamp(640px, calc(100vh - 118px), 820px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(16px, 2.4vh, 26px);
  overflow: hidden;
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid color-mix(in srgb, var(--landing-accent) 18%, var(--landing-border));
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--landing-bg-1) 98%, #ffffff) 0 58%,
      color-mix(in srgb, var(--landing-accent) 6%, var(--landing-bg-1)) 58% 100%
    ),
    color-mix(in srgb, var(--landing-bg-1) 98%, #ffffff);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.095);
}

.landing-page .landing-carousel-shell::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--landing-accent) 9%, transparent) 0 1px,
      transparent 1px 100%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--landing-accent) 7%, transparent) 0 1px,
      transparent 1px 100%
    );
  background-size:
    74px 100%,
    100% 74px;
  content: '';
  opacity: 0.52;
}

.landing-page .landing-carousel-copy {
  z-index: 2;
  width: min(920px, 100%);
  justify-self: center;
  align-content: start;
  justify-items: center;
  gap: 13px;
  padding: 0;
  text-align: center;
}

.landing-page .landing-carousel-kicker {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--landing-accent) 9%, transparent);
  color: color-mix(in srgb, var(--landing-accent) 88%, var(--landing-heading));
  font-size: 12px;
  font-weight: 860;
}

.landing-page .landing-carousel-kicker::before {
  width: 16px;
  height: 2px;
  border-radius: 999px;
  box-shadow: none;
}

.landing-page .landing-carousel-copy h2 {
  max-width: 920px;
  color: var(--landing-heading);
  font-size: clamp(38px, 4.65vw, 64px);
  font-weight: 940;
  line-height: 1.02;
  text-wrap: balance;
}

.landing-page .landing-carousel-copy p {
  max-width: 720px;
  color: var(--landing-muted);
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 690;
  line-height: 1.62;
}

.landing-page .landing-carousel-stage {
  z-index: 1;
  min-height: clamp(420px, 50vh, 560px);
  overflow: visible;
  border-radius: 10px;
}

.landing-page .landing-carousel-slide {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.33fr);
  gap: clamp(18px, 2.2vw, 28px);
  padding: clamp(18px, 2.1vw, 30px);
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, #141b2d 0%, #0f1627 56%, #0a1020 100%);
  background-size:
    100% 58px,
    64px 100%,
    auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 26px 70px rgba(3, 7, 18, 0.22);
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-page .landing-carousel-slide.active {
  transform: translateY(0) scale(1);
}

.landing-page .landing-slide-toolbar {
  align-items: center;
}

.landing-page .landing-slide-toolbar span {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.075);
}

.landing-page .landing-slide-toolbar strong {
  max-width: 420px;
  font-size: clamp(17px, 1.45vw, 24px);
}

.landing-page .landing-slide-card,
.landing-page .landing-creator-preview-list div,
.landing-page .landing-alert-preview div,
.landing-page .landing-ai-preview {
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.landing-page .landing-slide-card.main {
  min-height: 100%;
}

.landing-page .landing-slide-line {
  min-height: clamp(190px, 28vh, 300px);
}

.landing-page .landing-slide-caption {
  align-self: end;
  gap: 13px;
  padding: clamp(18px, 2vw, 26px);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 44px rgba(3, 7, 18, 0.22);
}

.landing-page .landing-slide-caption h3 {
  font-size: clamp(20px, 2vw, 31px);
  text-wrap: balance;
}

.landing-page .landing-carousel-controls {
  right: 50%;
  bottom: clamp(20px, 3vh, 34px);
  transform: translateX(50%);
  border-radius: 9px;
}

.landing-page .landing-hero {
  width: min(1260px, calc(100vw - 64px));
  min-height: auto !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 0;
  padding: clamp(18px, 3vh, 34px) 0 clamp(62px, 8vh, 96px) !important;
}

.landing-page .landing-hero-copy {
  display: grid;
  max-width: 960px;
  gap: 0;
}

.landing-page .landing-kicker {
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 12px;
}

.landing-page .landing-title {
  max-width: 960px;
  margin: 18px 0 12px;
  color: var(--landing-heading);
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.08;
  text-wrap: balance;
}

.landing-page .landing-title span {
  color: inherit;
}

.landing-page .landing-title span:empty {
  display: none;
}

.landing-page .landing-copy {
  max-width: 760px;
  color: var(--landing-muted);
  font-size: 16px;
}

.landing-page .landing-cta-row {
  margin-top: 24px;
}

.landing-page .landing-stats {
  width: min(100%, 980px);
  max-width: none;
  margin-top: 30px;
}

.landing-page .landing-stat {
  border-color: color-mix(in srgb, var(--landing-accent) 14%, var(--landing-border));
  background: color-mix(in srgb, var(--landing-surface) 82%, transparent);
}

.landing-page .landing-visual {
  display: none;
}

.landing-page .landing-section {
  width: min(1480px, calc(100vw - 72px));
  padding: clamp(58px, 8vh, 90px) 0;
}

.landing-page .landing-footer {
  width: min(1480px, calc(100vw - 72px));
}

.landing-page .landing-section-head {
  align-items: flex-end;
  margin-bottom: 24px;
}

.landing-page .landing-section-head h2 {
  max-width: 680px;
  font-size: clamp(27px, 2.6vw, 38px);
  line-height: 1.12;
  text-wrap: balance;
}

.landing-page .landing-capability-card,
.landing-page .landing-coverage-panel,
.landing-page .landing-flow-card,
.landing-page .landing-plan-card {
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
}

.landing-page .landing-capability-card {
  min-height: 178px;
  padding: 22px;
}

@media (max-width: 1180px) {
  .landing-page .landing-top,
  .landing-page .landing-signal-strip,
  .landing-page .landing-carousel-hero,
  .landing-page .landing-section,
  .landing-page .landing-footer {
    width: min(100% - 40px, 1100px);
  }

  .landing-page .landing-carousel-shell {
    min-height: auto;
  }

  .landing-page .landing-carousel-stage {
    min-height: 560px;
  }

  .landing-page .landing-carousel-slide {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .landing-page .landing-top,
  .landing-page .landing-signal-strip,
  .landing-page .landing-carousel-hero,
  .landing-page .landing-footer {
    width: min(100% - 32px, 760px);
  }

  .landing-page .landing-carousel-hero {
    min-height: auto;
    padding-top: 26px;
  }

  .landing-page .landing-carousel-shell {
    padding: 20px;
  }

  .landing-page .landing-carousel-copy {
    text-align: left;
    justify-items: start;
  }

  .landing-page .landing-carousel-copy h2 {
    font-size: clamp(34px, 8vw, 54px);
  }

  .landing-page .landing-carousel-stage {
    min-height: 660px;
  }

  .landing-page .landing-slide-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-page .landing-slide-toolbar strong {
    max-width: none;
    text-align: left;
  }

  .landing-page .landing-hero,
  .landing-page .landing-section {
    width: min(100% - 32px, 760px);
  }

  .landing-page .landing-stats,
  .landing-page .landing-capability-grid,
  .landing-page .landing-coverage {
    grid-template-columns: 1fr;
  }
}

.landing-page .landing-section {
  position: relative;
}

.landing-page .landing-section + .landing-section {
  border-top: 1px solid color-mix(in srgb, var(--landing-accent) 10%, transparent);
}

.landing-page .landing-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.58fr);
  align-items: start;
  gap: clamp(28px, 5vw, 70px);
}

.landing-page .landing-section-head::before {
  display: block;
  width: 42px;
  height: 3px;
  grid-column: 1 / -1;
  margin-bottom: -8px;
  border-radius: 999px;
  background: var(--landing-accent);
  content: '';
}

.landing-page .landing-section-head h2 {
  position: relative;
  max-width: 760px;
  margin: 0;
}

.landing-page .landing-section-head p {
  max-width: none;
  padding-top: 6px;
}

.landing-page .landing-capability-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.landing-page .landing-capability-card {
  position: relative;
  grid-column: span 2;
  overflow: hidden;
  min-height: 184px;
  border-color: color-mix(in srgb, var(--landing-accent) 12%, var(--landing-border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--landing-surface) 94%, #ffffff),
    var(--landing-surface)
  );
}

.landing-page .landing-capability-card:nth-child(1),
.landing-page .landing-capability-card:nth-child(5) {
  grid-column: span 3;
}

.landing-page .landing-capability-card::after {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 74px;
  height: 24px;
  border-bottom: 3px solid color-mix(in srgb, var(--landing-accent) 72%, transparent);
  border-left: 3px solid transparent;
  border-radius: 0 0 26px 26px;
  content: '';
  opacity: 0.42;
  transform: skew(-18deg);
}

.landing-page .landing-capability-card:hover::after {
  opacity: 0.78;
}

.landing-page .landing-card-icon {
  border: 1px solid color-mix(in srgb, var(--landing-accent) 22%, transparent);
  box-shadow: none;
}

.landing-page .landing-capability-card h3 {
  margin-top: 16px;
  font-size: 18px;
}

.landing-page .landing-coverage {
  grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1fr);
  gap: 14px;
}

.landing-page .landing-coverage-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--landing-accent) 9%, transparent),
      transparent 52%
    ),
    var(--landing-surface);
}

.landing-page .landing-coverage-panel::after {
  position: absolute;
  right: 28px;
  top: 28px;
  width: 84px;
  height: 84px;
  border: 1px solid color-mix(in srgb, var(--landing-accent) 20%, transparent);
  border-radius: 50%;
  content: '';
  opacity: 0.48;
}

.landing-page .landing-coverage-list {
  gap: 0;
}

.landing-page .landing-coverage-item {
  padding: 17px 0;
}

.landing-page .landing-coverage-item strong {
  min-width: 88px;
  text-align: right;
  color: color-mix(in srgb, var(--landing-accent) 88%, #ffffff);
  font-size: 16px;
}

.landing-page .landing-region-cloud span {
  border-radius: 7px;
  border-color: color-mix(in srgb, var(--landing-accent) 15%, var(--landing-border));
  background: color-mix(in srgb, var(--landing-accent) 7%, #ffffff);
  color: color-mix(in srgb, var(--landing-accent) 58%, var(--landing-heading));
}

.landing-page .landing-workflow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.landing-page .landing-flow-card {
  display: grid;
  min-height: 156px;
  align-content: start;
  padding: 22px 22px 22px 58px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--landing-surface) 94%, #ffffff),
    var(--landing-surface)
  );
}

.landing-page .landing-flow-card::before {
  position: absolute;
  left: 20px;
  top: 22px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--landing-accent) 14%, transparent);
  color: color-mix(in srgb, var(--landing-accent) 88%, #ffffff);
  content: '';
}

.landing-page .landing-flow-card::after {
  left: 32px;
  top: 56px;
  right: auto;
  width: 1px;
  height: calc(100% - 76px);
  background: color-mix(in srgb, var(--landing-accent) 20%, transparent);
}

.landing-page .landing-flow-card small {
  position: absolute;
  left: 24px;
  top: 28px;
  font-size: 10px;
}

.landing-page .landing-flow-card strong {
  margin-top: 0;
}

.landing-page .landing-plan-card {
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--landing-accent) 12%, transparent),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--landing-surface) 96%, #ffffff),
      var(--landing-surface)
    );
}

.landing-page .landing-plan-card .landing-primary-button {
  min-width: 180px;
  background: var(--landing-accent);
}

@media (max-width: 1180px) {
  .landing-page .landing-section-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .landing-page .landing-capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-page .landing-capability-card,
  .landing-page .landing-capability-card:nth-child(1),
  .landing-page .landing-capability-card:nth-child(5) {
    grid-column: auto;
  }

  .landing-page .landing-coverage {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .landing-page .landing-capability-grid,
  .landing-page .landing-workflow {
    grid-template-columns: 1fr;
  }

  .landing-page .landing-flow-card::after {
    display: none;
  }

  .landing-page .landing-plan-card {
    grid-template-columns: 1fr;
  }
}

.landing-page .landing-hero {
  border-bottom: 1px solid color-mix(in srgb, var(--landing-heading) 10%, transparent);
}

.landing-page .landing-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 26px 0;
  border-top: 1px solid color-mix(in srgb, var(--landing-heading) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--landing-heading) 12%, transparent);
}

.landing-page .landing-stat,
body[data-selected-theme='solid'].landing-active .landing-stat {
  min-height: 0;
  padding: 0 clamp(18px, 2.6vw, 36px);
  border: 0 !important;
  border-left: 1px solid color-mix(in srgb, var(--landing-heading) 11%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.landing-page .landing-stat:first-child {
  padding-left: 0;
  border-left: 0 !important;
}

.landing-page .landing-stat strong {
  font-size: clamp(26px, 2.4vw, 38px);
  letter-spacing: 0;
}

.landing-page .landing-stat span {
  margin-top: 7px;
}

.landing-page .landing-section {
  overflow: visible;
}

.landing-page .landing-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--landing-heading) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--landing-heading) 12%, transparent);
}

.landing-page .landing-capability-card,
body[data-selected-theme='solid'].landing-active .landing-capability-card {
  display: grid;
  grid-column: auto !important;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 20px;
  align-content: center;
  min-height: 150px;
  padding: 28px clamp(18px, 2.6vw, 36px);
  overflow: visible;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--landing-heading) 10%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.landing-page .landing-capability-card:nth-child(odd) {
  padding-left: 0;
  border-right: 1px solid color-mix(in srgb, var(--landing-heading) 10%, transparent) !important;
}

.landing-page .landing-capability-card:nth-child(even) {
  padding-right: 0;
}

.landing-page .landing-capability-card:nth-last-child(-n + 2) {
  border-bottom: 0 !important;
}

.landing-page .landing-capability-card::after {
  display: none;
}

.landing-page .landing-capability-card:hover,
body[data-selected-theme='solid'].landing-active .landing-capability-card:hover {
  background: color-mix(in srgb, var(--landing-accent) 3%, transparent) !important;
  box-shadow: none !important;
}

.landing-page .landing-capability-card .landing-card-icon {
  grid-row: 1 / 3;
  align-self: start;
}

.landing-page .landing-capability-card h3 {
  align-self: end;
  margin: 2px 0 0;
}

.landing-page .landing-capability-card p {
  margin-top: 8px;
}

.landing-page .landing-coverage {
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  border-top: 1px solid color-mix(in srgb, var(--landing-heading) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--landing-heading) 12%, transparent);
}

.landing-page .landing-coverage-panel,
body[data-selected-theme='solid'].landing-active .landing-coverage-panel {
  padding: 36px clamp(30px, 4vw, 58px) 36px 0;
  overflow: visible;
  border: 0 !important;
  border-right: 1px solid color-mix(in srgb, var(--landing-heading) 11%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.landing-page .landing-coverage-panel::after {
  display: none;
}

.landing-page .landing-coverage-item {
  padding: 18px 0;
}

.landing-page .landing-region-cloud span {
  position: relative;
  padding: 0 0 0 13px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.landing-page .landing-region-cloud span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--landing-accent) 65%, var(--landing-heading));
  transform: translateY(-50%);
}

.landing-page .landing-workflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-left: clamp(30px, 4vw, 58px);
}

.landing-page .landing-flow-card,
body[data-selected-theme='solid'].landing-active .landing-flow-card {
  min-height: 0;
  padding: 28px 0 28px 54px;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--landing-heading) 10%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.landing-page .landing-flow-card:last-child {
  border-bottom: 0 !important;
}

.landing-page .landing-flow-card::before {
  left: 4px;
  top: 28px;
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--landing-accent) 30%, transparent);
}

.landing-page .landing-flow-card::after {
  left: 17px;
  top: 62px;
  height: calc(100% - 74px);
}

.landing-page .landing-flow-card small {
  left: 8px;
  top: 34px;
}

.landing-page .landing-plan-card,
body[data-selected-theme='solid'].landing-active .landing-plan-card {
  padding: 38px 0;
  overflow: visible;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--landing-heading) 12%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--landing-heading) 12%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.landing-page .landing-footer,
body[data-selected-theme='solid'].landing-active .landing-footer {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@keyframes landing-title-breathing-glow {
  0%,
  100% {
    background-position: 0% 50%;
    filter: drop-shadow(0 0 0 transparent);
    opacity: 0.9;
  }
  50% {
    background-position: 100% 50%;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--landing-accent) 28%, transparent));
    opacity: 1;
  }
}

.landing-page .landing-carousel-copy h2 {
  background: linear-gradient(
    90deg,
    var(--landing-heading) 8%,
    color-mix(in srgb, var(--landing-accent) 82%, var(--landing-heading)) 31%,
    #0ea5e9 48%,
    #10b981 64%,
    var(--landing-heading) 92%
  );
  background-size: 220% 100%;
  background-clip: text;
  color: transparent !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: landing-title-breathing-glow 5.6s ease-in-out infinite;
  will-change: background-position, filter, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .landing-carousel-copy h2 {
    background-position: 50% 50%;
    animation: none;
    filter: none;
    opacity: 1;
  }
}

.landing-page .landing-carousel-stage {
  overflow: hidden;
}

.landing-page .landing-carousel-controls {
  top: 50%;
  right: 0;
  bottom: auto;
  width: 38px;
  flex-direction: column;
  gap: 6px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--landing-accent) 24%, rgba(255, 255, 255, 0.6));
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: rgba(248, 250, 252, 0.88);
  box-shadow: -10px 12px 28px rgba(3, 7, 18, 0.16);
  opacity: 0.48;
  transform: translate(58%, -50%);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  transition:
    transform 0.22s ease,
    opacity 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.landing-page .landing-carousel-controls::before {
  position: absolute;
  top: 50%;
  left: 4px;
  width: 3px;
  height: 26px;
  border-radius: 999px;
  background: var(--landing-accent);
  content: '';
  opacity: 0.9;
  transform: translateY(-50%);
  transition: opacity 0.16s ease;
}

.landing-page .landing-carousel-controls:hover,
.landing-page .landing-carousel-controls:focus-within {
  opacity: 1;
  transform: translate(0, -50%);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: -14px 16px 34px rgba(3, 7, 18, 0.22);
}

.landing-page .landing-carousel-controls:hover::before,
.landing-page .landing-carousel-controls:focus-within::before {
  opacity: 0;
}

.landing-page .landing-carousel-arrow {
  width: 27px;
  height: 27px;
  border-radius: 7px;
  font-size: 18px;
  transform: rotate(90deg);
}

.landing-page .landing-carousel-dots {
  flex-direction: column;
  gap: 5px;
}

.landing-page .landing-carousel-dots button {
  width: 7px;
  height: 7px;
  border: 0;
  background: color-mix(in srgb, var(--landing-heading) 20%, #ffffff);
  transition:
    width 0.18s ease,
    height 0.18s ease,
    background 0.18s ease;
}

.landing-page .landing-carousel-dots button.active {
  width: 7px;
  height: 20px;
  background: var(--landing-accent);
}

@media (hover: none), (max-width: 900px) {
  .landing-page .landing-carousel-controls {
    top: auto;
    right: 8px;
    bottom: 8px;
    width: auto;
    flex-direction: row;
    gap: 5px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--landing-accent) 20%, rgba(255, 255, 255, 0.68));
    border-radius: 8px;
    opacity: 0.82;
    transform: none;
  }

  .landing-page .landing-carousel-controls::before {
    display: none;
  }

  .landing-page .landing-carousel-controls:hover,
  .landing-page .landing-carousel-controls:focus-within {
    transform: none;
  }

  .landing-page .landing-carousel-arrow {
    transform: none;
  }

  .landing-page .landing-carousel-dots {
    flex-direction: row;
  }

  .landing-page .landing-carousel-dots button.active {
    width: 20px;
    height: 7px;
  }
}

@media (max-width: 900px) {
  .landing-page .landing-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }

  .landing-page .landing-stat:nth-child(3) {
    padding-left: 0;
    border-left: 0 !important;
  }

  .landing-page .landing-capability-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-page .landing-capability-card,
  .landing-page .landing-capability-card:nth-child(odd),
  .landing-page .landing-capability-card:nth-child(even) {
    padding-right: 0;
    padding-left: 0;
    border-right: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--landing-heading) 10%, transparent) !important;
  }

  .landing-page .landing-capability-card:last-child {
    border-bottom: 0 !important;
  }

  .landing-page .landing-coverage {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-page .landing-coverage-panel,
  body[data-selected-theme='solid'].landing-active .landing-coverage-panel {
    padding: 32px 0;
    border-right: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--landing-heading) 11%, transparent) !important;
  }

  .landing-page .landing-workflow {
    padding-left: 0;
  }
}

@media (max-width: 560px) {
  .landing-page .landing-stats {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .landing-page .landing-stat,
  .landing-page .landing-stat:first-child,
  .landing-page .landing-stat:nth-child(3) {
    padding: 18px 0;
    border-left: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--landing-heading) 10%, transparent) !important;
  }

  .landing-page .landing-stat:last-child {
    border-bottom: 0 !important;
  }

  .landing-page .landing-capability-card {
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 14px;
    min-height: 134px;
  }

  .landing-page .landing-plan-card {
    align-items: stretch;
  }
}

:where(.app, .login-gate, .landing-page, .feedback-page) :is(button, [role='button']) {
  -webkit-tap-highlight-color: transparent;
  transform: none !important;
  transition:
    border-color var(--ui-motion-fast) ease,
    background var(--ui-motion-base) ease,
    color var(--ui-motion-fast) ease,
    box-shadow var(--ui-motion-base) ease,
    filter var(--ui-motion-fast) ease,
    opacity var(--ui-motion-fast) ease !important;
}

:where(.app, .login-gate, .landing-page, .feedback-page)
  :is(button, [role='button']):not(:disabled):not([aria-disabled='true']):hover {
  transform: none !important;
  filter: brightness(1.025) saturate(1.025);
}

:where(.app, .login-gate, .landing-page, .feedback-page)
  :is(button, [role='button']):not(:disabled):not([aria-disabled='true']):active,
:where(.app, .login-gate, .landing-page, .feedback-page) :is(button, [role='button']).ui-pressing {
  transform: none !important;
  filter: brightness(0.965) saturate(0.96);
}

:where(.app, .login-gate, .landing-page, .feedback-page)
  :is(button, [role='button']):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-accent, #7c3aed) 46%, transparent);
  outline-offset: 2px;
}

:where(.app, .login-gate, .landing-page, .feedback-page)
  :is(button, [role='button']).ui-pressing
  svg {
  scale: 0.88;
  opacity: 0.82;
  transition:
    scale 120ms var(--ui-motion-spring),
    opacity 120ms ease;
}

:where(.app, .login-gate, .landing-page, .feedback-page) :is(button, [role='button']).ui-confirmed {
  animation: uiConfirmTone 420ms ease-out;
}

:where(.app, .login-gate, .landing-page, .feedback-page)
  :is(button, [role='button']).ui-confirmed
  svg {
  animation: uiIconConfirm 380ms var(--ui-motion-spring);
}

@media (hover: none) {
  :where(.app, .login-gate, .landing-page, .feedback-page)
    :is(button, [role='button']):not(:disabled):not([aria-disabled='true']):hover {
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.app, .login-gate, .landing-page, .feedback-page) :is(button, [role='button']),
  :where(
    .theme-menu,
    .language-menu,
    .market-menu,
    .board-filter-menu,
    .bulk-menu,
    .account-menu-popover,
    .login-demo-list,
    .app-view,
    .dashboard-mode-section,
    .login-register-panel,
    .board-bulk-bar,
    .route-loader,
    .route-loader-card,
    .global-toast,
    .network-status,
    .drilldown-modal,
    .drilldown-dialog,
    .avatar-preview,
    .ai-chat-panel
  ) {
    animation: none !important;
    transition: none !important;
  }

  :where(.app, .login-gate, .landing-page, .feedback-page) :is(button, [role='button']),
  :where(.app, .login-gate, .landing-page, .feedback-page) :is(button, [role='button']):hover,
  :where(.app, .login-gate, .landing-page, .feedback-page) :is(button, [role='button']):active {
    filter: none !important;
    transform: none !important;
  }

  :where(.app, .login-gate, .landing-page, .feedback-page)
    :is(button, [role='button']).ui-pressing
    svg,
  :where(.app, .login-gate, .landing-page, .feedback-page)
    :is(button, [role='button']).ui-confirmed
    svg {
    scale: 1 !important;
    rotate: 0deg !important;
  }
}

.landing-page {
  --ai-home-bg: #ffffff;
  --ai-home-surface: #ffffff;
  --ai-home-soft: #f5f6f8;
  --ai-home-line: #dde1e8;
  --ai-home-text: #111827;
  --ai-home-muted: #667085;
  --ai-home-accent: #5661d7;
  min-width: 0;
  overflow-x: hidden;
  background: var(--ai-home-bg) !important;
}

.landing-page[data-theme='light'] {
  --ai-home-bg: #ffffff;
  --ai-home-surface: #ffffff;
  --ai-home-soft: #f6f4fb;
  --ai-home-line: #dfdbe8;
  --ai-home-text: #17131f;
  --ai-home-muted: #6f6878;
  --ai-home-accent: #7c3aed;
}

.landing-page[data-theme='black'],
.landing-page[data-theme='custom'][data-custom-mode='dark'] {
  --ai-home-bg: #0c0d10;
  --ai-home-surface: #15171b;
  --ai-home-soft: #1d2026;
  --ai-home-line: #30343c;
  --ai-home-text: #f4f5f7;
  --ai-home-muted: #a1a7b2;
  --ai-home-accent: #9486ff;
}

.landing-page[data-theme='green'] {
  --ai-home-bg: #fbfdfc;
  --ai-home-surface: #ffffff;
  --ai-home-soft: #eef8f3;
  --ai-home-line: #d6e7de;
  --ai-home-text: #10231b;
  --ai-home-muted: #60736b;
  --ai-home-accent: #0f9368;
}

.landing-page[data-theme='blue'] {
  --ai-home-bg: #fbfcfe;
  --ai-home-surface: #ffffff;
  --ai-home-soft: #eef4fb;
  --ai-home-line: #d7e1ed;
  --ai-home-text: #101c2b;
  --ai-home-muted: #617084;
  --ai-home-accent: #1769d2;
}

.landing-page[data-theme='redblue'] {
  --ai-home-bg: #fffdfd;
  --ai-home-surface: #ffffff;
  --ai-home-soft: #f8f2f4;
  --ai-home-line: #ead9df;
  --ai-home-text: #21141a;
  --ai-home-muted: #78646c;
  --ai-home-accent: #c9375a;
}

body[data-selected-theme='solid'].landing-active {
  --ai-home-accent: var(--solid-accent, #5661d7);
}

.landing-page {
  min-height: 100dvh;
  color: var(--ai-home-text) !important;
  background: var(--ai-home-bg) !important;
}

.landing-page::before,
.landing-page::after {
  display: none !important;
  content: none !important;
}

.landing-page .landing-signal-strip,
.landing-page .landing-legacy-main,
.landing-page .landing-footer {
  display: none !important;
}

.landing-page .landing-top {
  position: relative;
  z-index: 220;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: none;
  height: 64px;
  margin: 0;
  padding: 0 clamp(24px, 2vw, 36px);
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ai-home-line) 58%, transparent) !important;
  background: var(--ai-home-bg) !important;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.035) !important;
}

.landing-page .landing-brand {
  gap: 9px;
  min-width: 0;
  color: var(--ai-home-text) !important;
}

.landing-page .landing-logo {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  box-shadow: none;
}

.landing-page .landing-brand > span > span {
  color: var(--ai-home-text) !important;
  font-size: 17px;
  font-weight: 850;
}

.landing-page .landing-brand small {
  display: none !important;
}

.landing-page .landing-ai-nav {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
  width: min(650px, calc(100vw - 767px));
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
}

.landing-page .landing-ai-nav::-webkit-scrollbar {
  display: none;
}

.landing-page .landing-ai-nav > button {
  position: relative;
  min-width: 0;
  height: 34px;
  flex: 0 0 auto;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ai-home-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 720;
  white-space: nowrap;
  box-shadow: none !important;
  transform: none !important;
  transition: color 160ms ease;
}

.landing-page .landing-ai-nav > button > span {
  vertical-align: middle;
}

.landing-page .landing-ai-nav > button > em {
  margin-left: 4px;
  color: #f04438;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  vertical-align: top;
}

.landing-page .landing-ai-nav > button:hover,
.landing-page .landing-ai-nav > button.active,
.landing-page .landing-ai-nav > button[aria-expanded='true'] {
  color: var(--ai-home-text);
}

.landing-page .landing-ai-nav > button::after {
  position: absolute;
  right: 8px;
  bottom: 1px;
  left: 8px;
  height: 1px;
  background: currentColor;
  content: '';
  opacity: 0;
  transform: scaleX(0.25);
  transform-origin: left;
  transition:
    opacity 160ms ease,
    transform 190ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.landing-page .landing-ai-nav > button[aria-expanded='true']::after {
  opacity: 1;
  transform: scaleX(1);
}

.landing-ai-mega-menu {
  position: absolute;
  top: 58px;
  left: 50%;
  z-index: 250;
  box-sizing: border-box;
  width: 100vw;
  padding: 6px 0 0;
  border: 0;
  background: transparent;
  color: var(--ai-home-text);
  box-shadow: none;
  pointer-events: none;
  transform: translateX(-50%);
  will-change: opacity, transform;
}

.landing-ai-mega-menu.is-entering {
  animation: landing-mega-reveal 420ms cubic-bezier(0.22, 0.72, 0.2, 1) both;
}

.landing-ai-mega-menu.is-leaving {
  pointer-events: none;
  animation: landing-mega-hide 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.landing-ai-mega-menu[hidden] {
  display: none !important;
}

.landing-ai-mega-panel {
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: 0;
  width: min(980px, calc(100vw - 48px));
  box-sizing: border-box;
  margin: 0 0 0 var(--landing-mega-panel-left, 24px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 30px 34px 32px;
  border-radius: 0 0 6px 6px;
  background: color-mix(in srgb, var(--ai-home-bg) 98%, transparent);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
  overscroll-behavior: contain;
  pointer-events: auto;
}

.landing-ai-mega-panel.is-active {
  animation: landing-mega-panel-reveal 380ms cubic-bezier(0.22, 0.72, 0.2, 1) both;
}

.landing-ai-mega-panel[hidden] {
  display: none !important;
}

body.landing-mega-open #landingMarketMenu,
body.landing-mega-open #landingThemeMenu,
body.landing-mega-open #landingLanguageMenu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.landing-ai-mega-primary,
.landing-ai-mega-secondary {
  min-width: 0;
}

.landing-ai-mega-primary {
  padding-right: 58px;
  border-right: 1px solid color-mix(in srgb, var(--ai-home-line) 72%, transparent);
}

.landing-ai-mega-section-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 18px;
}

.landing-ai-mega-section-number,
.landing-ai-mega-item-index,
.landing-ai-mega-group-index {
  color: var(--ai-home-muted);
  font-size: 10px;
  font-weight: 780;
  line-height: 1.4;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.landing-ai-mega-section-head strong,
.landing-ai-mega-section-head small {
  display: block;
}

.landing-ai-mega-section-head strong {
  margin-bottom: 3px;
  color: var(--ai-home-text);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.3;
}

.landing-ai-mega-section-head small {
  color: var(--ai-home-muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}

.landing-ai-mega-primary-list {
  display: grid;
  gap: 1px;
}

.landing-ai-mega-primary-list button,
.landing-ai-mega-group button {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ai-home-text);
  cursor: pointer;
  text-align: left;
  box-shadow: none !important;
  transform: none !important;
  transition: color 150ms ease;
}

.landing-ai-mega-primary-list button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  min-height: 38px;
  width: 100%;
  font-size: 22px;
  font-weight: 520;
  line-height: 1.2;
}

.landing-ai-mega-primary-list button:hover .landing-ai-mega-item-index,
.landing-ai-mega-primary-list button:focus-visible .landing-ai-mega-item-index {
  color: var(--ai-home-accent);
}

.landing-ai-mega-group button {
  min-height: 34px;
  width: 100%;
  border-bottom: 1px solid color-mix(in srgb, var(--ai-home-line) 54%, transparent);
  color: var(--ai-home-muted);
  font-size: 12px;
  font-weight: 660;
}

.landing-ai-mega-primary-list button:hover,
.landing-ai-mega-primary-list button:focus-visible,
.landing-ai-mega-group button:hover,
.landing-ai-mega-group button:focus-visible {
  color: var(--ai-home-accent);
  outline: none;
}

.landing-ai-mega-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 0;
  align-content: start;
  padding-left: 58px;
}

.landing-ai-mega-group {
  display: grid;
  align-content: start;
  padding-right: 38px;
}

.landing-ai-mega-group + .landing-ai-mega-group {
  padding-right: 0;
  padding-left: 38px;
  border-left: 1px solid color-mix(in srgb, var(--ai-home-line) 72%, transparent);
}

.landing-ai-mega-group-heading {
  display: flex;
  min-height: 32px;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--ai-home-line);
}

.landing-ai-mega-group-heading strong {
  color: var(--ai-home-text);
  font-size: 11px;
  font-weight: 780;
}

.landing-ai-mega-group-list {
  display: grid;
}

.landing-ai-mega-menu {
  overflow: visible;
  border-top: 0;
  border-bottom: 0;
}

.landing-ai-mega-panel {
  grid-template-columns: minmax(248px, 0.62fr) minmax(0, 2.15fr);
  width: min(var(--landing-mega-panel-width, 1120px), calc(100vw - 32px));
  max-height: calc(100dvh - 76px);
  min-height: 0;
  scrollbar-color: color-mix(in srgb, var(--ai-home-muted) 34%, transparent) transparent;
  scrollbar-width: thin;
}

.landing-ai-mega-primary {
  position: sticky;
  top: 0;
  align-self: start;
  padding: 0 34px 0 0;
  border-right: 0;
}

.landing-ai-mega-section-head {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.landing-ai-mega-description {
  max-width: 32ch;
  margin: 0 0 16px;
  color: var(--ai-home-muted);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.75;
}

.landing-ai-mega-search {
  position: relative;
  display: block;
  margin: 0 0 12px;
}

.landing-ai-mega-search-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 15px;
  width: 15px;
  height: 15px;
  border: 1.7px solid color-mix(in srgb, var(--ai-home-text) 58%, transparent);
  border-radius: 50%;
  pointer-events: none;
  transform: translateY(-58%);
  transition:
    border-color 180ms ease,
    transform 180ms ease;
}

.landing-ai-mega-search-icon::after {
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 6px;
  height: 1.7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ai-home-text) 58%, transparent);
  content: '';
  transform: rotate(45deg);
  transform-origin: left center;
  transition: background-color 180ms ease;
}

.landing-ai-mega-search input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 15px 0 42px;
  border: 1px solid color-mix(in srgb, var(--ai-home-text) 14%, transparent);
  border-radius: 6px;
  outline: 0;
  background: color-mix(in srgb, var(--ai-home-surface, #fff) 96%, var(--ai-home-text) 4%);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ai-home-text) 6%, transparent);
  color: var(--ai-home-text);
  font: inherit;
  font-size: 13px;
  font-weight: 620;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.landing-ai-mega-search input::placeholder {
  color: color-mix(in srgb, var(--ai-home-muted) 76%, transparent);
}

.landing-ai-mega-search input:focus {
  border-color: color-mix(in srgb, var(--accent, #5367e8) 68%, transparent);
  background: var(--ai-home-surface, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #5367e8) 12%, transparent);
}

.landing-ai-mega-search:focus-within .landing-ai-mega-search-icon {
  border-color: var(--accent, #5367e8);
  transform: translateY(-58%) scale(1.04);
}

.landing-ai-mega-search:focus-within .landing-ai-mega-search-icon::after {
  background: var(--accent, #5367e8);
}

.landing-ai-mega-primary-list {
  margin-left: 0;
}

.landing-ai-mega-primary-list button {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 50px;
  align-content: center;
  font-size: 14px;
  font-weight: 590;
}

.landing-ai-mega-primary-list button > span,
.landing-ai-mega-primary-list button > small {
  display: block;
}

.landing-ai-mega-primary-list button > small {
  margin-top: 3px;
  color: var(--ai-home-muted);
  font-size: 9px;
  font-weight: 560;
  line-height: 1.35;
  white-space: normal;
}

.landing-ai-mega-primary-list button:hover > small,
.landing-ai-mega-primary-list button:focus-visible > small {
  color: color-mix(in srgb, var(--ai-home-accent) 72%, var(--ai-home-muted));
}

.landing-ai-mega-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
  grid-template-rows: auto;
  gap: 32px;
  min-width: 0;
  padding-left: 34px;
}

.landing-ai-mega-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 36px;
  align-content: start;
}

.landing-ai-mega-panel[data-landing-mega-panel] .landing-ai-mega-groups {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-ai-mega-secondary {
  display: block;
  padding: 0;
}

.landing-ai-mega-group,
.landing-ai-mega-group + .landing-ai-mega-group {
  padding: 0;
  border: 0;
}

.landing-ai-mega-group-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 36px;
  margin: 0 0 4px;
  border-bottom: 0;
}

.landing-ai-mega-group-heading span:last-child {
  min-width: 0;
}

.landing-ai-mega-group-heading strong,
.landing-ai-mega-group-heading small {
  display: block;
}

.landing-ai-mega-group-heading strong {
  font-size: 12px;
}

.landing-ai-mega-group-heading small {
  margin-top: 2px;
  color: var(--ai-home-muted);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;
}

.landing-ai-mega-group button {
  justify-content: space-between;
  min-height: 32px;
  border-bottom: 0;
  font-size: 11px;
}

.landing-ai-mega-spotlight {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  min-height: 100%;
  align-items: end;
  overflow: hidden;
  padding: 22px 24px;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ai-home-text) 5%, var(--ai-home-bg));
  color: var(--ai-home-text);
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
  transform: none !important;
}

.landing-ai-mega-spotlight.has-image {
  min-height: 100%;
  background-image:
    linear-gradient(
      90deg,
      rgba(1, 9, 20, 0.92) 0%,
      rgba(1, 9, 20, 0.66) 50%,
      rgba(1, 9, 20, 0.18) 100%
    ),
    var(--landing-spotlight-image);
  background-position: center;
  background-size: cover;
  color: #fff;
}

.landing-ai-mega-spotlight-copy {
  position: relative;
  z-index: 1;
  max-width: 430px;
}

.landing-ai-mega-spotlight-copy > span,
.landing-ai-mega-spotlight-copy > strong,
.landing-ai-mega-spotlight-copy > small {
  display: block;
}

.landing-ai-mega-spotlight-copy > span {
  margin-bottom: 7px;
  color: var(--ai-home-accent);
  font-size: 9px;
  font-weight: 820;
  letter-spacing: 0;
}

.landing-ai-mega-spotlight.has-image .landing-ai-mega-spotlight-copy > span {
  color: #76d9ff;
}

.landing-ai-mega-spotlight-copy > strong {
  margin-bottom: 7px;
  font-size: 16px;
  font-weight: 720;
  line-height: 1.35;
}

.landing-ai-mega-spotlight-copy > small {
  max-width: 54ch;
  color: var(--ai-home-muted);
  font-size: 10px;
  font-weight: 580;
  line-height: 1.6;
}

.landing-ai-mega-spotlight.has-image .landing-ai-mega-spotlight-copy > small {
  color: rgba(235, 247, 255, 0.72);
}

.landing-ai-mega-spotlight-meta {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: 9px;
  white-space: nowrap;
}

.landing-ai-mega-spotlight-meta span {
  color: var(--ai-home-muted);
  font-size: 9px;
  font-weight: 700;
}

.landing-ai-mega-spotlight.has-image .landing-ai-mega-spotlight-meta span {
  color: rgba(235, 247, 255, 0.7);
}

.landing-ai-mega-spotlight-meta strong {
  color: inherit;
  font-size: 11px;
  font-weight: 750;
}

.landing-ai-mega-empty {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  color: var(--ai-home-muted);
  font-size: 11px;
}

.landing-ai-mega-searchable[hidden],
.landing-ai-mega-group.is-filtered-out,
.landing-ai-mega-empty[hidden],
.landing-ai-mega-spotlight[hidden] {
  display: none !important;
}

@media (max-width: 1180px) {
  .landing-ai-mega-panel {
    grid-template-columns: 248px minmax(0, 1fr);
  }

  .landing-ai-mega-panel[data-landing-mega-panel] .landing-ai-mega-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-ai-mega-primary {
    padding-right: 28px;
  }

  .landing-ai-mega-content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    padding-left: 28px;
  }

  .landing-ai-mega-spotlight.has-image {
    min-height: 112px;
  }
}

.landing-ai-mega-menu {
  top: 58px;
  padding: 0 16px;
}

.landing-ai-mega-panel {
  grid-template-columns: 220px minmax(0, 1fr);
  width: calc(100vw - 32px);
  min-height: 430px;
  max-height: calc(100dvh - 70px);
  margin: 0 !important;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ai-home-line) 72%, transparent);
  border-top: 0;
  border-radius: 0;
  background: var(--ai-home-bg);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.09);
  transform-origin: top center;
}

.landing-ai-mega-primary {
  position: sticky;
  top: 0;
  min-height: 428px;
  padding: 0 0 20px;
  border-right: 1px solid var(--ai-home-line);
  background: color-mix(in srgb, var(--ai-home-bg) 98%, var(--ai-home-text) 2%);
}

.landing-ai-mega-section-head,
.landing-ai-mega-description {
  margin-right: 22px;
  margin-left: 22px;
}

.landing-ai-mega-section-head {
  margin: 0;
}

.landing-ai-mega-section-head button {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 50px;
  padding: 0 22px;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: transparent;
  color: var(--ai-home-text);
  cursor: pointer;
  text-align: left;
}

.landing-ai-mega-section-head button::after {
  content: '\2192';
  color: var(--ai-home-muted);
  font-size: 15px;
  transition:
    color 160ms ease,
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.landing-ai-mega-section-head button:hover::after,
.landing-ai-mega-section-head button:focus-visible::after {
  color: var(--ai-home-accent);
  transform: translateX(3px);
}

.landing-ai-mega-section-head button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ai-home-accent) 34%, transparent);
  outline-offset: -2px;
}

.landing-ai-mega-section-head strong {
  font-size: 16px;
}

.landing-ai-mega-description {
  display: none;
}

.landing-ai-mega-side-list {
  display: grid;
  gap: 0;
}

.landing-ai-mega-side-list button {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 52px;
  padding: 0 22px;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ai-home-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 680;
  text-align: left;
  transition:
    color 220ms ease,
    background 240ms ease;
}

.landing-ai-mega-side-list button::before {
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: 0;
  width: 2px;
  background: var(--ai-home-accent);
  content: '';
  opacity: 0;
  transform: scaleY(0.4);
  transition:
    opacity 210ms ease,
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-ai-mega-side-list button:hover,
.landing-ai-mega-side-list button:focus-visible,
.landing-ai-mega-side-list button.active {
  background: color-mix(in srgb, var(--ai-home-accent) 6%, transparent);
  color: var(--ai-home-text);
  outline: 0;
}

.landing-ai-mega-side-list button.active::before {
  opacity: 1;
  transform: scaleY(1);
}

.landing-ai-mega-side-list em {
  color: #f04438;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.landing-ai-mega-content {
  display: block;
  min-width: 0;
  padding: 10px 28px 22px;
}

.landing-ai-mega-content-head {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 20px;
  margin-bottom: 14px;
}

.landing-ai-mega-content-head .landing-ai-mega-search {
  width: min(360px, 32vw);
  margin: 0;
  flex: 0 0 auto;
}

.landing-ai-mega-content-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
  gap: 30px;
  align-items: stretch;
}

.landing-ai-mega-content-body.is-switching {
  animation: landing-mega-content-switch 360ms cubic-bezier(0.22, 0.72, 0.2, 1) both;
}

.landing-ai-mega-directory {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
}

.landing-ai-mega-featured {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0;
  color: var(--ai-home-text);
  font-size: 11px;
  white-space: nowrap;
}

.landing-ai-mega-featured > button {
  position: relative;
  min-width: 0;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ai-home-text);
  cursor: pointer;
  font-size: 11px;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-underline-offset: 3px;
}

.landing-ai-mega-featured > button + button::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 12px;
  background: var(--ai-home-line);
  content: '';
  transform: translateY(-50%);
}

.landing-ai-mega-recommend-label {
  flex: 0 0 auto;
  margin-right: 3px;
  color: var(--ai-home-muted);
  font-weight: 650;
}

.landing-ai-mega-featured > button:hover,
.landing-ai-mega-featured > button:focus-visible {
  color: var(--ai-home-accent);
  outline: 0;
}

.landing-ai-mega-directory-title {
  margin: 0;
  color: var(--ai-home-text);
  font-size: 13px;
  font-weight: 780;
}

.landing-ai-mega-secondary {
  display: block;
}

.landing-ai-mega-groups {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 44px;
}

.landing-ai-mega-group-heading {
  display: flex;
  min-height: 30px;
  margin-bottom: 8px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 0;
}

.landing-ai-mega-group-heading > em {
  color: #f04438;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
}

.landing-ai-mega-group-heading strong {
  font-size: 12px;
  font-weight: 760;
}

.landing-ai-mega-group-heading small {
  display: none;
}

.landing-ai-mega-group-list {
  gap: 14px;
}

.landing-ai-mega-group button {
  display: grid;
  min-height: 54px;
  padding: 0;
  align-content: start;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--ai-home-text);
  cursor: pointer;
  text-align: left;
}

.landing-ai-mega-item-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 750;
}

.landing-ai-mega-item-title::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  content: '';
  flex: 0 0 auto;
}

.landing-ai-mega-group button small {
  display: block;
  padding-left: 12px;
  color: var(--ai-home-muted);
  font-size: 9px;
  font-weight: 540;
  line-height: 1.55;
}

.landing-ai-mega-item-badge {
  display: inline-flex;
  min-height: 17px;
  padding: 0 5px;
  align-items: center;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ai-home-accent) 10%, transparent);
  color: var(--ai-home-accent);
  font-size: 8px;
  font-style: normal;
  font-weight: 760;
  white-space: nowrap;
}

.landing-ai-mega-item-meta {
  padding-left: 12px;
  color: color-mix(in srgb, var(--ai-home-muted) 82%, transparent);
  font-size: 8px;
  font-weight: 650;
}

.landing-ai-mega-group-list .landing-ai-mega-group-cta {
  min-height: 30px;
  color: var(--ai-home-accent);
  font-size: 10px;
  font-weight: 740;
}

.landing-ai-mega-group button:hover .landing-ai-mega-item-title,
.landing-ai-mega-group button:focus-visible .landing-ai-mega-item-title {
  color: var(--ai-home-accent);
}

.landing-ai-mega-group button:focus-visible {
  outline: 0;
}

.landing-ai-mega-spotlight,
.landing-ai-mega-spotlight.has-image {
  min-height: 100%;
  border-radius: 2px;
}

.landing-ai-mega-panel[data-side-mode='latest'] .landing-ai-mega-featured,
.landing-ai-mega-group.is-side-hidden {
  display: none !important;
}

.landing-ai-mega-panel:not(.is-searching)[data-side-mode='all']
  .landing-ai-mega-group-list
  > button:nth-child(n + 4),
.landing-ai-mega-panel:not([data-side-mode]) .landing-ai-mega-group-list > button:nth-child(n + 4) {
  display: none;
}

.landing-ai-mega-panel.is-business-panel:not(.is-searching)[data-side-mode='all']
  .landing-ai-mega-group:nth-child(n + 4),
.landing-ai-mega-panel.is-business-panel:not(.is-searching):not([data-side-mode])
  .landing-ai-mega-group:nth-child(n + 4) {
  display: none;
}

.landing-ai-mega-panel.is-business-panel[data-side-mode^='group-']
  .landing-ai-mega-group-list
  > button {
  display: grid;
}

.landing-ai-mega-panel[data-side-mode^='group-'] .landing-ai-mega-groups {
  grid-template-columns: minmax(0, 560px);
}

.landing-ai-mega-panel[data-side-mode^='group-'] .landing-ai-mega-group {
  padding: 0;
  border-left: 0;
}

.landing-ai-mega-panel[data-side-mode^='group-'] .landing-ai-mega-group-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}

@media (max-width: 1320px) {
  .landing-ai-mega-panel {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .landing-ai-mega-content-body {
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 24px;
  }

  .landing-ai-mega-content-head {
    align-items: center;
    flex-direction: row;
    gap: 18px;
  }

  .landing-ai-mega-content-head .landing-ai-mega-search {
    width: min(330px, 34vw);
  }

  .landing-ai-mega-featured {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
}

@media (max-width: 1080px) {
  .landing-ai-mega-content-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-ai-mega-spotlight.has-image {
    min-height: 116px;
  }
}

@keyframes landing-mega-reveal {
  from {
    opacity: 0.2;
    clip-path: inset(0 0 88% 0);
    transform: translate(-50%, -3px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, 0);
  }
}

@keyframes landing-mega-content-switch {
  from {
    opacity: 0.18;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes landing-mega-hide {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 0;
    clip-path: inset(0 0 26% 0);
    transform: translate(-50%, -3px);
  }
}

@keyframes landing-mega-panel-reveal {
  from {
    opacity: 0.12;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.landing-page .landing-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.landing-page .landing-switcher :where(.theme-toggle, .language-toggle),
.landing-page .landing-market-switcher .market-toggle {
  min-width: 0;
  height: 34px;
  padding: 0 5px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ai-home-muted) !important;
  box-shadow: none !important;
  transform: none !important;
}

.landing-page .landing-switcher .language-code {
  display: none;
}

.landing-page .landing-switcher :where(.theme-toggle, .language-toggle):hover,
.landing-page .landing-switcher :where(.theme-toggle, .language-toggle)[aria-expanded='true'],
.landing-page .landing-market-switcher .market-toggle:hover,
.landing-page .landing-market-switcher .market-toggle[aria-expanded='true'] {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--ai-home-text) !important;
}

.landing-page .landing-market-switcher .market-menu,
.landing-page .landing-switcher :where(.theme-menu, .language-menu) {
  top: calc(100% + 8px);
  z-index: 260;
  border-color: var(--ai-home-line) !important;
  border-radius: 8px !important;
  background: var(--ai-home-surface) !important;
  color: var(--ai-home-text) !important;
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.12) !important;
}

.landing-page .landing-market-switcher .market-option {
  color: var(--ai-home-muted);
}

.landing-page .landing-market-switcher .market-option:hover,
.landing-page .landing-market-switcher .market-option.active {
  border-color: color-mix(in srgb, var(--ai-home-accent) 28%, var(--ai-home-line));
  background: var(--ai-home-soft);
  color: var(--ai-home-text);
}

.landing-page .landing-login-button,
.landing-page .landing-ghost-button {
  height: 34px;
  min-height: 34px;
  padding: 0 17px;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 12px;
  font-weight: 720;
  transform: none !important;
}

.landing-page .landing-login-button {
  border: 0 !important;
  background: var(--ai-home-soft) !important;
  color: var(--ai-home-text) !important;
}

.landing-page .landing-ghost-button {
  border: 0 !important;
  background: var(--ai-home-text) !important;
  color: var(--ai-home-bg) !important;
}

.landing-page .landing-login-button:hover {
  background: color-mix(in srgb, var(--ai-home-text) 10%, var(--ai-home-soft)) !important;
}

.landing-page .landing-ghost-button:hover {
  opacity: 0.86;
}

.landing-ai-home {
  display: flex;
  min-height: calc(100dvh - 64px);
  align-items: flex-start;
  justify-content: center;
  padding: 22vh 24px 48px;
}

.landing-ai-workspace {
  display: flex;
  width: min(760px, 100%);
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.landing-ai-home.has-conversation {
  padding-top: 7vh;
}

.landing-ai-heading {
  margin: 0 0 18px;
  color: var(--ai-home-text);
  font-size: 28px;
  font-weight: 540;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
}

.landing-ai-home.has-conversation .landing-ai-heading {
  margin-bottom: 16px;
  font-size: 20px;
  text-align: left;
}

.landing-ai-thread {
  display: grid;
  max-height: min(48vh, 500px);
  gap: 18px;
  margin-bottom: 16px;
  padding: 2px 4px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.landing-ai-thread[hidden] {
  display: none;
}

.landing-ai-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.landing-ai-message.user {
  justify-content: flex-end;
}

.landing-ai-message-mark {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--ai-home-line);
  border-radius: 6px;
  background: var(--ai-home-surface);
}

.landing-ai-message-mark img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.landing-ai-message-copy {
  max-width: min(620px, 86%);
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ai-home-text);
  font-size: 14px;
  font-weight: 620;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.landing-ai-message.assistant .landing-ai-message-copy {
  padding: 2px 0;
}

.landing-ai-message.user .landing-ai-message-copy {
  background: var(--ai-home-soft);
}

.landing-ai-message.thinking .landing-ai-message-copy {
  color: var(--ai-home-muted);
}

.landing-ai-composer {
  box-sizing: border-box;
  width: 100%;
  padding: 15px 16px 12px;
  border: 1px solid var(--ai-home-line);
  border-radius: 22px;
  background: var(--ai-home-surface);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.09);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.landing-ai-composer:focus-within {
  border-color: color-mix(in srgb, var(--ai-home-text) 28%, var(--ai-home-line));
  box-shadow: 0 14px 36px rgba(16, 24, 40, 0.11);
}

.landing-ai-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  max-height: 128px;
  padding: 0 2px;
  resize: none;
  overflow-y: auto;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--ai-home-text) !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 15px;
  font-weight: 550;
  line-height: 1.55;
}

.landing-ai-input::placeholder {
  color: var(--ai-home-muted);
}

.landing-ai-composer-actions {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.landing-ai-new-chat {
  display: inline-flex;
  min-width: 34px;
  height: 32px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ai-home-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 760;
}

.landing-ai-new-chat[hidden] {
  display: none !important;
}

.landing-ai-send {
  display: inline-flex;
  width: 34px;
  height: 34px;
  min-width: 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ai-home-text);
  color: var(--ai-home-bg);
  cursor: pointer;
  margin-left: auto;
}

.landing-ai-send:disabled {
  cursor: default;
  opacity: 0.28;
}

.landing-ai-prompts {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.landing-ai-prompt {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--ai-home-line) 82%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--ai-home-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 560;
  box-shadow: none !important;
  transform: none !important;
}

.landing-ai-prompt:hover {
  border-color: color-mix(in srgb, var(--ai-home-text) 32%, var(--ai-home-line));
  background: transparent;
  color: var(--ai-home-text);
}

.landing-ai-home.has-conversation .landing-ai-prompts {
  justify-content: flex-start;
}

@media (max-width: 980px) {
  .landing-page .landing-top {
    grid-template-columns: minmax(120px, 1fr) auto;
    gap: 12px;
    padding: 0 16px;
  }

  .landing-page .landing-ai-nav,
  .landing-page .landing-ai-mega-menu {
    display: none !important;
  }

  .landing-page .landing-switcher :where(.theme-toggle, .language-toggle),
  .landing-page .landing-market-switcher .market-toggle {
    display: inline-flex !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px;
    flex: 0 0 38px;
    padding: 0 !important;
  }

  .landing-page .landing-market-switcher .market-toggle > svg:first-child,
  .landing-page .landing-market-switcher .market-label,
  .landing-page .landing-market-switcher .market-caret,
  .landing-page .landing-switcher .theme-current,
  .landing-page .landing-switcher .language-code,
  .landing-page .landing-switcher .language-current,
  .landing-page .landing-switcher .theme-caret,
  .landing-page .landing-switcher .language-caret {
    display: none;
  }

  .landing-ai-home {
    padding-top: 15vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-ai-mega-menu,
  .landing-ai-mega-panel {
    animation: none;
  }
}

@media (max-width: 680px) {
  .landing-page .landing-top {
    height: 58px;
    padding: 0 12px;
  }

  .landing-page .landing-brand > span > span {
    font-size: 15px;
  }

  .landing-page .landing-logo {
    width: 28px;
    height: 28px;
  }

  .landing-page .landing-actions {
    gap: 4px;
  }

  .landing-page .landing-login-button {
    display: none;
  }

  .landing-page .landing-ghost-button {
    height: 32px;
    min-height: 32px;
    padding: 0 9px;
    font-size: 11px;
  }

  .landing-ai-home {
    min-height: calc(100dvh - 58px);
    padding: 13vh 14px 32px;
  }

  .landing-ai-home.has-conversation {
    padding-top: 24px;
  }

  .landing-ai-heading {
    margin-bottom: 18px;
    font-size: 26px;
  }

  .landing-ai-message-copy {
    max-width: 88%;
    font-size: 13px;
  }

  .landing-ai-composer {
    padding: 11px 11px 8px;
  }

  .landing-ai-input {
    min-height: 48px;
    font-size: 14px;
  }

  .landing-ai-prompts {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .landing-ai-prompt {
    flex: 0 0 auto;
  }
}

@media (max-width: 420px) {
  .landing-page .landing-top {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .landing-page .landing-brand > span {
    display: none;
  }
}

body:not(.landing-active):not(.login-active):not(.feedback-active) .top-actions {
  gap: 12px;
}

body:not(.landing-active):not(.login-active):not(.feedback-active) .top-actions .segmented {
  gap: 2px;
  min-height: 32px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active) .top-actions .segmented button {
  position: relative;
  min-height: 32px;
  padding: 0 8px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  transform: none !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active)
  .top-actions
  .segmented
  button.active {
  background: transparent !important;
  color: var(--theme-accent-strong, var(--purple-strong)) !important;
  box-shadow: inset 0 -2px 0 var(--theme-accent, var(--purple)) !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active) .top-actions .range-spark {
  display: none;
}

body:not(.landing-active):not(.login-active):not(.feedback-active)
  .top-actions
  :where(
    .market-toggle,
    .theme-toggle,
    .language-toggle,
    .icon-button,
    .chat-button,
    .account-entry-button
  ) {
  min-width: 0 !important;
  min-height: 32px;
  padding: 0 5px;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  transform: none !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active)
  .top-actions
  :where(
    .market-toggle,
    .theme-toggle,
    .language-toggle,
    .icon-button,
    .chat-button,
    .account-entry-button
  ):hover,
body:not(.landing-active):not(.login-active):not(.feedback-active)
  .top-actions
  :where(
    .market-toggle,
    .theme-toggle,
    .language-toggle,
    .account-entry-button
  )[aria-expanded='true'] {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transform: none !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active)
  .workspace-language-switcher
  .language-code {
  display: none;
}

body:not(.landing-active):not(.login-active):not(.feedback-active)
  .top-actions
  :where(button, [role='button']):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-accent, var(--purple)) 42%, transparent);
  outline-offset: 2px;
  box-shadow: none !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active)
  :where(.dashboard-context-pill, .dashboard-template-tabs, .dashboard-time-tabs) {
  gap: 2px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active)
  :where(.dashboard-template-tabs, .dashboard-time-tabs)
  button {
  min-height: 30px;
  padding: 0 8px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  transform: none !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active)
  :where(.dashboard-template-tabs, .dashboard-time-tabs)
  button:is(.active, [aria-pressed='true']) {
  background: transparent !important;
  color: var(--theme-accent-strong, var(--purple-strong)) !important;
  box-shadow: inset 0 -2px 0 var(--theme-accent, var(--purple)) !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active)
  :where(.dashboard-template-tabs, .dashboard-time-tabs)
  button:hover {
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transform: none !important;
}

.landing-page {
  --story-deep: #111827;
  --story-deep-soft: #1a2232;
  --story-positive: #22a06b;
  --story-warning: #d99334;
}

.landing-ai-home {
  min-height: min(680px, calc(100dvh - 160px));
}

.landing-growth-story,
.landing-trend-gallery {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  color: var(--ai-home-text);
}

.landing-growth-story {
  padding: 72px 24px 96px;
  border-top: 1px solid color-mix(in srgb, var(--ai-home-line) 64%, transparent);
  background: color-mix(in srgb, var(--ai-home-soft) 58%, var(--ai-home-bg));
}

.landing-story-shell,
.landing-trend-shell {
  width: min(1320px, 100%);
  margin: 0 auto;
}

.landing-story-head,
.landing-trend-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.62fr);
  align-items: end;
  gap: 48px;
  margin-bottom: 38px;
}

.landing-story-eyebrow,
.landing-trend-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--ai-home-accent);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0;
}

.landing-story-head h2,
.landing-trend-head h2 {
  max-width: 760px;
  margin: 0;
  color: var(--ai-home-text);
  font-size: 40px;
  font-weight: 760;
  line-height: 1.14;
  letter-spacing: 0;
  text-wrap: balance;
}

.landing-story-head p,
.landing-trend-head p {
  max-width: 520px;
  margin: 0;
  color: var(--ai-home-muted);
  font-size: 14px;
  font-weight: 560;
  line-height: 1.8;
}

.landing-capability-layout {
  display: grid;
  min-height: 554px;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.72fr);
  gap: 10px;
}

.landing-capability-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ai-home-line) 84%, transparent);
  border-radius: 8px;
  background: var(--ai-home-surface);
  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.055);
  transition:
    border-color 240ms ease,
    box-shadow 240ms ease,
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.landing-capability-panel:hover {
  border-color: color-mix(in srgb, var(--ai-home-accent) 22%, var(--ai-home-line));
  box-shadow: 0 22px 52px rgba(16, 24, 40, 0.085);
  transform: translateY(-2px);
}

.landing-capability-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 28px;
  border-color: transparent;
  background: var(--story-deep);
  color: #f8fafc;
}

.landing-capability-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.landing-capability-panel-head small,
.landing-signal-panel small,
.landing-advice-panel small {
  display: block;
  margin-bottom: 8px;
  color: rgba(226, 232, 240, 0.62);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0;
}

.landing-capability-panel-head h3,
.landing-signal-panel h3,
.landing-advice-panel h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 760;
  line-height: 1.3;
  letter-spacing: 0;
}

.landing-capability-tabs {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
}

.landing-capability-tabs button {
  min-height: 30px;
  padding: 0 10px;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: rgba(226, 232, 240, 0.66) !important;
  box-shadow: none !important;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  transform: none !important;
}

.landing-capability-tabs button:hover,
.landing-capability-tabs button[aria-selected='true'] {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.landing-capability-canvas {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1.2fr) minmax(190px, 0.62fr);
  align-items: end;
  gap: 34px;
  padding: 36px 0 30px;
}

.landing-capability-chart {
  position: relative;
  display: flex;
  height: 250px;
  align-items: flex-end;
  gap: 12px;
  padding: 20px 0 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.landing-capability-chart::before,
.landing-capability-chart::after {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  content: '';
}

.landing-capability-chart::before {
  top: 34%;
}

.landing-capability-chart::after {
  top: 64%;
}

.landing-capability-bar {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100%;
  flex: 1 1;
  align-items: end;
}

.landing-capability-bar i {
  display: block;
  height: var(--bar-height, 50%);
  min-height: 18px;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--ai-home-accent) 78%, #ffffff);
  transform-origin: bottom;
  transition: height 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.landing-capability-bar span {
  position: absolute;
  right: 0;
  bottom: -22px;
  left: 0;
  overflow: hidden;
  color: rgba(226, 232, 240, 0.5);
  font-size: 9px;
  font-style: normal;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-capability-focus {
  align-self: center;
}

.landing-capability-focus > span {
  display: block;
  margin-bottom: 8px;
  color: rgba(226, 232, 240, 0.56);
  font-size: 11px;
  font-weight: 650;
}

.landing-capability-focus strong {
  display: block;
  margin-bottom: 6px;
  color: #ffffff;
  font-size: 34px;
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: 0;
}

.landing-capability-focus em {
  display: block;
  color: #85e0b7;
  font-size: 13px;
  font-style: normal;
  font-weight: 720;
}

.landing-capability-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.landing-capability-metric {
  padding: 18px 16px 0 0;
}

.landing-capability-metric + .landing-capability-metric {
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.landing-capability-metric span {
  display: block;
  margin-bottom: 5px;
  color: rgba(226, 232, 240, 0.54);
  font-size: 10px;
  font-weight: 640;
}

.landing-capability-metric strong {
  color: #ffffff;
  font-size: 17px;
  font-weight: 760;
}

.landing-capability-side {
  display: grid;
  min-width: 0;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.landing-signal-panel,
.landing-advice-panel {
  display: grid;
  align-content: space-between;
  padding: 26px;
}

.landing-signal-panel small,
.landing-advice-panel small {
  color: var(--ai-home-muted);
}

.landing-signal-value {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 24px 0 16px;
}

.landing-signal-value strong {
  color: var(--ai-home-text);
  font-size: 42px;
  font-weight: 770;
  line-height: 1;
  letter-spacing: 0;
}

.landing-signal-value span {
  color: var(--story-positive);
  font-size: 12px;
  font-weight: 740;
}

.landing-signal-list,
.landing-advice-list {
  display: grid;
}

.landing-signal-row,
.landing-advice-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 40px;
  border-top: 1px solid color-mix(in srgb, var(--ai-home-line) 72%, transparent);
  color: var(--ai-home-muted);
  font-size: 11px;
  font-weight: 620;
}

.landing-signal-row strong {
  color: var(--ai-home-text);
  font-size: 11px;
}

.landing-advice-panel {
  background: color-mix(in srgb, var(--ai-home-accent) 5%, var(--ai-home-surface));
}

.landing-advice-summary {
  margin: 22px 0 18px;
  color: var(--ai-home-text);
  font-size: 16px;
  font-weight: 680;
  line-height: 1.6;
}

.landing-advice-row {
  grid-template-columns: 20px minmax(0, 1fr);
}

.landing-advice-row b {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ai-home-accent) 14%, transparent);
  color: var(--ai-home-accent);
  font-size: 9px;
}

.landing-trend-gallery {
  padding: 104px 24px 116px;
  background: var(--ai-home-bg);
}

.landing-trend-head {
  align-items: center;
}

.landing-trend-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.landing-trend-count {
  display: inline-flex;
  min-width: 62px;
  flex: 0 0 auto;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  color: var(--ai-home-muted);
  font-size: 11px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}

.landing-trend-count b {
  color: var(--ai-home-text);
  font-size: 13px;
}

.landing-trend-stage {
  position: relative;
}

.landing-trend-arrow {
  --trend-arrow-visual-size: 46px;
  --trend-arrow-hit-size: 66px;
  --trend-arrow-hit-offset: -33px;
  position: absolute;
  top: 50%;
  margin-top: var(--trend-arrow-hit-offset);
  z-index: 4;
  display: inline-flex;
  width: var(--trend-arrow-hit-size);
  height: var(--trend-arrow-hit-size);
  min-width: var(--trend-arrow-hit-size);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--ai-home-text) 82%, var(--ai-home-muted)) !important;
  box-shadow: none !important;
  cursor: pointer;
  transform: none !important;
  transition: color 160ms ease !important;
}

.landing-trend-arrow::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--trend-arrow-visual-size);
  height: var(--trend-arrow-visual-size);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ai-home-line) 78%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ai-home-accent) 5%, var(--ai-home-surface));
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
  content: '';
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.landing-trend-arrow svg {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  pointer-events: none;
}

.landing-trend-arrow[data-trend-prev] {
  left: -78px;
}

.landing-trend-arrow[data-trend-next] {
  right: -78px;
}

.landing-trend-arrow:hover {
  border: 0 !important;
  background: transparent !important;
  color: var(--ai-home-accent) !important;
  box-shadow: none !important;
  transform: none !important;
}

.landing-trend-arrow:hover::before {
  border-color: color-mix(in srgb, var(--ai-home-accent) 30%, var(--ai-home-line));
  background: color-mix(in srgb, var(--ai-home-accent) 9%, var(--ai-home-surface));
}

.landing-trend-arrow:focus-visible {
  outline: none;
  color: var(--ai-home-accent) !important;
}

.landing-trend-arrow:focus-visible::before {
  border-color: var(--ai-home-accent);
  outline: none;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--ai-home-accent) 18%, transparent),
    0 8px 20px rgba(15, 23, 42, 0.07);
}

.landing-trend-arrow:active {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.landing-trend-arrow:active::before {
  background: color-mix(in srgb, var(--ai-home-accent) 14%, var(--ai-home-surface));
}

.landing-trend-accordion {
  --trend-columns: 5.4fr 1.35fr 0.76fr 0.44fr 0.26fr 0.16fr;
  display: grid;
  grid-template-columns: var(--trend-columns);
  width: 100%;
  height: 520px;
  gap: 6px;
  overflow: hidden;
  border-radius: 8px;
  transition: grid-template-columns 960ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: grid-template-columns;
}

.landing-trend-slide {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--story-deep);
}

.landing-trend-slide-button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
  cursor: pointer;
  text-align: left;
  transform: none !important;
}

.landing-trend-slide-button:hover,
.landing-trend-slide-button:focus-visible {
  transform: none !important;
}

.landing-trend-slide-button:focus-visible {
  outline: 2px solid var(--ai-home-accent);
  outline-offset: -3px;
}

.landing-trend-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition:
    filter 520ms ease,
    transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-trend-slide.active .landing-trend-image {
  filter: saturate(0.94) contrast(1.02);
  transform: scale(1.01);
}

.landing-trend-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 10, 20, 0.03), rgba(5, 10, 20, 0.12));
  transition: background-color 420ms ease;
}

.landing-trend-slide:not(.active) .landing-trend-shade {
  background: rgba(7, 12, 24, 0.12);
}

.landing-trend-index {
  display: none;
}

.landing-trend-compact-title {
  display: none;
}

.landing-trend-caption {
  display: grid;
  grid-template-columns: minmax(260px, 0.86fr) minmax(360px, 1.14fr);
  align-items: start;
  gap: 48px;
  min-height: 112px;
  padding-top: 24px;
}

.landing-trend-caption.is-updating {
  animation: landing-trend-caption-in 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.landing-trend-tag {
  display: block;
  margin-bottom: 8px;
  color: var(--ai-home-accent);
  font-size: 10px;
  font-weight: 760;
}

.landing-trend-caption h3 {
  margin: 0;
  color: var(--ai-home-text);
  font-size: 24px;
  font-weight: 740;
  line-height: 1.3;
  letter-spacing: 0;
}

.landing-trend-caption p {
  max-width: 620px;
  margin: 0;
  padding-top: 20px;
  color: var(--ai-home-muted);
  font-size: 13px;
  font-weight: 560;
  line-height: 1.75;
}

@keyframes landing-trend-caption-in {
  from {
    opacity: 0.28;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.landing-trend-slide.active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.9);
  content: '';
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
  animation: landing-trend-timer 5.6s linear forwards;
}

.landing-trend-gallery.is-paused .landing-trend-slide.active::after {
  animation-play-state: paused;
}

@media (max-width: 1480px) {
  .landing-trend-stage {
    padding-inline: 58px;
  }

  .landing-trend-arrow[data-trend-prev] {
    left: -10px;
  }

  .landing-trend-arrow[data-trend-next] {
    right: -10px;
  }
}

@keyframes landing-trend-timer {
  to {
    transform: scaleX(1);
  }
}

.landing-story-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 560ms ease,
    transform 720ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

.landing-story-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.landing-trend-accordion.landing-story-reveal {
  transition:
    grid-template-columns 960ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 560ms ease,
    transform 720ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

@media (max-width: 980px) {
  .landing-story-head,
  .landing-trend-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .landing-capability-layout {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-capability-main {
    min-height: 520px;
  }

  .landing-capability-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .landing-trend-accordion {
    height: 480px;
  }
}

@media (max-width: 680px) {
  .landing-ai-home {
    min-height: min(620px, calc(100dvh - 164px));
  }

  .landing-growth-story,
  .landing-trend-gallery {
    padding: 56px 14px 72px;
  }

  .landing-story-head,
  .landing-trend-head {
    margin-bottom: 26px;
  }

  .landing-story-head h2,
  .landing-trend-head h2 {
    font-size: 30px;
  }

  .landing-story-head p,
  .landing-trend-head p {
    font-size: 13px;
  }

  .landing-capability-main {
    min-height: 500px;
    padding: 20px;
  }

  .landing-capability-panel-head {
    display: grid;
    gap: 16px;
  }

  .landing-capability-tabs {
    width: 100%;
  }

  .landing-capability-tabs button {
    flex: 1 1;
    padding-inline: 6px;
  }

  .landing-capability-canvas {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding-top: 24px;
  }

  .landing-capability-chart {
    height: 210px;
  }

  .landing-capability-focus strong {
    font-size: 28px;
  }

  .landing-capability-metric {
    padding-right: 8px;
  }

  .landing-capability-metric + .landing-capability-metric {
    padding-left: 10px;
  }

  .landing-capability-metric strong {
    font-size: 14px;
  }

  .landing-capability-side {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-signal-panel,
  .landing-advice-panel {
    min-height: 260px;
    padding: 22px;
  }

  .landing-trend-meta {
    align-items: flex-end;
  }

  .landing-trend-stage {
    padding-inline: 0;
  }

  .landing-trend-arrow {
    --trend-arrow-visual-size: 42px;
    --trend-arrow-hit-size: 62px;
    --trend-arrow-hit-offset: -31px;
    background: transparent !important;
    box-shadow: none !important;
  }

  .landing-trend-arrow[data-trend-prev] {
    left: 2px;
  }

  .landing-trend-arrow[data-trend-next] {
    right: 2px;
  }

  .landing-trend-accordion {
    display: grid;
    grid-template-columns: 1fr !important;
    height: 410px;
    gap: 0;
    border-radius: 8px;
    transition: none;
  }

  .landing-trend-accordion.landing-story-reveal {
    transition:
      opacity 560ms ease,
      transform 720ms cubic-bezier(0.2, 0.82, 0.2, 1);
  }

  .landing-trend-slide,
  .landing-trend-slide.active {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.015);
    transition:
      opacity 480ms ease,
      transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .landing-trend-slide.active {
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }

  .landing-trend-compact-title {
    display: none;
  }

  .landing-trend-caption {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-height: 156px;
    padding-top: 18px;
  }

  .landing-trend-caption h3 {
    font-size: 21px;
  }

  .landing-trend-caption p {
    padding-top: 0;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-story-reveal,
  .landing-capability-panel,
  .landing-capability-bar i,
  .landing-trend-accordion,
  .landing-trend-slide,
  .landing-trend-image,
  .landing-trend-caption {
    transition: none !important;
    animation: none !important;
  }

  .landing-trend-slide.active::after {
    display: none;
    animation: none !important;
  }
}

.landing-editorial {
  padding: 64px 24px 148px;
  background: transparent;
  color: var(--ai-home-text);
}

.landing-trend-gallery {
  background: transparent;
}

.landing-growth-story[hidden],
.landing-trend-gallery[hidden] {
  display: none !important;
}

.landing-editorial-shell {
  width: min(100%, 1280px);
  margin: 0 auto;
}

.landing-editorial-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  align-items: end;
  gap: 64px;
  margin-bottom: 54px;
}

.landing-editorial-eyebrow,
.landing-editorial-meta,
.landing-editorial-kicker {
  color: var(--ai-home-accent);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.5;
}

.landing-editorial-intro h2 {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--ai-home-text);
  font-size: 44px;
  font-weight: 760;
  line-height: 1.12;
  letter-spacing: 0;
}

.landing-editorial-intro p {
  max-width: 560px;
  margin: 0;
  color: var(--ai-home-muted);
  font-size: 14px;
  font-weight: 540;
  line-height: 1.8;
}

.landing-editorial-lead {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 0.72fr);
  align-items: start;
  gap: 20px;
}

.landing-editorial-feature,
.landing-editorial-side,
.landing-editorial-insight,
.landing-editorial-case {
  min-width: 0;
}

.landing-editorial-media {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ai-home-line) 46%, var(--ai-home-surface));
}

.landing-editorial-preview-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: zoom-in;
}

.figma-home-lead-preview {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}

.figma-home-lead-preview .landing-editorial-zoom {
  top: 14px;
  bottom: auto;
}

.landing-editorial-preview-trigger:focus-visible {
  outline: 2px solid var(--ai-home-accent);
  outline-offset: 4px;
}

.landing-editorial-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 50%;
  background: rgba(17, 19, 24, 0.72);
  color: #fff;
  opacity: 0;
  transform: translateY(6px) scale(0.92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition:
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.landing-editorial-preview-trigger:hover .landing-editorial-zoom,
.landing-editorial-preview-trigger:focus-visible .landing-editorial-zoom {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.landing-image-lightbox {
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: #0d0f13;
  color: #fff;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.42);
}

.landing-image-lightbox[open] {
  animation: landing-lightbox-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.landing-image-lightbox::backdrop {
  background: rgba(7, 9, 12, 0.78);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  animation: landing-lightbox-backdrop-in 220ms ease both;
}

.landing-image-lightbox.is-closing {
  animation: landing-lightbox-out 180ms ease both;
}

.landing-image-lightbox.is-closing::backdrop {
  animation: landing-lightbox-backdrop-out 180ms ease both;
}

.landing-image-lightbox figure {
  margin: 0;
}

.landing-image-lightbox-image-wrap {
  display: grid;
  min-height: 220px;
  max-height: calc(100dvh - 142px);
  place-items: center;
  overflow: hidden;
  border-radius: 3px;
  background: #fff;
}

.landing-image-lightbox img {
  display: block;
  width: 100%;
  max-height: calc(100dvh - 142px);
  object-fit: contain;
}

.landing-image-lightbox figcaption {
  display: grid;
  gap: 4px;
  padding: 14px 8px 7px;
}

.landing-image-lightbox figcaption span {
  color: #9ca3af;
  font-size: 11px;
  font-weight: 720;
}

.landing-image-lightbox figcaption strong {
  color: #fff;
  font-size: 15px;
  font-weight: 680;
  line-height: 1.4;
}

.landing-image-lightbox-close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(13, 15, 19, 0.72);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition:
    background 180ms ease,
    transform 180ms ease;
}

.landing-image-lightbox-close:hover {
  background: #111318;
  transform: scale(1.06);
}

.landing-image-lightbox-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

body.landing-lightbox-open {
  overflow: hidden;
}

@keyframes landing-lightbox-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes landing-lightbox-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
}

@keyframes landing-lightbox-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes landing-lightbox-backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.landing-editorial-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition:
    filter 420ms ease,
    transform 720ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.landing-editorial-feature:hover .landing-editorial-media img,
.landing-editorial-side:hover .landing-editorial-media img,
.landing-editorial-insight:hover .landing-editorial-media img,
.landing-editorial-case:hover .landing-editorial-media img {
  filter: saturate(1.04) contrast(1.015);
  transform: scale(1.025);
}

.landing-editorial-feature .landing-editorial-media {
  aspect-ratio: 16 / 9;
}

.landing-editorial-feature-copy {
  max-width: 850px;
  padding-top: 20px;
}

.landing-editorial-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing-editorial-meta time {
  color: var(--ai-home-muted);
  font-weight: 620;
}

.landing-editorial-feature h3 {
  margin: 10px 0 10px;
  color: var(--ai-home-text);
  font-size: 31px;
  font-weight: 720;
  line-height: 1.25;
  letter-spacing: 0;
}

.landing-editorial-feature p,
.landing-editorial-side p,
.landing-editorial-insight p,
.landing-editorial-case p {
  margin: 0;
  color: var(--ai-home-muted);
  font-size: 12px;
  font-weight: 540;
  line-height: 1.7;
}

.landing-editorial-rail {
  display: grid;
  gap: 30px;
}

.landing-editorial-side {
  opacity: 1;
  transition: opacity 360ms ease;
}

.landing-editorial-side .landing-editorial-media {
  aspect-ratio: 16 / 10;
}

.landing-editorial-side-copy {
  padding-top: 13px;
}

.landing-editorial-side h3 {
  margin: 8px 0 5px;
  color: var(--ai-home-text);
  font-size: 18px;
  font-weight: 690;
  line-height: 1.4;
  letter-spacing: 0;
}

@media (min-width: 1041px) {
  .landing-editorial-feature {
    position: sticky;
    top: 92px;
    align-self: start;
  }

  .landing-editorial-rail {
    gap: 56px;
    padding-bottom: 380px;
  }

  .landing-editorial-side:not(.is-current) {
    opacity: 0.56;
  }
}

.landing-editorial-section {
  margin-top: 122px;
}

.landing-editorial-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.landing-editorial-section-head h2 {
  margin: 0;
  color: var(--ai-home-text);
  font-size: 26px;
  font-weight: 720;
  line-height: 1.25;
  letter-spacing: 0;
}

.landing-editorial-section-head span {
  color: var(--ai-home-muted);
  font-size: 11px;
  font-weight: 620;
}

.landing-editorial-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.landing-editorial-insight {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--ai-home-line);
}

.landing-editorial-insight .landing-editorial-media {
  width: 112px;
  aspect-ratio: 1;
}

.landing-editorial-insight h3 {
  margin: 7px 0 7px;
  color: var(--ai-home-text);
  font-size: 16px;
  font-weight: 680;
  line-height: 1.45;
  letter-spacing: 0;
}

.landing-editorial-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.landing-editorial-case .landing-editorial-media {
  aspect-ratio: 4 / 3;
}

.landing-editorial-case-copy {
  padding-top: 15px;
}

.landing-editorial-case h3 {
  margin: 7px 0 7px;
  color: var(--ai-home-text);
  font-size: 18px;
  font-weight: 690;
  line-height: 1.42;
  letter-spacing: 0;
}

.landing-editorial-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 600ms ease,
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-editorial-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1040px) {
  .landing-editorial-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .landing-editorial-lead {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-editorial-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .landing-editorial-insights {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .landing-editorial {
    padding: 68px 14px 92px;
  }

  .landing-editorial-intro {
    margin-bottom: 32px;
  }

  .landing-editorial-intro h2 {
    font-size: 31px;
    line-height: 1.18;
  }

  .landing-editorial-intro p {
    font-size: 13px;
  }

  .landing-editorial-feature .landing-editorial-media {
    aspect-ratio: 4 / 3;
  }

  .landing-editorial-feature h3 {
    font-size: 24px;
  }

  .landing-editorial-rail,
  .landing-editorial-cases {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-editorial-section {
    margin-top: 76px;
  }

  .landing-editorial-section-head {
    margin-bottom: 20px;
  }

  .landing-editorial-section-head h2 {
    font-size: 23px;
  }

  .landing-editorial-insight {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
  }

  .landing-editorial-insight .landing-editorial-media {
    width: 96px;
  }

  .landing-image-lightbox {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 5px;
  }

  .landing-image-lightbox-image-wrap,
  .landing-image-lightbox img {
    max-height: calc(100dvh - 122px);
  }

  .landing-image-lightbox-close {
    top: 13px;
    right: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-editorial-reveal,
  .landing-editorial-media img,
  .landing-editorial-zoom,
  .landing-image-lightbox,
  .landing-image-lightbox::backdrop {
    transition: none !important;
    animation: none !important;
  }
}

body:not(.landing-active):not(.login-active):not(.feedback-active) .app {
  display: block !important;
  min-width: 0 !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active) .sidebar {
  display: none !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active) .main {
  width: 100%;
  min-height: 100vh;
}

body:not(.landing-active):not(.login-active):not(.feedback-active) .topbar {
  z-index: 80;
  height: 58px;
  min-height: 58px;
  grid-template-columns: minmax(520px, 1fr) minmax(0, auto) !important;
  gap: 12px !important;
  padding: 0 20px !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active) .topbar .top-left {
  display: flex !important;
  width: auto !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active) .topbar .top-actions {
  flex-wrap: nowrap !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active) .topbar .segmented {
  order: 0 !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active)
  :where(
    .content[data-view='dashboard'],
    .category-page,
    .products-page[data-view='products'],
    .video-assets-page[data-view='video'],
    .store-page[data-view='store'],
    .creators-page[data-view='creators'],
    .live-page[data-view='live'],
    .competitor-page[data-view='competitor'],
    .chat-bi-page[data-view='chatbi'],
    .consumer-page[data-view='consumer']
  ) {
  padding-top: 14px !important;
}

@media (max-width: 1500px) {
  body:not(.landing-active):not(.login-active):not(.feedback-active) .topbar {
    grid-template-columns: minmax(390px, 1fr) auto !important;
  }
}

@media (max-width: 1180px) {
  body:not(.landing-active):not(.login-active):not(.feedback-active) .topbar {
    height: 58px !important;
    min-height: 58px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 0 12px !important;
  }
}

body:not(.landing-active):not(.login-active):not(.feedback-active) .app {
  display: grid !important;
  grid-template-columns: var(--sidebar-wide) minmax(0, 1fr) !important;
  min-width: 0 !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active).sidebar-collapsed .app {
  grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr) !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active) .sidebar {
  display: flex !important;
  width: var(--sidebar-wide);
  min-width: var(--sidebar-wide);
  max-width: var(--sidebar-wide);
}

body:not(.landing-active):not(.login-active):not(.feedback-active).sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed);
  min-width: var(--sidebar-collapsed);
  max-width: var(--sidebar-collapsed);
}

body:not(.landing-active):not(.login-active):not(.feedback-active) .main {
  width: auto;
  min-width: 0;
}

body:not(.landing-active):not(.login-active):not(.feedback-active) .workspace-secondary-nav,
body:not(.landing-active):not(.login-active):not(.feedback-active) .workspace-top-brand {
  display: none !important;
}

body:not(.landing-active):not(.login-active):not(.feedback-active) .topbar {
  height: 58px;
  min-height: 58px;
  grid-template-columns: minmax(260px, 1fr) minmax(0, auto) !important;
  gap: 14px !important;
  padding: 0 24px 0 52px !important;
}

@media (min-width: 1101px) {
  body:not(.landing-active):not(.login-active):not(.feedback-active).sidebar-expanded .app {
    grid-template-columns: var(--sidebar-wide) minmax(0, 1fr) !important;
  }

  body:not(.landing-active):not(.login-active):not(.feedback-active).sidebar-expanded .sidebar {
    width: var(--sidebar-wide) !important;
    min-width: var(--sidebar-wide) !important;
    max-width: var(--sidebar-wide) !important;
    flex-basis: var(--sidebar-wide) !important;
  }

  body:not(.landing-active):not(.login-active):not(.feedback-active) .product-filter-details,
  body:not(.landing-active):not(.login-active):not(.feedback-active) .product-filter-scrim {
    height: calc(100dvh - 74px);
  }
}

body.landing-preview-open {
  overflow: hidden;
}

.landing-data-preview {
  position: fixed;
  inset: 0;
  z-index: 470;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(13, 18, 30, 0.38);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 210ms ease,
    visibility 0s linear 210ms;
}

.landing-data-preview.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.landing-data-preview-dialog {
  position: relative;
  width: min(1180px, calc(100vw - 48px));
  max-height: min(820px, calc(100dvh - 48px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ai-home-text) 10%, transparent);
  border-radius: 8px;
  background: var(--ai-home-surface, #fff);
  color: var(--ai-home-text, #16181d);
  box-shadow: 0 32px 80px rgba(14, 20, 34, 0.24);
  transform: translateY(18px) scale(0.985);
  transition: transform 330ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-data-preview.is-open .landing-data-preview-dialog {
  transform: translateY(0) scale(1);
}

.landing-data-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--ai-home-text) 9%, transparent);
}

.landing-data-preview-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ai-home-muted, #6b7280);
  font-size: 12px;
}

.landing-data-preview-breadcrumb strong {
  color: var(--ai-home-text, #16181d);
  font-size: 13px;
}

.landing-data-preview-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ai-home-muted, #6b7280);
  cursor: pointer;
}

.landing-data-preview-close:hover,
.landing-data-preview-close:focus-visible {
  background: color-mix(in srgb, var(--ai-home-text) 7%, transparent);
  color: var(--ai-home-text, #16181d);
  outline: 0;
}

.landing-data-preview-body {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  min-height: 600px;
}

.landing-data-preview-public {
  min-width: 0;
  padding: 34px 34px 28px;
  overflow: auto;
}

.landing-data-preview-kicker {
  display: block;
  margin-bottom: 9px;
  color: var(--ai-home-accent, #4f5fe7);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.landing-data-preview-public h2,
.landing-data-preview-public p,
.landing-data-preview-locked h3,
.landing-data-preview-locked p {
  margin: 0;
}

.landing-data-preview-public h2 {
  max-width: 620px;
  font-size: clamp(25px, 2.2vw, 34px);
  line-height: 1.18;
}

.landing-data-preview-public > p {
  max-width: 660px;
  margin-top: 10px;
  color: var(--ai-home-muted, #6b7280);
  font-size: 13px;
  line-height: 1.7;
}

.landing-data-preview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 28px 0 26px;
  border-top: 1px solid color-mix(in srgb, var(--ai-home-text) 9%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ai-home-text) 9%, transparent);
}

.landing-data-preview-metric {
  min-width: 0;
  padding: 18px 18px 17px 0;
}

.landing-data-preview-metric + .landing-data-preview-metric {
  padding-left: 18px;
  border-left: 1px solid color-mix(in srgb, var(--ai-home-text) 9%, transparent);
}

.landing-data-preview-metric span,
.landing-data-preview-metric strong {
  display: block;
}

.landing-data-preview-metric span {
  color: var(--ai-home-muted, #6b7280);
  font-size: 10px;
}

.landing-data-preview-metric strong {
  margin-top: 7px;
  overflow: hidden;
  font-size: 22px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-data-preview-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.landing-data-preview-section-title strong {
  font-size: 13px;
}

.landing-data-preview-section-title span {
  color: var(--ai-home-muted, #6b7280);
  font-size: 10px;
}

.landing-data-preview-table {
  width: 100%;
  min-width: 0 !important;
  border-collapse: collapse;
  table-layout: fixed;
}

.landing-data-preview-table th,
.landing-data-preview-table td {
  box-sizing: border-box;
  width: auto !important;
  min-width: 0 !important;
  padding: 13px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--ai-home-text) 8%, transparent);
  text-align: left;
  vertical-align: middle;
}

.landing-data-preview-table th {
  color: var(--ai-home-muted, #6b7280);
  font-size: 9px;
  font-weight: 700;
}

.landing-data-preview-table td {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-data-preview-table td:first-child {
  font-weight: 760;
}

.landing-data-preview-positive {
  color: #16845b;
  font-weight: 760;
}

.landing-data-preview-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--ai-home-muted, #6b7280);
  font-size: 10px;
}

.landing-data-preview-note::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22a06b;
  content: '';
}

.landing-data-preview-locked {
  position: relative;
  min-width: 0;
  padding: 34px 30px;
  overflow: hidden;
  border-left: 1px solid color-mix(in srgb, var(--ai-home-text) 9%, transparent);
  background: color-mix(
    in srgb,
    var(--ai-home-surface, #fff) 92%,
    var(--ai-home-accent, #4f5fe7) 8%
  );
}

.landing-data-preview-locked-content {
  filter: blur(4px);
  opacity: 0.44;
  -webkit-user-select: none;
          user-select: none;
}

.landing-data-preview-chart {
  display: flex;
  align-items: end;
  gap: 10px;
  height: 170px;
  margin-top: 24px;
  padding: 16px 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ai-home-text) 15%, transparent);
}

.landing-data-preview-chart i {
  flex: 1 1;
  min-width: 8px;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--ai-home-accent, #4f5fe7) 70%, #8fa0ff 30%);
}

.landing-data-preview-lines {
  margin-top: 28px;
}

.landing-data-preview-lines span {
  display: block;
  height: 38px;
  border-bottom: 1px solid color-mix(in srgb, var(--ai-home-text) 14%, transparent);
}

.landing-data-preview-gate {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 42px;
  text-align: center;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--ai-home-surface, #fff) 72%, transparent) 22%,
    var(--ai-home-surface, #fff) 78%
  );
}

.landing-data-preview-gate > span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--ai-home-accent, #4f5fe7) 25%, transparent);
  border-radius: 999px;
  color: var(--ai-home-accent, #4f5fe7);
  font-size: 9px;
  font-weight: 800;
}

.landing-data-preview-gate h3 {
  max-width: 330px;
  margin-top: 14px;
  font-size: 22px;
  line-height: 1.28;
}

.landing-data-preview-gate p {
  max-width: 340px;
  margin-top: 9px;
  color: var(--ai-home-muted, #6b7280);
  font-size: 12px;
  line-height: 1.65;
}

.landing-data-preview-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.landing-data-preview-actions button {
  min-height: 39px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
}

.landing-data-preview-primary {
  border: 1px solid var(--ai-home-accent, #4f5fe7);
  background: var(--ai-home-accent, #4f5fe7);
  color: #fff;
}

.landing-data-preview-secondary {
  border: 1px solid color-mix(in srgb, var(--ai-home-text) 14%, transparent);
  background: var(--ai-home-surface, #fff);
  color: var(--ai-home-text, #16181d);
}

@media (max-width: 900px) {
  .landing-data-preview {
    padding: 12px;
  }
  .landing-data-preview-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }
  .landing-data-preview-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .landing-data-preview-public {
    padding: 26px 20px;
  }
  .landing-data-preview-locked {
    min-height: 390px;
    border-top: 1px solid color-mix(in srgb, var(--ai-home-text) 9%, transparent);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .landing-data-preview {
    padding: 0;
  }
  .landing-data-preview-dialog {
    width: 100vw;
    max-height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .landing-data-preview-header {
    min-height: 56px;
    padding: 0 16px;
  }
  .landing-data-preview-public h2 {
    font-size: 25px;
  }
  .landing-data-preview-metric {
    padding-right: 9px;
  }
  .landing-data-preview-metric + .landing-data-preview-metric {
    padding-left: 9px;
  }
  .landing-data-preview-metric strong {
    font-size: 17px;
  }
  .landing-data-preview-table th:nth-child(3),
  .landing-data-preview-table td:nth-child(3) {
    display: none;
  }
  .landing-data-preview-gate {
    padding: 28px 20px;
  }
}

body:not(.landing-active):not(.login-active):not(.feedback-active)
  .topbar
  .top-actions
  > .segmented {
  display: none !important;
}

.landing-page .landing-top {
  position: sticky !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 260;
}

.landing-page .landing-site-footer {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 42px clamp(24px, 4vw, 72px) 48px;
  border-top: 1px solid var(--ai-home-line, rgba(15, 23, 42, 0.12));
  background: var(--ai-home-bg, #ffffff);
  color: var(--ai-home-text, #101828);
}

.landing-site-footer-inner {
  display: grid;
  width: min(1500px, 100%);
  margin: 0 auto;
  grid-template-columns: minmax(320px, 1.6fr) repeat(3, minmax(170px, 0.72fr));
  gap: 48px;
}

.landing-site-footer-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-size: 18px;
  font-weight: 800;
}

.landing-site-footer-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.landing-site-footer-copy {
  max-width: 560px;
  margin: 14px 0 0;
  color: var(--ai-home-muted, #667085);
  font-size: 13px;
  line-height: 1.75;
}

.landing-site-footer-title {
  margin: 3px 0 14px;
  color: inherit;
  font-size: 14px;
  font-weight: 800;
}

.landing-site-footer-link {
  display: block;
  width: fit-content;
  margin-top: 10px;
  color: var(--ai-home-muted, #667085);
  font-size: 13px;
  line-height: 1.55;
  text-decoration: none;
  transition: color 180ms ease;
}

a.landing-site-footer-link:hover,
a.landing-site-footer-link:focus-visible {
  color: var(--ai-home-text, #101828);
}

@media (max-width: 980px) {
  .landing-site-footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 44px;
  }
}

@media (max-width: 680px) {
  .landing-page .landing-site-footer {
    padding: 34px 20px 40px;
  }

  .landing-site-footer-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 700px) {
  body:not(.landing-active):not(.login-active):not(.feedback-active) .app,
  body:not(.landing-active):not(.login-active):not(.feedback-active).sidebar-expanded .app {
    grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr) !important;
  }
  body:not(.landing-active):not(.login-active):not(.feedback-active) .sidebar,
  body:not(.landing-active):not(.login-active):not(.feedback-active).sidebar-expanded .sidebar {
    width: var(--sidebar-collapsed) !important;
    min-width: var(--sidebar-collapsed) !important;
    max-width: var(--sidebar-collapsed) !important;
  }
  body:not(.landing-active):not(.login-active):not(.feedback-active) .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 0 10px !important;
  }
  body:not(.landing-active):not(.login-active):not(.feedback-active)
    .top-actions
    > :not(.account-menu-shell) {
    display: none !important;
  }
  body:not(.landing-active):not(.login-active):not(.feedback-active) .top-left {
    min-width: 0;
  }
}

.landing-page {
  --figma-home-ink: #101114;
  --figma-home-muted: #676b73;
  --figma-home-line: rgba(16, 17, 20, 0.12);
  --figma-home-soft: #f3f5f4;
  --figma-home-green: #0c7a55;
  --figma-home-blue: #325fcb;
}

.landing-page[data-theme='black'],
.landing-page[data-theme='custom'][data-custom-mode='dark'] {
  --figma-home-ink: #f6f7f8;
  --figma-home-muted: #a8adb7;
  --figma-home-line: rgba(255, 255, 255, 0.14);
  --figma-home-soft: #17191d;
  --figma-home-green: #5bd0a4;
  --figma-home-blue: #8daaff;
}

.figma-home-shell {
  box-sizing: border-box;
  width: min(1320px, 100%);
  margin: 0 auto;
}

.landing-editorial {
  display: none !important;
}

.figma-home-lead {
  padding: 88px 24px 112px;
  color: var(--figma-home-ink);
  background: var(--ai-home-bg);
}

.figma-home-lead-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.35fr);
  align-items: center;
  gap: clamp(48px, 7vw, 112px);
}

.figma-home-eyebrow {
  display: block;
  margin-bottom: 16px;
  color: var(--figma-home-green);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
}

.figma-home-lead-copy h2,
.figma-home-section-head h2,
.figma-home-cta h2 {
  margin: 0;
  color: var(--figma-home-ink);
  font-size: 42px;
  font-weight: 720;
  line-height: 1.18;
  letter-spacing: 0;
  text-wrap: balance;
}

.figma-home-lead-copy > p,
.figma-home-section-head > p,
.figma-home-cta p {
  margin: 22px 0 0;
  color: var(--figma-home-muted);
  font-size: 14px;
  line-height: 1.85;
}

.figma-home-lead-actions,
.figma-home-cta > .figma-home-shell > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
}

.figma-home-primary,
.figma-home-text-action {
  min-height: 42px;
  border-radius: 4px !important;
  box-shadow: none !important;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transform: none !important;
}

.figma-home-primary {
  padding: 0 18px;
  border: 1px solid var(--figma-home-ink) !important;
  background: var(--figma-home-ink) !important;
  color: var(--ai-home-bg) !important;
}

.figma-home-primary:hover {
  opacity: 0.86;
  transform: translateY(-1px) !important;
}

.figma-home-text-action {
  padding: 0 2px;
  border: 0 !important;
  background: transparent !important;
  color: var(--figma-home-ink) !important;
}

.figma-home-text-action span {
  display: inline-block;
  margin-left: 6px;
  transition: transform 240ms ease;
}

.figma-home-text-action:hover span {
  transform: translateX(4px);
}

.figma-home-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 54px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--figma-home-line);
}

.figma-home-facts div {
  min-width: 0;
}

.figma-home-facts dt {
  color: var(--figma-home-ink);
  font-size: 22px;
  font-weight: 720;
}

.figma-home-facts dd {
  margin: 5px 0 0;
  color: var(--figma-home-muted);
  font-size: 10px;
  line-height: 1.55;
}

.figma-home-lead-visual {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #111827;
  box-shadow: 0 26px 70px rgba(16, 17, 20, 0.16);
}

.figma-home-lead-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.figma-home-lead-visual:hover img {
  transform: scale(1.018);
}

.figma-home-lead-visual figcaption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  background: rgba(10, 14, 22, 0.78);
  color: #fff;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.figma-home-lead-visual figcaption span {
  color: #83e2bb;
  font-size: 10px;
  font-weight: 720;
}

.figma-home-lead-visual figcaption strong {
  font-size: 11px;
  font-weight: 620;
  text-align: right;
}

.landing-growth-story {
  padding-top: 112px;
  padding-bottom: 112px;
  border-top: 0;
}

.figma-home-flow,
.figma-home-roles,
.figma-home-updates,
.figma-home-cta {
  padding: 118px 24px;
  color: var(--figma-home-ink);
}

.figma-home-flow,
.figma-home-updates {
  background: var(--ai-home-bg);
}

.figma-home-roles {
  background: var(--figma-home-soft);
}

.figma-home-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 0.48fr);
  align-items: end;
  column-gap: 70px;
  margin-bottom: 56px;
}

.figma-home-section-head .figma-home-eyebrow {
  grid-column: 1 / -1;
}

.figma-home-section-head > p {
  margin: 0;
}

.figma-home-flow-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--figma-home-line);
  list-style: none;
}

.figma-home-flow-list li {
  min-width: 0;
  padding: 24px 22px 10px 0;
}

.figma-home-flow-list li + li {
  padding-left: 22px;
  border-left: 1px solid var(--figma-home-line);
}

.figma-home-flow-list li > span {
  color: var(--figma-home-green);
  font-size: 10px;
  font-weight: 760;
}

.figma-home-flow-list h3 {
  margin: 34px 0 10px;
  font-size: 18px;
  font-weight: 700;
}

.figma-home-flow-list p {
  min-height: 72px;
  margin: 0;
  color: var(--figma-home-muted);
  font-size: 11px;
  line-height: 1.75;
}

.figma-home-flow-list button,
.figma-home-role-list details > button {
  margin-top: 18px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: var(--figma-home-ink) !important;
  box-shadow: none !important;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  transform: none !important;
}

.figma-home-flow-list button:hover,
.figma-home-role-list details > button:hover {
  color: var(--figma-home-green) !important;
}

.figma-home-roles-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(56px, 9vw, 150px);
}

.figma-home-roles .figma-home-section-head {
  display: block;
  position: sticky;
  top: 110px;
  margin: 0;
}

.figma-home-role-list {
  border-top: 1px solid var(--figma-home-line);
}

.figma-home-role-list details {
  border-bottom: 1px solid var(--figma-home-line);
}

.figma-home-role-list summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 24px;
  min-height: 86px;
  cursor: pointer;
  list-style: none;
}

.figma-home-role-list summary::-webkit-details-marker {
  display: none;
}

.figma-home-role-list summary::after {
  content: '+';
  color: var(--figma-home-muted);
  font-size: 20px;
  font-weight: 400;
  text-align: right;
  transition: transform 260ms ease;
}

.figma-home-role-list details[open] summary::after {
  transform: rotate(45deg);
}

.figma-home-role-list summary span {
  font-size: 19px;
  font-weight: 700;
}

.figma-home-role-list summary small {
  color: var(--figma-home-muted);
  font-size: 10px;
  font-weight: 560;
}

.figma-home-role-list details > p {
  max-width: 620px;
  margin: -4px 48px 0 0;
  color: var(--figma-home-muted);
  font-size: 12px;
  line-height: 1.8;
}

.figma-home-role-list details > button {
  margin-bottom: 28px;
}

.figma-home-update-list {
  border-top: 1px solid var(--figma-home-line);
}

.figma-home-update-list > button {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 28px;
  width: 100%;
  min-height: 94px;
  padding: 0;
  border: 0 !important;
  border-bottom: 1px solid var(--figma-home-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--figma-home-ink) !important;
  box-shadow: none !important;
  cursor: pointer;
  text-align: left;
  transform: none !important;
}

.figma-home-update-list time {
  color: var(--figma-home-muted);
  font-size: 11px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.figma-home-update-list span,
.figma-home-update-list b,
.figma-home-update-list small {
  display: block;
}

.figma-home-update-list b {
  font-size: 16px;
  font-weight: 690;
}

.figma-home-update-list small {
  margin-top: 6px;
  color: var(--figma-home-muted);
  font-size: 10px;
  font-weight: 520;
}

.figma-home-update-list i {
  color: var(--figma-home-muted);
  font-size: 16px;
  font-style: normal;
  transition: transform 240ms ease;
}

.figma-home-update-list > button:hover i {
  color: var(--figma-home-green);
  transform: translateX(5px);
}

.figma-home-cta {
  background: #11151c;
  text-align: center;
}

.figma-home-cta .figma-home-shell {
  display: grid;
  justify-items: center;
}

.figma-home-cta h2,
.figma-home-cta p {
  color: #f7f8fa;
}

.figma-home-cta p {
  color: #aeb6c3;
}

.figma-home-cta .figma-home-primary {
  border-color: #f7f8fa !important;
  background: #f7f8fa !important;
  color: #11151c !important;
}

.figma-home-cta .figma-home-text-action {
  color: #f7f8fa !important;
}

.figma-home-lead,
.figma-home-flow,
.figma-home-roles,
.figma-home-updates,
.landing-growth-story {
  display: none !important;
}

.landing-ai-home {
  min-height: 500px !important;
}

.landing-editorial {
  display: block !important;
}

@media (min-width: 681px) {
  .landing-editorial {
    padding-top: 160px;
  }
}

@media (min-width: 1041px) {
  .landing-editorial-rail {
    padding-bottom: 0 !important;
  }
}

.landing-page {
  --homepage-solid-bg: #ffffff;
}

.landing-page[data-theme='black'],
.landing-page[data-theme='custom'][data-custom-mode='dark'] {
  --homepage-solid-bg: #0d0f12;
}

.landing-page,
.landing-page,
.landing-page .landing-ai-home,
.landing-page .landing-editorial,
.landing-page .landing-trend-gallery,
.landing-page .figma-home-cta,
.landing-page .landing-site-footer {
  background: var(--homepage-solid-bg) !important;
  background-image: none !important;
}

.landing-page .landing-editorial,
.landing-page .landing-trend-gallery,
.landing-page .figma-home-cta,
.landing-page .landing-site-footer {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.landing-page .figma-home-cta h2,
.landing-page .figma-home-cta p {
  color: var(--figma-home-ink);
}

.landing-page .figma-home-cta p {
  color: var(--figma-home-muted);
}

.landing-page .figma-home-cta .figma-home-primary {
  border-color: var(--figma-home-ink) !important;
  background: var(--figma-home-ink) !important;
  color: var(--homepage-solid-bg) !important;
}

.landing-page .figma-home-cta .figma-home-text-action {
  color: var(--figma-home-ink) !important;
}

@media (max-width: 1040px) {
  .figma-home-lead-grid,
  .figma-home-roles-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .figma-home-section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .figma-home-flow-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .figma-home-flow-list li {
    border-bottom: 1px solid var(--figma-home-line);
  }

  .figma-home-roles .figma-home-section-head {
    position: static;
  }
}

@media (max-width: 680px) {
  .figma-home-lead,
  .figma-home-flow,
  .figma-home-roles,
  .figma-home-updates,
  .figma-home-cta {
    padding: 76px 16px;
  }

  .figma-home-lead-copy h2,
  .figma-home-section-head h2,
  .figma-home-cta h2 {
    font-size: 31px;
  }

  .figma-home-lead-visual figcaption {
    display: none;
  }

  .figma-home-flow-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .figma-home-flow-list li,
  .figma-home-flow-list li + li {
    padding: 22px 0;
    border-left: 0;
  }

  .figma-home-flow-list p {
    min-height: 0;
  }

  .figma-home-role-list summary {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 14px;
  }

  .figma-home-role-list summary small {
    display: none;
  }

  .figma-home-update-list > button {
    grid-template-columns: 52px minmax(0, 1fr) 20px;
    gap: 14px;
  }

  .landing-ai-home {
    min-height: 470px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .figma-home-lead-visual img,
  .figma-home-text-action span,
  .figma-home-update-list i,
  .figma-home-role-list summary::after {
    transition: none !important;
  }
}

.landing-page,
.landing-page,
.landing-page .landing-top,
.landing-page .landing-ai-home,
.landing-page .landing-editorial,
.landing-page .landing-trend-gallery,
.landing-page .figma-home-cta,
.landing-page .landing-site-footer {
  background-color: var(--homepage-solid-bg) !important;
  background-image: none !important;
}

.landing-page::before,
.landing-page::after {
  display: none !important;
  background: none !important;
  content: none !important;
}

.landing-page .figma-home-cta {
  background-color: #f4f5f6 !important;
}

.landing-page[data-theme='black'] .figma-home-cta,
.landing-page[data-theme='custom'][data-custom-mode='dark'] .figma-home-cta {
  background-color: #17191d !important;
}

.landing-page .landing-top .landing-ghost-button {
  border-color: #111318 !important;
  background: #111318 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.landing-page .landing-top .landing-ghost-button:hover {
  border-color: #2b2e34 !important;
  background: #2b2e34 !important;
  color: #ffffff !important;
}

.landing-page[data-theme='black'] .landing-top .landing-ghost-button,
.landing-page[data-theme='custom'][data-custom-mode='dark'] .landing-top .landing-ghost-button {
  border-color: #f4f5f6 !important;
  background: #f4f5f6 !important;
  color: #111318 !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  ) {
  background: #f5f5f6;
  color: #18191d;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .app {
  --workspace-ink: #18191d;
  --workspace-muted: #70757f;
  --workspace-line: #e7e8eb;
  --workspace-soft: #f5f5f6;
  --workspace-hover: #f1f2f4;
  background: var(--workspace-soft);
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Noto Sans CJK SC', Arial, sans-serif;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .sidebar {
  border-right: 1px solid var(--workspace-line);
  background: #fff;
  box-shadow: none;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .brand {
  height: 62px;
  gap: 10px;
  padding: 0 18px;
  border-bottom-color: var(--workspace-line);
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  filter: none;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .brand-name {
  color: var(--workspace-ink);
  font-size: 20px;
  font-weight: 760;
  letter-spacing: 0;
  text-shadow: none;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .nav {
  padding-top: 12px;
  padding-bottom: 12px;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  :where(.nav-title, .nav-section-toggle) {
  color: #8a9099;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .nav-item {
  min-height: 42px;
  border-radius: 6px;
  color: #626975;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .nav-item
  svg {
  color: #7d8490;
  filter: none;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .nav-item:hover {
  background: var(--workspace-hover) !important;
  color: var(--workspace-ink);
  transform: translateX(2px) !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .nav-item:hover
  svg,
body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .nav-item.active
  svg {
  color: var(--workspace-ink);
  filter: none;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .nav-item.active {
  background: #eceef1 !important;
  color: #111216;
  box-shadow: inset 2px 0 0 #111216;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .subnav {
  border-left-color: var(--workspace-line);
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .subnav
  button {
  color: #777e88;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .subnav
  button:hover,
body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .subnav
  button.active {
  background: #f1f2f4;
  color: #15161a;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .sidebar-toggle {
  border-color: #dfe1e5;
  background: #fff;
  color: #34373d;
  box-shadow: 0 8px 20px rgba(20, 24, 32, 0.08);
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .sidebar-toggle:hover {
  border-color: #18191d;
  background: #18191d;
  color: #fff;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .profile {
  border-top-color: var(--workspace-line);
  color: #3e434b;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .profile:hover,
body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .profile.active {
  background: var(--workspace-hover);
  color: #111216;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .topbar {
  min-height: 62px;
  border-bottom: 1px solid var(--workspace-line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.02);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .breadcrumb {
  color: #27292e;
  font-weight: 720;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .breadcrumb
  span:last-child {
  color: #7a808a;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .search
  input {
  height: 36px;
  border-color: #dfe1e5;
  border-radius: 7px;
  background: #f8f8f9;
  color: #202227;
  box-shadow: none;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .search
  input:focus {
  border-color: #a8adb5;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(24, 25, 29, 0.06);
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .top-actions
  :where(
    .market-toggle,
    .theme-toggle,
    .language-toggle,
    .icon-button,
    .chat-button,
    .account-entry-button
  ):hover {
  border-radius: 6px !important;
  background: #f2f3f4 !important;
  color: #18191d !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  :where(.top-account-avatar, .ai-orb-button) {
  background: #18191d !important;
  color: #fff !important;
  box-shadow: none !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .workspace-secondary-nav {
  border-bottom: 1px solid var(--workspace-line);
  background: #fff;
  box-shadow: none;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .workspace-nav-mega {
  border-color: var(--workspace-line);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 52px rgba(20, 24, 32, 0.12);
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .main {
  background: var(--workspace-soft);
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard'] {
  --dashboard-hairline: #e8e9ec;
  padding: 16px 18px 48px !important;
  background: var(--workspace-soft) !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  .dashboard {
  gap: 16px !important;
  padding: 0 20px 38px;
  background: #fff;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  .dashboard-context {
  min-height: 70px;
  padding: 15px 0 14px !important;
  border-bottom-color: var(--dashboard-hairline) !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  :where(.dashboard-context-icon, .cockpit-section-icon) {
  color: #202227;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  .dashboard-context
  h1 {
  color: #17181c;
  font-size: 21px !important;
  font-weight: 780 !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  :where(.dashboard-template-tabs, .dashboard-time-tabs)
  button:is(.active, [aria-pressed='true']) {
  color: #111216 !important;
  box-shadow: inset 0 -2px 0 #111216 !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  .kpis {
  border-color: var(--dashboard-hairline) !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  .kpi-card {
  min-height: 78px !important;
  padding: 13px 15px !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  .kpi-card:hover {
  background: #fafafa !important;
  box-shadow: none !important;
  transform: none !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  .kpi-value {
  color: #17181c;
  font-size: 20px !important;
  font-weight: 780 !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  .cockpit-panel {
  border-top-color: var(--dashboard-hairline) !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  .cockpit-head {
  min-height: 52px !important;
  padding: 12px 0 !important;
  border-bottom-color: var(--dashboard-hairline) !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  .cockpit-title
  h2 {
  color: #202227;
  font-size: 15px;
  font-weight: 760;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  :where(.cockpit-kicker, .cockpit-meta, .kpi-label, .kpi-note) {
  color: #747a84 !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  .opportunity-item:first-child::before {
  background: #202227;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  .opportunity-item:first-child
  .rank-dot {
  color: #202227;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  .signal-pill {
  background: #f0f1f3;
  color: #3b3f46;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  .recommend-note {
  border-left-color: #202227;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  .alerts {
  border-left-color: var(--dashboard-hairline) !important;
  background: #fff !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .nav-item.active,
body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .nav-item.active
  svg {
  color: #111216 !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .content[data-view='dashboard']
  :where(.dashboard-template-tabs, .dashboard-time-tabs)
  button:is(.active, [aria-pressed='true']) {
  background: transparent !important;
  color: #111216 !important;
  box-shadow: inset 0 -2px 0 #111216 !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  :where(.sidebar, .nav) {
  scrollbar-color: #c8cbd1 transparent;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  :where(.sidebar, .nav)::-webkit-scrollbar {
  width: 5px;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  :where(.sidebar, .nav)::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #c8cbd1;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .main
  > .app-view {
  background: #f4f5f6 !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .ai-chat-panel {
  overflow: hidden;
  border: 1px solid #d9dce1;
  border-radius: 8px;
  background: #fff;
  box-shadow:
    0 24px 64px rgba(20, 24, 32, 0.18),
    0 4px 16px rgba(20, 24, 32, 0.08);
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .ai-chat-panel.is-dragging {
  border-color: #b9bec6;
  box-shadow:
    0 28px 72px rgba(20, 24, 32, 0.22),
    0 0 0 3px rgba(86, 97, 215, 0.1);
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .ai-chat-header {
  min-height: 54px;
  padding: 0 16px;
  border-bottom: 1px solid #e3e5e8;
  background: #f6f7f8;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .ai-chat-body {
  padding: 14px 16px 16px;
  background: #fff;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .ai-chat-input {
  border-color: #d9dce1;
  border-radius: 6px;
  background: #fff;
  color: #202227;
  box-shadow: none;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .ai-chat-input:focus {
  border-color: #aeb3bc;
  box-shadow: 0 0 0 3px rgba(86, 97, 215, 0.09);
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  :where(.ai-send-button, .ai-prompt-chip, .ai-response) {
  border-radius: 6px;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .ai-prompt-chip {
  border-color: #e1e3e7;
  background: #f6f7f8;
  color: #555c66;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .ai-prompt-chip:hover {
  border-color: #ced1d7;
  background: #eceef1;
  color: #202227;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  :where(.core-filter-drawer, .product-filter-details) {
  border-left: 1px solid #d9dce1;
  background: #fff;
  box-shadow:
    -24px 0 60px rgba(20, 24, 32, 0.16),
    -4px 0 14px rgba(20, 24, 32, 0.06);
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  :where(.core-filter-drawer-head, .product-filter-drawer-head) {
  border-bottom-color: #e1e3e7;
  background: #f6f7f8;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .core-filter-drawer-head {
  padding: 17px 18px 14px;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .product-filter-drawer-head {
  margin: 0 -18px;
  padding: 12px 18px;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  :where(.core-filter-drawer-head, .product-filter-drawer-head)
  strong {
  color: #202227;
  font-weight: 780;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  :where(
    .core-filter-drawer-stack > .filter-row,
    .app-view .core-filter-drawer-stack > .compact-filter-row
  ) {
  margin: 8px 0 !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: #f7f8f9 !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .products-page
  .product-indicator-filter-stack
  .product-filter-details
  > .filter-row {
  margin: 8px 0 !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 6px;
  background: #f7f8f9;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  :where(
    .core-filter-drawer-stack .filter-chip,
    .core-filter-drawer-stack .metric-chip,
    .core-filter-drawer-stack .product-check,
    .product-filter-details .filter-chip,
    .product-filter-details .metric-chip,
    .product-filter-details .product-check
  ):not(.active) {
  border-color: #dfe2e6 !important;
  background: #fff !important;
  color: #545b65 !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  :where(
    .core-filter-drawer-stack .filter-chip,
    .core-filter-drawer-stack .metric-chip,
    .core-filter-drawer-stack .product-check,
    .product-filter-details .filter-chip,
    .product-filter-details .metric-chip,
    .product-filter-details .product-check
  ):not(.active):hover {
  border-color: #bfc4cc !important;
  background: #f0f1f3 !important;
  color: #202227 !important;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  :where(.core-filter-drawer-footer, .product-filter-drawer-footer) {
  border-top: 1px solid #dfe2e6;
  background: #fff;
  box-shadow: 0 -10px 24px rgba(20, 24, 32, 0.06);
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  .product-filter-drawer-footer {
  margin: 0 -18px;
  padding: 12px 18px 14px;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  :where(.core-filter-reset, .product-filter-reset) {
  background: #f0f1f3;
  color: #555c66;
}

body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
    .feedback-active
  )
  :where(.core-filter-apply, .product-filter-apply, .ai-send-button) {
  box-shadow: 0 8px 18px rgba(86, 97, 215, 0.18);
}

@media (max-width: 1280px) {
  body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
      .feedback-active
    )
    .brand {
    padding: 0;
  }

  body:is([data-theme='white'], [data-theme='light']):not(.landing-active):not(.login-active):not(
      .feedback-active
    )
    .nav-item:hover {
    transform: none !important;
  }
}

/* React integration: preserve the source layout while reusing Compass controls. */
.landing-page > .landing-top {
  position: sticky;
  top: 0;
  z-index: 80;
}

.landing-page {
  overflow: visible;
  overflow-x: clip;
}

.landing-page .landing-brand {
  text-decoration: none;
}

.landing-page .landing-brand > .landing-logo {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}

.landing-page .landing-brand > .landing-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.landing-page .landing-brand > span:last-child {
  color: var(--ai-home-text);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.landing-page .landing-project-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.landing-page .landing-project-controls .topbarRegionSelector.compact {
  width: 148px;
  min-width: 148px;
}

.landing-page .landing-project-controls .regionSelectorTrigger,
.landing-page .landing-project-controls .regionPickerTrigger,
.landing-page .landing-project-controls .workspacePreferencesTrigger {
  min-height: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ai-home-muted);
  box-shadow: none;
}

.landing-page .landing-project-controls .regionSelectorTrigger:hover,
.landing-page .landing-project-controls .regionPickerTrigger:hover,
.landing-page .landing-project-controls .regionPickerTrigger[aria-expanded='true'],
.landing-page .landing-project-controls .workspacePreferencesTrigger:hover,
.landing-page .landing-project-controls .workspacePreferencesTrigger[aria-expanded='true'] {
  background: var(--ai-home-soft);
  color: var(--ai-home-text);
}

.landing-page .landing-navigation-root {
  display: contents;
}

.landing-page .landing-ai-mega-featured > a {
  position: relative;
  min-width: 0;
  min-height: 30px;
  padding: 7px 10px 0;
  border: 0;
  border-radius: 0;
  color: var(--ai-home-text);
  font-size: 11px;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-underline-offset: 3px;
}

.landing-page .landing-ai-mega-featured > a + a::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 12px;
  background: var(--ai-home-line);
  content: '';
  transform: translateY(-50%);
}

.landing-page .landing-ai-mega-featured > a:hover,
.landing-page .landing-ai-mega-featured > a:focus-visible {
  color: var(--ai-home-accent);
  outline: 0;
}

.landing-page .landing-ai-mega-group-list > a {
  display: grid;
  min-height: 54px;
  padding: 0;
  align-content: start;
  gap: 5px;
  color: var(--ai-home-text);
  text-align: left;
  text-decoration: none;
}

.landing-page .landing-ai-mega-group-list > a small {
  display: block;
  padding-left: 12px;
  color: var(--ai-home-muted);
  font-size: 9px;
  font-weight: 540;
  line-height: 1.55;
}

.landing-page .landing-ai-mega-group-list > a:hover .landing-ai-mega-item-title,
.landing-page .landing-ai-mega-group-list > a:focus-visible .landing-ai-mega-item-title {
  color: var(--ai-home-accent);
}

.landing-page .landing-ai-mega-group-list > a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ai-home-accent) 30%, transparent);
  outline-offset: 3px;
}

.landing-page .landing-ai-mega-spotlight {
  text-decoration: none;
}

.landing-preview-dialog img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 980px) {
  .landing-page .landing-project-controls .topbarRegionSelector.compact {
    width: 42px;
    min-width: 42px;
  }
}

@media (max-width: 680px) {
  .landing-page > .landing-top {
    display: flex;
    min-height: 62px;
    height: 62px;
    padding: 0 14px;
  }

  .landing-page .landing-brand > span:last-child {
    display: inline;
    font-size: 15px;
  }

  .landing-page .landing-actions {
    width: auto;
    margin-left: auto;
    gap: 5px;
  }

  .landing-page .landing-project-controls .topbarRegionSelector.compact,
  .landing-page .landing-login-button {
    display: none;
  }

  .landing-page .landing-project-controls .workspacePreferencesTrigger {
    width: 34px;
    min-width: 34px;
    padding: 0;
  }

  .landing-page .landing-project-controls .workspacePreferencesTriggerText,
  .landing-page .landing-project-controls .workspacePreferencesTriggerSwatch {
    display: none;
  }

  .landing-page .landing-ghost-button {
    width: auto;
    min-width: 0;
    padding: 0 12px;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles/index.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Compass web CSS boundary entry.
 *
 * Import order preserves the pre-split global cascade first. New module files are
 * loaded after the legacy compatibility chunks so future scoped module fixes can
 * override old global rules deliberately.
 */

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/styles.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Compass web global CSS compatibility entry.
 * New module styles belong under app/styles/*.css; keep this file import-only.
 */

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../packages/ui/src/styles/tokens.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
  --cui-user-accent-enabled: false;
  --cui-bg: #f3f5f7;
  --cui-surface: #ffffff;
  --cui-surface-strong: #ffffff;
  --cui-surface-raised: #ffffff;
  --cui-surface-subtle: #f7f8fa;
  --cui-surface-sunken: #eef1f4;
  --cui-surface-hover: #f0f3f5;
  --cui-control-bg: #ffffff;
  --cui-control-line: #dce1e7;
  --cui-control-line-strong: #c3cbd5;
  --cui-control-focus: color-mix(in srgb, var(--cui-primary) 11%, var(--cui-surface));
  --cui-overlay-bg: rgba(15, 20, 28, 0.82);
  --cui-text: #171c24;
  --cui-text-soft: #4c5665;
  --cui-text-muted: #778292;
  --cui-line: var(--cui-control-line);
  --cui-line-strong: var(--cui-control-line-strong);
  --cui-line-soft: #e8ebef;
  --cui-highlight: rgba(255, 255, 255, 0.82);
  --cui-primary: var(--primary, #176b87);
  --cui-primary-light: var(--primary-light, #0f556e);
  --cui-primary-soft: var(
    --primary-soft,
    color-mix(in srgb, var(--cui-primary) 8%, var(--cui-surface))
  );
  --cui-focus: var(--cui-control-focus);
  --cui-success: #16865f;
  --cui-warning: #b7791f;
  --cui-danger: #c2414f;
  --cui-info: #3974c6;
  --cui-accent-secondary: var(--accent, #6857c7);
  --cui-shadow-xs: 0 1px 2px rgba(20, 28, 38, 0.045), inset 0 1px 0 var(--cui-highlight);
  --cui-shadow-sm: 0 6px 18px rgba(20, 28, 38, 0.07), inset 0 1px 0 var(--cui-highlight);
  --cui-shadow-md: 0 18px 46px rgba(20, 28, 38, 0.12), inset 0 1px 0 var(--cui-highlight);
  --cui-radius-xs: 4px;
  --cui-radius-sm: 6px;
  --cui-radius-md: 8px;
  --cui-radius-lg: 8px;
  --cui-radius-full: 999px;
  --cui-control-sm: 32px;
  --cui-control-md: 38px;
  --cui-control-lg: 44px;
  --cui-space-0: 0;
  --cui-space-1: 4px;
  --cui-space-2: 8px;
  --cui-space-3: 12px;
  --cui-space-4: 16px;
  --cui-space-5: 20px;
  --cui-space-6: 24px;
  --cui-space-8: 32px;
  --cui-space-10: 40px;
  --cui-space-12: 48px;
  --cui-z-base: 1;
  --cui-z-sticky: 100;
  --cui-z-dropdown: 1100;
  --cui-z-overlay: 1200;
  --cui-z-modal: 1210;
  --cui-z-popover: 1300;
  --cui-z-toast: 1400;
  --cui-z-tooltip: 1500;
  --cui-duration-fast: 140ms;
  --cui-duration-base: 180ms;
  --cui-duration-slow: 260ms;
  --cui-button-font-weight: 620;
  --cui-button-gap: 8px;
  --cui-button-primary-bg: var(--cui-primary);
  --cui-button-primary-hover-bg: var(--cui-primary-light);
  --cui-button-primary-text: #ffffff;
  --cui-button-secondary-bg: var(--cui-control-bg);
  --cui-button-secondary-border: var(--cui-line);
  --cui-button-danger-bg: color-mix(in srgb, var(--cui-danger) 10%, var(--cui-surface));
  --cui-button-danger-border: color-mix(in srgb, var(--cui-danger) 32%, var(--cui-line));
  --cui-card-radius: var(--cui-radius-md);
  --cui-card-bg: var(--cui-surface);
  --cui-card-border: var(--cui-line);
  --cui-card-subtle-bg: var(--cui-surface-subtle);
  --cui-card-interactive-border: var(--cui-line-strong);
  --cui-input-bg: var(--cui-control-bg);
  --cui-input-border: var(--cui-line);
  --cui-input-border-hover: var(--cui-line-strong);
  --cui-input-focus-border: color-mix(in srgb, var(--cui-primary) 38%, var(--cui-line));
  --cui-input-placeholder: color-mix(in srgb, var(--cui-text-muted) 62%, var(--cui-surface));
  --cui-input-disabled-bg: var(--cui-surface-subtle);
  --cui-input-error-border: color-mix(in srgb, var(--cui-danger) 58%, var(--cui-line));
  --cui-input-error-focus: color-mix(in srgb, var(--cui-danger) 14%, var(--cui-surface));
  --cui-input-warning-border: color-mix(in srgb, var(--cui-warning) 58%, var(--cui-line));
  --cui-input-warning-focus: color-mix(in srgb, var(--cui-warning) 14%, var(--cui-surface));
  --cui-choice-description: var(--cui-text-muted);
  --cui-toast-offset: 20px;
  --cui-toast-gap: 10px;
  --cui-toast-max-width: min(380px, calc(100vw - 40px));
  --cui-media-bg: var(--cui-surface-subtle);
  --cui-media-fallback: var(--cui-text-muted);
  --cui-metric-up: var(--cui-success);
  --cui-metric-down: var(--cui-danger);
  --cui-range-invalid: var(--cui-danger);
  --cui-nav-bg: var(--cui-surface-strong);
  --cui-nav-text: var(--cui-text-soft);
  --cui-nav-active-bg: var(--cui-primary-soft);
  --cui-page-title-marker: var(--cui-primary);
  --cui-section-line: var(--cui-line-soft);
  --cui-filter-chip-bg: var(--cui-surface);
  --cui-filter-chip-hover-bg: var(--cui-surface-hover);
  --cui-filter-chip-active-bg: var(--cui-primary-soft);
  --cui-filter-chip-active-border: color-mix(in srgb, var(--cui-primary) 24%, var(--cui-line));
  --cui-filter-chip-active-text: var(--cui-primary);
  --cui-filter-selected-bg: var(--cui-primary-soft);
  --cui-filter-selected-border: color-mix(in srgb, var(--cui-primary) 22%, var(--cui-line));
  --cui-filter-selected-text: var(--cui-primary);
  --cui-metric-strip-bg: var(--cui-surface-raised);
  --cui-table-header-bg: #f8f9fa;
  --cui-table-row-hover-bg: var(--cui-surface-hover);
  --cui-pagination-gap: var(--cui-space-3);
  --cui-pagination-actions-gap: var(--cui-space-2);
  --cui-pagination-ellipsis-bg: var(--cui-surface-subtle);
  --cui-dialog-overlay-bg: color-mix(in srgb, var(--cui-overlay-bg) 66%, transparent);
  --cui-dialog-surface: var(--cui-surface-strong);
  --cui-dialog-border: var(--cui-line-strong);
  --cui-dialog-footer-bg: var(--cui-surface);
  --cui-dialog-radius: var(--cui-radius-md);
  --cui-drawer-overlay-bg: var(--cui-overlay-bg);
  --cui-drawer-surface: var(--cui-surface);
  --cui-drawer-border: var(--cui-line);
  --cui-drawer-footer-bg: var(--cui-surface);
  --cui-tabs-list-border: var(--cui-line);
  --cui-tabs-segment-bg: var(--cui-surface-subtle);
  --cui-tabs-active-bg: var(--cui-surface);
  --cui-tabs-active-text: var(--cui-text);
  --cui-tabs-active-indicator: var(--cui-primary);
  --cui-density: comfortable;
}

[data-theme='dark'] {
  --cui-bg: #0c1015;
  --cui-surface: #12171d;
  --cui-surface-strong: #161c23;
  --cui-surface-raised: #171d24;
  --cui-surface-subtle: #181e25;
  --cui-surface-sunken: #0e1318;
  --cui-surface-hover: #1d252d;
  --cui-control-bg: #141a20;
  --cui-control-line: #2b333c;
  --cui-control-line-strong: #414c58;
  --cui-line-soft: #222a32;
  --cui-highlight: rgba(255, 255, 255, 0.035);
  --cui-text: #f0f3f6;
  --cui-text-soft: #aab4bf;
  --cui-text-muted: #7f8b98;
  --cui-primary: var(--primary, #59b6c7);
  --cui-primary-light: var(--primary-light, #7ac8d5);
  --cui-success: #54b88a;
  --cui-warning: #d5a44d;
  --cui-danger: #e06c78;
  --cui-info: #6d9fe3;
  --cui-accent-secondary: var(--accent, #9a8bea);
  --cui-input-placeholder: #697583;
  --cui-section-line: var(--cui-line-soft);
  --cui-table-header-bg: #151b21;
  --cui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28), inset 0 1px 0 var(--cui-highlight);
  --cui-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 var(--cui-highlight);
  --cui-shadow-md: 0 22px 54px rgba(0, 0, 0, 0.42), inset 0 1px 0 var(--cui-highlight);
}

[data-theme='light'] {
  --cui-bg: #f3f5f7;
  --cui-surface: #ffffff;
  --cui-surface-strong: #ffffff;
  --cui-surface-raised: #ffffff;
  --cui-surface-subtle: #f7f8fa;
  --cui-surface-sunken: #eef1f4;
  --cui-surface-hover: #f0f3f5;
  --cui-control-bg: #ffffff;
  --cui-control-line: #dce1e7;
  --cui-control-line-strong: #c3cbd5;
  --cui-line-soft: #e8ebef;
  --cui-highlight: rgba(255, 255, 255, 0.82);
  --cui-text: #171c24;
  --cui-text-soft: #4c5665;
  --cui-text-muted: #778292;
  --cui-primary: var(--primary, #176b87);
  --cui-primary-light: var(--primary-light, #0f556e);
  --cui-success: #16865f;
  --cui-warning: #b7791f;
  --cui-danger: #c2414f;
  --cui-info: #3974c6;
  --cui-accent-secondary: var(--accent, #6857c7);
  --cui-section-line: var(--cui-line-soft);
  --cui-table-header-bg: #f8f9fa;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../packages/ui/src/styles.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.cuiBox {
  min-width: 0;
}

.cuiButton,
.cuiIconButton,
.cuiSegmentedButton,
.cuiSwitch {
  -webkit-tap-highlight-color: transparent;
}

/* Shared interaction contract: every enabled Compass control signals clickability. */
:where(
    button[class^='cui'],
    button[class*=' cui'],
    [class^='cui'] button,
    [class*=' cui'] button,
    a[class^='cui'][href],
    a[class*=' cui'][href],
    [class^='cui'] a[href],
    [class*=' cui'] a[href],
    [class^='cui'][role='button'],
    [class*=' cui'][role='button'],
    [class^='cui'][role='menuitem'],
    [class*=' cui'][role='menuitem'],
    [class^='cui'][role='option'],
    [class*=' cui'][role='option'],
    [class^='cui'][role='tab'],
    [class*=' cui'][role='tab'],
    [class^='cui'][role='switch'],
    [class*=' cui'][role='switch'],
    [class^='cui'][role='checkbox'],
    [class*=' cui'][role='checkbox'],
    [class^='cui'][role='radio'],
    [class*=' cui'][role='radio'],
    select[class^='cui'],
    select[class*=' cui'],
    input[class^='cui'][type='checkbox'],
    input[class*=' cui'][type='checkbox'],
    input[class^='cui'][type='radio'],
    input[class*=' cui'][type='radio'],
    input[class^='cui'][type='range'],
    input[class*=' cui'][type='range'],
    input[class^='cui'][type='color'],
    input[class*=' cui'][type='color'],
    input[class^='cui'][type='file'],
    input[class*=' cui'][type='file']
  ):not(:disabled):not([aria-disabled='true']) {
  cursor: pointer;
}

:where(
  button[class^='cui'],
  button[class*=' cui'],
  [class^='cui'] button,
  [class*=' cui'] button,
  select[class^='cui'],
  select[class*=' cui'],
  input[class^='cui'],
  input[class*=' cui'],
  [class^='cui'][role],
  [class*=' cui'][role]
):is(:disabled, [aria-disabled='true']) {
  cursor: not-allowed;
}

.cuiButton {
  position: relative;
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--cui-button-gap);
  border: 1px solid transparent;
  border-radius: var(--cui-radius-sm);
  font: inherit;
  font-weight: var(--cui-button-font-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition:
    background var(--cui-duration-fast) ease,
    border-color var(--cui-duration-fast) ease,
    color var(--cui-duration-fast) ease,
    box-shadow var(--cui-duration-fast) ease,
    transform var(--cui-duration-fast) ease;
}

.cuiButton > span:not(.cuiButtonSpinner) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cuiButton:focus-visible,
.cuiInput:focus,
.cuiSelect:focus,
.cuiTextarea:focus,
.cuiCheckbox:focus-visible,
.cuiRadio:focus-visible,
.cuiSwitch:focus-visible,
.cuiIconButton:focus-visible,
.cuiSegmentedButton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cui-focus);
}

.cuiButton:disabled,
.cuiIconButton:disabled,
.cuiSegmentedButton:disabled,
.cuiSwitch:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none;
}

.cuiButton:not(:disabled):active,
.cuiIconButton:not(:disabled):active {
  transform: translateY(1px);
}

.cuiButtonSm {
  min-height: var(--cui-control-sm);
  padding: 0 11px;
  font-size: 12px;
}

.cuiButtonIconOnly.cuiButtonSm {
  width: var(--cui-control-sm);
  padding: 0;
}

.cuiButtonMd {
  min-height: var(--cui-control-md);
  padding: 0 14px;
  font-size: 13px;
}

.cuiButtonIconOnly.cuiButtonMd {
  width: var(--cui-control-md);
  padding: 0;
}

.cuiButtonLg {
  min-height: var(--cui-control-lg);
  padding: 0 18px;
  font-size: 14px;
}

.cuiButtonIconOnly.cuiButtonLg {
  width: var(--cui-control-lg);
  padding: 0;
}

.cuiButtonPrimary {
  border-color: color-mix(in srgb, var(--cui-primary) 82%, #000000);
  background: var(--cui-button-primary-bg);
  color: var(--cui-button-primary-text);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--cui-primary) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.cuiButtonPrimary:not(:disabled):hover {
  background: var(--cui-button-primary-hover-bg);
  box-shadow:
    0 3px 8px color-mix(in srgb, var(--cui-primary) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.cuiButtonSecondary {
  border-color: var(--cui-button-secondary-border);
  background: var(--cui-button-secondary-bg);
  color: var(--cui-text);
  box-shadow: var(--cui-shadow-xs);
}

.cuiButtonGhost {
  border-color: transparent;
  background: transparent;
  color: var(--cui-text-soft);
}

.cuiButtonDanger {
  border-color: var(--cui-button-danger-border);
  background: var(--cui-button-danger-bg);
  color: var(--cui-danger);
  box-shadow: var(--cui-shadow-xs);
}

.cuiButtonSecondary:not(:disabled):hover,
.cuiButtonGhost:not(:disabled):hover {
  border-color: var(--cui-line-strong);
  background: var(--cui-surface-hover);
  color: var(--cui-text);
}

.cuiButtonDanger:not(:disabled):hover {
  background: color-mix(in srgb, var(--cui-danger) 14%, var(--cui-surface));
}

.cuiButtonSpinner {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 2px solid currentcolor;
  border-right-color: transparent;
  border-radius: 999px;
  opacity: 0.9;
  animation: cuiSpin 700ms linear infinite;
}

.cuiButtonSpinner:not(:empty) {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  animation: none;
}

.cuiButtonIcon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.cuiIconButton {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-control-bg);
  color: var(--cui-text-soft);
  cursor: pointer;
  box-shadow: var(--cui-shadow-xs);
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.cuiIconButton:hover {
  border-color: var(--cui-line-strong);
  background: var(--cui-surface-hover);
  color: var(--cui-text);
}

.cuiIconButton--sm {
  width: 30px;
  height: 30px;
  border-radius: var(--cui-radius-sm);
}
.cuiIconButton--lg {
  width: 44px;
  height: 44px;
}
.cuiIconButton--ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.cuiIconButton--ghost:hover {
  background: var(--cui-surface-hover);
  border-color: transparent;
}
.cuiIconButton--danger {
  color: var(--cui-danger);
  border-color: color-mix(in srgb, var(--cui-danger) 30%, transparent);
}
.cuiIconButton--danger:hover {
  background: color-mix(in srgb, var(--cui-danger) 12%, var(--cui-surface));
  border-color: var(--cui-danger);
  color: var(--cui-danger);
}

.cuiField {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.cuiFieldLabelRow {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cuiFieldLabel {
  color: var(--cui-text);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
}

.cuiFieldOptional {
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.cuiFieldHelp,
.cuiFieldError {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}

.cuiFieldHelp {
  color: var(--cui-text-muted);
}

.cuiFieldError {
  color: var(--cui-danger);
}

.cuiInput,
.cuiSelect,
.cuiTextarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-control-bg);
  color: var(--cui-text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--cui-shadow-xs);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.cuiInput,
.cuiSelect {
  height: var(--cui-control-md);
  padding: 0 12px;
}

.cuiSelect {
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cui-text-muted) 50%),
    linear-gradient(135deg, var(--cui-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 16px,
    calc(100% - 12px) 16px;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}

.cuiTextarea {
  min-height: 96px;
  resize: vertical;
  padding: 10px 12px;
  line-height: 1.55;
}

/* Input component tokens and optional affix shell. Plain inputs keep the same DOM. */
.cuiInput,
.cuiSelect,
.cuiTextarea {
  border-color: var(--cui-input-border);
  background-color: var(--cui-input-bg);
}

.cuiInput::placeholder,
.cuiTextarea::placeholder {
  color: var(--cui-input-placeholder);
}

.cuiInput:hover,
.cuiSelect:hover,
.cuiTextarea:hover {
  border-color: var(--cui-input-border-hover);
}

.cuiInput:focus,
.cuiSelect:focus,
.cuiTextarea:focus {
  border-color: var(--cui-input-focus-border);
}

.cuiInput:disabled,
.cuiSelect:disabled,
.cuiTextarea:disabled {
  background-color: var(--cui-input-disabled-bg);
}

.cuiControlSm.cuiInput,
.cuiControlSm.cuiSelect {
  height: var(--cui-control-sm);
  font-size: 12px;
}

.cuiControlLg.cuiInput,
.cuiControlLg.cuiSelect {
  height: var(--cui-control-lg);
  font-size: 14px;
}

.cuiSelect.cuiControlSm {
  background-position:
    calc(100% - 17px) 13px,
    calc(100% - 12px) 13px;
}

.cuiSelect.cuiControlLg {
  background-position:
    calc(100% - 17px) 19px,
    calc(100% - 12px) 19px;
}

.cuiInputAffix {
  width: 100%;
  min-width: 0;
  height: var(--cui-control-md);
  display: inline-flex;
  align-items: center;
  gap: var(--cui-space-2);
  border: 1px solid var(--cui-input-border);
  border-radius: var(--cui-radius-md);
  background: var(--cui-input-bg);
  color: var(--cui-text-soft);
  box-shadow: var(--cui-shadow-xs);
  padding: 0 12px;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.cuiInputAffix.cuiControlSm {
  height: var(--cui-control-sm);
}
.cuiInputAffix.cuiControlLg {
  height: var(--cui-control-lg);
}

.cuiInputAffix:hover {
  border-color: var(--cui-input-border-hover);
}
.cuiInputAffix:focus-within {
  border-color: var(--cui-input-focus-border);
  box-shadow: 0 0 0 2px var(--cui-focus);
}

.cuiInputAffix .cuiInput {
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.cuiInputAffix .cuiInput:focus {
  box-shadow: none;
}

.cuiInputPrefix,
.cuiInputSuffix {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  line-height: 1;
}

.cuiInputClear {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--cui-radius-full);
  background: transparent;
  color: var(--cui-text-muted);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 0;
}

.cuiInputClear:hover {
  background: var(--cui-surface-hover);
  color: var(--cui-text);
}
.cuiInputClear:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--cui-focus);
}

.cuiInput.cuiControlError,
.cuiSelect.cuiControlError,
.cuiTextarea.cuiControlError,
.cuiInputAffix.cuiControlError {
  border-color: var(--cui-input-error-border);
}

.cuiInput.cuiControlError:focus,
.cuiSelect.cuiControlError:focus,
.cuiTextarea.cuiControlError:focus,
.cuiInputAffix.cuiControlError:focus-within {
  box-shadow: 0 0 0 2px var(--cui-input-error-focus);
}

.cuiInput.cuiControlWarning,
.cuiSelect.cuiControlWarning,
.cuiTextarea.cuiControlWarning,
.cuiInputAffix.cuiControlWarning {
  border-color: var(--cui-input-warning-border);
}

.cuiInput.cuiControlWarning:focus,
.cuiSelect.cuiControlWarning:focus,
.cuiTextarea.cuiControlWarning:focus,
.cuiInputAffix.cuiControlWarning:focus-within {
  box-shadow: 0 0 0 2px var(--cui-input-warning-focus);
}

.cuiDropdownSelect {
  position: relative;
  min-width: 0;
  display: inline-flex;
}

.cuiDropdownSelectTrigger {
  width: 100%;
  min-width: 0;
  min-height: var(--cui-control-md);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-control-bg);
  color: var(--cui-text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0 12px;
  text-align: left;
  box-shadow: var(--cui-shadow-xs);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.cuiDropdownSelectTrigger:disabled,
.cuiDropdownSelectDisabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.cuiDropdownSelectTrigger:hover,
.cuiDropdownSelectOpen .cuiDropdownSelectTrigger {
  border-color: var(--cui-line-strong);
  background: var(--cui-control-bg);
}

.cuiDropdownSelectTrigger:focus-visible {
  outline: none;
  border-color: var(--cui-input-focus-border);
  box-shadow: 0 0 0 2px var(--cui-focus);
}

.cuiDropdownSelectSelectedText,
.cuiDropdownSelectOptionMain {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cuiDropdownSelectLabel,
.cuiDropdownSelectValue,
.cuiDropdownSelectSelectedMeta,
.cuiDropdownSelectOptionLabel,
.cuiDropdownSelectOptionDescription,
.cuiDropdownSelectOptionMeta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiDropdownSelectLabel,
.cuiDropdownSelectSelectedMeta,
.cuiDropdownSelectOptionDescription,
.cuiDropdownSelectOptionMeta {
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 500;
}

.cuiDropdownSelectValue,
.cuiDropdownSelectOptionLabel {
  color: var(--cui-text);
  font-size: 13px;
  font-weight: 600;
}
.cuiDropdownSelectPlaceholder {
  color: var(--cui-input-placeholder);
  font-weight: 500;
}

.cuiDropdownSelectBadge,
.cuiDropdownSelectOptionBadge {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
  padding: 2px 6px;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
}

.cuiDropdownSelectChevron {
  width: 0;
  height: 0;
  flex: 0 0 auto;
  margin-left: auto;
  border-top: 5px solid var(--cui-text-muted);
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  transition: transform 160ms ease;
}

.cuiDropdownSelectOpen .cuiDropdownSelectChevron {
  transform: rotate(180deg);
}

.cuiDropdownSelectMenu {
  width: auto;
  min-width: 220px;
  max-height: 280px;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: var(--cui-z-dropdown);
  display: grid;
  gap: 4px;
  overflow-y: auto;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  isolation: isolate;
  background: var(--cui-surface, #ffffff);
  padding: 6px;
  box-shadow: var(--cui-shadow-md);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.cuiDropdownSelectEmpty {
  padding: 18px 12px;
  color: var(--cui-text-muted);
  font-size: 13px;
  text-align: center;
}

.cuiDropdownSelectMenuSearchable {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.cuiDropdownSelectSearch {
  padding: 2px;
}

.cuiDropdownSelectSearchInput {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border: 1px solid var(--cui-control-line);
  border-radius: var(--cui-radius-sm);
  background: var(--cui-control-bg);
  color: var(--cui-text);
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
}

.cuiDropdownSelectSearchInput::placeholder {
  color: var(--cui-input-placeholder);
}

.cuiDropdownSelectSearchInput:focus {
  border-color: var(--cui-input-focus-border);
  box-shadow: 0 0 0 2px var(--cui-focus);
}

.cuiDropdownSelectOptions {
  min-height: 0;
  display: grid;
  gap: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.cuiDropdownSelectOption {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--cui-radius-sm);
  background: transparent;
  color: var(--cui-text-soft);
  cursor: pointer;
  font: inherit;
  padding: 7px 9px;
  text-align: left;
}

.cuiDropdownSelectOption:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

.cuiDropdownSelectOption:not(.cuiDropdownSelectOptionSelected):hover,
.cuiDropdownSelectOptionActive:not(.cuiDropdownSelectOptionSelected) {
  background: color-mix(in srgb, var(--cui-primary) 6%, var(--cui-surface-hover));
}

.cuiDropdownSelectOptionSelected {
  border-color: transparent;
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
}

.cuiDropdownSelectOptionSelected:hover,
.cuiDropdownSelectOptionSelected.cuiDropdownSelectOptionActive {
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
}

.cuiDropdownSelectOptionCheck {
  width: 18px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  color: var(--cui-primary);
}

.cuiInput::placeholder,
.cuiTextarea::placeholder {
  color: var(--cui-input-placeholder);
}

.cuiInput:hover,
.cuiSelect:hover,
.cuiTextarea:hover {
  border-color: var(--cui-line-strong);
}

.cuiInput:disabled,
.cuiSelect:disabled,
.cuiTextarea:disabled {
  background: var(--cui-surface-subtle);
  color: var(--cui-text-muted);
  cursor: not-allowed;
}

.cuiFieldInvalid .cuiInput,
.cuiFieldInvalid .cuiSelect,
.cuiFieldInvalid .cuiTextarea {
  border-color: color-mix(in srgb, var(--cui-danger) 58%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cui-danger) 12%, transparent);
}

.cuiCheckboxLabel,
.cuiRadioLabel,
.cuiSwitchLabel {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--cui-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.cuiCheckboxLabel,
.cuiRadioLabel {
  cursor: pointer;
}

.cuiCheckboxLabel:has(.cuiCheckbox:disabled),
.cuiRadioLabel:has(.cuiRadio:disabled) {
  cursor: not-allowed;
}

.cuiCheckbox,
.cuiRadio {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  appearance: none;
  display: inline-grid;
  place-content: center;
  border: 1px solid var(--cui-control-line);
  background: var(--cui-control-bg);
  box-shadow: var(--cui-shadow-xs);
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.cuiCheckbox {
  border-radius: var(--cui-radius-xs);
}

.cuiRadio {
  border-radius: 999px;
}

.cuiCheckbox::before,
.cuiRadio::before {
  width: 8px;
  height: 8px;
  background: #ffffff;
  content: '';
  transform: scale(0);
  transition: transform 120ms ease;
}

.cuiCheckbox::before {
  border-radius: 2px;
}

.cuiRadio::before {
  border-radius: 999px;
}

.cuiCheckbox:hover,
.cuiRadio:hover {
  border-color: var(--cui-control-line-strong);
}

.cuiCheckbox:checked,
.cuiRadio:checked {
  border-color: var(--cui-primary);
  background: var(--cui-primary);
}

.cuiCheckbox:checked::before,
.cuiRadio:checked::before {
  transform: scale(1);
}

.cuiCheckbox:disabled,
.cuiRadio:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.cuiSwitch {
  position: relative;
  width: 40px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid var(--cui-line);
  border-radius: 999px;
  background: var(--cui-surface-hover);
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 150ms ease;
}

.cuiSwitch::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.28);
  content: '';
  transition: transform 150ms ease;
}

.cuiSwitch[data-state='checked'] {
  border-color: var(--cui-primary);
  background: var(--cui-primary);
}

.cuiSwitch[data-state='checked']::after {
  transform: translateX(18px);
}

.cuiChoiceCopy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cuiChoiceLabel {
  color: var(--cui-text);
}

.cuiChoiceDescription {
  color: var(--cui-choice-description);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.cuiCheckbox:indeterminate {
  border-color: var(--cui-primary);
  background: var(--cui-primary);
}

.cuiCheckbox:indeterminate::before {
  width: 8px;
  height: 2px;
  border-radius: 999px;
  transform: scale(1);
}

.cuiSwitchContent {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  color: #ffffff;
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
  padding: 0 5px 0 20px;
  white-space: nowrap;
}

.cuiSwitch[data-state='checked'] .cuiSwitchContent {
  justify-content: flex-start;
  padding: 0 20px 0 5px;
}

.cuiSwitchWithContent {
  width: auto;
  min-width: 60px;
}

.cuiSwitchWithContent .cuiSwitchContent {
  width: auto;
  min-width: 58px;
  justify-content: flex-end;
  padding: 0 8px 0 24px;
}

.cuiSwitchWithContent[data-state='checked'] .cuiSwitchContent {
  justify-content: flex-start;
  padding: 0 24px 0 8px;
}

.cuiSwitchLoadingIcon {
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border: 2px solid color-mix(in srgb, var(--cui-text-muted) 44%, transparent);
  border-top-color: var(--cui-primary);
  border-radius: 999px;
  animation: cuiSpin 700ms linear infinite;
}

.cuiSwitch[data-state='checked'] .cuiSwitchLoadingIcon {
  left: auto;
  right: 5px;
}

.cuiSwitchSm {
  width: 32px;
  height: 18px;
}

.cuiSwitchSm::after {
  width: 12px;
  height: 12px;
}

.cuiSwitchSm[data-state='checked']::after {
  transform: translateX(14px);
}

.cuiSwitchSm .cuiSwitchContent {
  font-size: 9px;
  padding: 0 4px 0 15px;
}

.cuiSwitchSm[data-state='checked'] .cuiSwitchContent {
  padding: 0 15px 0 4px;
}
.cuiSwitchSm.cuiSwitchWithContent {
  min-width: 52px;
}
.cuiSwitchSm.cuiSwitchWithContent .cuiSwitchContent {
  min-width: 50px;
  padding: 0 6px 0 18px;
}
.cuiSwitchSm.cuiSwitchWithContent[data-state='checked'] .cuiSwitchContent {
  padding: 0 18px 0 6px;
}
.cuiSwitchSm .cuiSwitchLoadingIcon {
  top: 3px;
  left: 3px;
}
.cuiSwitchSm[data-state='checked'] .cuiSwitchLoadingIcon {
  left: auto;
  right: 3px;
}

.cuiSwitchLg {
  width: 48px;
  height: 26px;
}

.cuiSwitchLg::after {
  width: 20px;
  height: 20px;
}

.cuiSwitchLg[data-state='checked']::after {
  transform: translateX(22px);
}

.cuiSwitchLg .cuiSwitchContent {
  font-size: 11px;
  padding: 0 6px 0 25px;
}

.cuiSwitchLg[data-state='checked'] .cuiSwitchContent {
  padding: 0 25px 0 6px;
}
.cuiSwitchLg.cuiSwitchWithContent {
  min-width: 68px;
}
.cuiSwitchLg.cuiSwitchWithContent .cuiSwitchContent {
  min-width: 66px;
  padding: 0 8px 0 28px;
}
.cuiSwitchLg.cuiSwitchWithContent[data-state='checked'] .cuiSwitchContent {
  padding: 0 28px 0 8px;
}
.cuiSwitchLg .cuiSwitchLoadingIcon {
  top: 6px;
  left: 6px;
}
.cuiSwitchLg[data-state='checked'] .cuiSwitchLoadingIcon {
  left: auto;
  right: 6px;
}

.cuiSwitchWithContent[data-state='checked']::after {
  right: 2px;
  left: auto;
  transform: none;
}

.cuiBadge {
  display: inline-flex;
  max-width: 100%;
  min-height: 22px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-full);
  padding: 2px 8px;
  background: var(--cui-surface-subtle);
  color: var(--cui-text-soft);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.25;
  white-space: nowrap;
}

.cuiBadgeSuccess {
  border-color: color-mix(in srgb, var(--cui-success) 30%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-success) 9%, var(--cui-surface));
  color: var(--cui-success);
}

.cuiBadgeWarning {
  border-color: color-mix(in srgb, var(--cui-warning) 34%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-warning) 10%, var(--cui-surface));
  color: var(--cui-warning);
}

.cuiBadgeDanger {
  border-color: color-mix(in srgb, var(--cui-danger) 32%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-danger) 10%, var(--cui-surface));
  color: var(--cui-danger);
}

.cuiBadgeInfo {
  border-color: color-mix(in srgb, var(--cui-info) 32%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-info) 10%, var(--cui-surface));
  color: var(--cui-info);
}

.cuiStatusBadge {
  display: inline-flex;
  max-width: 100%;
  min-height: 24px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--cui-line);
  border-radius: 999px;
  background: var(--cui-surface-subtle);
  color: var(--cui-text-soft);
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.25;
  white-space: nowrap;
}

.cuiStatusBadge::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentcolor;
  content: '';
  opacity: 1;
}

.cuiStatusBadgeNoDot::before {
  display: none;
}

.cuiStatusBadgeInfo {
  border-color: color-mix(in srgb, var(--cui-info) 32%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-info) 10%, var(--cui-surface));
  color: var(--cui-info);
}

.cuiStatusBadgeSuccess {
  border-color: color-mix(in srgb, var(--cui-success) 30%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-success) 9%, var(--cui-surface));
  color: var(--cui-success);
}

.cuiStatusBadgeWarning {
  border-color: color-mix(in srgb, var(--cui-warning) 34%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-warning) 10%, var(--cui-surface));
  color: var(--cui-warning);
}

.cuiStatusBadgeDanger {
  border-color: color-mix(in srgb, var(--cui-danger) 32%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-danger) 10%, var(--cui-surface));
  color: var(--cui-danger);
}

.cuiStatusBadgeLoading {
  border-color: color-mix(in srgb, var(--cui-primary) 28%, transparent);
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
}

.cuiStatusBadgeLoading::before {
  animation: cuiPulse 1s ease-in-out infinite;
}

.cuiFeedback {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--cui-info) 24%, var(--cui-line));
  border-radius: var(--cui-radius-md);
  background: color-mix(in srgb, var(--cui-info) 7%, var(--cui-surface));
  color: var(--cui-text);
  padding: 11px 12px;
}

.cuiFeedbackMarker {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--cui-info);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cui-info) 12%, transparent);
  margin-top: 6px;
}

.cuiFeedbackCopy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.cuiFeedbackCopy strong,
.cuiFeedbackCopy span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cuiFeedbackCopy strong {
  color: var(--cui-text);
  font-size: 13px;
  font-weight: 820;
  line-height: 1.35;
}

.cuiFeedbackCopy span {
  color: var(--cui-text-soft);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}

.cuiFeedbackActions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.cuiFeedbackSuccess {
  border-color: color-mix(in srgb, var(--cui-success) 24%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-success) 7%, var(--cui-surface));
}

.cuiFeedbackSuccess .cuiFeedbackMarker {
  background: var(--cui-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cui-success) 12%, transparent);
}

.cuiFeedbackWarning {
  border-color: color-mix(in srgb, var(--cui-warning) 26%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-warning) 8%, var(--cui-surface));
}

.cuiFeedbackWarning .cuiFeedbackMarker {
  background: var(--cui-warning);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cui-warning) 13%, transparent);
}

.cuiFeedbackError,
.cuiFeedbackPermission {
  border-color: color-mix(in srgb, var(--cui-danger) 24%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-danger) 7%, var(--cui-surface));
}

.cuiFeedbackError .cuiFeedbackMarker,
.cuiFeedbackPermission .cuiFeedbackMarker {
  background: var(--cui-danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cui-danger) 12%, transparent);
}

.cuiPanel {
  min-width: 0;
  border: 1px solid var(--cui-line-soft);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-xs);
}

.cuiPanelHeader {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--cui-section-line);
  padding: 16px 18px;
}

.cuiPanelTitle {
  margin: 0;
  color: var(--cui-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.cuiPanelDescription {
  margin: 5px 0 0;
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 520;
  line-height: 1.5;
}

.cuiPanelBody {
  padding: 18px;
}

.cuiPanelFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cui-space-2);
  padding: 14px 18px;
  border-top: 1px solid var(--cui-line);
}

.cuiMetricGrid {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.cuiMetricGrid2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cuiMetricGrid3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cuiMetricGrid4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cuiMetricCard {
  --cui-metric-tint: var(--cui-primary);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 124px;
  gap: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cui-metric-tint) 10%, var(--cui-line-soft));
  border-radius: var(--cui-radius-md);
  background: color-mix(in srgb, var(--cui-metric-tint) 2.8%, var(--cui-surface));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--cui-text) 4%, transparent);
  padding: 16px;
}

.cuiMetricCardSuccess {
  --cui-metric-tint: var(--cui-success);
}

.cuiMetricCardWarning {
  --cui-metric-tint: var(--cui-warning);
}

.cuiMetricCardDanger {
  --cui-metric-tint: var(--cui-danger);
}

.cuiMetricCardInfo {
  --cui-metric-tint: var(--cui-info);
}

.cuiMetricCardHeader,
.cuiMetricCardValueRow,
.cuiMetricCardFooter {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cuiMetricCardHeader {
  align-items: flex-start;
}

.cuiMetricCardLabel,
.cuiMetricCardMeta {
  min-width: 0;
  overflow: hidden;
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiMetricCardIcon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--cui-radius-full);
  background: color-mix(in srgb, var(--cui-metric-tint) 10%, var(--cui-surface));
  color: var(--cui-metric-tint);
}

.cuiMetricCardValue {
  min-width: 0;
  overflow: hidden;
  color: var(--cui-text);
  font-size: 26px;
  font-weight: 740;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiMetricCardTrend {
  flex: 0 0 auto;
  color: var(--cui-success);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
}

.cuiMetricCardDescription {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  color: var(--cui-text-soft);
  font-size: 12px;
  font-weight: 520;
  line-height: 1.55;
  margin-top: auto;
}

.cuiMetricCardDescriptionText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiMetricCardActions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.cuiMetricCardFooter {
  margin-top: auto;
  padding-top: 2px;
}

.cuiMetricCardDescription + .cuiMetricCardFooter {
  margin-top: 0;
}

.cuiMetricDelta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
}

.cuiMetricDeltaIcon {
  font-size: 13px;
  line-height: 1;
}
.cuiMetricDelta--success {
  color: var(--cui-metric-up);
}
.cuiMetricDelta--danger {
  color: var(--cui-metric-down);
}
.cuiMetricDelta--warning {
  color: var(--cui-warning);
}
.cuiMetricDelta--neutral {
  color: var(--cui-text-muted);
}

.cuiToolbar,
.cuiFilterBar {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.cuiFilterBar {
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  box-shadow: none;
  padding: 12px;
}

.cuiFilterBar .cuiField {
  min-width: min(220px, 100%);
}

.cuiDataList {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  box-shadow: none;
}

.cuiDataListHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--cui-section-line);
  padding: 16px 18px;
}

.cuiDataListTitleBlock {
  min-width: 0;
}

.cuiDataListTitle {
  margin: 0;
  color: var(--cui-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.cuiDataListDescription {
  margin: 5px 0 0;
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.cuiDataListSummary {
  justify-self: end;
  color: var(--cui-text-soft);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.cuiDataListHeaderActions,
.cuiDataListToolbar,
.cuiDataListToolbarSlot,
.cuiDataListBulkActions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.cuiDataListHeaderActions {
  justify-content: flex-end;
}

.cuiDataListFilters {
  border-bottom: 1px solid var(--cui-section-line);
  padding: 12px 18px;
}

.cuiDataListToolbar {
  justify-content: space-between;
  border-bottom: 1px solid var(--cui-section-line);
  padding: 12px 18px;
}

.cuiDataListToolbarSlot {
  flex: 1 1 360px;
}

.cuiDataListBulkActions {
  justify-content: flex-end;
  color: var(--cui-text-soft);
  font-size: 12px;
  font-weight: 600;
}

.cuiBulkActionBar,
.cuiBulkActionBarActions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cuiBulkActionBar {
  justify-content: flex-end;
}

.cuiBulkActionBarSummary {
  color: var(--cui-text);
  font-weight: 760;
  white-space: nowrap;
}

.cuiBulkActionBarActions {
  justify-content: flex-end;
}

.cuiDataListBody {
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.cuiDataListBodyInner {
  min-width: 0;
}

.cuiDataListBodyInner > .cuiTableWrap,
.cuiDataListBodyInner > table {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.cuiDataListBodyInner > table {
  width: 100%;
}

.cuiDataList .cuiTableWrap {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.cuiDataListFooter {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--cui-section-line);
  padding: 14px 18px;
}

.cuiDataListState {
  padding: 18px;
}

.cuiDataListItems {
  display: grid;
  gap: 0;
  min-width: 0;
}

.cuiDataListItem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--cui-section-line);
  background: var(--cui-surface);
  padding: 14px 18px;
  transition:
    background 140ms ease,
    box-shadow 140ms ease;
}

.cuiDataListActionItem {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.cuiDataListItemNoMedia {
  grid-template-columns: minmax(0, 1fr) auto;
}

.cuiDataListItemNoMedia.cuiDataListItemNoActions {
  grid-template-columns: minmax(0, 1fr);
}

.cuiDataListItem:hover {
  background: var(--cui-surface-hover);
}

.cuiDataListItemSelected {
  background: var(--cui-primary-soft);
  box-shadow: inset 3px 0 0 var(--cui-primary);
}

.cuiDataListItem:last-child {
  border-bottom: 0;
}

.cuiDataListItemMedia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cuiDataListItemMain,
.cuiDataListItemTitleBlock,
.cuiDataListItemContent {
  min-width: 0;
}

.cuiDataListItemHeader {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cuiDataListItemTitle {
  margin: 0;
  overflow: hidden;
  color: var(--cui-text);
  font-size: 14px;
  font-weight: 820;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiDataListItemDescription {
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 640;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiDataListItemMeta {
  flex: 0 0 auto;
  align-self: center;
  color: var(--cui-text-soft);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.cuiDataListItemContent {
  margin-top: 10px;
}

.cuiDataListItemActions {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.cuiDataListPrimaryCell {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.cuiDataListPrimaryMedia {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.cuiDataListPrimaryCopy,
.cuiDataListCellStack {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.cuiDataListPrimaryTitle,
.cuiDataListCellTitle {
  min-width: 0;
  overflow: hidden;
  color: var(--cui-text);
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiDataListPrimaryMeta,
.cuiDataListCellMeta {
  min-width: 0;
  overflow: hidden;
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiDataListSortableHead {
  min-width: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  white-space: normal;
}

.cuiDataListSortableHead > span {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.cuiDataListSortableHead > em {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--cui-text-muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1;
}

.cuiSortIndicator {
  display: inline-flex;
  width: 8px;
  height: 14px;
  flex: 0 0 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  vertical-align: middle;
}

.cuiSortIndicatorUp,
.cuiSortIndicatorDown {
  display: block;
  width: 7px;
  height: 4px;
  flex: 0 0 4px;
  background: var(--cui-text-soft);
}

.cuiSortIndicatorUp {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.cuiSortIndicatorDown {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.cuiSortIndicator[data-active-direction='asc'] .cuiSortIndicatorUp {
  background: var(--cui-primary);
}

.cuiSortIndicator[data-active-direction='desc'] .cuiSortIndicatorDown {
  background: var(--cui-primary);
}

.cuiDataListSortableHead:not(:disabled):hover,
.cuiDataListSortableHead.active {
  color: var(--cui-primary);
}

.cuiDataListSortableHead:not(:disabled):hover > span:first-child,
.cuiDataListSortableHead.active > span:first-child {
  color: var(--cui-primary);
}

.cuiDataListSortedCell {
  min-width: 0;
}

.cuiDataListSortedCell.active {
  background: transparent;
  color: var(--cui-text);
}

.cuiDataListTable {
  min-width: 0;
  display: grid;
}

.cuiDataListTableResponsive {
  container-type: inline-size;
}

.cuiDataListTableResponsive .cuiDataListTableRow {
  grid-template-columns: var(--cui-data-list-columns);
}

@container (max-width: 1199px) {
  .cuiDataListTableResponsive .cuiDataListTableRow {
    grid-template-columns: var(--cui-data-list-columns-lg);
  }

  .cuiDataListTableResponsive [data-hide-below='xl'] {
    display: none;
  }
}

@container (max-width: 959px) {
  .cuiDataListTableResponsive .cuiDataListTableRow {
    grid-template-columns: var(--cui-data-list-columns-md);
  }

  .cuiDataListTableResponsive [data-hide-below='lg'] {
    display: none;
  }
}

@container (max-width: 719px) {
  .cuiDataListTableResponsive .cuiDataListTableRow {
    grid-template-columns: var(--cui-data-list-columns-sm);
  }

  .cuiDataListTableResponsive [data-hide-below='md'] {
    display: none;
  }
}

@container (max-width: 479px) {
  .cuiDataListTableResponsive .cuiDataListTableRow {
    grid-template-columns: var(--cui-data-list-columns-xs);
  }

  .cuiDataListTableResponsive [data-hide-below='sm'] {
    display: none;
  }
}

.cuiDataListTableRow {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--cui-section-line);
  transition: background var(--cui-duration-fast) ease;
}

.cuiDataListTableHead {
  background: var(--cui-table-header-bg);
  font-weight: 650;
}

.cuiDataListTableRow:not(.cuiDataListTableHead):hover {
  background: var(--cui-table-row-hover-bg);
}

.cuiDataListTableRow:last-child {
  border-bottom: 0;
}

.cuiDataListTableHeadCell,
.cuiDataListTableCell {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 16px;
}

.cuiDataListTableCellFixedLeft,
.cuiDataListTableCellFixedRight {
  position: sticky;
  z-index: 2;
  background: var(--cui-surface);
}

.cuiDataListTableHead .cuiDataListTableCellFixedLeft,
.cuiDataListTableHead .cuiDataListTableCellFixedRight {
  z-index: 3;
  background: var(--cui-table-header-bg);
}

.cuiDataListTableCellFixedLeft {
  left: var(--cui-data-list-fixed-offset, 0px);
  box-shadow: 1px 0 0 var(--cui-section-line);
}

.cuiDataListTableCellFixedRight {
  right: var(--cui-data-list-fixed-offset, 0px);
  box-shadow: -1px 0 0 var(--cui-section-line);
}

.cuiDataListTableRow:not(.cuiDataListTableHead):hover .cuiDataListTableCellFixedLeft,
.cuiDataListTableRow:not(.cuiDataListTableHead):hover .cuiDataListTableCellFixedRight {
  background: var(--cui-table-row-hover-bg);
}

.cuiDataListTableHeadCell--withAction {
  gap: 5px;
}

.cuiDataListTableHeadCell--withAction > .cuiDataListSortableHead {
  flex: 0 1 auto;
}

.cuiDataListTableHeaderAction {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.cuiDataListCellAlignCenter {
  justify-content: center;
  text-align: center;
}

.cuiDataListCellAlignRight {
  justify-content: flex-end;
  text-align: right;
}

.cuiDataListSortableHead.cuiDataListCellAlignCenter {
  justify-content: center;
}

.cuiDataListSortableHead.cuiDataListCellAlignRight {
  justify-content: flex-end;
}

.cuiDataListTableCellEllipsis,
.cuiDataListTableCellEllipsisContent {
  min-width: 0;
}

.cuiDataListTableCellEllipsisContent {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiDataListCompact .cuiDataListHeader,
.cuiDataListCompact .cuiDataListFilters,
.cuiDataListCompact .cuiDataListToolbar,
.cuiDataListCompact .cuiDataListFooter {
  padding-right: 14px;
  padding-left: 14px;
}

.cuiDataListCompact .cuiDataListToolbar,
.cuiDataListCompact .cuiDataListFooter {
  padding-top: 10px;
  padding-bottom: 10px;
}

.cuiSearchFilterPanel {
  --cui-search-filter-accent: var(--cui-primary);
  --cui-search-filter-accent-soft: var(--cui-primary-soft);
  --cui-search-filter-surface: var(--cui-surface);
  --cui-search-filter-text: var(--cui-text);
  --cui-search-filter-muted: var(--cui-text-muted);
  --cui-search-filter-line: var(--cui-line);
  --cui-search-filter-label-width: 86px;
  display: grid;
  min-width: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.cuiSearchFilterPanelAside {
  min-height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--cui-surface);
}

.cuiSearchFilterHeader {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--cui-section-line);
  padding: 18px;
}

.cuiSearchFilterHeaderMain {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.cuiSearchFilterTitle {
  color: var(--cui-text);
  font-size: 15px;
  font-weight: 820;
  line-height: 1.35;
}

.cuiSearchFilterDescription {
  color: var(--cui-text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.cuiSearchFilterHeaderAction {
  display: inline-flex;
  flex: 0 0 auto;
}

.cuiSearchFilterBody {
  min-width: 0;
}

.cuiSearchFilterPanelAside .cuiSearchFilterBody {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 18px 16px;
}

.cuiSearchFilterFooter {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--cui-section-line);
  background: var(--cui-surface);
  padding: 14px 18px;
}

.cuiSearchFilterPanelAside .cuiSearchFilterFooter .cuiButton {
  flex: 1 1;
}

.cuiSearchFilterTop {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.cuiSearchFilterBox {
  width: min(680px, 100%);
  min-width: 0;
  height: var(--cui-control-md);
  display: flex;
  align-items: center;
  overflow: visible;
  box-sizing: border-box;
  border: 1px solid var(--cui-control-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-control-bg);
}

.cuiSearchFilterBox input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cui-search-filter-text);
  font: inherit;
  font-size: 14px;
  padding: 0 var(--cui-space-3);
}

.cuiSearchFilterBox > .cuiInputAffix {
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cuiSearchFilterBox:hover {
  border-color: var(--cui-control-line-strong);
}

.cuiSearchFilterBox:focus-within {
  border-color: var(--cui-input-focus-border);
  box-shadow: 0 0 0 2px var(--cui-focus);
}

.cuiSearchFilterBox > .cuiInput:focus,
.cuiSearchFilterBox > .cuiInputAffix:focus-within {
  border-color: transparent;
  box-shadow: none;
}

.cuiSearchFilterBox input::placeholder {
  color: color-mix(in srgb, var(--cui-search-filter-muted) 62%, transparent);
}

.cuiSearchFilterSubmit {
  flex: 0 0 64px;
  align-self: stretch;
  width: 64px;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0 calc(var(--cui-radius-md) - 1px) calc(var(--cui-radius-md) - 1px) 0;
  background: var(--cui-search-filter-accent);
  color: #ffffff;
  cursor: pointer;
}

.cuiSearchFilterSubmit:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.cuiSearchFilterAction {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--cui-radius-md);
  background: var(--cui-search-filter-accent);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 0 16px;
  cursor: pointer;
}

.cuiSearchFilterDivider {
  height: 1px;
  margin: 12px 0 0;
  background: var(--cui-section-line);
}

.cuiSearchFilterRow {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 8px;
  overflow: visible;
  border-bottom: 1px solid var(--cui-section-line);
  padding: 10px 0;
}

.cuiSearchFilterRowCompact {
  align-items: center;
  flex-wrap: wrap;
}

.cuiSearchFilterLabel {
  width: var(--cui-search-filter-label-width);
  min-width: var(--cui-search-filter-label-width);
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--cui-search-filter-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.cuiSearchFilterRowBody {
  min-width: 0;
  flex: 1 1;
}

.cuiSearchFilterChipList {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 8px;
}

.cuiSearchFilterChip {
  min-height: 30px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--cui-control-line);
  border-radius: var(--cui-radius-sm);
  background: var(--cui-filter-chip-bg);
  color: var(--cui-search-filter-text);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  padding: 0 10px;
  cursor: pointer;
}

.cuiSearchFilterChip:not(:disabled):hover {
  border-color: var(--cui-control-line-strong);
  background: var(--cui-filter-chip-hover-bg);
  color: var(--cui-search-filter-text);
}

.cuiSearchFilterChipActive,
.cuiSearchFilterChipActive:not(:disabled):hover {
  border-color: var(--cui-filter-chip-active-border);
  background: var(--cui-filter-chip-active-bg);
  color: var(--cui-filter-chip-active-text);
  font-weight: 720;
  padding: 0 10px;
}

.cuiSearchFilterChip:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.cuiSearchFilterChipBadge {
  position: absolute;
  top: -7px;
  right: -14px;
  border-radius: 999px;
  background: var(--cui-success);
  color: #ffffff;
  padding: 1px 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.cuiSearchFilterSelectedBar {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--cui-section-line);
  margin-top: 0;
  padding: 10px 0;
}

.cuiSearchFilterSelectedLabel {
  width: var(--cui-search-filter-label-width);
  min-width: var(--cui-search-filter-label-width);
  color: var(--cui-search-filter-muted);
  text-align: left;
}

.cuiSearchFilterSelectedItems {
  min-width: 240px;
  flex: 1 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cuiSearchFilterSelectedTag {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--cui-filter-selected-border);
  border-radius: var(--cui-radius-sm);
  background: var(--cui-filter-selected-bg);
  color: var(--cui-filter-selected-text);
  font-size: 13px;
  font-weight: 680;
  padding: 0 13px;
}

.cuiSearchFilterSelectedTag button {
  width: 18px;
  height: 18px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cui-search-filter-muted);
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.cuiSearchFilterSelectedTag button:hover,
.cuiSearchFilterSelectedTag button:focus-visible {
  outline: 0;
  background: color-mix(in srgb, var(--cui-search-filter-muted) 16%, var(--cui-surface));
  color: var(--cui-search-filter-accent);
}

.cuiSearchFilterSelectedAction {
  flex: 0 0 auto;
}

.cuiTableWrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--cui-line-soft);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-xs);
}

.cuiTable {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--cui-text);
  font-size: 13px;
}

.cuiTableFixedLayout {
  table-layout: fixed;
}

.cuiTable th,
.cuiTable td {
  border-bottom: 1px solid var(--cui-line-soft);
  padding: 11px 14px;
  text-align: left;
  vertical-align: middle;
}

.cuiTableSelectionCell {
  width: 48px;
  min-width: 48px;
  padding-right: 8px !important;
  padding-left: 8px !important;
  text-align: center !important;
}

.cuiTableSelectionCell .cuiCheckbox {
  display: inline-block;
  vertical-align: middle;
}

.cuiTableExpandCell {
  width: 44px;
  min-width: 44px;
  padding-right: 8px !important;
  padding-left: 8px !important;
  text-align: center !important;
}

.cuiTableExpandButton {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-sm);
  background: var(--cui-surface);
  color: var(--cui-text-soft);
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  line-height: 1;
}

.cuiTableExpandButton:hover {
  border-color: var(--cui-primary);
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
}

.cuiTableExpandButton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cui-focus);
}

.cuiTableCompact th,
.cuiTableCompact td {
  padding: 9px 12px;
}

.cuiTable th {
  background: var(--cui-table-header-bg);
  color: var(--cui-text-soft);
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0;
  white-space: nowrap;
}

.cuiTableCellFixedLeft,
.cuiTableCellFixedRight {
  position: sticky;
  background: var(--cui-surface);
}

.cuiTable th.cuiTableCellFixedLeft,
.cuiTable th.cuiTableCellFixedRight {
  background: var(--cui-table-header-bg);
}

.cuiTableCellFixedLeft {
  box-shadow: 1px 0 0 var(--cui-line);
}
.cuiTableCellFixedRight {
  box-shadow: -1px 0 0 var(--cui-line);
}

.cuiTableCellResizable {
  position: relative;
}

.cuiTableResizeHandle {
  position: absolute;
  z-index: 4;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: col-resize;
}

.cuiTableResizeHandle::after {
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 4px;
  width: 2px;
  border-radius: var(--cui-radius-full);
  background: transparent;
  content: '';
}

.cuiTableResizeHandle:hover::after,
.cuiTableResizeHandle:focus-visible::after {
  background: var(--cui-primary);
}

.cuiTableResizeHandle:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--cui-focus);
}

.cuiTableSortButton {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
  padding: 0;
  text-align: inherit;
}

.cuiTableSortButton:hover,
.cuiTableSortButton:focus-visible,
.cuiTableSortButton.is-active {
  color: var(--cui-primary);
}

.cuiTableSortButton:hover > span:first-child,
.cuiTableSortButton:focus-visible > span:first-child,
.cuiTableSortButton.is-active > span:first-child {
  color: var(--cui-primary);
}

.cuiTableSortButton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cui-focus);
}

.cuiTableSortIcon {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
}

.cuiTableSticky th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.cuiTable tbody tr {
  transition:
    background var(--cui-duration-fast) ease,
    box-shadow var(--cui-duration-fast) ease;
}

.cuiTable tbody tr:hover {
  background: var(--cui-table-row-hover-bg);
}

.cuiTableRowActionable {
  cursor: pointer;
}

.cuiTableRowActionable:focus-visible {
  outline: 2px solid var(--cui-primary);
  outline-offset: -2px;
}

.cuiTableRowSelected {
  background: var(--cui-primary-soft);
  box-shadow: inset 2px 0 0 var(--cui-primary);
}

.cuiTable tr:last-child td {
  border-bottom: 0;
}

.cuiTableExpandedRow > td {
  background: var(--cui-surface-subtle);
  color: var(--cui-text);
  padding: var(--cui-space-4) var(--cui-space-5);
}

.cuiTableCellEllipsis,
.cuiTableCellEllipsisContent {
  min-width: 0;
}

.cuiTableCellEllipsisContent {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiTableEmpty {
  padding: 34px 18px;
  text-align: center;
}

.cuiPagination {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--cui-pagination-gap);
  color: var(--cui-text-soft);
  font-size: 12px;
  font-weight: 700;
}

.cuiPaginationInfo {
  grid-column: 1;
  justify-self: start;
  white-space: nowrap;
}

.cuiPaginationActions {
  display: inline-flex;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  justify-self: center;
  gap: var(--cui-pagination-actions-gap);
}

.cuiPaginationPageSize,
.cuiPaginationPages,
.cuiPaginationJump {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.cuiPaginationPageSize {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.cuiPaginationPageSizeSelect {
  width: 116px;
}

.cuiPaginationPages {
  flex-wrap: wrap;
}

.cuiPaginationPages .cuiButton.active,
.cuiPaginationPages .cuiButton[aria-current='page'] {
  pointer-events: none;
}

.cuiPaginationEllipsis {
  width: 34px;
  min-height: var(--cui-control-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-pagination-ellipsis-bg);
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 780;
}

.cuiPaginationJump {
  color: var(--cui-text-muted);
  white-space: nowrap;
}

.cuiPaginationJump .cuiInput {
  width: 74px;
  height: var(--cui-control-sm);
  text-align: center;
}

.cuiState {
  --cui-state-accent: var(--cui-primary);
  position: relative;
  display: grid;
  place-items: center;
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  padding: 30px 24px;
  text-align: center;
}

.cuiStateCompact {
  min-height: 132px;
  padding: 22px 18px;
}

.cuiStateContent {
  display: grid;
  min-width: 0;
  justify-items: center;
}

.cuiStateError,
.cuiStatePermission {
  --cui-state-accent: var(--cui-danger);
  border-color: color-mix(in srgb, var(--cui-danger) 22%, var(--cui-line));
}

.cuiStateWarning {
  --cui-state-accent: var(--cui-warning);
  border-color: color-mix(in srgb, var(--cui-warning) 24%, var(--cui-line));
}

.cuiStateSuccess {
  --cui-state-accent: var(--cui-success);
  border-color: color-mix(in srgb, var(--cui-success) 22%, var(--cui-line));
}

.cuiStateIcon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cui-state-accent) 20%, var(--cui-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--cui-state-accent) 7%, var(--cui-surface));
  color: var(--cui-state-accent);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 14px;
}

.cuiStateIcon > img,
.cuiStateIcon > svg,
.cuiStateIcon > span:not(.cuiLoadingVisualRing) {
  max-width: 100%;
  max-height: 100%;
}

.cuiStateError .cuiStateIcon {
  border-color: color-mix(in srgb, var(--cui-state-accent) 22%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-state-accent) 7%, var(--cui-surface));
  color: var(--cui-state-accent);
}

.cuiStatePermission .cuiStateIcon,
.cuiStateWarning .cuiStateIcon {
  border-color: color-mix(in srgb, var(--cui-state-accent) 22%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-state-accent) 7%, var(--cui-surface));
  color: var(--cui-state-accent);
}

.cuiStateSuccess .cuiStateIcon {
  border-color: color-mix(in srgb, var(--cui-state-accent) 22%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-state-accent) 7%, var(--cui-surface));
  color: var(--cui-state-accent);
}

.cuiStateIconLoading {
  width: 58px;
  height: 58px;
  overflow: visible;
  border: 0;
  border-radius: 13px;
  background: transparent;
  margin-bottom: 16px;
}

.cuiStateCompact .cuiStateIconLoading {
  width: 58px;
  height: 58px;
}

.cuiLoadingVisual {
  --cui-loading-visual-accent: var(--cui-primary);
  position: relative;
  display: inline-grid;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: var(--cui-surface);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--cui-loading-visual-accent) 16%, transparent);
  place-items: center;
}

.cuiLoadingVisualContent {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: transparent;
  transform: translate(-50%, -50%);
}

.cuiLoadingVisualContent > *,
.cuiLoadingVisualContent img,
.cuiLoadingVisualContent svg {
  max-width: 100%;
  max-height: 100%;
}

.cuiCompassBrandMark {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--cui-surface);
  background-image: url(/_next/static/media/compass-logo-sidebar.849b02b9.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.cuiLoadingVisualFallback {
  flex: 0 0 auto;
}

.cuiStateFeedbackVisual {
  --cui-loading-visual-accent: var(--cui-state-accent);
  margin-bottom: 16px;
}

.cuiStateFeedbackVisual .cuiLoadingVisualContent {
  background: color-mix(in srgb, var(--cui-state-accent) 7%, var(--cui-surface));
  color: var(--cui-state-accent);
}

.cuiStateFeedbackVisual .cuiLoadingVisualContent > svg {
  width: 20px;
  height: 20px;
}

.cuiLoadingVisualRing {
  position: absolute;
  inset: -7px;
  border: 2px solid color-mix(in srgb, var(--cui-loading-visual-accent) 14%, transparent);
  border-top-color: var(--cui-loading-visual-accent);
  border-right-color: var(--cui-loading-visual-accent);
  border-radius: 18px;
  animation: cuiLoadingRing 920ms linear infinite;
}

.cuiStateFeedbackVisualRing {
  border-color: color-mix(in srgb, var(--cui-state-accent) 18%, var(--cui-line));
  border-top-color: var(--cui-state-accent);
  border-right-color: var(--cui-state-accent);
  animation: none;
}

.cuiStateTitle {
  margin: 0;
  color: var(--cui-text);
  font-size: 15px;
  font-weight: 820;
}

.cuiStateDescription {
  max-width: 460px;
  margin: 8px auto 0;
  color: var(--cui-text-muted);
  font-size: 13px;
  font-weight: 640;
  line-height: 1.6;
}

.cuiStateActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.cuiLoginRequiredState {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  isolation: isolate;
}

.cuiLoginRequiredPreview {
  min-width: 0;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

.cuiLoginRequiredVeil {
  position: absolute;
  inset: 10% 0 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--cui-surface) 18%, transparent) 18%,
    color-mix(in srgb, var(--cui-surface) 68%, transparent) 66%,
    var(--cui-surface) 100%
  );
  -webkit-backdrop-filter: blur(9px) saturate(0.76);
  backdrop-filter: blur(9px) saturate(0.76);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 100%);
}

.cuiLoginRequiredPrompt {
  position: absolute;
  top: clamp(150px, 42%, 300px);
  left: 50%;
  z-index: 2;
  display: grid;
  width: min(390px, calc(100% - 40px));
  justify-items: center;
  border: 1px solid color-mix(in srgb, var(--cui-line-strong) 72%, transparent);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--cui-text) 12%, transparent);
  padding: 22px 24px;
  text-align: center;
  transform: translate(-50%, -50%);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
}

.cuiLoginRequiredIcon {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cui-primary) 22%, var(--cui-line));
  border-radius: var(--cui-radius-md);
  background: color-mix(in srgb, var(--cui-primary) 7%, var(--cui-surface));
  color: var(--cui-primary);
}

.cuiLoginRequiredEyebrow {
  color: var(--cui-primary);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.3;
}

.cuiLoginRequiredPrompt h3 {
  margin: 5px 0 0;
  color: var(--cui-text);
  font-size: 17px;
  font-weight: 820;
  line-height: 1.4;
}

.cuiLoginRequiredPrompt p {
  max-width: 320px;
  margin: 7px 0 0;
  color: var(--cui-text-muted);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.65;
}

.cuiLoginRequiredActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
}

@media (max-width: 640px) {
  .cuiLoginRequiredState {
    min-height: 320px;
  }

  .cuiLoginRequiredPrompt {
    top: min(48%, 210px);
    width: calc(100% - 28px);
    padding: 18px;
  }

  .cuiLoginRequiredActions,
  .cuiLoginRequiredActions > * {
    width: 100%;
  }
}

.cuiInlineState {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  color: var(--cui-text);
  padding: 14px 16px;
}

.cuiInlineStateLoading {
  border-color: color-mix(in srgb, var(--cui-primary) 24%, var(--cui-line));
}

.cuiInlineStateError,
.cuiInlineStatePermission {
  border-color: color-mix(in srgb, var(--cui-danger) 24%, var(--cui-line));
  background: var(--cui-surface);
}

.cuiInlineStateWarning {
  border-color: color-mix(in srgb, var(--cui-warning) 26%, var(--cui-line));
  background: var(--cui-surface);
}

.cuiInlineStateSuccess {
  border-color: color-mix(in srgb, var(--cui-success) 24%, var(--cui-line));
  background: var(--cui-surface);
}

.cuiInlineStateMeta {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.cuiInlineStateIcon {
  width: 30px;
  height: 30px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cui-primary) 22%, transparent);
  border-radius: 999px;
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
}

.cuiInlineStateError .cuiInlineStateIcon,
.cuiInlineStatePermission .cuiInlineStateIcon {
  border-color: color-mix(in srgb, var(--cui-danger) 26%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-danger) 10%, var(--cui-surface));
  color: var(--cui-danger);
}

.cuiInlineStateWarning .cuiInlineStateIcon {
  border-color: color-mix(in srgb, var(--cui-warning) 30%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-warning) 10%, var(--cui-surface));
  color: var(--cui-warning);
}

.cuiInlineStateSuccess .cuiInlineStateIcon {
  border-color: color-mix(in srgb, var(--cui-success) 28%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-success) 10%, var(--cui-surface));
  color: var(--cui-success);
}

.cuiInlineStateLabel {
  display: inline-flex;
  min-width: 0;
  min-height: 26px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--cui-primary) 24%, transparent);
  border-radius: 999px;
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
  font-size: 12px;
  font-weight: 820;
  line-height: 1;
  padding: 0 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiInlineStateError .cuiInlineStateLabel,
.cuiInlineStatePermission .cuiInlineStateLabel {
  border-color: color-mix(in srgb, var(--cui-danger) 26%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-danger) 10%, var(--cui-surface));
  color: var(--cui-danger);
}

.cuiInlineStateWarning .cuiInlineStateLabel {
  border-color: color-mix(in srgb, var(--cui-warning) 30%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-warning) 10%, var(--cui-surface));
  color: var(--cui-warning);
}

.cuiInlineStateSuccess .cuiInlineStateLabel {
  border-color: color-mix(in srgb, var(--cui-success) 28%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-success) 10%, var(--cui-surface));
  color: var(--cui-success);
}

.cuiInlineStateCopy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.cuiInlineStateCopy h2 {
  margin: 0;
  overflow: hidden;
  color: var(--cui-text);
  font-size: 14px;
  font-weight: 820;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiInlineStateCopy p {
  margin: 0;
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 640;
  line-height: 1.5;
}

.cuiInlineStateActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.cuiLoadingOverlay {
  position: fixed;
  inset: 0;
  z-index: var(--cui-z-overlay, 110);
  display: grid;
  place-items: center;
  background: var(--cui-dialog-overlay-bg);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  padding: 24px;
}

.cuiLoadingOverlayCard {
  position: relative;
  display: grid;
  width: min(360px, calc(100vw - 48px));
  justify-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cui-primary) 18%, var(--cui-line));
  border-radius: 14px;
  background: var(--cui-surface);
  box-shadow: 0 24px 70px color-mix(in srgb, #182033 18%, transparent);
  padding: 26px 28px 23px;
  text-align: center;
}

.cuiLoadingOverlayCard::before,
.cuiFullPageLoadingCard::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--cui-primary);
  content: '';
}

.cuiLoadingOverlayVisual {
  margin-top: 1px;
}

.cuiLoadingOverlayCopy {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin-top: 19px;
}

.cuiLoadingOverlayCard strong {
  color: var(--cui-text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.cuiLoadingOverlayCard p {
  max-width: 280px;
  margin: 0;
  color: var(--cui-text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

.cuiLoadingProgress {
  position: relative;
  width: 100%;
  height: 4px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cui-primary) 12%, var(--cui-surface));
}

.cuiLoadingProgress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: var(--cui-primary);
  animation: cuiLoadingTrack 1.05s ease-in-out infinite;
}

.cuiSkeletonBlock {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  border: 1px solid color-mix(in srgb, var(--cui-line) 80%, transparent);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  padding: 14px;
}

.cuiSkeletonBlockNoMedia {
  grid-template-columns: 1fr;
}

.cuiSkeletonMedia,
.cuiSkeletonLine {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--cui-text-muted) 12%, var(--cui-surface));
}

.cuiSkeletonMedia::after,
.cuiSkeletonLine::after {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, #ffffff 48%, transparent),
    transparent
  );
  animation: cuiSkeletonShimmer 1.15s ease-in-out infinite;
  content: '';
}

.cuiSkeletonMedia {
  width: 42px;
  height: 42px;
  border-radius: var(--cui-radius-md);
}

.cuiSkeletonLines {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.cuiSkeletonLine {
  height: 10px;
  border-radius: 999px;
}

.cuiSkeletonLine.strong {
  width: min(260px, 78%);
  height: 14px;
}

.cuiSkeletonLine.short {
  width: min(180px, 48%);
}

.cuiSkeletonStack {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.cuiSkeletonGrid {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.cuiSkeletonGrid1 {
  grid-template-columns: 1fr;
}

.cuiSkeletonGrid2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cuiSkeletonGrid3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cuiSkeletonGrid4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cuiSkeletonTable {
  --cui-skeleton-table-columns: 5;

  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cui-line) 80%, transparent);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
}

.cuiSkeletonTableHead,
.cuiSkeletonTableRow {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 12px;
  grid-template-columns: repeat(var(--cui-skeleton-table-columns), minmax(0, 1fr));
  padding: 13px 16px;
}

.cuiSkeletonTableHead {
  border-bottom: 1px solid color-mix(in srgb, var(--cui-line) 72%, transparent);
  background: var(--cui-surface-subtle);
}

.cuiSkeletonTableRow + .cuiSkeletonTableRow {
  border-top: 1px solid color-mix(in srgb, var(--cui-line) 60%, transparent);
}

.cuiSkeletonTableHead span,
.cuiSkeletonTableRow span {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cui-text-muted) 12%, var(--cui-surface));
}

.cuiSkeletonTableHead span::after,
.cuiSkeletonTableRow span::after {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, #ffffff 48%, transparent),
    transparent
  );
  animation: cuiSkeletonShimmer 1.15s ease-in-out infinite;
  content: '';
}

.cuiSkeletonTableHead span {
  height: 9px;
}

.cuiSkeletonTableRow span:first-child {
  height: 13px;
}

.cuiFullPageLoading {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--cui-primary) 4%, var(--cui-bg));
  color: var(--cui-text);
  padding: 24px;
}

.cuiFullPageLoadingCard {
  position: relative;
  display: grid;
  width: min(360px, calc(100vw - 48px));
  justify-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cui-primary) 18%, var(--cui-line));
  border-radius: 14px;
  background: var(--cui-surface);
  box-shadow: 0 24px 70px color-mix(in srgb, #182033 16%, transparent);
  padding: 26px 28px 23px;
  text-align: center;
}

.cuiFullPageLoadingVisual {
  margin-top: 1px;
}

.cuiFullPageLoadingCopy {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin-top: 19px;
}

.cuiFullPageLoadingCopy h1 {
  margin: 0;
  color: var(--cui-text);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.35;
}

.cuiFullPageLoadingCopy p {
  max-width: 280px;
  margin: 0;
  color: var(--cui-text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

.cuiFullPageLoadingTrack {
  width: 100%;
}

@media (max-width: 480px) {
  .cuiFullPageLoading,
  .cuiLoadingOverlay {
    padding: 16px;
  }

  .cuiFullPageLoadingCard,
  .cuiLoadingOverlayCard {
    width: min(100%, 340px);
    padding: 24px 22px 21px;
  }

  .cuiFullPageLoadingCard {
    min-width: 0;
  }
}

.cuiDialogOverlay {
  position: fixed;
  inset: 0;
  z-index: var(--cui-z-overlay);
  border: 0;
  background: var(--cui-dialog-overlay-bg);
  cursor: default;
}

.cuiDialogContent {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: var(--cui-z-modal);
  width: min(560px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 1px solid var(--cui-dialog-border);
  border-radius: var(--cui-dialog-radius);
  background: var(--cui-dialog-surface);
  box-shadow: var(--cui-shadow-md);
  animation: cuiDialogIn 140ms ease-out;
}

.cuiDialogHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 8px;
}

.cuiDialogTitle {
  margin: 0;
  color: var(--cui-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.cuiDialogDescription {
  margin: 6px 0 0;
  color: var(--cui-text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.cuiDialogBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 20px 20px;
}

.cuiDialogFooter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  background: transparent;
  padding: 0 20px 20px;
}

.cuiFormDialogForm {
  display: grid;
  gap: 14px;
}

.cuiForm {
  display: grid;
  min-width: 0;
  gap: var(--cui-space-4);
}

.cuiFormSection {
  min-width: 0;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
}

.cuiFormSectionHeader {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cui-space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--cui-line) 76%, transparent);
  padding: var(--cui-space-4) var(--cui-space-5);
}

.cuiFormSectionCopy {
  min-width: 0;
}

.cuiFormSectionTitle,
.cuiFormSectionDescription {
  margin: 0;
}

.cuiFormSectionTitle {
  color: var(--cui-text);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.4;
}

.cuiFormSectionDescription,
.cuiFieldGroupHeader span {
  margin-top: 4px;
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 640;
  line-height: 1.5;
}

.cuiFormSectionActions,
.cuiFormActionsPrimary,
.cuiFormActionsSecondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cui-space-2);
}

.cuiFormSectionBody {
  min-width: 0;
  padding: var(--cui-space-5);
}

.cuiFormGrid {
  display: grid;
  min-width: 0;
  gap: var(--cui-space-4);
}

.cuiFormGrid--1 {
  grid-template-columns: minmax(0, 1fr);
}
.cuiFormGrid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cuiFormGrid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cuiFormGrid--compact {
  gap: var(--cui-space-3);
}

.cuiFieldGroup {
  display: grid;
  min-width: 0;
  gap: var(--cui-space-3);
}

.cuiFieldGroupHeader {
  display: grid;
  gap: 2px;
}

.cuiFieldGroupHeader strong {
  color: var(--cui-text);
  font-size: 13px;
  font-weight: 760;
}

.cuiFieldGroupBody {
  display: grid;
  min-width: 0;
  gap: var(--cui-space-3);
}

.cuiFormActions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cui-space-3);
  border-top: 1px solid color-mix(in srgb, var(--cui-line) 76%, transparent);
  padding-top: var(--cui-space-4);
}

.cuiFormActions--start {
  justify-content: flex-start;
}
.cuiFormActions--end {
  justify-content: flex-end;
}
.cuiFormActions--between {
  justify-content: space-between;
}
.cuiFormActions--between .cuiFormActionsPrimary {
  margin-left: auto;
}

.cuiErrorSummary {
  border: 1px solid color-mix(in srgb, var(--cui-danger) 34%, transparent);
  border-radius: var(--cui-radius-sm);
  background: color-mix(in srgb, var(--cui-danger) 8%, var(--cui-surface));
  color: var(--cui-danger);
  padding: var(--cui-space-3) var(--cui-space-4);
}

.cuiErrorSummaryTitle {
  font-size: 13px;
}
.cuiErrorSummaryList {
  margin: 6px 0 0;
  padding-left: 18px;
}
.cuiErrorSummaryList li + li {
  margin-top: 4px;
}
.cuiErrorSummaryList button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 760px) {
  .cuiFormGrid--2,
  .cuiFormGrid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .cuiFormSectionHeader {
    flex-direction: column;
  }
  .cuiFormActions,
  .cuiFormActionsPrimary,
  .cuiFormActionsSecondary {
    align-items: stretch;
    width: 100%;
  }
  .cuiFormActions .cuiButton {
    flex: 1 1 auto;
  }
}

.cuiConfirmDialogBody {
  display: grid;
  gap: 12px;
  color: var(--cui-text-soft);
  font-size: 13px;
  font-weight: 640;
  line-height: 1.65;
}

.cuiUpload {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.cuiUploadDropzone {
  display: grid;
  min-height: 138px;
  place-items: center;
  border: 1px dashed var(--cui-line-strong);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface-subtle);
  padding: 18px;
  color: var(--cui-text-soft);
  text-align: center;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.cuiUploadDropzone:hover {
  border-color: var(--cui-primary);
  background: var(--cui-primary-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cui-primary) 8%, transparent);
}

.cuiUploadDropzone--dragActive {
  border-color: var(--cui-primary);
  background: var(--cui-primary-soft);
  box-shadow: 0 0 0 3px var(--cui-focus);
}

.cuiUpload--disabled .cuiUploadDropzone {
  cursor: not-allowed;
  opacity: 0.56;
}

.cuiUploadInput {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cuiUploadIcon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--cui-radius-md);
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 10px;
}

.cuiUploadTitle {
  display: block;
  color: var(--cui-text);
  font-size: 13px;
  font-weight: 780;
}

.cuiUploadHint {
  display: block;
  margin-top: 6px;
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 640;
}

.cuiUploadFiles {
  display: grid;
  width: 100%;
  min-width: 0;
  max-height: 320px;
  align-content: start;
  grid-auto-rows: minmax(52px, auto);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  gap: 8px;
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.cuiUploadFile {
  display: flex;
  width: 100%;
  min-height: 52px;
  min-width: 0;
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  max-width: none;
  overflow: hidden;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-sm);
  background: var(--cui-surface);
  padding: 8px 10px;
}

.cuiUploadValueLabel {
  color: var(--cui-text-muted);
}
.cuiUploadFileStatus {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--cui-radius-full);
  background: var(--cui-text-muted);
}
.cuiUploadFile--uploading .cuiUploadFileStatus {
  background: var(--cui-primary);
  animation: cuiUploadPulse 900ms ease-in-out infinite;
}
.cuiUploadFile--success .cuiUploadFileStatus {
  background: var(--cui-success);
}
.cuiUploadFile--error {
  border-color: color-mix(in srgb, var(--cui-danger) 36%, var(--cui-line));
}
.cuiUploadFile--error .cuiUploadFileStatus {
  background: var(--cui-danger);
}
.cuiUploadFileCopy {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  align-content: center;
  gap: 2px;
  overflow: hidden;
}
.cuiUploadFileName {
  display: block;
  overflow: hidden;
  color: var(--cui-text);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiUploadFileMeta {
  color: var(--cui-text-muted);
  font-size: 11px;
  line-height: 1.3;
}
.cuiUploadFileError {
  color: var(--cui-danger);
  font-size: 11px;
  line-height: 1.3;
}
.cuiUploadFileProgress {
  width: min(180px, 100%);
}
.cuiUploadFileActions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}
.cuiUploadFileActions button {
  border: 0;
  border-radius: var(--cui-radius-sm);
  background: transparent;
  color: var(--cui-primary);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  padding: 3px 4px;
}
.cuiUploadFileActions button:hover {
  background: var(--cui-primary-soft);
}
.cuiUploadFileActions button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cui-focus);
}

@keyframes cuiUploadPulse {
  50% {
    opacity: 0.34;
  }
}

.cuiColorPicker {
  display: grid;
  grid-template-columns: var(--cui-control-md) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cuiColorSwatch {
  width: var(--cui-control-md);
  height: var(--cui-control-md);
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--cui-line-strong);
  border-radius: var(--cui-radius-md);
  background:
    linear-gradient(45deg, rgba(148, 163, 184, 0.24) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148, 163, 184, 0.24) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.24) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.24) 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
  box-shadow: var(--cui-shadow-xs);
}

.cuiColorSwatch > input {
  width: 56px;
  height: 56px;
  margin: -9px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.cuiSegmented {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--cui-line-soft);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface-sunken);
  padding: 3px;
  box-shadow:
    inset 0 1px 2px rgba(20, 28, 38, 0.035),
    0 1px 0 var(--cui-highlight);
}
.cuiSegmented--sm {
  padding: 2px;
}
.cuiSegmented--sm .cuiSegmentedButton {
  min-height: 24px;
  padding: 0 8px;
  font-size: 11px;
}

.cuiSegmentedButton {
  min-height: 30px;
  border: 0;
  border-radius: var(--cui-radius-sm);
  background: transparent;
  color: var(--cui-text-soft);
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 620;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--cui-duration-fast) ease,
    color var(--cui-duration-fast) ease,
    box-shadow var(--cui-duration-fast) ease;
}

.cuiSegmentedButton:hover {
  color: var(--cui-text);
}

.cuiSegmentedButton[aria-pressed='true'] {
  background: var(--cui-surface-raised);
  color: var(--cui-text);
  box-shadow:
    0 1px 2px rgba(20, 28, 38, 0.08),
    0 0 0 1px var(--cui-line);
}

.cuiTooltipWrap {
  display: inline-flex;
}

/* JS 控制 + portal 到 body,位置由内联 fixed 设定;此处只管外观 */
.cuiTooltipContent {
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  z-index: var(--cui-z-tooltip);
  border: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
  border-radius: var(--cui-radius-md);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: var(--cui-shadow-md);
  color: #ffffff;
  padding: 8px 10px;
  pointer-events: none;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.5;
  overflow-wrap: anywhere;
  animation: cuiTooltipIn 120ms ease;
}

.cuiHelpLabel {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}

.cuiHelpLabelText {
  min-width: 0;
}

.cuiHelpTooltipTrigger {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: help;
  font: inherit;
  font-family: Arial, sans-serif;
  font-weight: 800;
  line-height: 1;
  padding: 0;
  transition:
    border-color var(--cui-duration-fast) ease,
    background var(--cui-duration-fast) ease,
    color var(--cui-duration-fast) ease;
}

.cuiHelpTooltipTrigger--sm {
  width: 16px;
  height: 16px;
  font-size: 11px;
}

.cuiHelpTooltipTrigger--md {
  width: 20px;
  height: 20px;
  font-size: 13px;
}

.cuiHelpTooltipTrigger--soft {
  border: 0;
  background: color-mix(in srgb, var(--cui-text-muted) 42%, var(--cui-surface));
  color: #ffffff;
}

.cuiHelpTooltipTrigger--soft:hover,
.cuiHelpTooltipTrigger--soft:focus-visible {
  background: var(--cui-text-muted);
  color: #ffffff;
}

.cuiHelpTooltipTrigger--outline {
  border: 1.5px solid currentColor;
  background: transparent;
  color: var(--cui-text-soft);
}

.cuiHelpTooltipTrigger--outline:hover,
.cuiHelpTooltipTrigger--outline:focus-visible {
  border-color: var(--cui-primary);
  color: var(--cui-primary);
}

.cuiHelpTooltipTrigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cui-focus);
}

.cuiHelpTooltipTrigger:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.cuiTooltipContent.cuiHelpTooltipContent {
  --cui-help-tooltip-bg: rgb(38 38 42 / 96%);
  max-width: min(360px, calc(100vw - 24px));
  border: 0;
  border-radius: 6px;
  background: var(--cui-help-tooltip-bg);
  box-shadow: var(--cui-shadow-md);
  color: #ffffff;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 560;
  line-height: 1.6;
  text-align: left;
  white-space: normal;
}

.cuiTooltipContent.cuiHelpTooltipContent::after {
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  content: '';
}

.cuiTooltipContent.cuiHelpTooltipContent[data-placement^='top']::after {
  top: 100%;
  left: 50%;
  border-top-color: var(--cui-help-tooltip-bg);
  transform: translateX(-50%);
}

.cuiTooltipContent.cuiHelpTooltipContent[data-placement^='bottom']::after {
  bottom: 100%;
  left: 50%;
  border-bottom-color: var(--cui-help-tooltip-bg);
  transform: translateX(-50%);
}

.cuiTooltipContent.cuiHelpTooltipContent[data-placement^='left']::after {
  top: 50%;
  left: 100%;
  border-left-color: var(--cui-help-tooltip-bg);
  transform: translateY(-50%);
}

.cuiTooltipContent.cuiHelpTooltipContent[data-placement^='right']::after {
  top: 50%;
  right: 100%;
  border-right-color: var(--cui-help-tooltip-bg);
  transform: translateY(-50%);
}

@keyframes cuiTooltipIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.cuiDataPage {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.cuiListPageLayout {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--cui-list-page-layout-gap, 16px);
}

.cuiListPageLayoutViewSwitch {
  display: flex;
  min-width: 0;
  width: 100%;
  align-items: center;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.cuiListPageLayoutViewSwitch > * {
  flex: 0 0 auto;
  max-width: 100%;
}

.cuiListPageLayoutFilters,
.cuiListPageLayoutResults {
  min-width: 0;
}

.cuiListPageLayoutSide {
  column-gap: 0;
  align-items: start;
}

.cuiListPageLayoutSidePush {
  grid-template-columns: minmax(0, 1fr) var(--cui-list-page-side-filter-width, 360px);
  transition: grid-template-columns 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cuiListPageLayoutSideOverlay {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}

.cuiListPageLayoutSide > .cuiListPageLayoutViewSwitch {
  grid-column: 1 / -1;
}

.cuiListPageLayoutSide > .cuiListPageLayoutResults {
  grid-column: 1;
  grid-row: 1;
}

.cuiListPageLayoutSidePush > .cuiListPageLayoutResults {
  padding-right: 20px;
}

.cuiListPageLayoutSideOverlay > .cuiListPageLayoutResults {
  padding-right: 0;
}

.cuiListPageLayoutSideFilters {
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--cui-section-line);
  background: var(--cui-surface);
  transition:
    opacity 160ms ease;
}

.cuiListPageLayoutSideFilterViewport {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--cui-surface);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cuiListPageLayoutSidePush > .cuiListPageLayoutSideFilters {
  position: sticky;
  top: var(--cui-list-page-sticky-top, 0);
  height: var(
    --cui-list-page-side-filter-height,
    calc(100dvh - var(--cui-list-page-sticky-top, 0px))
  );
  overflow: hidden;
  grid-column: 2;
  grid-row: 1;
}

.cuiListPageLayoutSideOverlay > .cuiListPageLayoutSideFilters {
  z-index: calc(var(--cui-z-sticky) + 1);
  width: min(100%, var(--cui-list-page-side-filter-width, 360px));
  height: 100%;
  min-height: 100%;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  justify-self: end;
  overflow: visible;
  border-left: 0;
  background: transparent;
  box-shadow: none;
}

.cuiListPageLayoutSideOverlay
  > .cuiListPageLayoutSideFilters
  > .cuiListPageLayoutSideFilterViewport {
  position: sticky;
  top: var(--cui-list-page-sticky-top, 0);
  height: var(
    --cui-list-page-side-filter-height,
    calc(100dvh - var(--cui-list-page-sticky-top, 0px))
  );
  max-height: calc(100dvh - var(--cui-list-page-sticky-top, 0px));
  border-left: 1px solid var(--cui-section-line);
  background: var(--cui-surface);
  box-shadow: -10px 0 26px color-mix(in srgb, var(--cui-text) 8%, transparent);
}

.cuiListPageLayoutSide:has(> .cuiListPageLayoutViewSwitch) > .cuiListPageLayoutResults,
.cuiListPageLayoutSide:has(> .cuiListPageLayoutViewSwitch) > .cuiListPageLayoutSideFilters {
  grid-row: 2;
}

.cuiListPageLayoutFilterToggle {
  position: fixed;
  z-index: calc(var(--cui-z-sticky) + 2);
  top: calc(
    var(--cui-list-page-sticky-top, 0px) + (100dvh - var(--cui-list-page-sticky-top, 0px)) / 2
  );
  right: 0;
  width: auto;
  height: auto;
  grid-column: 1 / -1;
  grid-row: 1;
  overflow: visible;
  pointer-events: none;
  transform: translate(-12px, -50%);
}

.cuiListPageLayoutFilterToggle > * {
  pointer-events: auto;
}

.cuiListPageLayoutSidePush[data-filter-open='false'] {
  grid-template-columns: minmax(0, 1fr) 0;
}

.cuiListPageLayoutSide[data-filter-open='false'] > .cuiListPageLayoutFilterToggle {
  transform: translate(0, -50%);
}

.cuiListPageLayoutSide[data-filter-open='false'] > .cuiListPageLayoutSideFilters {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.cuiListPageLayoutSide[data-filter-open='false']
  > .cuiListPageLayoutSideFilters
  > .cuiListPageLayoutSideFilterViewport {
  transform: translateX(16px);
}

@media (max-width: 1100px) {
  .cuiListPageLayoutSidePush {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cui-list-page-layout-gap, 16px);
  }

  .cuiListPageLayoutSidePush > .cuiListPageLayoutResults,
  .cuiListPageLayoutSidePush > .cuiListPageLayoutSideFilters,
  .cuiListPageLayoutSide > .cuiListPageLayoutFilterToggle {
    grid-column: 1;
  }

  .cuiListPageLayoutSidePush > .cuiListPageLayoutResults {
    padding-right: 0;
  }

  .cuiListPageLayoutSidePush > .cuiListPageLayoutSideFilters {
    position: static;
    height: auto;
    max-height: min(72dvh, 720px);
    grid-row: 2;
    border: 1px solid var(--cui-section-line);
    border-radius: var(--cui-radius-md);
  }

  .cuiListPageLayoutSidePush[data-filter-open='false'] > .cuiListPageLayoutSideFilters {
    height: 0;
    border: 0;
  }

  .cuiListPageLayoutSidePush[data-filter-open='false'] > .cuiListPageLayoutResults {
    grid-row: 1;
  }

  .cuiListPageLayoutSidePush > .cuiListPageLayoutResults {
    grid-row: 3;
  }

  .cuiListPageLayoutSideOverlay > .cuiListPageLayoutSideFilters {
    position: fixed;
    top: var(--cui-list-page-sticky-top, 0);
    right: 0;
    width: min(100%, var(--cui-list-page-side-filter-width, 360px));
    height: var(
      --cui-list-page-side-filter-height,
      calc(100dvh - var(--cui-list-page-sticky-top, 0px))
    );
    max-height: none;
    border-radius: 0;
  }

  .cuiListPageLayoutSideOverlay
    > .cuiListPageLayoutSideFilters
    > .cuiListPageLayoutSideFilterViewport {
    position: static;
    height: 100%;
    max-height: none;
  }
}

.cuiResourcePage {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.cuiResourceHeader {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cuiResourceTitleBlock {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.cuiResourceEyebrow {
  color: var(--cui-primary);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.2;
}

.cuiResourceTitle {
  margin: 0;
  color: var(--cui-text);
  font-size: 24px;
  font-weight: 820;
  letter-spacing: 0;
  line-height: 1.2;
}

.cuiResourceDescription {
  max-width: 760px;
  margin: 0;
  color: var(--cui-text-muted);
  font-size: 13px;
  font-weight: 640;
  line-height: 1.6;
}

.cuiResourceHeaderMeta,
.cuiResourceActions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.cuiResourceActions {
  justify-content: flex-end;
}

.cuiResourceMetrics,
.cuiResourceFilters,
.cuiResourceBody,
.cuiResourceMain,
.cuiResourceAside {
  min-width: 0;
}

.cuiResourceBodyWithAside {
  display: grid;
  align-items: start;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
}

.cuiResourceMain,
.cuiResourceAside {
  display: grid;
  gap: 16px;
}

.cuiResourceTable {
  width: 100%;
}

.cuiPageHeader {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cuiPageTitle {
  margin: 0;
  color: var(--cui-text);
  font-size: 26px;
  font-weight: 860;
  line-height: 1.2;
}

.cuiPageDescription {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--cui-text-muted);
  font-size: 13px;
  font-weight: 640;
  line-height: 1.6;
}

@keyframes cuiSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cuiLoadingRing {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cuiLoadingTrack {
  0% {
    transform: translateX(-110%);
  }

  52% {
    transform: translateX(72%);
  }

  100% {
    transform: translateX(225%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cuiLoadingVisualRing,
  .cuiLoadingProgress span {
    animation: none;
  }

  .cuiLoadingProgress span {
    width: 72%;
  }
}

@keyframes cuiSkeletonShimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes cuiPulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.88);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cuiDialogIn {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 8px)) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 720px) {
  .cuiPageHeader,
  .cuiResourceHeader,
  .cuiPanelHeader,
  .cuiDataListHeader {
    align-items: stretch;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .cuiResourceTitle {
    font-size: 22px;
  }

  .cuiResourceActions {
    justify-content: flex-start;
  }

  .cuiResourceBodyWithAside,
  .cuiMetricGrid2,
  .cuiMetricGrid3,
  .cuiMetricGrid4 {
    grid-template-columns: 1fr;
  }

  .cuiPageTitle {
    font-size: 22px;
  }

  .cuiToolbar,
  .cuiFilterBar,
  .cuiDialogFooter,
  .cuiDataListToolbar,
  .cuiDataListFooter,
  .cuiPagination {
    align-items: stretch;
  }

  .cuiPagination {
    grid-template-columns: 1fr;
  }

  .cuiPaginationInfo,
  .cuiPaginationActions,
  .cuiPaginationPageSize {
    grid-column: 1;
    justify-self: stretch;
  }

  .cuiPaginationInfo {
    grid-row: 1;
  }

  .cuiPaginationActions {
    grid-row: 2;
  }

  .cuiPaginationPageSize {
    grid-row: 3;
  }

  .cuiPaginationPageSizeSelect {
    width: 100%;
  }

  .cuiDataListSummary,
  .cuiDataListHeaderActions,
  .cuiDataListBulkActions,
  .cuiDataListItemActions {
    justify-self: stretch;
    justify-content: flex-start;
  }

  .cuiDataListToolbarSlot,
  .cuiDataListBulkActions {
    flex-basis: auto;
  }

  .cuiDataListItem {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .cuiDataListItemHeader {
    flex-direction: column;
  }

  .cuiFilterBar .cuiField,
  .cuiButton,
  .cuiPaginationActions,
  .cuiPaginationActions .cuiButton {
    width: 100%;
  }

  .cuiPaginationInfo {
    width: 100%;
    margin-right: 0;
  }

  .cuiInlineState {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .cuiInlineStateActions {
    justify-content: flex-start;
  }

  .cuiColorPicker {
    grid-template-columns: 1fr;
  }

  .cuiColorSwatch {
    width: 100%;
  }
}

/* ============================================================
   Tabs
   ============================================================ */
.cuiTabs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.cuiTabsList {
  display: flex;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.cuiTabs--underline .cuiTabsList {
  gap: 18px;
  border-bottom: 1px solid var(--cui-tabs-list-border);
}
.cuiTabs--segment .cuiTabsList {
  align-self: flex-start;
  gap: 4px;
  border: 1px solid var(--cui-line-soft);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface-sunken);
  padding: 3px;
}
.cuiTabsTab {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 620;
  line-height: 1;
  color: var(--cui-text-muted);
  cursor: pointer;
  padding: 8px 4px;
  white-space: nowrap;
  transition:
    color 150ms ease,
    background 150ms ease;
}
.cuiTabsTab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cuiTabs--underline .cuiTabsTab {
  position: relative;
  padding: 10px 2px;
}
.cuiTabs--underline .cuiTabsTab[data-active='true'] {
  color: var(--cui-tabs-active-indicator);
}
.cuiTabs--underline .cuiTabsTab[data-active='true']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--cui-tabs-active-indicator);
}
.cuiTabs--segment .cuiTabsTab {
  padding: 7px 14px;
  border-radius: var(--cui-radius-sm);
}
.cuiTabs--segment .cuiTabsTab[data-active='true'] {
  background: var(--cui-tabs-active-bg);
  color: var(--cui-tabs-active-text);
  box-shadow:
    0 1px 2px rgba(20, 28, 38, 0.08),
    0 0 0 1px var(--cui-line);
}
.cuiTabsPanel {
  min-width: 0;
  color: var(--cui-text-soft);
}

/* ============================================================
   Toast
   ============================================================ */
.cuiToastViewport {
  position: fixed;
  right: var(--cui-toast-offset);
  bottom: var(--cui-toast-offset);
  z-index: var(--cui-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--cui-toast-gap);
  max-width: var(--cui-toast-max-width);
  width: min(var(--cui-toast-max-width), calc(100vw - (var(--cui-toast-offset) * 2)));
  pointer-events: none;
}

.cuiToastViewport--topRight {
  top: var(--cui-toast-offset);
  bottom: auto;
}

.cuiToastViewport--topLeft {
  top: var(--cui-toast-offset);
  right: auto;
  bottom: auto;
  left: var(--cui-toast-offset);
}

.cuiToastViewport--bottomLeft {
  right: auto;
  left: var(--cui-toast-offset);
}
.cuiToast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--cui-line);
  border-left-width: 3px;
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-md);
  padding: 12px 14px;
  animation: cuiToastIn 180ms ease;
}
@keyframes cuiToastIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.cuiToastDot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--cui-info);
}
.cuiToast--success {
  border-left-color: var(--cui-success);
}
.cuiToast--success .cuiToastDot {
  background: var(--cui-success);
}
.cuiToast--warning {
  border-left-color: var(--cui-warning);
}
.cuiToast--warning .cuiToastDot {
  background: var(--cui-warning);
}
.cuiToast--error {
  border-left-color: var(--cui-danger);
}
.cuiToast--error .cuiToastDot {
  background: var(--cui-danger);
}
.cuiToast--info {
  border-left-color: var(--cui-info);
}
.cuiToastBody {
  flex: 1 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.cuiToastTitle {
  color: var(--cui-text);
  font-weight: 650;
  font-size: 14px;
  line-height: 1.4;
}
.cuiToastDesc {
  color: var(--cui-text-soft);
  font-size: 13px;
  line-height: 1.5;
}
.cuiToastClose {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--cui-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.cuiToastClose:hover {
  color: var(--cui-text);
}

.cuiToastClose:focus-visible,
.cuiToastAction:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cui-focus);
}

.cuiToastAction {
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--cui-primary);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.4;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cuiToastAction:hover {
  color: var(--cui-primary-light);
}

@media (max-width: 640px) {
  .cuiToastViewport,
  .cuiToastViewport--topLeft,
  .cuiToastViewport--bottomLeft {
    right: var(--cui-space-3);
    left: var(--cui-space-3);
    max-width: none;
  }

  .cuiToastViewport,
  .cuiToastViewport--bottomLeft {
    bottom: var(--cui-space-3);
  }
  .cuiToastViewport--topRight,
  .cuiToastViewport--topLeft {
    top: var(--cui-space-3);
    bottom: auto;
  }
}

/* ============================================================
   DatePicker / Calendar
   ============================================================ */
.cuiDatePicker {
  position: relative;
  display: inline-block;
  min-width: 0;
}
.cuiDatePickerTrigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--cui-control-md);
  width: 100%;
  min-width: 180px;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-control-bg);
  padding: 0 10px;
  font: inherit;
  color: var(--cui-text);
  text-align: left;
  cursor: pointer;
}
.cuiDatePickerTrigger:hover:not(:disabled) {
  border-color: var(--cui-line-strong);
}
.cuiDatePickerTrigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cuiDatePickerTrigger[data-empty='true'] .cuiDatePickerValue {
  color: var(--cui-input-placeholder);
}
.cuiDatePickerIcon {
  flex: 0 0 auto;
  font-size: 14px;
}
.cuiDatePickerTrailingIcon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--cui-text-muted);
}
.cuiDatePickerValue {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiDateRangeValue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding-inline: 22px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.cuiDateRangeSlot {
  min-width: 0;
  overflow: hidden;
  color: var(--cui-text);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiDateRangeSlot[data-empty='true'] {
  color: var(--cui-input-placeholder);
}
.cuiDateRangeSeparator {
  color: var(--cui-text-muted);
}
.cuiDatePickerClear {
  flex: 0 0 auto;
  color: var(--cui-text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.cuiDatePickerClear:hover {
  color: var(--cui-text);
}

.cuiDatePickerTrigger:focus-visible,
.cuiCalendarNav:focus-visible,
.cuiCalendarSelectors select:focus-visible,
.cuiCalendarCell:focus-visible,
.cuiDatePickerFooter button:focus-visible,
.cuiDatePickerPresets button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--cui-focus);
}

.cuiDatePickerHasClear .cuiDatePickerTrigger {
  padding-right: 34px;
}

.cuiDateRangePicker.cuiDatePickerHasClear .cuiDatePickerTrigger {
  padding-right: 10px;
}

.cuiDatePickerClear {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--cui-radius-full);
  background: transparent;
  color: var(--cui-text-muted);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 0;
  transform: translateY(-50%);
}
.cuiDatePickerPopover {
  z-index: var(--cui-z-popover);
  min-width: 280px;
  max-width: min(420px, calc(100vw - 16px));
  overflow: auto;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-md);
  padding: 12px;
}
.cuiDateRangePicker .cuiDatePickerTrigger {
  min-width: 250px;
}
.cuiDateRangePicker--dual .cuiDatePickerPopover {
  width: max-content;
  max-width: calc(100vw - 16px);
  padding: 14px;
}
.cuiDateRangeCalendarPanel {
  min-width: 0;
}
.cuiDateRangeCalendarPanel + .cuiDateRangeCalendarPanel {
  border-left: 1px solid var(--cui-line);
  padding-left: 14px;
}
.cuiDateRangeCalendarLabel {
  display: block;
  margin: 0 0 8px;
  color: var(--cui-text-soft);
  font-size: 12px;
  font-weight: 760;
}

.cuiDatePickerPanel {
  display: grid;
  min-width: 0;
  gap: var(--cui-space-3);
}

.cuiDatePickerPresets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cui-space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--cui-line) 74%, transparent);
  padding-bottom: var(--cui-space-3);
}

.cuiDatePickerPresets button,
.cuiDatePickerFooter button {
  border: 0;
  border-radius: var(--cui-radius-sm);
  background: transparent;
  color: var(--cui-primary);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  padding: 4px 6px;
}

.cuiDatePickerPresets button:hover,
.cuiDatePickerFooter button:hover {
  background: var(--cui-primary-soft);
}

.cuiDatePickerFooter {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid color-mix(in srgb, var(--cui-line) 74%, transparent);
  padding-top: var(--cui-space-2);
}
.cuiCalendar {
  width: 252px;
}
.cuiCalendarHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cuiCalendarTitle {
  color: var(--cui-text);
  font-weight: 760;
  font-size: 14px;
}

.cuiCalendarSelectors {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cuiCalendarSelectors select {
  max-width: 110px;
  border: 1px solid transparent;
  border-radius: var(--cui-radius-sm);
  background: transparent;
  color: var(--cui-text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 720;
  padding: 4px;
}

.cuiCalendarSelectors select:hover {
  border-color: var(--cui-line);
  background: var(--cui-surface-hover);
}
.cuiCalendarNav {
  appearance: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-sm);
  background: var(--cui-surface);
  color: var(--cui-text-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.cuiCalendarNav:hover {
  background: var(--cui-surface-hover);
}
.cuiCalendarNavPlaceholder {
  width: 28px;
  height: 28px;
}
.cuiDateRangeCalendars {
  display: grid;
  grid-template-columns: repeat(2, 252px);
  gap: var(--cui-space-3);
}
.cuiCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cuiCalendarWeekday {
  text-align: center;
  padding: 4px 0;
  color: var(--cui-text-muted);
  font-size: 12px;
}
.cuiCalendarCell {
  appearance: none;
  height: 32px;
  border: 0;
  border-radius: var(--cui-radius-sm);
  background: transparent;
  color: var(--cui-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.cuiCalendarCell--empty {
  visibility: hidden;
}
.cuiCalendarCell:hover:not(:disabled) {
  background: var(--cui-surface-hover);
}
.cuiCalendarCell:disabled {
  color: var(--cui-text-muted);
  opacity: 0.4;
  cursor: not-allowed;
}
.cuiCalendarCell[data-today='true'] {
  box-shadow: inset 0 0 0 1px var(--cui-line-strong);
}
.cuiCalendarCell[data-inrange='true'] {
  border-radius: 0;
  background: var(--cui-primary-soft);
}
.cuiCalendarCell[data-selected='true'],
.cuiCalendarCell[data-edge='true'] {
  background: var(--cui-primary);
  color: #ffffff;
}

@media (max-width: 620px) {
  .cuiDateRangePicker--dual .cuiDatePickerPopover {
    width: min-content;
  }
  .cuiDateRangeCalendars {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .cuiDateRangeCalendarPanel + .cuiDateRangeCalendarPanel {
    border-top: 1px solid var(--cui-line);
    border-left: 0;
    padding-top: 12px;
    padding-left: 0;
  }
}

@media (max-width: 540px) {
  .cuiDatePicker,
  .cuiDatePickerTrigger {
    width: 100%;
  }
  .cuiDatePickerPopover {
    min-width: min(280px, calc(100vw - 16px));
  }
  .cuiCalendar {
    width: min(252px, calc(100vw - 40px));
  }
  .cuiDateRangeCalendars {
    grid-template-columns: minmax(0, 1fr);
  }
  .cuiDateRangeCalendars .cuiCalendar:last-child {
    display: none;
  }
  .cuiCalendarSelectors select {
    max-width: 92px;
  }
}

/* ====================== Sparkline 迷你趋势图 ====================== */
.cuiSparkline {
  display: inline-block;
  vertical-align: middle;
  color: var(--cui-primary);
}
.cuiSparkline--success {
  color: var(--cui-success);
}
.cuiSparkline--warning {
  color: var(--cui-warning);
}
.cuiSparkline--danger {
  color: var(--cui-danger);
}
.cuiSparkline--info {
  color: var(--cui-info);
}
.cuiSparkline--neutral {
  color: var(--cui-text-muted);
}
.cuiSparklineLine {
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cuiSparklineArea {
  fill: currentColor;
  opacity: 0.09;
  stroke: none;
}
.cuiSparklineDot {
  fill: currentColor;
}
.cuiSparklineBar {
  fill: currentColor;
}

/* ====================== Button: link 变体 + block 全宽 ====================== */
.cuiButtonLink {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--cui-primary);
  padding-left: 4px;
  padding-right: 4px;
}
.cuiButtonLink:hover:not(:disabled) {
  background: transparent;
  box-shadow: none;
  color: var(--cui-primary-light);
  text-decoration: underline;
}
.cuiCopyButton--copied:not(:disabled) {
  border-color: color-mix(in srgb, var(--cui-success) 36%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-success) 10%, var(--cui-surface));
  color: var(--cui-success);
}
.cuiCopyButton--failed:not(:disabled) {
  border-color: color-mix(in srgb, var(--cui-danger) 36%, var(--cui-line));
  background: color-mix(in srgb, var(--cui-danger) 8%, var(--cui-surface));
  color: var(--cui-danger);
}
.cuiButtonBlock {
  width: 100%;
}

/* ====================== Avatar 头像 ====================== */
.cuiAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  -webkit-user-select: none;
          user-select: none;
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
}
.cuiAvatar--sm {
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.cuiAvatar--md {
  width: 36px;
  height: 36px;
  font-size: 14px;
}
.cuiAvatar--lg {
  width: 48px;
  height: 48px;
  font-size: 18px;
}
.cuiAvatar--success {
  background: color-mix(in srgb, var(--cui-success) 14%, var(--cui-surface));
  color: var(--cui-success);
}
.cuiAvatar--warning {
  background: color-mix(in srgb, var(--cui-warning) 16%, var(--cui-surface));
  color: var(--cui-warning);
}
.cuiAvatar--danger {
  background: color-mix(in srgb, var(--cui-danger) 14%, var(--cui-surface));
  color: var(--cui-danger);
}
.cuiAvatar--info {
  background: color-mix(in srgb, var(--cui-info) 14%, var(--cui-surface));
  color: var(--cui-info);
}
.cuiAvatar--neutral {
  background: var(--cui-surface-hover);
  color: var(--cui-text-soft);
}
.cuiAvatarImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Media primitive for product, video, live, and entity thumbnails. */
.cuiMediaThumbnail {
  position: relative;
  display: inline-flex;
  width: 100%;
  aspect-ratio: var(--cui-media-ratio, 1 / 1);
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border-radius: var(--cui-radius-sm);
  background: var(--cui-media-bg);
  color: var(--cui-media-fallback);
}

.cuiMediaThumbnailImage,
.cuiMediaThumbnailFallback {
  width: 100%;
  height: 100%;
}

.cuiMediaThumbnailImage {
  display: block;
}
.cuiMediaThumbnailImage--cover {
  object-fit: cover;
}
.cuiMediaThumbnailImage--contain {
  object-fit: contain;
}

.cuiMediaThumbnailFallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--cui-primary) 8%, var(--cui-media-bg));
  font-size: 12px;
  font-weight: 700;
}

.cuiMediaThumbnailBadge {
  position: absolute;
  top: var(--cui-space-2);
  left: var(--cui-space-2);
  max-width: calc(100% - var(--cui-space-4));
  overflow: hidden;
  border-radius: var(--cui-radius-xs);
  background: color-mix(in srgb, var(--cui-overlay-bg) 80%, var(--cui-surface));
  color: #ffffff;
  font-size: 11px;
  font-weight: 720;
  line-height: 1.3;
  padding: 3px 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiMediaThumbnailOverlay {
  position: absolute;
  inset: auto 0 0;
  min-width: 0;
  background: rgb(38 38 42);
  color: #ffffff;
  padding: var(--cui-space-5) var(--cui-space-3) var(--cui-space-3);
}

.cuiMediaThumbnailLoading {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid color-mix(in srgb, var(--cui-primary) 22%, transparent);
  border-top-color: var(--cui-primary);
  border-radius: var(--cui-radius-full);
  animation: cuiSpin 700ms linear infinite;
}

/* Read-only fractional rating shared by product, shop, and review surfaces. */
.cuiRating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--cui-warning);
  letter-spacing: 0;
  line-height: 1;
}

.cuiRatingStar {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
}

.cuiRatingStar > .cuiCompassIcon,
.cuiRatingStarFill > .cuiCompassIcon {
  display: block;
}

.cuiRatingStarTrack {
  color: color-mix(in srgb, var(--cui-warning) 28%, var(--cui-line));
}

.cuiRatingStarFill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--cui-rating-fill);
  overflow: hidden;
  color: var(--cui-warning);
}

.cuiRating--sm .cuiCompassIcon {
  width: 14px;
  height: 14px;
}

.cuiRating--md .cuiCompassIcon {
  width: 18px;
  height: 18px;
}

.cuiRating--lg .cuiCompassIcon {
  width: 22px;
  height: 22px;
}

/* Desktop commerce magnifier: pointer lens plus a side detail pane. */
.cuiImageMagnifier {
  position: relative;
  width: 100%;
  min-width: 0;
  color: var(--cui-text);
}

.cuiImageMagnifier[role='button'] {
  cursor: zoom-in;
}

.cuiImageMagnifier:focus-visible {
  outline: 2px solid var(--cui-primary);
  outline-offset: 3px;
}

.cuiImageMagnifierStage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cui-image-magnifier-ratio);
  overflow: hidden;
  border-radius: inherit;
  background: var(--cui-surface);
}

.cuiImageMagnifierImage {
  width: 100%;
  height: 100%;
  display: block;
}

.cuiImageMagnifierImage.is-contain,
.cuiImageMagnifierPreview > img.is-contain {
  object-fit: contain;
}

.cuiImageMagnifierImage.is-cover,
.cuiImageMagnifierPreview > img.is-cover {
  object-fit: cover;
}

.cuiImageMagnifierLens {
  position: absolute;
  z-index: 2;
  top: var(--cui-image-magnifier-y);
  left: var(--cui-image-magnifier-x);
  width: var(--cui-image-magnifier-lens-size);
  height: var(--cui-image-magnifier-lens-size);
  display: none;
  border: 1px solid var(--cui-primary);
  background: var(--cui-primary-soft);
  box-shadow: inset 0 0 0 1px var(--cui-surface);
  opacity: 0.52;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.cuiImageMagnifierPreview {
  position: absolute;
  z-index: var(--cui-z-popover);
  top: 0;
  left: calc(100% + 12px);
  width: 100%;
  aspect-ratio: var(--cui-image-magnifier-ratio);
  display: none;
  overflow: hidden;
  border: 1px solid var(--cui-control-line-strong);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-lg);
  pointer-events: none;
}

.cuiImageMagnifierPreview > img {
  position: absolute;
  top: var(--cui-image-magnifier-preview-top);
  left: var(--cui-image-magnifier-preview-left);
  width: calc(var(--cui-image-magnifier-zoom) * 100%);
  height: calc(var(--cui-image-magnifier-zoom) * 100%);
  max-width: none;
  display: block;
}

.cuiImageMagnifier.isActive .cuiImageMagnifierLens,
.cuiImageMagnifier.isActive .cuiImageMagnifierPreview {
  display: block;
}

@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .cuiImageMagnifierLens,
  .cuiImageMagnifierPreview {
    display: none !important;
  }
}

/* ====================== FormField: 必填星号 + inline 布局 ====================== */
.cuiFieldRequired {
  color: var(--cui-danger);
  margin-left: 2px;
}
.cuiField--inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.cuiField--inline .cuiFieldLabelRow {
  margin: 0;
  flex: 0 0 auto;
}

/* ====================== Tabs: 计数徽标 ====================== */
.cuiTabsBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  background: var(--cui-surface-hover);
  color: var(--cui-text-soft);
}
.cuiTabsTab[data-active='true'] .cuiTabsBadge {
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
}

/* ====================== StatusBadge 补语气:purple / cyan(对齐遗留色) ====================== */
.cuiStatusBadgePurple {
  border-color: color-mix(in srgb, #7c3aed 32%, transparent);
  background: color-mix(in srgb, #7c3aed 10%, var(--cui-surface));
  color: #7c3aed;
}
.cuiStatusBadgeCyan {
  border-color: color-mix(in srgb, #0891b2 32%, transparent);
  background: color-mix(in srgb, #0891b2 10%, var(--cui-surface));
  color: #0891b2;
}

/* ====================== Progress 进度条 ====================== */
.cuiProgress {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cuiProgressTrack {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: var(--cui-surface-sunken);
  box-shadow: inset 0 1px 2px rgba(20, 28, 38, 0.1);
  overflow: hidden;
}
.cuiProgress--sm .cuiProgressTrack {
  height: 4px;
}
.cuiProgressBar {
  height: 100%;
  border-radius: 999px;
  background: var(--cui-primary);
  transition: width var(--cui-duration-slow) ease;
}
.cuiProgressBar--success {
  background: var(--cui-success);
}
.cuiProgressBar--warning {
  background: var(--cui-warning);
}
.cuiProgressBar--danger {
  background: var(--cui-danger);
}
.cuiProgressBar--info {
  background: var(--cui-info);
}
.cuiProgressLabel {
  flex: 0 0 auto;
  min-width: 36px;
  text-align: right;
  font-size: 12px;
  color: var(--cui-text-soft);
}

/* ====================== Tag 标签 ====================== */
.cuiTag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: var(--cui-radius-sm, 6px);
  font-size: 12px;
  line-height: 1.6;
  border: 1px solid var(--cui-line-soft);
  background: var(--cui-surface-hover);
  color: var(--cui-text-soft);
}
.cuiTag--primary {
  border-color: color-mix(in srgb, var(--cui-primary) 18%, var(--cui-line-soft));
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
}
.cuiTag--success {
  border-color: color-mix(in srgb, var(--cui-success) 18%, var(--cui-line-soft));
  background: color-mix(in srgb, var(--cui-success) 10%, var(--cui-surface));
  color: var(--cui-success);
}
.cuiTag--warning {
  border-color: color-mix(in srgb, var(--cui-warning) 20%, var(--cui-line-soft));
  background: color-mix(in srgb, var(--cui-warning) 12%, var(--cui-surface));
  color: var(--cui-warning);
}
.cuiTag--danger {
  border-color: color-mix(in srgb, var(--cui-danger) 18%, var(--cui-line-soft));
  background: color-mix(in srgb, var(--cui-danger) 10%, var(--cui-surface));
  color: var(--cui-danger);
}
.cuiTag--info {
  border-color: color-mix(in srgb, var(--cui-info) 18%, var(--cui-line-soft));
  background: color-mix(in srgb, var(--cui-info) 10%, var(--cui-surface));
  color: var(--cui-info);
}
.cuiTagClose {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
}
.cuiTagClose:hover {
  opacity: 1;
}

/* ====================== Descriptions 描述列表 ====================== */
.cuiDescriptions {
  display: grid;
  gap: 10px 24px;
  margin: 0;
}
.cuiDescriptions--cols-1 {
  grid-template-columns: minmax(0, 1fr);
}
.cuiDescriptions--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cuiDescriptions--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cuiDescriptionsItem {
  min-width: 0;
  margin: 0;
}
.cuiDescriptions--horizontal .cuiDescriptionsItem {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.cuiDescriptions--horizontal .cuiDescriptionsLabel {
  flex: 0 0 auto;
  min-width: 72px;
}
.cuiDescriptionsLabel {
  margin: 0;
  font-size: 13px;
  color: var(--cui-text-muted);
}
.cuiDescriptionsValue {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  color: var(--cui-text);
}
.cuiDescriptions--vertical .cuiDescriptionsValue {
  margin-top: 2px;
}

/* ====================== Dialog 尺寸档位(md=默认 560)+ DropdownSelect 清除 ====================== */
.cuiDialog--sm {
  width: min(420px, calc(100vw - 28px));
}
.cuiDialog--lg {
  width: min(760px, calc(100vw - 28px));
}
.cuiDialog--xl {
  width: min(960px, calc(100vw - 28px));
}
.cuiDropdownSelectClear {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  color: var(--cui-text-muted);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transform: translateY(-50%);
}
.cuiDropdownSelectHasClear .cuiDropdownSelectTrigger {
  padding-right: 38px;
}
.cuiDropdownSelectClear:hover {
  background: var(--cui-surface-hover);
  color: var(--cui-text);
}

/* 弹窗/抽屉关闭键:无边框幽灵样式(覆盖 IconButton 的方块外观) */
.cuiDialogClose {
  width: 30px;
  height: 30px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--cui-text-muted);
}
.cuiDialogClose:hover {
  border-color: transparent;
  background: var(--cui-surface-hover);
  color: var(--cui-text);
}

/* DatePicker 日历弹层 portal 到 body 后用 fixed 定位,重置基础的相对定位边距 */
.cuiDatePickerPopover--portal {
  margin: 0;
  z-index: var(--cui-z-popover);
}

/* DropdownSelect 菜单 portal 到 body 后用 fixed 定位,重置基础的相对定位边距 */
.cuiDropdownSelectMenu--portal {
  margin: 0;
  z-index: calc(var(--cui-z-popover) + 1);
}

/* ====================== Drawer 抽屉 ====================== */
.cuiDrawerOverlay {
  position: fixed;
  inset: 0;
  z-index: var(--cui-z-overlay, 100);
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--cui-drawer-overlay-bg);
  animation: cuiDrawerFade 0.16s ease;
}
.cuiDrawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: var(--cui-z-modal);
  width: var(--cui-drawer-width, 420px);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  background: var(--cui-drawer-surface);
  color: var(--cui-text);
  box-shadow: var(--cui-shadow-md);
}
.cuiDrawer--right {
  right: 0;
  border-left: 1px solid var(--cui-drawer-border);
  animation: cuiDrawerInRight 0.2s ease;
}
.cuiDrawer--left {
  left: 0;
  border-right: 1px solid var(--cui-drawer-border);
  animation: cuiDrawerInLeft 0.2s ease;
}
.cuiDrawerHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--cui-drawer-border);
}
.cuiDrawerTitle {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
}
.cuiDrawerDescription {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--cui-text-soft);
}
.cuiDrawerBody {
  flex: 1 1 auto;
  overflow: auto;
  padding: 20px;
}
.cuiDrawerFooter {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--cui-drawer-border);
  background: var(--cui-drawer-footer-bg);
}
@keyframes cuiDrawerFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes cuiDrawerInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes cuiDrawerInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* ====================== Stepper 步骤条 ====================== */
.cuiStepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.cuiStepper--horizontal {
  flex-direction: row;
}
.cuiStepper--vertical {
  flex-direction: column;
}
.cuiStep {
  position: relative;
  display: flex;
}
.cuiStepper--horizontal .cuiStep {
  flex: 1 1;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 4px;
}
.cuiStepper--vertical .cuiStep {
  flex: 0 0 auto;
  flex-direction: row;
  gap: 10px;
  padding-bottom: 20px;
}
.cuiStepMarker {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--cui-surface);
}
.cuiStepIndex {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--cui-line-strong);
  background: var(--cui-surface);
  color: var(--cui-text-soft);
}
.cuiStep--active .cuiStepIndex {
  border-color: var(--cui-primary);
  background: var(--cui-primary);
  color: #ffffff;
}
.cuiStep--done .cuiStepIndex {
  border-color: var(--cui-primary);
  background: color-mix(in srgb, var(--cui-primary) 12%, var(--cui-surface));
  color: var(--cui-primary);
}
.cuiStepBody {
  min-width: 0;
}
.cuiStepper--horizontal .cuiStepBody {
  margin-top: 8px;
}
.cuiStepper--vertical .cuiStepBody {
  padding-top: 2px;
}
.cuiStepTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--cui-text);
}
.cuiStep--pending .cuiStepTitle {
  color: var(--cui-text-muted);
  font-weight: 500;
}
.cuiStepDesc {
  font-size: 12px;
  color: var(--cui-text-soft);
  margin-top: 2px;
}
.cuiStepConnector {
  position: absolute;
  z-index: 0;
  background: var(--cui-line);
}
.cuiStepper--horizontal .cuiStepConnector {
  top: 13px;
  left: calc(50% + 13px);
  width: calc(100% - 26px);
  height: 1px;
}
.cuiStepper--vertical .cuiStepConnector {
  left: 13px;
  top: 28px;
  bottom: 2px;
  width: 1px;
}
.cuiStep--done .cuiStepConnector {
  background: var(--cui-primary);
}

/* ====================== ChartPanel 图表容器 ====================== */
.cuiChartPanel {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--cui-line-soft);
  border-radius: var(--cui-radius-md, 8px);
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-xs);
  padding: 0;
}
.cuiChartPanelHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--cui-line-soft);
  padding: 15px 18px;
}
.cuiChartPanelTitle {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--cui-text);
}
.cuiChartPanelDesc {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--cui-text-soft);
}
.cuiChartPanelActions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.cuiChartPanelBody {
  position: relative;
  width: 100%;
  height: var(--cui-chart-height, 280px);
  min-height: 120px;
  padding: 16px 18px 18px;
}
.cuiChartPanelState {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--cui-text-muted);
}

/* ============================================================
   Layout 布局原语:Stack / Inline / Grid / Divider / Spacer / Center
   ============================================================ */
.cuiStack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cui-stack-gap, var(--cui-space-4));
}
.cuiInline {
  min-width: 0;
  display: flex;
  flex-direction: row;
  gap: var(--cui-inline-gap, var(--cui-space-2));
}
.cuiGrid {
  min-width: 0;
  display: grid;
  gap: var(--cui-grid-gap, var(--cui-space-4));
}
.cuiSpacer {
  flex: 1 1 auto;
}
.cuiCenter {
  display: flex;
  justify-content: center;
}
.cuiCenter--both {
  align-items: center;
  justify-content: center;
}
.cuiDivider {
  border: 0;
  align-self: stretch;
  background: var(--cui-line);
  height: 1px;
  width: 100%;
}
.cuiDivider--vertical {
  width: 1px;
  height: auto;
  min-height: 1em;
  align-self: stretch;
}
.cuiDivider--labeled {
  height: auto;
  background: none;
  display: flex;
  align-items: center;
  gap: var(--cui-space-3);
  color: var(--cui-text-muted);
  font-size: 12px;
}
.cuiDivider--labeled::before,
.cuiDivider--labeled::after {
  content: '';
  flex: 1 1;
  height: 1px;
  background: var(--cui-line);
}
.cuiDividerLabel {
  white-space: nowrap;
}

.cuiAgencyThemeScope {
  min-width: 0;
  min-height: 100%;
  background: var(--cui-bg);
  color: var(--cui-text);
}

/* Theme density is intentionally scoped to shared UI primitives. Business
   modules keep their owner-defined layout until they migrate to @compass/ui. */
.cuiAgencyThemeScope[data-cui-density='compact'] {
  --cui-control-sm: 26px;
  --cui-control-md: 30px;
  --cui-control-lg: 36px;
  --cui-space-2: 6px;
  --cui-space-3: 8px;
  --cui-space-4: 12px;
  --cui-space-5: 14px;
  --cui-space-6: 18px;
  --cui-card-pad: 12px;
}
.cuiAgencyThemeScope[data-cui-density='compact'] .cuiTable th,
.cuiAgencyThemeScope[data-cui-density='compact'] .cuiTable td {
  padding: 5px 8px;
}
.cuiAgencyThemeScope[data-cui-density='compact'] .cuiPagination {
  gap: var(--cui-space-2);
}
.cuiAgencyThemeScope[data-cui-density='compact'] .cuiCardHeader,
.cuiAgencyThemeScope[data-cui-density='compact'] .cuiCardBody,
.cuiAgencyThemeScope[data-cui-density='compact'] .cuiCardFooter {
  --cui-card-pad: 12px;
}

/* ============================================================
   Card 卡片容器
   ============================================================ */
.cuiCard {
  min-width: 0;
  display: block;
  border-radius: var(--cui-card-radius);
  background: var(--cui-card-bg);
  color: var(--cui-text);
  text-decoration: none;
  transition:
    box-shadow var(--cui-duration-base) ease,
    transform var(--cui-duration-base) ease,
    border-color var(--cui-duration-base) ease;
}
.cuiCard--padded {
  padding: var(--cui-card-pad, var(--cui-space-5));
}
.cuiCard--elevated {
  border: 1px solid var(--cui-line-soft);
  box-shadow: var(--cui-shadow-xs);
}
.cuiCard--outline {
  border: 1px solid var(--cui-card-border);
  box-shadow: none;
}
.cuiCard--subtle {
  border: 1px solid var(--cui-line-soft);
  background: var(--cui-card-subtle-bg);
  box-shadow: none;
}
.cuiCard--interactive {
  cursor: pointer;
}
.cuiCard--interactive:hover {
  border-color: color-mix(in srgb, var(--cui-primary) 24%, var(--cui-line));
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-sm);
  transform: translateY(-1px);
}
.cuiCard--interactive:focus-visible {
  outline: none;
  border-color: var(--cui-primary);
  box-shadow: 0 0 0 3px var(--cui-focus);
}
.cuiCardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cui-space-3);
  padding: var(--cui-card-pad, var(--cui-space-5));
  padding-bottom: 0;
}
.cuiCardHeaderMain {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cuiCardTitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--cui-text);
}
.cuiCardDescription {
  font-size: 13px;
  color: var(--cui-text-muted);
}
.cuiCardActions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--cui-space-2);
}
.cuiCardBody {
  padding: var(--cui-card-pad, var(--cui-space-5));
}
.cuiCardFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cui-space-2);
  padding: var(--cui-card-pad, var(--cui-space-5));
  padding-top: var(--cui-space-3);
  border-top: 1px solid var(--cui-line);
}

/* Panel keeps its established density while composing the shared Card slots. */
.cuiPanel.cuiCard {
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
}
.cuiPanelHeader.cuiCardHeader {
  gap: 16px;
  border-bottom: 1px solid var(--cui-section-line);
  padding: 16px 18px;
}
.cuiPanelBody.cuiCardBody {
  padding: 18px;
}
.cuiPanelFooter.cuiCardFooter {
  padding: 14px 18px;
}

/* ============================================================
   Popover 浮层 + Menu 菜单
   ============================================================ */
.cuiPopover {
  z-index: var(--cui-z-popover);
  max-width: calc(100vw - 16px);
  overflow: auto;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-sm);
  color: var(--cui-text);
}
.cuiMenu {
  min-width: 180px;
  max-height: min(420px, calc(100vh - 24px));
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cuiMenuItem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: var(--cui-radius-sm);
  background: transparent;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--cui-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--cui-duration-fast) ease;
}
.cuiMenuItem:hover:not(:disabled),
.cuiMenuItem:focus-visible {
  outline: none;
  background: var(--cui-surface-hover);
}
.cuiMenuItem:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cuiMenuItemDisabledReason,
.cuiMenuItemDisabledReason > .cuiTooltipWrap {
  display: flex;
  width: 100%;
}
.cuiMenuItem--danger {
  color: var(--cui-danger);
}
.cuiMenuItem--danger:hover:not(:disabled),
.cuiMenuItem--danger:focus-visible {
  background: color-mix(in srgb, var(--cui-danger) 12%, var(--cui-surface));
}
.cuiMenuItemIcon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 16px;
  justify-content: center;
}
.cuiMenuLabel {
  padding: 6px 10px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cui-text-muted);
}
.cuiMenuSeparator {
  height: 1px;
  margin: 4px 0;
  background: var(--cui-line);
}

/* Persistent application navigation. DropdownMenu remains the action-menu primitive. */
.cuiCompassIcon {
  display: inline-block;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.18em;
}

.cuiRegionFlag {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cui-text) 12%, transparent);
  border-radius: 2px;
  background-color: var(--cui-surface);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: var(--cui-text-muted);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  vertical-align: -0.15em;
}
.cuiRegionFlag--sm {
  width: 16px;
  height: 12px;
}
.cuiRegionFlag--md {
  width: 20px;
  height: 14px;
}
.cuiRegionFlag--lg {
  width: 28px;
  height: 20px;
}
.cuiRegionFlag--de {
  background-image: url(/_next/static/media/de.c651613d.png);
}
.cuiRegionFlag--es {
  background-image: url(/_next/static/media/es.64127157.png);
}
.cuiRegionFlag--fr {
  background-image: url(/_next/static/media/fr.a27b0a6c.png);
}
.cuiRegionFlag--gb {
  background-image: url(/_next/static/media/gb.723de079.png);
}
.cuiRegionFlag--id {
  background-image: url(/_next/static/media/id.d999381b.png);
}
.cuiRegionFlag--jp {
  background-image: url(/_next/static/media/jp.8abf018d.png);
}
.cuiRegionFlag--mx {
  background-image: url(/_next/static/media/mx.d73c4893.png);
}
.cuiRegionFlag--my {
  background-image: url(/_next/static/media/my.7457f939.png);
}
.cuiRegionFlag--ph {
  background-image: url(/_next/static/media/ph.b1ef91e1.png);
}
.cuiRegionFlag--sg {
  background-image: url(/_next/static/media/sg.25fc40b9.png);
}
.cuiRegionFlag--th {
  background-image: url(/_next/static/media/th.9c61ef6d.png);
}
.cuiRegionFlag--us {
  background-image: url(/_next/static/media/us.d08e8d47.png);
}
.cuiRegionFlag--vn {
  background-image: url(/_next/static/media/vn.c352123a.png);
}
.cuiRegionFlag.is-unknown {
  border-style: dashed;
  background: var(--cui-surface-hover);
}

.cuiNavigationMenu {
  min-width: 0;
  box-sizing: border-box;
  color: var(--cui-text-soft);
  font-size: 14px;
}
.cuiNavigationMenuList,
.cuiNavigationSubmenu,
.cuiNavigationMenuGroupItems {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cuiNavigationMenu--vertical {
  position: relative;
  width: 224px;
  height: 100%;
  max-height: 100%;
  overflow: visible;
  border-right: 1px solid var(--cui-line);
  background: var(--cui-surface);
  padding: 10px 14px;
  transition:
    width 280ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cuiNavigationMenu--vertical > .cuiNavigationMenuList {
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
.cuiNavigationMenu--vertical.is-collapsed {
  width: 72px;
  padding: 12px 9px;
  overflow: visible;
}
.cuiNavigationMenuCollapse {
  position: absolute;
  z-index: calc(var(--cui-z-sticky) + 1);
  top: 50%;
  right: -14px;
  display: grid;
  width: 28px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: var(--cui-primary);
  color: #fff;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--cui-primary) 24%, transparent);
  cursor: pointer;
  transform: translateY(-50%);
}
.cuiNavigationMenuCollapse:hover,
.cuiNavigationMenuCollapse:focus-visible {
  background: var(--cui-primary-light);
}
.cuiNavigationMenuCollapse:focus-visible {
  outline: 2px solid var(--cui-surface);
  outline-offset: -4px;
}
.cuiNavigationMenuCollapseIcon {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(135deg);
  transition: transform var(--cui-duration-fast) ease;
}
.cuiNavigationMenu--vertical.is-collapsed .cuiNavigationMenuCollapseIcon {
  transform: rotate(-45deg);
}
.cuiNavigationMenu--horizontal {
  width: 100%;
}
.cuiNavigationMenu--horizontal .cuiNavigationMenuList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  overflow: visible;
}
.cuiNavigationMenuNode {
  position: relative;
  min-width: 0;
}
.cuiNavigationMenuNode + .cuiNavigationMenuNode {
  margin-top: 2px;
}
.cuiNavigationMenuControl {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 42px;
  min-width: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 0 10px;
  color: inherit;
  font: inherit;
  font-weight: 620;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--cui-duration-fast) ease,
    color var(--cui-duration-fast) ease;
}
.cuiNavigationMenuControl:hover:not(.is-disabled),
.cuiNavigationMenuControl:focus-visible {
  outline: none;
  background: var(--cui-surface-hover);
  color: var(--cui-text);
}
.cuiNavigationMenuControl.is-active {
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
  font-weight: 650;
}
.cuiNavigationMenuControl.is-active:hover:not(.is-disabled),
.cuiNavigationMenuControl.is-active:focus-visible {
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
}
.cuiNavigationMenuControl.is-current-branch {
  color: var(--cui-primary);
}
.cuiNavigationMenuControl.is-disabled {
  color: var(--cui-text-muted);
  cursor: not-allowed;
}
.cuiNavigationMenuIcon {
  flex: 0 0 22px;
  width: 22px;
  display: inline-grid;
  place-items: center;
}
.cuiNavigationMenuLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiNavigationMenuBadge {
  flex: 0 0 auto;
  margin-left: auto;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  background: var(--cui-danger);
  padding: 0 5px;
  color: var(--cui-on-danger, #fff);
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}
.cuiNavigationMenuChevron {
  flex: 0 0 auto;
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--cui-duration-fast) ease;
}
.cuiNavigationMenuNode.is-open > .cuiNavigationMenuControl .cuiNavigationMenuChevron {
  transform: rotate(45deg);
}
.cuiNavigationMenuGroup + .cuiNavigationMenuGroup {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--cui-line);
}
.cuiNavigationMenuGroupLabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 30px;
  border: 0;
  background: transparent;
  padding: 0 8px;
  color: var(--cui-text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  text-align: left;
}
button.cuiNavigationMenuGroupLabel {
  cursor: pointer;
}
.cuiNavigationMenuGroupLabel:focus-visible {
  outline: 2px solid var(--cui-primary);
  outline-offset: -2px;
  border-radius: 5px;
}
.cuiNavigationMenuGroup.is-open > .cuiNavigationMenuGroupLabel .cuiNavigationMenuChevron {
  transform: rotate(45deg);
}
.cuiNavigationMenuGroupItems[hidden] {
  display: none;
}
.cuiNavigationSubmenu {
  display: grid;
  gap: 2px;
}
.cuiNavigationSubmenuHeader {
  display: none;
}
.cuiNavigationSubmenu[hidden] {
  display: none;
}
.cuiNavigationMenu--vertical:not(.is-collapsed) .cuiNavigationSubmenu {
  padding: 5px 0 8px 34px;
}
.cuiNavigationMenu--vertical:not(.is-collapsed) .cuiNavigationSubmenu .cuiNavigationMenuControl {
  height: 32px;
  padding-inline: 9px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 520;
}
.cuiNavigationMenu--horizontal .cuiNavigationMenuControl {
  width: auto;
  white-space: nowrap;
}
.cuiNavigationMenu--horizontal .cuiNavigationMenuNode + .cuiNavigationMenuNode {
  margin-top: 0;
}
.cuiNavigationMenu--horizontal
  > .cuiNavigationMenuList
  > .cuiNavigationMenuNode
  > .cuiNavigationMenuControl.is-active::after {
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--cui-primary);
  content: '';
}
.cuiNavigationMenu--horizontal .cuiNavigationSubmenu,
.cuiNavigationMenu--vertical.is-collapsed .cuiNavigationSubmenu {
  position: absolute;
  z-index: var(--cui-z-popover);
  top: calc(100% + 4px);
  left: 0;
  width: max-content;
  min-width: 190px;
  max-width: 280px;
  max-height: min(420px, calc(100vh - 24px));
  overflow: auto;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  padding: 6px;
  box-shadow: var(--cui-shadow-md);
}
.cuiNavigationMenuPopup {
  width: 230px;
  min-width: 230px;
  max-width: min(320px, calc(100vw - 16px));
  max-height: min(420px, calc(100vh - 24px));
  overflow: auto;
  border-color: var(--cui-line);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--cui-text) 14%, transparent);
}
.cuiNavigationMenuPopup .cuiNavigationSubmenu {
  position: static;
  display: grid;
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.cuiNavigationMenuPopup .cuiNavigationMenuControl {
  height: 36px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 560;
}
.cuiNavigationMenuPopup .cuiNavigationSubmenuHeader {
  display: grid;
  gap: 3px;
  margin: 0 2px 6px;
  padding: 8px 8px 10px;
  border-bottom: 1px solid var(--cui-line);
}
.cuiNavigationMenuPopup .cuiNavigationSubmenuHeader strong {
  color: var(--cui-text);
  font-size: 13px;
}
.cuiNavigationMenuPopup .cuiNavigationSubmenuHeader small {
  color: var(--cui-text-muted);
  font-size: 11px;
  line-height: 1.5;
}
.cuiNavigationMenu--vertical.is-collapsed .cuiNavigationSubmenu {
  top: 0;
  left: calc(100% + 4px);
}
.cuiNavigationMenu--vertical.is-collapsed .cuiNavigationMenuLabel,
.cuiNavigationMenu--vertical.is-collapsed .cuiNavigationMenuGroupLabel,
.cuiNavigationMenu--vertical.is-collapsed
  > .cuiNavigationMenuList
  > .cuiNavigationMenuNode
  > .cuiNavigationMenuControl
  > .cuiNavigationMenuBadge,
.cuiNavigationMenu--vertical.is-collapsed
  > .cuiNavigationMenuList
  > .cuiNavigationMenuGroup
  > .cuiNavigationMenuGroupItems
  > .cuiNavigationMenuNode
  > .cuiNavigationMenuControl
  > .cuiNavigationMenuBadge,
.cuiNavigationMenu--vertical.is-collapsed
  > .cuiNavigationMenuList
  > .cuiNavigationMenuNode
  > .cuiNavigationMenuControl
  > .cuiNavigationMenuChevron {
  display: none;
}
.cuiNavigationMenu--vertical.is-collapsed
  > .cuiNavigationMenuList
  > .cuiNavigationMenuGroup
  > .cuiNavigationMenuGroupItems
  > .cuiNavigationMenuNode
  > .cuiNavigationMenuControl
  > .cuiNavigationMenuChevron {
  display: none;
}
.cuiNavigationMenu--vertical.is-collapsed
  > .cuiNavigationMenuList
  > .cuiNavigationMenuNode
  > .cuiNavigationMenuControl {
  justify-content: center;
  padding-inline: 8px;
}
.cuiNavigationMenu--vertical.is-collapsed
  > .cuiNavigationMenuList
  > .cuiNavigationMenuGroup
  > .cuiNavigationMenuGroupItems
  > .cuiNavigationMenuNode
  > .cuiNavigationMenuControl {
  justify-content: center;
  padding-inline: 8px;
}
.cuiNavigationMenu--vertical.is-collapsed
  > .cuiNavigationMenuList
  > .cuiNavigationMenuGroup
  > .cuiNavigationMenuGroupItems
  > .cuiNavigationMenuNode
  > .cuiNavigationMenuControl.is-current-branch {
  background: var(--cui-primary-soft);
}
.cuiNavigationMenu--vertical.is-collapsed .cuiNavigationSubmenu .cuiNavigationMenuLabel {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .cuiNavigationMenuControl,
  .cuiNavigationMenuChevron,
  .cuiNavigationMenuCollapseIcon {
    transition: none;
  }
}

.cuiActionMenu {
  min-width: 172px;
}

.cuiActionMenu .cuiMenuItem {
  font-weight: 760;
}

.cuiActionMenuTrigger.cuiIconButton {
  width: 36px;
  height: 36px;
}

.cuiColumnVisibilityPopover {
  width: min(320px, calc(100vw - 24px));
  overflow: hidden;
}

.cuiColumnVisibilityPanel {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.cuiColumnVisibilityTitle {
  color: var(--cui-text);
  font-size: 14px;
  font-weight: 850;
}

.cuiColumnVisibilityList {
  display: grid;
  gap: 2px;
  max-height: min(360px, calc(100vh - 190px));
  overflow-y: auto;
}

.cuiColumnVisibilityList .cuiCheckboxLabel {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 10px;
  border-radius: var(--cui-radius-md);
  padding: 8px;
  color: var(--cui-text);
  font-weight: 760;
}

.cuiColumnVisibilityList .cuiCheckboxLabel:hover {
  background: var(--cui-surface-hover);
}

.cuiColumnVisibilityList .cuiCheckboxLabel:has(.cuiCheckbox:disabled) {
  color: var(--cui-text-muted);
  cursor: not-allowed;
}

.cuiColumnVisibilityItemLabel {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cuiColumnVisibilityItemLabel > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiColumnVisibilityItemLabel > em {
  flex: 0 0 auto;
  color: var(--cui-text-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.cuiColumnVisibilityActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ============================================================
   Spinner 加载指示
   ============================================================ */
.cuiSpinner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cui-primary);
}
.cuiSpinnerCircle {
  width: var(--cui-spinner-size, 18px);
  height: var(--cui-spinner-size, 18px);
  border: var(--cui-spinner-thickness, 2px) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cuiSpin 0.7s linear infinite;
}
.cuiSpinnerLabel {
  font-size: 13px;
  color: var(--cui-text-soft);
}
@keyframes cuiSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   Alert 提示 / 横幅
   ============================================================ */
.cuiAlert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--cui-alert-line, var(--cui-line));
  border-radius: var(--cui-radius-md);
  background: var(--cui-alert-bg, var(--cui-surface-subtle));
  color: var(--cui-text);
  padding: 12px 14px;
}
.cuiAlert--banner {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
.cuiAlert--info {
  --cui-alert-bg: color-mix(in srgb, var(--cui-info) 10%, var(--cui-surface));
  --cui-alert-line: color-mix(in srgb, var(--cui-info) 32%, var(--cui-line));
}
.cuiAlert--success {
  --cui-alert-bg: color-mix(in srgb, var(--cui-success) 10%, var(--cui-surface));
  --cui-alert-line: color-mix(in srgb, var(--cui-success) 32%, var(--cui-line));
}
.cuiAlert--warning {
  --cui-alert-bg: color-mix(in srgb, var(--cui-warning) 12%, var(--cui-surface));
  --cui-alert-line: color-mix(in srgb, var(--cui-warning) 34%, var(--cui-line));
}
.cuiAlert--danger {
  --cui-alert-bg: color-mix(in srgb, var(--cui-danger) 10%, var(--cui-surface));
  --cui-alert-line: color-mix(in srgb, var(--cui-danger) 32%, var(--cui-line));
}
.cuiAlertIcon {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 1px;
}
.cuiAlert--info .cuiAlertIcon {
  color: var(--cui-info);
}
.cuiAlert--success .cuiAlertIcon {
  color: var(--cui-success);
}
.cuiAlert--warning .cuiAlertIcon {
  color: var(--cui-warning);
}
.cuiAlert--danger .cuiAlertIcon {
  color: var(--cui-danger);
}
.cuiAlertMain {
  min-width: 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cuiAlertTitle {
  font-weight: 720;
  font-size: 14px;
}
.cuiAlertBody {
  font-size: 13px;
  color: var(--cui-text-soft);
}
.cuiAlertActions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.cuiAlertClose {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--cui-text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px;
  border-radius: var(--cui-radius-xs);
}
.cuiAlertClose:hover {
  background: var(--cui-surface-hover);
  color: var(--cui-text);
}

/* ============================================================
   Chip 独立标签/可选项
   ============================================================ */
.cuiChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-full);
  background: var(--cui-surface);
  color: var(--cui-text-soft);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 6px 12px;
  cursor: pointer;
  transition:
    background var(--cui-duration-fast) ease,
    border-color var(--cui-duration-fast) ease,
    color var(--cui-duration-fast) ease;
}
.cuiChip--sm {
  font-size: 12px;
  padding: 4px 10px;
}
.cuiChip:hover:not(:disabled) {
  border-color: var(--cui-control-line-strong);
  color: var(--cui-text);
}
.cuiChip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cuiChip--active {
  border-color: var(--cui-primary);
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
  font-weight: 640;
}
.cuiChipRemove {
  display: inline-flex;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
}
.cuiChipRemove:hover {
  opacity: 1;
}

/* ============================================================
   Breadcrumb 面包屑
   ============================================================ */
.cuiBreadcrumb {
  min-width: 0;
}
.cuiBreadcrumbList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.cuiBreadcrumbItem {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cuiBreadcrumbLink {
  color: var(--cui-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--cui-radius-xs);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiBreadcrumbLink:hover {
  color: var(--cui-primary);
}
.cuiBreadcrumbCurrent {
  color: var(--cui-text);
  font-weight: 640;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiBreadcrumbSep {
  color: var(--cui-text-muted);
  -webkit-user-select: none;
          user-select: none;
}

/* ============================================================
   Slider 滑块 / 范围滑块
   ============================================================ */
.cuiSlider {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}
.cuiSliderRow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cuiSliderInput {
  flex: 1 1;
  appearance: none;
  height: 6px;
  border-radius: var(--cui-radius-full);
  background: linear-gradient(
    to right,
    var(--cui-primary) 0%,
    var(--cui-primary) var(--cui-slider-pct, 50%),
    var(--cui-surface-hover) var(--cui-slider-pct, 50%),
    var(--cui-surface-hover) 100%
  );
  outline: none;
  cursor: pointer;
}
.cuiSliderInput:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cuiSliderInput::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--cui-primary);
  box-shadow: var(--cui-shadow-xs);
  cursor: pointer;
}
.cuiSliderInput::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--cui-primary);
  cursor: pointer;
}
.cuiSliderValue {
  flex: 0 0 auto;
  min-width: 2.5em;
  text-align: right;
  font-size: 13px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--cui-text-soft);
}
.cuiRangeSlider {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}
.cuiRangeSliderTrack {
  position: relative;
  height: 16px;
  display: flex;
  align-items: center;
}
.cuiRangeSliderTrack .cuiSliderInput {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
}
.cuiRangeSliderTrack .cuiSliderInput::-webkit-slider-thumb {
  pointer-events: auto;
}
.cuiRangeSliderTrack .cuiSliderInput::-moz-range-thumb {
  pointer-events: auto;
}
.cuiRangeSliderRail {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: var(--cui-radius-full);
  background: var(--cui-surface-hover);
}
.cuiRangeSliderFill {
  position: absolute;
  height: 6px;
  border-radius: var(--cui-radius-full);
  background: var(--cui-primary);
  left: var(--cui-range-from, 0%);
  right: calc(100% - var(--cui-range-to, 100%));
}
.cuiRangeSliderValues {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--cui-text-soft);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Accordion 折叠面板
   ============================================================ */
.cuiAccordion {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  overflow: hidden;
}
.cuiAccordionItem + .cuiAccordionItem {
  border-top: 1px solid var(--cui-line);
}
.cuiAccordionTrigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 14px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 640;
  color: var(--cui-text);
  text-align: left;
  cursor: pointer;
}
.cuiAccordionTrigger:hover:not(:disabled) {
  background: var(--cui-surface-hover);
}
.cuiAccordionTrigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cuiAccordionTriggerLabel {
  flex: 1 1;
  min-width: 0;
}
.cuiAccordionChevron {
  flex: 0 0 auto;
  color: var(--cui-text-muted);
  transition: transform var(--cui-duration-base) ease;
}
.cuiAccordionItem--open .cuiAccordionChevron {
  transform: rotate(90deg);
}
.cuiAccordionContent {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--cui-duration-base) ease;
}
.cuiAccordionItem--open .cuiAccordionContent {
  grid-template-rows: 1fr;
}
.cuiAccordionContentInner {
  overflow: hidden;
  min-height: 0;
  padding: 2px 16px 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cui-text-soft);
}

/* ============================================================
   AspectRatio 固定宽高比
   ============================================================ */
.cuiAspectRatio {
  width: 100%;
  overflow: hidden;
}
.cuiAspectRatio > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   NumberInput 数字步进输入
   ============================================================ */
.cuiNumberInput {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: var(--cui-control-md);
  border: 1px solid var(--cui-control-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-control-bg);
  overflow: hidden;
}
.cuiNumberInput:focus-within {
  border-color: var(--cui-input-focus-border);
  box-shadow: 0 0 0 2px var(--cui-focus);
}
.cuiNumberInput--disabled {
  opacity: 0.6;
}
.cuiNumberInputField {
  min-width: 0;
  width: 100%;
  flex: 1 1;
  border: 0;
  background: transparent;
  color: var(--cui-text);
  font: inherit;
  text-align: center;
  padding: 0 4px;
  outline: none;
  -moz-appearance: textfield;
}
.cuiNumberInputField::-webkit-outer-spin-button,
.cuiNumberInputField::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cuiNumberInputBtn {
  flex: 0 0 auto;
  width: 32px;
  align-self: stretch;
  border: 0;
  background: var(--cui-surface-subtle);
  color: var(--cui-text-soft);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--cui-duration-fast) ease;
}
.cuiNumberInputBtn:hover:not(:disabled) {
  background: var(--cui-surface-hover);
  color: var(--cui-text);
}
.cuiNumberInputBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cuiNumberInputAffix {
  flex: 0 0 auto;
  padding: 0 6px;
  color: var(--cui-text-muted);
  font-size: 12px;
}

.cuiNumberRangeInput {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  height: var(--cui-control-md);
  border: 1px solid var(--cui-control-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-control-bg);
  color: var(--cui-text);
  overflow: hidden;
}

.cuiNumberRangeInput:focus-within {
  border-color: var(--cui-input-focus-border);
  box-shadow: 0 0 0 2px var(--cui-focus);
}

.cuiNumberRangeInput--invalid {
  border-color: var(--cui-range-invalid);
}
.cuiNumberRangeInput--invalid:focus-within {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cui-range-invalid) 16%, var(--cui-surface));
}
.cuiNumberRangeInput--disabled {
  opacity: 0.6;
}

.cuiNumberRangeInputField {
  width: 0;
  min-width: 0;
  flex: 1 1;
  height: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  outline: none;
  padding: 0 var(--cui-space-2);
  -moz-appearance: textfield;
}

.cuiNumberRangeInputField::-webkit-outer-spin-button,
.cuiNumberRangeInputField::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cuiNumberRangeInputSeparator,
.cuiNumberRangeInputAffix {
  flex: 0 0 auto;
  color: var(--cui-text-muted);
  font-size: 12px;
}

.cuiNumberRangeInputSeparator {
  padding: 0 2px;
}
.cuiNumberRangeInputAffix {
  padding: 0 var(--cui-space-2);
}

/* Preset ranges keep common choices and custom bounds in one compact control. */
.cuiPresetRangeSelect {
  display: inline-flex;
  width: 100%;
  min-width: 0;
}

.cuiPresetRangeTrigger.cuiButton {
  width: 100%;
  min-width: 0;
  justify-content: space-between;
  border-color: var(--cui-control-line);
  background: var(--cui-control-bg);
  box-shadow: var(--cui-shadow-xs);
  color: var(--cui-text);
  text-align: left;
}

.cuiPresetRangeTriggerValue {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiPresetRangeTriggerPlaceholder {
  color: var(--cui-input-placeholder);
  font-weight: 500;
}

.cuiPresetRangeTrigger .cuiButtonIcon:last-child {
  margin-left: auto;
  transition: transform var(--cui-duration-fast) ease;
}

.cuiPresetRangeSelect--open .cuiPresetRangeTrigger .cuiButtonIcon:last-child {
  transform: rotate(180deg);
}

.cuiPresetRangePopover {
  min-width: 244px;
  overflow: hidden;
}

.cuiPresetRangeMenu {
  display: grid;
  min-width: 0;
}

.cuiPresetRangeOptions {
  display: grid;
  gap: 2px;
  max-height: 236px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  scrollbar-gutter: stable;
}

.cuiPresetRangeOption {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--cui-radius-sm);
  background: transparent;
  color: var(--cui-text-soft);
  cursor: pointer;
  font: inherit;
  padding: 7px 9px;
  text-align: left;
}

.cuiPresetRangeOption:hover:not(:disabled) {
  background: color-mix(in srgb, var(--cui-primary) 6%, var(--cui-surface-hover));
}

.cuiPresetRangeOption:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--cui-focus);
}

.cuiPresetRangeOption:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

.cuiPresetRangeOption--selected {
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
}

.cuiPresetRangeOptionCheck {
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  color: var(--cui-primary);
}

.cuiPresetRangeOptionMain {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cuiPresetRangeOptionLabel,
.cuiPresetRangeOptionDescription {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiPresetRangeOptionLabel {
  color: inherit;
  font-size: 13px;
  font-weight: 650;
}

.cuiPresetRangeOptionDescription {
  color: var(--cui-text-muted);
  font-size: 11px;
  font-weight: 500;
}

.cuiPresetRangeCustom {
  border-top: 1px solid var(--cui-section-line);
  padding: 6px;
}

.cuiPresetRangeCustomToggle {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: var(--cui-radius-sm);
  background: transparent;
  color: var(--cui-text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 9px;
  text-align: left;
}

.cuiPresetRangeCustomLabel {
  min-height: 36px;
  display: flex;
  align-items: center;
  color: var(--cui-text);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 9px;
}

.cuiPresetRangeCustomLabel--active {
  color: var(--cui-primary);
}

.cuiPresetRangeCustomToggle:hover,
.cuiPresetRangeCustomToggle--active {
  background: var(--cui-surface-hover);
  color: var(--cui-primary);
}

.cuiPresetRangeCustomToggle .cuiCompassIcon {
  transition: transform var(--cui-duration-fast) ease;
}

.cuiPresetRangeCustomToggle[aria-expanded='true'] .cuiCompassIcon {
  transform: rotate(180deg);
}

.cuiPresetRangeCustomBody {
  display: grid;
  gap: 10px;
  padding: 6px 9px 8px;
}

.cuiPresetRangeCustomBody > .cuiNumberRangeInput {
  width: 100%;
}

.cuiPresetRangeActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cuiCategoryFilter {
  min-width: 0;
}

.cuiTree,
.cuiTree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cuiTree {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.cuiTree ul {
  display: grid;
  gap: 2px;
}
.cuiTreeNodeRow {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  border-radius: var(--cui-radius-sm);
}
.cuiTreeNodeRow:hover {
  background: var(--cui-surface-hover);
}
.cuiTreeNode--selected > .cuiTreeNodeRow {
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
}
.cuiTreeNodeExpand,
.cuiTreeNodeSpacer {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.cuiTreeNodeExpand {
  border: 0;
  border-radius: var(--cui-radius-sm);
  background: transparent;
  color: var(--cui-text-muted);
  cursor: pointer;
  font: inherit;
}
.cuiTreeNodeExpand:hover {
  background: var(--cui-surface-hover);
  color: var(--cui-text);
}
.cuiTreeNodeContent {
  display: inline-flex;
  min-width: 0;
  flex: 1 1;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 4px;
}
.cuiTreeNodeContent > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiTreeNodeIcon {
  display: inline-flex;
  flex: 0 0 auto;
}
.cuiTreeNode--disabled {
  opacity: 0.56;
}
.cuiTreeNodeExpand:focus-visible,
.cuiTreeNodeContent:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cui-focus);
}

/* ============================================================
   Timeline 时间轴
   ============================================================ */
.cuiTimeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cuiTimelineItem {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 18px;
}
.cuiTimelineItem::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 20px;
  bottom: 0;
  width: 1px;
  background: var(--cui-line);
}
.cuiTimelineItem:last-child {
  padding-bottom: 0;
}
.cuiTimelineItem:last-child::before {
  display: none;
}
.cuiTimelineDot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--cui-primary);
  background: var(--cui-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--cui-primary);
}
.cuiTimelineDot--success {
  border-color: var(--cui-success);
  color: var(--cui-success);
}
.cuiTimelineDot--warning {
  border-color: var(--cui-warning);
  color: var(--cui-warning);
}
.cuiTimelineDot--danger {
  border-color: var(--cui-danger);
  color: var(--cui-danger);
}
.cuiTimelineDot--info {
  border-color: var(--cui-info);
  color: var(--cui-info);
}
.cuiTimelineBody {
  min-width: 0;
  flex: 1 1;
  padding-top: 1px;
}
.cuiTimelineHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.cuiTimelineTitle {
  font-size: 14px;
  font-weight: 640;
  color: var(--cui-text);
}
.cuiTimelineTime {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--cui-text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.cuiTimelineDesc {
  margin-top: 2px;
  font-size: 13px;
  color: var(--cui-text-soft);
}

/* ============================================================
   Donut 环形/占比图
   ============================================================ */
.cuiDonut {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cuiDonut--stack {
  flex-direction: column;
  align-items: flex-start;
}
.cuiDonutChart {
  position: relative;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 10px rgba(20, 28, 38, 0.06));
}
.cuiDonutCenter {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
}
.cuiDonutCenter strong {
  font-size: 20px;
  font-weight: 780;
  color: var(--cui-text);
}
.cuiDonutCenter span {
  font-size: 12px;
  color: var(--cui-text-muted);
}
.cuiDonutLegend {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.cuiDonutLegendItem {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  border-bottom: 1px solid var(--cui-line-soft);
  padding: 5px 0 7px;
}

@media (max-width: 680px) {
  .cuiDescriptions--cols-2,
  .cuiDescriptions--cols-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .cuiDonut:not(.cuiDonut--stack) {
    flex-direction: column;
    align-items: flex-start;
  }

  .cuiDonutLegend {
    width: 100%;
  }
}
.cuiDonutLegendDot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: var(--cui-radius-full);
  background: var(--cui-donut-dot, var(--cui-primary));
}
.cuiDonutLegendLabel {
  flex: 1 1;
  min-width: 0;
  color: var(--cui-text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiDonutLegendValue {
  flex: 0 0 auto;
  font-weight: 640;
  color: var(--cui-text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Combobox 可搜索单选
   ============================================================ */
.cuiCombobox {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 200px;
  height: var(--cui-control-md);
  border: 1px solid var(--cui-control-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-control-bg);
  padding: 0 8px 0 10px;
}
.cuiCombobox--open,
.cuiCombobox:focus-within {
  border-color: var(--cui-input-focus-border);
  box-shadow: 0 0 0 2px var(--cui-focus);
}
.cuiCombobox--disabled {
  opacity: 0.6;
}
.cuiComboboxInput {
  min-width: 0;
  flex: 1 1;
  border: 0;
  background: transparent;
  color: var(--cui-text);
  font: inherit;
  outline: none;
}
.cuiComboboxInput::placeholder {
  color: var(--cui-input-placeholder);
}
.cuiComboboxClear,
.cuiComboboxChevron {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--cui-text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
}
.cuiComboboxMenu {
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.cuiComboboxOption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  border: 0;
  border-radius: var(--cui-radius-sm);
  background: transparent;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--cui-text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.cuiComboboxOptionLabel,
.cuiComboboxOptionDesc {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiComboboxOption--active {
  background: var(--cui-surface-hover);
}
.cuiComboboxOption--selected {
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
  font-weight: 600;
}
.cuiComboboxOption--selected.cuiComboboxOption--active {
  background: var(--cui-primary-soft);
}
.cuiComboboxOption:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cuiComboboxOptionDesc {
  font-size: 12px;
  color: var(--cui-text-muted);
}
.cuiComboboxEmpty {
  padding: 12px;
  text-align: center;
  color: var(--cui-text-muted);
  font-size: 13px;
}

/* ============================================================
   MultiSelect 多选
   ============================================================ */
.cuiMultiSelect {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 220px;
  min-height: var(--cui-control-md);
  border: 1px solid var(--cui-control-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-control-bg);
  padding: 3px 8px 3px 6px;
  cursor: text;
}
.cuiMultiSelect--open,
.cuiMultiSelect:focus-within {
  border-color: var(--cui-input-focus-border);
  box-shadow: 0 0 0 2px var(--cui-focus);
}
.cuiMultiSelect--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.cuiMultiSelectControl {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.cuiMultiSelectPlaceholder {
  color: var(--cui-input-placeholder);
  padding-left: 4px;
}
.cuiMultiSelectTag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--cui-radius-sm);
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  max-width: 100%;
  min-width: 0;
}
.cuiMultiSelectTagLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiMultiSelectTag--more {
  background: var(--cui-surface-hover);
  color: var(--cui-text-soft);
}
.cuiMultiSelectTagRemove {
  cursor: pointer;
  opacity: 0.7;
  font-size: 13px;
}
.cuiMultiSelectTagRemove:hover {
  opacity: 1;
}
.cuiMultiSelectInput {
  flex: 1 1;
  min-width: 60px;
  border: 0;
  background: transparent;
  color: var(--cui-text);
  font: inherit;
  outline: none;
}
.cuiMultiSelectInput::placeholder {
  color: var(--cui-input-placeholder);
}
.cuiMultiSelectChevron {
  flex: 0 0 auto;
  color: var(--cui-text-muted);
  font-size: 12px;
}
.cuiMultiSelectMenu {
  z-index: var(--cui-z-dropdown);
  min-width: 180px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.cuiDateRangePicker {
  width: min(100%, 360px);
}
.cuiMultiSelectOption {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: var(--cui-radius-sm);
  background: transparent;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--cui-text);
  text-align: left;
  cursor: pointer;
}
.cuiMultiSelectOption:hover:not(:disabled) {
  background: var(--cui-surface-hover);
}
.cuiMultiSelectOption--active:not(:disabled) {
  background: var(--cui-surface-hover);
}
.cuiMultiSelectOptionLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiMultiSelectOption--selected {
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
  font-weight: 600;
}
.cuiMultiSelectOption--selected:hover:not(:disabled),
.cuiMultiSelectOption--selected.cuiMultiSelectOption--active:not(:disabled) {
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
}
.cuiMultiSelectSelectAll {
  position: sticky;
  z-index: 1;
  top: 0;
  border-bottom: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-sm) var(--cui-radius-sm) 0 0;
  background: var(--cui-surface);
  font-weight: 780;
}
.cuiMultiSelectOption:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cuiMultiSelectCheck {
  flex: 0 0 auto;
  width: 14px;
  color: var(--cui-primary);
}
.cuiMultiSelectEmpty {
  padding: 12px;
  text-align: center;
  color: var(--cui-text-muted);
  font-size: 13px;
}

/* ============================================================
   Cascader / Transfer
   ============================================================ */
.cuiCascader {
  position: relative;
  display: inline-flex;
  min-width: 180px;
  max-width: 100%;
}

/* Embedded category filters use the same three-column interaction as the product UI. */
.cuiCascaderPanel {
  display: grid;
  min-width: 0;
  width: 100%;
  gap: 8px;
}
.cuiCascaderPanelBreadcrumb {
  min-height: 30px;
  overflow: hidden;
  border-radius: var(--cui-radius-xs);
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiCascaderPanelBreadcrumb--empty {
  color: var(--cui-text-muted);
  font-weight: 500;
}
.cuiCascaderPanelColumns {
  display: grid;
  min-width: 0;
  height: 258px;
  grid-template-columns: repeat(var(--cui-cascader-panel-column-count, 3), minmax(0, 1fr));
  overflow: hidden;
  background: var(--cui-surface-subtle);
}
.cuiCascaderPanelColumns[data-column-count='1'] {
  --cui-cascader-panel-column-count: 1;
}
.cuiCascaderPanelColumns[data-column-count='2'] {
  --cui-cascader-panel-column-count: 2;
}
.cuiCascaderPanelColumns[data-column-count='3'] {
  --cui-cascader-panel-column-count: 3;
}
.cuiCascaderPanelColumn {
  display: grid;
  min-width: 0;
  grid-template-rows: 32px minmax(0, 1fr);
  overflow: hidden;
}
.cuiCascaderPanelColumn + .cuiCascaderPanelColumn {
  border-left: 1px solid var(--cui-line);
}
.cuiCascaderPanelColumnTitle {
  display: flex;
  align-items: center;
  padding: 0 9px;
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 650;
}
.cuiCascaderPanelOptionList {
  min-height: 0;
  padding: 3px 5px 7px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
.cuiCascaderPanelOption {
  display: flex;
  width: 100%;
  min-height: 34px;
  margin-bottom: 2px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: var(--cui-radius-xs);
  background: transparent;
  color: var(--cui-text-soft);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  padding: 7px 8px;
  text-align: left;
}
.cuiCascaderPanelOption:hover:not(:disabled),
.cuiCascaderPanelOption:focus-visible,
.cuiCascaderPanelOption--active {
  outline: none;
  background: var(--cui-surface-hover);
  color: var(--cui-text);
}
.cuiCascaderPanelOption--selected {
  background: var(--cui-primary);
  color: #fff;
}
.cuiCascaderPanelOption--selected:hover:not(:disabled),
.cuiCascaderPanelOption--selected.cuiCascaderPanelOption--active {
  background: var(--cui-primary);
  color: #fff;
}
.cuiCascaderPanelOption:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}
.cuiCascaderPanelOptionArrow {
  flex: 0 0 auto;
  color: currentColor;
  font-size: 17px;
  line-height: 1;
}
.cuiCascaderPanelEmpty {
  display: block;
  padding: 9px 8px;
  color: var(--cui-text-muted);
  font-size: 12px;
}
.cuiCascaderPanel--disabled {
  opacity: 0.6;
  pointer-events: none;
}
.cuiCascaderTrigger {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  min-height: var(--cui-control-md);
  align-items: center;
  gap: var(--cui-space-2);
  border: 1px solid var(--cui-control-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-control-bg);
  color: var(--cui-text);
  cursor: pointer;
  font: inherit;
  padding: 0 var(--cui-space-3);
  text-align: left;
}
.cuiCascaderTrigger:hover,
.cuiCascader--open .cuiCascaderTrigger {
  border-color: var(--cui-input-focus-border);
}
.cuiCascaderTrigger:focus-visible,
.cuiCascaderSearch:focus-visible,
.cuiTransferSearch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--cui-focus);
}
.cuiCascader--disabled {
  opacity: 0.58;
}
.cuiCascaderValue {
  min-width: 0;
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiCascaderPlaceholder {
  color: var(--cui-input-placeholder);
}
.cuiCascaderSearch::placeholder,
.cuiTransferSearch::placeholder {
  color: var(--cui-input-placeholder);
}
.cuiCascaderChevron {
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-top: 5px solid var(--cui-text-muted);
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  transition: transform 140ms ease;
}
.cuiCascader--open .cuiCascaderChevron {
  transform: rotate(180deg);
}
.cuiCascaderClear {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: var(--cui-space-3);
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--cui-radius-full);
  background: var(--cui-surface-hover);
  color: var(--cui-text-muted);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 0;
  transform: translateY(-50%);
}
.cuiCascaderClear:hover {
  color: var(--cui-text);
}
.cuiCascader:has(.cuiCascaderClear) .cuiCascaderTrigger {
  padding-right: 40px;
}
.cuiCascaderMenu {
  z-index: var(--cui-z-dropdown);
  overflow: hidden;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-md);
}
.cuiCascaderSearch {
  width: calc(100% - var(--cui-space-4));
  height: 32px;
  margin: var(--cui-space-2);
  border: 1px solid var(--cui-control-line);
  border-radius: var(--cui-radius-sm);
  background: var(--cui-control-bg);
  color: var(--cui-text);
  font: inherit;
  font-size: 13px;
  padding: 0 var(--cui-space-2);
}
.cuiCascaderColumns {
  display: flex;
  min-height: 192px;
  max-height: 272px;
  overflow: auto;
}
.cuiCascaderColumn {
  width: min(220px, 70vw);
  min-width: 160px;
  overflow: auto;
  border-right: 1px solid var(--cui-line);
  padding: var(--cui-space-1);
}
.cuiCascaderColumn:last-child {
  border-right: 0;
}
.cuiCascaderSearchResults {
  max-height: 272px;
  overflow: auto;
  padding: var(--cui-space-1);
}
.cuiCascaderOption {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: var(--cui-space-2);
  overflow: hidden;
  border: 0;
  border-radius: var(--cui-radius-sm);
  background: transparent;
  color: var(--cui-text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 0 var(--cui-space-2);
  text-align: left;
}
.cuiCascaderOption > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiCascaderOption:hover,
.cuiCascaderOption--active {
  background: var(--cui-surface-hover);
}
.cuiCascaderOption--selected {
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
  font-weight: 720;
}
.cuiCascaderOption:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}
.cuiCascaderOptionArrow {
  flex: 0 0 auto;
  color: var(--cui-text-muted);
}
.cuiCascaderEmpty {
  padding: var(--cui-space-5);
  color: var(--cui-text-muted);
  font-size: 13px;
  text-align: center;
}

.cuiCascaderCategoryBar {
  display: flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: var(--cui-space-1);
  overflow-x: auto;
  scrollbar-width: thin;
}
.cuiCascaderCategoryBar--disabled {
  opacity: 0.58;
}
.cuiCascaderCategoryNode {
  flex: 0 0 auto;
}
.cuiCascaderCategoryTrigger {
  display: inline-flex;
  min-height: 36px;
  max-width: 220px;
  align-items: center;
  gap: var(--cui-space-2);
  border: 0;
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  color: var(--cui-text);
  cursor: pointer;
  font: inherit;
  padding: 0 var(--cui-space-3);
  white-space: nowrap;
}
.cuiCascaderCategoryTrigger > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.cuiCascaderCategoryTrigger:hover {
  background: var(--cui-surface-hover);
}
.cuiCascaderCategoryTrigger--selected,
.cuiCascaderCategoryTrigger--selected:hover {
  background: var(--cui-primary);
  color: var(--cui-on-primary);
  font-weight: 700;
}
.cuiCascaderCategoryTrigger:focus-visible,
.cuiCascaderCategoryOption:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--cui-focus);
}
.cuiCascaderCategoryTrigger:disabled,
.cuiCascaderCategoryOption:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}
.cuiCascaderCategoryChevron {
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.cuiCascaderCategoryMenu {
  z-index: var(--cui-z-dropdown);
  max-width: calc(100vw - 16px);
  overflow: auto;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-md);
}
.cuiCascaderCategoryColumns {
  display: flex;
  max-width: 100%;
  overflow-x: auto;
}
.cuiCascaderCategoryColumn {
  width: min(236px, calc(100vw - 32px));
  flex: 0 0 min(236px, calc(100vw - 32px));
  overflow-y: auto;
  border-right: 1px solid var(--cui-line);
  padding: var(--cui-space-1);
  scrollbar-width: thin;
}
.cuiCascaderCategoryColumn:last-child {
  border-right: 0;
}
.cuiCascaderCategoryColumns {
  display: flex;
  min-height: 180px;
  max-height: min(320px, calc(100vh - 24px));
}
.cuiCascaderCategoryColumn {
  width: min(208px, calc(100vw - 24px));
  min-width: 176px;
  overflow-y: auto;
  border-right: 1px solid var(--cui-line);
  padding-right: var(--cui-space-1);
}
.cuiCascaderCategoryColumn + .cuiCascaderCategoryColumn {
  padding-left: var(--cui-space-1);
}
.cuiCascaderCategoryColumn:last-child {
  border-right: 0;
  padding-right: 0;
}
.cuiCascaderCategoryOption {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: var(--cui-space-2);
  overflow: hidden;
  border: 0;
  border-radius: var(--cui-radius-sm);
  background: transparent;
  color: var(--cui-text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: var(--cui-space-2) var(--cui-space-3);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiCascaderCategoryOption > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cuiCascaderCategoryOption:hover,
.cuiCascaderCategoryOption--active {
  background: var(--cui-surface-hover);
}
.cuiCascaderCategoryOptionArrow {
  flex: 0 0 auto;
  color: var(--cui-text-muted);
}
.cuiCascaderCategoryOption--selected,
.cuiCascaderCategoryOption--selected:hover {
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
  font-weight: 700;
}
.cuiCascaderCategoryOptionArrow {
  flex: 0 0 auto;
  color: var(--cui-text-muted);
}

.cuiTransfer {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--cui-space-3);
}
.cuiTransferPanel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cui-line);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
}
.cuiTransferPanelHeader {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  gap: var(--cui-space-2);
  border-bottom: 1px solid var(--cui-line);
  background: var(--cui-surface-subtle);
  padding: 0 var(--cui-space-3);
}
.cuiTransferPanelHeader strong {
  min-width: 0;
  flex: 1 1;
  overflow: hidden;
  color: var(--cui-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiTransferPanelHeader > span {
  color: var(--cui-text-muted);
  font-size: 12px;
}
.cuiTransferSearch {
  width: calc(100% - var(--cui-space-4));
  height: 32px;
  margin: var(--cui-space-2);
  border: 1px solid var(--cui-control-line);
  border-radius: var(--cui-radius-sm);
  background: var(--cui-control-bg);
  color: var(--cui-text);
  font: inherit;
  font-size: 13px;
  padding: 0 var(--cui-space-2);
}
.cuiTransferList {
  height: 228px;
  overflow: auto;
  padding: var(--cui-space-1);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.cuiTransferItem {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--cui-space-2);
  border-radius: var(--cui-radius-sm);
  cursor: pointer;
  padding: var(--cui-space-2);
}
.cuiTransferItem:hover {
  background: var(--cui-surface-hover);
}
.cuiTransferItem--disabled {
  cursor: not-allowed;
  opacity: 0.54;
}
.cuiTransferItemCopy {
  display: grid;
  min-width: 0;
  gap: 2px;
  color: var(--cui-text);
  font-size: 13px;
}
.cuiTransferItemCopy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiTransferItemCopy small {
  overflow: hidden;
  color: var(--cui-text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuiTransferEmpty {
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--cui-text-muted);
  font-size: 13px;
}
.cuiTransferOperations {
  display: grid;
  gap: var(--cui-space-2);
}
.cuiTransfer--disabled {
  opacity: 0.62;
}

@media (max-width: 680px) {
  .cuiTransfer {
    grid-template-columns: minmax(0, 1fr);
  }
  .cuiTransferOperations {
    display: flex;
    justify-content: center;
    order: 1;
  }
  .cuiTransferPanel:first-child {
    order: 0;
  }
  .cuiTransferPanel:last-child {
    order: 2;
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../../../.cache/compass/frontend-runtime/web-Linux-x86_64-node127/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/.pnpm/@compass+web-ui@file+..+..+packages+web-ui_@compass+ui@file+..+..+packages+ui_react-dom_2a02095ff5a5023a602f5931eafb610c/node_modules/@compass/web-ui/src/styles.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.cwebCommerceResourcePage {
  width: 100%;
  min-width: 0;
}

.cwebCommerceResourcePage > .cuiResourceHeader {
  align-items: flex-end;
  border-bottom: 1px solid var(--cui-section-line);
  padding-bottom: var(--cui-space-4);
}

.cwebCommerceResourcePage > .cuiResourceHeader .cuiResourceTitle {
  position: relative;
  padding-left: var(--cui-space-3);
}

.cwebCommerceResourcePage > .cuiResourceHeader .cuiResourceTitle::before {
  position: absolute;
  top: 0.16em;
  bottom: 0.16em;
  left: 0;
  width: 2px;
  border-radius: var(--cui-radius-full);
  background: var(--cui-page-title-marker);
  content: '';
}

.cwebCommerceFilterPanel {
  --cui-search-filter-line: var(--cui-control-line);
  min-width: 0;
}

.cwebCommerceFilterRows {
  display: grid;
  min-width: 0;
}

.cwebCommerceSearchBox {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto auto;
  gap: var(--cui-space-2);
  width: 100%;
}

.cwebCommerceSearchBoxWithScope {
  grid-template-columns: minmax(140px, 180px) minmax(260px, 1fr) auto auto;
}

.cwebCommerceFilterChecks,
.cwebCommerceInlineControls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cui-space-4);
}

.cwebCommerceInlineControls > .cuiDropdownSelect {
  min-width: 190px;
}

.cwebCommerceFilterControlGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--cui-space-3);
  width: 100%;
}

.cwebCommerceFilterControlGrid > label {
  display: grid;
  gap: var(--cui-space-2);
  min-width: 0;
}

.cwebCommerceFilterControlGrid > label > span:first-child {
  color: var(--cui-text-muted);
  font-size: 13px;
}

.cwebCommerceFilterFooter {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--cui-space-2);
  padding-top: var(--cui-space-3);
}

.cwebMetricStrip {
  gap: 0;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid var(--cui-section-line);
  border-bottom: 1px solid var(--cui-section-line);
  background: var(--cui-metric-strip-bg);
  box-shadow: var(--cui-shadow-xs);
}

.cwebMetricStrip > .cuiMetricCard {
  min-height: 88px;
  border: 0;
  border-right: 1px solid var(--cui-section-line);
  border-radius: 0;
  background: var(--cui-metric-strip-bg);
  box-shadow: none;
  padding: var(--cui-space-4) var(--cui-space-5);
}

.cwebMetricStrip > .cuiMetricCard:last-child {
  border-right: 0;
}

.cwebMetricStrip .cuiMetricCardValue {
  font-size: 24px;
}

.cwebMetricStrip .cuiMetricCardIcon {
  width: 26px;
  height: 26px;
  border: 0;
  background: var(--cui-surface-subtle);
}

.cwebCommerceResourceTable {
  width: 100%;
  min-width: 0;
}

.cwebSearchListFilters,
.cwebSearchListResult {
  width: 100%;
  min-width: 0;
}

.cwebSearchListPageSide {
  gap: 14px;
}

.cwebSearchListWorkspace {
  --cweb-search-list-side-filter-width: 382px;
  --cui-list-page-sticky-top: 72px;
  --cui-list-page-side-filter-height: calc(100dvh - var(--cui-list-page-sticky-top));
}

.cwebSearchListFilterToggle.cuiButton {
  width: 44px;
  min-width: 44px;
  height: 100px;
  padding: 10px 0;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--cui-primary) 72%, var(--cui-surface));
  border-radius: 14px;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--cui-primary) 20%, transparent);
}

.cwebSearchListFilterToggle .cuiButtonIcon {
  flex: 0 0 auto;
  order: -1;
}

.cwebSearchListFilterToggle .cuiButtonIcon + span {
  display: block;
  width: 1em;
  font-size: 10px;
  font-weight: 760;
  line-height: 1.25;
  white-space: normal;
}

.cwebSearchListMain {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 14px;
}

.cwebSearchListRestricted {
  min-height: 420px;
}

.cwebSearchListRestricted .cuiLoginRequiredPreview {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.cwebSearchListMainSearch {
  --cui-search-filter-label-width: 108px;
  border-bottom: 1px solid var(--cui-section-line);
  padding-bottom: var(--cui-space-3);
}

.cwebSearchListMainSearch .cuiSearchFilterBox {
  width: min(780px, 100%);
}

.cwebSearchListMainSearch .cuiSearchFilterSelectedBar {
  min-height: 42px;
  padding: 7px 0;
}

.cwebSearchListMainSearch .cuiSearchFilterSelectedLabel {
  font-size: 10px;
  font-weight: 760;
}

.cwebSearchListMainSearch .cuiSearchFilterSelectedItems {
  gap: 6px;
}

.cwebSearchListMainSearch .cuiSearchFilterSelectedTag {
  min-height: 27px;
  gap: 5px;
  padding: 0 5px 0 9px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 700;
}

.cwebSearchListMainSearch .cuiSearchFilterSelectedAction .cuiButton {
  min-height: 27px;
  margin-left: auto;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: color-mix(in srgb, var(--cui-danger) 7%, transparent);
  color: var(--cui-danger);
  font-size: 9.5px;
}

.cwebSearchListSideFilters {
  height: 100%;
}

@media (min-width: 1101px) {
  .cwebSearchListWorkspace.cuiListPageLayoutSideOverlay
    > .cuiListPageLayoutSideFilters {
    position: sticky;
    top: var(--cui-list-page-sticky-top, 0);
    height: var(
      --cui-list-page-side-filter-height,
      calc(100dvh - var(--cui-list-page-sticky-top, 0px))
    );
    max-height: calc(100dvh - var(--cui-list-page-sticky-top, 0px));
    min-height: 0;
    align-self: start;
  }

  .cwebSearchListWorkspace.cuiListPageLayoutSideOverlay
    > .cuiListPageLayoutSideFilters
    > .cuiListPageLayoutSideFilterViewport {
    position: static;
    height: 100%;
    max-height: none;
  }
}

.cwebSearchListSideFilters .cuiSearchFilterHeader {
  min-height: 72px;
  align-items: center;
  padding: 12px 18px;
}

.cwebSearchListSideFilters .cuiSearchFilterTitle {
  font-size: 14px;
}

.cwebSearchListSideFilters .cuiSearchFilterDescription {
  font-size: 9.5px;
  font-weight: 560;
}

.cwebSearchListSideFilters .cuiSearchFilterRow {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 14px 0;
}

.cwebSearchListSideFilters .cuiSearchFilterRow > * {
  grid-column: 1;
}

.cwebSearchListSideFilters .cuiSearchFilterLabel {
  width: auto;
  min-width: 0;
  min-height: 0;
  color: var(--cui-text);
  font-size: 10.5px;
  font-weight: 790;
}

.cwebSearchListSideFilters .cwebSearchListSectionBody--grid {
  grid-template-columns: 1fr;
}

.cwebSearchListSideFilters .cwebSearchListSectionBody--inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 12px;
}

.cwebSearchListSideFilters
  .cwebSearchListSectionBody--inline:has(> .cwebSearchListField:nth-child(2)) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}

.cwebSearchListSideFilters .cwebSearchListSectionBody--inline > .cwebSearchListField,
.cwebSearchListSideFilters .cwebSearchListSectionBody--inline > .cwebSearchListFieldWithLabel {
  min-width: 0;
}

.cwebSearchListSideFilters .cwebSearchListSectionBody--inline .cuiSwitchLabel {
  min-height: var(--cui-control-md);
  align-items: center;
}

.cwebSearchListSideFilters .cwebSearchListChecks {
  gap: 6px;
}

.cwebSearchListSideFilters .cuiSearchFilterChip {
  min-height: 29px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  background: color-mix(in srgb, var(--cui-text) 3.5%, transparent);
  color: var(--cui-text-muted);
  font-size: 10px;
}

.cwebSearchListSideFilters .cuiSearchFilterChipActive,
.cwebSearchListSideFilters .cuiSearchFilterChipActive:not(:disabled):hover {
  border: 0;
  background: var(--cui-primary);
  color: var(--cui-button-primary-text);
}

.cwebSearchListResult.cuiDataList {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.cwebSearchListResult.cuiDataList > .cuiDataListHeader {
  min-height: 58px;
  padding: var(--cui-space-2) 0 var(--cui-space-3);
}

.cwebSearchListResult .cuiDataListDescription {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 560;
}

.cwebSearchListResult .cuiDataListHeaderActions .cuiButtonSecondary {
  height: 30px;
  min-height: 30px;
  border: 0;
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
  box-shadow: none;
}

.cwebSearchListResult.cuiDataList > .cuiDataListToolbar,
.cwebSearchListResult.cuiDataList > .cuiDataListFooter {
  padding-right: 0;
  padding-left: 0;
}

.cwebSearchListResult .cuiDataListTableHeadCell {
  min-height: 42px;
  overflow: visible;
  color: var(--cui-text-muted);
  font-size: 10px;
  font-weight: 800;
  padding: 0 7px;
  white-space: nowrap;
}

.cwebSearchListResult .cuiDataListSortableHead > span {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.cwebSearchListResult .cuiDataListSortableHead.active > span:first-child {
  color: var(--cui-primary);
}

.cwebSearchListResult .cuiDataListTableRow:not(.cuiDataListTableHead) {
  min-height: 88px;
  background: transparent;
}

.cwebSearchListResult .cuiDataListTableCell {
  min-height: 88px;
  padding: 11px 7px;
  color: var(--cui-text);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.cwebSearchListCardGrid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}

.cwebSearchListCardGrid .cuiDataListItem {
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'media main'
    'actions actions';
  align-items: start;
  border: 1px solid var(--cui-section-line);
  border-radius: var(--cui-radius-md);
  padding: 14px;
}

.cwebSearchListCardGrid .cuiDataListItemMedia {
  grid-area: media;
}

.cwebSearchListCardGrid .cuiDataListItemMain {
  grid-area: main;
}

.cwebSearchListCardGrid .cuiDataListItemHeader {
  display: grid;
  gap: 6px;
}

.cwebSearchListCardGrid .cuiDataListItemMeta {
  min-width: 0;
  white-space: normal;
}

.cwebSearchListCardGrid .cuiDataListItemActions {
  grid-area: actions;
  justify-content: flex-end;
}

.cwebSearchListResultCount {
  color: var(--cui-text-muted);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

.cwebWorkspaceFrame {
  display: grid;
  min-width: 0;
  min-height: 100%;
  grid-template-columns: 224px minmax(0, 1fr);
  background: var(--cui-bg);
  color: var(--cui-text);
}

.cwebWorkspaceFrame--collapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}

.cwebWorkspaceSidebar {
  position: sticky;
  z-index: var(--cui-z-sticky);
  top: 0;
  display: grid;
  height: 100dvh;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-right: 1px solid var(--cui-section-line);
  background: var(--cui-surface);
}

.cwebWorkspaceBrand {
  display: flex;
  min-width: 0;
  min-height: 56px;
  align-items: center;
  border-bottom: 1px solid var(--cui-section-line);
  padding: 0 var(--cui-space-4);
}

.cwebWorkspaceNavigation {
  min-height: 0;
  overflow: auto;
  padding: var(--cui-space-3) var(--cui-space-2);
}

.cwebWorkspaceNavigation > .cuiNavigationMenu--vertical {
  width: 100%;
}

.cwebWorkspaceSidebarFooter {
  min-width: 0;
  border-top: 1px solid var(--cui-section-line);
  padding: var(--cui-space-3) var(--cui-space-4);
}

.cwebWorkspaceStage {
  display: grid;
  min-width: 0;
  min-height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr);
}

.cwebWorkspaceTopbar {
  position: sticky;
  z-index: var(--cui-z-sticky);
  top: 0;
  display: flex;
  min-width: 0;
  min-height: 56px;
  align-items: center;
  border-bottom: 1px solid var(--cui-section-line);
  background: var(--cui-surface);
  padding: 0 var(--cui-space-5);
}

.cwebWorkspaceContent {
  min-width: 0;
  padding: var(--cui-space-6);
}

.cwebWorkspaceScrim {
  display: none;
}

.cwebWorkspacePageContext,
.cwebWorkspacePageToolbar,
.cwebWorkspacePageBody,
.cwebWorkspacePagePrimary,
.cwebWorkspacePageAside,
.cwebWorkspacePageSecondary,
.cwebWorkspacePageFooter {
  min-width: 0;
}

.cwebWorkspacePageContext {
  border-top: 1px solid var(--cui-section-line);
  border-bottom: 1px solid var(--cui-section-line);
  background: var(--cui-surface);
  padding: var(--cui-space-4) var(--cui-space-5);
}

.cwebWorkspacePageToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--cui-space-3);
}

.cwebWorkspacePageBody {
  display: grid;
  gap: var(--cui-space-4);
}

.cwebWorkspacePageBody--withAside {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.3fr);
}

.cwebWorkspacePage--operations .cwebWorkspacePageBody--withAside,
.cwebWorkspacePage--detail .cwebWorkspacePageBody--withAside {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.36fr);
}

.cwebWorkspacePagePrimary,
.cwebWorkspacePageAside,
.cwebWorkspacePageSecondary {
  background: var(--cui-surface);
}

.cwebWorkspacePageAside {
  border-left: 1px solid var(--cui-section-line);
  padding-left: var(--cui-space-4);
}

.cwebWorkspacePageSecondary,
.cwebWorkspacePageFooter {
  border-top: 1px solid var(--cui-section-line);
  padding-top: var(--cui-space-4);
}

.cwebSearchListSearchBox {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  width: min(780px, 100%);
  min-height: 58px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--cui-primary) 24%, var(--cui-section-line));
  border-radius: 7px;
  background: var(--cui-surface);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--cui-text) 5.5%, transparent);
}

.cwebSearchListSearchCluster {
  display: grid;
  width: min(780px, 100%);
  min-width: 0;
  gap: 0;
}

.cwebSearchListSearchBox > .cuiInput,
.cwebSearchListSearchBox > .cuiInputAffix {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 56px;
}

.cwebSearchListSearchBoxWithScope > .cuiDropdownSelect {
  flex: 0 0 150px;
  width: 150px;
  min-width: 150px;
  height: 56px;
  border-right: 1px solid var(--cui-section-line);
}

.cwebSearchListSearchBoxWithScope > .cuiDropdownSelect .cuiDropdownSelectTrigger {
  height: 56px;
  min-height: 56px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 18px;
}

.cwebSearchListSearchBoxWithScope > .cuiDropdownSelect .cuiDropdownSelectValue {
  font-size: 13px;
  font-weight: 800;
}

.cwebSearchListSearchBox input {
  padding: 0 18px;
  font-size: 12px;
  font-weight: 580;
}

.cwebSearchListSearchBox > .cuiButton {
  flex: 0 0 112px;
  width: 112px;
  height: 56px;
  align-self: stretch;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.cwebSearchListSearchMeta {
  display: flex;
  min-height: 28px;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--cui-text-muted);
  font-size: 10px;
  font-weight: 600;
}

.cwebSearchListSearchMeta strong {
  color: var(--cui-primary);
}

.cwebSearchListFilterRows {
  display: grid;
  min-width: 0;
}

.cwebSearchListSectionBody {
  min-width: 0;
}

.cwebSearchListSectionBody--inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cui-space-3);
}

.cwebSearchListSectionBody--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--cui-space-3);
}

.cwebSearchListSectionBody--stack {
  display: grid;
  gap: var(--cui-space-3);
}

.cwebSearchListField {
  min-width: 0;
}

.cwebSearchListSectionBody--inline > .cwebSearchListFieldWithLabel {
  flex: 1 1 190px;
}

.cwebSearchListFieldWithLabel {
  display: grid;
  gap: var(--cui-space-2);
}

.cwebSearchListFieldLabel {
  color: var(--cui-text-muted);
  font-size: 13px;
}

.cwebSearchListChecks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cui-space-4);
}

.cwebSearchListChecks--boxed {
  gap: 8px;
}

.cwebSearchListCheckOption {
  min-height: 29px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--cui-surface-subtle);
  transition:
    border-color 150ms ease,
    background 150ms ease;
}

.cwebSearchListCheckOption.cuiCheckboxLabel {
  gap: 7px;
  font-size: 10px;
  font-weight: 650;
}

.cwebSearchListCheckOption:hover {
  border-color: var(--cui-control-line);
  background: var(--cui-surface-hover);
}

.cwebSearchListCheckOption:has(.cuiCheckbox:checked) {
  border-color: color-mix(in srgb, var(--cui-primary) 28%, var(--cui-control-line));
  background: var(--cui-primary-soft);
}

.cwebSearchListFilterActions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--cui-space-2);
  padding-top: var(--cui-space-3);
}

.cwebResourceActions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cui-space-2);
}

.cwebResourceIdentity {
  display: flex;
  align-items: center;
  gap: var(--cui-space-2);
  min-width: 0;
}

.cwebResourceIdentityCopy {
  display: grid;
  gap: var(--cui-space-1);
  min-width: 0;
}

.cwebResourceIdentityCopy > strong,
.cwebResourceIdentityCopy > em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwebResourceIdentityCopy > strong {
  display: flex;
  align-items: center;
  gap: var(--cui-space-2);
  color: var(--cui-text);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.cwebResourceIdentityTitle {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwebResourceIdentityCopy > em,
.cwebResourceMuted {
  color: var(--cui-text-muted);
  font-size: 10px;
  font-weight: 500;
  font-style: normal;
}

/* Shared user-facing detail template. Business modules provide data and content only. */
.cwebDetailPage {
  --cweb-detail-sticky-top: 64px;

  display: grid;
  width: 100%;
  min-width: 0;
  align-content: start;
  gap: 18px;
  color: var(--cui-text);
}

.cwebDetailBreadcrumb {
  min-width: 0;
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.cwebDetailBreadcrumb :where(a) {
  color: inherit;
  text-decoration: none;
}

.cwebDetailBreadcrumb :where(a:hover) {
  color: var(--cui-primary);
}

.cwebDetailPageHeader {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'spacer actions'
    'main main';
  align-items: start;
  gap: 12px 24px;
  border-bottom: 1px solid var(--cui-section-line);
  padding-bottom: 20px;
}

.cwebDetailPageHeaderMain {
  grid-area: main;
}

.cwebDetailPageHeader:not(:has(> .cwebDetailPageActions)) {
  grid-template-areas: 'main';
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.cwebDetailPageHeaderMain,
.cwebDetailEntityCopy,
.cwebDetailMain,
.cwebDetailAside {
  min-width: 0;
}

.cwebDetailPageActions,
.cwebDetailSectionActions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.cwebDetailPageActions {
  grid-area: actions;
}

.cwebDetailEntityHeader {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 16px;
}

.cwebDetailEntityMedia {
  display: grid;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--cui-section-line);
  border-radius: 8px;
  background: var(--cui-surface-subtle);
}

.cwebDetailEntityMedia > :where(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cwebDetailEntityCopy {
  display: grid;
  gap: 7px;
}

.cwebDetailEntityEyebrow,
.cwebDetailSectionEyebrow {
  color: var(--cui-primary);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
}

.cwebDetailEntityTitleRow {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.cwebDetailEntityTitleRow h1 {
  min-width: 0;
  margin: 0;
  color: var(--cui-text);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.cwebDetailEntityBadges,
.cwebDetailEntityFacts,
.cwebDetailEntityMeta {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
}

.cwebDetailEntityBadges {
  gap: 6px;
}

.cwebDetailEntityFacts,
.cwebDetailEntityMeta {
  gap: 6px 16px;
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 580;
  line-height: 1.5;
}

.cwebDetailEntityFacts > * + * {
  position: relative;
}

.cwebDetailEntityFacts > * + *::before {
  position: absolute;
  top: 50%;
  left: -9px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cui-text-muted);
  content: '';
  opacity: 0.55;
  transform: translateY(-50%);
}

.cwebDetailEntityDescription {
  max-width: 760px;
  margin: 0;
  color: var(--cui-text-soft);
  font-size: 13px;
  font-weight: 520;
  line-height: 1.65;
}

.cwebDetailSummary,
.cwebDetailMetrics,
.cwebDetailNavigationFrame,
.cwebDetailBody {
  min-width: 0;
}

.cwebDetailRestrictedState > .cuiLoginRequiredPreview {
  padding: 20px;
}

/* Let the sticky navigation use the detail page as its containing block. */
.cwebDetailNavigationFrame {
  display: contents;
}

.cwebDetailMetricGrid.cuiMetricGrid {
  gap: 10px;
}

.cwebDetailMetricGrid > .cuiMetricCard {
  min-height: 126px;
  border-color: var(--cui-section-line);
  border-radius: 8px;
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-xs);
  padding: 16px;
}

.cwebDetailMetricGrid > .cuiMetricCard:hover {
  border-color: color-mix(in srgb, var(--cui-primary) 24%, var(--cui-section-line));
  background: color-mix(in srgb, var(--cui-primary) 1.5%, var(--cui-surface));
}

.cwebDetailMetricGrid .cuiMetricCardIcon {
  border: 0;
}

.cwebDetailSectionNavSticky {
  position: sticky;
  z-index: var(--cui-z-sticky);
  top: var(--cweb-detail-sticky-top);
}

.cwebDetailSectionNav {
  min-width: 0;
  border: 1px solid var(--cui-line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cui-surface) 97%, transparent);
  box-shadow: var(--cui-shadow-sm);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.cwebDetailSectionNavContextual {
  display: grid;
  grid-template-columns: minmax(150px, 0.5fr) minmax(0, 1fr) auto;
  align-items: center;
}

.cwebDetailSectionNavContext,
.cwebDetailSectionNavActions {
  min-width: 0;
  padding: 5px;
}

.cwebDetailSectionNavContext {
  border-right: 1px solid var(--cui-section-line);
}

.cwebDetailSectionNavActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  border-left: 1px solid var(--cui-section-line);
}

.cwebDetailCompactIdentity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.cwebDetailCompactIdentityMedia {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: var(--cui-surface-subtle);
  color: var(--cui-primary);
}

.cwebDetailCompactIdentityMedia > :where(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cwebDetailCompactIdentityCopy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.cwebDetailCompactIdentityCopy strong,
.cwebDetailCompactIdentityCopy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwebDetailCompactIdentityCopy strong {
  color: var(--cui-text);
  font-size: 11px;
  font-weight: 760;
}

.cwebDetailCompactIdentityCopy small {
  color: var(--cui-text-muted);
  font-size: 9px;
  font-weight: 560;
}

.cwebDetailSectionNavTrack {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  padding: 5px;
  scrollbar-width: thin;
}

.cwebDetailSectionNavFit .cwebDetailSectionNavTrack {
  overflow-x: hidden;
}

.cwebDetailSectionNavFit .cwebDetailSectionNavItem {
  min-width: 0;
  flex: 1 1;
  padding-inline: clamp(5px, 0.8vw, 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwebDetailSectionNavItem {
  position: relative;
  min-width: max-content;
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cui-text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 620;
  line-height: 1;
  padding: 0 14px;
  text-decoration: none;
  transition:
    background 150ms ease,
    color 150ms ease;
}

a.cwebDetailSectionNavItem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cwebDetailSectionNavItem:hover:not(:disabled) {
  background: var(--cui-surface-hover);
  color: var(--cui-text);
}

.cwebDetailSectionNavItem.isActive {
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
}

.cwebDetailSectionNavItem.isActive::after {
  position: absolute;
  right: 12px;
  bottom: 1px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--cui-primary);
  content: '';
}

.cwebDetailBody {
  display: grid;
  align-items: start;
  gap: 24px;
}

.cwebDetailBodyWithAside {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}

.cwebDetailMain {
  display: grid;
  align-content: start;
  gap: 28px;
}

.cwebDetailAside {
  position: sticky;
  top: calc(var(--cweb-detail-sticky-top) + 58px);
  display: grid;
  align-content: start;
  gap: 16px;
}

.cwebDetailSection {
  min-width: 0;
  scroll-margin-top: calc(var(--cweb-detail-sticky-top) + 64px);
}

.cwebDetailSectionPanel {
  border: 1px solid var(--cui-line-soft);
  border-radius: 8px;
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-xs);
}

.cwebDetailSectionPanel > .cwebDetailSectionHeader {
  padding: 18px 20px;
}

.cwebDetailSectionPanel > .cwebDetailSectionBody {
  border-top: 1px solid var(--cui-section-line);
  padding: 20px;
}

.cwebDetailSectionHeader {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.cwebDetailSectionPanel > .cwebDetailSectionHeader {
  margin-bottom: 0;
}

.cwebDetailSectionHeading {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.cwebDetailSectionHeading h2 {
  margin: 0;
  color: var(--cui-text);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: 0;
  line-height: 1.4;
}

.cwebDetailSectionHeading p {
  max-width: 760px;
  margin: 0;
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 520;
  line-height: 1.6;
}

.cwebDetailSectionBody {
  min-width: 0;
}

.cwebDetailAnalysisPanel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cui-line-soft);
  border-radius: 8px;
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-xs);
}

.cwebDetailAnalysisPanel > .cwebDetailSectionHeader {
  min-height: 68px;
  align-items: center;
  margin: 0;
  padding: 14px 18px;
}

.cwebDetailAnalysisControls {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid var(--cui-section-line);
  background: var(--cui-surface-sunken);
  padding: 10px 18px;
}

.cwebDetailAnalysisSelector,
.cwebDetailAnalysisSummary {
  min-width: 0;
  border-top: 1px solid var(--cui-section-line);
  padding: 12px 18px;
}

.cwebDetailAnalysisBody {
  min-width: 0;
  min-height: 280px;
  border-top: 1px solid var(--cui-section-line);
  padding: 18px;
}

.cwebDetailAnalysisBody > .cuiState {
  min-height: 244px;
  border: 0;
  background: transparent;
}

.cwebDetailMetricSelector {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.cwebDetailMetricSelectorItem {
  --cweb-metric-color: var(--cui-primary);

  position: relative;
  display: grid;
  min-width: 0;
  min-height: 72px;
  align-content: center;
  gap: 3px;
  border: 1px solid var(--cui-line-soft);
  border-radius: 7px;
  background: var(--cui-surface);
  color: var(--cui-text);
  font: inherit;
  padding: 10px 12px;
  text-align: left;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.cwebDetailMetricSelectorItem:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--cweb-metric-color) 32%, var(--cui-section-line));
}

.cwebDetailMetricSelectorItem.isActive {
  border-color: color-mix(in srgb, var(--cweb-metric-color) 44%, var(--cui-section-line));
  background: var(--cui-surface-raised);
  box-shadow:
    inset 0 2px 0 var(--cweb-metric-color),
    var(--cui-shadow-xs);
}

.cwebDetailMetricSelectorLabel {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: var(--cui-text-muted);
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwebDetailMetricSelectorLabel i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border: 2px solid var(--cweb-metric-color);
  border-radius: 50%;
  background: transparent;
}

.cwebDetailMetricSelectorItem.isActive .cwebDetailMetricSelectorLabel i {
  background: var(--cweb-metric-color);
}

.cwebDetailMetricSelectorItem strong {
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 780;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwebDetailMetricSelectorItem small {
  color: var(--cui-text-muted);
  font-size: 10px;
  font-weight: 560;
}

.cwebDetailPageState {
  display: grid;
  min-height: 420px;
  place-items: center;
}

.cwebDetailPageState > .cuiState {
  width: min(100%, 620px);
}

.cwebDetailSkeleton {
  display: grid;
  min-width: 0;
  gap: 20px;
}

.cwebDetailSkeletonHeader {
  display: grid;
  min-width: 0;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--cui-section-line);
  padding-bottom: 20px;
}

.cwebDetailSkeletonMedia {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: var(--cui-surface-subtle);
}

@media (max-width: 1100px) {
  .cwebDetailMetricGrid.cuiMetricGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cwebDetailBodyWithAside {
    grid-template-columns: minmax(0, 1fr);
  }

  .cwebDetailAside {
    position: static;
    grid-row: auto;
  }
}

@media (max-width: 720px) {
  .cwebDetailPage {
    --cweb-detail-sticky-top: 56px;

    gap: 16px;
  }

  .cwebDetailRestrictedState > .cuiLoginRequiredPreview {
    padding: 14px;
  }

  .cwebDetailPageHeader {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'main'
      'actions';
    gap: 14px;
    padding-bottom: 16px;
  }

  .cwebDetailPageActions {
    justify-content: flex-start;
  }

  .cwebDetailPageActions > * {
    flex: 1 1 auto;
  }

  .cwebDetailEntityHeader {
    gap: 12px;
  }

  .cwebDetailEntityMedia {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }

  .cwebDetailEntityTitleRow h1 {
    font-size: 20px;
  }

  .cwebDetailMetricGrid.cuiMetricGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cwebDetailMetricGrid > .cuiMetricCard {
    min-height: 108px;
  }

  .cwebDetailSectionNav {
    margin-right: -4px;
    margin-left: -4px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .cwebDetailSectionNavContextual {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cwebDetailSectionNavContext {
    display: none;
  }

  .cwebDetailSectionNavContextual .cwebDetailSectionNavTrack {
    grid-column: 1;
    grid-row: 1;
  }

  .cwebDetailSectionNavActions {
    grid-column: 2;
    grid-row: 1;
  }

  .cwebDetailSectionHeader,
  .cwebDetailAnalysisPanel > .cwebDetailSectionHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .cwebDetailSectionActions {
    width: 100%;
    justify-content: flex-start;
  }

  .cwebDetailSectionPanel > .cwebDetailSectionHeader,
  .cwebDetailSectionPanel > .cwebDetailSectionBody,
  .cwebDetailAnalysisPanel > .cwebDetailSectionHeader,
  .cwebDetailAnalysisControls,
  .cwebDetailAnalysisSelector,
  .cwebDetailAnalysisSummary,
  .cwebDetailAnalysisBody {
    padding-right: 14px;
    padding-left: 14px;
  }

  .cwebDetailMetricSelector {
    display: flex;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .cwebDetailMetricSelectorItem {
    min-width: 138px;
  }
}

/* Detail capabilities: shared visual language for product, media, creator and shop recipes. */
.cwebDetailEntityRating,
.cwebDetailEntityHighlight,
.cwebDetailEntityDetails,
.cwebDetailEntityFooter {
  min-width: 0;
}

.cwebDetailEntityRating {
  margin-top: 2px;
}

.cwebDetailEntityHighlight {
  color: var(--cui-primary);
  font-size: 30px;
  font-weight: 820;
  line-height: 1.15;
}

.cwebDetailEntityHighlight s {
  color: var(--cui-text-muted);
  font-size: 13px;
  font-weight: 700;
}

.cwebDetailEntityDetails {
  margin-top: 2px;
}

.cwebDetailEntityFooter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}

.cwebDetailSectionNavContextPending {
  grid-template-columns: minmax(0, 1fr) auto;
}

.cwebDetailSectionNavContextPending .cwebDetailSectionNavTrack {
  grid-column: 1;
}

.cwebDetailSectionNav.isDocked {
  border-color: color-mix(in srgb, var(--cui-primary) 18%, var(--cui-section-line));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--cui-text) 7%, transparent);
}

.cwebDetailHero {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  overflow: hidden;
  border: 1px solid var(--cui-line-soft);
  border-radius: var(--cui-radius-lg);
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-xs);
}

.cwebDetailHero--withAside {
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.12fr) minmax(0, 0.58fr);
}

.cwebDetailHero--media.cwebDetailHero--withAside {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.12fr) minmax(0, 0.55fr);
}

.cwebDetailHero--profile.cwebDetailHero--withAside {
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.28fr) minmax(0, 0.62fr);
}

.cwebDetailHeroFeatured {
  min-height: 380px;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
}

.cwebDetailHeroFeatured > .cwebDetailHeroMedia {
  height: clamp(380px, 42vw, 520px);
  min-height: 0;
  padding: 0;
}

.cwebDetailHeroFeatured.cwebDetailHero--profile > .cwebDetailHeroMedia > img {
  object-position: center 20%;
}

.cwebDetailHeroMedia,
.cwebDetailHeroMain,
.cwebDetailHeroAside {
  min-width: 0;
}

.cwebDetailHeroMedia {
  overflow: hidden;
  padding: 18px;
  background: var(--cui-surface-sunken);
}

.cwebDetailHeroMedia > :where(img, picture, video),
.cwebDetailHeroMedia > picture > img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cwebDetailHeroMain {
  display: grid;
  align-content: center;
  padding: 24px 26px;
}

.cwebDetailHeroAside {
  border-left: 1px solid var(--cui-section-line);
  background: var(--cui-surface-subtle);
}

.cwebDetailHeroAside > .cwebDetailRatingSummary {
  padding: 22px;
}

.cwebDetailHeroFooter {
  min-width: 0;
  grid-column: 1 / -1;
  border-top: 1px solid var(--cui-section-line);
  padding: 12px 18px;
  background: var(--cui-surface-subtle);
}

.cwebDetailHero .cwebDetailEntityHeader {
  align-items: flex-start;
}

.cwebDetailHero .cwebDetailEntityMedia {
  width: 60px;
  height: 60px;
  flex-basis: 60px;
  border-radius: var(--cui-radius-full);
}

.cwebDetailHero .cwebDetailEntityTitleRow h1 {
  max-width: 820px;
  font-size: 27px;
  line-height: 1.2;
}

.cwebDetailMediaGallery {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 10px;
}

.cwebDetailMediaGallery.isEmpty {
  min-height: 320px;
  place-items: center;
  align-content: center;
  color: var(--cui-text-muted);
  border: 1px dashed var(--cui-control-line-strong);
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface-subtle);
}

.cwebDetailMediaStage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface);
}

.cwebDetailMediaStage.hasMagnifier,
.cwebDetailMediaMain.isMagnifier {
  overflow: visible;
}

.cwebDetailMediaMain.isMagnifier {
  cursor: default;
}

.cwebDetailMediaMain.isMagnifier > .cuiImageMagnifier {
  height: 100%;
  border-radius: var(--cui-radius-md);
}

.cwebDetailMediaMain {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: var(--cweb-detail-media-ratio);
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 0;
  padding: 0;
  background: var(--cui-surface);
  color: var(--cui-text);
  cursor: zoom-in;
}

div.cwebDetailMediaMain {
  cursor: default;
}

.cwebDetailMediaMain > img,
.cwebDetailMediaMain > video,
.cwebDetailMediaMain > picture,
.cwebDetailMediaMain > picture > img {
  width: 100%;
  height: 100%;
  display: block;
}

.cwebDetailMediaMain.is-cover > :where(img, video, picture),
.cwebDetailMediaMain.is-cover > picture > img {
  object-fit: cover;
}

.cwebDetailMediaMain.is-contain > :where(img, video, picture),
.cwebDetailMediaMain.is-contain > picture > img {
  object-fit: contain;
}

.cwebDetailMediaMain:focus-visible {
  outline: 2px solid var(--cui-primary);
  outline-offset: -2px;
}

.cwebDetailMediaBadge,
.cwebDetailMediaExpand,
.cwebDetailMediaOverlay,
.cwebDetailMediaPlay {
  position: absolute;
  z-index: 2;
}

.cwebDetailMediaBadge {
  top: 12px;
  left: 12px;
}

.cwebDetailMediaExpand {
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--cui-text) 14%, transparent);
  border-radius: var(--cui-radius-sm);
  padding: 0 9px;
  background: color-mix(in srgb, var(--cui-surface) 90%, transparent);
  color: var(--cui-text);
  box-shadow: var(--cui-shadow-sm);
  font-size: 12px;
  font-weight: 680;
}

.cwebDetailMediaOverlay {
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 36px 14px 14px;
  color: var(--cui-button-primary-text);
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--cui-overlay-bg) 86%, transparent)
  );
  font-size: 12px;
  font-weight: 700;
}

.cwebDetailMediaPlay {
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--cui-button-primary-text) 58%, transparent);
  border-radius: var(--cui-radius-full);
  background: color-mix(in srgb, var(--cui-overlay-bg) 70%, transparent);
  color: var(--cui-button-primary-text);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--cui-overlay-bg) 28%, transparent);
}

.cwebDetailMediaArrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: var(--cui-shadow-md);
}

.cwebDetailMediaArrow--previous {
  left: 12px;
}

.cwebDetailMediaArrow--next {
  right: 12px;
}

.cwebDetailMediaThumbs {
  display: flex;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  padding: 1px;
  scrollbar-width: thin;
}

.cwebDetailMediaThumbs > button {
  position: relative;
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  overflow: hidden;
  border: 1px solid var(--cui-control-line);
  border-radius: var(--cui-radius-sm);
  padding: 3px;
  background: var(--cui-surface);
  color: var(--cui-text-muted);
  cursor: pointer;
}

.cwebDetailMediaThumbs > button:hover {
  border-color: var(--cui-control-line-strong);
}

.cwebDetailMediaThumbs > button[aria-pressed='true'] {
  border-color: var(--cui-primary);
  box-shadow: 0 0 0 2px var(--cui-primary-soft);
}

.cwebDetailMediaThumbs img,
.cwebDetailMediaThumbs button > span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: calc(var(--cui-radius-sm) - 2px);
  object-fit: cover;
}

.cwebDetailMediaThumbs em {
  position: absolute;
  right: 4px;
  bottom: 4px;
  border-radius: var(--cui-radius-xs);
  padding: 2px 4px;
  background: color-mix(in srgb, var(--cui-overlay-bg) 88%, transparent);
  color: var(--cui-button-primary-text);
  font-size: 9px;
  font-style: normal;
  font-weight: 720;
}

.cwebDetailMediaDialog.cuiDialogContent {
  width: min(1120px, calc(100vw - 32px));
}

.cwebDetailMediaDialogBody {
  display: grid;
  min-height: 0;
  gap: 12px;
}

.cwebDetailMediaPreview {
  width: 100%;
  height: min(70vh, 760px);
  display: grid;
  overflow: hidden;
  place-items: center;
  border-radius: var(--cui-radius-md);
  background: var(--cui-surface-subtle);
}

.cwebDetailMediaPreview > :where(img, video, picture) {
  width: 100%;
  height: 100%;
}

.cwebDetailMediaPreview.is-contain > :where(img, video, picture) {
  object-fit: contain;
}

.cwebDetailMediaPreview.is-cover > :where(img, video, picture) {
  object-fit: cover;
}

.cwebDetailMediaPreviewActions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.cwebDetailRatingSummary {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 10px;
}

.cwebDetailRatingLabel {
  color: var(--cui-text-muted);
  font-size: 12px;
  font-weight: 680;
}

.cwebDetailRatingScore {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cwebDetailRatingScore > strong {
  color: var(--cui-text);
  font-size: 28px;
  line-height: 1;
}

.cwebDetailRatingScore > strong small {
  color: var(--cui-text-muted);
  font-size: 13px;
  font-weight: 620;
}

.cwebDetailRatingCount {
  color: var(--cui-text-muted);
  font-size: 12px;
}

.cwebDetailRatingMetrics {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 6px 0 0;
  border-top: 1px solid var(--cui-section-line);
}

.cwebDetailRatingMetrics > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  border-bottom: 1px solid var(--cui-section-line);
  padding: 12px 8px 12px 0;
}

.cwebDetailRatingMetrics > div:nth-child(odd) {
  border-right: 1px solid var(--cui-section-line);
}

.cwebDetailRatingMetrics > div:nth-child(even) {
  padding-left: 14px;
}

.cwebDetailRatingMetrics dt,
.cwebDetailRatingMetrics dd {
  margin: 0;
}

.cwebDetailRatingMetrics dt {
  color: var(--cui-text-muted);
  font-size: 11px;
}

.cwebDetailRatingMetrics dd {
  color: var(--cui-text);
  font-size: 16px;
  font-weight: 780;
}

.cwebDetailInfoGrid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(var(--cweb-detail-info-columns), minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.cwebDetailInfoGrid > div {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'label' 'value';
  align-content: center;
  align-items: center;
  gap: 5px;
  border-radius: var(--cui-radius-sm);
  background: color-mix(in srgb, var(--cui-primary) 2.5%, var(--cui-surface-subtle));
  padding: 13px 15px;
}

.cwebDetailInfoGridHasIcons > div {
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-areas:
    'icon label'
    'icon value';
  gap: 2px 10px;
}

.cwebDetailInfoGrid > div > span {
  grid-area: icon;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--cui-radius-full);
  background: var(--cui-primary-soft);
  color: var(--cui-primary);
}

.cwebDetailInfoGrid dt,
.cwebDetailInfoGrid dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.cwebDetailInfoGrid dt {
  grid-area: label;
  color: var(--cui-text-muted);
  font-size: 11px;
  font-weight: 620;
}

.cwebDetailInfoGrid dd {
  grid-area: value;
  color: var(--cui-text);
  font-size: 16px;
  font-weight: 740;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.cwebDetailRelationCard {
  min-width: 0;
  height: 100%;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px;
  color: var(--cui-text);
}

.cwebDetailRelationCard > header {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cwebDetailRelationCard > header > div:last-child {
  min-width: 0;
}

.cwebDetailRelationCard > header span,
.cwebDetailRelationCard > header p,
.cwebDetailRelationCard > header h2 {
  margin: 0;
}

.cwebDetailRelationCard > header span,
.cwebDetailRelationCard > header p {
  color: var(--cui-text-muted);
  font-size: 11px;
}

.cwebDetailRelationCard > header h2 {
  overflow: hidden;
  font-size: 17px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwebDetailRelationMedia {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--cui-section-line);
  border-radius: var(--cui-radius-full);
  background: var(--cui-surface);
  color: var(--cui-primary);
}

.cwebDetailRelationMedia > :where(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cwebDetailRelationCard.is-profile .cwebDetailRelationMedia {
  width: 132px;
  height: 132px;
  flex-basis: 132px;
  border-width: 3px;
  box-shadow:
    0 0 0 4px var(--cui-surface),
    0 0 0 5px var(--cui-section-line);
}

.cwebDetailRelationCard.is-profile > header {
  align-items: flex-start;
  flex-direction: column;
}

.cwebDetailRelationCard.is-profile > header h2 {
  margin-top: 4px;
  font-size: 22px;
}

.cwebDetailRelationBadges,
.cwebDetailRelationCard > footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cwebDetailRelationDescription {
  margin: 0;
  color: var(--cui-text-soft);
  font-size: 12px;
  line-height: 1.7;
}

.cwebDetailRelationMetrics {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--cui-section-line);
}

.cwebDetailRelationMetrics > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 12px 0;
}

.cwebDetailRelationMetrics dt,
.cwebDetailRelationMetrics dd {
  margin: 0;
}

.cwebDetailRelationMetrics dt {
  color: var(--cui-text-muted);
  font-size: 10px;
}

.cwebDetailRelationMetrics dd {
  color: var(--cui-text);
  font-size: 15px;
  font-weight: 760;
}

.cwebDetailRelationCard > footer {
  align-self: end;
  margin-top: auto;
  padding-top: 4px;
}

.cwebDetailResourceIdentity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cwebDetailResourceIdentityMedia {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--cui-section-line);
  border-radius: var(--cui-radius-sm);
  background: var(--cui-surface-subtle);
  color: var(--cui-primary);
}

.cwebDetailResourceIdentityMedia > :where(img, video, picture),
.cwebDetailResourceIdentityMedia > picture > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cwebDetailResourceIdentity.is-product .cwebDetailResourceIdentityMedia {
  width: 76px;
  height: 76px;
  flex-basis: 76px;
}

.cwebDetailResourceIdentity.is-creator .cwebDetailResourceIdentityMedia {
  width: 76px;
  height: 76px;
  flex-basis: 76px;
  border-radius: var(--cui-radius-full);
  box-shadow:
    0 0 0 4px var(--cui-surface),
    0 0 0 5px var(--cui-section-line);
}

.cwebDetailResourceIdentityCopy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.cwebDetailResourceIdentityTitle {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.cwebDetailResourceIdentityTitle > :where(a, strong) {
  min-width: 0;
  overflow: hidden;
  color: var(--cui-text);
  font-size: 14px;
  font-weight: 780;
  line-height: 1.4;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwebDetailResourceIdentityTitle > a:hover {
  color: var(--cui-primary);
}

.cwebDetailResourceIdentityTitle > span,
.cwebDetailResourceIdentityMeta {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.cwebDetailResourceIdentitySubtitle,
.cwebDetailResourceIdentityMeta {
  color: var(--cui-text-muted);
  font-size: 11px;
  font-weight: 620;
  line-height: 1.5;
}

.cwebDetailResourceRow {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(150px, 0.75fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 4px;
}

.cwebDetailResourceRow + .cwebDetailResourceRow {
  border-top: 1px solid var(--cui-section-line);
}

.cwebDetailResourceRowDescription {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--cui-text-soft);
  font-size: 11px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cwebDetailResourceRowMetrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(68px, 1fr));
  gap: 16px;
  margin: 0;
}

.cwebDetailResourceRowMetrics > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.cwebDetailResourceRowMetrics dt,
.cwebDetailResourceRowMetrics dd {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwebDetailResourceRowMetrics dt {
  color: var(--cui-text-muted);
  font-size: 10px;
  font-weight: 620;
}

.cwebDetailResourceRowMetrics dd {
  color: var(--cui-text);
  font-size: 14px;
  font-weight: 780;
}

.cwebDetailResourceRowActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.cwebDetailRelatedSection,
.cwebDetailResourceCollection,
.cwebDetailDistributionPanel {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.cwebDetailRelatedSection > .cwebDetailSectionHeader,
.cwebDetailResourceCollection > .cwebDetailSectionHeader,
.cwebDetailDistributionPanel > .cwebDetailSectionHeader {
  align-items: end;
  border-bottom: 1px solid var(--cui-section-line);
  padding-bottom: 14px;
}

.cwebDetailRelatedToolbar,
.cwebDetailRelatedViewControl,
.cwebDetailCollectionControls,
.cwebDetailCollectionSummary {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.cwebDetailRelatedToolbar {
  justify-content: flex-end;
  gap: 10px;
}

.cwebDetailRelatedViewControl {
  justify-content: flex-end;
}

.cwebDetailRelatedFeatured {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cui-section-line);
  border-radius: var(--cui-radius-sm);
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-xs);
}

.cwebDetailRelatedGrid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(var(--cweb-related-columns), minmax(0, 1fr));
  gap: 14px;
}

.cwebDetailRelatedCard {
  position: relative;
  min-width: 0;
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: hidden;
  border: 1px solid var(--cui-line-soft);
  border-radius: var(--cui-radius-sm);
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-xs);
  padding: 15px;
  transition:
    border-color var(--cui-duration-base) ease,
    box-shadow var(--cui-duration-base) ease,
    transform var(--cui-duration-base) ease;
}

.cwebDetailRelatedCard:hover {
  border-color: color-mix(in srgb, var(--cui-primary) 34%, var(--cui-section-line));
  box-shadow: var(--cui-shadow-sm);
  transform: translateY(-1px);
}

.cwebDetailRelatedCard.is-product {
  background: var(--cui-surface);
}

.cwebDetailRelatedCard.is-shop {
  background: var(--cui-surface);
}

.cwebDetailRelatedCardIdentity {
  position: relative;
  min-width: 0;
}

.cwebDetailRelatedCard.is-product .cwebDetailResourceIdentity {
  display: grid;
  gap: 11px;
}

.cwebDetailRelatedCard.is-product .cwebDetailResourceIdentityMedia {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
  background: var(--cui-surface-subtle);
}

.cwebDetailRelatedCard.is-product .cwebDetailResourceIdentityMedia img {
  transition: transform var(--cui-duration-slow) ease;
}

.cwebDetailRelatedCard.is-product:hover .cwebDetailResourceIdentityMedia img {
  transform: scale(1.035);
}

.cwebDetailRelatedCard.is-creator .cwebDetailResourceIdentity {
  align-items: center;
  flex-direction: column;
  padding-top: 7px;
  text-align: center;
}

.cwebDetailRelatedCard.is-creator .cwebDetailResourceIdentityMedia {
  width: 86px;
  height: 86px;
  flex-basis: 86px;
  border: 0;
  padding: 5px;
  background: conic-gradient(
    var(--cui-primary) calc(var(--cweb-related-score) * 1%),
    color-mix(in srgb, var(--cui-primary) 14%, var(--cui-surface-subtle)) 0
  );
  box-shadow: none;
}

.cwebDetailRelatedCard.is-creator .cwebDetailResourceIdentityMedia > img {
  border: 3px solid var(--cui-surface);
  border-radius: var(--cui-radius-full);
}

.cwebDetailRelatedCard.is-creator .cwebDetailResourceIdentityTitle,
.cwebDetailRelatedCard.is-creator .cwebDetailResourceIdentityMeta {
  justify-content: center;
}

.cwebDetailRelatedCard.is-video .cwebDetailResourceIdentity,
.cwebDetailRelatedCard.is-live .cwebDetailResourceIdentity {
  display: grid;
}

.cwebDetailRelatedCard.is-video .cwebDetailResourceIdentityMedia,
.cwebDetailRelatedCard.is-live .cwebDetailResourceIdentityMedia {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--cui-overlay-bg);
}

.cwebDetailRelatedCard.is-video .cwebDetailResourceIdentityMedia img,
.cwebDetailRelatedCard.is-live .cwebDetailResourceIdentityMedia img {
  transition:
    opacity var(--cui-duration-base) ease,
    transform var(--cui-duration-slow) ease;
}

.cwebDetailRelatedCard.is-video:hover .cwebDetailResourceIdentityMedia img,
.cwebDetailRelatedCard.is-live:hover .cwebDetailResourceIdentityMedia img {
  opacity: 0.88;
  transform: scale(1.035);
}

.cwebDetailRelatedMediaCue {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cui-button-primary-text) 82%, transparent);
  border-radius: var(--cui-radius-full);
  background: color-mix(in srgb, var(--cui-overlay-bg) 48%, transparent);
  color: var(--cui-button-primary-text);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--cui-overlay-bg) 30%, transparent);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    background var(--cui-duration-base) ease,
    transform var(--cui-duration-base) ease;
}

.cwebDetailRelatedCard.is-video:hover .cwebDetailRelatedMediaCue,
.cwebDetailRelatedCard.is-live:hover .cwebDetailRelatedMediaCue {
  background: color-mix(in srgb, var(--cui-primary) 78%, transparent);
  transform: translate(-50%, -50%) scale(1.08);
}

.cwebDetailRelatedCardScore,
.cwebDetailRelatedCardDuration {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--cui-primary) 20%, var(--cui-section-line));
  border-radius: var(--cui-radius-full);
  padding: 0 8px;
  background: color-mix(in srgb, var(--cui-surface) 92%, transparent);
  color: var(--cui-primary);
  font-size: 10px;
  font-weight: 780;
  box-shadow: var(--cui-shadow-sm);
}

.cwebDetailRelatedCardScore {
  top: 0;
  right: 0;
}

.cwebDetailRelatedCard.is-creator .cwebDetailRelatedCardScore {
  top: 76px;
  right: 50%;
  transform: translateX(50%);
}

.cwebDetailRelatedCard.is-product .cwebDetailRelatedCardScore,
.cwebDetailRelatedCard.is-video .cwebDetailRelatedCardScore,
.cwebDetailRelatedCard.is-live .cwebDetailRelatedCardScore {
  top: 8px;
  right: 8px;
}

.cwebDetailRelatedCardDuration {
  top: 8px;
  left: 8px;
  border-color: color-mix(in srgb, var(--cui-overlay-bg) 30%, transparent);
  background: color-mix(in srgb, var(--cui-overlay-bg) 78%, transparent);
  color: var(--cui-button-primary-text);
}

.cwebDetailRelatedReasons {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}

.cwebDetailRelatedReasons > span {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--cui-primary) 18%, var(--cui-section-line));
  border-radius: var(--cui-radius-full);
  padding: 0 8px;
  background: color-mix(in srgb, var(--cui-primary) 7%, var(--cui-surface));
  color: var(--cui-primary);
  font-size: 10px;
  font-weight: 720;
}

.cwebDetailRelatedCard.is-creator .cwebDetailRelatedReasons {
  justify-content: center;
}

.cwebDetailRelatedCard.is-shop .cwebDetailRelatedReasons > span {
  border-color: color-mix(in srgb, var(--cui-info) 22%, var(--cui-section-line));
  background: color-mix(in srgb, var(--cui-info) 8%, var(--cui-surface));
  color: var(--cui-info);
}

.cwebDetailRelatedDescription {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--cui-text-soft);
  font-size: 11px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cwebDetailRelatedMetrics {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px dashed var(--cui-section-line);
  padding-top: 12px;
}

.cwebDetailRelatedMetrics > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 0 10px;
}

.cwebDetailRelatedMetrics > div:first-child {
  padding-left: 0;
}

.cwebDetailRelatedMetrics > div + div {
  border-left: 1px solid var(--cui-section-line);
}

.cwebDetailRelatedMetrics dt,
.cwebDetailRelatedMetrics dd {
  min-width: 0;
  margin: 0;
}

.cwebDetailRelatedMetrics dt {
  color: var(--cui-text-muted);
  font-size: 10px;
  font-weight: 620;
}

.cwebDetailRelatedMetrics dd {
  overflow: hidden;
  color: var(--cui-text);
  font-size: 15px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwebDetailRelatedCard.is-shop .cwebDetailRelatedMetrics {
  gap: 7px;
  border-top: 0;
  padding-top: 0;
}

.cwebDetailRelatedCard.is-shop .cwebDetailRelatedMetrics > div {
  border: 1px solid var(--cui-section-line);
  border-radius: var(--cui-radius-sm);
  background: color-mix(in srgb, var(--cui-surface) 82%, transparent);
  padding: 10px;
}

.cwebDetailRelatedCard.is-shop .cwebDetailRelatedMetrics > div + div {
  border-left: 1px solid var(--cui-section-line);
}

.cwebDetailRelatedActions {
  display: flex;
  align-self: end;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  border-top: 1px solid var(--cui-section-line);
  padding-top: 12px;
}

.cwebDetailRelatedActions > :last-child {
  min-width: 0;
  flex: 1 1 auto;
  justify-content: center;
}

.cwebDetailRelatedCard.is-creator .cwebDetailRelatedActions > :last-child {
  border-color: color-mix(in srgb, var(--cui-primary) 26%, var(--cui-section-line));
  background: color-mix(in srgb, var(--cui-primary) 8%, var(--cui-surface));
  color: var(--cui-primary);
}

.cwebDetailResourceCollection,
.cwebDetailDistributionPanel {
  border: 1px solid var(--cui-section-line);
  border-radius: var(--cui-radius-sm);
  background: var(--cui-surface);
  padding: 18px;
}

.cwebDetailCollectionSummary {
  border-bottom: 1px solid var(--cui-section-line);
  color: var(--cui-text-soft);
  font-size: 12px;
  padding-bottom: 12px;
}

.cwebDetailCollectionControls {
  border-radius: var(--cui-radius-sm);
  background: var(--cui-surface-subtle);
  padding: 10px;
}

.cwebDetailCollectionBody {
  min-width: 0;
  display: grid;
}

.cwebDetailCollectionFooter {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--cui-section-line);
  padding-top: 12px;
}

.cwebDetailDistributionList {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.cwebDetailDistributionItem {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(110px, 0.8fr) minmax(160px, 1.5fr);
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: var(--cui-radius-sm);
  padding: 10px 16px 10px 10px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.cwebDetailDistributionRank {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cui-section-line);
  border-radius: var(--cui-radius-sm);
  background: var(--cui-surface-subtle);
  color: var(--cui-text-muted);
  font-size: 10px;
  font-weight: 780;
}

.cwebDetailDistributionRank.isTop {
  border-color: color-mix(in srgb, var(--cui-primary) 22%, var(--cui-section-line));
  background: color-mix(in srgb, var(--cui-primary) 9%, var(--cui-surface));
  color: var(--cui-primary);
}

button.cwebDetailDistributionItem {
  cursor: pointer;
}

button.cwebDetailDistributionItem:hover,
button.cwebDetailDistributionItem[aria-pressed='true'] {
  border-color: color-mix(in srgb, var(--cui-primary) 20%, var(--cui-section-line));
  background: color-mix(in srgb, var(--cui-primary) 5%, var(--cui-surface));
}

button.cwebDetailDistributionItem:focus-visible {
  outline: 2px solid var(--cui-primary);
  outline-offset: 1px;
}

.cwebDetailDistributionLabel {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cwebDetailDistributionLabel strong {
  overflow: hidden;
  color: var(--cui-text);
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwebDetailDistributionLabel small {
  color: var(--cui-text-muted);
  font-size: 10px;
}

.cwebDetailDistributionProgress {
  min-width: 0;
}

.cwebDetailDistributionProgress .cuiProgressLabel {
  min-width: 42px;
  color: var(--cui-text);
  font-size: 13px;
  font-weight: 780;
  text-align: right;
  white-space: nowrap;
}

.cwebDetailMetricBandGrid.cuiMetricGrid {
  grid-template-columns: repeat(var(--cweb-detail-metric-columns), minmax(0, 1fr));
  gap: 10px;
}

.cwebDetailMetricBandGrid > .cuiMetricCard,
.cwebDetailMetricBandItem > .cuiMetricCard {
  min-height: 126px;
  height: 100%;
  padding: 16px;
}

.cwebDetailMetricBandGrid .cuiMetricCardValue {
  font-size: 23px;
}

.cwebDetailMetricBandGrid .cuiMetricCardDescription {
  margin-top: auto;
}

.cwebDetailChartGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(var(--cweb-detail-chart-columns), minmax(0, 1fr));
  gap: 14px;
}

.cwebDetailChartGrid > * {
  min-width: 0;
}

.cwebDetailMetricBandItem {
  min-width: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

.cwebDetailMetricBandItem:hover > .cuiMetricCard {
  border-color: color-mix(in srgb, var(--cui-primary) 26%, var(--cui-section-line));
  background: color-mix(in srgb, var(--cui-primary) 2%, var(--cui-surface));
}

.cwebDetailTrendPanel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cui-line-soft);
  border-radius: var(--cui-radius-lg);
  background: var(--cui-surface);
  box-shadow: var(--cui-shadow-xs);
}

.cwebDetailTrendPanel > .cwebDetailSectionHeader {
  min-height: 76px;
  padding: 18px 20px;
}

.cwebDetailTrendToolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 16px;
  border-radius: var(--cui-radius-sm);
  padding: 8px 10px;
  background: var(--cui-surface-subtle);
}

.cwebDetailTrendMetrics,
.cwebDetailTrendModes {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cwebDetailTrendModes {
  justify-content: flex-end;
}

.cwebDetailTrendSummary,
.cwebDetailTrendLegend {
  min-width: 0;
  padding: 12px 20px;
}

.cwebDetailTrendLegend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  color: var(--cui-text-muted);
  font-size: 11px;
}

.cwebDetailTrendLegend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cwebDetailTrendLegend i {
  width: 8px;
  height: 8px;
  border-radius: var(--cui-radius-full);
  background: var(--cui-primary);
}

.cwebDetailTrendLayout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.cwebDetailTrendLayout.hasInsight {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.3fr);
}

.cwebDetailTrendCanvas {
  min-width: 0;
  min-height: 320px;
  display: grid;
  align-items: stretch;
  padding: 20px 22px 22px;
}

.cwebDetailTrendCanvas > .cuiState {
  align-self: center;
}

.cwebDetailTrendInsight {
  min-width: 0;
  align-self: stretch;
  margin: 16px 16px 16px 0;
  border-radius: var(--cui-radius-md);
  padding: 22px;
  background: color-mix(in srgb, var(--cui-primary) 6%, var(--cui-surface-subtle));
}

.cwebDetailTrendInsight h3,
.cwebDetailTrendInsight p {
  margin: 0;
}

.cwebDetailTrendInsight h3 {
  font-size: 15px;
}

.cwebDetailTrendInsight p {
  margin-top: 8px;
  color: var(--cui-text-soft);
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 1280px) {
  .cwebDetailHero--withAside,
  .cwebDetailHero--media.cwebDetailHero--withAside,
  .cwebDetailHero--profile.cwebDetailHero--withAside {
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  }

  .cwebDetailHeroAside {
    grid-column: 1 / -1;
    border-top: 1px solid var(--cui-section-line);
    border-left: 0;
  }

  .cwebDetailRelationCard {
    grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto;
    align-items: center;
  }

  .cwebDetailRelationCard > header {
    min-width: 220px;
  }

  .cwebDetailRelationDescription,
  .cwebDetailRelationMetrics {
    grid-column: 2;
  }

  .cwebDetailRelationCard > footer {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .cwebDetailMetricBandGrid.cuiMetricGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cwebDetailHero,
  .cwebDetailHero--withAside,
  .cwebDetailHero--media.cwebDetailHero--withAside,
  .cwebDetailHero--profile.cwebDetailHero--withAside {
    grid-template-columns: minmax(0, 1fr);
  }

  .cwebDetailHeroAside,
  .cwebDetailHeroFooter {
    grid-column: 1;
  }

  .cwebDetailHeroMain,
  .cwebDetailHeroAside {
    border-top: 1px solid var(--cui-section-line);
  }

  .cwebDetailRelationCard {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .cwebDetailRelationDescription,
  .cwebDetailRelationMetrics,
  .cwebDetailRelationCard > footer {
    grid-column: 1;
    grid-row: auto;
  }

  .cwebDetailTrendLayout.hasInsight {
    grid-template-columns: minmax(0, 1fr);
  }

  .cwebDetailRelatedGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cwebDetailResourceRow {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cwebDetailResourceRowDescription,
  .cwebDetailResourceRowMetrics {
    grid-column: 1;
  }

  .cwebDetailResourceRowActions {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .cwebDetailTrendInsight {
    margin: 0 16px 16px;
  }
}

@media (max-width: 720px) {
  .cwebDetailHeroMedia {
    padding: 12px;
  }

  .cwebDetailHeroFeatured > .cwebDetailHeroMedia {
    height: min(72vw, 360px);
    padding: 0;
  }

  .cwebDetailHeroMain,
  .cwebDetailRelationCard {
    padding: 18px;
  }

  .cwebDetailRelatedGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cwebDetailResourceRow {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .cwebDetailResourceRowDescription,
  .cwebDetailResourceRowMetrics,
  .cwebDetailResourceRowActions {
    grid-column: 1;
    grid-row: auto;
  }

  .cwebDetailResourceRowActions {
    justify-content: flex-start;
  }

  .cwebDetailResourceCollection,
  .cwebDetailDistributionPanel {
    padding: 14px;
  }

  .cwebDetailDistributionItem {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .cwebDetailDistributionProgress {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .cwebDetailRelatedToolbar {
    width: 100%;
    justify-content: flex-start;
  }

  .cwebDetailHero .cwebDetailEntityTitleRow h1 {
    font-size: 23px;
  }

  .cwebDetailEntityHighlight {
    font-size: 25px;
  }

  .cwebDetailInfoGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cwebDetailMetricBandGrid.cuiMetricGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cwebDetailChartGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cwebDetailMetricBandGrid > .cuiMetricCard,
  .cwebDetailMetricBandItem > .cuiMetricCard {
    min-height: 108px;
    padding: 13px;
  }

  .cwebDetailMetricBandGrid .cuiMetricCardValue {
    font-size: 20px;
  }

  .cwebDetailTrendPanel > .cwebDetailSectionHeader,
  .cwebDetailTrendToolbar,
  .cwebDetailTrendSummary,
  .cwebDetailTrendLegend,
  .cwebDetailTrendCanvas,
  .cwebDetailTrendInsight {
    padding-right: 14px;
    padding-left: 14px;
  }

  .cwebDetailTrendToolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .cwebDetailTrendModes {
    justify-content: flex-start;
  }

  .cwebDetailMediaPreview {
    height: min(64vh, 620px);
  }
}

.cwebProductThumbnail {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: var(--cui-radius-md);
}

@media (min-width: 1101px) and (max-width: 1500px) {
  .cwebSearchListWorkspace {
    --cweb-search-list-side-filter-width: 320px;
  }
}

@media (max-width: 1100px) {
  .cwebSearchListWorkspace.cuiListPageLayoutSide > .cuiListPageLayoutResults {
    grid-column: 1;
    grid-row: 1;
    padding-right: 0;
  }

  .cwebSearchListWorkspace.cuiListPageLayoutSide > .cuiListPageLayoutSideFilters {
    position: fixed;
    z-index: calc(var(--cui-z-sticky) + 1);
    top: var(--cui-list-page-sticky-top, 0);
    right: 0;
    left: auto;
    width: min(100%, 420px);
    height: var(
      --cui-list-page-side-filter-height,
      calc(100dvh - var(--cui-list-page-sticky-top, 0px))
    );
    max-height: none;
    grid-column: 1;
    grid-row: 1;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .cwebSearchListWorkspace > .cuiListPageLayoutFilterToggle {
    z-index: calc(var(--cui-z-sticky) + 2);
  }
}

@media (max-width: 720px) {
  .cwebWorkspaceFrame,
  .cwebWorkspaceFrame--collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .cwebWorkspaceSidebar {
    position: fixed;
    right: auto;
    left: 0;
    width: min(280px, calc(100vw - 48px));
    transform: translateX(-100%);
    transition: transform var(--cui-duration-base) ease;
  }

  .cwebWorkspaceFrame--mobileOpen .cwebWorkspaceSidebar {
    transform: translateX(0);
  }

  .cwebWorkspaceScrim {
    position: fixed;
    z-index: calc(var(--cui-z-sticky) - 1);
    inset: 0;
    display: block;
    border: 0;
    background: var(--cui-dialog-overlay-bg);
  }

  .cwebWorkspaceContent {
    padding: var(--cui-space-4);
  }

  .cwebWorkspacePageBody--withAside,
  .cwebWorkspacePage--operations .cwebWorkspacePageBody--withAside,
  .cwebWorkspacePage--detail .cwebWorkspacePageBody--withAside {
    grid-template-columns: minmax(0, 1fr);
  }

  .cwebWorkspacePageAside {
    border-top: 1px solid var(--cui-section-line);
    border-left: 0;
    padding-top: var(--cui-space-4);
    padding-left: 0;
  }

  .cwebCommerceResourcePage > .cuiResourceHeader {
    align-items: stretch;
  }

  .cwebCommerceResourcePage .cuiResourceActions {
    width: 100%;
  }

  .cwebMetricStrip > .cuiMetricCard {
    border-right: 0;
    border-bottom: 1px solid var(--cui-section-line);
  }

  .cwebMetricStrip > .cuiMetricCard:last-child {
    border-bottom: 0;
  }

  .cwebCommerceSearchBox,
  .cwebCommerceSearchBoxWithScope {
    grid-template-columns: 1fr 1fr;
  }

  .cwebCommerceSearchBox > .cuiInput,
  .cwebCommerceSearchBoxWithScope > .cuiInput {
    grid-column: 1 / -1;
  }

  .cwebCommerceSearchBoxWithScope > .cuiDropdownSelect {
    grid-column: 1 / -1;
  }

  .cwebCommerceFilterControlGrid {
    grid-template-columns: 1fr;
  }

  .cwebCommerceFilterFooter > .cuiButton {
    flex: 1 1;
  }

  .cwebSearchListSearchBox > .cuiInput,
  .cwebSearchListSearchBox > .cuiInputAffix,
  .cwebSearchListSearchBoxWithScope > .cuiDropdownSelect {
    width: 100%;
  }

  .cwebSearchListSearchBox {
    display: grid;
    height: auto;
    grid-template-columns: minmax(0, 1fr) 96px;
    grid-template-rows: 56px 42px;
    gap: 6px 0;
    overflow: visible;
    border: 0;
    box-shadow: none;
  }

  .cwebSearchListSearchBoxWithScope > .cuiDropdownSelect {
    min-width: 0;
    grid-column: 1 / -1;
    border: 1px solid var(--cui-control-line);
    border-radius: 7px 7px 0 0;
  }

  .cwebSearchListSearchBox > .cuiInput,
  .cwebSearchListSearchBox > .cuiInputAffix {
    height: 42px;
    min-width: 0;
    border: 1px solid var(--cui-control-line);
    border-radius: 0 0 0 7px;
  }

  .cwebSearchListSearchBox > .cuiButton {
    width: 96px;
    height: 42px;
    grid-column: 2;
    border-radius: 0 0 7px 0;
  }

  .cwebSearchListSectionBody--grid {
    grid-template-columns: 1fr;
  }

  .cwebSearchListFilterActions > .cuiButton {
    flex: 1 1;
  }

  .cwebSearchListFilterToggle.cuiButton {
    width: 40px;
    min-width: 40px;
    height: 88px;
  }
}