:root {
  --ink: #1a1d23;
  --ink-soft: #374151;
  --muted: #6b7280;
  --line: #e4e8ef;
  --panel: #ffffff;
  --surface: #f7f8fa;
  --surface-strong: #f1f3f7;
  --app-bg: #f7f8fa;
  --panel-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --sidebar-text: #172033;
  --sidebar-muted: #657185;
  --nav-hover: #eff6ff;
  --gold: #d97706;
  --blue: #2563eb;
  --green: #059669;
  --red: #dc2626;
  --teal: #0d8b8b;
  --violet: #7c3aed;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
}

body[data-theme="dark"] {
  --ink: #f8fafc;
  --ink-soft: #d7dee8;
  --muted: #a8b3c4;
  --line: rgba(148, 163, 184, 0.22);
  --panel: #111827;
  --surface: #172033;
  --surface-strong: #253044;
  --app-bg: #0f172a;
  --panel-bg: rgba(17, 24, 39, 0.86);
  --sidebar-bg: linear-gradient(180deg, #0b1120, #111827);
  --sidebar-text: #f8fafc;
  --sidebar-muted: #94a3b8;
  --nav-hover: rgba(255, 255, 255, 0.08);
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
}

* {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 18px;
}

body {
  overflow-x: hidden;
  margin: 0;
  background: var(--app-bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

body.notification-drawer-open {
  overflow-x: hidden;
}

.app-overlay-root {
  position: fixed;
  inset: 0;
  z-index: 220;
  overflow: visible;
  pointer-events: none;
}

.app-overlay-root > * {
  pointer-events: auto;
}

.overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 23, 42, 0.38);
}

.drawer-panel,
.popover-panel,
.bottom-sheet {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel-bg);
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.24);
  overscroll-behavior: contain;
}

.drawer-header {
  min-width: 0;
}

.drawer-body {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.drawer-footer {
  min-width: 0;
}

body.login-page {
  min-height: 100vh;
  overflow-x: hidden;
}

.login-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.login-panel {
  display: grid;
  width: min(520px, 100%);
  gap: 20px;
  padding: 36px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, white);
  border-radius: 18px;
  background: var(--panel-bg);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-brand strong,
.login-brand small {
  display: block;
}

.login-brand small {
  color: var(--muted);
}

.login-panel h1 {
  margin-bottom: 10px;
  font-size: 2.4rem;
  line-height: 1;
}

.local-login-form {
  display: grid;
  gap: 16px;
}

.login-field {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.login-field input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--line) 92%, #94a3b8);
  border-radius: 10px;
  background: var(--panel-bg);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.login-field input:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 22%, transparent);
}

.local-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.local-login-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 88%, var(--blue));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 22%, transparent);
}

.local-login-button:disabled {
  cursor: progress;
  opacity: 0.7;
}

.google-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--blue) 78%, #1d4ed8);
  border-radius: 10px;
  background: #2563eb;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.24);
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.google-login-button:hover {
  background: #1d4ed8;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

.google-mark {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: #2563eb;
  font-weight: 900;
}

.forgot-password-link {
  justify-self: start;
  color: color-mix(in srgb, var(--blue) 86%, var(--ink));
  font-size: 0.875rem;
  font-weight: 700;
  text-underline-offset: 3px;
}

.login-modal a:focus-visible,
.login-modal button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 70%, white);
  outline-offset: 3px;
}

.login-alert {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--red) 38%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--red) 10%, var(--panel));
  color: var(--ink);
  line-height: 1.45;
}

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

.login-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.page-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 12px 16px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0;
}

.main-content > .page-footer {
  margin-top: 10px;
}

.tool-page-footer {
  width: min(1480px, 100%);
  margin: -8px auto 18px;
}

.commercial-login,
.legal-page {
  background:
    radial-gradient(circle at 12% 18%, rgba(37, 99, 235, 0.16), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(20, 184, 166, 0.12), transparent 28%),
    radial-gradient(circle at 70% 86%, rgba(239, 68, 68, 0.08), transparent 26%),
    linear-gradient(135deg, #f8fbff, #ffffff 45%, #eef7f4);
}

.landing-shell,
.legal-shell {
  display: grid;
  gap: 24px;
  width: min(1440px, 100%);
  max-width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding: 22px clamp(18px, 4vw, 52px);
  overflow: hidden;
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
}

.landing-brand,
.landing-nav-links,
.landing-nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.landing-nav-links {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.landing-brand,
.landing-nav a {
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
}

.landing-nav-links a {
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.84rem;
}

.landing-nav-links a:hover {
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
}

.landing-nav-actions {
  justify-content: flex-end;
}

.landing-language-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.07);
}

.landing-language-switch button {
  min-width: 40px;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 950;
}

.landing-language-switch button.active {
  background: var(--ink);
  color: var(--panel);
}

.compact-button {
  min-height: 42px;
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(360px, 0.86fr) minmax(520px, 1.14fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  min-width: 0;
  min-height: auto;
  padding: 20px 0 10px;
}

.landing-hero-copy {
  display: grid;
  min-width: 0;
  gap: 18px;
}

.landing-hero-copy h1 {
  max-width: 720px;
  font-size: clamp(2.45rem, 4.55vw, 4.85rem);
  line-height: 0.94;
  overflow-wrap: anywhere;
}

.landing-hero-copy .subtitle {
  max-width: 760px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.66;
  overflow-wrap: anywhere;
}

.hero-login-button {
  border: 0;
}

.landing-hero-media {
  position: relative;
  min-height: clamp(430px, 46vw, 610px);
}

.landing-video-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.7), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(37, 99, 235, 0.34), transparent 28%),
    linear-gradient(135deg, rgba(248, 250, 252, 0.94), rgba(226, 232, 240, 0.72) 38%, rgba(15, 23, 42, 0.72)),
    url("/assets/onestop-dashboard.png") center / cover no-repeat;
  box-shadow: 0 34px 90px rgba(15, 23, 42, 0.18);
  isolation: isolate;
}

.landing-video-frame::before {
  position: absolute;
  inset: 16px;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 8px;
  content: "";
  pointer-events: none;
}

.landing-video-frame::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(255, 255, 255, 0.28) 50%, transparent 52%),
    linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.18));
  background-size: 220% 100%, 100% 100%;
  content: "";
  mix-blend-mode: screen;
  opacity: 0.45;
  pointer-events: none;
  animation: commercial-scan 8s ease-in-out infinite;
}

.landing-video-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 34% 78%, rgba(255, 255, 255, 0.54), transparent 28%),
    radial-gradient(circle at 76% 50%, rgba(37, 99, 235, 0.2), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(15, 23, 42, 0.26));
}

.landing-video-shot {
  position: absolute;
  inset: -7%;
  width: 114%;
  height: 114%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.02) blur(0.5px);
  opacity: 0.26;
  mix-blend-mode: multiply;
  transform-origin: center;
  animation: landing-video-pan 18s ease-in-out infinite alternate;
}

@keyframes landing-video-pan {
  0% {
    transform: translate3d(-2.2%, -1.5%, 0) scale(1.04);
  }
  45% {
    transform: translate3d(2.4%, 1.2%, 0) scale(1.09);
  }
  100% {
    transform: translate3d(-1%, 2%, 0) scale(1.06);
  }
}

@keyframes commercial-scan {
  0%,
  40% {
    background-position: 135% 0, 0 0;
  }
  70%,
  100% {
    background-position: -35% 0, 0 0;
  }
}

.landing-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.25);
  transform: translate(-50%, -50%);
}

.landing-play-button::before {
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: inherit;
  content: "";
  animation: landing-pulse 2.2s ease-out infinite;
}

.landing-play-button span {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 20px solid var(--ink);
}

@keyframes landing-pulse {
  0% {
    opacity: 0.8;
    transform: scale(0.92);
  }
  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

.hero-stat-row {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hero-stat-row article,
.hero-caption,
.landing-feature-band article {
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(18px);
}

.hero-stat-row article {
  display: grid;
  gap: 3px;
  min-height: 76px;
  padding: 12px;
}

.hero-stat-row small,
.hero-caption span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.hero-stat-row strong {
  color: var(--ink);
  font-size: 1.38rem;
  line-height: 1;
}

.hero-caption {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  display: grid;
  gap: 6px;
  width: min(420px, calc(100% - 36px));
  padding: 16px;
}

.hero-caption strong {
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.32;
}

.autoplay-pill {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.74);
  color: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(14px);
}

.autoplay-pill span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.16);
  animation: landing-dot 1.4s ease-in-out infinite;
}

.autoplay-pill strong {
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

@keyframes landing-dot {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.86);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.motion-card {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 5px;
  max-width: 236px;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(18px);
}

.motion-card small {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.motion-card strong {
  color: var(--ink);
  line-height: 1.25;
}

.motion-card-one {
  right: 30px;
  bottom: 122px;
  animation: landing-float-one 6s ease-in-out infinite;
}

.motion-card-two {
  left: 30px;
  bottom: 126px;
  animation: landing-float-two 7s ease-in-out infinite;
}

@keyframes landing-float-one {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@keyframes landing-float-two {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(12px);
  }
}

.landing-hero-points {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.landing-hero-points article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.landing-hero-points .feature-dot {
  grid-row: span 2;
  margin-top: 3px;
}

.landing-hero-points strong {
  color: var(--ink);
  font-size: 0.96rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.landing-hero-points small {
  color: var(--muted);
  line-height: 1.42;
  min-width: 0;
  overflow-wrap: anywhere;
}

.landing-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.07);
}

.landing-metric-strip article {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
}

.landing-metric-strip span,
.landing-metric-strip small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.landing-metric-strip strong {
  color: var(--ink);
  font-size: 2rem;
  line-height: 1;
}

.landing-story-section,
.landing-workflow-section,
.landing-division-section,
.landing-cta-band {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px);
}

.landing-story-section {
  grid-template-columns: minmax(320px, 0.86fr) minmax(0, 1.14fr);
  align-items: start;
}

.landing-section-copy,
.landing-section-heading {
  display: grid;
  gap: 10px;
}

.landing-section-copy h2,
.landing-section-heading h2,
.landing-cta-band h2 {
  max-width: 820px;
  color: var(--ink);
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  line-height: 1;
}

.landing-section-copy p:not(.eyebrow),
.landing-cta-band p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
}

.landing-story-grid,
.landing-division-grid,
.landing-workflow-steps {
  display: grid;
  gap: 12px;
}

.landing-story-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-story-grid article,
.landing-division-grid article,
.landing-workflow-steps article {
  display: grid;
  gap: 9px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.landing-story-grid strong,
.landing-division-grid strong,
.landing-workflow-steps strong {
  color: var(--ink);
  font-size: 1.04rem;
}

.landing-story-grid p,
.landing-division-grid p,
.landing-workflow-steps p {
  margin: 0;
  color: var(--muted);
  line-height: 1.48;
}

.landing-division-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-division-grid span,
.landing-workflow-steps span {
  display: inline-flex;
  width: max-content;
  min-height: 28px;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, white);
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 950;
}

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

.landing-workflow-steps article:nth-child(2) span {
  background: color-mix(in srgb, var(--green) 10%, white);
  color: var(--green);
}

.landing-workflow-steps article:nth-child(3) span {
  background: color-mix(in srgb, var(--gold) 12%, white);
  color: var(--gold);
}

.landing-workflow-steps article:nth-child(4) span {
  background: color-mix(in srgb, var(--red) 10%, white);
  color: var(--red);
}

.landing-cta-band {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(20, 184, 166, 0.1)),
    rgba(255, 255, 255, 0.82);
}

.landing-footer {
  justify-content: space-between;
  min-height: 72px;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.landing-footer-links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.landing-footer-links a {
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 900;
  text-decoration: none;
}

.landing-footer-links a:hover {
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
}

.landing-feature-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.landing-feature-band article {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(255, 255, 255, 0.76);
}

.landing-feature-band strong {
  color: var(--ink);
  font-size: 1rem;
}

.landing-feature-band p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.feature-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
}

.blue-dot {
  background: var(--blue);
}

.green-dot {
  background: var(--green);
}

.gold-dot {
  background: var(--gold);
}

.login-modal[hidden] {
  display: none;
}

.login-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(16px);
}

body.login-modal-open {
  overflow: hidden;
}

.login-modal-card {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: rgba(255, 255, 255, 0.98);
}

.login-modal-card h2 {
  margin: 0 40px 10px 0;
  font-size: clamp(1.9rem, 4vw, 2.25rem);
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.login-modal-card .subtitle {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
}

.landing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.78fr);
  gap: 22px;
  align-items: center;
}

.landing-copy {
  display: grid;
  gap: 18px;
}

.landing-copy h1 {
  max-width: 820px;
  font-size: clamp(2.7rem, 6vw, 5.35rem);
  line-height: 0.92;
}

.landing-copy .subtitle {
  max-width: 780px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.landing-actions > * {
  min-width: 0;
  flex: 0 1 auto;
}

.landing-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 820px;
}

.landing-proof article,
.preview-window,
.legal-card,
.live-chat-placeholder {
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px);
}

.landing-proof article {
  display: grid;
  gap: 4px;
  padding: 14px;
}

.landing-proof strong {
  color: var(--ink);
}

.landing-proof span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.landing-product-preview {
  position: relative;
  align-self: stretch;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 8px;
  background: url("/assets/onestop-dashboard.png") center / cover no-repeat;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.12);
}

.landing-product-preview::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(15, 23, 42, 0.32));
  content: "";
}

.preview-window {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  min-height: 500px;
  margin: 22px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.82);
}

.preview-topbar {
  display: flex;
  gap: 7px;
}

.preview-topbar span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--line);
}

.preview-topbar span:nth-child(1) {
  background: #ef4444;
}

.preview-topbar span:nth-child(2) {
  background: #f59e0b;
}

.preview-topbar span:nth-child(3) {
  background: #10b981;
}

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

.preview-metrics article {
  padding: 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 8%, white);
}

.preview-metrics small,
.preview-insight span,
.contact-grid span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.preview-metrics strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 1.28rem;
}

.preview-chart {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  min-height: 210px;
  align-items: end;
  padding: 16px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(241, 245, 249, 0.72));
}

.preview-chart i {
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, #2563eb, #14b8a6);
  box-shadow: 0 18px 34px rgba(37, 99, 235, 0.16);
}

.preview-insight {
  display: grid;
  gap: 7px;
  padding: 14px;
  border-left: 5px solid var(--gold);
  border-radius: 8px;
  background: color-mix(in srgb, var(--gold) 10%, white);
}

.preview-insight strong {
  color: var(--ink);
  line-height: 1.3;
}

.preview-insight small {
  color: var(--muted);
}

.landing-login-panel {
  align-self: start;
  width: 100%;
  background: rgba(255, 255, 255, 0.86);
}

.landing-login-panel h2 {
  font-size: 2.1rem;
  line-height: 1;
}

.legal-shell {
  align-content: start;
}

.legal-card {
  display: grid;
  gap: 18px;
  padding: 28px;
}

.legal-card h1 {
  max-width: 920px;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 0.98;
}

.legal-card > p {
  max-width: 860px;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.62;
}

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

.legal-grid article,
.contact-grid article {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.legal-grid p,
.contact-grid p {
  color: var(--muted);
  line-height: 1.5;
}

.contact-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
}

.live-chat-placeholder {
  display: grid;
  gap: 14px;
  max-width: 760px;
  padding: 18px;
}

.live-chat-placeholder span {
  color: var(--gold);
  font-weight: 950;
  text-transform: uppercase;
}

.live-chat-placeholder p {
  color: var(--muted);
}

.live-chat-placeholder button {
  justify-self: start;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: var(--panel);
  font-weight: 900;
}

.live-chat-header {
  display: grid;
  gap: 4px;
}

.live-chat-header strong {
  color: var(--ink);
  font-size: 1rem;
}

.live-chat-start-form,
.live-chat-message-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.live-chat-start-form[hidden],
.live-chat-panel[hidden] {
  display: none;
}

.live-chat-start-form label,
.live-chat-message-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.live-chat-wide {
  grid-column: 1 / -1;
}

.live-chat-start-form input,
.live-chat-start-form textarea,
.live-chat-message-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.45;
  outline: none;
  padding: 11px 12px;
  resize: vertical;
  text-transform: none;
}

.live-chat-panel {
  display: grid;
  gap: 12px;
}

.live-chat-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.live-chat-status-row p,
.live-chat-fallback {
  margin: 0;
  font-size: 0.9rem;
}

.live-chat-status-row button {
  min-height: 34px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--blue) 12%, white);
  color: var(--blue);
}

.live-chat-messages {
  display: grid;
  gap: 10px;
  min-height: 180px;
  max-height: 360px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.78);
}

.live-chat-message {
  display: grid;
  gap: 5px;
  width: min(86%, 520px);
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
}

.live-chat-message.guest {
  justify-self: end;
  background: color-mix(in srgb, var(--ink) 92%, white);
  border-color: color-mix(in srgb, var(--ink) 85%, white);
}

.live-chat-message.team {
  justify-self: start;
  background: color-mix(in srgb, var(--blue) 8%, white);
}

.live-chat-message strong {
  color: var(--ink);
  font-size: 0.78rem;
}

.live-chat-message.guest strong,
.live-chat-message.guest p {
  color: var(--panel);
}

.live-chat-message p,
.live-chat-empty {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.live-chat-fallback a {
  color: var(--blue);
  font-weight: 900;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 180ms ease;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100vh;
  min-height: 100vh;
  position: sticky;
  top: 0;
  padding: 24px 18px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  box-shadow: 8px 0 28px rgba(15, 23, 42, 0.08);
}

.brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  padding: 6px;
}

.sidebar-toggle {
  margin-left: auto;
  color: var(--sidebar-text);
  background: var(--nav-hover);
}

.brand-mark,
.admin-badge span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #d0a34b, #805f20);
  color: #fff8e7;
  font-weight: 800;
}

.brand strong,
.admin-badge strong,
.sidebar-status strong {
  display: block;
  font-size: 0.9rem;
}

.brand small,
.admin-badge small,
.sidebar-status small {
  color: var(--sidebar-muted);
  font-size: 0.76rem;
}

.nav-list {
  display: grid;
  flex: 1 1 auto;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 4px 6px 2px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sidebar-muted) 35%, transparent) transparent;
}

.nav-list::-webkit-scrollbar {
  width: 6px;
}

.nav-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--sidebar-muted) 32%, transparent);
}

.nav-item,
.secondary-button,
.primary-button,
.icon-button,
.mini-button,
.tool-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border: 0;
  border-radius: 8px;
}

.secondary-button,
.primary-button,
.mini-button {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
}

.secondary-button > span:not(.sr-only),
.primary-button > span:not(.sr-only),
.mini-button > span:not(.sr-only) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secondary-button .icon,
.primary-button .icon,
.mini-button .icon,
.icon-button .icon {
  flex: 0 0 auto;
}

.icon-button,
.mini-icon-button,
.icon-only-button {
  flex: 0 0 auto;
}

.nav-item {
  position: relative;
  justify-content: flex-start;
  width: 100%;
  padding: 10px 12px;
  color: var(--sidebar-muted);
  background: transparent;
  text-align: left;
}

.nav-group.has-submenu > .nav-item {
  padding-right: 32px;
}

.nav-group.has-submenu > .nav-item::after {
  content: "+";
  position: absolute;
  right: 10px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nav-hover) 80%, transparent);
  color: currentColor;
  font-size: 0.82rem;
  font-weight: 900;
}

.nav-group:not([data-nav-section="reporting"]) > .nav-item::after,
.sidebar-hidden-sublist {
  display: none !important;
}

.nav-group.has-submenu.is-open > .nav-item::after {
  content: "-";
}

.nav-label {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}

.nav-label > span,
.nav-label > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-label > small {
  color: var(--sidebar-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.nav-item.active .nav-label > small,
.nav-item:hover .nav-label > small {
  color: rgba(255, 255, 255, 0.78);
}

.nav-group {
  display: grid;
  gap: 6px;
}

.nav-sublist {
  display: none;
  gap: 4px;
  padding: 2px 0 2px 22px;
  border-left: 1px solid color-mix(in srgb, var(--sidebar-muted) 24%, transparent);
  margin-left: 22px;
}

.nav-group.is-open .nav-sublist {
  display: grid;
}

.nav-subitem {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sidebar-muted);
  font-size: 0.88rem;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
}

.nav-subitem:hover,
.nav-subitem.active {
  color: var(--sidebar-text);
  background: color-mix(in srgb, var(--nav-hover) 72%, transparent);
}

.nav-subitem.active {
  box-shadow: inset 3px 0 0 var(--blue);
}

.nav-item.active {
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  background: #dbeafe;
  box-shadow: none;
}

.nav-item.active .nav-label > small {
  color: #2563eb;
}

.nav-item:hover:not(.active) {
  color: var(--sidebar-text);
  background: color-mix(in srgb, var(--nav-hover) 72%, transparent);
  box-shadow: none;
}

.sidebar-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--nav-hover);
}

.sidebar-footer {
  display: grid;
  flex: 0 0 auto;
  gap: 10px;
  margin-top: 0;
  padding-top: 10px;
  background: var(--sidebar-bg);
}

.sidebar-user {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 78%, var(--nav-hover));
}

.sidebar-avatar,
.profile-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(239, 68, 68, 0.84), rgba(37, 99, 235, 0.84));
  background-position: center;
  background-size: cover;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.sidebar-avatar.has-image,
.profile-avatar.has-image {
  color: transparent;
}

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

.sidebar-user small {
  color: var(--sidebar-muted);
  font-size: 0.72rem;
}

.sidebar-logout {
  width: 34px;
  min-height: 34px;
  color: var(--red);
  background: color-mix(in srgb, var(--red) 9%, var(--panel));
}

body.sidebar-collapsed .app-shell {
  grid-template-columns: 82px minmax(0, 1fr) !important;
}

body.sidebar-collapsed .sidebar {
  width: 82px;
  min-width: 0;
  max-width: 82px;
  padding-right: 12px;
  padding-left: 12px;
}

body.sidebar-collapsed .brand div,
body.sidebar-collapsed .nav-item .nav-label,
body.sidebar-collapsed .nav-sublist,
body.sidebar-collapsed .sidebar-user div,
body.sidebar-collapsed .sidebar-status div {
  display: none !important;
}

body.sidebar-collapsed .nav-group {
  gap: 0;
  justify-items: center;
  min-width: 0;
}

body.sidebar-collapsed .nav-item .nav-badge {
  display: inline-grid;
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.66rem;
}

body.sidebar-collapsed .brand,
body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .sidebar-user,
body.sidebar-collapsed .sidebar-status {
  justify-content: center;
}

body.sidebar-collapsed .brand {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-inline: 0;
}

body.sidebar-collapsed .sidebar-toggle {
  margin-left: 0;
}

body.sidebar-collapsed .nav-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 0;
  gap: 8px;
}

body.sidebar-collapsed .nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  min-height: 52px;
  margin-inline: auto;
  padding: 0;
  border-radius: 8px;
  overflow: visible;
}

body.sidebar-collapsed .nav-group.has-submenu > .nav-item {
  padding-right: 0;
}

body.sidebar-collapsed .nav-item .icon,
body.sidebar-collapsed .nav-item svg {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

body.sidebar-collapsed .nav-item > [data-icon] {
  display: grid;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  place-items: center;
}

body.sidebar-collapsed .nav-group.has-submenu > .nav-item::after {
  content: none;
  display: none;
}

body.sidebar-collapsed .sidebar-user {
  grid-template-columns: 1fr;
}

body.sidebar-collapsed .sidebar-logout {
  display: none;
}

.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #53cf8a;
  box-shadow: 0 0 0 7px rgba(83, 207, 138, 0.16);
}

.main-content {
  min-width: 0;
  padding: 18px 22px 24px;
}

.topbar {
  display: grid;
  grid-template-columns: 1fr;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: var(--shadow);
}

.topbar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

body[data-page="supervisor"] .topbar {
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 12px;
}

body[data-page="supervisor"] .topbar-header {
  align-items: center;
}

body[data-page="supervisor"] .hero-copy {
  display: grid;
  gap: 2px;
}

body[data-page="supervisor"] .hero-copy h1 {
  margin: 0;
  font-size: 1.24rem;
  line-height: 1.1;
}

body[data-page="supervisor"] .hero-copy .eyebrow {
  margin: 0;
  font-size: 0.64rem;
}

body[data-page="supervisor"] .hero-copy .subtitle,
body[data-page="supervisor"] .top-actions {
  display: none;
}

body[data-page="reporting"] .topbar {
  gap: 10px;
  margin-bottom: 12px;
}

body[data-page="reporting"] .top-actions {
  display: none;
}

.hero-copy {
  min-width: 0;
}

.top-preferences {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  padding: 5px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: var(--surface-strong);
  box-shadow: none;
}

.notification-inbox-shell {
  position: relative;
  display: inline-flex;
}

.notification-inbox-shell[hidden] {
  display: none;
}

.notification-bell-button {
  position: relative;
  width: 42px;
  min-width: 42px;
  padding: 0;
}

.notification-bell-button.has-critical {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, var(--surface-strong));
}

.notification-bell-label {
  font-size: 0.72rem;
  font-weight: 900;
}

.notification-bell-badge,
.notification-critical-dot {
  position: absolute;
  pointer-events: none;
}

.notification-bell-badge {
  top: -5px;
  right: -5px;
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding: 0 5px;
  border: 2px solid var(--panel-bg);
  border-radius: 999px;
  background: var(--red);
  color: white;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(220, 38, 38, 0.28);
}

.notification-bell-badge[hidden],
.notification-critical-dot[hidden] {
  display: none;
}

.notification-critical-dot {
  right: 8px;
  bottom: 7px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--panel-bg);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
}

.notification-inbox-drawer {
  --notification-drawer-top: 74px;
  --notification-drawer-right: max(16px, env(safe-area-inset-right));
  position: fixed;
  top: var(--notification-drawer-top);
  right: var(--notification-drawer-right);
  z-index: 221;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 10px;
  width: min(460px, calc(100vw - 32px));
  max-height: min(720px, calc(100dvh - var(--notification-drawer-top) - 16px));
  padding: 12px;
  border-radius: 8px;
  overflow: hidden;
}

.notification-inbox-drawer[hidden] {
  display: none;
}

.notification-inbox-header,
.notification-inbox-title-row,
.notification-inbox-summary,
.notification-inbox-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.notification-inbox-header {
  justify-content: space-between;
}

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

.notification-inbox-header strong,
.notification-inbox-item strong,
.notification-inbox-item p {
  overflow-wrap: anywhere;
}

.notification-inbox-header small,
.notification-inbox-meta small {
  color: var(--muted);
}

.notification-inbox-summary {
  justify-content: flex-start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.notification-inbox-summary span {
  display: grid;
  gap: 2px;
  min-width: 64px;
}

.notification-inbox-summary strong {
  font-size: 1rem;
}

.notification-mark-all-read {
  min-height: 34px;
  margin-left: auto;
  padding-inline: 10px;
}

.notification-mark-all-read .icon {
  width: 15px;
  height: 15px;
}

.notification-inbox-tabs {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 4px;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.notification-inbox-tabs .settings-tab {
  flex: 0 0 auto;
  min-height: 32px;
  padding-inline: 10px;
  font-size: 0.76rem;
  white-space: nowrap;
}

.notification-inbox-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.notification-inbox-group {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.notification-group-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 94%, var(--surface));
}

.notification-group-heading strong {
  overflow-wrap: anywhere;
}

.notification-inbox-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: var(--surface);
}

.notification-inbox-item.unread {
  background: color-mix(in srgb, var(--surface) 86%, var(--blue) 8%);
}

.notification-inbox-item.severity-warning {
  border-left-color: var(--gold);
}

.notification-inbox-item.severity-high,
.notification-inbox-item.severity-critical {
  border-left-color: var(--red);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--red) 9%, transparent), transparent 62%),
    var(--surface);
}

.notification-inbox-item-main,
.notification-inbox-meta {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.notification-inbox-title-row {
  align-items: flex-start;
  justify-content: space-between;
}

.notification-inbox-title-row strong {
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.25;
}

.notification-card__markers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.notification-critical-label {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--red) 12%, var(--panel-bg));
  color: var(--red);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.notification-inbox-item p {
  margin: 0;
  color: var(--muted);
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.notification-inbox-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.notification-inbox-actions {
  align-self: start;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.notification-meta-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, var(--line));
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.notification-meta-chip--date,
.notification-meta-chip--related {
  min-height: auto;
  padding-inline: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.notification-meta-chip--unread {
  color: color-mix(in srgb, var(--blue) 82%, var(--ink));
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}

.my-work-notification-group-list {
  display: grid;
  gap: 8px;
  margin-block: 10px 12px;
}

.my-work-notification-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.my-work-notification-group:hover,
.my-work-notification-group:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 46%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
  outline: 0;
}

.my-work-notification-group.severity-high {
  border-left-color: var(--red);
}

.my-work-notification-group.unread {
  background: color-mix(in srgb, var(--surface) 88%, var(--blue) 8%);
}

.my-work-notification-group > span:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.my-work-notification-group strong,
.my-work-notification-group small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.my-work-notification-group small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.my-work-notification-group-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.my-work-notification-group-meta em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-bg) 84%, var(--line));
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
}

.my-work-notification-group-meta em.unread {
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
  color: color-mix(in srgb, var(--blue) 82%, var(--ink));
}

.notification-inbox-item.severity-high .notification-meta-chip--state,
.notification-inbox-item.severity-critical .notification-meta-chip--state {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
}

.notification-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.notification-action-icon .icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.25;
}

.notification-action-icon:hover {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
}

.notification-action-icon:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.staff-dashboard-heading {
  align-items: center;
}

.staff-dashboard-heading .primary-button {
  white-space: nowrap;
}

.staff-summary-grid .business-report-card h3,
.staff-work-grid .business-report-card h3 {
  overflow-wrap: anywhere;
}

.operations-domain-grid .workspace-boundary-item,
.workspace-guide-item {
  min-width: 0;
}

.operations-domain-grid .mini-button {
  justify-content: center;
  margin-top: 4px;
  width: 100%;
}

.notification-unread-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
}

.notification-inbox-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 2px 2px 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.preference-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.preference-pill:hover,
.preference-pill:focus-within {
  border-color: rgba(47, 123, 194, 0.22);
  background: color-mix(in srgb, var(--panel) 82%, white);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.preference-pill svg {
  width: 18px;
  height: 18px;
  color: var(--blue);
}

.language-preference select {
  width: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
}

.theme-toggle-icon {
  width: 42px;
  padding: 0;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 8px;
  font-size: 3.15rem;
  line-height: 1;
}

h2 {
  margin-bottom: 0;
  font-size: 1.08rem;
  line-height: 1.25;
}

h3 {
  margin-bottom: 8px;
  font-size: 0.98rem;
}

.subtitle {
  max-width: 620px;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.top-actions {
  display: block;
  width: 100%;
}

.filter-toolbar {
  display: grid;
  grid-template-columns: minmax(170px, 0.32fr) minmax(420px, 1fr) minmax(220px, 0.46fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.78)),
    var(--panel-bg);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px);
}

.filter-toolbar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 2px 4px;
}

.filter-toolbar-title > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.filter-toolbar-title small {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.filter-toolbar-title strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.control-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 14%, white), color-mix(in srgb, var(--green) 12%, white));
  color: var(--blue);
}

.control-icon svg {
  width: 18px;
  height: 18px;
}

.control-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.control-copy small,
.date-filter span,
.division-select .control-copy small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.control-copy strong {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1;
}

.control-pill select {
  width: auto;
  min-width: 64px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
}

.date-filter {
  display: grid;
  grid-template-columns: auto minmax(118px, 1fr) auto minmax(118px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.date-filter label {
  display: grid;
  gap: 3px;
}

.date-filter-divider {
  width: 1px;
  height: 34px;
  background: rgba(148, 163, 184, 0.34);
}

.date-filter input {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.93rem;
  font-weight: 900;
}

.filter-apply-button {
  min-height: 36px;
  padding: 0 14px;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
}

.division-select,
.admin-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.division-select {
  min-width: 220px;
}

.division-select select {
  min-height: 28px;
  padding: 0 28px 0 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.93rem;
  font-weight: 900;
}

select,
input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 82%, white);
  color: var(--ink);
  outline: none;
}

body[data-theme="dark"] select,
body[data-theme="dark"] input,
body[data-theme="dark"] textarea {
  background: #0f172a;
}

body[data-theme="dark"] .filter-toolbar,
body[data-theme="dark"] .control-pill,
body[data-theme="dark"] .date-filter,
body[data-theme="dark"] .division-select,
body[data-theme="dark"] .top-preferences,
body[data-theme="dark"] .preference-pill:hover,
body[data-theme="dark"] .preference-pill:focus-within {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark"] .control-icon {
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(20, 184, 166, 0.16));
  color: #bfdbfe;
}

body[data-theme="dark"] .preference-pill svg {
  color: #bfdbfe;
}

body[data-theme="dark"] .control-pill select,
body[data-theme="dark"] .date-filter input,
body[data-theme="dark"] .division-select select,
body[data-theme="dark"] .language-preference select {
  background: transparent;
  color: var(--ink);
}

select {
  min-height: 34px;
  padding: 0 34px 0 10px;
}

input,
textarea {
  padding: 11px 12px;
}

textarea {
  min-height: 92px;
  resize: vertical;
}

.admin-badge {
  min-width: 144px;
}

.admin-badge span {
  width: 34px;
  height: 34px;
  font-size: 0.76rem;
}

.admin-badge small {
  color: var(--muted);
}

.division-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.pending-approval-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel) 94%, white);
  box-shadow: 0 10px 28px rgba(33, 28, 22, 0.06);
}

.pending-approval-banner[hidden] {
  display: none;
}

.pending-approval-banner > span {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--gold) 14%, var(--surface));
  color: var(--gold);
  flex: 0 0 auto;
}

.pending-approval-banner strong,
.pending-approval-banner p {
  margin: 0;
}

.pending-approval-banner p {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.4;
}

body[data-account-state="pending-approval"] .top-actions,
body[data-account-state="pending-approval"] .nav-item[data-section]:not([data-section="settings"]),
body[data-account-state="pending-approval"] .mobile-nav-item[data-section]:not([data-section="settings"]),
body[data-account-state="pending-approval"] .mobile-more-item[data-section],
body[data-account-state="pending-approval"] .nav-subitem:not([data-open-settings-tab="profile"]),
body[data-account-state="pending-approval"] .mobile-more-item[data-open-settings-tab]:not([data-open-settings-tab="profile"]) {
  display: none !important;
}

body[data-account-state="pending-approval"] .pending-approval-banner {
  margin-top: 0;
}

.division-card,
.metric-card,
.module-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: 0 12px 34px rgba(33, 28, 22, 0.08);
}

.division-card {
  display: grid;
  gap: 12px;
  min-height: 138px;
  padding: 13px;
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease;
}

.division-card:hover,
.division-card.active {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.icon-badge {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, white);
}

.division-card strong {
  display: block;
  font-size: 0.92rem;
}

.division-card-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.division-card-head > span:last-child {
  min-width: 0;
}

.division-card-head strong,
.division-card-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.division-card small {
  color: var(--muted);
  line-height: 1.4;
}

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

.division-kpi-line > span {
  min-width: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.division-kpi-line b,
.division-kpi-line small {
  display: block;
}

.division-kpi-line b {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1;
}

.division-kpi-line small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.division-trend-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

.division-progress {
  display: block;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.division-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 54%, #22c55e));
}

.status-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(20, 135, 85, 0.1);
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 800;
}

.status-pill.watch {
  background: rgba(184, 135, 47, 0.12);
  color: var(--gold);
}

.status-pill.action {
  background: rgba(192, 84, 67, 0.12);
  color: var(--red);
}

.status-pill.warning {
  background: rgba(184, 135, 47, 0.12);
  color: var(--gold);
}

.status-pill.success {
  background: rgba(20, 135, 85, 0.1);
  color: var(--green);
}

.status-pill.status-blue {
  background: color-mix(in srgb, var(--blue) 12%, var(--panel));
  color: var(--blue);
}

.status-pill.status-muted {
  background: color-mix(in srgb, var(--muted) 12%, var(--panel));
  color: var(--muted);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.metric-card {
  position: relative;
  overflow: hidden;
  min-height: 92px;
  padding: 13px 14px;
}

.metric-card::after {
  content: none;
}

.metric-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.metric-card strong {
  position: relative;
  display: block;
  margin: 7px 0 4px;
  font-size: 1.55rem;
  line-height: 1;
}

.metric-card small {
  color: var(--green);
  font-weight: 800;
}

.metric-source-line {
  display: block;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  color: var(--muted) !important;
  font-size: 10px;
  text-transform: uppercase;
}

.metric-card-risk small,
.metric-card-risk strong {
  color: var(--red);
}

.metric-card-sla small,
.metric-card-sources small,
.metric-card-adoption small {
  color: var(--blue);
}

.operational-inbox-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.operational-inbox-heading {
  align-items: flex-start;
}

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

.operational-inbox-metrics span {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.operational-inbox-metrics small,
.operational-inbox-metrics strong {
  display: block;
  min-width: 0;
}

.operational-inbox-metrics small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operational-inbox-metrics strong {
  margin-top: 3px;
  font-size: 1.08rem;
}

.operational-inbox-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.operational-inbox-tabs .settings-tab {
  flex: 0 0 auto;
  white-space: nowrap;
}

.operational-inbox-tabs .settings-tab small {
  margin-left: 4px;
  color: inherit;
  opacity: 0.75;
}

.command-center-orientation {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) minmax(220px, 0.9fr) minmax(220px, 0.9fr);
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 7%, var(--panel-bg)), color-mix(in srgb, var(--green) 7%, var(--panel-bg)) 52%, color-mix(in srgb, var(--gold) 5%, var(--panel-bg)));
}

.command-center-identity,
.command-center-orientation-tile {
  min-width: 0;
}

.command-center-identity {
  display: grid;
  gap: 10px;
  align-content: start;
}

.command-center-identity h2,
.command-center-identity p,
.command-center-orientation-tile h3,
.command-center-orientation-tile p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.command-center-identity h2 {
  font-size: 1.35rem;
  line-height: 1.12;
}

.command-center-identity p {
  color: var(--muted);
  line-height: 1.45;
}

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

.command-center-identity-grid span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 82%, var(--surface));
}

.command-center-identity-grid small,
.command-center-orientation-tile small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.command-center-identity-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.command-center-orientation-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-content: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 88%, var(--surface));
}

.command-center-orientation-tile.insight {
  border-left-color: var(--green);
}

.command-center-orientation-tile > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
}

.command-center-orientation-tile.insight > span {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
}

.command-center-orientation-tile h3 {
  margin-top: 3px;
  font-size: 1rem;
  line-height: 1.22;
}

.command-center-orientation-tile p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.command-center-orientation-tile > .mini-button {
  grid-column: 1 / -1;
  justify-self: start;
}

.command-center-ai-strip {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(260px, 1.2fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 6%, var(--panel));
}

.command-center-ai-copy,
.command-center-ai-item {
  min-width: 0;
}

.command-center-ai-copy h3,
.command-center-ai-copy p,
.command-center-ai-copy small,
.command-center-ai-item strong,
.command-center-ai-item p {
  margin: 0;
  overflow-wrap: anywhere;
}

.command-center-ai-copy small,
.command-center-ai-item p {
  color: var(--muted);
}

.command-center-ai-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(70px, 1fr));
  gap: 8px;
}

.command-center-ai-metrics span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.command-center-ai-metrics small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.command-center-ai-metrics strong {
  font-size: 1.12rem;
  line-height: 1;
}

.command-center-ai-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.command-center-ai-item {
  display: grid;
  gap: 5px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.command-center-layer-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.command-center-layer-label::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.metric-grid::before {
  content: "Ringkasan Operasional";
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.my-work-tabs {
  margin: 6px 0;
}

.my-work-tabs .settings-tab {
  gap: 6px;
  min-width: max-content;
}

.my-work-tabs .settings-tab .icon {
  width: 16px;
  height: 16px;
}

.my-work-now-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line));
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 7%, var(--panel-bg));
}

.my-work-now-panel .panel-heading {
  align-items: flex-start;
}

.my-work-now-panel .panel-heading > div {
  min-width: 0;
}

.my-work-now-panel .panel-heading small {
  display: block;
  max-width: 920px;
}

.my-work-data-cluster {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  min-width: min(100%, 360px);
}

.my-work-data-cluster > .chip {
  align-self: center;
}

.my-work-count-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.my-work-count-filter {
  --work-filter: var(--blue);
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 28px;
  max-width: none;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--work-filter) 22%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--work-filter) 5%, var(--panel));
  color: color-mix(in srgb, var(--work-filter) 74%, var(--ink));
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}

.my-work-count-filter.filter-open {
  --work-filter: #2563eb;
}

.my-work-count-filter.filter-dueToday {
  --work-filter: #d97706;
}

.my-work-count-filter.filter-aiSupervisor {
  --work-filter: #7c3aed;
}

.my-work-count-filter.filter-humanSupervisor {
  --work-filter: #059669;
}

.my-work-count-filter:hover {
  border-color: color-mix(in srgb, var(--work-filter) 48%, var(--line));
  background: color-mix(in srgb, var(--work-filter) 9%, var(--panel));
}

.my-work-count-filter:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--work-filter) 22%, transparent);
  outline-offset: 2px;
}

.my-work-count-filter.active {
  border-color: color-mix(in srgb, var(--work-filter) 64%, var(--line));
  background: color-mix(in srgb, var(--work-filter) 14%, var(--panel-bg));
  color: color-mix(in srgb, var(--work-filter) 88%, var(--ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--work-filter) 22%, transparent);
}

.my-work-count-filter small {
  min-width: 0;
  max-width: none;
  color: currentColor;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.my-work-count-filter strong {
  color: currentColor;
  font-size: 0.88rem;
  line-height: 1;
}

.my-work-now-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.my-work-now-list,
.my-work-now-facts {
  min-width: 0;
}

.my-work-now-facts {
  display: grid;
  gap: 8px;
}

.my-work-now-facts span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.my-work-now-facts small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.my-work-now-facts strong {
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
}

.my-work-open-link {
  justify-self: end;
}

.my-work-signal-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.my-work-signal-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.my-work-signal-card .panel-heading .mini-button {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}

.notification-signal-card {
  border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
}

.ai-signal-card {
  border-color: color-mix(in srgb, var(--green) 22%, var(--line));
}

.my-work-signal-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.my-work-signal-metrics span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.my-work-signal-metrics small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.my-work-signal-metrics strong {
  font-size: 1.14rem;
  line-height: 1;
}

.my-work-signal-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.my-work-signal-row {
  display: grid;
  gap: 4px;
  min-width: 0;
  width: 100%;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

button.my-work-signal-row {
  cursor: pointer;
}

.my-work-signal-row strong,
.my-work-signal-row small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.my-work-signal-row small {
  color: var(--muted);
}

.my-work-signal-row-header {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.my-work-signal-row-header strong {
  flex: 1 1 auto;
}

.my-work-signal-row-header .chip {
  flex: 0 0 auto;
}

.my-work-signal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.my-work-section,
.my-work-overview {
  display: grid;
  gap: 10px;
}

.my-work-command-summary {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-bg) 92%, var(--blue) 6%), color-mix(in srgb, var(--panel-bg) 94%, var(--green) 5%));
}

.my-work-command-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.my-work-command-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.my-work-command-head h2,
.my-work-command-head small,
.my-work-command-feed strong,
.my-work-command-feed p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.my-work-command-head h2 {
  font-size: 1.24rem;
  line-height: 1.15;
}

.my-work-command-head small,
.my-work-command-feed p {
  color: var(--muted);
  line-height: 1.4;
}

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

.my-work-command-metrics span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 86%, var(--surface));
}

.my-work-command-metrics small,
.my-work-command-feed small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.my-work-command-metrics strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.my-work-command-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.my-work-command-feed article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 90%, var(--surface));
}

.my-work-command-feed article > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
}

.my-work-command-feed article:nth-child(2) > span {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
}

.my-work-command-feed article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.my-work-command-feed strong {
  font-size: 0.96rem;
  line-height: 1.2;
}

.my-work-command-feed p {
  font-size: 0.8rem;
}

.my-work-action-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.my-work-action-summary span {
  min-height: 58px;
  padding: 8px;
}

.my-work-action-summary strong {
  font-size: 1.2rem;
  line-height: 1;
}

.my-work-snapshot span {
  align-items: flex-start;
}

.my-work-snapshot em {
  color: var(--muted);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 700;
}

.my-work-priority-list {
  display: grid;
  gap: 10px;
}

.my-work-priority-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.my-work-priority-item.warning {
  border-color: color-mix(in srgb, #f59e0b 42%, var(--line));
}

.my-work-priority-item strong,
.my-work-priority-item p {
  display: block;
  margin: 4px 0;
  overflow-wrap: anywhere;
}

.supervisor-performance-layer .supervisor-accountability-rollups {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.supervisor-performance-layer .supervisor-intel-bucket,
.supervisor-performance-layer .calendar-preview-box,
.supervisor-performance-layer .supervisor-rollup-list article {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.supervisor-performance-layer .reporting-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.supervisor-performance-layer .reporting-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.supervisor-performance-layer .reporting-table th,
.supervisor-performance-layer .reporting-table td {
  max-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.operational-inbox-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.operational-inbox-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: var(--panel-bg);
}

.operational-inbox-item.critical {
  border-left-color: var(--red);
}

.operational-inbox-item.warning {
  border-left-color: var(--gold);
}

.operational-inbox-item.info {
  border-left-color: var(--green);
}

.operational-inbox-item.unread {
  background: color-mix(in srgb, var(--blue) 5%, var(--panel-bg));
}

.operational-inbox-main,
.operational-inbox-title {
  min-width: 0;
}

.operational-inbox-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.operational-inbox-title strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.94rem;
}

.operational-inbox-item p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.operational-inbox-chips,
.operational-inbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.operational-inbox-chips {
  margin-top: 8px;
}

.reason-chip {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, var(--panel));
}

.operational-inbox-actions {
  max-width: 310px;
  justify-content: flex-end;
  align-content: flex-start;
}

.operational-inbox-actions .mini-button {
  min-height: 32px;
}

body[data-page="dashboard"] .operational-inbox-panel {
  gap: 10px;
}

body[data-page="dashboard"] .topbar {
  gap: 12px;
  padding: 12px 18px;
}

body[data-page="dashboard"] .hero-copy h1 {
  font-size: 2.85rem;
}

body[data-page="dashboard"] .operational-inbox-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

body[data-page="dashboard"] .operational-inbox-item {
  grid-template-columns: minmax(0, 1fr);
  padding: 8px 10px;
}

body[data-page="dashboard"] .operational-inbox-item p,
body[data-page="dashboard"] .operational-inbox-actions {
  display: none;
}

body[data-page="dashboard"] .operational-inbox-chips {
  margin-top: 6px;
}

body[data-page="dashboard"] .metric-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

body[data-page="dashboard"] .metric-card {
  min-height: 78px;
  padding: 10px;
}

body[data-page="dashboard"] .metric-card strong {
  font-size: 1.18rem;
}

.command-center-more-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.command-center-more-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm-command-panel {
  margin-bottom: 16px;
  overflow: visible;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 34%),
    radial-gradient(circle at 100% 14%, color-mix(in srgb, var(--green) 12%, transparent), transparent 32%),
    var(--panel-bg);
}

.crm-command-body {
  display: grid;
  gap: 14px;
}

.crm-command-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.crm-command-kpi {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.crm-command-kpi > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}

.crm-command-kpi .icon {
  width: 18px;
  height: 18px;
}

.crm-command-kpi small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.crm-command-kpi strong {
  font-size: clamp(1.45rem, 2.2vw, 2.1rem);
  line-height: 1;
}

.crm-command-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.crm-command-card {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 94%, white);
}

.crm-focus-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-bg) 94%, white), color-mix(in srgb, var(--panel-bg) 90%, #eef2ff));
}

.crm-card-heading,
.crm-focus-header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.crm-card-heading > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
}

.crm-card-heading .icon {
  width: 19px;
  height: 19px;
}

.crm-card-heading strong,
.crm-ticket-item strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
}

.crm-card-heading small,
.crm-ticket-item small,
.crm-mini-grid small,
.crm-next-action small,
.crm-focus-header small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
}

.crm-stage-list,
.crm-ticket-list {
  display: grid;
  gap: 9px;
}

.crm-stage-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 8px;
  align-items: center;
}

.crm-stage-line span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  color: var(--ink);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-stage-line span i {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--dot);
}

.crm-stage-line strong {
  color: var(--muted);
  font-size: 0.78rem;
}

.crm-stage-bar {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 65%, transparent);
}

.crm-stage-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--bar);
}

.crm-insight-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.crm-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.crm-card-actions .secondary-button,
.crm-card-actions .primary-button {
  min-height: 38px;
  text-decoration: none;
}

.crm-focus-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
}

.crm-focus-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: white;
  background: linear-gradient(135deg, #ef4444, #2563eb);
  font-weight: 900;
}

.crm-focus-header strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 1.1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-focus-header div > span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-stage-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 150px;
  padding: 6px 10px;
  overflow: hidden;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-stage-chip.active {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 13%, var(--surface));
}

.crm-stage-chip.reactivation {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 15%, var(--surface));
}

.crm-stage-chip.follow-up {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}

.crm-stage-chip.prospect {
  color: #7c3aed;
  background: color-mix(in srgb, #8b5cf6 13%, var(--surface));
}

.crm-stage-chip.default {
  color: var(--muted);
  background: var(--surface);
}

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

.crm-mini-grid > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.crm-mini-grid strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-next-action {
  padding: 10px 12px;
  border-left: 4px solid var(--green);
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
}

.crm-next-action p {
  margin: 4px 0 0;
  line-height: 1.45;
}

.crm-ticket-item {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.crm-ticket-item small,
.crm-ticket-item p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.crm-ticket-item small {
  -webkit-line-clamp: 2;
  text-transform: none;
}

.crm-ticket-item p {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.45;
  -webkit-line-clamp: 3;
}

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

.crm-action-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  gap: 4px 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.crm-action-card .icon {
  width: 20px;
  height: 20px;
  color: var(--blue);
}

.crm-action-card span,
.crm-action-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-action-card span {
  font-weight: 900;
}

.crm-action-card small {
  grid-column: 2;
  color: var(--muted);
}

.crm-action-card:hover {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.empty-state.compact {
  min-height: auto;
  padding: 12px;
  font-size: 0.86rem;
  line-height: 1.35;
}

@media (max-width: 1180px) {
  .crm-command-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-command-layout,
  .crm-action-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .crm-command-kpis,
  .crm-mini-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-focus-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .crm-stage-chip {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .crm-command-kpi small,
  .crm-action-card span,
  .crm-action-card small {
    white-space: normal;
  }
}

@media (max-width: 900px) {
  .command-center-orientation,
  .command-center-ai-strip,
  .my-work-signal-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .command-center-ai-strip > .mini-button {
    justify-self: start;
  }
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 318px;
  gap: 14px;
  align-items: start;
}

.primary-stack,
.right-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

body[data-page="dashboard"] #workflowPanel,
body[data-page="dashboard"] #settingsPanel,
body[data-page="dashboard"] #integrationsPanel,
body[data-page="dashboard"] #workspaceChatPanel,
body[data-page="dashboard"] #directMessagePanel,
body[data-page="dashboard"] #supervisorPagePanel,
body[data-page="dashboard"] #reportingPagePanel,
body[data-page="dashboard"] #communicationPagePanel,
body[data-page="dashboard"] #knowledgePagePanel,
body[data-page="dashboard"] #aiInvestigationPagePanel,
body[data-page="dashboard"] #modulesPanel,
body[data-page="dashboard"] #tasksPanel,
body[data-page="dashboard"] #sellerPanel,
body[data-page="dashboard"] #analyticsPanel,
body[data-page="dashboard"] #analyticsChatPanel,
body[data-page="dashboard"] #crmCommandPanel,
body[data-page="dashboard"] #aiPanel,
body[data-page="dashboard"] #liveChatPanel {
  display: none;
}

body[data-page="dashboard"] .right-rail #integrationsPanel {
  display: grid;
}

body[data-page="dashboard"] .workspace-grid {
  display: none;
  grid-template-columns: minmax(0, 1fr);
}

body[data-page="dashboard"] .primary-stack {
  display: none;
}

body[data-page="dashboard"] .right-rail {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
  width: 100%;
}

body:not([data-page="dashboard"]) .operational-inbox-panel,
.operational-inbox-panel:empty,
.work-summary-panel:empty {
  display: none;
}

body[data-page="workflow"] .division-strip,
body[data-page="workflow"] .metric-grid,
body[data-page="workflow"] .work-summary-panel,
body[data-page="workflow"] .crm-command-panel,
body[data-page="integrations"] .division-strip,
body[data-page="integrations"] .metric-grid,
body[data-page="integrations"] .work-summary-panel,
body[data-page="integrations"] .crm-command-panel,
body[data-page="settings"] .division-strip,
body[data-page="settings"] .metric-grid,
body[data-page="settings"] .work-summary-panel,
body[data-page="settings"] .crm-command-panel,
body[data-page="profile"] .division-strip,
body[data-page="profile"] .metric-grid,
body[data-page="profile"] .work-summary-panel,
body[data-page="profile"] .crm-command-panel,
body[data-page="supervisor"] .division-strip,
body[data-page="supervisor"] .metric-grid,
body[data-page="supervisor"] .work-summary-panel,
body[data-page="supervisor"] .crm-command-panel,
body[data-page="tools"] .division-strip,
body[data-page="tools"] .metric-grid,
body[data-page="tools"] .work-summary-panel,
body[data-page="tools"] .crm-command-panel,
body[data-page="reporting"] .division-strip,
body[data-page="reporting"] .metric-grid,
body[data-page="reporting"] .work-summary-panel,
body[data-page="reporting"] .crm-command-panel,
body[data-page="communication"] .division-strip,
body[data-page="communication"] .metric-grid,
body[data-page="communication"] .work-summary-panel,
body[data-page="communication"] .crm-command-panel,
body[data-page="knowledge"] .division-strip,
body[data-page="knowledge"] .metric-grid,
body[data-page="knowledge"] .work-summary-panel,
body[data-page="knowledge"] .crm-command-panel,
body[data-page="ai-investigation"] .division-strip,
body[data-page="ai-investigation"] .metric-grid,
body[data-page="ai-investigation"] .work-summary-panel,
body[data-page="ai-investigation"] .crm-command-panel,
body[data-page="workspace-chat"] .division-strip,
body[data-page="workspace-chat"] .metric-grid,
body[data-page="workspace-chat"] .work-summary-panel,
body[data-page="workspace-chat"] .crm-command-panel,
body[data-page="direct-message"] .division-strip,
body[data-page="direct-message"] .metric-grid,
body[data-page="direct-message"] .work-summary-panel,
body[data-page="direct-message"] .crm-command-panel {
  display: none;
}

body[data-page="workflow"] .workspace-grid,
body[data-page="integrations"] .workspace-grid,
body[data-page="settings"] .workspace-grid,
body[data-page="profile"] .workspace-grid,
body[data-page="supervisor"] .workspace-grid,
body[data-page="tools"] .workspace-grid,
body[data-page="reporting"] .workspace-grid,
body[data-page="communication"] .workspace-grid,
body[data-page="knowledge"] .workspace-grid,
body[data-page="ai-investigation"] .workspace-grid,
body[data-page="workspace-chat"] .workspace-grid,
body[data-page="direct-message"] .workspace-grid {
  display: block;
}

body[data-page="workflow"] .primary-stack > .panel:not(#workflowPanel),
body[data-page="settings"] .primary-stack > .panel:not(#settingsPanel),
body[data-page="profile"] .primary-stack > .panel:not(#settingsPanel),
body[data-page="supervisor"] .primary-stack > .panel:not(#supervisorPagePanel),
body[data-page="tools"] .primary-stack > .panel:not(#modulesPanel),
body[data-page="reporting"] .primary-stack > .panel:not(#reportingPagePanel),
body[data-page="communication"] .primary-stack > .panel:not(#communicationPagePanel),
body[data-page="knowledge"] .primary-stack > .panel:not(#knowledgePagePanel),
body[data-page="ai-investigation"] .primary-stack,
body[data-page="workspace-chat"] .primary-stack > .panel:not(#workspaceChatPanel),
body[data-page="direct-message"] .primary-stack > .panel:not(#directMessagePanel),
body[data-page="workflow"] .right-rail,
body[data-page="settings"] .right-rail,
body[data-page="profile"] .right-rail,
body[data-page="supervisor"] .right-rail,
body[data-page="tools"] .right-rail,
body[data-page="reporting"] .right-rail,
body[data-page="communication"] .right-rail,
body[data-page="knowledge"] .right-rail,
body[data-page="workspace-chat"] .right-rail,
body[data-page="direct-message"] .right-rail,
body[data-page="integrations"] .primary-stack,
body[data-page="ai-investigation"] .right-rail > .panel:not(#aiInvestigationPagePanel),
body[data-page="integrations"] .right-rail > .panel:not(#integrationsPanel) {
  display: none;
}

body[data-page="workflow"] #workflowPanel,
body[data-page="settings"] #settingsPanel,
body[data-page="profile"] #settingsPanel,
body[data-page="integrations"] #integrationsPanel,
body[data-page="supervisor"] #supervisorPagePanel,
body[data-page="tools"] #modulesPanel,
body[data-page="reporting"] #reportingPagePanel,
body[data-page="communication"] #communicationPagePanel,
body[data-page="knowledge"] #knowledgePagePanel,
body[data-page="ai-investigation"] #aiInvestigationPagePanel,
body[data-page="workspace-chat"] #workspaceChatPanel,
body[data-page="direct-message"] #directMessagePanel {
  display: grid;
  width: 100%;
}

body[data-page="integrations"] .right-rail {
  display: grid;
  grid-template-columns: 1fr;
}

body[data-page="ai-investigation"] .workspace-grid {
  grid-template-columns: minmax(0, 1fr);
}

body[data-page="ai-investigation"] .right-rail {
  display: grid;
  grid-template-columns: 1fr;
}

.panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

.ia-page-panel {
  gap: 16px;
}

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

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

.ia-shell-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 126px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 76%, var(--surface));
}

.knowledge-workspace,
.knowledge-section,
.knowledge-policy-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.knowledge-tabs .settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.knowledge-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(150px, 0.75fr) minmax(150px, 0.75fr) minmax(150px, 0.75fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 70%, var(--panel-bg));
}

.knowledge-controls label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.knowledge-controls label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.knowledge-controls input,
.knowledge-controls select {
  width: 100%;
}

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

.knowledge-faq-summary article {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 76%, var(--panel-bg));
}

.knowledge-faq-summary article.wide {
  grid-column: span 2;
}

.knowledge-faq-summary article.needs-attention {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
  background: color-mix(in srgb, var(--gold) 10%, var(--surface));
}

.knowledge-faq-summary article > span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.knowledge-faq-summary article.needs-attention > span {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}

.knowledge-faq-summary div {
  min-width: 0;
}

.knowledge-faq-summary small,
.knowledge-faq-summary strong {
  display: block;
}

.knowledge-faq-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.knowledge-faq-summary strong {
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-faq-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.knowledge-faq-filter {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.knowledge-faq-filter strong {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel-bg) 82%, var(--surface));
  font-size: 12px;
}

.knowledge-faq-filter.active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.knowledge-faq-filter.active strong {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.knowledge-faq-actions,
.knowledge-faq-row-actions,
.knowledge-faq-form-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.knowledge-faq-actions {
  justify-content: flex-end;
}

.knowledge-faq-row-actions {
  min-width: 180px;
}

.knowledge-faq-form {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 70%, var(--panel-bg));
}

.knowledge-faq-form-head {
  justify-content: space-between;
}

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

.knowledge-faq-form-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.knowledge-faq-form-grid label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.knowledge-faq-form-grid .wide {
  grid-column: 1 / -1;
}

.knowledge-faq-form-grid input,
.knowledge-faq-form-grid select,
.knowledge-faq-form-grid textarea {
  width: 100%;
}

.knowledge-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.knowledge-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
}

.knowledge-table th,
.knowledge-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.knowledge-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  background: color-mix(in srgb, var(--surface) 76%, var(--panel-bg));
}

.knowledge-table tr.is-review-due td {
  background: color-mix(in srgb, var(--gold) 8%, transparent);
}

.knowledge-table tr.is-stale td {
  background: color-mix(in srgb, var(--red) 6%, transparent);
}

.knowledge-table tr.is-review-due td:first-child,
.knowledge-table tr.is-stale td:first-child {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--gold) 70%, var(--accent));
}

.knowledge-table tr.is-stale td:first-child {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--red) 62%, var(--gold));
}

.knowledge-table td strong,
.knowledge-table td small {
  display: block;
}

.knowledge-table td small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.4;
}

.muted-placeholder {
  color: var(--muted);
}

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

.knowledge-source-card,
.knowledge-file-row,
.knowledge-policy-rules article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 82%, var(--surface));
}

.knowledge-source-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.knowledge-card-head,
.knowledge-file-row,
.knowledge-action-row,
.knowledge-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.knowledge-card-head {
  justify-content: space-between;
}

.knowledge-card-head > div,
.knowledge-file-row > div {
  min-width: 0;
  flex: 1;
}

.knowledge-card-head strong,
.knowledge-file-row strong {
  display: block;
}

.knowledge-card-head small,
.knowledge-file-row small,
.knowledge-file-meta small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
}

.knowledge-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--panel-bg));
}

.knowledge-meta-grid,
.knowledge-policy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.knowledge-meta-grid span,
.knowledge-policy-grid article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.knowledge-meta-grid small,
.knowledge-policy-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.knowledge-meta-grid strong,
.knowledge-policy-grid strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-action-row {
  justify-content: space-between;
  flex-wrap: wrap;
}

.knowledge-file-list {
  display: grid;
  gap: 10px;
}

.knowledge-file-row {
  padding: 12px;
}

.knowledge-file-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 150px;
}

.knowledge-policy-explainer,
.knowledge-file-guidance,
.knowledge-form-helper,
.ai-investigation-recommendation {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 6%, var(--surface));
}

.knowledge-policy-explainer > span,
.knowledge-file-guidance > span,
.knowledge-form-helper > span,
.ai-investigation-recommendation > span {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--panel-bg));
}

.knowledge-policy-explainer strong,
.knowledge-policy-explainer small,
.knowledge-file-guidance strong,
.knowledge-file-guidance small,
.knowledge-form-helper strong,
.knowledge-form-helper small,
.ai-investigation-recommendation strong,
.ai-investigation-recommendation small {
  display: block;
  min-width: 0;
}

.knowledge-policy-explainer small,
.knowledge-file-guidance small,
.knowledge-form-helper small,
.ai-investigation-recommendation small {
  color: var(--muted);
  line-height: 1.45;
}

.knowledge-file-preview {
  margin-top: 8px;
}

.knowledge-file-preview summary {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.knowledge-file-preview p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.knowledge-file-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.knowledge-toolbar {
  justify-content: flex-end;
}

.knowledge-policy-rules {
  display: grid;
  gap: 10px;
}

.knowledge-policy-rules article {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.knowledge-policy-rules .icon {
  color: var(--green);
}

.knowledge-answer-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 70%, var(--panel-bg));
}

.ai-investigation-host,
.ai-investigation-workspace {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.ai-investigation-tabs {
  align-items: center;
}

.ai-investigation-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.ai-investigation-kpi {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 88%, var(--surface));
  box-shadow: var(--shadow);
}

.ai-investigation-kpi.critical {
  border-left-color: var(--red);
}

.ai-investigation-kpi.warning {
  border-left-color: var(--gold);
}

.ai-investigation-kpi.success {
  border-left-color: var(--green);
}

.ai-investigation-kpi small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ai-investigation-kpi strong {
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
}

.ai-investigation-kpi span {
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 700;
}

.ai-investigation-alerts,
.ai-investigation-chart-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 88%, var(--surface));
  box-shadow: var(--shadow);
}

.ai-investigation-alert-list {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.ai-investigation-alert {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(132px, auto);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-bg);
}

.ai-investigation-alert:last-child {
  border-bottom: 0;
}

.ai-investigation-alert.critical {
  box-shadow: inset 3px 0 0 var(--red);
}

.ai-investigation-alert.warning {
  box-shadow: inset 3px 0 0 var(--gold);
}

.ai-investigation-alert.info {
  box-shadow: inset 3px 0 0 var(--blue);
}

.ai-investigation-alert-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
}

.ai-investigation-alert.critical .ai-investigation-alert-icon {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
}

.ai-investigation-alert.warning .ai-investigation-alert-icon {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, var(--surface));
}

.ai-investigation-alert strong,
.ai-investigation-alert small {
  display: block;
  min-width: 0;
}

.ai-investigation-alert small {
  color: var(--muted);
  line-height: 1.35;
}

.ai-investigation-alert aside {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.ai-investigation-validation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ai-investigation-donut {
  justify-self: center;
  width: min(260px, 60vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--panel-bg) 0 38%, transparent 39%),
    conic-gradient(var(--blue) 0 calc(var(--a) * 1%), var(--gold) 0 calc((var(--a) + var(--b)) * 1%), var(--red) 0 100%);
}

.ai-investigation-donut.return {
  background:
    radial-gradient(circle at center, var(--panel-bg) 0 38%, transparent 39%),
    conic-gradient(var(--green) 0 calc(var(--a) * 1%), var(--gold) 0 calc((var(--a) + var(--b)) * 1%), var(--red) 0 100%);
}

.knowledge-answer-toolbar label,
.knowledge-article-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.knowledge-answer-toolbar label > span,
.knowledge-article-form label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.knowledge-answer-toolbar input,
.knowledge-answer-toolbar select,
.knowledge-article-form input,
.knowledge-article-form select,
.knowledge-article-form textarea {
  width: 100%;
}

.knowledge-answer-band,
.knowledge-article-stack,
.knowledge-review-mini,
.knowledge-article-detail,
.knowledge-article-form {
  display: grid;
  gap: 12px;
}

.knowledge-article-grid,
.knowledge-dashboard-grid,
.knowledge-detail-grid,
.knowledge-article-meta {
  display: grid;
  gap: 12px;
}

.knowledge-article-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.knowledge-dashboard-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

.knowledge-article-card,
.knowledge-article-detail,
.knowledge-article-form,
.knowledge-review-mini article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 82%, var(--surface));
}

.knowledge-article-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.knowledge-article-card.compact {
  padding: 12px;
}

.knowledge-article-head,
.knowledge-detail-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
}

.knowledge-article-card h3,
.knowledge-article-card p,
.knowledge-article-card strong,
.knowledge-article-card small,
.knowledge-detail-content,
.knowledge-detail-summary {
  overflow-wrap: anywhere;
}

.knowledge-article-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.knowledge-article-card.compact h3 {
  font-size: 15px;
}

.knowledge-article-card p,
.knowledge-detail-summary,
.knowledge-detail-content {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

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

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

.knowledge-article-meta span,
.knowledge-detail-grid article {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.knowledge-article-meta .wide {
  grid-column: 1 / -1;
}

.knowledge-article-meta small,
.knowledge-detail-grid small,
.knowledge-review-mini small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.knowledge-article-meta strong,
.knowledge-detail-grid strong {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.knowledge-review-mini article,
.knowledge-article-detail,
.knowledge-article-form {
  padding: 14px;
}

.knowledge-detail-head h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}

.knowledge-detail-content {
  color: var(--text);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

@media (max-width: 900px) {
  .knowledge-controls,
  .knowledge-answer-toolbar,
  .knowledge-faq-summary,
  .knowledge-faq-form-grid,
  .knowledge-card-grid,
  .knowledge-article-grid,
  .knowledge-dashboard-grid,
  .knowledge-detail-grid,
  .knowledge-article-meta,
  .knowledge-meta-grid,
  .knowledge-policy-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-faq-summary article.wide {
    grid-column: auto;
  }

  .knowledge-faq-actions {
    justify-content: flex-start;
  }

  .knowledge-card-head,
  .knowledge-file-row,
  .knowledge-article-head,
  .knowledge-detail-head {
    align-items: flex-start;
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-file-meta {
    justify-items: start;
  }
}

.reporting-heading {
  align-items: start;
}

.reporting-default-brief {
  display: grid;
  grid-template-columns: minmax(230px, 0.9fr) minmax(320px, 1.25fr) minmax(240px, 0.9fr);
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--green) 8%, var(--panel-bg)), color-mix(in srgb, var(--blue) 6%, var(--panel-bg)) 58%, color-mix(in srgb, var(--gold) 6%, var(--panel-bg)));
}

.reporting-default-main,
.reporting-default-action,
.reporting-default-grid span {
  min-width: 0;
}

.reporting-default-main h2,
.reporting-default-main p,
.reporting-default-action strong,
.reporting-default-action small {
  margin: 0;
  overflow-wrap: anywhere;
}

.reporting-default-main h2 {
  font-size: 1.35rem;
  line-height: 1.12;
}

.reporting-default-main p {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.45;
}

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

.reporting-default-grid span {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 84%, var(--surface));
}

.reporting-default-grid small,
.reporting-default-action small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.reporting-default-grid strong {
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reporting-default-action {
  display: grid;
  gap: 9px;
  align-content: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 88%, var(--surface));
}

.reporting-default-action strong {
  font-size: 0.95rem;
  line-height: 1.3;
}

.report-controls {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, var(--panel-bg));
}

.report-controls > * {
  min-width: 0;
}

.report-controls label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.report-controls label > span,
.report-checkbox span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.report-date-preview {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.report-controls input,
.report-controls select {
  width: 100%;
}

.report-controls .primary-button {
  min-height: 42px;
  white-space: nowrap;
}

.report-controls-action {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.report-fixture-notice {
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid #d97706;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
  font-weight: 700;
}

.report-checkbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
}

.report-checkbox span {
  min-width: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.nav-subitem {
  align-items: flex-start;
  line-height: 1.25;
}

.nav-subitem > span:last-child {
  min-width: 0;
}

.report-checkbox input {
  width: 16px;
  height: 16px;
}

.report-export-card {
  align-self: stretch;
}

.report-export-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

.report-export-controls label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.report-export-controls label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.report-export-controls select {
  width: 100%;
}

.report-export-result {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 7%, var(--panel-bg));
  overflow: hidden;
}

.report-export-result.blocked {
  border-color: color-mix(in srgb, var(--gold) 32%, var(--line));
  background: color-mix(in srgb, var(--gold) 8%, var(--panel-bg));
}

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

.export-provenance-preview {
  max-height: 180px;
  overflow: auto;
}

.reporting-workspace {
  display: grid;
  gap: 14px;
}

.reporting-workspace > .reporting-default-brief {
  order: -4;
}

.reporting-workspace > .report-kpi-grid {
  order: -3;
}

.reporting-workspace > .report-ai-panel {
  order: -2;
}

.reporting-workspace > .module-meta.provenance-chips,
.reporting-workspace > .provenance-chips.privacy-chip-row,
.reporting-workspace > .privacy-summary,
.reporting-workspace > .report-export-card {
  order: 20;
}

.report-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
}

.report-kpi-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 156px;
  padding: 15px 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-bg) 94%, var(--surface)), color-mix(in srgb, var(--surface) 58%, var(--panel-bg)));
}

.report-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
}

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

.report-kpi-card > span,
.report-kpi-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.report-kpi-card > strong,
.report-kpi-value {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1;
}

.report-kpi-card > small,
.report-kpi-note {
  color: var(--muted);
  line-height: 1.4;
}

.report-kpi-card .growth-pill {
  flex: 0 0 auto;
  width: max-content;
}

.report-kpi-signal-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}

.report-kpi-signal-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.report-kpi-signal-row small,
.report-kpi-details-grid small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.report-kpi-signal-row strong,
.report-kpi-details-grid strong {
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.report-kpi-signal-row .status-pill {
  width: max-content;
  max-width: 100%;
  padding: 3px 7px;
  font-size: 0.72rem;
  white-space: normal;
}

.report-kpi-details {
  min-width: 0;
  margin-top: 2px;
  border-top: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
}

.report-kpi-details > summary {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding-top: 8px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.report-kpi-details > summary::-webkit-details-marker {
  display: none;
}

.report-kpi-details > summary span {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
}

.report-kpi-details > summary small {
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-kpi-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
  padding-top: 8px;
}

.report-kpi-details-grid span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 88%, var(--surface));
}

.report-kpi-source-list {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-top: 9px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 5%, var(--panel-bg));
}

.report-kpi-source-head {
  display: flex;
  gap: 8px;
  align-items: start;
  justify-content: space-between;
  min-width: 0;
}

.report-kpi-source-head strong,
.report-kpi-source-list.empty strong {
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.25;
}

.report-kpi-source-head small,
.report-kpi-source-list.empty small {
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: right;
}

.report-kpi-source-list ul {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-kpi-source-list li {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 88%, var(--surface));
}

.report-kpi-source-list li > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.report-kpi-source-list li strong,
.report-kpi-source-list li small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-kpi-source-list li strong {
  font-size: 0.78rem;
}

.report-kpi-source-list li small {
  color: var(--muted);
  font-size: 0.7rem;
}

.report-kpi-source-list li .mini-button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 9px;
}

.report-kpi-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  margin-top: 9px;
}

.report-kpi-detail-actions .mini-button {
  min-height: 32px;
}

.report-kpi-decision-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.report-kpi-decision-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.report-kpi-decision-row small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.report-kpi-decision-row strong {
  min-width: 0;
  font-size: 0.72rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.report-kpi-confidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
  margin-top: 4px;
}

.report-kpi-confidence.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.report-kpi-confidence span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}

.report-kpi-confidence small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.report-kpi-confidence strong {
  min-width: 0;
  font-size: 0.72rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.report-kpi-confidence .status-pill {
  width: max-content;
  max-width: 100%;
  padding: 3px 6px;
  font-size: 0.68rem;
  white-space: normal;
}

.decision-landing {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.report-board-pack {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 62%, transparent), transparent 32%),
    var(--panel-bg);
}

.report-board-pack-header {
  display: flex;
  gap: 14px;
  align-items: start;
  justify-content: space-between;
  min-width: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.report-board-pack-header h3,
.decision-section-heading h3 {
  margin: 0;
  color: var(--ink);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.report-board-pack-header small {
  color: var(--muted);
}

.report-board-pack-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 8px;
  min-width: min(100%, 340px);
}

.report-board-pack-meta span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.report-board-pack-meta small,
.decision-card-index,
.decision-summary-card dt,
.decision-kpi-main span,
.decision-kpi-quadrants small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.report-board-pack-meta strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

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

.decision-summary-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}

.decision-card-index {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-bg);
}

.decision-summary-card header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.decision-summary-card h4,
.decision-summary-card p,
.decision-summary-card dl {
  margin: 0;
}

.decision-summary-card h4 {
  margin-top: 8px;
  font-size: 1.02rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.decision-summary-card p {
  margin-top: 6px;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.45;
}

.decision-summary-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.decision-summary-card div,
.decision-summary-card dd {
  min-width: 0;
}

.decision-summary-card dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.decision-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.decision-section-heading {
  display: flex;
  gap: 10px;
  align-items: end;
  justify-content: space-between;
  min-width: 0;
}

.decision-alert-list,
.decision-action-table {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.decision-alert-card,
.decision-action-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
}

.decision-action-row {
  grid-template-columns: minmax(0, 1fr) minmax(94px, max-content) minmax(220px, 0.55fr);
  align-items: start;
}

.decision-action-row > div {
  min-width: 0;
}

.decision-action-row strong {
  display: block;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.decision-action-row > .status-pill {
  justify-self: start;
  margin-top: 2px;
  max-width: 100%;
  white-space: normal;
}

.decision-action-row .report-action-links {
  justify-self: stretch;
  justify-content: flex-start;
  align-content: start;
  margin-top: 0;
}

.decision-alert-card p,
.decision-action-row small {
  margin: 2px 0 0;
  color: var(--muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.decision-kpi-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 10px;
  min-width: 0;
}

.decision-kpi-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: inset 4px 0 0 var(--accent);
}

.decision-kpi-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.decision-kpi-main strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.decision-kpi-quadrants {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.decision-kpi-quadrants span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}

.decision-kpi-quadrants strong {
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.report-action-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.report-action-links.compact {
  margin-top: 10px;
}

.report-action-links .mini-button {
  max-width: 100%;
}

.report-action-links .mini-button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.decision-taxonomy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px;
  min-width: 0;
}

.decision-taxonomy-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 86%, var(--surface));
}

.decision-taxonomy-card header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.decision-taxonomy-card header > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}

.decision-taxonomy-card strong,
.decision-taxonomy-card small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.decision-taxonomy-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.4;
}

.reporting-filter-details > .report-controls {
  margin: 0 12px 12px;
}

.executive-dashboard-panel {
  display: grid;
  gap: 12px;
}

.executive-dashboard-panel[hidden] {
  display: none;
}

.executive-heading {
  align-items: start;
}

.executive-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 8px;
}

.executive-kpi-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 92px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 84%, var(--surface));
}

.executive-kpi-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.executive-kpi-card strong {
  font-size: 20px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.executive-kpi-card small {
  color: var(--muted);
  line-height: 1.35;
}

.executive-snapshot-grid .business-report-card h3 {
  font-size: 19px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.executive-priority-grid {
  align-items: stretch;
}

.executive-trust-details,
.reporting-source-details {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 88%, var(--surface));
}

.executive-trust-details > summary,
.reporting-source-details > summary {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.executive-trust-details > summary::-webkit-details-marker,
.reporting-source-details > summary::-webkit-details-marker {
  display: none;
}

.executive-trust-details > summary span,
.reporting-source-details > summary span {
  color: var(--ink);
  font-weight: 900;
}

.executive-trust-details > summary small,
.reporting-source-details > summary small {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.executive-trust-details > .business-report-card,
.reporting-source-details > .business-report-card,
.executive-trust-details > .report-section-grid {
  margin: 0 12px 12px;
}

.report-ai-panel,
.business-report-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
}

.business-report-card > *,
.report-ai-panel > * {
  min-width: 0;
}

.report-ai-panel .report-heading,
.business-report-card .report-heading {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
}

.reporting-hierarchy,
.reporting-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin-top: 10px;
}

.reporting-hierarchy span {
  display: grid;
  gap: 3px;
  min-width: 132px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.reporting-hierarchy small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.reporting-hierarchy strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.reporting-hierarchy .status-pill {
  width: max-content;
  max-width: 100%;
  white-space: normal;
}

.reporting-header-actions {
  justify-content: flex-end;
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.report-ai-panel .report-heading > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}

.report-ai-panel .report-heading > .risk-badge,
.report-ai-panel .report-heading > .status-pill,
.business-report-card .report-heading > .risk-badge,
.business-report-card .report-heading > .status-pill {
  width: auto;
  height: auto;
  min-height: 28px;
  padding-inline: 10px;
  white-space: normal;
}

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

.report-ai-grid section {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.report-ai-grid ul {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.report-ai-grid li {
  display: grid;
  gap: 3px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}

.report-ai-grid li span {
  color: var(--muted);
}

.ai-explainability {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 6%, var(--panel-bg));
}

.ai-explainability.compact {
  padding: 8px;
}

.ai-explain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
}

.ai-explain-grid span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ai-explain-grid small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ai-explain-grid strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: normal;
}

.ai-evidence-detail {
  min-width: 0;
}

.ai-evidence-detail summary {
  color: var(--blue);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
}

.ai-evidence-detail small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.report-section-grid {
  display: grid;
  gap: 12px;
}

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

.source-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 10px;
}

.source-status-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.source-status-card strong,
.source-status-card small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.source-status-card small {
  color: var(--muted);
  line-height: 1.4;
}

.report-section-grid .wide-report,
.report-section-grid .report-ai-panel {
  grid-column: 1 / -1;
}

.reporting-tab-groups {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.reporting-report-chooser > .reporting-tab-groups {
  margin: 0 12px 12px;
}

.reporting-tab-group {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.reporting-tab-group-heading {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
}

.workspace-guide-card {
  background: color-mix(in srgb, var(--panel-bg) 88%, var(--surface));
}

.workspace-guide-grid,
.workspace-boundary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 10px;
  min-width: 0;
}

.workspace-guide-item,
.workspace-boundary-item {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.workspace-guide-item strong,
.workspace-boundary-item strong {
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.workspace-guide-item small,
.workspace-boundary-item small {
  color: var(--muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.workspace-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.workspace-link-row .mini-button {
  max-width: 100%;
}

.reporting-tab-group-heading strong,
.reporting-tab-group-heading small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.reporting-tab-group-heading small {
  color: var(--muted);
  font-size: 12px;
}

.finance-workflow-tabs {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--line));
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
}

.reporting-table td strong,
.reporting-table td small {
  display: block;
}

.reporting-table td small {
  margin-top: 2px;
  color: var(--muted);
  line-height: 1.35;
}

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

.report-snapshot-grid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.report-snapshot-grid small {
  color: var(--muted);
  font-size: 12px;
}

.report-snapshot-grid strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.google-workspace-settings-card {
  grid-column: 1 / -1;
}

.google-workspace-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.finance-ocr-workspace {
  display: grid;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
}

.finance-ocr-workspace .business-report-card,
.finance-ocr-workspace .report-ai-panel {
  overflow: hidden;
}

.finance-ocr-workspace .report-heading {
  flex-wrap: wrap;
}

.finance-ocr-workspace .report-heading > * {
  min-width: 0;
}

.finance-ocr-workspace .risk-badge,
.finance-ocr-workspace .status-pill {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.finance-ocr-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.finance-ocr-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.finance-ocr-form label > span,
.finance-ocr-subheading {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.finance-ocr-form .wide {
  grid-column: 1 / -1;
}

.finance-ocr-form input,
.finance-ocr-form select,
.finance-ocr-form textarea,
[data-finance-invoice-filter] {
  width: 100%;
}

.finance-camera-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.finance-camera-preview {
  display: grid;
  place-items: center;
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.finance-camera-preview video,
.finance-camera-preview img {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  display: block;
}

.finance-camera-actions {
  grid-column: auto;
}

.finance-ocr-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.finance-ocr-actions .primary-button,
.finance-ocr-actions .secondary-button,
.compact-aspire-form .primary-button,
.compact-aspire-form .secondary-button {
  min-width: 0;
  max-width: 100%;
}

.finance-ocr-actions .primary-button span,
.finance-ocr-actions .secondary-button span,
.compact-aspire-form .primary-button span,
.compact-aspire-form .secondary-button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

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

.aspire-settings-card,
.aspire-finance-workspace {
  --aspire-accent: #0f766e;
}

.aspire-settings-card {
  border-color: color-mix(in srgb, var(--aspire-accent) 22%, var(--line));
}

.aspire-mode-panel {
  border-color: color-mix(in srgb, var(--aspire-accent) 24%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--aspire-accent) 7%, transparent), transparent 58%),
    var(--panel-bg);
}

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

.aspire-connection-form,
.compact-aspire-form {
  align-items: end;
}

.aspire-exception-list {
  display: grid;
  gap: 8px;
}

.aspire-exception-list article {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.aspire-exception-list article strong,
.aspire-exception-list article small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.aspire-reconciliation-card > .report-section-grid article {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.finance-ocr-subheading {
  margin: 0 0 8px;
}

.link-button {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.link-button:hover {
  text-decoration: underline;
}

.code-preview {
  max-height: 420px;
  overflow: auto;
  padding: 12px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 1180px) {
  .action-summary-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .report-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .decision-summary-grid,
  .report-snapshot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .report-section-grid.two {
    grid-template-columns: minmax(0, 1fr);
  }

  .reporting-default-brief {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .finance-ocr-form,
  .aspire-connection-form,
  .compact-aspire-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-ocr-form .wide {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .action-summary-bar,
  .action-kanban-wrap {
    grid-template-columns: 1fr;
  }

  .action-plan-toolbar {
    grid-template-columns: 1fr;
  }

  .action-view-tabs {
    justify-content: flex-start;
  }

  .action-stat {
    min-height: 72px;
  }

  .report-controls,
  .report-export-controls,
  .finance-ocr-form,
  .report-kpi-grid,
  .report-ai-grid,
  .report-snapshot-grid,
  .aspire-status-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-ocr-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-ocr-actions .primary-button,
  .finance-ocr-actions .secondary-button,
  .compact-aspire-form .primary-button,
  .compact-aspire-form .secondary-button {
    width: 100%;
  }

  .export-result-grid,
  .privacy-grant-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-ocr-workspace .report-heading {
    flex-direction: column;
  }

  .privacy-grant-form .wide {
    grid-column: auto;
  }

  .reporting-heading {
    gap: 10px;
  }

  .reporting-heading .reporting-hierarchy,
  .reporting-heading .panel-actions {
    display: none;
  }

  .reporting-heading h2 {
    font-size: clamp(2rem, 9vw, 2.6rem);
    line-height: 1.04;
  }

  .reporting-heading small {
    line-height: 1.35;
  }

  .reporting-default-brief {
    gap: 8px;
    padding: 11px 12px;
  }

  .reporting-default-main h2 {
    font-size: 1.05rem;
  }

  .reporting-default-main p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .reporting-default-grid,
  .reporting-default-action {
    display: none;
  }

  .report-board-pack {
    padding: 12px;
  }

  .report-board-pack-header,
  .decision-section-heading {
    display: grid;
    gap: 10px;
  }

  .report-board-pack-meta,
  .decision-summary-grid,
  .decision-summary-card dl,
  .decision-kpi-quadrants,
  .report-kpi-confidence,
  .report-kpi-confidence.compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-kpi-grid {
    gap: 10px;
  }

  .report-kpi-card {
    min-height: 0;
    padding: 13px 14px;
  }

  .report-kpi-signal-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 7px;
  }

  .report-kpi-signal-row strong {
    font-size: 0.7rem;
  }

  .report-kpi-details > summary {
    align-items: flex-start;
  }

  .report-kpi-details > summary small {
    max-width: 58%;
  }

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

  .report-kpi-details-grid span:first-child {
    grid-column: 1 / -1;
  }

  .report-kpi-source-head,
  .report-kpi-source-list li {
    align-items: stretch;
    flex-direction: column;
  }

  .report-kpi-source-head small {
    text-align: left;
  }

  .report-kpi-source-list li strong,
  .report-kpi-source-list li small {
    white-space: normal;
  }

  .report-kpi-source-list li .mini-button,
  .report-kpi-detail-actions .mini-button {
    justify-content: center;
    width: 100%;
  }

  .report-kpi-detail-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .decision-summary-card,
  .decision-alert-card,
  .decision-action-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .decision-alert-card > .risk-badge,
  .decision-action-row > .status-pill {
    width: max-content;
    max-width: 100%;
  }

  .report-action-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .report-action-links .mini-button {
    justify-content: center;
    width: 100%;
  }
}

/* Fazten AI landing conversion refresh. */
.commercial-login {
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.94) 34%, rgba(240, 253, 250, 0.72)),
    radial-gradient(circle at 16% 16%, rgba(37, 99, 235, 0.18), transparent 30%),
    radial-gradient(circle at 76% 12%, rgba(236, 72, 153, 0.12), transparent 28%),
    radial-gradient(circle at 70% 72%, rgba(20, 184, 166, 0.16), transparent 30%);
}

.commercial-login .landing-shell {
  gap: clamp(18px, 2.2vw, 34px);
  width: min(1520px, 100%);
  padding-top: 16px;
}

.commercial-login .landing-nav {
  position: sticky;
  top: 12px;
  z-index: 20;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 20px 54px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px);
}

.commercial-login .landing-brand {
  gap: 12px;
  font-size: 1rem;
}

.commercial-login .landing-brand .brand-mark {
  background: linear-gradient(135deg, #2563eb, #14b8a6 58%, #f59e0b);
}

.commercial-login .landing-nav-links {
  justify-content: center;
}

.commercial-login .landing-nav-links a {
  color: #475569;
  font-size: 0.9rem;
}

.commercial-login .landing-nav-links a:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.landing-announcement {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 6px 6px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #334155;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.08);
}

.landing-announcement span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 0.72rem;
}

.landing-announcement strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.commercial-login .landing-hero {
  grid-template-columns: minmax(360px, 0.76fr) minmax(560px, 1.24fr);
  padding-top: clamp(20px, 4vw, 58px);
}

.commercial-login .landing-hero-copy {
  gap: 16px;
}

.commercial-login .landing-hero-copy h1 {
  max-width: 780px;
  font-size: clamp(3rem, 5.8vw, 6.25rem);
  line-height: 0.9;
  letter-spacing: 0;
}

.commercial-login .landing-hero-copy .subtitle {
  max-width: 680px;
  color: #475569;
  font-size: clamp(1.02rem, 1.24vw, 1.24rem);
}

.commercial-login .landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.commercial-login .primary-button,
.commercial-login .secondary-button {
  min-height: 48px;
  border-radius: 8px;
}

.commercial-login .primary-button {
  background: linear-gradient(135deg, #7c3aed, #2563eb 52%, #14b8a6);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.22);
}

.commercial-login .secondary-button {
  border-color: rgba(148, 163, 184, 0.36);
  background: rgba(255, 255, 255, 0.82);
}

.landing-free-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 800;
}

.landing-free-note span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.landing-free-note span::before {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  content: "";
}

.commercial-login .landing-hero-points {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 820px;
}

.commercial-login .landing-hero-points article {
  align-content: start;
  grid-template-columns: 1fr;
  min-height: 132px;
  background: rgba(255, 255, 255, 0.8);
}

.commercial-login .landing-video-frame {
  overflow: visible;
  border-color: rgba(37, 99, 235, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.84) 48%, rgba(15, 23, 42, 0.86)),
    url("/assets/onestop-dashboard.png") center / cover no-repeat;
  box-shadow: 0 38px 100px rgba(15, 23, 42, 0.18);
}

.commercial-login .landing-video-frame::before {
  inset: 12px;
  border-color: rgba(255, 255, 255, 0.68);
}

.commercial-login .promo-screen {
  top: 94px;
  right: clamp(24px, 4vw, 50px);
  width: min(610px, 64%);
  min-height: 350px;
  border-color: rgba(148, 163, 184, 0.25);
  background: rgba(255, 255, 255, 0.94);
}

.promo-dashboard-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.promo-dashboard-tabs span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 950;
}

.promo-dashboard-tabs span:nth-child(3) {
  background: #ede9fe;
  color: #6d28d9;
}

.commercial-login .hero-caption {
  top: 22px;
  left: 22px;
  width: min(360px, calc(100% - 44px));
}

.commercial-login .motion-card-one {
  top: 36px;
  right: -8px;
}

.commercial-login .motion-card-two {
  left: -8px;
  bottom: 116px;
}

.commercial-login .hero-stat-row {
  right: 24px;
  bottom: 22px;
  left: 24px;
}

.landing-chip-band {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.commercial-login .landing-metric-strip,
.commercial-login .landing-story-section,
.commercial-login .landing-division-section,
.commercial-login .landing-workflow-section,
.commercial-login .landing-cta-band,
.commercial-login .landing-feature-band article {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.82);
}

.commercial-login .landing-story-section,
.commercial-login .landing-division-section,
.commercial-login .landing-workflow-section,
.commercial-login .landing-cta-band {
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.07);
}

.commercial-login .landing-story-grid article,
.commercial-login .landing-division-grid article,
.commercial-login .landing-workflow-steps article,
.commercial-login .landing-metric-strip article {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.commercial-login .landing-story-grid article:hover,
.commercial-login .landing-division-grid article:hover,
.commercial-login .landing-workflow-steps article:hover,
.commercial-login .landing-metric-strip article:hover {
  border-color: rgba(37, 99, 235, 0.26);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.commercial-login .landing-cta-band {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(37, 99, 235, 0.12) 45%, rgba(20, 184, 166, 0.14)),
    rgba(255, 255, 255, 0.88);
}

@media (max-width: 1080px) {
  .commercial-login .landing-nav {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .commercial-login .landing-nav-links {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }

  .commercial-login .landing-hero,
  .landing-chip-band {
    grid-template-columns: 1fr;
  }

  .commercial-login .landing-hero-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .commercial-login .landing-video-frame {
    overflow: hidden;
  }

  .commercial-login .motion-card-one {
    right: 20px;
  }

  .commercial-login .motion-card-two {
    left: 20px;
  }
}

@media (max-width: 760px) {
  .commercial-login .landing-shell {
    padding: 12px;
  }

  .commercial-login .landing-nav {
    top: 8px;
    gap: 10px;
  }

  .commercial-login .landing-nav-actions {
    width: 100%;
    justify-content: space-between;
  }

  .commercial-login .landing-nav-links {
    display: none;
  }

  .landing-announcement {
    width: 100%;
  }

  .commercial-login .landing-hero-copy h1 {
    font-size: 2.62rem;
  }

  .commercial-login .landing-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .commercial-login .landing-hero-points,
  .landing-chip-band {
    grid-template-columns: 1fr;
  }

  .commercial-login .landing-hero-points article {
    min-height: auto;
  }

  .commercial-login .landing-hero-media {
    min-height: 520px;
  }

  .commercial-login .promo-screen {
    top: 126px;
    right: 14px;
    left: 14px;
    width: auto;
    min-height: 272px;
  }

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

  .commercial-login .hero-caption {
    top: 14px;
    right: 14px;
    left: 14px;
    width: auto;
  }

  .commercial-login .hero-stat-row {
    right: 12px;
    left: 12px;
  }
}

.ia-shell-card .icon,
.ia-shell-card [data-icon] {
  width: 22px;
  height: 22px;
  color: var(--blue);
}

.ia-shell-card strong {
  color: var(--ink);
}

.ia-shell-card small {
  color: var(--muted);
  line-height: 1.45;
}

.communication-shell-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(360px, 1.7fr) minmax(250px, 0.95fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.communication-tabs {
  align-items: center;
  margin-bottom: 12px;
}

.communication-tabs .settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.communication-tabs .nav-badge {
  margin-left: 0;
}

.communication-left-panel,
.communication-center-panel,
.communication-right-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 620px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, white);
  overflow: hidden;
}

.communication-center-panel {
  min-height: 620px;
}

.communication-left-panel {
  max-height: 720px;
  overflow: auto;
}

.communication-right-panel {
  max-height: 720px;
  overflow: auto;
}

.communication-search input,
.communication-composer textarea,
.communication-dm-search input {
  width: 100%;
  min-width: 0;
}

.communication-list-section,
.communication-context-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.communication-list-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.communication-list-item:hover,
.communication-list-item.active {
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
}

.communication-list-item > span:first-child:not(.avatar-small) {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--gold) 16%, var(--surface));
  color: var(--ink);
}

.communication-list-item strong,
.communication-list-item small,
.communication-member strong,
.communication-member small,
.communication-task strong,
.communication-task small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.communication-list-item small,
.communication-member small,
.communication-task small,
.communication-event small,
.communication-webhook-event small {
  color: var(--muted);
}

.communication-list-item em {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--blue);
  color: white;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.communication-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  margin-top: 4px;
}

.communication-composer .primary-button {
  align-self: stretch;
  justify-content: center;
  min-width: 132px;
}

.communication-user-results {
  max-height: 180px;
  overflow: auto;
}

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

.communication-task,
.communication-event {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.communication-event p {
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.communication-decision-thread {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.communication-decision-thread header {
  display: grid;
  gap: 6px;
}

.communication-decision-thread strong,
.communication-decision-thread p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.communication-webhook-event {
  padding-right: 12px;
}

@media (max-width: 1280px) {
  .communication-shell-layout {
    grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
  }

  .communication-right-panel {
    grid-column: 1 / -1;
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .ai-investigation-kpis,
  .ai-investigation-validation-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-investigation-alert {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .ai-investigation-alert aside {
    grid-column: 1 / -1;
    justify-items: start;
  }

  .knowledge-file-row {
    align-items: flex-start;
  }

  .knowledge-file-meta {
    justify-items: start;
    min-width: 0;
  }

  .communication-shell-layout,
  .communication-composer {
    grid-template-columns: minmax(0, 1fr);
  }

  .communication-left-panel,
  .communication-center-panel,
  .communication-right-panel {
    min-height: 0;
    max-height: none;
    padding: 12px;
  }

  .communication-tabs {
    overflow-x: auto;
  }

  .communication-composer .primary-button {
    min-width: 0;
  }
}

.supervisor-header,
.supervisor-section {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 84%, var(--surface));
}

.supervisor-disclosure,
.action-detail-advanced {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 86%, var(--surface));
}

.supervisor-disclosure > summary,
.action-detail-advanced > summary {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.supervisor-disclosure > summary::-webkit-details-marker,
.action-detail-advanced > summary::-webkit-details-marker {
  display: none;
}

.supervisor-disclosure > summary::after,
.action-detail-advanced > summary::after {
  content: "+";
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
}

.supervisor-disclosure[open] > summary::after,
.action-detail-advanced[open] > summary::after {
  content: "-";
}

.supervisor-disclosure > summary span,
.action-detail-advanced > summary span {
  color: var(--ink);
  font-weight: 900;
}

.supervisor-disclosure > summary small,
.action-detail-advanced > summary small {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.supervisor-disclosure-body {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 0 12px 12px;
}

.supervisor-admin-console {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.supervisor-recognition-layer {
  background: color-mix(in srgb, var(--panel-bg) 90%, var(--green) 5%);
}

#supervisorCockpit {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.supervisor-header {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 14px;
}

.supervisor-header-meta,
.supervisor-filter-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.supervisor-filter-bar {
  grid-column: 1 / -1;
  grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(120px, 0.5fr));
}

.my-work-compact-header {
  background: color-mix(in srgb, var(--panel-bg) 92%, var(--surface));
}

.my-work-compact-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.my-work-compact-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.my-work-compact-copy .eyebrow {
  margin-bottom: 0;
}

.my-work-compact-copy h2 {
  margin: 0;
  font-size: 1.24rem;
  line-height: 1.16;
}

.my-work-compact-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.my-work-filter-row {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: min(100%, 420px);
}

.my-work-filter-row label {
  display: grid;
  gap: 3px;
  min-width: min(190px, 100%);
}

.my-work-filter-row label > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.my-work-filter-row select {
  width: 100%;
  height: 34px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--ink);
  font-weight: 850;
}

.my-work-mobile-filter-grid {
  display: none;
}

.my-work-details {
  min-width: 0;
}

.my-work-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.my-work-details > summary::-webkit-details-marker {
  display: none;
}

.my-work-details > summary .icon {
  width: 16px;
  height: 16px;
  color: var(--blue);
}

.my-work-details > summary span {
  font-size: 0.82rem;
  font-weight: 900;
}

.my-work-details > summary small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.my-work-details-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  padding-top: 8px;
}

.my-work-details-grid span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.my-work-details-grid small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.my-work-details-grid strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.my-work-mobile-filter-grid label {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.my-work-mobile-filter-grid label > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.my-work-mobile-filter-grid select {
  width: 100%;
  height: 34px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--ink);
  font-weight: 850;
}

.supervisor-header-meta span,
.supervisor-filter-bar > span,
.supervisor-blocker-card,
.supervisor-audit-table article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.supervisor-header-meta small,
.supervisor-filter-bar small,
.supervisor-detail-grid dt {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.supervisor-header-meta strong,
.supervisor-filter-bar strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.supervisor-intelligence-layer {
  background: color-mix(in srgb, var(--panel-bg) 88%, var(--blue) 5%);
}

.supervisor-accountability-layer {
  background: color-mix(in srgb, var(--panel-bg) 90%, var(--warning) 5%);
}

.supervisor-notification-layer {
  background: color-mix(in srgb, var(--panel-bg) 90%, var(--green) 5%);
}

.supervisor-notification-center {
  background: color-mix(in srgb, var(--panel-bg) 90%, var(--blue) 5%);
}

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

.in-app-notification-item {
  border-left: 4px solid var(--blue);
}

.in-app-notification-item.severity-warning {
  border-left-color: var(--gold);
}

.in-app-notification-item.severity-high,
.in-app-notification-item.severity-critical {
  border-left-color: var(--red);
}

.notification-mode-banner,
.notification-channel-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.notification-mode-banner {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 84%, var(--warning) 8%);
}

.notification-mode-banner span,
.notification-channel-pill small {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.notification-channel-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}

.notification-channel-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
}

.notification-channel-pill {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.notification-channel-pill strong,
.supervisor-notification-item strong,
.supervisor-notification-item p {
  overflow-wrap: anywhere;
}

.supervisor-intel-metrics,
.supervisor-intel-division-grid,
.supervisor-intel-bucket-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.supervisor-intel-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.supervisor-accountability-metrics {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.supervisor-intel-metrics span,
.supervisor-division-signal,
.supervisor-intel-bucket,
.supervisor-intel-item {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.supervisor-intel-metrics span {
  display: grid;
  gap: 4px;
}

.supervisor-intel-metrics small,
.supervisor-intel-meta small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.supervisor-intel-metrics strong {
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
}

.supervisor-intel-division-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.supervisor-intel-bucket-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
}

.supervisor-intel-bucket,
.supervisor-intel-list,
.supervisor-division-signal {
  display: grid;
  gap: 8px;
}

.supervisor-intel-item {
  display: grid;
  gap: 8px;
}

.supervisor-intel-item strong,
.supervisor-division-signal strong {
  overflow-wrap: anywhere;
}

.supervisor-intel-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.supervisor-intel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.supervisor-disabled-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.supervisor-rollup-list {
  display: grid;
  gap: 8px;
}

.supervisor-rollup-list article {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--blue) 4%);
}

.supervisor-rollup-list strong,
.supervisor-rollup-list span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.supervisor-rollup-list span {
  color: var(--muted);
  font-size: 0.78rem;
}

.supervisor-queue-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.supervisor-queue-column,
.supervisor-card-list,
.supervisor-blocker-grid,
.supervisor-conversion-form {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.supervisor-column-head,
.supervisor-card-head,
.supervisor-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.supervisor-queue-list {
  display: grid;
  gap: 8px;
}

.supervisor-queue-item,
.supervisor-insight-card,
.supervisor-recommendation {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.supervisor-queue-item.is-blocked,
.supervisor-blocker-card {
  border-color: color-mix(in srgb, var(--red) 46%, var(--line));
}

.supervisor-state-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.supervisor-state-row small,
.action-state-reason {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.supervisor-state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--muted) 25%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 8%, var(--panel-bg));
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: normal;
}

.supervisor-state-pill.state-recommendation {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
  background: color-mix(in srgb, var(--blue) 9%, var(--panel-bg));
  color: var(--blue);
}

.supervisor-state-pill.state-pending {
  border-color: color-mix(in srgb, var(--gold) 38%, var(--line));
  background: color-mix(in srgb, var(--gold) 11%, var(--panel-bg));
  color: var(--gold);
}

.supervisor-state-pill.state-approved {
  border-color: color-mix(in srgb, var(--green) 35%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, var(--panel-bg));
  color: var(--green);
}

.supervisor-state-pill.state-rejected,
.supervisor-state-pill.state-blocked {
  border-color: color-mix(in srgb, var(--red) 36%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, var(--panel-bg));
  color: var(--red);
}

.supervisor-queue-item p,
.supervisor-insight-card p,
.supervisor-recommendation p,
.supervisor-blocker-card p,
.supervisor-audit-table p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.supervisor-item-actions,
.supervisor-inline-form,
.supervisor-form-grid,
.supervisor-main-grid,
.supervisor-detail-grid {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.toggle-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.9rem;
}

.supervisor-inline-form {
  grid-template-columns: minmax(120px, 1fr) minmax(86px, 0.6fr) minmax(112px, 0.7fr) auto;
  align-items: end;
}

.supervisor-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.supervisor-inline-form select,
.supervisor-inline-form input,
.supervisor-filter-bar select,
.supervisor-conversion-form input,
.supervisor-conversion-form select,
.supervisor-conversion-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--ink);
}

.supervisor-inline-form select,
.supervisor-inline-form input,
.supervisor-filter-bar select,
.supervisor-conversion-form input,
.supervisor-conversion-form select {
  height: 38px;
}

.supervisor-conversion-form textarea {
  min-height: 96px;
  resize: vertical;
}

.supervisor-main-grid,
.supervisor-form-grid,
.supervisor-blocker-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.supervisor-detail-grid div {
  min-width: 0;
}

.supervisor-detail-grid dd {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.supervisor-blocker-card p {
  display: grid;
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.supervisor-blocker-card p span {
  font-size: 0.78rem;
}

.supervisor-audit-table {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.supervisor-audit-table span,
.supervisor-audit-table strong,
.supervisor-audit-table small {
  overflow-wrap: anywhere;
}

.supervisor-audit-table span {
  color: var(--blue);
  font-weight: 900;
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  .ia-shell-grid,
  .communication-shell-layout,
  .supervisor-header,
  .supervisor-header-meta,
  .supervisor-filter-bar,
  .supervisor-intel-metrics,
  .supervisor-intel-division-grid,
  .supervisor-intel-bucket-grid,
  .supervisor-queue-grid,
  .supervisor-main-grid,
  .supervisor-form-grid,
  .supervisor-blocker-grid,
  .supervisor-audit-table {
    grid-template-columns: 1fr;
  }

  .supervisor-inline-form {
    grid-template-columns: 1fr;
  }

  .my-work-compact-main {
    flex-direction: column;
  }

  .my-work-filter-row {
    justify-content: flex-start;
    width: 100%;
  }

  .my-work-filter-row label {
    flex: 1 1 160px;
  }

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

.compact-panel {
  padding: 16px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-heading.tight {
  margin-bottom: 12px;
}

.icon-button {
  width: 40px;
  color: var(--ink);
  background: var(--surface);
}

.secondary-button,
.primary-button {
  padding: 0 14px;
  font-weight: 800;
}

.secondary-button {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 86%, white);
  color: var(--ink);
}

.primary-button {
  background: linear-gradient(135deg, #ef4444, #2563eb);
  color: #fff;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.24);
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  overflow: visible;
}

.tool-launcher-category-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.tool-launcher-category-row .chip small {
  margin-left: 4px;
  color: inherit;
  opacity: 0.72;
}

.tool-category-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.tool-category-grid {
  width: 100%;
}

.analytics-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.analytics-card {
  position: relative;
  overflow: hidden;
  min-height: 96px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, white), color-mix(in srgb, var(--accent) 4%, white)),
    var(--panel-bg);
}

body[data-theme="dark"] .analytics-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, #0f172a), color-mix(in srgb, var(--accent) 8%, #0f172a)),
    var(--panel-bg);
}

.analytics-card-glow {
  position: absolute;
  right: -18px;
  bottom: -28px;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}

.analytics-card span,
.analytics-card small {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.analytics-card strong {
  position: relative;
  display: block;
  margin: 8px 0 4px;
  font-size: clamp(0.98rem, 1.35vw, 1.18rem);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-table {
  display: grid;
  gap: 8px;
}

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

.analytics-focus-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, white), color-mix(in srgb, var(--accent) 4%, var(--panel)));
}

.analytics-focus-card > span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.analytics-focus-card strong {
  min-height: 2.4em;
  color: var(--ink);
  line-height: 1.2;
}

.analytics-focus-card div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.analytics-focus-card b {
  font-size: 1.04rem;
  overflow-wrap: anywhere;
}

.analytics-focus-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.collapsible-data,
.report-disclosure,
.mini-disclosure {
  display: grid;
  gap: 10px;
}

.collapsible-data,
.report-disclosure {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 54%, transparent);
}

.collapsible-data summary,
.report-disclosure summary,
.mini-disclosure summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-weight: 900;
}

.report-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.report-disclosure summary small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.analytics-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.1fr) minmax(150px, 1fr) minmax(130px, 0.8fr) 80px minmax(180px, 1.2fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  border-left: 5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}

.analytics-row.header {
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.analytics-progress {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 7px;
  margin-top: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, white);
}

.analytics-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #22c55e));
}

.growth-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
}

.growth-pill.strong {
  background: rgba(16, 185, 129, 0.16);
  color: #047857;
}

.growth-pill.positive {
  background: rgba(37, 99, 235, 0.14);
  color: #1d4ed8;
}

.growth-pill.negative {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}

.growth-pill.neutral {
  background: var(--surface);
  color: var(--muted);
}

.division-report-panel {
  margin-top: 18px;
}

.division-report-grid {
  display: grid;
  gap: 14px;
}

.business-report-card,
.ads-report-card,
.seller-profile-report,
.crm-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(20, 135, 85, 0.06) 42%, rgba(47, 123, 194, 0.08)),
    color-mix(in srgb, var(--panel) 92%, white);
}

.business-report-card.wide-report,
.wide-report {
  grid-column: 1 / -1;
}

.report-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.report-heading h3 {
  margin-bottom: 4px;
  font-size: 1.06rem;
  line-height: 1.2;
}

.report-heading small {
  color: var(--muted);
  line-height: 1.45;
}

.business-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, white);
  -webkit-overflow-scrolling: touch;
}

.business-table {
  width: 100%;
  min-width: 900px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  font-size: 0.84rem;
}

.business-table th,
.business-table td {
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.business-table th:last-child,
.business-table td:last-child {
  border-right: 0;
}

.business-table tr:last-child td {
  border-bottom: 0;
}

.business-table th {
  background: linear-gradient(135deg, #ef4444, #d97706);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.business-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--surface) 42%, transparent);
}

.seller-profile-table {
  min-width: 1220px;
}

.seller-profile-table th {
  background: linear-gradient(135deg, #dc6d43, #b45309);
}

.crm-table {
  min-width: 1320px;
}

.crm-table th {
  background: linear-gradient(135deg, #0d8b8b, #2563eb);
}

.crm-table td {
  vertical-align: top;
}

.crm-table td strong,
.crm-table td small {
  display: block;
}

.crm-table td small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  white-space: normal;
}

.crm-table td:last-child {
  width: 104px;
  min-width: 104px;
  text-align: center;
}

.crm-stage-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  color: #253044;
  background: #eef2ff;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}

.crm-stage-chip.active {
  color: #047857;
  background: rgba(16, 185, 129, 0.14);
}

.crm-stage-chip.vip {
  color: #92400e;
  background: rgba(245, 158, 11, 0.2);
}

.crm-stage-chip.followup {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.14);
}

.crm-stage-chip.reactivation {
  color: #7c3aed;
  background: rgba(139, 92, 246, 0.14);
}

.crm-stage-chip.prospect {
  color: #475569;
  background: rgba(148, 163, 184, 0.2);
}

.crm-stage-chip.dormant {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
}

.birthday-reminder-summary {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.birthday-reminder-summary span {
  display: block;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.35;
}

.crm-form {
  padding-top: 4px;
}

.checkbox-field {
  align-content: start;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
}

.checkbox-field > span,
.checkbox-field > small {
  grid-column: 1 / -1;
}

.checkbox-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--green);
}

.reminder-chip-row {
  margin-top: 6px;
}

.ads-table {
  min-width: 1040px;
}

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

.ads-dashboard-grid {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.ads-command-center {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(37, 99, 235, 0.07) 34%, rgba(16, 185, 129, 0.08)),
    color-mix(in srgb, var(--panel) 94%, white);
}

.ads-channel-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.ads-channel-badges span,
.ads-channel-badges button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--channel-color) 24%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--channel-color) 10%, var(--panel));
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 900;
}

.ads-channel-badges button {
  font-family: inherit;
  cursor: pointer;
}

.ads-channel-badges button.active,
.ads-channel-badges button:hover {
  border-color: color-mix(in srgb, var(--channel-color) 62%, var(--line));
  color: var(--ink);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--channel-color) 16%, transparent);
}

.ads-channel-badges span::before,
.ads-channel-badges button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--channel-color);
}

.ads-filter-bar {
  display: grid;
  grid-template-columns: minmax(150px, 0.5fr) minmax(150px, 0.5fr) minmax(260px, 1.4fr) auto auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 86%, white);
}

.ads-filter-bar label {
  display: grid;
  gap: 5px;
}

.ads-filter-bar label > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ads-provider-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ads-provider-filter label {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--channel-color, var(--blue)) 22%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--channel-color, var(--blue)) 8%, var(--panel));
}

.ads-provider-filter input {
  accent-color: var(--channel-color, var(--blue));
}

.ads-kpi-grid article,
.seller-health-card {
  display: grid;
  gap: 6px;
  min-height: 96px;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent, var(--blue));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, var(--blue)) 8%, var(--panel));
}

.ads-kpi-grid article:nth-child(1),
.seller-health-card:nth-child(1) {
  --accent: #ef4444;
}

.ads-kpi-grid article:nth-child(2),
.seller-health-card:nth-child(2) {
  --accent: #2563eb;
}

.ads-kpi-grid article:nth-child(3),
.seller-health-card:nth-child(3) {
  --accent: #16a34a;
}

.ads-kpi-grid article:nth-child(4),
.seller-health-card:nth-child(4) {
  --accent: #d97706;
}

.ads-kpi-grid article:nth-child(5) {
  --accent: #ec4899;
}

.ads-kpi-grid article:nth-child(6) {
  --accent: #0f766e;
}

.ads-kpi-grid article:nth-child(7) {
  --accent: #7c3aed;
}

.ads-kpi-grid article:nth-child(8) {
  --accent: #f59e0b;
}

.ads-kpi-grid span,
.seller-health-card span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
}

.ads-kpi-grid strong,
.seller-health-card strong {
  font-size: 1.32rem;
  line-height: 1.1;
}

.ads-chart {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.ads-analysis-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
  gap: 14px;
  align-items: start;
}

.ads-analysis-main,
.ads-ai-rail {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.ads-fullwidth-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.ads-ai-rail .ai-insight-panel {
  position: sticky;
  top: 14px;
}

.ads-ai-rail .ai-insight-grid {
  grid-template-columns: 1fr;
}

.ads-visual-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(260px, 0.8fr) minmax(260px, 0.75fr);
  gap: 12px;
  align-items: stretch;
}

.ads-pacing-card,
.ads-insight-strip article,
.ads-insight-strip button,
.ads-breakdown-grid article,
.ads-breakdown-grid button,
.ads-donut-card,
.ads-funnel-card,
.ads-chart-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, white);
}

.ads-pacing-card,
.ads-donut-card,
.ads-funnel-card,
.ads-chart-card {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.ads-hover-card {
  overflow: hidden;
  outline: none;
}

.ads-hover-card::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, transparent), transparent 42%);
  opacity: 0;
  transition: opacity 180ms ease;
  content: "";
}

.ads-hover-card:hover::before,
.ads-hover-card:focus-within::before {
  opacity: 1;
}

.ads-card-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ai-hint-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 44%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 16%, var(--panel));
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.ads-hover-detail {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 6;
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 96%, white);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.ads-hover-card:hover .ads-hover-detail,
.ads-hover-card:focus-within .ads-hover-detail {
  opacity: 1;
  transform: translateY(0);
}

.ads-hover-detail strong {
  color: var(--ink);
  font-size: 0.8rem;
}

.ads-hover-detail span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.35;
  text-transform: none;
}

.ads-pacing-card span,
.ads-insight-strip span,
.ads-donut-card > div > span,
.ads-funnel-card > div > span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ads-pacing-card strong,
.ads-insight-strip strong,
.ads-donut-card > div > strong,
.ads-funnel-card > div > strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 1.05rem;
}

.ads-pacing-card small,
.ads-insight-strip small,
.ads-donut-card small,
.ads-funnel-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.ads-pacing-card .ai-hint-pill,
.ads-donut-card .ai-hint-pill,
.ads-funnel-card .ai-hint-pill {
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ads-mini-note {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.ai-mini-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ai-mini-note .ai-hint-pill {
  flex: 0 0 auto;
  margin-top: 1px;
}

.ads-donut-wrap {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.ads-donut {
  position: relative;
  display: grid;
  width: 148px;
  height: 148px;
  place-items: center;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.ads-donut::after {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: inherit;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.ads-donut span {
  position: relative;
  z-index: 1;
  color: var(--ink);
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
}

.ads-donut span small {
  margin-top: 2px;
  font-size: 0.68rem;
}

.ads-donut-legend {
  display: grid;
  gap: 8px;
}

.ads-donut-legend span,
.ads-donut-legend button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
}

.ads-donut-legend button {
  width: 100%;
  padding: 2px 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ads-donut-legend button:hover {
  color: var(--ink);
}

.ads-donut-legend i {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.ads-funnel-bars {
  display: grid;
  gap: 10px;
}

.ads-funnel-bars div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
  align-items: center;
  min-width: 0;
}

.ads-funnel-bars div > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.ads-funnel-bars div > strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.ads-funnel-bars i {
  display: block;
  grid-column: 1 / -1;
  max-width: 100%;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
}

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

.ads-insight-strip article,
.ads-insight-strip button,
.ads-breakdown-grid article {
  min-width: 0;
  padding: 12px;
}

.ads-insight-strip button,
.ads-breakdown-grid button {
  width: 100%;
  border: 1px solid var(--line);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ads-insight-strip button:hover,
.ads-breakdown-grid button:hover,
.ads-breakdown-grid button.active {
  border-color: color-mix(in srgb, var(--channel-color, var(--blue)) 48%, var(--line));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--channel-color, var(--blue)) 12%, transparent);
  transform: translateY(-1px);
}

.ads-breakdown-grid article {
  border-left: 5px solid var(--channel-color, var(--blue));
}

.ads-breakdown-grid button {
  border-left: 5px solid var(--channel-color, var(--blue));
}

.ads-channel-card {
  display: grid;
  gap: 11px;
  min-height: 132px;
  padding: 13px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--channel-color, var(--blue)) 9%, transparent), transparent 62%),
    color-mix(in srgb, var(--panel) 90%, white);
}

.ads-channel-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ads-channel-card-head strong {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.15;
}

.ads-channel-card-head small,
.ads-channel-action {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.ads-channel-primary {
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 950;
  line-height: 1.1;
}

.ads-channel-metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ads-channel-metric-row span {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.ads-channel-metric-row b {
  color: var(--ink);
}

.ads-insight-strip strong {
  overflow-wrap: anywhere;
}

.ads-breakdown-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ads-chart-card {
  overflow: hidden;
}

.ads-column-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  min-height: 240px;
  align-items: end;
}

.ads-column-item {
  display: grid;
  grid-template-rows: 150px auto auto;
  gap: 7px;
  min-width: 0;
}

.ads-column-track {
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
}

.ads-column-track span {
  display: block;
  width: min(44px, 62%);
  min-height: 14px;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bar-color) 85%, white), var(--bar-color));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--bar-color) 24%, transparent);
}

.ads-column-item strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.2;
  text-align: center;
}

.ads-column-item small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}

.ads-bar-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(180px, 1.2fr) minmax(110px, 0.45fr);
  gap: 10px;
  align-items: center;
}

.ads-bar-row > span {
  min-width: 0;
  color: var(--ink-soft);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.ads-bar-row > span small,
.ads-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: normal;
}

.ads-bar-row > strong {
  text-align: right;
}

.ads-bar-track {
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 72%, white);
}

.ads-bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bar-color, #ef4444) 78%, white), var(--bar-color, #2563eb));
}

.ads-line-chart-card,
.ads-drilldown-panel,
.firebase-funnel-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 90%, white);
}

.ads-line-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.ads-line-legend button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--series-color) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--series-color) 8%, var(--panel));
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.ads-line-legend i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--series-color);
}

.ads-line-legend small {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
}

.ads-line-chart-wrap {
  position: relative;
  overflow: visible;
  min-height: 300px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 55%, transparent), transparent),
    color-mix(in srgb, var(--panel) 88%, white);
}

.ads-line-chart {
  display: block;
  width: 100%;
  min-height: 300px;
}

.ads-chart-gridline {
  stroke: color-mix(in srgb, var(--line) 70%, transparent);
  stroke-width: 1;
}

.ads-chart-axis-label,
.ads-chart-x-label {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.ads-chart-x-label {
  text-anchor: middle;
}

.ads-series {
  fill: none;
  stroke: var(--series-color);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--series-color) 18%, transparent));
  transition: opacity 160ms ease, stroke-width 160ms ease;
}

.ads-line-point {
  position: absolute;
  z-index: 2;
  width: 15px;
  height: 15px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--series-color);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--series-color) 32%, transparent);
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.ads-line-point:hover,
.ads-line-point:focus-visible {
  z-index: 4;
  outline: 3px solid color-mix(in srgb, var(--series-color) 30%, transparent);
  transform: translate(-50%, -50%) scale(1.2);
}

.ads-point-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  display: none;
  width: max-content;
  max-width: 240px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink);
  color: var(--panel);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
  transform: translateX(-50%);
}

.ads-point-tooltip strong,
.ads-point-tooltip small {
  display: block;
  color: inherit;
  line-height: 1.35;
}

.ads-point-tooltip small {
  opacity: 0.76;
}

.ads-line-point:hover .ads-point-tooltip,
.ads-line-point:focus-visible .ads-point-tooltip {
  display: block;
}

.ads-line-chart-card[data-highlight-series="spend"] .ads-series:not(.ads-series-spend),
.ads-line-chart-card[data-highlight-series="clicks"] .ads-series:not(.ads-series-clicks),
.ads-line-chart-card[data-highlight-series="conversions"] .ads-series:not(.ads-series-conversions),
.ads-line-chart-card[data-highlight-series="roas"] .ads-series:not(.ads-series-roas) {
  opacity: 0.16;
}

.ads-line-chart-card[data-highlight-series="spend"] .ads-line-legend button:not([data-series="spend"]),
.ads-line-chart-card[data-highlight-series="clicks"] .ads-line-legend button:not([data-series="clicks"]),
.ads-line-chart-card[data-highlight-series="conversions"] .ads-line-legend button:not([data-series="conversions"]),
.ads-line-chart-card[data-highlight-series="roas"] .ads-line-legend button:not([data-series="roas"]) {
  opacity: 0.45;
}

.ads-chart-note {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.ads-drilldown-panel {
  border-left: 6px solid var(--drilldown-color, var(--blue));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--drilldown-color, var(--blue)) 8%, transparent), transparent 56%),
    color-mix(in srgb, var(--panel) 92%, white);
}

.firebase-funnel-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, #2563eb 8%, transparent), transparent 58%),
    color-mix(in srgb, var(--panel) 92%, white);
}

.firebase-funnel-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.firebase-funnel-steps article {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--stage-color) 20%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--stage-color) 7%, var(--panel));
}

.firebase-funnel-steps span,
.firebase-funnel-summary span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.firebase-funnel-steps strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 1.28rem;
  line-height: 1.05;
}

.firebase-funnel-steps small,
.firebase-funnel-steps em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.firebase-funnel-steps i {
  overflow: hidden;
  display: block;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 72%, white);
}

.firebase-funnel-steps b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--stage-color) 72%, white), var(--stage-color));
}

.firebase-funnel-summary {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 10px;
}

.firebase-funnel-summary article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
}

.firebase-funnel-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.firebase-funnel-summary p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.utm-governance-panel,
.utm-funnel-card,
.utm-workflow-card,
.utm-export-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, #14b8a6 8%, transparent), transparent 58%),
    color-mix(in srgb, var(--panel) 94%, white);
}

.utm-governance-grid,
.utm-funnel-summary {
  display: grid;
  gap: 10px;
}

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

.utm-funnel-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.utm-status-card,
.utm-funnel-summary article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
}

.utm-status-card span,
.utm-funnel-summary span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.utm-status-card strong,
.utm-funnel-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.utm-status-card small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.utm-field-grid,
.utm-export-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.utm-chip,
.utm-export-fields span,
.utm-stage-pill,
.utm-quality {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.utm-stage-pill {
  border: 1px solid color-mix(in srgb, var(--utm-color, var(--blue)) 34%, var(--line));
  background: color-mix(in srgb, var(--utm-color, var(--blue)) 12%, var(--panel));
}

.utm-quality.warning {
  border: 1px solid color-mix(in srgb, #f59e0b 38%, var(--line));
  background: color-mix(in srgb, #f59e0b 14%, var(--panel));
  color: #92400e;
}

.utm-issue-list {
  display: grid;
  gap: 8px;
}

.utm-issue-row {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-left: 5px solid #f59e0b;
  border-radius: 8px;
  background: color-mix(in srgb, #f59e0b 7%, var(--panel));
}

.utm-issue-row.clean {
  border-left-color: #16a34a;
  background: color-mix(in srgb, #16a34a 7%, var(--panel));
}

.utm-issue-row strong,
.utm-check-item strong {
  color: var(--ink);
  line-height: 1.25;
}

.utm-issue-row span,
.utm-issue-row small,
.utm-check-item small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.utm-funnel-table {
  min-width: 1180px;
}

.utm-funnel-table td {
  vertical-align: top;
}

.utm-funnel-table small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.utm-row-warning {
  background: color-mix(in srgb, #f59e0b 9%, transparent);
}

.utm-mini-bar {
  display: block;
  max-width: 100%;
  height: 7px;
  margin-top: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #16a34a);
}

.utm-url {
  display: block;
  max-width: 360px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utm-ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 14px;
  min-width: 0;
}

.utm-checklist-grid {
  display: grid;
  gap: 8px;
}

.utm-check-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
}

.utm-check-item > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, #16a34a 14%, var(--panel));
  color: #15803d;
  font-weight: 950;
}

.utm-check-item.warning > span {
  background: color-mix(in srgb, #f59e0b 16%, var(--panel));
  color: #c2410c;
}

.ads-drilldown-kpis {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.ads-drilldown-kpis span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}

.ads-drilldown-kpis small,
.ads-action-grid span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ads-drilldown-kpis strong {
  color: var(--ink);
  font-size: 0.9rem;
}

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

.ads-action-grid article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 82%, white);
}

.ads-action-grid p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.45;
}

.ads-table-drilldown {
  display: grid;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.ads-table-drilldown:hover {
  color: var(--blue);
}

.ai-insight-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(16, 185, 129, 0.08) 48%, rgba(245, 158, 11, 0.07)),
    color-mix(in srgb, var(--panel) 92%, white);
}

.ai-insight-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ai-insight-head h3 {
  margin-top: 2px;
  color: var(--ink);
  font-size: 1.04rem;
  line-height: 1.25;
}

.ai-insight-head small,
.ai-insight-card p {
  color: var(--muted);
  line-height: 1.45;
}

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

.ai-insight-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--insight-color, var(--blue)) 22%, var(--line));
  border-left: 5px solid var(--insight-color, var(--blue));
  border-radius: 8px;
  background: color-mix(in srgb, var(--insight-color, var(--blue)) 8%, var(--panel));
}

.ai-insight-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ai-insight-card strong {
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.25;
}

.ai-insight-card p {
  margin: 0;
  font-size: 0.82rem;
}

.ai-insight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.ai-insight-action {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, white);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.ai-insight-action:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.ai-insight-action.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #ef4444, #2563eb);
  color: #fff;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
}

.ai-insight-action:disabled {
  cursor: wait;
  opacity: 0.65;
  transform: none;
  box-shadow: none;
}

body[data-theme="dark"] .ai-insight-action {
  background: color-mix(in srgb, var(--panel) 82%, #020617);
}

.seller-health-grid {
  margin-top: 12px;
}

.seller-command-center {
  background:
    linear-gradient(135deg, rgba(13, 139, 139, 0.08), rgba(37, 99, 235, 0.06) 42%, rgba(245, 158, 11, 0.08)),
    color-mix(in srgb, var(--panel) 93%, white);
}

.seller-source-badges {
  justify-content: flex-end;
}

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

.seller-kpi-grid article {
  display: grid;
  gap: 6px;
  min-height: 104px;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent, #0d8b8b);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, #0d8b8b) 8%, var(--panel));
}

.seller-kpi-grid article:nth-child(1) {
  --accent: #0d8b8b;
}

.seller-kpi-grid article:nth-child(2) {
  --accent: #16a34a;
}

.seller-kpi-grid article:nth-child(3) {
  --accent: #2563eb;
}

.seller-kpi-grid article:nth-child(4) {
  --accent: #d97706;
}

.seller-kpi-grid article:nth-child(5) {
  --accent: #7c3aed;
}

.seller-kpi-grid article:nth-child(6) {
  --accent: #ec4899;
}

.seller-kpi-grid article:nth-child(7) {
  --accent: #f59e0b;
}

.seller-kpi-grid article:nth-child(8) {
  --accent: #ef4444;
}

.seller-kpi-grid span,
.seller-profit-card span,
.seller-action-grid span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.seller-kpi-grid strong {
  color: var(--ink);
  font-size: 1.24rem;
  line-height: 1.1;
}

.seller-kpi-grid small,
.seller-profit-card small,
.seller-profit-card p,
.seller-action-grid small {
  color: var(--muted);
  line-height: 1.4;
}

.seller-presentation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 12px;
}

.seller-target-card,
.seller-profit-card,
.seller-action-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 90%, white);
}

.seller-target-card,
.seller-profit-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.seller-target-list {
  display: grid;
  gap: 10px;
}

.seller-target-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(118px, 0.45fr) minmax(150px, 0.75fr) minmax(180px, 0.8fr);
  gap: 10px;
  align-items: center;
}

.seller-target-row > span {
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 900;
}

.seller-target-row > strong {
  color: var(--ink);
  text-align: right;
}

.seller-target-row > small {
  color: var(--muted);
  line-height: 1.3;
}

.seller-target-track {
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 70%, white);
}

.seller-target-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ef4444, #f59e0b 45%, #10b981);
}

.seller-profit-card strong {
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.15;
}

.seller-profit-bridge {
  display: grid;
  gap: 8px;
}

.seller-profit-bridge div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}

.seller-profit-bridge div:nth-child(3) {
  border-color: color-mix(in srgb, var(--green) 32%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, var(--panel));
}

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

.seller-action-grid article {
  display: grid;
  gap: 6px;
  padding: 12px;
}

.seller-action-grid strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.25;
}

.seller-dashboard-table {
  min-width: 1520px;
}

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

.source-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-bubble.loading-bubble {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.chat-bubble.error-bubble {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, var(--panel));
}

.spinner {
  width: 18px;
  height: 18px;
  border: 3px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-top-color: var(--blue);
  border-radius: 999px;
  animation: spin 760ms linear infinite;
}

.primary-button:disabled,
.secondary-button:disabled,
.primary-button.is-loading {
  cursor: progress;
  opacity: 0.68;
}

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

body[data-theme="dark"] .business-report-card,
body[data-theme="dark"] .ads-report-card,
body[data-theme="dark"] .seller-profile-report,
body[data-theme="dark"] .crm-panel,
body[data-theme="dark"] .ads-donut-card,
body[data-theme="dark"] .ads-funnel-card,
body[data-theme="dark"] .ads-chart-card,
body[data-theme="dark"] .ads-pacing-card,
body[data-theme="dark"] .ads-insight-strip article,
body[data-theme="dark"] .ads-insight-strip button,
body[data-theme="dark"] .ads-breakdown-grid article,
body[data-theme="dark"] .ads-breakdown-grid button,
body[data-theme="dark"] .ads-line-chart-card,
body[data-theme="dark"] .ads-line-chart-wrap,
body[data-theme="dark"] .ads-drilldown-panel,
body[data-theme="dark"] .firebase-funnel-card,
body[data-theme="dark"] .firebase-funnel-steps article,
body[data-theme="dark"] .firebase-funnel-summary article,
body[data-theme="dark"] .utm-governance-panel,
body[data-theme="dark"] .utm-funnel-card,
body[data-theme="dark"] .utm-workflow-card,
body[data-theme="dark"] .utm-export-card,
body[data-theme="dark"] .utm-status-card,
body[data-theme="dark"] .utm-funnel-summary article,
body[data-theme="dark"] .utm-issue-row,
body[data-theme="dark"] .utm-check-item,
body[data-theme="dark"] .ads-action-grid article,
body[data-theme="dark"] .ai-insight-panel,
body[data-theme="dark"] .ai-insight-card,
body[data-theme="dark"] .seller-target-card,
body[data-theme="dark"] .seller-profit-card,
body[data-theme="dark"] .seller-action-grid article,
body[data-theme="dark"] .integration-setup-disclosure,
body[data-theme="dark"] .business-table-scroll,
body[data-theme="dark"] .settings-card,
body[data-theme="dark"] .settings-item,
body[data-theme="dark"] .tool-output-card,
body[data-theme="dark"] .tool-split article,
body[data-theme="dark"] .chat-bubble.assistant {
  background: color-mix(in srgb, var(--panel) 92%, #020617);
}

body[data-theme="dark"] .business-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--surface) 42%, #020617);
}

body[data-theme="dark"] .ads-bar-track,
body[data-theme="dark"] .ads-column-track,
body[data-theme="dark"] .ads-drilldown-kpis span,
body[data-theme="dark"] .seller-target-track,
body[data-theme="dark"] .seller-profit-bridge div {
  background: color-mix(in srgb, var(--surface-strong) 70%, #020617);
}

body[data-theme="dark"] .ads-donut::after {
  background: color-mix(in srgb, var(--panel) 94%, #020617);
}

.analytics-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.module-card {
  display: flex;
  min-height: 236px;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.compact-tool-card {
  position: relative;
  overflow: visible;
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--accent, #2563eb) 16%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.86)),
    var(--panel-bg);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.compact-tool-card:hover {
  z-index: 8;
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 38%, var(--line));
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

.compact-tool-card:focus-within {
  z-index: 8;
}

.module-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.module-top > div {
  min-width: 0;
}

.module-top h3 {
  display: -webkit-box;
  min-height: 2.18em;
  margin-bottom: 5px;
  overflow: hidden;
  font-size: 0.98rem;
  line-height: 1.12;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.module-status-icon {
  display: inline-grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.11);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}

.module-status-icon .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.module-status-icon.live {
  color: #16885d;
  background: rgba(22, 136, 93, 0.12);
}

.module-status-icon.ready {
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.13);
}

.module-status-icon.setup {
  color: #b45309;
  background: rgba(245, 158, 11, 0.16);
}

.module-status-icon.watch {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.12);
}

.module-status-icon.neutral {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.11);
}

.tool-card-summary,
.module-card p,
.task-row p,
.insight-item p,
.reminder-item p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: normal;
}

.insight-item p,
.reminder-item p,
.supervisor-insight-card p,
.supervisor-recommendation p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.tool-card-summary {
  display: -webkit-box;
  min-height: 2.55em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

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

.tool-signal-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--accent, var(--blue)) 15%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, var(--blue)) 5%, var(--panel));
}

.tool-signal-row strong {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1;
}

.tool-signal-row small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-card-progress {
  display: grid;
  gap: 7px;
}

.tool-card-progress .row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.tool-card-progress .row-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-card-setup-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--accent, var(--blue)) 18%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.tool-card-setup-strip strong,
.tool-card-setup-strip small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-card-setup-strip strong {
  font-size: 0.78rem;
}

.tool-card-setup-strip small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.setup-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 14%, transparent);
}

.setup-dot.live {
  background: var(--green);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 14%, transparent);
}

.setup-dot.ready {
  background: #8b5cf6;
  box-shadow: 0 0 0 5px color-mix(in srgb, #8b5cf6 14%, transparent);
}

.setup-dot.setup {
  background: var(--gold);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 16%, transparent);
}

.setup-dot.watch {
  background: var(--red);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 14%, transparent);
}

.has-tooltip {
  position: relative;
}

.has-tooltip::after {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2000;
  width: min(240px, 72vw);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 94%, #111827);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
  color: #fff;
  content: attr(data-tooltip);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: break-word;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.has-tooltip:hover::after,
.has-tooltip:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.module-status-icon.has-tooltip::after {
  display: none;
}

.floating-tooltip {
  position: fixed;
  z-index: 10000;
  width: min(330px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.96);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.28);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.floating-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.module-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.module-section {
  display: grid;
  gap: 7px;
}

.mini-disclosure {
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}

.mini-disclosure .module-section {
  margin-top: 10px;
}

.module-section strong,
.setup-guidance strong,
.setup-history strong,
.chat-bubble strong {
  font-size: 0.78rem;
}

.module-section ol,
.workflow-steps,
.chat-bubble ul {
  margin: 0;
  padding-left: 18px;
}

.module-section li,
.workflow-steps li,
.chat-bubble li {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.tool-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}

.tool-card-actions .primary-button,
.tool-card-actions .secondary-button {
  min-height: 38px;
  justify-content: center;
  padding-inline: 10px;
  border-radius: 8px;
  font-size: 0.76rem;
}

.tool-card-actions .icon {
  width: 16px;
  height: 16px;
}

.chip {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.chip.source-chip {
  flex-shrink: 0;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.provenance-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.provenance-chip {
  border-color: color-mix(in srgb, var(--muted) 28%, var(--line));
}

.provenance-warning {
  color: color-mix(in srgb, var(--gold) 70%, var(--ink));
  border-color: color-mix(in srgb, var(--gold) 42%, var(--line));
}

.provenance-success {
  color: color-mix(in srgb, var(--green) 70%, var(--ink));
  border-color: color-mix(in srgb, var(--green) 42%, var(--line));
}

.provenance-info {
  color: color-mix(in srgb, var(--blue) 70%, var(--ink));
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
}

.privacy-chip-row {
  align-items: center;
}

.privacy-chip {
  border: 1px solid var(--line);
}

.privacy-success {
  color: color-mix(in srgb, var(--green) 72%, var(--ink));
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
}

.privacy-warning {
  color: color-mix(in srgb, var(--gold) 72%, var(--ink));
  background: color-mix(in srgb, var(--gold) 10%, var(--surface));
}

.privacy-summary,
.privacy-blocked-reason {
  display: block;
  max-width: 100%;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.privacy-blocked-reason {
  color: color-mix(in srgb, var(--gold) 78%, var(--ink));
  font-weight: 700;
}

.executive-readiness-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.executive-readiness-strip .status-pill {
  min-width: 0;
  white-space: normal;
}

.executive-readiness-strip small {
  font-weight: 700;
  margin-right: 4px;
}

.readiness-improvement-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.readiness-improvement-list h4 {
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.readiness-improvement-list ul,
.readiness-improvement-list p {
  margin: 0;
  color: var(--muted);
}

.readiness-improvement-list ul {
  display: grid;
  gap: 6px;
  padding-left: 18px;
}

.task-chip {
  --task-chip-color: var(--muted);
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--task-chip-color) 28%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--task-chip-color) 13%, transparent), transparent 70%),
    color-mix(in srgb, var(--task-chip-color) 8%, var(--panel));
  color: color-mix(in srgb, var(--task-chip-color) 76%, var(--ink));
  white-space: nowrap;
}

.task-chip::before {
  content: "";
  width: 7px;
  min-width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--task-chip-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--task-chip-color) 13%, transparent);
}

.task-chip-danger {
  --task-chip-color: var(--red);
}

.task-chip-warning {
  --task-chip-color: var(--gold);
}

.task-chip-success {
  --task-chip-color: var(--green);
}

.task-chip-info {
  --task-chip-color: var(--blue);
}

.task-chip-insight {
  --task-chip-color: var(--violet);
}

.task-chip-division {
  --task-chip-color: var(--teal);
}

.task-chip-neutral {
  --task-chip-color: var(--muted);
}

.task-chip-priority {
  font-weight: 850;
}

.task-priority-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--task-priority-color, var(--blue)) 34%, var(--line));
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--task-priority-color, var(--blue)) 15%, transparent), transparent 72%),
    color-mix(in srgb, var(--task-priority-color, var(--blue)) 8%, var(--panel));
  color: color-mix(in srgb, var(--task-priority-color, var(--blue)) 78%, var(--ink));
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1.15;
  white-space: nowrap;
}

.task-priority-critical {
  --task-priority-color: var(--red);
}

.task-priority-urgent {
  --task-priority-color: #ea580c;
}

.task-priority-major,
.task-priority-high {
  --task-priority-color: var(--gold);
}

.task-priority-bug {
  --task-priority-color: #be123c;
}

.task-priority-medium {
  --task-priority-color: var(--blue);
}

.task-priority-minor {
  --task-priority-color: var(--teal);
}

.task-priority-low {
  --task-priority-color: var(--green);
}

.task-chip-due.task-chip-danger {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--red) 18%, transparent), transparent 66%),
    color-mix(in srgb, var(--red) 10%, var(--panel));
}

.progress-track {
  overflow: hidden;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #eee3d6;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--green));
}

.task-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 14px;
}

.mom-upload-field {
  display: grid;
  flex: 1 1 340px;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--blue) 38%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 6%, var(--panel));
}

.mom-upload-field span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.mom-upload-field input[type="file"] {
  width: 100%;
  min-width: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 750;
}

.mom-upload-field input[type="file"]::file-selector-button {
  margin-right: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, white);
  color: var(--ink);
  padding: 8px 11px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.mom-upload-field input[type="file"]::file-selector-button:hover {
  background: color-mix(in srgb, var(--blue) 9%, var(--panel));
}

.task-form input,
.task-form select,
.task-form textarea {
  min-width: 0;
}

.task-form textarea {
  flex: 999 1 520px;
  min-height: 72px;
}

.task-form #taskTitle {
  flex: 2 1 360px;
}

.task-form #taskDivisionFilter {
  flex: 1 1 170px;
}

.task-form #taskDivision {
  flex: 1 1 160px;
}

.task-form #taskAssignee {
  flex: 1.2 1 190px;
}

.task-form #taskDueDate {
  flex: 0 1 150px;
  min-width: 150px;
}

.task-form #taskPriority {
  flex: 0 1 108px;
  margin-left: auto;
}

.task-form .primary-button {
  flex: 0 0 132px;
  width: 132px;
  white-space: nowrap;
  padding-inline: 16px;
}

.task-form .primary-button.icon-only-button {
  flex: 0 0 56px;
  width: 56px;
  min-width: 56px;
  padding-inline: 0;
}

.mom-library {
  display: grid;
  gap: 12px;
  margin: 14px 0 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 7%, transparent), transparent 54%),
    color-mix(in srgb, var(--panel) 90%, var(--surface));
  overflow: hidden;
}

.mom-library-heading,
.mom-viewer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mom-library-heading h3,
.mom-viewer-card h3 {
  margin: 2px 0 4px;
  font-size: 1.05rem;
  line-height: 1.22;
}

.mom-library-heading small,
.mom-viewer-card small,
.mom-card small {
  color: var(--muted);
  line-height: 1.4;
}

.mom-library-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.35fr);
  gap: 10px;
}

.mom-library-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  gap: 12px;
  align-items: start;
}

.mom-catalog {
  display: grid;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 520px;
  padding-right: 6px;
}

.mom-card {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 88%, var(--surface));
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.mom-card > div {
  min-width: 0;
}

.mom-card:hover,
.mom-card.active {
  border-color: color-mix(in srgb, var(--blue) 62%, var(--line));
  box-shadow: 0 12px 26px rgba(47, 123, 194, 0.12);
  transform: translateY(-1px);
}

.mom-card strong {
  display: block;
  margin-bottom: 3px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.mom-card p,
.mom-notes {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.mom-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.mom-card small {
  display: block;
  overflow-wrap: anywhere;
}

.mom-card-meta {
  align-items: center;
}

.mom-viewer,
.mom-viewer-card {
  min-width: 0;
}

.mom-viewer-card,
.mom-viewer-empty {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  overflow: hidden;
}

.mom-viewer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mom-notes {
  padding: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 7%, var(--surface));
  color: var(--ink-soft);
}

.mom-viewer-card pre {
  overflow: auto;
  max-height: 230px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.86rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.mom-document-preview {
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
}

.mom-section-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 4%, transparent), transparent 74%),
    color-mix(in srgb, var(--panel-bg) 94%, var(--surface));
}

.mom-section-card h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.32;
}

.mom-section-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.mom-section-card li,
.mom-section-card p,
.mom-preview-empty {
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.mom-section-card p,
.mom-preview-empty {
  margin: 0;
}

.mom-preview-empty {
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.mom-action-items {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 6%, transparent), transparent 68%),
    color-mix(in srgb, var(--panel) 92%, var(--surface));
}

.mom-action-heading,
.mom-action-item,
.mom-action-meta {
  display: flex;
  gap: 8px;
}

.mom-action-heading {
  align-items: center;
  justify-content: space-between;
}

.mom-action-item {
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 90%, white);
}

.mom-action-item p,
.mom-action-items > p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.mom-action-meta {
  min-width: 180px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mom-viewer-empty p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.task-scope-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 7%, var(--panel));
}

.task-scope-note p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}

.period-tag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, var(--panel));
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
}

.action-plan-workspace {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.action-summary-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 10px;
  padding-bottom: 2px;
  min-width: 0;
}

.action-stat {
  display: grid;
  min-width: 0;
  place-items: center;
  min-height: 82px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: var(--shadow);
  text-align: center;
}

.action-stat-button {
  appearance: none;
  width: 100%;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.action-stat-button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--blue) 52%, var(--line));
  box-shadow: var(--shadow-strong);
}

.action-stat-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 24%, transparent);
  outline-offset: 2px;
}

.action-stat-button.is-active {
  border-color: color-mix(in srgb, var(--blue) 72%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, var(--panel));
}

.action-stat-button.is-active span,
.action-stat-button.is-active small {
  color: var(--blue);
}

.action-stat strong {
  color: var(--ink);
  font-size: 1.65rem;
  line-height: 1;
}

.action-stat span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.action-workload-summary {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.action-stat small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.action-stat-info {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line));
  background: color-mix(in srgb, var(--blue) 7%, var(--panel));
}

.action-stat-danger {
  border-color: color-mix(in srgb, var(--red) 36%, var(--line));
}

.action-stat-warning {
  border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
}

.action-stat-success {
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
}

.action-stat-insight {
  border-color: color-mix(in srgb, var(--violet) 34%, var(--line));
}

.action-plan-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.action-plan-search-field {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--muted);
}

.action-plan-search-field svg {
  width: 18px;
  height: 18px;
}

.action-plan-search-field input {
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.action-plan-search-field input:focus {
  outline: none;
}

.action-plan-filter-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  gap: 8px;
  align-items: end;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.action-plan-filter-disclosure {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}

.action-plan-filter-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.action-plan-filter-disclosure > summary::-webkit-details-marker {
  display: none;
}

.action-plan-filter-disclosure > summary span {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 900;
}

.action-plan-filter-disclosure > summary small {
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-plan-filter-disclosure .action-plan-filter-panel {
  margin: 0 10px 10px;
}

.action-plan-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 34px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 850;
}

.filter-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-chip.active {
  border-color: color-mix(in srgb, var(--blue) 52%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, var(--panel-bg));
  color: var(--blue);
}

.action-plan-filter-panel label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.action-plan-filter-panel label span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.action-plan-filter-panel select,
.action-plan-filter-panel input {
  min-width: 0;
  width: 100%;
}

.action-plan-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.action-plan-filter-actions .mini-button {
  min-height: 38px;
}

.action-plan-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.action-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.action-kanban-wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.action-kanban-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--blue) 40%, transparent) transparent;
}

.action-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.action-status-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.action-status-legend strong {
  color: var(--ink);
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--muted);
}

.legend-status-blue {
  background: var(--blue);
}

.legend-warning {
  background: #d97706;
}

.legend-action {
  background: var(--red);
}

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

.action-kanban-scroll .action-status-board {
  grid-template-columns: repeat(8, minmax(276px, 300px));
  width: max-content;
  min-width: 100%;
}

.action-board-config-disclosure {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: min(100%, 720px);
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.action-board-config-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.action-board-config-disclosure > summary::-webkit-details-marker {
  display: none;
}

.action-board-config-disclosure > summary span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 900;
}

.action-board-config-disclosure > summary small {
  min-width: 0;
  color: var(--muted);
  font-size: 0.74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-board-config {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border-top: 1px solid var(--line);
}

.action-board-config-list,
.action-board-config-actions,
.action-board-config-chip {
  display: flex;
  align-items: center;
  gap: 6px;
}

.action-board-config-list {
  flex-wrap: wrap;
  min-width: 0;
}

.action-board-config-chip {
  min-height: 30px;
  padding: 3px 5px 3px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-strong);
  font-size: 12px;
  color: var(--text);
}

.action-board-config-chip strong {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-board-config-actions {
  flex: 0 1 260px;
  justify-content: flex-end;
  min-width: 0;
  flex-wrap: wrap;
}

.action-board-config select {
  min-height: 32px;
  max-width: 170px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.action-board-config-actions .mini-button {
  min-width: 0;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-priority-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.action-priority-col {
  display: grid;
  gap: 10px;
  min-width: 0;
  min-height: 320px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.action-priority-critical .action-kanban-head {
  border-color: color-mix(in srgb, var(--red) 42%, var(--line));
  color: var(--red);
  background: color-mix(in srgb, var(--red) 7%, var(--panel));
}

.action-priority-high .action-kanban-head {
  border-color: color-mix(in srgb, var(--gold) 42%, var(--line));
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, var(--panel));
}

.action-priority-medium .action-kanban-head {
  border-color: color-mix(in srgb, var(--blue) 36%, var(--line));
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, var(--panel));
}

.action-priority-low .action-kanban-head {
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
  color: var(--green);
  background: color-mix(in srgb, var(--green) 7%, var(--panel));
}

.action-kanban-col {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 280px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.action-kanban-col.is-drop-target {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, var(--surface-strong));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--blue) 28%, transparent);
}

.action-kanban-col.is-drop-blocked {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, var(--surface-strong));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--red) 22%, transparent);
}

.action-kanban-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.2;
}

.action-kanban-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-kanban-head .chip {
  display: inline-grid;
  flex: 0 0 auto;
  min-width: 28px;
  height: 28px;
  place-items: center;
  margin-left: auto;
  padding: 0 8px;
  border-radius: 999px;
}

.action-lane-danger .action-kanban-head {
  border-color: color-mix(in srgb, var(--red) 34%, var(--line));
  color: var(--red);
  background: color-mix(in srgb, var(--red) 7%, var(--panel));
}

.action-lane-action .action-kanban-head {
  border-color: color-mix(in srgb, var(--red) 34%, var(--line));
  color: var(--red);
  background: color-mix(in srgb, var(--red) 7%, var(--panel));
}

.action-lane-warning .action-kanban-head {
  border-color: color-mix(in srgb, var(--gold) 38%, var(--line));
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, var(--panel));
}

.action-lane-success .action-kanban-head {
  border-color: color-mix(in srgb, var(--green) 32%, var(--line));
  color: var(--green);
  background: color-mix(in srgb, var(--green) 7%, var(--panel));
}

.action-lane-status-blue .action-kanban-head {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, var(--panel));
}

.action-lane-status-muted .action-kanban-head {
  border-color: var(--line);
  color: var(--muted);
  background: var(--panel-bg);
}

.action-kanban-list,
.action-card {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.action-card {
  grid-template-columns: minmax(0, 1fr);
  max-width: 100%;
  overflow: hidden;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.action-card.is-dragging {
  opacity: 0.58;
  transform: rotate(0.4deg) scale(0.99);
}

.action-card:hover,
.action-card:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  outline: none;
}

.action-card-urgent {
  border-left-color: var(--line-strong);
}

.action-card-week {
  border-left-color: var(--line-strong);
}

.action-card-month {
  border-left-color: var(--line-strong);
}

.action-card-done {
  border-left-color: var(--muted);
  opacity: 0.72;
}

.action-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 6px;
  align-items: start;
  min-width: 0;
}

.action-card-head {
  display: block;
  min-width: 0;
}

.action-card-head strong {
  display: -webkit-box;
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.3;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.action-card-drag-handle {
  width: 30px;
  height: 30px;
  cursor: grab;
  touch-action: none;
}

.action-card-drag-handle:active {
  cursor: grabbing;
}

.action-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.action-card-badges .status-pill {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-card-badges .action-due-window {
  color: var(--ink-soft);
  background: var(--surface);
}

.notification-task-badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, var(--panel));
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
}

.notification-task-badge.urgent {
  background: color-mix(in srgb, var(--red) 12%, var(--panel));
  color: var(--red);
}

.action-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.action-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.my-work-show-more-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 800;
}

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

.action-card-owner .avatar-small,
.action-avatar {
  width: 30px;
  height: 30px;
  font-size: 0.68rem;
}

.action-card-owner span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.action-card-owner strong,
.action-card-owner small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-card-owner small {
  color: var(--muted);
  font-size: 0.72rem;
}

.action-card-meta span {
  max-width: 100%;
  overflow: hidden;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--surface);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-card .next-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  min-width: 0;
  padding-top: 2px;
}

.action-card .next-action strong {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.action-card .next-action span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.action-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-status-quick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, var(--panel-bg));
}

.task-status-current {
  max-width: 100%;
}

.task-status-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}

.task-status-step {
  display: flex;
  gap: 5px;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.task-status-step > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-status-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel-bg);
}

.task-status-step.is-complete {
  color: var(--green);
}

.task-status-step.is-complete .task-status-dot {
  border-color: var(--green);
  background: var(--green);
}

.task-status-step.is-active {
  color: var(--blue);
}

.task-status-step.is-active .task-status-dot {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
}

.task-status-action {
  justify-self: start;
  min-height: 32px;
  white-space: nowrap;
}

.task-status-note {
  grid-column: 1 / -1;
  color: var(--red);
  font-size: 0.74rem;
  font-weight: 800;
}

.task-status-quick-detail {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
  background: var(--surface);
}

.task-status-quick-detail .task-status-action {
  justify-self: end;
}

.source-chip {
  border-radius: 999px;
}

.source-manual {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 9%, var(--panel));
}

.source-personal {
  color: var(--teal);
  background: color-mix(in srgb, var(--teal) 10%, var(--panel));
}

.source-ai {
  color: var(--violet);
  background: color-mix(in srgb, var(--violet) 11%, var(--panel));
}

.source-supervisor {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--panel));
}

.source-accountability {
  color: var(--violet);
  background: color-mix(in srgb, var(--violet) 9%, var(--panel));
}

.source-revenue {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 11%, var(--panel));
}

.source-seller {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 9%, var(--panel));
}

.action-timeline {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

.action-timeline-item {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.timeline-dot {
  position: absolute;
  left: -19px;
  top: 18px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--panel-bg);
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 2px var(--line);
}

.action-timeline-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.action-calendar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr);
  gap: 12px;
  min-width: 0;
}

.action-calendar-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
}

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

.calendar-weekday {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.action-calendar-day {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  min-height: 92px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--ink);
  text-align: left;
}

.action-calendar-day.empty {
  background: transparent;
  border-style: dashed;
  opacity: 0.45;
}

.action-calendar-day.active {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}

.action-calendar-day.overdue {
  border-color: color-mix(in srgb, var(--red) 34%, var(--line));
}

.action-calendar-day span,
.action-calendar-day small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.2;
}

.calendar-high {
  color: var(--gold) !important;
  font-weight: 850;
}

.calendar-overdue {
  color: var(--red) !important;
  font-weight: 850;
}

.action-calendar-selected {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.action-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.34);
  overflow: hidden;
}

.action-detail-modal {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  width: min(680px, calc(100vw - 48px));
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  padding: 22px;
  border-left: 1px solid var(--line);
  background: var(--panel-bg);
  box-shadow: var(--shadow-md, 0 18px 50px rgba(15, 23, 42, 0.22));
  overscroll-behavior: contain;
}

.action-detail-modal > .modal-close {
  position: sticky;
  top: 14px;
  z-index: 4;
  justify-self: end;
  margin-bottom: -52px;
}

.action-detail-heading {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  gap: 8px;
  margin: -22px -22px 0;
  padding: 22px 66px 16px 22px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-bg) 94%, var(--surface));
  backdrop-filter: blur(16px);
}

.action-reminder-section {
  display: grid;
  gap: 10px;
}

.action-reminder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.action-reminder-grid {
  margin: 0;
}

.calendar-preview-box {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 6%, var(--panel-bg));
}

.calendar-preview-box strong,
.calendar-preview-box span,
.calendar-preview-box small {
  overflow-wrap: anywhere;
}

.google-chat-preview {
  background: color-mix(in srgb, var(--green) 6%, var(--panel-bg));
}

.notification-task-badge.reminder {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.action-detail-heading h3 {
  display: -webkit-box;
  margin: 0;
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1.2;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.action-detail-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  overflow-wrap: break-word;
  word-break: normal;
}

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

.action-enterprise-tabs {
  display: grid;
  gap: 10px;
}

.action-enterprise-tabs .action-view-tabs {
  justify-content: flex-start;
  overflow-x: auto;
}

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

.action-enterprise-grid article {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 92%, var(--surface));
}

.enterprise-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.enterprise-list p {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0;
}

.enterprise-list strong,
.enterprise-list small,
.enterprise-list span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.action-evidence {
  max-height: 180px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.78rem;
  white-space: pre-wrap;
}

.action-plan-snackbar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 220;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-md);
  color: var(--ink);
}

.action-plan-snackbar > span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.86rem;
}

.task-detail-modal {
  width: min(1080px, calc(100vw - 40px));
}

.task-detail-heading {
  position: relative;
}

.task-detail-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.task-detail-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.task-title-inline {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.task-title-inline span,
.task-detail-header-grid label > span,
.task-inline-section h4,
.task-section-heading h4,
.task-detail-sidebar h4 {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.task-title-inline input {
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.24rem;
  font-weight: 850;
  line-height: 1.25;
}

.task-detail-header-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  min-width: 0;
}

.task-detail-header-grid label,
.task-inline-section {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.task-readonly-pill {
  display: flex;
  align-items: center;
  min-height: 38px;
}

.task-detail-snapshot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  min-width: 0;
}

.task-detail-snapshot span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.task-detail-snapshot small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.task-detail-snapshot strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warning-note {
  color: var(--red);
}

.task-detail-edit-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.task-detail-edit-form textarea,
.task-detail-edit-form input,
.task-detail-edit-form select {
  min-width: 0;
  width: 100%;
}

.task-detail-save-row {
  position: sticky;
  bottom: -22px;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-inline: -22px;
  padding: 10px 22px 14px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-bg) 94%, var(--surface));
}

.task-detail-save-row .mini-button.danger {
  margin-right: auto;
}

.task-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.task-detail-main,
.task-detail-sidebar {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.task-detail-sidebar {
  position: sticky;
  top: 82px;
}

.task-optional-fields {
  padding: 0;
}

.task-optional-fields > .modal-section {
  margin: 0 12px 12px;
}

.task-detail-sidebar > section,
.task-inline-section,
.task-subtask-panel,
.task-attachment-panel,
.task-comments-panel,
.task-activity-panel {
  min-width: 0;
}

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

.task-section-heading > div {
  min-width: 0;
}

.task-section-heading h4,
.task-detail-sidebar h4,
.task-inline-section h4 {
  margin: 0;
}

.task-section-heading small {
  color: var(--muted);
}

.task-assignee-picker {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.task-assignee-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 8px;
  min-width: 0;
  max-height: 220px;
  overflow: auto;
}

.task-assignee-option {
  display: grid;
  grid-template-columns: 18px 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.task-assignee-option input {
  width: auto;
}

.task-assignee-option span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.task-assignee-option strong,
.task-assignee-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-assignee-option small {
  color: var(--muted);
  font-size: 0.72rem;
}

.task-progress-bar {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: var(--surface);
}

.task-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.task-checklist,
.task-attachment-grid,
.task-comment-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.task-checklist-item,
.task-attachment-item,
.task-comment {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.task-checklist-item.done {
  opacity: 0.72;
}

.task-check-button {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--green);
}

.task-checklist-item span,
.task-attachment-item div,
.task-comment div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.task-checklist-item strong,
.task-checklist-item small,
.task-attachment-item strong,
.task-attachment-item small,
.task-comment strong,
.task-comment small,
.task-comment p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.task-comment p {
  margin: 4px 0 0;
}

.task-comment-form {
  display: grid;
  gap: 8px;
}

.task-comment-form .mini-button {
  justify-self: end;
}

.task-detail-list {
  gap: 6px;
}

.legacy-task-list {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.legacy-task-list summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 900;
}

.legacy-task-list summary span {
  color: var(--muted);
}

@media (max-width: 1180px) {
  .action-summary-bar {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  }

  .action-kanban-wrap,
  .action-priority-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .action-kanban-wrap,
  .action-priority-grid,
  .action-calendar {
    grid-template-columns: 1fr;
  }

  .action-plan-toolbar {
    grid-template-columns: 1fr;
  }

  .action-view-tabs {
    justify-content: flex-start;
  }

  .action-stat {
    min-height: 72px;
  }

  .action-calendar-grid {
    gap: 4px;
  }

  .action-calendar-day {
    min-height: 78px;
    padding: 6px;
  }

  .action-detail-modal {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    padding: 18px;
    border-left: 0;
  }

  .action-detail-heading {
    margin: -18px -18px 0;
    padding: 18px 62px 14px 18px;
  }

  .action-detail-grid {
    grid-template-columns: 1fr;
  }

  .task-detail-modal {
    width: 100vw;
  }

  .task-detail-header-grid,
  .task-detail-snapshot,
  .task-detail-body {
    grid-template-columns: 1fr;
  }

  .task-detail-sidebar {
    position: static;
  }

  .task-detail-save-row {
    bottom: -18px;
    margin-inline: -18px;
    padding-inline: 18px;
  }

  .task-assignee-options {
    grid-template-columns: 1fr;
    max-height: 190px;
  }

  .task-attachment-form {
    grid-template-columns: 1fr;
  }

  .action-plan-snackbar {
    right: 8px;
    bottom: 8px;
    left: 8px;
    max-width: none;
  }
}

.task-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.8rem;
}

.task-chat-reminders {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.task-chat-reminder {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 6%, var(--panel));
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.2;
}

.task-chat-reminder .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.task-chat-reminder small {
  color: var(--muted);
  font-weight: 800;
}

.task-list,
.insight-list,
.reminder-list,
.integration-list,
.ticket-list,
.rbac-list,
.workflow-board {
  display: grid;
  gap: 10px;
}

.task-row,
.insight-item,
.reminder-item,
.rbac-item,
.integration-row,
.ticket-item,
.seller-row,
.workflow-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, white);
}

.insight-action-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 5%, transparent), transparent 62%),
    color-mix(in srgb, var(--panel) 92%, white);
}

.insight-card-head {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.insight-title-button {
  display: block;
  min-width: 0;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.insight-title-button h3 {
  display: -webkit-box;
  margin-bottom: 0;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.insight-title-button:hover h3 {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.insight-tool-chip {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.2;
  overflow: hidden;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insight-action-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 2px;
}

.insight-action-row .mini-button {
  justify-content: flex-start;
  min-height: 36px;
  gap: 7px;
  background: color-mix(in srgb, var(--panel) 88%, white);
}

.insight-action-row .primary-mini {
  border-color: transparent;
  background: linear-gradient(135deg, #ef4444, #2563eb);
  color: #fff;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.16);
}

.insight-action-row .icon {
  width: 15px;
  height: 15px;
}

.reminder-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.reminder-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
}

.reminder-action-card {
  position: relative;
  overflow: hidden;
}

.reminder-action-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: var(--reminder-tone, var(--green));
}

.reminder-tone-high {
  --reminder-tone: var(--red);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--red) 8%, transparent), transparent 62%),
    color-mix(in srgb, var(--panel) 92%, white);
}

.reminder-tone-medium {
  --reminder-tone: var(--gold);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent 62%),
    color-mix(in srgb, var(--panel) 92%, white);
}

.reminder-tone-low {
  --reminder-tone: var(--green);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--green) 8%, transparent), transparent 62%),
    color-mix(in srgb, var(--panel) 92%, white);
}

.reminder-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.reminder-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 14%, transparent);
}

.reminder-dot.high {
  background: var(--red);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 14%, transparent);
}

.reminder-dot.medium {
  background: var(--gold);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 16%, transparent);
}

.reminder-dot.low {
  background: var(--green);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 14%, transparent);
}

.reminder-title-button {
  display: block;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.reminder-title-button h3 {
  margin-bottom: 0;
}

.reminder-title-button:hover h3 {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reminder-meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.reminder-meta-grid span {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--reminder-tone, var(--green)) 18%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}

.reminder-meta-grid strong,
.reminder-meta-grid small,
.reminder-tool-line span,
.reminder-tool-line a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.reminder-meta-grid strong {
  font-size: 0.76rem;
}

.reminder-meta-grid small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 760;
}

.reminder-tool-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.reminder-tool-line a {
  color: var(--blue);
}

.reminder-action-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.reminder-action-row .mini-button {
  justify-content: flex-start;
  min-height: 36px;
  gap: 7px;
  background: color-mix(in srgb, var(--panel) 88%, white);
}

.reminder-action-row .primary-mini {
  border-color: transparent;
  background: linear-gradient(135deg, #ef4444, #2563eb);
  color: #fff;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.16);
}

.reminder-action-row .icon {
  width: 15px;
  height: 15px;
}

.tool-workbench {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.tool-detail-panel {
  margin-top: 16px;
}

.tool-detail-card {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--accent);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 52%),
    color-mix(in srgb, var(--panel) 90%, white);
}

.tool-detail-hero,
.tool-detail-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tool-detail-hero p {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.tool-detail-actions {
  flex-wrap: wrap;
}

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

.tool-detail-grid section {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, white);
}

.tool-detail-grid ol {
  margin: 0;
  padding-left: 18px;
}

.tool-detail-grid li {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.auth-result {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background: color-mix(in srgb, #2563eb 10%, var(--panel));
}

.auth-result p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.auth-result code {
  overflow-wrap: anywhere;
  padding: 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 80%, black);
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.workbench-heading,
.workflow-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

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

.tool-setup-form textarea,
.tool-setup-form .file-input,
.tool-setup-form .primary-button,
.setup-guidance,
.setup-result,
.setup-history {
  grid-column: 1 / -1;
}

.file-input,
.tool-setup-form label {
  display: grid;
  gap: 6px;
}

.file-input span,
.field-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.setup-result {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 10%, white);
}

.setup-result p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.setup-history {
  display: grid;
  gap: 8px;
}

.setup-history-row {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, white);
}

.setup-history-row small {
  color: var(--muted);
}

.developer-center {
  display: grid;
  gap: 16px;
}

.developer-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--blue) 16%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 92%, white), color-mix(in srgb, var(--surface) 88%, white));
}

.developer-hero h3 {
  margin: 0 0 6px;
  font-size: clamp(1.5rem, 2vw, 2.1rem);
}

.developer-hero p {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.developer-hero-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.developer-status-grid,
.developer-doc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.developer-status-card,
.developer-component-group,
.openapi-path-list article,
.database-design-list div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, white);
}

.developer-status-card {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.developer-status-card span,
.developer-status-card small,
.developer-component-card small,
.openapi-path-list small,
.database-design-list small {
  color: var(--muted);
}

.developer-status-card strong {
  font-size: clamp(1.4rem, 2vw, 2.2rem);
}

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

.developer-component-group {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.developer-component-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.developer-component-card strong,
.developer-component-card small,
.openapi-path-list strong,
.openapi-path-list small,
.database-design-list strong,
.database-design-list small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.health-badge,
.method-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: capitalize;
}

.health-badge.operational {
  background: color-mix(in srgb, var(--green) 14%, white);
  color: #047857;
}

.health-badge.needs-setup {
  background: color-mix(in srgb, var(--amber) 18%, white);
  color: #92400e;
}

.health-badge.degraded {
  background: color-mix(in srgb, #f97316 16%, white);
  color: #9a3412;
}

.health-badge.outage {
  background: color-mix(in srgb, var(--red) 14%, white);
  color: #b91c1c;
}

.openapi-path-list,
.database-design-list {
  display: grid;
  gap: 10px;
}

.openapi-path-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: start;
  padding: 12px;
}

.openapi-path-list small {
  grid-column: 2;
}

.method-pill {
  min-width: 58px;
  background: color-mix(in srgb, var(--blue) 12%, white);
  color: var(--blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

.doc-section {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.doc-section p,
.doc-section li {
  color: var(--muted);
  line-height: 1.5;
}

.doc-section ul,
.doc-section.compact-list {
  margin: 0;
  padding-left: 18px;
}

.database-design-list div {
  padding: 10px;
}

.infra-diagram {
  max-width: 100%;
  overflow-x: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, black);
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.5;
}

@media (max-width: 1180px) {
  .developer-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .developer-component-grid,
  .developer-doc-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .developer-hero,
  .developer-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .developer-status-grid {
    grid-template-columns: 1fr;
  }
}

.workflow-board {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.workflow-actions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 8px;
}

.workflow-card p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.settings-panel {
  grid-template-columns: minmax(230px, 0.28fr) minmax(0, 1fr);
  grid-template-areas:
    "heading heading"
    "tabs body";
  align-items: start;
  column-gap: 14px;
  scroll-margin-top: 18px;
}

.settings-panel > .panel-heading {
  grid-area: heading;
}

.settings-tabs {
  grid-area: tabs;
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  align-self: start;
  position: sticky;
  top: 12px;
  border-radius: 8px;
  background: transparent;
}

.settings-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.settings-tab.active {
  background: linear-gradient(135deg, #ef4444, #2563eb);
  color: #fff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

.settings-body {
  grid-area: body;
  display: grid;
  gap: 12px;
  min-width: 0;
  margin-top: 14px;
}

.settings-registry-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, white);
}

.settings-registry-list {
  display: grid;
  gap: 8px;
}

.settings-registry-list.compact {
  max-height: 430px;
  overflow: auto;
  padding-right: 2px;
}

.settings-registry-group {
  display: grid;
  gap: 8px;
}

.settings-registry-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.settings-registry-group > div {
  display: grid;
  gap: 8px;
  padding: 2px 0 6px;
}

.settings-registry-item {
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--ink);
  text-align: left;
}

.settings-registry-item strong,
.settings-registry-item small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.settings-registry-item span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.settings-registry-item small {
  display: inline-flex;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

.settings-registry-item.active {
  border-color: color-mix(in srgb, var(--blue) 44%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--red) 10%, transparent), color-mix(in srgb, var(--blue) 12%, transparent)),
    var(--panel);
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.12);
}

.settings-empty-state {
  min-height: 120px;
  padding: 18px;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  gap: 14px;
  align-items: start;
}

.settings-editor-layout,
.profile-settings-layout.settings-editor-layout,
.user-settings-layout.settings-editor-layout,
.source-settings-layout.settings-editor-layout {
  grid-template-columns: minmax(0, 1fr);
}

.settings-editor-panel {
  grid-column: 1 / -1;
  order: -1;
  overflow: visible;
}

.security-settings-layout .security-summary-card {
  order: -2;
}

.security-settings-layout .security-editor-panel {
  order: -1;
}

.settings-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 90%, white);
}

.profile-settings-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
}

.user-settings-layout {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
}

.user-settings-layout > .settings-card {
  min-width: 0;
}

.profile-preview {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-avatar {
  width: 76px;
  height: 76px;
  font-size: 1.15rem;
}

.profile-preview h3,
.profile-preview p {
  margin-bottom: 5px;
}

.profile-preview p,
.settings-note {
  color: var(--muted);
  line-height: 1.45;
}

.password-fields {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

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

.settings-card-heading > div {
  min-width: 0;
}

.settings-card-heading > .mini-button,
.settings-card-heading > .icon-button,
.settings-card-heading > .primary-button,
.settings-card-heading > .secondary-button {
  flex: 0 0 auto;
}

.settings-grid,
.security-grid {
  display: grid;
  gap: 10px;
}

.settings-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.settings-item {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(37, 99, 235, 0.08)),
    color-mix(in srgb, var(--panel) 88%, white);
}

.settings-item *,
.settings-card *,
.module-meta,
.module-meta * {
  min-width: 0;
}

.settings-item strong,
.settings-item p,
.settings-item small,
.settings-item code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.settings-item > strong {
  font-size: 1rem;
  line-height: 1.18;
}

.settings-item p,
.settings-item small {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.45;
}

.ai-control-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.ai-control-shell {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
}

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

.ai-control-metrics article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(20, 135, 85, 0.08)),
    color-mix(in srgb, var(--panel) 90%, white);
}

.ai-control-metrics .icon {
  width: 20px;
  height: 20px;
  color: var(--blue);
}

.ai-control-metrics span,
.ai-control-metrics small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.ai-control-metrics strong {
  overflow-wrap: anywhere;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.1;
}

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

.ai-toggle-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.ai-toggle-card span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ai-toggle-card small {
  color: var(--muted);
  line-height: 1.35;
}

.ai-toggle-card input[type="checkbox"] {
  width: 40px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--blue);
}

.ai-policy-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.guard-chip {
  background: color-mix(in srgb, var(--green) 14%, var(--surface));
  color: color-mix(in srgb, var(--green) 74%, var(--ink));
}

.faq-mini-list {
  display: grid;
  gap: 8px;
}

.faq-mini-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, white);
}

.faq-mini-row span,
.faq-mini-row p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.faq-mini-row small,
.faq-mini-row p {
  color: var(--muted);
  line-height: 1.4;
}

.ai-chat-policy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.ai-chat-policy select {
  width: auto;
  min-width: 220px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 8px;
}

.ai-model-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.ai-management-shell {
  display: grid;
  gap: 16px;
}

.ai-management-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 4px;
}

.ai-management-header > div:first-child {
  min-width: 0;
}

.ai-management-header h2,
.ai-management-header h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.1;
}

.ai-management-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 420px;
  gap: 8px;
}

.ai-studio-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  scrollbar-width: thin;
}

.ai-studio-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 max-content;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.ai-studio-tab .icon {
  width: 18px;
  height: 18px;
}

.ai-studio-tab:hover,
.ai-studio-tab.active {
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.ai-studio-tab.active {
  outline: 2px solid color-mix(in srgb, var(--blue) 28%, transparent);
}

.ai-studio-body {
  display: grid;
  gap: 14px;
}

.ai-studio-dashboard-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.segmented.mini {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.segmented.mini button {
  flex: 0 0 auto;
  min-width: 42px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 900;
}

.segmented.mini button.active {
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

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

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

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

.ai-studio-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-studio-two {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 14px;
  align-items: start;
}

.ai-studio-card,
.ai-studio-stat {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.ai-studio-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.ai-studio-stat {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 118px;
  padding: 16px;
  overflow: hidden;
}

.ai-studio-stat::after {
  display: none;
}

.ai-studio-stat.accent-blue::after {
  background: color-mix(in srgb, var(--blue) 18%, transparent);
}

.ai-studio-stat.accent-green::after {
  background: color-mix(in srgb, var(--green) 18%, transparent);
}

.ai-studio-stat.accent-amber::after,
.ai-studio-stat.accent-gold::after {
  background: color-mix(in srgb, var(--gold) 22%, transparent);
}

.ai-studio-stat.accent-purple::after {
  background: color-mix(in srgb, #8b5cf6 18%, transparent);
}

.ai-studio-stat-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}

.ai-studio-stat-icon .icon {
  width: 18px;
  height: 18px;
}

.ai-studio-stat span,
.ai-studio-card small,
.ai-studio-card p,
.ai-studio-stat small {
  color: var(--muted);
  line-height: 1.45;
}

.ai-studio-stat strong {
  position: relative;
  z-index: 1;
  overflow-wrap: anywhere;
  font-size: clamp(1.2rem, 1.6vw, 1.75rem);
  line-height: 1;
}

.ai-studio-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ai-studio-section-head h3 {
  margin: 0 0 4px;
}

.ai-studio-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.ai-studio-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.ai-studio-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.ai-studio-table th,
.ai-studio-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.ai-studio-table th {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.ai-studio-table td {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.35;
}

.ai-studio-table tr:last-child td {
  border-bottom: 0;
}

.ai-studio-inline-form {
  display: grid;
  gap: 12px;
}

.ai-studio-inline-form .wide-field {
  grid-column: 1 / -1;
}

.ai-studio-field {
  display: grid;
  gap: 6px;
}

.ai-studio-field span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.ai-studio-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.ai-file-dropzone {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 220px;
  border: 1px dashed color-mix(in srgb, var(--blue) 40%, var(--line));
  border-radius: 8px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  text-align: center;
}

.ai-file-dropzone .icon {
  width: 42px;
  height: 42px;
}

.ai-studio-empty {
  display: grid;
  place-items: center;
  min-height: 160px;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.chart-placeholder {
  min-height: 220px;
  align-content: start;
}

.chart-placeholder div {
  display: grid;
  place-items: center;
  min-height: 130px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  text-align: center;
}

.ai-chat-workbench {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 250px;
  gap: 12px;
  min-height: 520px;
}

.ai-chat-sidebar,
.ai-chat-canvas,
.ai-chat-mcp-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.ai-chat-sidebar,
.ai-chat-mcp-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.ai-chat-canvas {
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

.ai-chat-empty {
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

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

.mcp-tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  font-size: 0.78rem;
  font-weight: 900;
}

.mcp-tool-chip .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.status-pill.status-good {
  color: color-mix(in srgb, var(--green) 72%, var(--ink));
  background: color-mix(in srgb, var(--green) 16%, var(--surface));
}

.status-pill.status-muted {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.status-pill.status-blue {
  color: color-mix(in srgb, var(--blue) 78%, var(--ink));
  background: color-mix(in srgb, var(--blue) 13%, var(--surface));
}

.primary-button.compact,
.secondary-button.compact {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 0.86rem;
}

.icon-button.danger {
  color: var(--red);
}

.icon-button.danger:hover {
  border-color: color-mix(in srgb, var(--red) 34%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
}

.settings-item p {
  font-size: 0.86rem;
}

.settings-item small {
  font-size: 0.76rem;
}

.settings-table {
  display: grid;
  gap: 8px;
}

.activity-log-layout {
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr);
}

.activity-log-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.activity-log-table {
  display: grid;
  gap: 8px;
  max-height: 620px;
  overflow: auto;
  padding-right: 4px;
}

.activity-log-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(220px, 1.3fr) minmax(180px, 1fr) minmax(160px, 0.9fr);
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 89%, white);
}

.activity-log-row strong,
.activity-log-row small {
  display: block;
}

.activity-log-row strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.35;
}

.activity-log-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, auto);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, white);
}

.settings-row > * {
  min-width: 0;
}

.user-settings-row {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.55fr) minmax(0, 0.78fr) minmax(0, 1.12fr);
}

.user-action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.user-action-row .mini-button {
  flex: 1 1 120px;
  min-width: 0;
  max-width: 180px;
  white-space: nowrap;
}

.user-action-row .mini-button.mini-icon-button,
.settings-user-card .user-action-row .mini-button.mini-icon-button {
  flex: 0 0 40px;
  max-width: 40px;
}

.settings-user-card .user-action-row {
  min-width: 0;
}

.settings-user-card .user-action-row .chip {
  flex: 0 0 auto;
}

.settings-row small {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.approval-queue-row {
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(78px, auto)) minmax(96px, auto) minmax(260px, auto);
  align-items: center;
}

.approval-queue-row .user-action-row.compact {
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.approval-queue-row .mini-button {
  min-height: 32px;
}

.approval-business-action {
  min-width: 72px;
}

.pilot-uat-row {
  grid-template-columns: minmax(160px, 1.2fr) auto minmax(160px, 1fr) minmax(160px, 1fr) minmax(120px, .7fr) auto;
  align-items: start;
}

.pilot-uat-scenarios {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.pilot-uat-scenarios span {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pilot-uat-scenarios code {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.user-management-list {
  gap: 10px;
}

.pending-user-approval-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--gold) 8%, var(--panel));
}

.pending-user-approval-list {
  display: grid;
  gap: 8px;
}

.pending-user-approval-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr) minmax(92px, auto);
  gap: 10px;
  align-items: end;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, white);
}

.pending-user-approval-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.pending-user-approval-row label span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.pending-user-card {
  border-color: color-mix(in srgb, var(--gold) 34%, var(--line));
  background: color-mix(in srgb, var(--gold) 5%, var(--panel));
}

.settings-user-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "identity"
    "meta"
    "access"
    "actions";
  gap: 12px;
  align-items: start;
  min-width: 0;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 90%, white);
}

.settings-user-main {
  grid-area: identity;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.settings-user-identity {
  min-width: 0;
}

.settings-user-identity strong,
.settings-user-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-user-identity small,
.settings-user-meta small {
  color: var(--muted);
}

.settings-user-meta {
  grid-area: meta;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  min-width: 0;
}

.settings-user-meta span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settings-user-meta strong {
  overflow: visible;
  font-size: 0.84rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.settings-user-meta small {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.settings-user-card .user-action-row {
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 40px));
  align-content: start;
  justify-content: flex-end;
  min-width: 0;
}

.settings-user-card .user-action-row .mini-icon-button {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.settings-user-card .rbac-access-details {
  grid-area: access;
  margin-top: 2px;
}

.rbac-access-details summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.rbac-access-details summary .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

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

.user-access-metrics span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.user-access-metrics small,
.user-access-reason {
  color: var(--muted);
  line-height: 1.4;
}

.user-access-metrics small,
.user-access-metrics strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-access-metrics small {
  font-size: 0.7rem;
  font-weight: 800;
}

.user-access-metrics strong {
  color: var(--ink);
  font-size: 0.92rem;
  white-space: nowrap;
}

.user-access-reason {
  display: block;
  overflow-wrap: anywhere;
}

.user-status-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.user-status-icon .icon {
  width: 18px;
  height: 18px;
}

.user-status-icon.success {
  color: color-mix(in srgb, var(--green) 74%, var(--ink));
  border-color: color-mix(in srgb, var(--green) 28%, var(--line));
  background: color-mix(in srgb, var(--green) 12%, var(--panel));
}

.user-status-icon.warning {
  color: color-mix(in srgb, var(--gold) 78%, var(--ink));
  border-color: color-mix(in srgb, var(--gold) 34%, var(--line));
  background: color-mix(in srgb, var(--gold) 12%, var(--panel));
}

.user-status-icon.danger {
  color: color-mix(in srgb, var(--red) 82%, var(--ink));
  border-color: color-mix(in srgb, var(--red) 32%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, var(--panel));
}

.user-editor-card {
  align-content: start;
  position: static;
  overflow: visible;
}

.user-editor-card .settings-card-heading {
  align-items: flex-start;
}

.user-editor-form {
  gap: 12px;
}

.user-editor-form label {
  display: grid;
  gap: 6px;
}

.user-editor-form label > span,
.settings-form-grid label > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.user-save-button {
  justify-content: center;
  min-height: 46px;
  margin-top: 2px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--red) 92%, var(--blue)), var(--blue));
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.18);
}

.settings-form {
  display: grid;
  gap: 12px;
}

.settings-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.settings-form label > span,
.settings-form-grid label > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.settings-form label > small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1.35;
}

.settings-form input,
.settings-form select,
.settings-form textarea {
  width: 100%;
  min-width: 0;
}

.settings-form input.field-invalid,
.settings-form select.field-invalid,
.settings-form textarea.field-invalid {
  border-color: color-mix(in srgb, var(--red) 58%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 13%, transparent);
}

.settings-form-grid {
  display: grid;
  gap: 10px;
}

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

.settings-form-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.privacy-grant-form {
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.privacy-grant-form .wide {
  grid-column: 1 / -1;
}

.privacy-grant-row {
  gap: 10px;
}

.settings-editor-form {
  gap: 14px;
}

.settings-editor-heading {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.settings-form-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 64%, transparent);
}

.settings-form textarea {
  min-height: 112px;
  resize: vertical;
}

.settings-form textarea.large-textarea {
  min-height: 170px;
}

.settings-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.settings-form-actions .primary-button,
.settings-form-actions .secondary-button {
  min-width: min(100%, 240px);
  justify-content: center;
}

.settings-result {
  position: sticky;
  top: 10px;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 13%, var(--panel));
  color: var(--ink);
}

.settings-result.danger,
.settings-form-error {
  border: 1px solid color-mix(in srgb, var(--red) 34%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, var(--panel));
  color: color-mix(in srgb, var(--red) 82%, var(--ink));
}

.settings-result.warning {
  border: 1px solid color-mix(in srgb, var(--amber) 38%, var(--line));
  background: color-mix(in srgb, var(--amber) 12%, var(--panel));
}

.settings-result-heading {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.settings-result.danger .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.settings-form-error {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.45;
}

.credential-result {
  display: grid;
  flex: 1 1 100%;
  gap: 8px;
  min-width: 0;
  margin-top: 4px;
}

.credential-result > span {
  display: grid;
  gap: 2px;
}

.credential-result small {
  color: var(--muted);
  line-height: 1.45;
}

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

.credential-copy-row input {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.credential-email-status {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 78%, white);
}

.source-settings-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(440px, 0.92fr);
  align-items: start;
}

.source-registry-panel .settings-card-heading p,
.source-builder-panel .settings-card-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.source-registry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 10px;
}

.source-registry-card {
  position: relative;
  overflow: hidden;
  min-height: 206px;
  align-content: start;
}

.source-registry-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--line);
  content: "";
}

.source-registry-card.ready::before {
  background: var(--green);
}

.source-registry-card.warning::before {
  background: var(--gold);
}

.source-registry-card.danger::before {
  background: var(--red);
}

.source-card-top,
.source-card-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.source-card-top strong {
  display: block;
  line-height: 1.2;
}

.source-status-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border-radius: 999px;
  background: var(--muted);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 12%, transparent);
}

.source-status-dot.ready {
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent);
}

.source-status-dot.warning {
  background: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent);
}

.source-status-dot.danger {
  background: var(--red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 12%, transparent);
}

.source-registry-card.ready .source-status-dot {
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent);
}

.source-registry-card.warning .source-status-dot {
  background: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent);
}

.source-registry-card.danger .source-status-dot {
  background: var(--red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 12%, transparent);
}

.source-card-foot {
  align-items: center;
  margin-top: auto;
  padding-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.source-card-foot .mini-icon-button {
  flex: 0 0 40px;
}

.source-clarity-card {
  align-content: start;
}

.source-governance-chips {
  gap: 5px;
}

.source-card-details,
.rbac-access-details {
  display: grid;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.source-card-details summary,
.rbac-access-details summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
}

.rbac-access-details.compact {
  margin-top: 8px;
  padding: 6px 0;
}

.source-health-breakdowns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.source-health-breakdowns article {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.source-health-breakdowns article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.source-health-breakdowns span {
  display: grid;
  gap: 2px;
  min-width: 92px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.source-health-breakdowns small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.source-health-row {
  grid-template-columns: minmax(220px, 1.3fr) minmax(110px, 0.7fr) minmax(120px, 0.7fr) minmax(120px, 0.8fr) minmax(150px, 1fr);
}

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

.source-preset-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 58px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, white);
  color: var(--ink);
  text-align: left;
}

.source-preset-card .icon {
  width: 22px;
  height: 22px;
  margin: auto;
  color: var(--blue);
}

.source-preset-card span,
.source-preset-card strong,
.source-preset-card small {
  display: block;
  min-width: 0;
}

.source-preset-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
}

.source-preset-card small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.7rem;
}

.source-preset-card.active {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 12%, var(--panel)), color-mix(in srgb, var(--green) 8%, var(--panel)));
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
}

.source-setup-brief {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, transparent), color-mix(in srgb, var(--green) 7%, transparent)),
    color-mix(in srgb, var(--surface) 70%, transparent);
}

.source-setup-brief h3,
.source-setup-brief p,
.source-setup-brief small {
  margin: 0;
}

.source-setup-brief h3 {
  margin-top: 8px;
}

.source-setup-brief p,
.source-setup-brief small {
  color: var(--muted);
  line-height: 1.45;
}

.source-builder-form {
  gap: 12px;
}

.source-form-section,
.source-advanced-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 64%, transparent);
}

.compact-heading {
  gap: 8px;
}

.source-advanced-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.source-advanced-panel[open] summary {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.source-form-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
}

.source-test-result {
  display: grid;
  align-items: start;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  background: color-mix(in srgb, var(--blue) 8%, var(--panel));
}

.source-test-result.success {
  border-color: color-mix(in srgb, var(--green) 35%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, var(--panel));
}

.source-test-result.warning {
  border-color: color-mix(in srgb, var(--gold) 42%, var(--line));
  background: color-mix(in srgb, var(--gold) 11%, var(--panel));
}

.source-test-result.danger {
  border-color: color-mix(in srgb, var(--red) 36%, var(--line));
  background: color-mix(in srgb, var(--red) 9%, var(--panel));
}

.source-test-result ul {
  display: grid;
  gap: 5px;
  margin: 4px 0 0;
  padding-left: 18px;
}

.source-test-result li {
  color: var(--muted);
  line-height: 1.35;
}

.integration-settings-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.integration-group-stack {
  display: grid;
  gap: 16px;
}

.integration-settings-group {
  display: grid;
  gap: 10px;
}

.integration-group-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 7%, transparent), transparent 68%),
    color-mix(in srgb, var(--panel) 92%, white);
}

.integration-group-heading strong {
  display: block;
  font-size: 0.9rem;
}

.integration-group-heading small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  line-height: 1.35;
}

.integration-settings-card {
  align-content: start;
  min-height: 190px;
}

.integration-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.integration-card-head strong {
  display: block;
  font-size: 1rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.integration-env-list {
  display: grid;
  gap: 6px;
  margin-top: 2px;
}

.integration-env-list > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.integration-env-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.integration-env-list code {
  display: inline-flex;
  max-width: 100%;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 78%, white);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.credential-result {
  display: grid;
  flex: 1 1 100%;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--green) 25%, var(--line));
}

.credential-result small {
  display: block;
  color: var(--muted);
}

.credential-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.credential-copy-row input {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 800;
}

.inline-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.inline-check.compact {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 0.78rem;
}

.rbac-matrix-form {
  display: grid;
  gap: 12px;
}

.rbac-matrix-scroll {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 90%, white);
}

.rbac-matrix-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: separate;
  border-spacing: 0;
}

.rbac-matrix-table th,
.rbac-matrix-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}

.rbac-matrix-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--surface) 92%, white);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.rbac-matrix-table th:first-child,
.rbac-matrix-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 230px;
  max-width: 280px;
  text-align: left;
  background: color-mix(in srgb, var(--panel) 96%, white);
}

.rbac-matrix-table th:nth-child(2),
.rbac-matrix-table td:nth-child(2) {
  min-width: 130px;
  text-align: left;
}

.rbac-matrix-table td strong,
.rbac-matrix-table td small {
  display: block;
}

.rbac-matrix-table td small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.rbac-matrix-table tr.locked {
  background: color-mix(in srgb, var(--gold) 7%, transparent);
}

.matrix-check {
  display: inline-flex;
  justify-content: center;
  cursor: pointer;
}

.matrix-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.matrix-check span {
  display: block;
  width: 34px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 18%, var(--surface));
  transition: background 160ms ease, border-color 160ms ease;
}

.matrix-check span::after {
  display: block;
  width: 14px;
  height: 14px;
  margin: 2px;
  border-radius: 999px;
  background: var(--panel);
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.2);
  transition: transform 160ms ease;
  content: "";
}

.matrix-check input:checked + span {
  border-color: color-mix(in srgb, var(--green) 50%, var(--line));
  background: linear-gradient(135deg, var(--green), var(--blue));
}

.matrix-check input:checked + span::after {
  transform: translateX(14px);
}

.matrix-check input:disabled + span {
  cursor: not-allowed;
  opacity: 0.52;
}

.matrix-permission-label {
  display: none;
}

.lock-chip {
  margin-top: 7px;
}

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

@media (max-width: 760px) {
  .settings-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "tabs"
      "body";
  }

  .settings-tabs {
    position: static;
  }

  .settings-registry-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  }

  .rbac-permission-picker {
    grid-template-columns: 1fr;
  }

  .source-health-breakdowns,
  .source-health-row {
    grid-template-columns: 1fr;
  }

  .activity-log-layout,
  .ai-control-layout,
  .source-settings-layout,
  .settings-form-grid.two,
  .settings-form-grid.three,
  .source-form-actions {
    grid-template-columns: 1fr;
  }

  .source-preset-grid {
    grid-template-columns: 1fr;
  }
}

.env-settings-form {
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1.1fr) minmax(150px, 0.55fr) auto;
  align-items: center;
}

.env-row {
  grid-template-columns: minmax(180px, 1.2fr) auto minmax(120px, 0.6fr) minmax(160px, 0.8fr);
}

.settings-help-text {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}

.security-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.security-grid article {
  display: grid;
  gap: 6px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 7%, var(--panel));
}

.security-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.security-grid strong {
  overflow-wrap: anywhere;
}

.tool-page-shell {
  display: grid;
  gap: 18px;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.tool-page-loading {
  display: grid;
  min-height: 100vh;
  place-content: center;
  gap: 12px;
  text-align: center;
}

.tool-page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-left: 7px solid var(--accent);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%),
    var(--panel-bg);
  box-shadow: var(--shadow);
}

.tool-hero-copy {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.tool-page-hero h1 {
  max-width: 860px;
  margin-bottom: 10px;
  font-size: 3rem;
  line-height: 1;
}

.tool-page-hero p {
  max-width: 860px;
  color: var(--muted);
  line-height: 1.5;
}

.tool-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.tool-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.tool-meta-pill small,
.tool-meta-pill strong {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-meta-pill small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.tool-meta-pill strong {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
}

.tool-meta-pill.status {
  border-color: color-mix(in srgb, var(--green) 24%, var(--line));
  background: color-mix(in srgb, var(--green) 8%, var(--panel));
}

.tool-meta-pill.role {
  background: color-mix(in srgb, var(--blue) 7%, var(--panel));
}

.tool-meta-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 14%, transparent);
}

.tool-page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tool-header-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.tool-header-icon-button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
}

.tool-header-icon-button.danger:hover {
  border-color: color-mix(in srgb, var(--red) 42%, var(--line));
  background: color-mix(in srgb, var(--red) 9%, var(--panel));
  color: var(--red);
}

.tool-header-icon-button .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.tool-page-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.tool-page-main {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  gap: 18px;
  align-items: start;
}

.tool-page-main.ads-tool-main,
.tool-page-main.seller-tool-main,
.tool-page-main.mkt-tool-main {
  grid-template-columns: minmax(0, 1fr);
}

.tool-page-primary,
.tool-page-side {
  display: grid;
  gap: 18px;
}

.integration-setup-disclosure {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(16, 185, 129, 0.05)),
    color-mix(in srgb, var(--panel) 92%, white);
}

.integration-setup-disclosure summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
}

.integration-setup-disclosure summary::-webkit-details-marker {
  display: none;
}

.integration-setup-disclosure summary::before {
  content: "▸";
  color: var(--blue);
  font-weight: 900;
  transition: transform 160ms ease;
}

.integration-setup-disclosure[open] summary::before {
  transform: rotate(90deg);
}

.integration-setup-disclosure summary > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
  margin-right: auto;
}

.integration-setup-disclosure summary strong {
  color: var(--ink);
  font-size: 0.94rem;
}

.integration-setup-disclosure summary small {
  color: var(--muted);
  line-height: 1.3;
}

.integration-setup-body {
  display: grid;
  gap: 14px;
  padding: 0 14px 14px;
}

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

.tool-page-form label {
  display: grid;
  gap: 6px;
}

.tool-page-form label:has(textarea),
.tool-page-form label.file-input,
.tool-page-form .setup-wide-field,
.tool-page-form .primary-button,
.tool-page-form .secondary-button {
  grid-column: 1 / -1;
}

.tool-page-form label span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.mkt-tool-pack {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.mkt-tool-overview,
.mkt-tool-card {
  overflow: hidden;
}

.mkt-tool-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 0;
}

.mkt-tool-tabs .tool-tab {
  flex: 1 1 150px;
  min-width: 128px;
}

.mkt-guardrail-grid,
.mkt-readiness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.mkt-guardrail-grid article,
.mkt-readiness-grid article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--green) 8%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel) 93%, white);
}

.mkt-guardrail-grid span,
.mkt-readiness-grid span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mkt-guardrail-grid strong,
.mkt-readiness-grid strong {
  overflow-wrap: anywhere;
}

.mkt-state-row,
.mkt-doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.source-needed-chip {
  border-color: color-mix(in srgb, var(--gold) 34%, var(--line));
  background: color-mix(in srgb, var(--gold) 12%, var(--panel));
  color: color-mix(in srgb, var(--gold) 78%, var(--ink));
}

.metric-unavailable {
  display: inline-flex;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-weight: 900;
}

.mkt-attribution-foundation .reporting-table {
  min-width: min(760px, 100%);
}

.mkt-report-pack-alert {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--gold) 10%, var(--panel));
}

.mkt-report-pack-alert strong,
.mkt-report-pack-alert span {
  overflow-wrap: anywhere;
}

.mkt-report-pack-alert span {
  color: var(--muted);
  line-height: 1.45;
}

.mkt-report-pack-card.warning {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel) 93%, white);
}

.mkt-report-pack-card.info {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel) 93%, white);
}

.mkt-report-pack-card.success {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--green) 9%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel) 93%, white);
}

.mkt-metric-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mkt-metric-cell strong,
.mkt-metric-cell small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mkt-truncate {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mkt-campaign-desktop .business-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mkt-campaign-desktop .reporting-table {
  min-width: 1220px;
}

.mkt-campaign-cards {
  display: none;
}

.mkt-campaign-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.mkt-campaign-card strong,
.mkt-campaign-card small {
  overflow-wrap: anywhere;
}

.mkt-campaign-card > div:first-child small,
.mkt-campaign-card > small {
  color: var(--muted);
}

.mkt-campaign-stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.mkt-campaign-stage-grid > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.mkt-export-summary,
.mkt-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.mkt-export-summary span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.mkt-export-summary small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mkt-export-summary strong {
  overflow-wrap: anywhere;
}

.mkt-link-grid {
  margin-top: 12px;
  margin-bottom: 0;
}

.mkt-link-grid .mini-button {
  justify-content: flex-start;
  min-width: 0;
}

.mkt-supervisor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
}

.mkt-supervisor-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gold) 9%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 78%, transparent);
}

.mkt-supervisor-card strong,
.mkt-supervisor-card small,
.mkt-supervisor-card dd {
  overflow-wrap: anywhere;
}

.mkt-supervisor-card small {
  color: var(--muted);
  line-height: 1.45;
}

.mkt-supervisor-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.mkt-supervisor-card dl > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mkt-supervisor-card dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mkt-supervisor-card dd {
  margin: 0;
  color: var(--ink);
}

.mkt-evidence-form,
.mkt-evidence-section,
.mkt-evidence-output-grid {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.mkt-evidence-section {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.mkt-evidence-ref-grid,
.mkt-evidence-state-grid,
.mkt-evidence-item-grid,
.mkt-evidence-journey-grid,
.mkt-owner-review-strip,
.mkt-package-list,
.mkt-signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 9px;
  min-width: 0;
}

.mkt-evidence-ref-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.mkt-evidence-ref-grid span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.mkt-evidence-state-grid article,
.mkt-evidence-item-grid article,
.mkt-evidence-journey-grid article,
.mkt-owner-review-strip article,
.mkt-package-list article {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.mkt-evidence-state-grid article.open {
  border-color: color-mix(in srgb, var(--gold) 34%, var(--line));
  background: color-mix(in srgb, var(--gold) 8%, var(--panel));
}

.mkt-evidence-state-grid article.closed {
  border-color: color-mix(in srgb, var(--green) 26%, var(--line));
}

.mkt-package-list article.active {
  border-color: color-mix(in srgb, var(--blue) 36%, var(--line));
  background: color-mix(in srgb, var(--blue) 8%, var(--panel));
}

.mkt-evidence-state-grid article > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.mkt-evidence-state-grid strong,
.mkt-evidence-state-grid small,
.mkt-evidence-state-grid p,
.mkt-evidence-state-grid dd,
.mkt-evidence-item-grid strong,
.mkt-evidence-item-grid small,
.mkt-evidence-journey-grid strong,
.mkt-evidence-journey-grid small,
.mkt-owner-review-strip strong,
.mkt-owner-review-strip small,
.mkt-package-list strong,
.mkt-package-list small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mkt-evidence-state-grid p,
.mkt-evidence-state-grid small,
.mkt-evidence-item-grid small,
.mkt-evidence-journey-grid small,
.mkt-owner-review-strip small {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.mkt-package-list small {
  color: var(--muted);
}

.mkt-evidence-details {
  min-width: 0;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
}

.mkt-evidence-details summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.mkt-evidence-detail-grid {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin-top: 12px;
}

.mkt-history-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mkt-history-list li {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(120px, auto);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.mkt-history-list strong,
.mkt-history-list small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mkt-evidence-state-grid dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.mkt-evidence-state-grid dl > div {
  display: grid;
  gap: 2px;
}

.mkt-evidence-state-grid dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mkt-evidence-state-grid dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.8rem;
}

.mkt-evidence-journey-form {
  display: grid;
  gap: 9px;
}

.mkt-evidence-journey-form .mkt-journey-row {
  grid-template-columns: minmax(130px, 0.8fr) minmax(150px, 0.55fr) minmax(180px, 1fr) minmax(180px, 1fr);
}

.mkt-evidence-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.mkt-evidence-actions .primary-button,
.mkt-evidence-actions .secondary-button {
  min-width: min(100%, 220px);
}

.success-chip {
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, var(--panel));
  color: color-mix(in srgb, var(--green) 78%, var(--ink));
}

.mkt-form .wide,
.mkt-checklist-form .wide,
.mkt-journey-form .wide {
  grid-column: 1 / -1;
}

.mkt-checklist-form,
.mkt-journey-form {
  display: grid;
  gap: 12px;
}

.mkt-checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 9px;
}

.mkt-checklist-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.mkt-check-row,
.mkt-checkbox {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.mkt-check-row input,
.mkt-checkbox input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.mkt-check-row span,
.mkt-checkbox span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.mkt-check-row strong,
.mkt-check-row small,
.mkt-checkbox span {
  overflow-wrap: anywhere;
}

.mkt-check-row small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.mkt-journey-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(160px, 0.65fr) minmax(200px, 1.2fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.mkt-journey-row strong {
  overflow-wrap: anywhere;
}

.mkt-result-card {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel) 94%, white);
}

.mkt-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.mkt-result-head > div:first-child {
  min-width: 0;
}

.mkt-result-head h3,
.mkt-result-head small {
  overflow-wrap: anywhere;
}

.mkt-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.mkt-output-field {
  display: grid;
  gap: 6px;
}

.mkt-output-field span,
.mkt-mini-section strong {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mkt-output-field textarea {
  min-height: 72px;
  resize: vertical;
}

.mkt-mini-section {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.mkt-mini-section ul,
.mkt-issue-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mkt-mini-section li,
.mkt-issue-list li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mkt-issue-list li {
  display: grid;
  grid-template-columns: minmax(130px, 0.55fr) minmax(100px, 0.45fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: var(--panel);
}

.mkt-issue-list li.error {
  border-left-color: var(--red);
}

.mkt-issue-list li small {
  color: var(--muted);
  line-height: 1.35;
}

.mkt-empty-note,
.mkt-copy-status {
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  overflow-wrap: anywhere;
}

.mkt-loading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mkt-source-table td strong,
.mkt-source-table td small {
  display: block;
  overflow-wrap: anywhere;
}

.mkt-source-table td small {
  color: var(--muted);
  margin-top: 3px;
}

@media (max-width: 760px) {
  .mkt-tool-tabs {
    flex-wrap: nowrap;
  }

  .mkt-tool-tabs .tool-tab {
    flex: 0 0 148px;
  }

  .mkt-result-head,
  .mkt-journey-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .mkt-evidence-journey-form .mkt-journey-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .mkt-history-list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .mkt-result-head {
    display: grid;
  }

  .mkt-result-actions {
    justify-content: stretch;
  }

  .mkt-result-actions .secondary-button {
    width: 100%;
  }

  .mkt-issue-list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .mkt-attribution-foundation .business-table-scroll {
    overflow-x: visible;
  }

  .mkt-campaign-desktop {
    display: none;
  }

  .mkt-campaign-cards {
    display: grid;
    gap: 10px;
  }

  .mkt-campaign-stage-grid,
  .mkt-export-summary,
  .mkt-link-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mkt-truncate {
    max-width: 100%;
    white-space: normal;
  }
}

.setup-onboarding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.setup-onboarding-grid article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 6%, var(--panel));
}

.setup-onboarding-grid .setup-check-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--panel);
  font-weight: 950;
}

.setup-onboarding-grid .setup-check-card.done {
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--green) 10%, transparent), transparent 58%),
    color-mix(in srgb, var(--panel) 94%, white);
}

.setup-onboarding-grid .setup-check-card.done .setup-check-icon {
  background: var(--green);
  color: #fff;
}

.setup-onboarding-grid .setup-check-card.pending {
  border-color: color-mix(in srgb, var(--gold) 35%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent 58%),
    color-mix(in srgb, var(--panel) 94%, white);
}

.setup-onboarding-grid .setup-check-card.pending .setup-check-icon {
  background: color-mix(in srgb, var(--gold) 86%, #3d2a13);
  color: #fff;
}

.setup-check-card strong,
.setup-check-card p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.setup-check-card .mini-button {
  grid-column: 1 / -1;
  min-height: 34px;
  justify-content: center;
}

.setup-onboarding-grid p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.setup-progress-summary {
  display: grid;
  gap: 7px;
  margin: -2px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.setup-progress-summary strong {
  color: var(--ink);
  font-size: 0.78rem;
}

.linked-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.linked-tools-grid label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 56px;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}

.linked-tools-grid label input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.linked-tools-grid label span {
  min-width: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.18;
  overflow-wrap: anywhere;
  white-space: normal;
}

.provider-account-panel,
.workflow-builder {
  display: grid;
  gap: 10px;
}

.provider-account-list,
.workflow-builder-list {
  display: grid;
  gap: 8px;
}

.provider-account-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.85fr) minmax(160px, 1fr) minmax(180px, 1.1fr) minmax(150px, 0.9fr) auto;
  gap: 8px;
  align-items: center;
}

.tool-page-side .provider-account-row {
  grid-template-columns: 1fr;
}

.tool-page-side .provider-account-row .mini-button {
  justify-content: center;
}

.workflow-builder-row {
  display: grid;
  grid-template-columns: auto 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, white);
}

.workflow-builder-row.is-dragging {
  opacity: 0.5;
}

.workflow-builder-row > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, var(--panel));
  color: var(--blue);
  font-weight: 950;
}

.drag-handle {
  min-width: 34px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: grab;
  font-weight: 950;
}

.workflow-builder-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.workflow-builder small {
  display: block;
  margin-inline: 12px;
  padding-bottom: 2px;
  color: var(--muted);
  line-height: 1.45;
}

.tool-output-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(37, 99, 235, 0.08)),
    color-mix(in srgb, var(--panel) 90%, white);
}

.tool-output-card ul,
.tool-output-card ol,
.tool-split ol {
  margin: 8px 0 0;
  padding-left: 18px;
}

.tool-output-card li,
.tool-split li {
  color: var(--muted);
  line-height: 1.5;
}

.tool-output-card pre {
  overflow: auto;
  max-height: 360px;
  padding: 12px;
  border-radius: 8px;
  background: #111827;
  color: #f8fafc;
  font-size: 0.78rem;
  line-height: 1.45;
}

.tool-output-card summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 800;
}

.prospect-output-card {
  gap: 18px;
}

.prospect-source-strip,
.prospect-guidance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.prospect-source-strip article,
.prospect-guidance-grid article,
.prospect-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, white);
}

.prospect-source-strip article {
  padding: 12px;
}

.prospect-source-strip strong,
.prospect-source-strip span,
.prospect-source-strip small {
  display: block;
}

.prospect-source-strip span {
  margin-top: 5px;
  color: var(--ink);
  font-weight: 850;
}

.prospect-source-strip small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

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

.prospect-card {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
}

.prospect-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--gold);
}

.prospect-card.verified::before {
  background: var(--green);
}

.prospect-card.ai-only::before {
  background: linear-gradient(180deg, var(--blue), var(--purple));
}

.prospect-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.prospect-card-head strong,
.prospect-card-head small {
  display: block;
}

.prospect-card-head small,
.prospect-card p,
.prospect-card li,
.prospect-card > small {
  color: var(--muted);
  line-height: 1.45;
}

.prospect-card p {
  margin: 0;
}

.prospect-card ul {
  margin: 0;
  padding-left: 18px;
}

.score-badge {
  display: inline-grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 14%, var(--surface));
  color: var(--green);
  font-weight: 950;
}

.prospect-card .mini-button {
  justify-self: start;
}

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

.prospect-guidance-grid article {
  padding: 14px;
}

body[data-theme="dark"] .prospect-source-strip article,
body[data-theme="dark"] .prospect-guidance-grid article,
body[data-theme="dark"] .prospect-card {
  background: color-mix(in srgb, var(--panel) 88%, black);
}

.fraud-report-panel {
  display: grid;
  gap: 14px;
}

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

.fraud-kpi-grid article {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(245, 158, 11, 0.08)),
    color-mix(in srgb, var(--panel) 94%, white);
}

.fraud-kpi-grid span,
.fraud-kpi-grid small {
  display: block;
  color: var(--muted);
  font-weight: 900;
}

.fraud-kpi-grid strong {
  display: block;
  margin: 6px 0 4px;
  color: var(--ink);
  font-size: clamp(1rem, 1.45vw, 1.45rem);
  line-height: 1.08;
  white-space: nowrap;
}

.fraud-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
  gap: 12px;
  align-items: start;
}

.fraud-report-grid .business-table td:last-child {
  min-width: 280px;
  white-space: normal;
}

.fraud-scheduler-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 92%, white);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.fraud-scheduler-warning.critical {
  border-left-color: #dc2626;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), color-mix(in srgb, var(--panel) 94%, white));
}

.fraud-scheduler-warning.high {
  border-left-color: #ea580c;
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.08), color-mix(in srgb, var(--panel) 94%, white));
}

.fraud-scheduler-warning.medium {
  border-left-color: #d97706;
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.08), color-mix(in srgb, var(--panel) 94%, white));
}

.fraud-scheduler-warning h3,
.fraud-scheduler-warning p {
  margin: 0;
}

.fraud-scheduler-warning p:not(.eyebrow) {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.4;
}

.risk-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.risk-badge.critical {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

.risk-badge.high {
  background: rgba(234, 88, 12, 0.13);
  color: #c2410c;
}

.risk-badge.medium {
  background: rgba(217, 119, 6, 0.14);
  color: #a16207;
}

.risk-badge.low {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.fraud-ai-panel {
  position: sticky;
  top: 12px;
}

.fraud-ai-panel ul {
  margin: 0;
  padding-left: 18px;
}

.fraud-ai-panel li,
.fraud-finding-list p,
.fraud-finding-list small {
  color: var(--muted);
  line-height: 1.45;
}

.fraud-drilldown {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 12px;
}

.fraud-drilldown summary {
  cursor: pointer;
  font-weight: 900;
}

.fraud-finding-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.fraud-finding-list article {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, white);
}

.fraud-rule-editor {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.fraud-rule-editor > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-weight: 900;
}

.fraud-rule-editor > summary small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 800;
}

.fraud-rule-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 14px;
  margin-top: 14px;
}

.fraud-rule-list {
  display: grid;
  gap: 10px;
}

.fraud-rule-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, white);
}

.fraud-rule-card.disabled {
  opacity: 0.58;
}

.fraud-rule-card strong,
.fraud-rule-card p,
.fraud-rule-card small {
  display: block;
  min-width: 0;
}

.fraud-rule-card p {
  margin: 8px 0 4px;
  color: var(--ink);
  font-weight: 850;
  line-height: 1.35;
}

.fraud-rule-card small {
  color: var(--muted);
  line-height: 1.4;
}

.fraud-rule-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mini-button.danger {
  border-color: rgba(239, 68, 68, 0.28);
  color: #b91c1c;
}

.fraud-rule-form {
  align-content: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, white);
}

.sop-preview-panel {
  display: grid;
  gap: 16px;
}

.sop-preview-hero,
.sop-support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 12px;
}

.sop-document-cover,
.sop-illustration-panel,
.sop-process-card,
.sop-diagram-card,
.sop-section-card,
.sop-visual-brief,
.sop-checklist-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, white);
}

.sop-document-cover {
  display: grid;
  align-content: space-between;
  gap: 14px;
  background:
    radial-gradient(circle at 95% 15%, rgba(37, 99, 235, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 250, 0.78));
}

.sop-document-cover h3 {
  max-width: 820px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  line-height: 1.25;
}

.sop-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sop-stat-row span {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-weight: 800;
}

.sop-stat-row strong {
  display: block;
  color: var(--ink);
  font-size: 1.25rem;
}

.sop-illustration-panel {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.14), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 243, 255, 0.92));
}

.sop-illustration-panel::before,
.sop-illustration-panel::after {
  content: "";
  position: absolute;
  inset: 48px 64px;
  border: 1px dashed color-mix(in srgb, var(--line) 72%, var(--accent));
  border-radius: 999px;
}

.sop-illustration-panel::after {
  inset: 76px 104px;
}

.sop-orbit {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 76px;
  min-height: 76px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.12);
  color: var(--ink);
  font-weight: 900;
}

.sop-orbit.center {
  top: 50%;
  left: 50%;
  color: white;
  background: linear-gradient(135deg, #ef4444, #2563eb);
  transform: translate(-50%, -50%);
}

.sop-orbit.node {
  min-width: 68px;
  min-height: 68px;
  color: var(--muted);
  font-size: 0.82rem;
}

.sop-orbit.intake {
  top: 20px;
  left: 34px;
}

.sop-orbit.flow {
  top: 26px;
  right: 44px;
}

.sop-orbit.control {
  bottom: 24px;
  left: 52px;
}

.sop-orbit.publish {
  right: 34px;
  bottom: 26px;
}

.sop-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.75fr);
  gap: 12px;
}

.sop-preview-main,
.sop-preview-side {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sop-preview-main article,
.sop-preview-side,
.sop-refine-box {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, white);
}

.sop-process-card,
.sop-diagram-card,
.sop-section-card {
  display: grid;
  gap: 12px;
}

.compact-heading {
  gap: 8px;
  margin: 0;
}

.compact-heading h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
}

.sop-stage-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
}

.sop-stage-node,
.sop-flow-node {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.sop-stage-node span,
.sop-flow-node span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, #ef4444, #2563eb);
  font-weight: 900;
}

.sop-stage-node strong,
.sop-flow-node strong {
  display: block;
  color: var(--ink);
  line-height: 1.2;
}

.sop-stage-node small,
.sop-flow-node small,
.sop-stage-node p {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.35;
}

.sop-stage-node p {
  margin-bottom: 0;
  font-size: 0.88rem;
}

.sop-visual-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.sop-section-list,
.sop-visual-card-grid {
  display: grid;
  gap: 10px;
}

.sop-section-list div,
.sop-visual-card-grid div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.sop-section-list strong,
.sop-visual-card-grid strong {
  color: var(--ink);
}

.sop-section-list p,
.sop-visual-card-grid p,
.sop-visual-card-grid small {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.sop-mermaid-source {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 10px;
}

.sop-mermaid-source summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 900;
}

.sop-preview-main p,
.sop-preview-side p,
.sop-preview-side small,
.sop-preview-side li,
.sop-refine-box {
  color: var(--muted);
  line-height: 1.5;
}

.sop-preview-side ol,
.sop-preview-side ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.sop-preview-side li b,
.sop-preview-side strong,
.sop-refine-box strong {
  color: var(--ink);
}

.sop-preview-side li small {
  display: block;
  margin-top: 3px;
}

.sop-preview-side {
  align-content: start;
}

.sop-preview-side > div {
  display: grid;
  gap: 8px;
}

.sop-visual-brief,
.sop-checklist-card {
  display: grid;
  gap: 10px;
  align-content: start;
}

.sop-checklist-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sop-checklist-card li {
  position: relative;
  padding-left: 28px;
  color: var(--muted);
  line-height: 1.45;
}

.sop-checklist-card li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #16a34a, #2563eb);
}

.mermaid-preview {
  overflow: auto;
  min-height: 140px;
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(139, 92, 246, 0.08)),
    var(--surface);
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.45;
}

.sop-refine-box {
  display: grid;
  gap: 10px;
}

.sop-refinement-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.sop-refinement-form textarea {
  min-height: 92px;
  resize: vertical;
}

.sop-refinement-form .primary-button {
  min-width: 180px;
  align-self: stretch;
}

.sop-refine-box > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kpi-tracker-panel {
  display: grid;
  gap: 12px;
}

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

.kpi-summary-grid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(16, 185, 129, 0.08)),
    color-mix(in srgb, var(--panel) 94%, white);
}

.kpi-summary-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.kpi-summary-grid strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1.05;
}

.kpi-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.3fr) minmax(160px, 0.25fr) auto;
  gap: 10px;
  align-items: center;
}

.kpi-toolbar input,
.kpi-toolbar select,
.kpi-editor-form input,
.kpi-editor-form select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}

.kpi-editor-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}

.kpi-editor-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.kpi-editor-form label span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.kpi-editor-form .wide {
  grid-column: span 2;
}

.kpi-editor-form button {
  align-self: end;
}

.row-action-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.mini-button.danger {
  border-color: rgba(239, 68, 68, 0.28);
  color: #dc2626;
}

.kpi-table small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
}

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

.tool-split article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, white);
}

.analytics-table.compact {
  gap: 8px;
}

.chat-window {
  display: grid;
  max-height: 520px;
  gap: 10px;
  overflow-y: auto;
  padding: 2px;
}

.chat-bubble {
  display: grid;
  gap: 9px;
  max-width: min(760px, 92%);
  padding: 12px;
  border-radius: 8px;
}

.chat-bubble p {
  margin-bottom: 0;
  line-height: 1.5;
}

.chat-bubble.assistant {
  justify-self: start;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, white);
}

.chat-bubble.user {
  justify-self: end;
  background: #141414;
  color: #fff8e7;
}

.chat-bubble.user p {
  color: #fff8e7;
}

.chat-bubble.offline-bubble {
  border-color: color-mix(in srgb, var(--gold) 38%, var(--line));
  background: color-mix(in srgb, var(--gold) 10%, var(--panel-bg));
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.chat-form textarea {
  min-height: 68px;
}

.workspace-chat-panel {
  scroll-margin-top: 18px;
  max-width: 100%;
  overflow: hidden;
}

.workspace-chat-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  max-width: 100%;
  overflow: hidden;
}

.workspace-chat-webhooks {
  grid-column: 1 / -1;
}

@media (min-width: 1500px) {
  .workspace-chat-layout {
    grid-template-columns: minmax(280px, 360px) minmax(620px, 1fr) minmax(280px, 340px);
  }

  .workspace-chat-webhooks {
    grid-column: auto;
  }
}

.workspace-chat-sidebar,
.workspace-chat-thread,
.workspace-chat-webhooks {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 260px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 95%, white), color-mix(in srgb, var(--surface) 88%, transparent));
}

.panel-heading.compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.panel-heading.compact > span,
.panel-heading.compact > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-channel-list,
.workspace-message-list,
.workspace-webhook-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.workspace-message-list {
  max-height: 520px;
  overflow: auto;
  padding-right: 2px;
}

.workspace-channel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, white);
  color: var(--ink);
  text-align: left;
}

.workspace-channel.active {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, var(--panel)), color-mix(in srgb, var(--gold) 7%, var(--panel)));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--blue) 12%, transparent);
}

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

.workspace-channel small {
  color: var(--muted);
}

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

.workspace-channel-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, white);
  overflow: hidden;
}

.workspace-channel-card.active {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, var(--panel)), color-mix(in srgb, var(--gold) 7%, var(--panel)));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--blue) 12%, transparent);
}

.workspace-channel-main {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.workspace-channel-main strong,
.workspace-channel-main small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-channel-main small {
  color: var(--muted);
  font-weight: 700;
}

.workspace-channel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.workspace-channel-meta .chip,
.workspace-channel-context > span:not(.chip) {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-channel-actions {
  display: flex;
  gap: 6px;
  align-self: start;
}

.workspace-channel-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

.workspace-chat-help {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.workspace-message-avatar.small {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 0.68rem;
}

.workspace-message {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, white);
}

.workspace-message-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--red), var(--blue));
  color: white;
  font-size: 0.78rem;
  font-weight: 900;
}

.workspace-message header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.workspace-message header strong,
.workspace-message header small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-message header small {
  color: var(--muted);
  font-size: 0.76rem;
}

.workspace-message p {
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.workspace-mentions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.mention-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 11%, var(--surface));
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 850;
}

.workspace-webhook {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px 48px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 90%, white);
}

.workspace-webhook header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.workspace-webhook header strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-webhook code {
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding: 7px 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--ink);
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-webhook p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.workspace-webhook .mini-icon-button {
  position: absolute;
  top: 10px;
  right: 10px;
}

.workspace-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 180px;
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.workspace-empty .icon {
  width: 32px;
  height: 32px;
  color: color-mix(in srgb, var(--blue) 70%, var(--muted));
}

.workspace-chat-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  margin-top: 14px;
}

.workspace-chat-form textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
}

.workspace-chat-form .primary-button {
  align-self: stretch;
  justify-content: center;
  min-width: 150px;
}

.nav-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-left: auto;
  border-radius: 999px;
  background: var(--danger);
  color: white;
  font-size: 0.72rem;
  font-weight: 800;
}

.mobile-bottom-nav,
.mobile-more-backdrop,
.mobile-more-sheet {
  display: none;
}

.mobile-nav-badge {
  position: absolute;
  top: 5px;
  right: max(8px, 18%);
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: white;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
}

.mobile-nav-badge[hidden] {
  display: none;
}

.direct-message-panel {
  scroll-margin-top: 18px;
  max-width: 100%;
  overflow: hidden;
}

.direct-message-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
  min-height: 540px;
  max-width: 100%;
  overflow: hidden;
}

.direct-message-sidebar,
.direct-message-thread {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 420px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, white);
}

.direct-message-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.direct-message-search input {
  width: 100%;
  min-width: 0;
}

.direct-message-users,
.direct-message-conversations,
.direct-message-messages {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.direct-message-user,
.direct-message-conversation {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.direct-message-user:hover,
.direct-message-conversation:hover,
.direct-message-conversation.active {
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
}

.direct-message-user strong,
.direct-message-conversation strong,
.direct-message-user small,
.direct-message-conversation small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.direct-message-user small,
.direct-message-conversation small {
  color: var(--muted);
}

.direct-message-conversation em {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--blue);
  color: white;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.avatar-small {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 16%, var(--surface));
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 800;
}

.direct-message-thread-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.direct-message-thread-head small {
  display: block;
  color: var(--muted);
}

.direct-message-messages {
  align-content: end;
}

.direct-message-bubble {
  max-width: min(76%, 680px);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.direct-message-bubble.mine {
  justify-self: end;
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
}

.direct-message-bubble small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
}

.direct-message-bubble p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.direct-message-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  margin-top: 14px;
}

.direct-message-form textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
}

.direct-message-form .primary-button {
  align-self: stretch;
  justify-content: center;
  min-width: 150px;
}

.mention-autocomplete {
  position: absolute;
  right: 156px;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 50;
  display: grid;
  gap: 6px;
  max-width: min(520px, calc(100% - 164px));
  max-height: 240px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 44px var(--shadow);
}

.mention-autocomplete[hidden] {
  display: none;
}

.mention-suggestion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.mention-suggestion:hover {
  background: color-mix(in srgb, var(--blue) 10%, transparent);
}

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

.mention-suggestion small {
  color: var(--muted);
  font-size: 0.74rem;
}

.workspace-channel-editor {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, var(--panel));
}

.workspace-channel-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

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

.workspace-channel-editor-grid .full {
  grid-column: 1 / -1;
}

.workspace-member-grid {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
}

.workspace-member-option {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.workspace-member-option.is-self {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
  background: color-mix(in srgb, var(--blue) 8%, var(--panel));
}

.workspace-member-option.is-self input[type="checkbox"] {
  opacity: 0.55;
}

.workspace-member-option strong,
.workspace-member-option small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-member-option small {
  color: var(--muted);
  font-size: 0.74rem;
}

.workspace-readonly-field {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 70%, var(--panel));
  color: var(--ink);
  font-weight: 850;
}

.task-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.task-row h3,
.insight-item h3,
.reminder-item h3 {
  margin-bottom: 4px;
}

.task-meta,
.row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-actions {
  display: flex;
  gap: 8px;
}

.mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
}

.mini-icon-button {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 12px;
}

.mini-icon-button .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.25;
}

.mini-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

button:focus-visible,
summary:focus-visible,
a.primary-button:focus-visible,
a.secondary-button:focus-visible,
a.mini-button:focus-visible,
.action-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.icon-only-button:focus-visible {
  outline-offset: 3px;
}

.responsive-icon-only {
  flex: 0 0 auto;
}

.rbac-item {
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  text-align: left;
}

.rbac-item.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, white);
}

.rbac-item strong {
  display: block;
}

.rbac-item small {
  display: block;
  color: var(--muted);
}

.severity-critical,
.severity-high {
  border-left: 4px solid var(--red);
}

.severity-warning,
.severity-medium {
  border-left: 4px solid var(--gold);
}

.severity-positive,
.severity-low {
  border-left: 4px solid var(--green);
}

.tool-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 8px;
  background: var(--surface);
}

.tool-tab {
  min-height: 34px;
  color: var(--muted);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 800;
}

.tool-tab.active {
  background: color-mix(in srgb, var(--panel) 86%, white);
  color: var(--ink);
  box-shadow: 0 4px 18px rgba(33, 28, 22, 0.08);
}

.tool-tabs[hidden] {
  display: none;
}

.ai-capability-map {
  display: grid;
  gap: 12px;
}

.ai-capability-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel) 92%, white);
}

.ai-capability-heading strong {
  display: block;
  font-size: 0.98rem;
}

.ai-capability-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  line-height: 1.35;
}

.ai-capability-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 72%),
    var(--panel);
}

.ai-capability-division {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ai-capability-division strong,
.ai-capability-division small {
  display: block;
}

.ai-capability-division small {
  color: var(--muted);
}

.ai-capability-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.ai-capability-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 8px;
  min-height: 78px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, white);
  color: var(--ink);
  text-align: left;
}

.ai-capability-item .icon {
  width: 17px;
  height: 17px;
  color: var(--accent);
}

.ai-capability-item strong,
.ai-capability-item small {
  min-width: 0;
}

.ai-capability-item small {
  grid-column: 2;
  color: var(--muted);
  line-height: 1.25;
}

.ai-form {
  display: grid;
  gap: 10px;
}

.ai-result {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #141414;
  color: #fff8e7;
}

.ai-result p,
.ai-result li {
  color: rgba(255, 248, 231, 0.78);
  line-height: 1.5;
}

.ai-result ul {
  margin: 0;
  padding-left: 18px;
}

.seller-table {
  display: grid;
  gap: 10px;
}

.seller-row {
  grid-template-columns: minmax(160px, 1fr) repeat(3, minmax(90px, 130px)) minmax(180px, 1.1fr);
  align-items: center;
}

.seller-row.header {
  color: var(--muted);
  background: var(--surface);
  font-size: 0.78rem;
  font-weight: 800;
}

.integration-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.blueprint-row {
  background: color-mix(in srgb, var(--blue) 7%, var(--panel));
}

.integration-row > div {
  min-width: 0;
}

.integration-row h3,
.integration-row p {
  overflow-wrap: anywhere;
}

.integration-row .row-meta {
  justify-content: flex-start;
}

.ticket-item h3 {
  margin-bottom: 4px;
}

.ticket-item > small {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ticket-item p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.live-chat-recommendation {
  display: grid;
  gap: 6px;
  margin-top: 4px;
  padding: 10px;
  border-left: 4px solid var(--green);
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 8%, var(--panel));
}

.live-chat-recommendation strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.live-chat-recommendation p {
  color: var(--ink);
}

.livechat-panel .ai-form {
  margin-top: 12px;
}

.livechat-panel .live-chat-result-head {
  align-items: flex-start;
  flex-direction: column;
}

.livechat-panel .live-chat-result-grid {
  grid-template-columns: 1fr;
}

.live-chat-result-card {
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.15), transparent 42%),
    #141414;
}

.live-chat-result-card.needs-revision {
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.2), transparent 44%),
    #141414;
}

.live-chat-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.live-chat-result-head span {
  color: rgba(255, 248, 231, 0.7);
  font-weight: 800;
}

.live-chat-result-head strong {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 248, 231, 0.12);
}

.cs-reply-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(255, 248, 231, 0.16);
  border-radius: 8px;
  background: rgba(255, 248, 231, 0.08);
}

.cs-reply-card small {
  color: #f2be57;
  font-weight: 900;
  text-transform: uppercase;
}

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

.live-chat-result-grid section {
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 248, 231, 0.06);
}

.next-action {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 248, 231, 0.14);
}

.score-pill {
  display: inline-flex;
  width: fit-content;
  min-width: 52px;
  justify-content: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(47, 123, 194, 0.12);
  color: var(--blue);
  font-weight: 900;
}

.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.empty-state {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.58);
}

.offline-shell {
  display: grid;
  min-height: 100vh;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}

.offline-shell h1 {
  max-width: 520px;
  margin-bottom: 0;
  font-size: 2.4rem;
  line-height: 1;
}

.offline-shell p {
  max-width: 460px;
  color: var(--muted);
  line-height: 1.5;
}

.network-status {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 34;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: min(420px, calc(100vw - 36px));
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gold) 11%, transparent), transparent 70%),
    color-mix(in srgb, var(--panel-bg) 96%, var(--surface));
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(29, 23, 15, 0.2);
}

.network-status[hidden],
.offline-dock[hidden] {
  display: none;
}

.network-status.online {
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
}

.network-status strong,
.network-status small {
  display: block;
}

.network-status small {
  margin-top: 2px;
  color: var(--muted);
  line-height: 1.35;
}

.network-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--gold) 15%, transparent);
}

.network-status.online .network-dot {
  background: var(--green);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--green) 15%, transparent);
}

.offline-dock {
  position: fixed;
  right: 18px;
  bottom: 92px;
  z-index: 33;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.82fr);
  gap: 14px;
  width: min(780px, calc(100vw - 36px));
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 7%, transparent), transparent 58%),
    color-mix(in srgb, var(--panel-bg) 98%, var(--surface));
  box-shadow: 0 26px 70px rgba(30, 41, 59, 0.2);
}

.offline-dock-copy {
  display: grid;
  align-content: center;
  gap: 8px;
}

.offline-dock h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.2;
}

.offline-dock p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.offline-game {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, var(--panel-bg));
}

.offline-game-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.offline-game-head strong,
.offline-game-head small {
  display: block;
}

.offline-game-head small {
  margin-top: 2px;
  color: var(--muted);
  line-height: 1.3;
}

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

.offline-game-tile {
  aspect-ratio: 1;
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 8%, var(--panel-bg));
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 950;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.offline-game-tile:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
}

.offline-game-tile.done {
  background: color-mix(in srgb, var(--green) 13%, var(--panel-bg));
  color: var(--green);
}

.offline-game-tile.shake {
  animation: offline-shake 260ms ease;
  border-color: color-mix(in srgb, var(--red) 48%, var(--line));
}

@keyframes offline-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.install-banner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 16;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  color: var(--ink);
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(10px);
}

.install-banner[hidden] {
  display: none;
}

.install-banner strong,
.install-banner small {
  display: block;
}

.install-banner small {
  color: var(--muted);
  line-height: 1.4;
}

body:has(.action-detail-backdrop) .install-banner {
  display: none;
}

@media (max-width: 1180px) {
  h1 {
    font-size: 3.2rem;
  }

  .division-strip {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
  }

  .metric-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .workspace-grid {
    grid-template-columns: 1fr;
  }

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

  .topbar-header {
    flex-direction: column;
    align-items: stretch;
  }

  .top-preferences {
    align-self: flex-start;
    max-width: 100%;
  }

  .filter-toolbar {
    grid-template-columns: 1fr;
  }

  body[data-page="integrations"] .right-rail {
    grid-template-columns: 1fr;
  }

  .ads-kpi-grid,
  .ads-analysis-layout,
  .ads-visual-grid,
  .ads-line-legend,
  .ads-action-grid,
  .ads-drilldown-kpis,
  .firebase-funnel-steps,
  .firebase-funnel-summary,
  .utm-governance-grid,
  .utm-funnel-summary,
  .utm-ops-grid,
  .ai-insight-grid,
  .prospect-source-strip,
  .prospect-guidance-grid,
  .prospect-grid,
  .seller-kpi-grid,
  .seller-action-grid,
  .seller-health-grid,
  .ai-control-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seller-presentation-grid {
    grid-template-columns: 1fr;
  }

  .landing-grid,
  .landing-hero,
  .landing-feature-band,
  .landing-story-section,
  .landing-cta-band,
  .legal-grid,
  .contact-grid,
  .live-chat-start-form,
  .live-chat-message-form,
  .ads-filter-bar,
  .provider-account-row,
  .env-settings-form,
  .env-row,
  .user-settings-row,
  .credential-copy-row,
  .ai-control-layout {
    grid-template-columns: 1fr;
  }

  .user-action-row {
    justify-content: flex-start;
  }

  .landing-product-preview {
    order: 3;
  }

  .landing-hero-media {
    min-height: 520px;
  }

  .promo-screen {
    right: 28px;
    width: min(520px, 64%);
  }

  .promo-live-tile {
    width: min(230px, 36%);
  }

  .landing-metric-strip,
  .landing-story-grid,
  .landing-division-grid,
  .landing-workflow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ads-donut-card {
    grid-column: 1 / -1;
  }

  .tool-page-main {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 860px) {
  .ai-control-metrics,
  .ai-toggle-grid,
  .faq-mini-row,
  .ai-studio-grid,
  .ai-studio-grid.compact,
  .ai-studio-two,
  .ai-chat-workbench,
  .ai-studio-search {
    grid-template-columns: 1fr;
  }

  .ai-management-header,
  .ai-studio-dashboard-head,
  .ai-studio-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-management-status,
  .ai-studio-actions {
    justify-content: flex-start;
  }

  .ai-studio-tab {
    min-height: 38px;
    padding: 0 10px;
  }

  .ai-studio-card {
    padding: 13px;
  }

  .ai-chat-workbench {
    min-height: auto;
  }

  html {
    scroll-padding-top: 16px;
  }

  body {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  body.notification-drawer-open {
    overflow: hidden;
  }

  body.login-page {
    padding-bottom: 0;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  body.sidebar-collapsed .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .mobile-bottom-nav {
    position: fixed;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 12px;
    z-index: 36;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    max-width: 520px;
    margin: 0 auto;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    border-radius: 22px;
    background: color-mix(in srgb, var(--panel-bg) 88%, var(--surface));
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(18px);
  }

  .mobile-nav-item {
    position: relative;
    display: inline-grid;
    min-width: 0;
    min-height: 56px;
    place-items: center;
    gap: 4px;
    padding: 7px 4px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1.1;
  }

  .mobile-nav-item .icon {
    width: 20px;
    height: 20px;
  }

  .mobile-nav-item > span:not(.mobile-nav-badge) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav-item.active {
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #2563eb);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.24);
  }

  .mobile-more-backdrop {
    z-index: 37;
    display: block;
  }

  .mobile-more-backdrop[hidden] {
    display: none;
  }

  .mobile-more-sheet {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 38;
    display: grid;
    gap: 12px;
    max-height: min(86vh, 640px);
    padding: 14px 16px calc(92px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
  }

  .mobile-more-sheet[hidden] {
    display: none;
  }

  .mobile-more-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .mobile-more-header strong,
  .mobile-more-header small {
    display: block;
  }

  .mobile-more-header small {
    margin-top: 2px;
    color: var(--muted);
  }

  .mobile-more-list {
    display: grid;
    gap: 8px;
  }

  .mobile-more-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel) 92%, var(--surface));
    color: var(--ink);
    font-weight: 850;
    text-align: left;
  }

  .mobile-more-item.active {
    border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
    background: color-mix(in srgb, var(--blue) 10%, var(--panel));
    color: var(--blue);
  }

  .mobile-more-item.danger {
    color: var(--red);
  }

  .mobile-language-toggle select {
    width: 72px;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-bg);
    color: var(--ink);
    font-weight: 900;
  }

  .topbar-header,
  .tool-page-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .tool-page-actions {
    align-self: flex-end;
  }

  .topbar-header {
    display: flex;
  }

  .top-preferences {
    align-self: flex-end;
  }

  .notification-inbox-shell {
    position: static;
  }

  .notification-bell-button {
    gap: 6px;
    width: 42px;
    min-height: 40px;
    padding-inline: 0;
  }

  .notification-bell-helper {
    top: auto;
    right: 10px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: min(300px, calc(100vw - 20px));
  }

  .notification-inbox-drawer {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 100dvh;
    max-height: 100dvh;
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
    border-width: 0;
    border-radius: 0;
  }

  .notification-inbox-header {
    padding-bottom: 4px;
  }

  .notification-inbox-summary {
    gap: 6px;
  }

  .notification-mark-all-read {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    padding: 0;
  }

  .notification-mark-all-read-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .notification-inbox-item {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 9px;
  }

  .notification-inbox-actions {
    justify-content: flex-start;
  }

  .notification-action-icon {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    min-height: 38px;
  }

  .notification-inbox-tabs {
    gap: 6px;
    padding-bottom: 6px;
  }

  .top-actions {
    max-width: none;
  }

  .filter-toolbar {
    grid-template-columns: 1fr;
  }

  .filter-toolbar-title {
    padding: 0;
  }

  .control-pill,
  .theme-pill,
  .division-select {
    width: 100%;
  }

  .date-filter {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .date-filter .secondary-button {
    grid-column: 1 / -1;
  }

  .date-filter .filter-apply-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  h1 {
    font-size: 2.55rem;
    line-height: 1;
  }

  .main-content {
    padding: 20px;
  }

  .division-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin-right: -20px;
    margin-left: -20px;
    padding: 0 20px 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .division-card {
    min-width: 172px;
    scroll-snap-align: start;
  }

  .module-grid,
  .right-rail {
    grid-template-columns: 1fr;
  }

  .tool-detail-hero,
  .tool-detail-actions {
    flex-direction: column;
  }

  .tool-detail-grid {
    grid-template-columns: 1fr;
  }

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

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

	  .analytics-focus-list {
	    grid-template-columns: 1fr;
	  }

  .analytics-row,
  .analytics-row.header {
    grid-template-columns: 1fr;
  }

  .analytics-row.header {
    display: none;
  }

  .task-form,
  .mom-library-controls,
  .mom-library-grid,
  .seller-row,
  .ads-bar-row,
  .tool-setup-form,
  .chat-form,
  .settings-layout,
  .settings-row,
  .activity-log-controls,
  .activity-log-row,
  .security-grid,
  .tool-page-form,
  .fraud-kpi-grid,
  .fraud-report-grid,
  .fraud-rule-layout,
  .sop-preview-hero,
  .sop-preview-grid,
  .sop-support-grid,
  .kpi-summary-grid,
  .kpi-toolbar,
  .kpi-editor-form,
	  .tool-split {
	    grid-template-columns: 1fr;
	  }

	  .fraud-rule-card {
	    grid-template-columns: 1fr;
	  }

  .fraud-scheduler-warning {
    align-items: stretch;
    flex-direction: column;
  }

	  .fraud-rule-actions {
	    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .kpi-editor-form .wide {
    grid-column: 1 / -1;
  }

  .activity-log-table {
    max-height: 520px;
  }

	  .task-form > * {
	    grid-column: 1 / -1 !important;
	  }

  .task-form {
    flex-direction: column;
  }

  .task-form .primary-button {
    width: 100%;
    flex-basis: auto;
  }

  .fraud-ai-panel {
    position: static;
  }

  .live-chat-result-head,
  .live-chat-result-grid {
    grid-template-columns: 1fr;
  }

  .live-chat-result-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .mom-library-heading,
  .mom-viewer-top {
    flex-direction: column;
  }

  .mom-action-item,
  .mom-action-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .mom-action-meta {
    min-width: 0;
    justify-content: flex-start;
  }

  .mom-catalog {
    max-height: 320px;
  }

  .mom-document-preview {
    max-height: 420px;
  }

	  .ads-bar-row > strong {
    text-align: left;
  }

	  .division-report-panel {
	    margin-right: -4px;
	    margin-left: -4px;
	  }

	  .report-disclosure summary {
	    align-items: flex-start;
	    flex-direction: column;
	  }

  .task-row {
    grid-template-columns: 1fr;
  }

  .seller-row.header {
    display: none;
  }

  .install-banner {
    right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    left: 12px;
    grid-template-columns: 1fr auto;
    width: auto;
  }

  .network-status {
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
  }

  .offline-dock {
    right: 12px;
    bottom: calc(148px + env(safe-area-inset-bottom));
    left: 12px;
    grid-template-columns: 1fr;
    width: auto;
    max-height: min(72vh, 620px);
    overflow: auto;
  }

  .install-banner .primary-button {
    grid-column: 1 / -1;
  }

  .tool-page-shell {
    padding: 16px;
  }

  .tool-page-hero h1 {
    font-size: 2.2rem;
  }
}

@media (max-width: 1280px) {
  .workspace-chat-layout {
    grid-template-columns: 1fr;
  }

  .workspace-chat-webhooks {
    grid-column: auto;
  }

  .user-settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-user-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "identity"
      "meta"
      "access"
      "actions";
    align-items: stretch;
  }

  .settings-user-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .settings-user-card .user-action-row {
    grid-template-columns: repeat(auto-fit, minmax(40px, 40px));
    justify-content: flex-start;
  }

  .pending-user-approval-row {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.6fr) minmax(150px, 0.6fr);
  }

  .pending-user-approval-row .mini-button {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .ai-insight-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ai-insight-action {
    width: 100%;
  }

  .workspace-channel-editor-grid {
    grid-template-columns: 1fr;
  }

  .workspace-chat-form {
    grid-template-columns: 1fr;
  }

  .workspace-chat-form .primary-button {
    min-width: 0;
  }

  .mention-autocomplete {
    max-width: none;
    right: 0;
  }

  .settings-user-meta,
  .credential-copy-row {
    grid-template-columns: 1fr;
  }

  .settings-user-card .user-action-row .mini-button {
    max-width: none;
  }

  .main-content {
    padding: 16px;
  }

  h1 {
    font-size: 2.1rem;
    line-height: 1;
  }

  .login-shell {
    padding: 16px;
  }

  .login-panel {
    gap: 18px;
    padding: 24px;
  }

  .login-panel h1 {
    font-size: 2rem;
  }

  .sop-stat-row,
  .sop-stage-flow,
  .sop-visual-flow,
  .sop-refinement-form {
    grid-template-columns: 1fr;
  }

  .sop-illustration-panel {
    min-height: 200px;
  }

  .sop-orbit.node {
    min-width: 58px;
    min-height: 58px;
    font-size: 0.72rem;
  }

  .landing-shell,
  .legal-shell {
    padding: 16px;
  }

  .landing-nav,
  .landing-nav-links,
  .landing-nav-actions,
  .landing-footer {
    flex-wrap: wrap;
  }

  .landing-hero-copy h1,
  .landing-copy h1,
  .legal-card h1 {
    max-width: 100%;
    font-size: 1.88rem;
    line-height: 1.05;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }

  .landing-hero-copy {
    width: 100%;
    max-width: calc(100vw - 32px);
  }

  .landing-hero-copy .subtitle {
    font-size: 0.98rem;
    line-height: 1.6;
  }

  .landing-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .landing-actions > * {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .landing-proof,
  .landing-metric-strip,
  .landing-story-grid,
  .landing-division-grid,
  .landing-workflow-steps,
  .hero-stat-row,
  .preview-metrics,
  .workflow-builder-add {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    min-height: auto;
  }

  .landing-hero-media {
    min-height: 500px;
  }

  .promo-screen {
    top: 110px;
    right: 18px;
    left: 18px;
    width: auto;
    min-height: 242px;
    padding: 14px;
    transform: none;
  }

  .promo-chart {
    min-height: 82px;
    padding: 10px;
  }

  .promo-flow {
    gap: 6px;
  }

  .promo-action-line {
    display: none;
  }  .promo-live-tile,
  .promo-reel-progress,
  .motion-card {
    display: none;
  }

  .hero-stat-row article {
    min-height: 58px;
    padding: 10px 12px;
  }

  .hero-caption {
    right: 16px;
    left: 16px;
    width: auto;
    padding: 12px;
  }

  .landing-play-button {
    width: 72px;
    height: 72px;
  }

  .landing-feature-band article {
    padding: 16px;
  }

  .motion-card {
    max-width: calc(100% - 32px);
  }

  .motion-card-one,
  .motion-card-two {
    right: 16px;
    left: 16px;
  }

  .motion-card-one {
    bottom: 116px;
  }

  .motion-card-two {
    display: none;
  }

  .landing-section-copy h2,
  .landing-section-heading h2,
  .landing-cta-band h2 {
    font-size: 2rem;
  }

  .landing-footer {
    justify-content: center;
    text-align: center;
  }

  .login-modal {
    align-items: end;
    padding: 12px;
  }

  .login-modal-card {
    max-height: calc(100vh - 24px);
  }

  .preview-window {
    min-height: auto;
  }

  .ads-kpi-grid,
  .ads-analysis-layout,
  .ads-insight-strip,
  .ads-visual-grid,
  .ads-line-legend,
  .ads-action-grid,
  .ads-drilldown-kpis,
  .firebase-funnel-steps,
  .firebase-funnel-summary,
  .utm-governance-grid,
  .utm-funnel-summary,
  .utm-ops-grid,
  .ai-insight-grid,
  .prospect-source-strip,
  .prospect-guidance-grid,
  .prospect-grid,
  .seller-action-grid,
  .seller-kpi-grid,
  .seller-presentation-grid,
  .seller-health-grid,
  .seller-score-pair {
    grid-template-columns: 1fr;
  }

  .ai-insight-head,
  .seller-target-row {
    grid-template-columns: 1fr;
  }

  .utm-url {
    max-width: 240px;
  }

  .ai-insight-head {
    display: grid;
  }

  .seller-target-row > strong {
    text-align: left;
  }

  .ads-donut-wrap,
  .ads-funnel-bars div {
    grid-template-columns: 1fr;
  }

  .subtitle {
    font-size: 0.92rem;
  }

  .topbar {
    gap: 16px;
  }

  .panel {
    padding: 14px;
  }

  .division-select,
  .admin-badge,
  .date-filter {
    width: 100%;
  }

  .date-filter {
    grid-template-columns: 1fr;
  }

  .date-filter .control-icon,
  .date-filter-divider {
    display: none;
  }

  .metric-card {
    min-height: 104px;
    padding: 14px;
  }

  .metric-card strong {
    font-size: 1.65rem;
  }

  .analytics-summary {
    grid-template-columns: 1fr;
  }

  .tool-page-grid {
    grid-template-columns: 1fr;
  }

  .module-top,
  .panel-heading {
    align-items: flex-start;
  }

  .module-top {
    flex-direction: column;
  }

  .compact-tool-card .module-top {
    flex-direction: row;
  }

  .secondary-button,
  .primary-button,
  .mini-button {
    min-height: 42px;
  }
}

@media (max-width: 390px) {
  .metric-grid {
    grid-template-columns: 1fr;
  }

  .nav-item {
    font-size: 0.68rem;
  }
}

/* PWA/mobile hardening for dense analytics workspaces */
.ads-analysis-layout,
.ads-analysis-main,
.ads-ai-rail,
.ads-report-card,
.ads-visual-grid,
.ads-donut-card,
.ads-funnel-card,
.ads-pacing-card,
.ads-line-chart-card,
.ads-drilldown-panel,
.firebase-funnel-card,
.utm-governance-panel,
.utm-funnel-card,
.utm-workflow-card,
.utm-export-card,
.ads-kpi-grid article,
.seller-health-card,
.ads-insight-strip article,
.ads-insight-strip button,
.ads-breakdown-grid article,
.ads-breakdown-grid button,
.ads-action-grid article {
  min-width: 0;
  max-width: 100%;
}

.tool-page-main,
.tool-page-primary,
.tool-page-secondary,
.tool-page-section,
.crm-panel,
.source-account-list,
.source-account-card,
.workflow-builder,
.workflow-step-row,
.metric-card,
.business-report-card,
.wide-report {
  min-width: 0;
  max-width: 100%;
}

.ads-kpi-grid strong,
.seller-health-card strong,
.ads-dashboard-grid strong,
.ads-insight-strip strong,
.ads-breakdown-grid strong,
.ads-drilldown-kpis strong,
.utm-funnel-summary strong,
.firebase-funnel-steps strong,
.ads-donut-legend b,
.ads-line-legend b {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.ads-donut-legend span,
.ads-donut-legend button,
.ads-channel-badges span,
.ads-channel-badges button {
  min-width: 0;
}

.business-table-scroll {
  max-width: 100%;
}

.utm-url {
  max-width: 100%;
}

@media (max-width: 1180px) {
  .ads-analysis-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ads-ai-rail .ai-insight-panel {
    position: static;
    top: auto;
  }

  .ads-visual-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .ads-insight-strip,
  .ads-breakdown-grid,
  .ads-action-grid,
  .firebase-funnel-steps,
  .utm-governance-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .ads-drilldown-kpis,
  .utm-funnel-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .tool-page-main,
  .tool-page-main.ads-tool-main,
  .tool-page-main.seller-tool-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-page-primary,
  .tool-page-secondary,
  .crm-panel,
  .source-account-list,
  .source-account-card,
  .workflow-builder,
  .business-report-card,
  .wide-report {
    overflow: hidden;
  }

  .ads-command-center,
  .ads-report-card,
  .ads-line-chart-card,
  .ads-drilldown-panel,
  .firebase-funnel-card,
  .utm-governance-panel,
  .utm-funnel-card,
  .utm-workflow-card,
  .utm-export-card {
    overflow: hidden;
  }

  .ads-filter-bar,
  .ads-kpi-grid,
  .seller-health-grid,
  .ads-dashboard-grid,
  .ads-visual-grid,
  .ads-insight-strip,
  .ads-breakdown-grid,
  .ads-line-legend,
  .ads-action-grid,
  .firebase-funnel-steps,
  .firebase-funnel-summary,
  .utm-governance-grid,
  .utm-funnel-summary,
  .utm-ops-grid,
  .ads-drilldown-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .ads-provider-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-card {
    overflow: hidden;
  }

  .metric-card strong,
  .metric-card small,
  .utm-url,
  .source-account-card,
  .workflow-step-row input {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .utm-url {
    display: block;
    white-space: normal;
  }

  .ads-provider-filter label {
    width: 100%;
  }

  .ads-channel-badges {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .ads-channel-badges span,
  .ads-channel-badges button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .ads-kpi-grid strong,
  .seller-health-card strong,
  .ads-dashboard-grid strong,
  .ads-insight-strip strong,
  .ads-breakdown-grid strong,
  .ads-drilldown-kpis strong,
  .utm-funnel-summary strong,
  .firebase-funnel-steps strong {
    font-size: clamp(1.08rem, 5vw, 1.42rem);
    line-height: 1.12;
  }

  .ads-donut-wrap {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .ads-donut {
    width: min(58vw, 210px);
    height: min(58vw, 210px);
  }

  .ads-donut::after {
    inset: clamp(30px, 18%, 58px);
  }

  .ads-donut-center {
    font-size: clamp(1.2rem, 5vw, 1.7rem);
  }

  .ads-donut-legend {
    width: 100%;
  }

  .ads-donut-legend span,
  .ads-donut-legend button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-content: stretch;
    width: 100%;
  }

  .ads-funnel-bars div {
    grid-template-columns: minmax(0, 1fr);
  }

  .ads-funnel-bars div > strong {
    justify-self: start;
  }

  .ads-funnel-bars i {
    width: 100%;
  }

  .ads-pacing-note {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .ads-line-chart-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  .ads-line-chart {
    width: 640px;
    min-width: 640px;
  }

  .ads-point-tooltip {
    max-width: 200px;
  }

  .business-table-scroll {
    overflow-x: visible;
    border: 0;
    background: transparent;
  }

  .business-table-scroll:has(.ads-table),
  .business-table-scroll:has(.utm-funnel-table),
  .business-table-scroll:has(.crm-table),
  .business-table-scroll:has(.seller-profile-table),
  .business-table-scroll:has(.seller-dashboard-table) {
    overflow-x: visible;
    border: 0;
    background: transparent;
  }

  .business-table,
  .ads-table,
  .utm-funnel-table,
  .crm-table,
  .seller-profile-table,
  .seller-dashboard-table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .business-table thead,
  .ads-table thead,
  .utm-funnel-table thead,
  .crm-table thead,
  .seller-profile-table thead,
  .seller-dashboard-table thead {
    display: none;
  }

  .business-table,
  .business-table tbody,
  .business-table tr,
  .business-table td,
  .ads-table,
  .ads-table tbody,
  .ads-table tr,
  .ads-table td,
  .utm-funnel-table,
  .utm-funnel-table tbody,
  .utm-funnel-table tr,
  .utm-funnel-table td,
  .crm-table,
  .crm-table tbody,
  .crm-table tr,
  .crm-table td,
  .seller-profile-table,
  .seller-profile-table tbody,
  .seller-profile-table tr,
  .seller-profile-table td,
  .seller-dashboard-table,
  .seller-dashboard-table tbody,
  .seller-dashboard-table tr,
  .seller-dashboard-table td {
    display: block;
    width: 100%;
  }

  .business-table tr,
  .ads-table tr,
  .utm-funnel-table tr,
  .crm-table tr,
  .seller-profile-table tr,
  .seller-dashboard-table tr {
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 96%, white);
    box-shadow: var(--shadow-soft);
  }

  .business-table td,
  .ads-table td,
  .utm-funnel-table td,
  .crm-table td,
  .seller-profile-table td,
  .seller-dashboard-table td {
    display: grid;
    grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    border: 0;
    padding: 7px 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .crm-table td:last-child {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .business-table td::before,
  .ads-table td::before,
  .utm-funnel-table td::before,
  .crm-table td::before,
  .seller-profile-table td::before,
  .seller-dashboard-table td::before {
    color: var(--muted);
    content: "";
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .business-table td:nth-child(1)::before {
    content: "Metric";
  }

  .business-table td:nth-child(2)::before {
    content: "Actual";
  }

  .business-table td:nth-child(3)::before {
    content: "Ratio";
  }

  .business-table td:nth-child(4)::before {
    content: "Last period";
  }

  .business-table td:nth-child(5)::before {
    content: "Growth";
  }

  .business-table td:nth-child(6)::before {
    content: "Delta";
  }

  .business-table td:nth-child(7)::before {
    content: "Result";
  }

  .ads-table td:nth-child(1)::before {
    content: "Date";
  }

  .ads-table td:nth-child(2)::before {
    content: "Ad name";
  }

  .ads-table td:nth-child(3)::before {
    content: "Campaign";
  }

  .ads-table td:nth-child(4)::before {
    content: "Clicks";
  }

  .ads-table td:nth-child(5)::before {
    content: "Impressions";
  }

  .ads-table td:nth-child(6)::before {
    content: "CTR";
  }

  .ads-table td:nth-child(7)::before {
    content: "CPM";
  }

  .ads-table td:nth-child(8)::before {
    content: "CPC";
  }

  .ads-table td:nth-child(9)::before {
    content: "Spend";
  }

  .utm-funnel-table td:nth-child(1)::before {
    content: "Campaign";
  }

  .utm-funnel-table td:nth-child(2)::before {
    content: "Source";
  }

  .utm-funnel-table td:nth-child(3)::before {
    content: "Clicks";
  }

  .utm-funnel-table td:nth-child(4)::before {
    content: "Sign up";
  }

  .utm-funnel-table td:nth-child(5)::before {
    content: "Checkout";
  }

  .utm-funnel-table td:nth-child(6)::before {
    content: "Purchase";
  }

  .utm-funnel-table td:nth-child(7)::before {
    content: "CVR";
  }

  .utm-funnel-table td:nth-child(8)::before {
    content: "Quality";
  }

  .crm-table td:nth-child(1)::before {
    content: "Seller";
  }

  .crm-table td:nth-child(2)::before {
    content: "Contact";
  }

  .crm-table td:nth-child(3)::before {
    content: "Area";
  }

  .crm-table td:nth-child(4)::before {
    content: "Stage";
  }

  .crm-table td:nth-child(5)::before {
    content: "BD PIC";
  }

  .crm-table td:nth-child(6)::before {
    content: "Segment";
  }

  .crm-table td:nth-child(7)::before {
    content: "Birthday";
  }

  .crm-table td:nth-child(8)::before {
    content: "Follow-up";
  }

  .crm-table td:nth-child(9)::before {
    content: "Action";
  }

  .seller-profile-table td:nth-child(1)::before,
  .seller-dashboard-table td:nth-child(1)::before {
    content: "No.";
  }

  .seller-profile-table td:nth-child(2)::before,
  .seller-dashboard-table td:nth-child(2)::before {
    content: "Seller";
  }

  .seller-profile-table td:nth-child(3)::before,
  .seller-dashboard-table td:nth-child(3)::before {
    content: "Email";
  }

  .seller-profile-table td:nth-child(4)::before,
  .seller-dashboard-table td:nth-child(4)::before {
    content: "Group";
  }

  .seller-profile-table td:nth-child(5)::before,
  .seller-dashboard-table td:nth-child(5)::before {
    content: "Area";
  }

  .seller-profile-table td:nth-child(6)::before,
  .seller-dashboard-table td:nth-child(6)::before {
    content: "Product";
  }

  .seller-profile-table td:nth-child(7)::before,
  .seller-dashboard-table td:nth-child(7)::before {
    content: "BD PIC";
  }

  .seller-profile-table td:nth-child(8)::before,
  .seller-dashboard-table td:nth-child(8)::before {
    content: "Share";
  }

  .seller-profile-table td:nth-child(9)::before,
  .seller-dashboard-table td:nth-child(9)::before {
    content: "Avg shipment";
  }

  .seller-profile-table td:nth-child(10)::before,
  .seller-dashboard-table td:nth-child(10)::before {
    content: "All 3PL";
  }

  .seller-profile-table td:nth-child(11)::before,
  .seller-dashboard-table td:nth-child(11)::before {
    content: "3PL / Agr";
  }
}

@media (max-width: 520px) {
  .ads-provider-filter {
    grid-template-columns: minmax(0, 1fr);
  }

  .ads-line-chart {
    width: 560px;
    min-width: 560px;
  }

  .business-table td,
  .ads-table td,
  .utm-funnel-table td,
  .crm-table td,
  .seller-profile-table td,
  .seller-dashboard-table td {
    grid-template-columns: minmax(0, 1fr);
  }

  .business-table td::before,
  .ads-table td::before,
  .utm-funnel-table td::before,
  .crm-table td::before,
  .seller-profile-table td::before,
  .seller-dashboard-table td::before {
    margin-bottom: -2px;
  }

  .ads-pacing-card,
  .ads-donut-card,
  .ads-funnel-card,
  .ads-line-chart-card,
  .firebase-funnel-card,
  .utm-governance-panel,
  .utm-funnel-card,
  .utm-workflow-card,
  .utm-export-card {
    padding: 12px;
  }
}

/* Stronger PWA/mobile containment for analytics pages with dense grids. */
@media (max-width: 760px) {
  .ads-command-center {
    display: block;
    width: 100%;
    max-width: 100%;
    padding-inline: clamp(12px, 4vw, 16px);
    box-sizing: border-box;
  }

  .ads-command-center > *,
  .ads-report-card > *,
  .ads-analysis-layout,
  .ads-analysis-main,
  .ads-fullwidth-stack,
  .ads-ai-rail,
  .ads-filter-bar,
  .ads-kpi-grid,
  .seller-health-grid,
  .ads-dashboard-grid,
  .ads-visual-grid,
  .ads-insight-strip,
  .ads-breakdown-grid,
  .ads-action-grid,
  .ads-section-toolbar,
  .business-table-scroll,
  .utm-url {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .ads-filter-bar,
  .ads-kpi-grid,
  .seller-health-grid,
  .ads-dashboard-grid,
  .ads-visual-grid,
  .ads-insight-strip,
  .ads-breakdown-grid,
  .ads-action-grid,
  .ads-section-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ads-filter-bar label,
  .ads-filter-bar input,
  .ads-filter-bar select,
  .ads-filter-bar button,
  .ads-filter-bar .primary-button,
  .ads-filter-bar .secondary-button {
    width: 100%;
    max-width: 100%;
  }

  .ads-pacing-note,
  .ads-pacing-note span,
  .ads-ai-rail,
  .ads-action-grid article,
  .ads-action-grid button,
  .ads-insight-strip article,
  .ads-insight-strip button,
  .ads-breakdown-grid article,
  .ads-breakdown-grid button {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

@media (max-width: 520px) {
  .ads-command-center {
    padding-inline: 12px;
  }

  .ads-filter-bar,
  .ads-visual-grid,
  .ads-insight-strip,
  .ads-breakdown-grid,
  .ads-action-grid {
    gap: 12px;
  }
}

/* Final mobile containment for carousel-like cards and dense seller/chat surfaces. */
@media (max-width: 760px) {
  .division-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding: 0;
  }

  .division-card {
    width: 100%;
    min-width: 0;
  }

  .division-card span:not(.icon-badge),
  .division-card strong,
  .division-card small {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ads-provider-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .ads-provider-filter label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .ads-provider-filter span {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .seller-tool-main .panel-heading,
  .seller-kpi-grid,
  .seller-kpi-grid article,
  .seller-source-badges {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .seller-tool-main .panel-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .seller-source-badges {
    justify-content: flex-start;
    overflow-x: visible;
  }

  .seller-source-badges span,
  .seller-source-badges button {
    flex: 1 1 min(100%, 150px);
    white-space: normal;
  }

  .seller-kpi-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .seller-kpi-grid article {
    grid-template-columns: minmax(0, 1fr);
  }

  .seller-kpi-grid span,
  .seller-kpi-grid strong,
  .seller-kpi-grid small {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .workspace-channel-main strong,
  .workspace-channel-main small,
  .workspace-channel strong,
  .workspace-channel small {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .nav-group-settings.is-open .nav-sublist {
    display: none;
  }

  .ai-studio-tabs {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  .ai-studio-tab {
    width: auto;
    min-width: max-content;
    flex: 0 0 auto;
    justify-content: center;
    padding: 0 8px;
  }

  .ai-studio-tab span:not(.icon) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .division-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-studio-tab {
    gap: 6px;
    font-size: 0.78rem;
  }
}

/* Mobile PWA polish for analytics, settings, profile, and dense admin surfaces. */
@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .ads-channel-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .ads-channel-badges span,
  .ads-channel-badges button {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ads-line-chart-wrap {
    min-height: clamp(230px, 70vw, 300px);
    overflow: visible;
  }

  .ads-line-chart {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: clamp(230px, 70vw, 300px);
  }

  .ads-chart-axis-label,
  .ads-chart-x-label {
    font-size: 10px;
  }

  .settings-layout,
  .profile-settings-layout,
  .user-settings-layout,
  .user-settings-layout > .settings-card,
  .settings-card,
  .settings-card.wide {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .settings-user-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "identity"
      "meta"
      "access"
      "actions";
    overflow: hidden;
  }

  .settings-user-main,
  .settings-user-identity,
  .settings-user-meta,
  .settings-user-meta span {
    min-width: 0;
    max-width: 100%;
  }

  .settings-user-identity strong,
  .settings-user-identity small,
  .settings-user-meta strong,
  .settings-user-meta small {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .settings-user-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-user-card .user-action-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
    justify-content: stretch;
  }

  .settings-user-card .user-action-row .chip {
    justify-content: center;
  }

  .settings-user-card .user-action-row .mini-icon-button {
    width: 100%;
    max-width: none;
  }

  .workspace-chat-panel,
  .workspace-chat-layout,
  .workspace-chat-sidebar,
  .workspace-chat-thread,
  .workspace-chat-webhooks,
  .workspace-channel-list,
  .workspace-message-list,
  .workspace-webhook-list,
  .workspace-channel-card,
  .workspace-channel-main,
  .workspace-channel-context,
  .workspace-empty,
  .workspace-chat-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .workspace-chat-layout {
    overflow: hidden;
  }

  .workspace-chat-sidebar,
  .workspace-chat-thread,
  .workspace-chat-webhooks {
    padding: 12px;
    overflow: hidden;
  }

  .workspace-chat-thread .panel-heading.compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-content: stretch;
    gap: 4px;
  }

  .workspace-chat-thread .panel-heading.compact > span,
  .workspace-chat-thread .panel-heading.compact > small {
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .workspace-channel-context {
    overflow: hidden;
  }

  .workspace-channel-context > span:not(.chip),
  .workspace-channel-meta .chip {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .workspace-message {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 10px;
  }

  .workspace-message header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .workspace-message header strong,
  .workspace-message header small {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .rbac-matrix-scroll {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .rbac-matrix-table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .rbac-matrix-table thead {
    display: none;
  }

  .rbac-matrix-table tbody {
    display: grid;
    gap: 12px;
    width: 100%;
  }

  .rbac-matrix-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 94%, white);
  }

  .rbac-matrix-table th,
  .rbac-matrix-table td {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border-bottom: 0;
    text-align: left;
  }

  .rbac-matrix-table th:first-child,
  .rbac-matrix-table td:first-child {
    position: static;
    min-width: 0;
    max-width: 100%;
    background: transparent;
  }

  .rbac-matrix-table th:nth-child(2),
  .rbac-matrix-table td:nth-child(2) {
    min-width: 0;
    max-width: 100%;
  }

  .rbac-matrix-table .matrix-permission-cell {
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
  }

  .rbac-matrix-table td strong,
  .rbac-matrix-table td small {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .matrix-permission-label {
    display: block;
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
  }
}

@media (max-width: 420px) {
  .ads-channel-badges {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-user-card .user-action-row {
    grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
  }
}

/* Landing media must stay cinematic without leaking outside small PWA viewports. */
@media (max-width: 760px) {
  .landing-hero-media,
  .landing-video-frame,
  .promo-reel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .landing-video-shot {
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
  }

  .promo-reel-glow {
    max-width: 100%;
  }

  .promo-reel-glow-one {
    left: clamp(8px, 4vw, 34px);
  }

  .promo-reel-glow-two {
    right: 0;
    width: min(220px, 58vw);
    height: min(220px, 58vw);
  }
}

/* P0.4 reporting/dashboard rationalization overrides. */
.reporting-tabs {
  overflow-x: auto;
  flex-wrap: nowrap;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.reporting-tabs .settings-tab {
  flex: 0 0 auto;
  white-space: nowrap;
}

.shipdash-report-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 4px 0 2px;
}

.shipdash-report-tabs > .settings-tab,
.shipdash-more-tabs .settings-tab {
  min-height: 38px;
  border-color: color-mix(in srgb, var(--blue) 14%, var(--line));
  background: var(--panel-bg);
}

.shipdash-report-tabs > .settings-tab.active,
.shipdash-more-tabs .settings-tab.active {
  border-color: color-mix(in srgb, var(--warning) 48%, var(--line));
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 8%, var(--panel-bg));
}

.shipdash-more-tabs {
  position: relative;
}

.shipdash-more-tabs > summary {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  background: var(--panel-bg);
}

.shipdash-more-tabs > summary::-webkit-details-marker {
  display: none;
}

.shipdash-more-tabs .ia-tabs {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: min(280px, 80vw);
  max-height: min(420px, 70vh);
  padding: 8px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  background: var(--panel-bg);
}

.shipdash-report-workspace {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.shipdash-period-chip {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-radius: 999px;
  color: var(--blue);
  font-weight: 900;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}

.shipdash-period-chip span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.shipdash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
  min-width: 0;
}

.shipdash-kpi-card {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 118px;
  padding: 15px 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  background: var(--panel-bg);
}

.shipdash-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
}

.shipdash-kpi-card.red::before {
  background: var(--danger);
}

.shipdash-kpi-card.green::before {
  background: var(--green);
}

.shipdash-kpi-card.warning::before {
  background: var(--warning);
}

.shipdash-kpi-card.purple::before {
  background: #7c3aed;
}

.shipdash-kpi-card span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.shipdash-kpi-card strong {
  min-width: 0;
  color: var(--ink);
  font-size: 1.55rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.shipdash-kpi-card small {
  min-width: 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.shipdash-chart-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  min-height: 240px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  background: var(--panel-bg);
}

.shipdash-chart-card > .report-heading {
  align-items: start;
}

.shipdash-bar-list {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.shipdash-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(180px, 1fr) minmax(64px, auto);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.shipdash-bar-row span,
.shipdash-bar-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.shipdash-bar-row strong {
  text-align: right;
}

.shipdash-bar-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.shipdash-bar-track b {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 180ms ease, filter 160ms ease, transform 160ms ease;
}

.shipdash-bar-row {
  outline: none;
}

.shipdash-bar-row:hover .shipdash-bar-track b,
.shipdash-bar-row:focus-visible .shipdash-bar-track b {
  filter: saturate(1.16) brightness(1.04);
  transform: scaleY(1.28);
}

.shipdash-column-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 48px), 1fr));
  gap: 10px;
  align-items: end;
  height: clamp(180px, 22vw, 240px);
  min-height: 180px;
  padding-top: 8px;
  overflow: visible;
}

.shipdash-column {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
  height: 100%;
  outline: none;
}

.shipdash-column b {
  display: block;
  width: 100%;
  height: var(--bar);
  min-height: 8px;
  border-radius: 6px 6px 0 0;
  background: var(--accent, var(--blue));
  transition: height 180ms ease, filter 160ms ease, transform 160ms ease;
  transform-origin: bottom;
}

.shipdash-column:hover b,
.shipdash-column:focus-visible b {
  filter: saturate(1.18) brightness(1.05);
  transform: scaleY(1.04);
}

.shipdash-column small {
  min-width: 0;
  color: var(--muted);
  text-align: center;
  overflow-wrap: anywhere;
  white-space: normal;
}

.shipdash-donut-layout {
  display: grid;
  grid-template-columns: minmax(150px, 240px) minmax(220px, 1fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
}

.shipdash-donut {
  width: min(100%, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset 0 0 0 34px var(--panel-bg);
}

.shipdash-legend {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.shipdash-legend span {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-weight: 800;
  outline: none;
}

.shipdash-legend span:hover,
.shipdash-legend span:focus-visible {
  color: var(--ink);
}

.shipdash-legend i {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.shipdash-legend b {
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}

.shipdash-legend em {
  min-width: 0;
  font-style: normal;
  overflow-wrap: anywhere;
  white-space: normal;
}

.shipdash-line-chart {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(to bottom, transparent 24%, color-mix(in srgb, var(--line) 58%, transparent) 25%, transparent 26%),
    linear-gradient(to bottom, transparent 49%, color-mix(in srgb, var(--line) 58%, transparent) 50%, transparent 51%),
    linear-gradient(to bottom, transparent 74%, color-mix(in srgb, var(--line) 58%, transparent) 75%, transparent 76%);
}

.shipdash-line-chart svg {
  display: block;
  width: 100%;
  height: clamp(170px, 24vw, 260px);
  min-height: 0;
  max-height: 260px;
}

.shipdash-line-chart polyline {
  fill: none;
  stroke: var(--blue);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.shipdash-line-points {
  position: absolute;
  inset: 10px 10px 32px;
  pointer-events: none;
}

.shipdash-line-points span {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid var(--panel-bg);
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 28%, transparent);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  outline: none;
}

.shipdash-line-points span:hover,
.shipdash-line-points span:focus-visible {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 18%, transparent);
}

.shipdash-line-axis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
  gap: 4px;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}

.shipdash-chart-data {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  padding-top: 8px;
}

.shipdash-chart-data > summary {
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.shipdash-chart-data > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 6px;
  margin-top: 8px;
}

.shipdash-chart-data span {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.shipdash-chart-data b,
.shipdash-chart-data strong {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.shipdash-chart-data small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 700;
}

.shipdash-ai-insight-card,
.shipdash-ai-chat-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--panel-bg) 92%, var(--blue) 4%);
}

.shipdash-ai-chat-card {
  scroll-margin-top: 92px;
}

.shipdash-ai-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 14px;
  min-width: 0;
}

.shipdash-ai-grid section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.shipdash-ai-grid strong {
  color: var(--ink);
  font-weight: 900;
}

.shipdash-ai-grid ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.45;
}

.shipdash-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.shipdash-ai-actions .mini-button {
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  color: var(--blue);
  font-weight: 850;
  background: color-mix(in srgb, var(--panel-bg) 88%, var(--blue) 7%);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.shipdash-ai-actions .mini-button:hover,
.shipdash-ai-actions .mini-button:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 52%, var(--line));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--blue) 12%, transparent);
  transform: translateY(-1px);
}

.report-ai-prompt-panel {
  display: grid;
  grid-template-columns: minmax(190px, 0.38fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, transparent), transparent 58%),
    color-mix(in srgb, var(--panel-bg) 94%, var(--surface) 6%);
}

.report-ai-prompt-panel > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.report-ai-prompt-panel strong {
  color: var(--ink);
  font-weight: 900;
}

.report-ai-prompt-panel small {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.report-ai-prompt-panel .shipdash-ai-actions {
  justify-content: flex-start;
}

.report-ai-chat-window {
  max-height: 360px;
  min-height: 150px;
  overflow: auto;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 94%, var(--surface) 6%);
}

.report-ai-chat-window .chat-bubble {
  position: relative;
}

.report-ai-chat-window .chat-bubble::before,
.report-ai-chat-window .chat-bubble::after {
  content: none;
  display: none;
}

.report-ai-chat-window input[type="checkbox"] {
  display: none;
}

.shipdash-ai-chat-card .chat-bubble.assistant {
  border-color: color-mix(in srgb, var(--blue) 14%, var(--line));
  background: var(--panel-bg);
}

.shipdash-ai-chat-card .chat-form {
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 8px;
  background: var(--panel-bg);
}

.shipdash-ai-chat-card .chat-form textarea {
  min-height: 54px;
  resize: vertical;
}

.shipdash-ai-chat-card .chat-form .primary-button {
  min-height: 54px;
}

.tool-launcher-category-row .tool-filter-chip {
  border: 1px solid var(--line);
  cursor: pointer;
}

.tool-launcher-category-row .tool-filter-chip.active {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line));
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 9%, var(--panel-bg));
}

.dashboard-summary-disclosure {
  display: grid;
  gap: 10px;
}

.action-detail-advanced {
  padding: 0;
}

.action-detail-advanced > .modal-section,
.action-detail-advanced > .action-performance-context,
.action-detail-advanced > .action-escalation-context,
.action-detail-advanced > .action-autonomous-context {
  margin: 0 12px 12px;
}

@media (max-width: 760px) {
  body[data-page="supervisor"] .topbar {
    display: none;
  }

  .my-work-compact-header {
    padding: 10px;
  }

  .my-work-command-summary {
    gap: 8px;
    padding: 10px;
  }

  .my-work-command-head {
    display: grid;
    gap: 4px;
  }

  .my-work-command-head h2 {
    font-size: 1rem;
    line-height: 1.18;
  }

  .my-work-command-head small {
    display: none;
  }

  .my-work-command-head > .mini-button {
    display: none;
  }

  .my-work-command-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .my-work-command-metrics span {
    min-height: 48px;
    padding: 7px 5px;
  }

  .my-work-command-metrics small {
    font-size: 0.56rem;
    line-height: 1.1;
  }

  .my-work-command-metrics strong {
    font-size: 0.74rem;
    line-height: 1.15;
  }

  .my-work-command-feed {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .my-work-command-feed article {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 64px;
    padding: 8px;
  }

  .my-work-command-feed article > span {
    width: 30px;
    height: 30px;
  }

  .my-work-command-feed p {
    display: none;
  }

  .my-work-command-feed strong {
    font-size: 0.84rem;
    line-height: 1.18;
  }

  .my-work-command-feed article > .mini-button {
    min-width: 34px;
    width: 34px;
    padding: 0;
  }

  .my-work-command-feed article > .mini-button span:not(.icon) {
    display: none;
  }

  .my-work-now-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .my-work-data-cluster {
    justify-content: flex-start;
    width: 100%;
  }

  .my-work-count-filters {
    justify-content: flex-start;
  }

  .my-work-now-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .my-work-compact-copy h2 {
    font-size: 1.08rem;
  }

  .my-work-filter-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .my-work-filter-row label {
    min-width: 0;
  }

  .my-work-details > summary small {
    display: none;
  }

  .my-work-action-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .my-work-action-summary span {
    min-height: 48px;
    padding: 7px;
  }

  .my-work-action-summary small {
    font-size: 0.66rem;
    line-height: 1.15;
  }

  .my-work-action-summary strong {
    font-size: 1.05rem;
  }

  .reporting-tab-group-heading,
  .supervisor-disclosure > summary,
  .action-detail-advanced > summary,
  .executive-trust-details > summary,
  .reporting-source-details > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .reporting-tabs {
    margin-inline: -2px;
    padding-inline: 2px;
  }

  .reporting-tabs .settings-tab {
    min-height: 38px;
    max-width: min(78vw, 260px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .workspace-guide-card,
  .workspace-onboarding-card,
  .workspace-boundary-card {
    padding: 12px;
  }

  .workspace-link-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .workspace-link-row .mini-button {
    justify-content: center;
    width: 100%;
  }

  .action-plan-filter-panel {
    max-height: 128px;
    overflow-y: auto;
  }

  .supervisor-disclosure-body {
    padding-inline: 8px;
  }

  .staff-dashboard-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .staff-dashboard-heading .primary-button,
  .supervisor-section > .panel-heading .primary-button {
    justify-content: center;
    width: 100%;
  }

  .staff-summary-grid,
  .executive-priority-grid,
  .staff-work-grid,
  .operations-domain-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .executive-trust-details > .business-report-card,
  .reporting-source-details > .business-report-card,
  .executive-trust-details > .report-section-grid {
    margin-inline: 10px;
  }

  .action-summary-bar {
    grid-template-columns: repeat(3, minmax(96px, 1fr));
  }

  .action-stat {
    min-height: 58px;
    padding: 8px;
  }

  .action-stat strong {
    font-size: 1.12rem;
  }

  .business-report-card,
  .supervisor-section,
  .notification-inbox-item,
  .action-card {
    padding: 10px;
  }

  .workspace-guide-grid,
  .workspace-boundary-grid {
    gap: 8px;
  }

  .workspace-guide-item,
  .workspace-boundary-item {
    padding: 8px;
  }
}

@media (max-width: 430px) {
  .my-work-filter-row {
    display: none;
  }

  .my-work-mobile-filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding-top: 8px;
  }

  .my-work-mobile-filter-grid select {
    height: 32px;
  }

  .my-work-details-grid {
    grid-template-columns: 1fr;
  }

  .my-work-count-filter {
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: none;
  }

  .my-work-count-filter small {
    max-width: none;
  }

  .my-work-now-facts {
    grid-template-columns: 1fr;
  }

  .my-work-tabs {
    flex-wrap: nowrap;
    gap: 6px;
    padding-bottom: 4px;
  }

  .my-work-tabs .settings-tab {
    min-height: 34px;
    padding: 0 10px;
  }

  .ai-explain-grid,
  .reporting-hierarchy {
    grid-template-columns: 1fr;
  }

  .reporting-hierarchy {
    display: grid;
  }

  .notification-inbox-tabs .settings-tab {
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.task-workflow-panel {
  display: grid;
  gap: 12px;
}

.task-workflow-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}

.task-workflow-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.task-workflow-form label span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.task-workflow-form input,
.task-workflow-form select,
.task-workflow-form textarea {
  min-width: 0;
}

.task-workflow-form textarea,
.task-workflow-form button {
  grid-column: 1 / -1;
}

.task-workflow-form.compact {
  grid-template-columns: minmax(160px, 1fr) minmax(120px, 0.75fr) auto;
  align-items: end;
}

.task-workflow-form.compact button {
  grid-column: auto;
}

.task-workflow-mini-grid {
  display: grid;
  gap: 10px;
}

.task-audit-list {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 18px;
}

.task-audit-list li span {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
}

@media (max-width: 720px) {
  .task-workflow-form,
  .task-workflow-form.compact {
    grid-template-columns: 1fr;
  }

  .task-workflow-form.compact button {
    grid-column: 1;
  }
}

@media (max-width: 1180px) {
  body[data-page="dashboard"] .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body[data-page="dashboard"] .metric-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="dashboard"] .operational-inbox-list {
    max-height: 260px;
  }
}

@media (max-width: 640px) {
  .shipdash-report-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 5px;
  }

  .shipdash-report-tabs > .settings-tab {
    flex: 0 0 auto;
  }

  .shipdash-more-tabs {
    flex: 0 0 auto;
  }

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

  .shipdash-kpi-card {
    min-height: 96px;
    padding: 12px;
  }

  .shipdash-kpi-card strong {
    font-size: 1.24rem;
  }

  .shipdash-chart-card {
    min-height: 0;
    padding: 12px;
  }

  .shipdash-bar-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .shipdash-bar-track {
    width: 100%;
  }

  .shipdash-bar-row strong {
    grid-column: 1;
    text-align: left;
  }

  .shipdash-donut-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .shipdash-ai-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-ai-prompt-panel,
  .shipdash-ai-chat-card .chat-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .shipdash-ai-actions .mini-button {
    flex: 1 1 min(100%, 150px);
  }

  .shipdash-ai-chat-card .chat-form .primary-button {
    width: 100%;
  }

  .shipdash-legend {
    width: 100%;
  }

  .my-work-tabs,
  .communication-tabs,
  .settings-tabs {
    max-width: 100%;
    overflow-x: auto;
  }

  .responsive-icon-only {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    padding: 0;
  }

  .responsive-icon-only > span:not(.sr-only) {
    display: none;
  }

  .reporting-header-actions .responsive-primary-action {
    flex: 1 1 100%;
    justify-content: center;
    width: 100%;
  }

  .settings-card-heading {
    align-items: flex-start;
  }

  .settings-card-heading > div {
    flex: 1 1 auto;
  }

  .settings-card-heading .queue-header-refresh {
    margin-left: auto;
  }

  .my-work-priority-item,
  .reviewer-queue-row,
  .approval-queue-row,
  .communication-decision-thread {
    grid-template-columns: minmax(0, 1fr);
  }

  .my-work-priority-item .mini-button,
  .reviewer-queue-row .mini-button,
  .approval-queue-row .mini-button {
    width: 100%;
    justify-content: center;
  }

  .reviewer-queue-row > .mini-button:not(.primary-mini),
  .approval-queue-row > .mini-button:not(.primary-mini) {
    justify-self: start;
    width: max-content;
    max-width: 100%;
  }

  .reviewer-queue-row .user-action-row.compact,
  .approval-queue-row .user-action-row.compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    width: 100%;
  }

  .approval-queue-row .user-action-row.compact .primary-mini {
    grid-column: 1 / -1;
  }

  .reviewer-queue-row .user-action-row.compact .mini-button,
  .approval-queue-row .user-action-row.compact .mini-button {
    width: 100%;
    max-width: none;
  }

  .tool-category-grid {
    grid-template-columns: 1fr;
  }

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

  .command-center-identity-grid,
  .reporting-default-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operational-inbox-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .operational-inbox-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: none;
    justify-content: stretch;
  }

  .operational-inbox-actions .mini-button {
    justify-content: center;
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 360px) {
  .command-center-identity-grid,
  .reporting-default-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Landing promo reel refresh. */
.landing-video-frame {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.76), transparent 30%),
    radial-gradient(circle at 80% 18%, rgba(20, 184, 166, 0.28), transparent 26%),
    linear-gradient(135deg, rgba(248, 250, 252, 0.94), rgba(219, 234, 254, 0.76) 40%, rgba(15, 23, 42, 0.78));
}

.landing-video-frame::after {
  z-index: 4;
  opacity: 0.38;
  animation-duration: 9s;
}

.landing-video-shade {
  background:
    radial-gradient(circle at 28% 72%, rgba(255, 255, 255, 0.46), transparent 30%),
    radial-gradient(circle at 78% 48%, rgba(37, 99, 235, 0.2), transparent 26%),
    linear-gradient(90deg, rgba(15, 23, 42, 0.16), rgba(255, 255, 255, 0.06) 38%, rgba(15, 23, 42, 0.34));
}

.landing-video-shot {
  z-index: 0;
  filter: saturate(1.06) contrast(1.04);
  opacity: 0.76;
  mix-blend-mode: normal;
  transform-origin: center left;
  animation: landing-video-pan 9s ease-in-out infinite;
}

.promo-reel {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: var(--ink);
  pointer-events: none;
}

.promo-reel-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(4px);
  opacity: 0.72;
}

.promo-reel-glow-one {
  top: 54px;
  left: 28px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0));
  animation: landing-promo-glow 9s ease-in-out infinite;
}

.promo-reel-glow-two {
  right: -50px;
  bottom: 84px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.24), rgba(236, 72, 153, 0));
  animation: landing-promo-glow 9s ease-in-out infinite reverse;
}

.promo-screen {
  position: absolute;
  top: 118px;
  right: clamp(24px, 5vw, 52px);
  display: grid;
  gap: 12px;
  width: min(500px, 56%);
  min-height: 312px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.86));
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(16px);
  transform: perspective(900px) rotateY(-7deg) rotateX(2deg);
  transform-origin: right center;
  animation: landing-promo-screen 9s ease-in-out infinite;
}

.promo-screen-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.promo-screen-top span {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

.promo-screen-top strong {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.2;
}

.promo-screen > small,
.promo-flow span,
.promo-action-line span,
.promo-live-tile small,
.promo-person-note small {
  color: var(--muted);
  line-height: 1.35;
}

.promo-chart {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  min-height: 116px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.06), transparent);
}

.promo-chart i {
  display: block;
  height: var(--height);
  min-height: 24px;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, #2563eb, #14b8a6 72%, #f59e0b);
  box-shadow: 0 14px 24px rgba(20, 184, 166, 0.18);
  transform-origin: bottom;
  animation: landing-promo-bar 4.5s ease-in-out infinite;
  animation-delay: var(--delay);
}

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

.promo-flow span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 950;
}

.promo-flow span:nth-child(2) {
  background: #dbeafe;
  color: #2563eb;
}

.promo-flow span:nth-child(3) {
  background: #dcfce7;
  color: #15803d;
}

.promo-action-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-left: 4px solid #14b8a6;
  border-radius: 8px;
  background: rgba(236, 253, 245, 0.82);
}

.promo-action-line b {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #14b8a6;
  box-shadow: 0 0 0 8px rgba(20, 184, 166, 0.14);
}

.promo-live-tile,
.promo-person-note {
  position: absolute;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 20px 46px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(16px);
}

.promo-live-tile {
  top: 130px;
  left: clamp(24px, 5vw, 64px);
  width: min(250px, 34%);
  padding: 12px;
  animation: landing-promo-tile 9s ease-in-out infinite;
}

.promo-person-note {
  bottom: 136px;
  left: clamp(34px, 7vw, 92px);
  width: min(280px, 35%);
  padding: 13px;
  background: rgba(15, 23, 42, 0.74);
  color: #fff;
  animation: landing-promo-note 9s ease-in-out infinite;
}

.promo-live-tile strong,
.promo-person-note strong {
  color: var(--ink);
  line-height: 1.22;
}

.promo-person-note strong {
  color: #fff;
}

.promo-reel-progress {
  position: absolute;
  right: clamp(30px, 6vw, 68px);
  bottom: 116px;
  left: clamp(34px, 6vw, 76px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.promo-reel-progress span {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.46);
}

.promo-reel-progress span::after {
  display: block;
  width: 55%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #14b8a6, #f59e0b);
  content: "";
  animation: landing-promo-progress 9s ease-in-out infinite;
}

.motion-card-one {
  top: 30px;
  right: 30px;
  bottom: auto;
}

@keyframes landing-promo-glow {
  0%, 100% { opacity: 0.58; transform: scale(0.96); }
  50% { opacity: 0.9; transform: scale(1.08); }
}

@keyframes landing-promo-screen {
  0%, 100% { transform: perspective(900px) rotateY(-7deg) rotateX(2deg) translateY(0); }
  50% { transform: perspective(900px) rotateY(-3deg) rotateX(1deg) translateY(-10px); }
}

@keyframes landing-promo-bar {
  0%, 100% { transform: scaleY(0.76); }
  45%, 62% { transform: scaleY(1); }
}

@keyframes landing-promo-tile {
  0% { opacity: 0; transform: translate3d(-18px, 10px, 0); }
  18%, 72% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0.86; transform: translate3d(0, -8px, 0); }
}

@keyframes landing-promo-note {
  0%, 36% { opacity: 0; transform: translate3d(0, 14px, 0); }
  48%, 86% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0.88; transform: translate3d(0, -6px, 0); }
}

@keyframes landing-promo-progress {
  0% { transform: translateX(-110%); }
  50% { transform: translateX(20%); }
  100% { transform: translateX(180%); }
}

@media (max-width: 760px) {
  .landing-hero-media,
  .landing-video-frame,
  .promo-reel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .landing-video-shot {
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
  }

  .promo-screen {
    top: 138px;
    right: 18px;
    left: 18px;
    width: auto;
    min-height: 242px;
    padding: 14px;
    transform: none;
  }

  .promo-chart {
    min-height: 82px;
    padding: 10px;
  }

  .promo-action-line,
  .promo-live-tile,
  .promo-person-note,
  .promo-reel-progress,
  .motion-card {
    display: none;
  }

  .hero-stat-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .hero-stat-row article {
    min-height: 58px;
    padding: 8px;
  }

  .hero-stat-row small {
    font-size: 0.58rem;
    line-height: 1.12;
  }

  .hero-stat-row strong {
    font-size: 1.05rem;
  }
}

/* Final landing cascade guard for the Fazten AI public page. */
.commercial-login .landing-hero {
  grid-template-columns: minmax(360px, 0.76fr) minmax(560px, 1.24fr);
}

.commercial-login .landing-video-frame {
  overflow: hidden;
  border-color: rgba(37, 99, 235, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.84) 48%, rgba(15, 23, 42, 0.86)),
    url("/assets/onestop-dashboard.png") center / cover no-repeat;
}

.commercial-login .promo-screen {
  top: 94px;
  right: clamp(24px, 4vw, 50px);
  width: min(610px, 64%);
  min-height: 350px;
}

.commercial-login .landing-hero-copy h1 {
  font-size: clamp(3rem, 5.8vw, 6.25rem);
}

.commercial-login .landing-hero-points {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1080px) {
  .commercial-login .landing-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .commercial-login .landing-hero-copy h1 {
    font-size: 2.62rem;
  }

  .commercial-login .landing-hero-points,
  .commercial-login .landing-chip-band {
    grid-template-columns: 1fr;
  }

  .commercial-login .promo-screen {
    top: 150px;
    right: 14px;
    left: 14px;
    width: auto;
    min-height: 0;
    gap: 8px;
    padding: 12px;
  }

  .commercial-login .promo-dashboard-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commercial-login .promo-chart {
    min-height: 68px;
  }

  .commercial-login .promo-flow {
    display: none;
  }
}