:root {
  --bg: #f2efe8;
  --bg-2: #ebe7df;
  --panel: rgba(255, 251, 245, 0.88);
  --panel-strong: #fffaf3;
  --line: rgba(75, 57, 41, 0.12);
  --line-strong: rgba(75, 57, 41, 0.2);
  --text: #211b17;
  --muted: #6a5d53;
  --gold: #be8a2f;
  --gold-soft: rgba(190, 138, 47, 0.12);
  --copper: #a25c36;
  --forest: #2f6a54;
  --forest-soft: rgba(47, 106, 84, 0.12);
  --rose: #af4f47;
  --rose-soft: rgba(175, 79, 71, 0.12);
  --ink: #171616;
  --shadow: 0 24px 60px rgba(37, 24, 16, 0.08);
  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --surface: var(--panel-strong);
  --surface-alt: #efe9df;
  --text-muted: var(--muted);
  --border: var(--line);
  --accent: #2f6a54;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(190, 138, 47, 0.12), transparent 28%),
    radial-gradient(circle at bottom right, rgba(47, 106, 84, 0.12), transparent 22%),
    linear-gradient(180deg, var(--bg) 0%, #f5f1eb 100%);
  color: var(--text);
  font-family: "Segoe UI", "Arial", sans-serif;
}

body {
  min-height: 100vh;
}

body.auth-locked .shell {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}

body.landing-mode {
  background:
    linear-gradient(145deg, rgba(23, 22, 22, 0.94), rgba(23, 22, 22, 0.82)),
    radial-gradient(circle at 82% 18%, rgba(47, 106, 84, 0.58), transparent 31%),
    linear-gradient(180deg, #f8f4ec 0%, #d7e6df 100%);
}

body.landing-mode .shell,
body.landing-mode .support-admin-btn,
body.landing-mode .support-admin-panel,
body.landing-mode .system-alerts-panel {
  display: none;
}

/* Sub-pages (/product, /ai, /pricing, /about): light background, dark nav. */
body.lp-sub .landing-page {
  background: #fffaf3;
  color: #171616;
}

body.lp-sub .landing-nav {
  max-width: none;
  background: rgba(23, 22, 22, 0.94);
}

body.lp-sub .landing-main {
  min-height: calc(100vh - 78px);
}

/* Anchor links: smooth scroll and offset so targets are not hidden under the fixed nav. */
html { scroll-behavior: smooth; }
.landing-main [id] { scroll-margin-top: 84px; }

.landing-page {
  overflow-x: hidden;
  min-height: 100vh;
  color: #f8f4ec;
  background:
    linear-gradient(135deg, rgba(19, 20, 19, 0.94), rgba(19, 20, 19, 0.72)),
    radial-gradient(circle at 74% 18%, rgba(47, 106, 84, 0.68), transparent 28%),
    radial-gradient(circle at 26% 88%, rgba(190, 138, 47, 0.34), transparent 24%),
    #171616;
}

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px;
  background: rgba(23, 22, 22, 0.7);
  backdrop-filter: blur(18px);
}

.landing-brand,
.landing-nav-links,
.landing-actions,
.landing-metrics,
.landing-agent-list div,
.landing-proof-grid div,
.landing-section-actions {
  display: flex;
  align-items: center;
}

.landing-brand {
  gap: 12px;
  color: #fffaf3;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.landing-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #fffaf3, #be8a2f);
  color: #171616;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.landing-nav-links {
  gap: 22px;
}

.landing-nav-links a,
.landing-secondary {
  color: rgba(255, 250, 243, 0.76);
  text-decoration: none;
}

.landing-nav-links a:hover,
.landing-secondary:hover {
  color: #fffaf3;
}

/* Mobile hamburger + slide-in drawer */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 250, 243, 0.22);
  border-radius: 11px;
  background: rgba(255, 250, 243, 0.06);
  cursor: pointer;
}
.nav-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fffaf3; transition: transform 0.25s ease, opacity 0.2s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(10, 9, 8, 0.55); backdrop-filter: blur(2px); }
.nav-drawer-backdrop[hidden] { display: none; }
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 201;
  width: min(320px, 84vw);
  display: flex;
  flex-direction: column;
  padding: 18px 18px 24px;
  background: #14130f;
  border-left: 1px solid rgba(255, 250, 243, 0.1);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s ease;
}
.nav-drawer[hidden] { display: none; }
.nav-drawer.open { transform: translateX(0); }
.nav-drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.nav-drawer-title { color: #fffaf3; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 13px; }
.nav-drawer-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 250, 243, 0.2); background: transparent; color: #fffaf3; font-size: 22px; line-height: 1; cursor: pointer; }
.nav-drawer-links { display: flex; flex-direction: column; }
.nav-drawer-label { margin: 14px 0 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8077; }
.nav-drawer-links a { padding: 11px 6px; color: rgba(255, 250, 243, 0.86); text-decoration: none; font-weight: 600; border-radius: 8px; }
.nav-drawer-links a:hover, .nav-drawer-links a:active { background: rgba(255, 250, 243, 0.06); color: #fffaf3; }
.nav-drawer-actions { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 250, 243, 0.12); }
.nav-drawer-actions .landing-secondary { text-align: center; padding: 12px; border: 1px solid rgba(255, 250, 243, 0.2); border-radius: 10px; color: rgba(255, 250, 243, 0.86); }
.nav-drawer-btn { width: 100%; }
body.nav-drawer-open { overflow: hidden; }

/* Modules dropdown (native <details>) */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  line-height: 1;
  color: rgba(255, 250, 243, 0.76);
  font: inherit;
  user-select: none;
}
.nav-dropdown-toggle::-webkit-details-marker { display: none; }
.nav-dropdown-toggle:hover { color: #fffaf3; }
.nav-dropdown-caret {
  font-size: 10px;
  transition: transform 0.18s ease;
}
.nav-dropdown[open] .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 220px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(23, 22, 22, 0.1);
  background: #fffaf3;
  box-shadow: 0 20px 48px rgba(18, 25, 39, 0.18);
}
.nav-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: #2a2622 !important;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover {
  background: #f1ece2;
  color: #0c111d !important;
}

.landing-nav-cta,
.landing-login,
.landing-primary,
.landing-secondary,
.landing-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 250, 243, 0.18);
  border-radius: 8px;
  padding: 12px 16px;
  font-weight: 800;
  text-decoration: none;
}

.landing-login {
  background: transparent;
  color: rgba(255, 250, 243, 0.82);
}

.landing-nav-cta,
.landing-primary {
  background: #fffaf3;
  color: #171616;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
}

.landing-secondary {
  background: rgba(255, 250, 243, 0.08);
}

.landing-secondary.light {
  background: rgba(255, 255, 255, 0.16);
  color: #fffaf3;
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.88fr);
  gap: 52px;
  align-items: center;
  min-width: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding: 74px 24px 78px;
  min-height: calc(100vh - 78px);
}

.landing-kicker,
.landing-section-head span,
.landing-band span,
.landing-final span {
  color: #dbb469;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.landing-hero h1 {
  margin: 16px 0;
  max-width: 720px;
  color: #fffaf3;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 0.9;
  letter-spacing: 0;
}

.landing-lede {
  max-width: 640px;
  margin: 0;
  color: rgba(255, 250, 243, 0.78);
  font-size: 21px;
  line-height: 1.55;
}

.landing-actions {
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.landing-beta-note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted, #61718b);
}

.landing-primary {
  border-color: transparent;
}

.landing-primary.dark {
  background: #171616;
  color: #fffaf3;
}

.landing-secondary.dark {
  border-color: rgba(23, 22, 22, 0.16);
  background: #ffffff;
  color: #171616;
}

.landing-tertiary {
  border-color: transparent;
  background: transparent;
  color: #2f6a54;
  box-shadow: none;
}

.landing-tertiary.light {
  color: #dbb469;
}

.landing-section-actions {
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.landing-metrics {
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 42px;
}

.landing-metrics div {
  min-width: 150px;
  padding: 16px;
  border: 1px solid rgba(255, 250, 243, 0.14);
  border-radius: 8px;
  background: rgba(255, 250, 243, 0.07);
}

.landing-metrics strong,
.landing-metrics span {
  display: block;
}

.landing-metrics strong {
  color: #fffaf3;
  font-size: 24px;
}

.landing-metrics span {
  margin-top: 4px;
  color: rgba(255, 250, 243, 0.64);
  font-size: 13px;
}

.landing-product {
  min-width: 0;
  border: 1px solid rgba(255, 250, 243, 0.15);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 250, 243, 0.96), rgba(237, 243, 239, 0.94)),
    #fffaf3;
  color: #171616;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
}

.product-topbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(23, 22, 22, 0.08);
  background: #171616;
  color: #fffaf3;
}

.product-topbar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dbb469;
}

.product-topbar span:nth-child(2) {
  background: #2f6a54;
}

.product-topbar span:nth-child(3) {
  background: #af4f47;
}

.product-topbar strong {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.product-panel {
  min-height: 132px;
  padding: 18px;
  border: 1px solid rgba(23, 22, 22, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.product-panel-wide,
.product-panel-accent {
  grid-column: 1 / -1;
}

.product-panel small,
.product-panel em {
  display: block;
  color: #6a5d53;
  font-size: 12px;
  font-style: normal;
}

.product-panel strong {
  display: block;
  margin-top: 8px;
  color: #171616;
  font-size: 22px;
  line-height: 1.2;
}

.product-panel-accent {
  background: #dcebe4;
}

.product-bars {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.product-bars span {
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f6a54, #be8a2f);
}

.landing-main {
  background: #fffaf3;
  color: #171616;
}

.landing-section,
.landing-band,
.landing-workflow,
.landing-final,
.landing-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 84px 24px;
}

.landing-section-head {
  max-width: 720px;
  margin-bottom: 28px;
}

.landing-section h2,
.landing-band h2,
.landing-final h2 {
  margin: 10px 0 0;
  color: #171616;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1;
  letter-spacing: 0;
}

.landing-feature-grid,
.landing-proof-grid,
.landing-steps,
.landing-security-grid,
.landing-enterprise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.landing-feature-grid article,
.landing-proof-grid div,
.landing-steps div,
.landing-security-grid div,
.landing-enterprise-grid div {
  min-height: 190px;
  padding: 22px;
  border: 1px solid rgba(23, 22, 22, 0.1);
  border-radius: 8px;
  background: #ffffff;
}

.landing-feature-grid strong,
.landing-proof-grid strong,
.landing-agent-list strong,
.landing-steps strong,
.landing-security-grid strong,
.landing-enterprise-grid strong,
.pricing-card h3,
.landing-solutions-grid h3 {
  display: block;
  font-size: 18px;
}

.landing-feature-grid p,
.landing-band p,
.landing-proof-grid span,
.landing-agent-list span,
.landing-steps p,
.landing-security-grid p,
.landing-enterprise-grid p,
.landing-final p {
  color: #6a5d53;
  line-height: 1.55;
}

.landing-section-head p {
  max-width: 720px;
  color: #6a5d53;
  line-height: 1.55;
}

.landing-motion {
  border-bottom: 1px solid rgba(23, 22, 22, 0.1);
}

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

.landing-motion-grid article {
  overflow: hidden;
  border: 1px solid rgba(23, 22, 22, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(23, 22, 22, 0.08);
}

.landing-motion-grid article { display: flex; flex-direction: column; }
.landing-motion-grid article > div:last-child { flex: 1; }
.landing-motion-grid .mock-window {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid rgba(23, 22, 22, 0.1);
}
.landing-motion-grid .mock-window:hover { transform: none; box-shadow: none; border-bottom: 1px solid rgba(23, 22, 22, 0.1); }
.landing-motion-grid .mock-body { padding: 16px; gap: 10px; }

.landing-motion-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid rgba(23, 22, 22, 0.1);
  background: #111513;
}

.landing-motion-grid div {
  padding: 20px;
}

.landing-motion-grid strong {
  display: block;
  color: #171616;
  font-size: 20px;
  line-height: 1.25;
}

.landing-motion-grid p {
  margin: 8px 0 0;
  color: #6a5d53;
  font-size: 15px;
  line-height: 1.5;
}

.landing-solutions {
  border-top: 1px solid rgba(23, 22, 22, 0.1);
}

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

.landing-solutions-grid article,
.pricing-card {
  padding: 28px;
  border: 1px solid rgba(23, 22, 22, 0.1);
  border-radius: 8px;
  background: #ffffff;
}

.landing-solutions-grid article:nth-child(2),
.pricing-card-enterprise {
  background:
    linear-gradient(135deg, rgba(23, 22, 22, 0.96), rgba(47, 106, 84, 0.86)),
    #171616;
  color: #fffaf3;
}

.landing-solutions-grid article:nth-child(2) p,
.landing-solutions-grid article:nth-child(2) li,
.pricing-card-enterprise p,
.pricing-card-enterprise li {
  color: rgba(255, 250, 243, 0.74);
}

.landing-solutions-grid h3,
.pricing-card h3 {
  margin: 18px 0 10px;
  font-size: 30px;
  line-height: 1.1;
}

.landing-solutions-grid p,
.pricing-card p {
  color: #6a5d53;
  line-height: 1.55;
}

.landing-solutions-grid ul,
.pricing-card ul {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding-left: 18px;
}

.landing-solutions-grid li,
.pricing-card li {
  color: #5c5047;
  line-height: 1.45;
}

.landing-plan-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  background: rgba(47, 106, 84, 0.12);
  color: #2f6a54;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.landing-plan-tag.enterprise {
  background: rgba(255, 250, 243, 0.12);
  color: #dbb469;
}

.landing-workflow {
  border-top: 1px solid rgba(23, 22, 22, 0.1);
}

.landing-steps div {
  background:
    linear-gradient(180deg, rgba(237, 243, 239, 0.9), rgba(255, 255, 255, 0.98)),
    #ffffff;
}

.landing-steps span {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 28px;
  border-radius: 8px;
  background: #171616;
  color: #fffaf3;
  font-weight: 900;
}

.landing-band {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
  gap: 42px;
  align-items: start;
  border-top: 1px solid rgba(23, 22, 22, 0.1);
  border-bottom: 1px solid rgba(23, 22, 22, 0.1);
}

.landing-agent-list {
  display: grid;
  gap: 12px;
}

.landing-agent-list div {
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(23, 22, 22, 0.1);
  border-radius: 8px;
  background: #edf3ef;
}

.landing-agent-list span {
  max-width: 260px;
  text-align: right;
}

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

.landing-proof-grid div {
  display: block;
  min-height: 150px;
}

.landing-security {
  border-bottom: 1px solid rgba(23, 22, 22, 0.1);
}

.landing-security-grid div {
  min-height: 170px;
  background: #f6f1e8;
}

.landing-enterprise {
  background:
    linear-gradient(180deg, #fffaf3, #f4efe6);
}

/* Alternating tint for the stacked per-domain sections, for visual rhythm. */
.landing-alt {
  background: linear-gradient(180deg, #fbfaf7, #f6f3ec);
  border-top: 1px solid rgba(23, 22, 22, 0.06);
  border-bottom: 1px solid rgba(23, 22, 22, 0.06);
}

/* Per-domain preview stats (reuses .product-panel / .product-bars). */
.domain-visual {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0 6px;
}
.domain-visual .product-panel {
  background: rgba(255, 255, 255, 0.85);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.domain-visual .product-panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(18, 25, 39, 0.1);
}
.domain-visual .product-bars span {
  transform-origin: left center;
  animation: domainBarGrow 0.7s ease both;
}
@keyframes domainBarGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .domain-visual .product-bars span { animation: none; }
}
@media (max-width: 720px) {
  .domain-visual { grid-template-columns: 1fr; }
}

/* ===== Premium per-domain spotlights ===== */
.domain-lead {
  max-width: 760px;
  margin: 0 auto;
  padding: 78px 24px 6px;
  text-align: center;
}
.domain-lead span {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 700;
  color: #2f6a54;
}
.domain-lead h2 {
  margin: 14px 0 12px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #171616;
}
.domain-lead p {
  margin: 0;
  color: #5f5347;
  font-size: 17px;
  line-height: 1.6;
}

.landing-spotlight {
  border-top: 1px solid rgba(23, 22, 22, 0.07);
}
.spotlight {
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
  padding: 66px 32px;
}
.spotlight.reverse .spotlight-copy { order: 2; }
.spotlight.reverse .spotlight-mock { order: 1; }

.spotlight-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 700;
  color: #2f6a54;
}
.spotlight-copy h3 {
  margin: 14px 0 14px;
  font-size: clamp(25px, 3.2vw, 33px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: #171616;
}
.spotlight-copy > p {
  margin: 0;
  color: #5f5347;
  font-size: 16.5px;
  line-height: 1.6;
}
.spotlight-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}
.spotlight-list li {
  position: relative;
  padding-left: 30px;
  color: #2a2622;
  font-size: 15px;
  line-height: 1.45;
}
.spotlight-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #2f6a54, #3f8e72);
}

.spotlight-mock { position: relative; }
.spotlight-mock::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  background: radial-gradient(58% 58% at 50% 32%, rgba(47, 106, 84, 0.18), rgba(190, 138, 47, 0.08) 55%, transparent 76%);
  filter: blur(8px);
  z-index: 0;
}
.mock-window {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  border: 1px solid rgba(23, 22, 22, 0.1);
  background: #fff;
  box-shadow: 0 30px 60px rgba(18, 25, 39, 0.16);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.mock-window:hover {
  transform: translateY(-4px);
  box-shadow: 0 38px 72px rgba(18, 25, 39, 0.2);
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #faf8f4;
  border-bottom: 1px solid rgba(23, 22, 22, 0.07);
}
.mock-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dcd5c8;
}
.mock-bar i:nth-child(1) { background: #e0695a; }
.mock-bar i:nth-child(2) { background: #e3b24a; }
.mock-bar i:nth-child(3) { background: #54ad7e; }
.mock-bar em {
  margin-left: 6px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  color: #6a5d53;
}
.mock-body {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.mk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mk-kpis.two { grid-template-columns: repeat(2, 1fr); }
.mk-kpis > div {
  padding: 12px;
  border: 1px solid rgba(23, 22, 22, 0.08);
  border-radius: 11px;
  background: #fbfaf7;
}
.mk-kpis span { display: block; font-size: 11.5px; color: #8a7d6f; font-weight: 600; }
.mk-kpis strong { display: block; margin-top: 3px; font-size: 20px; color: #171616; letter-spacing: -0.01em; }

.mk-list { display: grid; gap: 8px; }
.mk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(23, 22, 22, 0.08);
  border-radius: 11px;
  background: #fff;
  font-size: 13.5px;
  color: #2a2622;
}
.mk-item .mk-name { font-weight: 700; }
.mk-item .mk-val { margin-left: auto; color: #6a5d53; font-weight: 700; }
.mk-pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.mk-pill.won { background: #dcebe4; color: #1f6a4f; }
.mk-pill.warm { background: #fdeccd; color: #9a6a16; }
.mk-pill.new { background: #e7eefc; color: #2f5bbd; }
.mk-pill.blocked { background: #fbe1dc; color: #a8412f; }

.mk-prog { flex: 1; height: 7px; border-radius: 999px; background: #eee7da; overflow: hidden; }
.mk-prog span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2f6a54, #be8a2f); }

.mk-funnel { display: grid; gap: 11px; }
.mk-funnel > div { display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: 10px; }
.mk-funnel label { font-size: 12.5px; color: #6a5d53; font-weight: 600; }
.mk-funnel .mk-track { height: 14px; border-radius: 7px; background: #eee7da; overflow: hidden; }
.mk-funnel .mk-track span { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #2f6a54, #3f8e72); }
.mk-funnel b { font-size: 13px; color: #171616; }

.mk-chart svg { width: 100%; height: auto; display: block; }

.mk-rank { display: grid; gap: 9px; }
.mk-rank > div { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #2a2622; }
.mk-rank .mk-kw { font-weight: 600; }
.mk-rank .mk-pos { margin-left: auto; font-weight: 700; color: #171616; }
.mk-rank .mk-up { color: #1f6a4f; font-weight: 700; font-size: 12px; }

.mk-people { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.mk-donut { position: relative; width: 108px; height: 108px; }
.mk-donut svg { transform: rotate(-90deg); width: 108px; height: 108px; }
.mk-donut-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.mk-donut-label strong { font-size: 22px; color: #171616; }
.mk-donut-label span { font-size: 11px; color: #8a7d6f; }
.mk-util { display: grid; gap: 10px; }
.mk-util > div { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 10px; font-size: 12.5px; color: #6a5d53; }
.mk-util .mk-track { height: 8px; border-radius: 999px; background: #eee7da; overflow: hidden; }
.mk-util .mk-track span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2f6a54, #be8a2f); }

.mk-steps { display: grid; gap: 0; }
.mk-step { position: relative; padding: 0 0 18px 30px; }
.mk-step:last-child { padding-bottom: 0; }
.mk-step::before { content: ""; position: absolute; left: 9px; top: 18px; bottom: -2px; width: 2px; background: #e3dccd; }
.mk-step:last-child::before { display: none; }
.mk-node { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #2f6a54; }
.mk-step.done .mk-node { background: #2f6a54; }
.mk-step.reply .mk-node { background: #be8a2f; border-color: #be8a2f; }
.mk-step strong { display: block; font-size: 13.5px; color: #171616; }
.mk-step em { font-style: normal; font-size: 11.5px; color: #8a7d6f; }

.mk-avatars { display: flex; }
.mk-avatars span { width: 30px; height: 30px; border-radius: 50%; margin-left: -8px; border: 2px solid #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.mk-avatars span:first-child { margin-left: 0; }

@media (max-width: 900px) {
  .spotlight { grid-template-columns: 1fr; gap: 34px; padding: 46px 20px; }
  .spotlight.reverse .spotlight-copy { order: 1; }
  .spotlight.reverse .spotlight-mock { order: 2; }
}

/* ===== AI agents showcase ===== */
.landing-agents {
  max-width: 1180px;
  margin: 0 auto;
  padding: 84px 24px;
  border-top: 1px solid rgba(23, 22, 22, 0.07);
}
.agents-head { text-align: center; margin: 0 auto; }
.agent-orchestrator { display: flex; justify-content: center; margin: 14px 0 6px; }
.orch-core {
  position: relative;
  text-align: center;
  padding: 20px 32px;
  border-radius: 18px;
  background: linear-gradient(135deg, #16302a, #235040);
  color: #fff;
  box-shadow: 0 18px 40px rgba(31, 74, 60, 0.32);
  z-index: 1;
}
.orch-core {
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.orch-core:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px rgba(31, 74, 60, 0.42);
}
.orch-core strong { display: block; font-size: 17px; letter-spacing: -0.01em; }
.agents-hint {
  text-align: center;
  margin: 26px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #8a7d6f;
}
.landing-agents { position: relative; }
.agents-head, .agent-orchestrator, .agents-hint, .agent-grid { position: relative; z-index: 1; }
.agent-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.agent-wires .wire-base { fill: none; stroke: rgba(47, 106, 84, 0.22); stroke-width: 1.5; }
.agent-wires .wire-pulse { fill: none; stroke: #2f6a54; stroke-width: 2.6; stroke-linecap: round; }
.agent-wires .wire-pulse path { animation: wireFlow 2.6s linear infinite; }
@keyframes wireFlow {
  from { stroke-dashoffset: var(--len, 600); }
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-wires .wire-pulse { display: none; }
}
@media (max-width: 720px) {
  .agent-wires { display: none; }
}

/* ===== AI Governance interactive autonomy ladder ===== */
.gov-widget { max-width: 720px; margin: 0 auto 36px; }
.gov-levels {
  display: flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(23, 22, 22, 0.1);
  border-radius: 14px;
  background: #faf8f4;
}
.gov-level {
  flex: 1;
  padding: 11px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #6a5d53;
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.gov-level:hover { color: #171616; }
.gov-level.is-active {
  background: linear-gradient(135deg, #16302a, #235040);
  color: #fff;
  box-shadow: 0 8px 18px rgba(31, 74, 60, 0.28);
}
.gov-bar { height: 6px; border-radius: 999px; background: #eee7da; margin: 14px 0 20px; overflow: hidden; }
.gov-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2f6a54, #be8a2f); transition: width 0.35s ease; }
.gov-panel { text-align: center; }
.gov-desc { margin: 0 0 16px; color: #3f382f; font-size: 16px; line-height: 1.6; min-height: 52px; }
.gov-caps { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.gov-cap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(23, 22, 22, 0.12);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: #9a9088;
  transition: all 0.2s ease;
}
.gov-cap::before { content: "○"; font-size: 11px; }
.gov-cap.on { color: #1f6a4f; border-color: rgba(47, 106, 84, 0.35); background: #eef6f1; }
.gov-cap.on::before { content: "✓"; }
.gov-cap.gated { color: #9a6a16; border-color: rgba(190, 138, 47, 0.4); background: #fdf3df; }
.gov-cap.gated::before { content: "⏳"; }
.gov-human { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #5f5347; }

/* Clickable Proof (Built for operators) cards */
.landing-proof-grid div { position: relative; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.landing-proof-grid div:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(18, 25, 39, 0.08); border-color: rgba(47, 106, 84, 0.3); }
.landing-proof-grid div::after { content: "↗"; position: absolute; top: 16px; right: 18px; color: #b9b0a2; font-size: 14px; opacity: 0; transition: opacity 0.2s ease; }
.landing-proof-grid div:hover::after, .landing-proof-grid div:focus-visible::after { opacity: 1; }

/* Clickable Enterprise service cards */
.landing-enterprise-grid div { position: relative; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.landing-enterprise-grid div:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(18, 25, 39, 0.08); border-color: rgba(47, 106, 84, 0.3); }
.landing-enterprise-grid div::after { content: "↗"; position: absolute; top: 16px; right: 18px; color: #b9b0a2; font-size: 14px; opacity: 0; transition: opacity 0.2s ease; }
.landing-enterprise-grid div:hover::after, .landing-enterprise-grid div:focus-visible::after { opacity: 1; }

/* Clickable Workflow steps */
.landing-steps div { cursor: pointer; }
.landing-steps div:hover { transform: translateY(-3px); }
.landing-steps div::after { content: "↗"; position: absolute; top: 16px; right: 18px; color: #b9b0a2; font-size: 14px; opacity: 0; transition: opacity 0.2s ease; }
.landing-steps div:hover::after, .landing-steps div:focus-visible::after { opacity: 1; }

/* Clickable Solution cards */
.landing-solutions-grid article { position: relative; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.landing-solutions-grid article:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(18, 25, 39, 0.12); }
.landing-solutions-grid article::after { content: "↗"; position: absolute; top: 18px; right: 20px; font-size: 14px; color: currentColor; opacity: 0; transition: opacity 0.2s ease; }
.landing-solutions-grid article:hover::after, .landing-solutions-grid article:focus-visible::after { opacity: 0.5; }

/* Clickable Platform feature cards */
.landing-feature-grid article { position: relative; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.landing-feature-grid article:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(18, 25, 39, 0.08); border-color: rgba(47, 106, 84, 0.3); }
.landing-feature-grid article::after { content: "↗"; position: absolute; top: 16px; right: 18px; color: #b9b0a2; font-size: 14px; opacity: 0; transition: opacity 0.2s ease; }
.landing-feature-grid article:hover::after, .landing-feature-grid article:focus-visible::after { opacity: 1; }

/* Feature-card icons */
.feat-ic {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 19px;
  margin-bottom: 14px;
  box-shadow: 0 6px 14px rgba(18, 25, 39, 0.1);
}

/* Workflow steps: sequential highlight */
.landing-steps div { position: relative; animation: stepPulse 7.5s ease-in-out infinite; }
.landing-steps div:nth-child(2) { animation-delay: 2.5s; }
.landing-steps div:nth-child(3) { animation-delay: 5s; }
@keyframes stepPulse {
  0%, 16%, 100% { box-shadow: 0 0 0 0 rgba(47, 106, 84, 0); }
  6% { box-shadow: 0 0 0 2px rgba(47, 106, 84, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-steps div { animation: none; }
}
.orch-core em { display: block; font-style: normal; margin-top: 3px; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); }
.orch-pulse {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 1.5px solid rgba(47, 106, 84, 0.55);
  animation: orchPulse 3s ease-out infinite;
  z-index: -1;
}
.orch-pulse.d2 { animation-delay: 1.5s; }
@keyframes orchPulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.45); opacity: 0; }
}
.agent-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 14px;
}
.agent-node {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid rgba(23, 22, 22, 0.1);
  border-radius: 14px;
  background: #fff;
  opacity: 0;
  animation: agentIn 0.55s ease forwards;
  animation-delay: calc(var(--i) * 0.06s);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.agent-node:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(18, 25, 39, 0.1);
  border-color: rgba(47, 106, 84, 0.35);
}
@keyframes agentIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.agent-ic {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 19px;
  box-shadow: 0 6px 14px rgba(18, 25, 39, 0.12);
}
.agent-ic::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  border: 2px solid rgba(47, 106, 84, 0.6);
  opacity: 0;
  animation: agentPing 11s ease-out infinite;
  animation-delay: calc(var(--i) * 1.05s);
}
@keyframes agentPing {
  0% { transform: scale(0.9); opacity: 0; }
  3% { opacity: 0.85; }
  10% { transform: scale(1.28); opacity: 0; }
  100% { opacity: 0; }
}
.agent-node-body { min-width: 0; }
.agent-node-body h4 { margin: 0; font-size: 15px; color: #171616; }
.agent-role { display: inline-block; margin: 3px 0 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #2f6a54; }
.agent-node-body p { margin: 0; font-size: 13px; line-height: 1.5; color: #6a5d53; }
@media (prefers-reduced-motion: reduce) {
  .agent-node { opacity: 1; animation: none; }
  .agent-ic::after, .orch-pulse { animation: none; }
}

/* Clickable affordance on agent cards */
.agent-node { cursor: pointer; }
.agent-node::before {
  content: "↗";
  position: absolute;
  top: 12px;
  right: 14px;
  color: #b9b0a2;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
}
.agent-node:hover::before, .agent-node:focus-visible::before { opacity: 1; }

/* Agent detail modal */
.agent-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(20, 18, 18, 0.55);
  backdrop-filter: blur(6px);
}
.agent-modal[hidden] { display: none; }
.agent-modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(23, 22, 22, 0.1);
  box-shadow: 0 40px 90px rgba(18, 25, 39, 0.3);
  padding: 26px;
  animation: agentModalIn 0.22s ease;
}
@keyframes agentModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.agent-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(23, 22, 22, 0.12);
  background: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #6a5d53;
}
.agent-modal-close:hover { color: #171616; border-color: #171616; }
.agent-modal-head { display: flex; align-items: center; gap: 14px; }
.agent-modal-head .agent-ic { width: 48px; height: 48px; font-size: 22px; }
.agent-modal-head .agent-ic::after { display: none; }
.agent-modal-name { margin: 0; font-size: 20px; color: #171616; }
.agent-modal-desc { margin: 14px 0 16px; color: #5f5347; line-height: 1.6; font-size: 15px; }
.agent-modal-body .mock-window { margin-bottom: 16px; }
.agent-modal-body .mk-track span,
.agent-modal-body .mk-prog span {
  transform-origin: left center;
  animation: domainBarGrow 0.6s ease both;
}
.agent-detail-pts { margin: 4px 0 0; }
.agent-modal-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(23, 22, 22, 0.1); }
.agent-modal-arrow { border: 1px solid rgba(23, 22, 22, 0.14); background: #fff; border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 700; font-size: 13px; color: #3f382f; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.agent-modal-arrow:hover { border-color: #2f6a54; color: #16302a; background: #f1f6f3; }
.agent-modal-count { font-size: 12.5px; font-weight: 700; color: #8a7d6f; }

/* ===== Site polish: scroll reveal, progress bar, smooth anchors, FAQ ===== */
html { scroll-behavior: smooth; }
.landing-main > section, .landing-hero { scroll-margin-top: 88px; }

.landing-main.reveal-on > section {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.landing-main.reveal-on > section.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .landing-main.reveal-on > section { opacity: 1; transform: none; transition: none; }
}

.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; pointer-events: none; }
.scroll-progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2f6a54, #be8a2f); }

.pricing-price { display: flex; align-items: baseline; gap: 9px; margin: 2px 0 2px; }
.pricing-price strong { font-size: 36px; line-height: 1; letter-spacing: -0.02em; color: #171616; }
.pricing-price span { font-size: 13.5px; font-weight: 600; color: #6a5d53; }
/* A word where a number used to be. "$29" fits at 36px; "Early access" does not,
   so word prices step down and stack their qualifier instead of sitting on the
   baseline beside it. */
.pricing-price.is-word { flex-direction: column; align-items: flex-start; gap: 2px; }
.pricing-price.is-word strong { font-size: 25px; }
.pricing-card-enterprise .pricing-price strong { color: #fffaf3; }
.pricing-card-enterprise .pricing-price span { color: rgba(255, 250, 243, 0.72); }
/* Marketing "pages": sections outside the current page group are hidden */
.lp-off { display: none !important; }
/* Sub-page header. The home page opens on the full hero; these pages had only
   centred text on flat cream, which read as an unfinished page rather than a
   deliberate opening. Full-bleed band with the same warm palette, a masked grid
   for depth, and a badge kicker so the eye lands somewhere. */
.landing-pagehead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: 84px 24px 68px;
  text-align: center;
  background:
    radial-gradient(62% 130% at 50% -20%, rgba(47, 106, 84, 0.11), transparent 62%),
    radial-gradient(46% 100% at 88% 0%, rgba(190, 138, 47, 0.10), transparent 60%),
    linear-gradient(180deg, #fffdf9 0%, #fdf7ee 100%);
  border-bottom: 1px solid rgba(23, 22, 22, 0.07);
}
.landing-pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(23, 22, 22, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 22, 22, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(68% 78% at 50% 0%, #000 0%, transparent 76%);
          mask-image: radial-gradient(68% 78% at 50% 0%, #000 0%, transparent 76%);
}
.landing-pagehead .landing-kicker {
  display: inline-block;
  padding: 6px 15px;
  border-radius: 999px;
  background: rgba(47, 106, 84, 0.09);
  border: 1px solid rgba(47, 106, 84, 0.18);
  /* Gold sits at roughly 2:1 against cream; green keeps the eyebrow readable. */
  color: #2f6a54;
  font-size: 11.5px;
  letter-spacing: 0.15em;
}
.landing-pagehead h1 {
  margin: 18px auto 14px;
  max-width: 15ch;
  font-family: "Sora", "Segoe UI", sans-serif;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: #171616;
}
.landing-pagehead p {
  margin: 0 auto;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.6;
  color: #5f5347;
}
/* Two columns on desktop, mirroring the home hero: copy on the left, a small
   product mock on the right. Stacks and re-centres on narrow screens. */
.ph-inner { max-width: 1180px; margin: 0 auto; }
@media (min-width: 900px) {
  .landing-pagehead { text-align: left; }
  .ph-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.82fr);
    gap: 48px;
    align-items: center;
  }
  .landing-pagehead h1 { margin-left: 0; margin-right: 0; max-width: 13ch; }
  .landing-pagehead p { margin-left: 0; margin-right: 0; }
  .ph-metrics { justify-content: flex-start; margin-left: 0; }
  .landing-pagehead::after { margin-left: 0; }
}

/* Mock panel */
.ph-visual {
  border: 1px solid rgba(23, 22, 22, 0.1);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 26px 56px -30px rgba(18, 25, 39, 0.55);
}
.ph-visual[hidden] { display: none; }
.phv-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #171616;
}
.phv-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 250, 243, 0.28); }
.phv-bar span {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #dbb469;
}
.phv-body { padding: 16px; display: grid; gap: 10px; }
.phv-note { font-size: 11.5px; line-height: 1.45; color: #6a5d53; }

/* --- Mock internals. These mirror real screens: the auto-computed KPI block, the
   agent activity list, the weighted efficiency score, and the approval queue. --- */

/* Shared meter */
.phv-track { height: 7px; border-radius: 999px; background: rgba(23, 22, 22, 0.08); overflow: hidden; }
.phv-track i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #2f6a54, #be8a2f);
  transform-origin: left; animation: phvGrow 1.1s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes phvGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.phv-foot { font-size: 11px; line-height: 1.45; color: #6a5d53; padding-top: 2px; }

/* Product: KPI tiles + meters */
.phv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.phv-tiles > div { padding: 10px 11px; border: 1px solid rgba(23, 22, 22, 0.08); border-radius: 10px; background: #fffdf9; }
.phv-tiles span { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #8a8073; }
.phv-tiles strong { display: block; margin-top: 2px; font-family: "Sora", sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: #171616; }
.phv-tiles em { font-style: normal; font-size: 10px; color: #2f6a54; font-weight: 700; }
.phv-meter { display: grid; gap: 5px; }
.phv-meter-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: #5f5347; }
.phv-meter-h b { font-weight: 800; color: #171616; }

/* AI: agent rows + automation strip + explainability */
.phv-agent { display: grid; grid-template-columns: 68px 1fr; gap: 3px 10px; align-items: center; }
.phv-agent > span { font-size: 11.5px; font-weight: 700; color: #171616; }
.phv-agent em { grid-column: 2; font-style: normal; font-size: 10.5px; color: #6a5d53; }
.phv-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 2px; }
.phv-strip > div { text-align: center; padding: 8px 6px; border-radius: 9px; background: rgba(23, 22, 22, 0.04); }
.phv-strip strong { display: block; font-family: "Sora", sans-serif; font-size: 17px; font-weight: 800; color: #171616; }
.phv-strip span { font-size: 10px; color: #6a5d53; }
.phv-strip .wait { background: rgba(190, 138, 47, 0.12); }
.phv-strip .wait strong { color: #9a6c1e; }
.phv-xai { padding: 9px 11px; border-radius: 10px; background: rgba(47, 106, 84, 0.07); border: 1px solid rgba(47, 106, 84, 0.16); }
.phv-xai b { font-size: 11.5px; color: #2f6a54; }
.phv-xai span { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.45; color: #5f5347; }

/* Pricing: the weighted efficiency score */
.phv-score { display: flex; align-items: center; gap: 14px; }
/* No keyframe on --v: animating an unregistered custom property with fill-mode
   both pins it at the from value, which left the ring empty. Draw it directly. */
.phv-ring {
  --v: 0;
  position: relative; flex: 0 0 auto; width: 74px; height: 74px; border-radius: 50%;
  background: conic-gradient(#2f6a54 calc(var(--v) * 1%), rgba(23, 22, 22, 0.09) 0);
  display: grid; place-items: center;
}
.phv-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.phv-ring b { position: relative; z-index: 1; font-family: "Sora", sans-serif; font-size: 22px; font-weight: 800; color: #171616; }
.phv-score-t b { display: block; font-size: 14px; color: #2f6a54; }
.phv-score-t span { font-size: 11.5px; color: #6a5d53; }
.phv-factors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.phv-factors > div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 8px; background: rgba(23, 22, 22, 0.035); font-size: 11px; }
.phv-factors span { color: #5f5347; }
.phv-factors em { font-style: normal; font-weight: 800; color: #2f6a54; }

/* About: approval queue */
.phv-appr { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; border-bottom: 1px dashed rgba(23, 22, 22, 0.1); }
.phv-appr:last-of-type { border-bottom: 0; padding-bottom: 2px; }
.phv-appr b { display: block; font-size: 12px; color: #171616; }
.phv-appr > div > span { font-size: 10.5px; color: #8a8073; }
.phv-appr em { margin-left: auto; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.phv-appr em.ok { background: rgba(47, 106, 84, 0.12); color: #2f6a54; }
.phv-appr em.wait { background: rgba(190, 138, 47, 0.16); color: #9a6c1e; }

@media (prefers-reduced-motion: reduce) {
  .phv-track i { animation: none; }
}

/* Three highlights per page, echoing the hero's metric row so the sub-pages open
   with something to look at rather than text alone. */
.ph-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 30px auto 0;
  max-width: 780px;
}
.ph-metrics[hidden] { display: none; }
.ph-metrics > div {
  flex: 1 1 190px;
  max-width: 240px;
  padding: 16px 18px;
  border: 1px solid rgba(23, 22, 22, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px -18px rgba(18, 25, 39, 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ph-metrics > div:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 106, 84, 0.28);
  box-shadow: 0 16px 32px -18px rgba(18, 25, 39, 0.55);
}
.ph-metrics strong {
  display: block;
  font-family: "Sora", "Segoe UI", sans-serif;
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #2f6a54, #be8a2f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ph-metrics span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #6a5d53;
}
@media (max-width: 640px) {
  .ph-metrics { gap: 10px; margin-top: 24px; }
  .ph-metrics > div { flex: 1 1 100%; max-width: 100%; padding: 13px 16px; }
}

/* Small gold rule to close the band and echo the brand accent. */
.landing-pagehead::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 28px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f6a54, #dbb469);
  opacity: 0.85;
}
@media (max-width: 640px) {
  .landing-pagehead { padding: 60px 20px 48px; }
  .landing-pagehead h1 { max-width: 100%; }
  .landing-pagehead p { font-size: 15.5px; }
}
.landing-nav-links > a.is-current { color: #2f6a54; font-weight: 700; }

.pricing-card p.pricing-annual { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: #2f6a54; }
.pricing-annual strong { font-weight: 800; }
/* A single card left over on the last row of the 3-up grid sits in the left
   third and reads as a mistake. Centre it. Only above 980px, where the grid is
   actually three columns; below that it collapses to one and there is no orphan. */
@media (min-width: 981px) {
  .landing-feature-grid > article:last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* Voice section: the three cards sell it, this row answers the objections that
   stop someone trying it (my language, my noisy office, does it edit me, where
   does my audio go). Facts, so they read as a row of claims, not more features. */
.voice-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 22px;
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(23, 22, 22, 0.1);
  list-style: none;
}
.voice-facts li { display: flex; flex-direction: column; gap: 4px; }
.voice-facts strong { font-size: 13.5px; font-weight: 800; color: #2f6a54; }
.voice-facts span { font-size: 13px; line-height: 1.5; color: #5c5047; }

/* The trial card names every domain you get. As bullets that is a wall of text
   taller than the card next to it, so the domains ride as chips instead. */
.pricing-domains { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(23, 22, 22, 0.14); }
.pricing-domains-lbl { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #6a5d53; }
.pricing-card .pricing-domains ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.pricing-card .pricing-domains li {
  margin: 0; padding: 3px 9px; border-radius: 999px;
  background: rgba(46, 106, 84, 0.09); color: #2f6a54;
  font-size: 11.5px; font-weight: 700; line-height: 1.5;
}

.pricing-quote-note { margin: 14px 0 0; text-align: center; font-size: 13px; color: #6a5d53; }
.pricing-quote-note a { color: #2f6a54; font-weight: 700; }
.pricing-launch { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: rgba(190, 138, 47, 0.14); color: #9a6c1e; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }

/* 4-up plan grid + featured plan + BYOK note + services */
.landing-pricing-grid.pricing-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pricing-grid-4 .pricing-card { min-height: 560px; }
.pricing-card-featured { position: relative; border-color: rgba(47, 106, 84, 0.5); box-shadow: 0 22px 48px rgba(18, 25, 39, 0.12); }
.pricing-badge { position: absolute; top: 0; right: 18px; transform: translateY(-50%); background: linear-gradient(135deg, #2f6a54, #be8a2f); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.pricing-byok-note { max-width: 760px; margin: 22px auto 0; text-align: center; font-size: 14px; line-height: 1.55; color: #5f5347; }

.pricing-services { margin-top: 56px; border-top: 1px solid rgba(23, 22, 22, 0.1); padding-top: 40px; }
.pricing-services-head { max-width: 760px; margin: 0 auto 24px; text-align: center; }
.pricing-services-head span { display: inline-block; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 700; color: #2f6a54; }
.pricing-services-head h3 { margin: 10px 0 0; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; color: #171616; }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.service-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 16px; background: #fff; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.service-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(18, 25, 39, 0.08); }
.service-card h4 { margin: 4px 0 0; font-size: 18px; color: #171616; }
/* Service cards are "let's talk" offerings, not priced tiers — show a compact
   Custom · <descriptor> tag rather than a big price number that wraps awkwardly. */
.service-card .pricing-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0; min-height: 20px; }
.service-card .pricing-price strong { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #3b3fb0; }
.service-card .pricing-price strong::after { content: "·"; margin-left: 6px; color: rgba(23, 22, 22, 0.3); font-weight: 700; }
.service-card .pricing-price span { font-size: 13px; font-weight: 600; color: #6a5d53; }
.service-card p { flex: 1; margin: 0; color: #5f5347; line-height: 1.55; font-size: 14.5px; }
.service-card p a { color: #3b3fb0; font-weight: 600; white-space: nowrap; }
.service-card .landing-secondary { align-self: start; text-align: center; padding: 11px 18px; border: 1px solid rgba(23, 22, 22, 0.18); border-radius: 10px; color: #2a2622; }

/* Talent-on-demand (staff specialists) section */
.landing-section-head .landing-section-sub { max-width: 760px; margin: 12px auto 0; color: #5f5347; line-height: 1.6; font-size: 15.5px; }
.spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.spec-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 16px; background: #fff; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.spec-card:focus-visible { outline: 2px solid #3b3fb0; outline-offset: 2px; }
.spec-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(18, 25, 39, 0.09); border-color: rgba(59, 63, 176, 0.35); }
.spec-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #eef0ff, #f6eee6); font-size: 22px; }
.spec-card h4 { margin: 6px 0 0; font-size: 16.5px; color: #171616; }
.spec-card p { margin: 0; color: #5f5347; line-height: 1.5; font-size: 13.5px; }
.spec-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; padding: 22px 26px; border-radius: 18px; background: linear-gradient(135deg, #171616, #2a2440); color: #fff; }
.spec-cta p { margin: 0; font-size: 15.5px; max-width: 560px; color: rgba(255, 255, 255, 0.9); }
.spec-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Trust chips under the heading */
.spec-trust { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.spec-trust li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: #2f4635; background: #eef6f0; border: 1px solid rgba(31, 122, 69, 0.18); border-radius: 999px; }
.spec-trust li::before { content: "✓"; font-weight: 800; color: #1f7a45; }

/* How it works — 3 numbered steps */
.spec-how { margin-top: 40px; }
.spec-how-head { text-align: center; margin-bottom: 22px; }
.spec-how-head span { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6a5d53; }
.spec-how-head h3 { margin: 6px 0 0; font-size: 24px; color: #171616; }
.spec-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; position: relative; }
.spec-step { position: relative; padding: 24px 22px; border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 16px; background: #fff; }
.spec-step-n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg, #3b3fb0, #6a3fb0); }
.spec-step h4 { margin: 12px 0 0; font-size: 16.5px; color: #171616; }
.spec-step p { margin: 6px 0 0; color: #5f5347; line-height: 1.55; font-size: 14px; }

/* CTA banner with copy + actions */
.spec-cta-copy h3 { margin: 0 0 4px; font-size: 20px; color: #fff; }
.spec-cta-copy p { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.85); max-width: 560px; }

@media (max-width: 1100px) { .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .spec-steps { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .spec-grid { grid-template-columns: 1fr; } }

@media (max-width: 1100px) {
  .landing-pricing-grid.pricing-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-grid-4 .pricing-card { min-height: 0; }
}
@media (max-width: 1100px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .service-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .landing-pricing-grid.pricing-grid-4 { grid-template-columns: 1fr; }
}

/* Outcomes / KPIs section */
.landing-outcomes { border-top: 1px solid rgba(23, 22, 22, 0.1); }
.outcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.outcome-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 18px;
  border: 1px solid rgba(23, 22, 22, 0.1);
  border-radius: 14px;
  background: #fff;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.outcome-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(18, 25, 39, 0.08); }
.outcome-card strong { font-size: clamp(26px, 3vw, 36px); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; white-space: nowrap; color: #171616; background: linear-gradient(90deg, #2f6a54, #be8a2f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.outcome-card span { font-size: 14.5px; font-weight: 700; color: #171616; margin-top: 2px; }
.outcome-card em { font-style: normal; font-size: 12.5px; color: #6a5d53; line-height: 1.45; }
.outcome-note { max-width: 760px; margin: 22px auto 0; text-align: center; font-size: 14px; line-height: 1.55; color: #5f5347; }

/* Expected impact — projected ranges (clearly labelled as estimates) */
.outcome-impact { margin-top: 36px; padding-top: 30px; border-top: 1px solid rgba(23, 22, 22, 0.09); }
.outcome-impact-head { text-align: center; margin-bottom: 20px; }
.outcome-impact-head span { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #be8a2f; }
.outcome-impact-head h3 { margin: 6px 0 0; font-size: 24px; color: #171616; }
.outcome-impact-head p { max-width: 720px; margin: 10px auto 0; font-size: 13.5px; line-height: 1.55; color: #6a5d53; }
.impact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 940px; margin-left: auto; margin-right: auto; }
.outcome-card.impact strong { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: 0; padding: 0 2px; background: linear-gradient(90deg, #3b3fb0, #6a3fb0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 720px) { .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .impact-grid { grid-template-columns: 1fr; } }

/* In-app KPIs module */
.kpi-overall { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; padding: 22px 24px; border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 16px; background: #fff; margin-bottom: 16px; }
.kpi-overall-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px; font-weight: 800; color: #8a7d6f; }
.kpi-overall-score { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.kpi-overall-score strong { font-size: 48px; line-height: 1; color: #171616; letter-spacing: -0.03em; }
.kpi-overall-score em { font-style: normal; font-size: 18px; color: #8a7d6f; }
.kpi-overall-score .mk-pill { align-self: center; margin-left: 8px; }
.kpi-overall-tiles { display: flex; gap: 10px; flex-wrap: wrap; }
.kpi-grid-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.kpi-block h3 { margin: 0 0 12px; font-size: 16px; }
.kpi-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kpi-meter { margin-top: 14px; overflow: hidden; }
.kpi-meter > span { font-size: 12.5px; color: #6a5d53; font-weight: 600; }
.kpi-meter > strong { float: right; font-size: 12.5px; color: #171616; }
.kpi-overall-main { flex: 1; min-width: 260px; }
.kpi-breakdown { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; max-width: 620px; }
.kpi-chip { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #f1ece2; color: #5f5347; }
.kpi-delta { align-self: center; margin-left: 10px; font-size: 12.5px; font-weight: 700; }
.kpi-delta.up { color: #1f6a4f; }
.kpi-delta.down { color: #a8412f; }
.kpi-trend { min-width: 260px; }
.kpi-funnel { margin-bottom: 16px; }
.kpi-funnel h3 { margin: 0 0 4px; font-size: 16px; }
.kpi-funnel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.kfun-trends { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; margin: 6px 0 18px; padding-bottom: 16px; border-bottom: 1px solid #eee7da; }
.kfun-trend { min-width: 200px; }
.kfun-trend .kpi-overall-label { display: block; margin-bottom: 2px; }
.kfun-trend .kpi-delta { font-size: 11.5px; }
.kfun-trend .kpi-spark { width: 100%; height: auto; }
.kpi-funnel-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.kfun-row { display: flex; flex-direction: column; gap: 5px; }
.kfun-head { display: flex; justify-content: space-between; align-items: baseline; }
.kfun-label { font-size: 13px; font-weight: 700; color: #171616; }
.kfun-val { font-size: 14px; font-weight: 800; color: #171616; display: flex; align-items: baseline; gap: 8px; }
.kfun-step { font-style: normal; font-size: 11.5px; font-weight: 700; color: #1f6a4f; background: #e7f2ec; padding: 2px 7px; border-radius: 999px; }
.kfun-track { height: 14px; border-radius: 7px; background: #eee7da; overflow: hidden; }
.kfun-track span { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #2f6a54, #3f8e72); transition: width 0.4s ease; }
.kfun-hint { font-size: 11.5px; color: #8a7d6f; }
.kpi-spark { display: block; width: 100%; max-width: 300px; height: auto; margin-top: 8px; }
.ai-usage-card { margin-bottom: 16px; }
.ai-usage-status { display: flex; align-items: baseline; gap: 10px; }
.ai-usage-status strong { font-size: 26px; color: #171616; letter-spacing: -0.01em; }
.ai-usage-status span { font-size: 13px; color: #6a5d53; }
.ai-usage-warn { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: #a8412f; }
.ai-models { margin-top: 14px; display: grid; gap: 8px; }
.ai-model-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-model-provider { min-width: 84px; font-weight: 700; text-transform: capitalize; color: #171616; }
.ai-model-input { flex: 1; min-width: 200px; }
.ai-admin { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(23, 22, 22, 0.08); }
.ai-admin label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: #6a5d53; }
.ai-admin .ai-limit-input { width: 120px; }
.ai-keys-link { margin-top: 12px; }
.followup-kpi { margin-bottom: 16px; }
/* AI outreach brief editor (Message Queue) */
.ai-brief-panel { margin: 12px 0; border: 1px solid rgba(59, 63, 176, 0.2); border-radius: 12px; background: #fff; overflow: hidden; }
.ai-brief-toggle { width: 100%; display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: linear-gradient(180deg, #f4f5ff, #fff); border: none; cursor: pointer; font-weight: 700; font-size: 13.5px; color: #2f2b6b; text-align: left; }
.ai-brief-toggle .muted { font-weight: 400; }
.ai-brief-body { padding: 14px; display: grid; gap: 12px; border-top: 1px solid rgba(23, 22, 22, 0.08); }
.ai-brief-body .aik-field { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: #6a5d53; }
.ai-brief-body textarea { font-weight: 400; line-height: 1.5; }
.ab-list { display: grid; gap: 8px; }
.ab-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 10px; padding: 9px 12px; background: #fff; }
.ab-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ab-main strong { font-size: 13.5px; color: #171616; }
.ab-actions { display: flex; gap: 6px; }
.ab-files-wrap { display: grid; gap: 8px; }
.ab-files { display: grid; gap: 6px; }
.ab-file { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; border: 1px solid rgba(23, 22, 22, 0.08); border-radius: 8px; padding: 6px 10px; background: #fbfbfd; }
.ab-file-actions { display: flex; gap: 6px; align-items: center; }
.ab-file-actions a { text-decoration: none; }
.ab-upload { display: inline-block; cursor: pointer; align-self: start; }

/* AI-suggested replies panel (Message Queue) */
.suggested-replies { margin: 12px 0; padding: 14px 16px; border: 1px solid rgba(59, 63, 176, 0.22); border-radius: 14px; background: linear-gradient(180deg, #f4f5ff, #fff); }
.suggested-replies-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.suggested-replies-head strong { font-size: 14px; color: #2f2b6b; }
.suggested-replies-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.suggested-reply-card { border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 12px; background: #fff; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.suggested-reply-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.suggested-reply-name { font-weight: 700; font-size: 13.5px; color: #171616; }
.suggested-reply-open { font-size: 12px; color: #3b3fb0; white-space: nowrap; }
.suggested-reply-text { font-size: 13px; line-height: 1.45; resize: vertical; }
.suggested-reply-actions { display: flex; gap: 8px; }
.suggested-reply-actions .button { padding: 7px 16px; }
/* Email auto-reply panel (Integrations) */
.email-reply-panel { margin: 14px 0; padding: 16px; border: 1px solid rgba(59, 63, 176, 0.2); border-radius: 14px; background: linear-gradient(180deg, #f4f5ff, #fff); }
.email-reply-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.email-reply-head strong { font-size: 14px; color: #2f2b6b; }
.email-reply-controls { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.email-reply-controls label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: #6a5d53; }
.email-reply-stats { display: flex; gap: 16px; margin-left: auto; font-size: 12px; color: #6a5d53; }
.email-reply-stats strong { font-size: 16px; color: #171616; }
/* Email campaigns */
.email-campaigns { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(23, 22, 22, 0.08); }
.email-campaigns-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.email-campaigns-head strong { font-size: 14px; color: #2f2b6b; }
.email-campaigns-head .chip { margin-left: auto; }
.ec-list { display: grid; gap: 8px; margin-top: 10px; }
.ec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 12px; padding: 10px 12px; background: #fff; }
.ec-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ec-main strong { font-size: 14px; color: #171616; }
.ec-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ec-steps { display: grid; gap: 12px; margin: 8px 0; }
.ec-step { border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 12px; padding: 12px; display: grid; gap: 8px; background: #fbfbfd; }
.ec-step-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 13px; color: #171616; }
.ec-step-delay { font-size: 12px; color: #6a5d53; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.followup-kpi-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 6px; }
.followup-kpi-row div { display: flex; flex-direction: column; }
.followup-kpi-row strong { font-size: 24px; color: #171616; letter-spacing: -0.01em; }
.followup-kpi-row span { font-size: 12px; color: #6a5d53; }

/* AI keys manager modal */
.aik-modal { max-width: 720px; width: 100%; }
.aik-body { padding: 4px 2px; max-height: 70vh; overflow-y: auto; }
.aik-list { display: grid; gap: 10px; }
.aik-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border: 1px solid rgba(23,22,22,0.10); border-radius: 12px; padding: 12px 14px; background: #fff; }
.aik-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aik-row-title strong { font-size: 15px; color: #171616; }
.aik-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(23,22,22,0.06); color: #4a4038; text-transform: capitalize; }
.aik-chip.is-default { background: #eef0ff; color: #3b3fb0; }
.aik-usage { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.aik-usage.ok { background: #e8f6ee; color: #1f7a45; }
.aik-usage.warn { background: #fdf3e0; color: #a86a12; }
.aik-usage.bad { background: #fbe9e6; color: #a8412f; }
.aik-row-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 12px; color: #6a5d53; }
.aik-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.aik-empty { padding: 18px; text-align: center; color: #6a5d53; border: 1px dashed rgba(23,22,22,0.15); border-radius: 12px; font-size: 13px; }
.aik-add { margin-top: 14px; }
.aik-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(23,22,22,0.10); }
.aik-form-title { font-weight: 700; font-size: 14px; color: #171616; margin-bottom: 12px; }
.aik-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aik-field { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: #6a5d53; }
.aik-field-wide { grid-column: 1 / -1; }
.aik-field .input, .aik-field .table-select { font-weight: 400; }
.aik-sub { margin: 18px 0 8px; font-size: 12px; font-weight: 700; color: #6a5d53; }
.aik-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 18px; }
.aik-check { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #333; }
.aik-default { margin-top: 16px; }
.aik-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-bottom: 4px; }
@media (max-width: 620px) { .aik-grid { grid-template-columns: 1fr; } }

.landing-faq { border-top: 1px solid rgba(23, 22, 22, 0.1); }
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 14px; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.faq-item[open] { border-color: rgba(47, 106, 84, 0.35); box-shadow: 0 14px 30px rgba(18, 25, 39, 0.06); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 700;
  color: #171616;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; line-height: 1; color: #2f6a54; flex: 0 0 auto; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0; padding: 0 20px 20px; color: #5f5347; line-height: 1.6; font-size: 15px; }

/* ===== Auto-cycling product showcase ===== */
.showcase { display: grid; grid-template-columns: 0.92fr 1.18fr; gap: 34px; align-items: center; max-width: 1120px; margin: 6px auto 0; }
.showcase-tabs { display: flex; flex-direction: column; gap: 12px; }
.showcase-tab {
  position: relative;
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(23, 22, 22, 0.1);
  border-radius: 14px;
  background: #fff;
  padding: 16px 18px 18px;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.showcase-tab strong { display: block; font-size: 16px; color: #171616; }
.showcase-tab span { display: block; margin-top: 4px; font-size: 13.5px; color: #6a5d53; line-height: 1.45; }
.showcase-tab:not(.is-active) { opacity: 0.62; }
.showcase-tab:hover { opacity: 1; }
.showcase-tab.is-active { border-color: rgba(47, 106, 84, 0.4); box-shadow: 0 14px 30px rgba(18, 25, 39, 0.08); opacity: 1; }
.showcase-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(23, 22, 22, 0.06); }
.showcase-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2f6a54, #be8a2f); }
.showcase-tab.is-active .showcase-progress i { animation: showcaseFill var(--showcase-dur, 5000ms) linear forwards; }
.showcase.paused .showcase-tab.is-active .showcase-progress i { animation-play-state: paused; }
@keyframes showcaseFill { from { width: 0; } to { width: 100%; } }

.showcase-stage { position: relative; }
.showcase-stage::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  background: radial-gradient(58% 58% at 60% 32%, rgba(47, 106, 84, 0.18), rgba(190, 138, 47, 0.08) 55%, transparent 76%);
  filter: blur(8px);
  z-index: 0;
}
.showcase-stage .mock-window { position: relative; z-index: 1; min-height: 280px; }
.showcase-live { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #1f6a4f; display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; }
.showcase-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2f9e6e; animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }
.showcase-scene[hidden] { display: none; }
.showcase-scene { animation: sceneIn 0.4s ease; }
@keyframes sceneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.showcase-scene.play .mk-track span,
.showcase-scene.play .mk-prog span { transform-origin: left center; animation: domainBarGrow 0.6s ease both; }

@media (prefers-reduced-motion: reduce) {
  .showcase-tab.is-active .showcase-progress i { animation: none; width: 100%; }
  .showcase-live::before, .showcase-scene { animation: none; }
}
@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; gap: 20px; }
  .showcase-stage { order: -1; }
}
.agent-tools { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.agent-tools span { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #f1ece2; color: #5f5347; }

.landing-enterprise-grid div {
  min-height: 180px;
  background: #ffffff;
}


.landing-pricing {
  border-top: 1px solid rgba(23, 22, 22, 0.1);
  scroll-margin-top: 92px;
}

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

.pricing-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 520px;
}

.pricing-card .landing-primary,
.pricing-card .landing-secondary,
.pricing-card .landing-tertiary {
  align-self: end;
  width: fit-content;
  margin-top: 12px;
}

.pricing-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.pricing-card-enterprise p,
.pricing-card-enterprise li {
  color: rgba(255, 250, 243, 0.76);
}

.landing-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(23, 22, 22, 0.96), rgba(47, 106, 84, 0.86)),
    #171616;
  color: #fffaf3;
}

.landing-final h2 {
  max-width: 760px;
  color: #fffaf3;
}

.landing-final p {
  max-width: 650px;
  color: rgba(255, 250, 243, 0.72);
}

.landing-final-actions {
  display: grid;
  gap: 12px;
  min-width: 240px;
}

.landing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 28px;
  padding-bottom: 42px;
  border-top: 1px solid rgba(23, 22, 22, 0.1);
}

.landing-footer .landing-brand {
  color: #171616;
}

.landing-footer div {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.landing-footer a:not(.landing-brand) {
  color: #6a5d53;
  text-decoration: none;
}

.landing-footer a:hover {
  color: #171616;
}

@media (max-width: 980px) {
  .landing-nav {
    position: sticky;
  }

  .landing-nav-links {
    display: none;
  }

  .nav-burger {
    display: flex;
  }

  .landing-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 52px;
  }

  .landing-product {
    width: 100%;
    max-width: 680px;
  }

  .landing-feature-grid,
  .landing-proof-grid,
  .landing-motion-grid,
  .landing-band,
  .landing-steps,
  .landing-security-grid,
  .landing-enterprise-grid,
  .landing-solutions-grid,
  .landing-pricing-grid,
  .landing-final {
    grid-template-columns: 1fr;
  }

  .landing-final-actions {
    min-width: 0;
  }

  .landing-agent-list span {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .landing-nav {
    gap: 10px;
    padding: 14px;
  }

  .landing-brand {
    font-size: 14px;
  }

  .landing-brand-mark {
    width: 36px;
    height: 36px;
  }

  .landing-nav-cta {
    max-width: 128px;
    overflow: hidden;
    padding: 10px 12px;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .landing-nav-links {
    display: none;
  }

  .landing-hero,
  .landing-section,
  .landing-band,
  .landing-workflow,
  .landing-final,
  .landing-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .landing-hero-copy,
  .landing-product {
    max-width: 358px;
    width: 100%;
  }

  .landing-lede {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .landing-hero h1 {
    font-size: 36px;
  }

  .product-topbar strong {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .landing-lede {
    font-size: 18px;
  }

  .landing-actions,
  .landing-agent-list div,
  .landing-section-actions,
  .landing-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .landing-primary,
  .landing-secondary,
  .landing-tertiary,
  .landing-login {
    width: 100%;
    text-align: center;
  }

  .landing-footer div {
    justify-content: flex-start;
  }

  .landing-metrics div {
    width: 100%;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-panel,
  .landing-feature-grid article,
  .landing-proof-grid div,
  .landing-steps div,
  .landing-security-grid div,
  .landing-enterprise-grid div,
  .pricing-card {
    min-height: auto;
  }

  .pricing-card .landing-primary,
  .pricing-card .landing-secondary,
  .pricing-card .landing-tertiary {
    width: 100%;
  }

  .pricing-card-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

body,
input,
select,
textarea,
button {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

h1,
h2,
h3,
.topbar-title,
.kpi-value {
  font-family: Georgia, "Times New Roman", serif;
}

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

button {
  cursor: pointer;
}

.shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  min-height: 100vh;
  padding: 28px 22px;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 251, 245, 0.9), rgba(244, 237, 227, 0.96)),
    var(--panel);
  backdrop-filter: blur(12px);
}

.brand-block {
  display: flex;
  gap: 14px;
  align-items: center;
}

.brand-mark {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(145deg, #1a1a1a, #8a5d2e);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sidebar h1,
.hero h2,
.topbar-title,
.panel-heading h3,
.kpi-value {
  letter-spacing: -0.03em;
}

.sidebar h1 {
  margin: 2px 0 0;
  font-size: 28px;
}

/* Ordelume logo — layered-squares mark + Sora wordmark */
.landing-brand-mark,
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: inherit;
  padding: 0;
  letter-spacing: normal;
}
/* Landing nav sits on a dark header — beige tile + light frame so the mark pops. */
.landing-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 22%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.22);
}
/* App sidebar is light — clean mark, no tile or frame. */
.brand-mark { width: 40px; height: 40px; }
.landing-brand-mark svg,
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
}
.landing-brand span,
/* The wordmark used to be an h1 and inherited its look from four heading rules
   spread across this file. It is a div now, so the whole look is stated here in
   one place rather than reassembled from rules that no longer match it. */
.sidebar .brand-block .brand-name {
  margin: 2px 0 0;
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
}
.landing-brand {
  font-weight: 600;
}

.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.sidebar-copy {
  margin: 20px 0 26px;
  color: var(--muted);
  line-height: 1.55;
}

.sidebar-search {
  margin: 0 0 22px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(47, 106, 84, 0.1), transparent 38%),
    rgba(255, 255, 255, 0.58);
}

.sidebar-search-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.sidebar-search-input {
  width: 100%;
  border: 1px solid rgba(75, 57, 41, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  padding: 11px 12px;
  color: var(--text);
}

.sidebar-search-results {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 260px;
  overflow-y: auto;
}

.sidebar-search-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.search-result {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(75, 57, 41, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px;
  color: var(--text);
}

.search-result span,
.search-result small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.search-result strong {
  display: block;
  margin: 3px 0;
  font-size: 13px;
}

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: start center;
  padding: 72px 18px 18px;
  background: rgba(22, 19, 17, 0.24);
  backdrop-filter: blur(10px);
}

.command-palette-card {
  width: min(760px, 100%);
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 251, 245, 0.98);
  box-shadow: var(--shadow);
}

.command-palette-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.command-palette-head h3 {
  margin: 4px 0 0;
}

.command-palette-input {
  min-height: 54px;
  font-size: 16px;
}

.command-palette-hint {
  color: var(--muted);
  font-size: 12px;
}

.command-palette-results {
  display: grid;
  gap: 8px;
  max-height: min(58vh, 520px);
  overflow-y: auto;
}

.command-result {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--text);
  padding: 14px;
}

.command-result.active,
.command-result:hover {
  border-color: rgba(190, 138, 47, 0.22);
  background: rgba(190, 138, 47, 0.08);
}

.command-result strong {
  display: block;
  margin-bottom: 4px;
}

.command-result p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.command-result span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.sidebar-nav {
  display: grid;
  gap: 10px;
}

.nav-btn {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 11px 12px;
  border-radius: 14px;
  transition: 180ms ease;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.nav-btn:hover,
.nav-btn.active {
  border-color: rgba(190, 138, 47, 0.18);
  background: linear-gradient(180deg, rgba(255, 251, 245, 0.98), rgba(247, 239, 229, 0.92));
  box-shadow: 0 10px 28px rgba(37, 24, 16, 0.06);
}

.sidebar-folder {
  border: 1px solid rgba(75, 57, 41, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.36);
  overflow: hidden;
}

.sidebar-folder-header {
  width: 100%;
  min-height: 48px;
  border: 0;
  background: rgba(255, 255, 255, 0.44);
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  text-align: left;
}

.sidebar-folder-header span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1.25;
  font-weight: 700;
}

.folder-icon {
  min-width: 36px;
  height: 24px;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  background: var(--gold-soft);
  color: var(--copper);
  padding: 0 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}

.sidebar-folder-items {
  display: grid;
  gap: 4px;
  padding: 8px;
}

.sidebar-folder.collapsed .sidebar-folder-items {
  display: none;
}

.nav-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 5px;
  align-items: stretch;
}

.favorite-btn {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
}

.favorite-btn:hover,
.favorite-btn.active {
  border-color: rgba(190, 138, 47, 0.2);
  background: rgba(190, 138, 47, 0.12);
  color: var(--gold);
}

.favorites-empty {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.sidebar-footer {
  margin-top: 28px;
  display: grid;
  gap: 10px;
}

.status-pill,
.badge,
.mini-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
}

.status-pill {
  background: var(--forest-soft);
  color: var(--forest);
  width: fit-content;
}

.muted-pill {
  background: rgba(33, 27, 23, 0.06);
  color: var(--muted);
}

.mini-label.pending {
  background: rgba(190, 138, 47, 0.14);
  color: #8f6314;
}

.ghost-link,
.primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

.ghost-link {
  border: 1px solid var(--line-strong);
  color: var(--text);
}

.primary-link {
  background: var(--ink);
  color: #fff;
  padding: 0 16px;
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 251, 245, 0.72);
  backdrop-filter: blur(14px);
}

.topbar > div:first-child {
  flex: 1 1 280px;
  min-width: 0;
}

.topbar-title {
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
}

.topbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.alerts-btn {
  position: relative;
  gap: 8px;
}

.alerts-count {
  min-width: 24px;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(175, 79, 71, 0.14);
  color: var(--rose);
  font-size: 12px;
  font-weight: 700;
}

.ghost-btn,
.button,
.chip {
  min-height: 46px;
  border-radius: 14px;
  border: none;
}

.ghost-btn {
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.45);
  color: var(--text);
}

.view {
  display: none;
  padding: 28px;
}

.view.active {
  display: block;
}

.hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding: 26px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(190, 138, 47, 0.13), transparent 30%),
    linear-gradient(180deg, rgba(255, 250, 243, 0.94), rgba(248, 242, 233, 0.88));
  box-shadow: var(--shadow);
}

.hero.compact {
  padding: 24px;
}

.hero h2 {
  margin: 6px 0 10px;
  font-size: clamp(34px, 4vw, 54px);
  max-width: 860px;
}

.hero p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.65;
}

.hero-actions,
.actions,
.chip-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.button {
  padding: 0 18px;
  background: linear-gradient(135deg, var(--ink), #54361d);
  color: #fff;
}

.button.secondary {
  background: rgba(35, 30, 27, 0.08);
  color: var(--text);
}

.chip {
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(75, 57, 41, 0.12);
  color: var(--text);
}

.kpi-grid,
.grid,
.agent-grid,
.module-grid {
  display: grid;
  gap: 16px;
}

.kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.agent-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.kpi-card,
.panel,
.agent-card,
.module-card,
.timeline-item,
.run-card {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.kpi-card {
  position: relative;
  border-radius: 20px;
  padding: 18px;
  padding-left: 22px;
  text-align: left;
  color: var(--text);
  overflow: hidden;
}

.kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--kpi, #6366f1);
}

.interactive-kpi {
  width: 100%;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.interactive-kpi:hover {
  transform: translateY(-2px);
  border-color: rgba(190, 138, 47, 0.34);
  box-shadow: 0 28px 70px rgba(37, 24, 16, 0.12);
}

.kpi-label {
  color: var(--muted);
  font-size: 13px;
}

.kpi-value {
  margin-top: 8px;
  font-size: 34px;
  font-weight: 700;
}

.kpi-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.panel {
  border-radius: var(--radius-xl);
  padding: 22px;
  margin-top: 16px;
}

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

.panel-heading h3 {
  margin: 0;
  font-size: 22px;
}

.mini-label {
  background: rgba(35, 30, 27, 0.06);
  color: var(--muted);
}

.highlight-list,
.watch-list,
.report-list,
.runs-list {
  display: grid;
  gap: 12px;
}

.agent-command-layer,
.agent-result-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 18px;
  align-items: stretch;
  grid-column: 1 / -1;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(47, 106, 84, 0.12), transparent 34%),
    #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.agent-command-layer h3,
.agent-result-hero h3 {
  margin: 4px 0 8px;
  font-size: 24px;
}

.agent-command-layer p,
.agent-result-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.agent-result-hero small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
}

.ai-answer-brief {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.ai-answer-direct {
  padding: 14px;
  border: 1px solid rgba(47, 106, 84, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(47, 106, 84, 0.08), rgba(255, 255, 255, 0.72));
}

.ai-answer-direct span,
.ai-answer-brief-grid strong,
.ai-brief-sections h4,
.ai-mini-chart > strong {
  display: block;
  color: var(--forest);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ai-answer-direct p {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

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

.ai-answer-brief-grid > div,
.ai-mini-chart {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  padding: 14px;
}

.ai-answer-brief-grid ul,
.ai-brief-sections ul {
  display: grid;
  gap: 9px;
  margin: 10px 0 0;
  padding-left: 18px;
}

.ai-answer-brief-grid li,
.ai-brief-sections li,
.ai-brief-sections p {
  color: var(--muted);
  line-height: 1.55;
}

.ai-answer-brief strong,
.ai-brief-sections strong {
  color: var(--text);
}

.ai-inline-stat {
  color: var(--forest);
}

.ai-brief-sections {
  display: grid;
  gap: 14px;
}

.ai-brief-sections section {
  padding: 14px;
  border: 1px solid rgba(75, 57, 41, 0.1);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.72);
}

.ai-brief-sections h4 {
  margin: 0;
}

.ai-brief-sections p {
  margin: 10px 0 0;
}

.ai-structured-brief {
  display: grid;
  gap: 14px;
}

.ai-direct-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(47, 106, 84, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(47, 106, 84, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 250, 247, 0.86));
}

.ai-direct-card span,
.ai-source-panel span,
.ai-brief-card h4,
.ai-answer-table-card h4 {
  display: block;
  color: var(--forest);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ai-direct-card p {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.55;
}

.ai-direct-trace {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

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

.ai-brief-card,
.ai-answer-table-card,
.ai-source-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  padding: 16px;
}

.ai-brief-card h4,
.ai-answer-table-card h4 {
  margin: 0;
}

.ai-brief-card p,
.ai-brief-card li,
.ai-source-panel p,
.ai-source-card small,
.ai-answer-table td {
  color: var(--muted);
  line-height: 1.55;
}

.ai-brief-card ul {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 18px;
}

.ai-brief-card small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
}

.ai-answer-table-wrap {
  overflow-x: auto;
  margin-top: 12px;
}

.ai-answer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

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

.ai-answer-table th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(35, 30, 27, 0.035);
}

.ai-source-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
  gap: 14px;
  background:
    radial-gradient(circle at top left, rgba(190, 138, 47, 0.11), transparent 36%),
    rgba(255, 255, 255, 0.84);
}

.ai-source-panel strong {
  display: block;
  margin-top: 7px;
  font-size: 20px;
}

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

.ai-source-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.88);
  color: var(--text);
  text-decoration: none;
}

.ai-source-card:hover {
  border-color: rgba(47, 106, 84, 0.3);
  background: rgba(47, 106, 84, 0.07);
}

.ai-decision-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 16px 0;
}

.ai-decision-map > div {
  min-height: 118px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
}

.ai-decision-map span {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 999px;
  background: var(--forest-soft);
  color: var(--forest);
  font-size: 12px;
  font-weight: 900;
}

.ai-decision-map strong {
  display: block;
  margin-bottom: 6px;
}

.ai-decision-map p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.ai-decision-map i {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(47, 106, 84, 0.18), rgba(47, 106, 84, 0.6));
}

.compact-heading {
  margin-bottom: 0;
}

.ai-visual-card {
  grid-column: 1 / -1;
}

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

.ai-mini-chart {
  display: grid;
  gap: 12px;
}

.ai-mini-bar-row {
  display: grid;
  gap: 7px;
}

.ai-mini-bar-row div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.ai-mini-bar-row b {
  color: var(--text);
}

.ai-mini-bar-row i {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(35, 30, 27, 0.08);
}

.ai-mini-bar-row em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--forest), #6aa890);
}

.ai-mini-bar-row.warning em {
  background: linear-gradient(90deg, var(--gold), var(--copper));
}

.ai-mini-bar-row.danger em {
  background: linear-gradient(90deg, var(--rose), #d78377);
}

.agent-command-metrics,
.agent-readiness-grid,
.agent-metric-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.agent-readiness-grid,
.agent-metric-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
}

.agent-command-metric,
.agent-metric-card {
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 104px;
  padding: 14px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.82);
  color: var(--text);
}

.agent-command-metric {
  cursor: pointer;
}

.agent-command-metric:hover {
  border-color: rgba(47, 106, 84, 0.28);
  background: rgba(47, 106, 84, 0.07);
}

.agent-command-metric span,
.agent-metric-card span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.agent-command-metric strong,
.agent-metric-card strong {
  font-size: 22px;
  line-height: 1.1;
}

.agent-command-metric small {
  color: var(--muted);
  line-height: 1.35;
}

.agent-card-pro {
  display: grid;
  gap: 14px;
}

.agent-operating-brief {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.74);
}

.agent-operating-brief strong {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.agent-operating-brief span {
  line-height: 1.45;
}

.agent-tool-grid,
.agent-source-row,
.agent-actions,
.agent-result-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.agent-tool-grid span,
.agent-source-row em {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.agent-actions {
  margin-top: 2px;
}

.agent-result-actions {
  align-content: start;
  justify-content: flex-end;
}

.agent-run-loading {
  display: grid;
  gap: 6px;
}

.agent-run-loading strong {
  color: var(--text);
}

.agent-run-loading span {
  color: var(--muted);
}

.agent-action-item .chip {
  margin-top: 10px;
}

.agent-record-link {
  width: 100%;
  text-align: left;
  color: var(--text);
}

.command-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.department-rooms {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

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

.department-room-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(47, 106, 84, 0.1), transparent 32%),
    rgba(255, 255, 255, 0.68);
  padding: 16px;
}

.department-room-card > span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.department-room-card > strong {
  display: block;
  margin: 6px 0;
  font-size: 18px;
}

.department-room-card p {
  color: var(--muted);
  line-height: 1.5;
}

.room-metrics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 12px;
}

.room-metrics em {
  border-radius: 999px;
  background: rgba(35, 30, 27, 0.06);
  color: var(--muted);
  padding: 6px 9px;
  font-style: normal;
  font-size: 12px;
}

.ops-warning {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(190, 138, 47, 0.22);
  border-radius: 18px;
  background: rgba(190, 138, 47, 0.1);
  color: var(--muted);
}

.ops-warning strong {
  color: var(--text);
}

.drilldown-card,
.smart-panel-card,
.quick-action-card {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(190, 138, 47, 0.12), transparent 35%),
    rgba(255, 255, 255, 0.7);
  color: var(--text);
  border-radius: 18px;
  padding: 15px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.drilldown-card:hover,
.smart-panel-card:hover,
.quick-action-card:hover,
.clickable-list-item:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 106, 84, 0.25);
  box-shadow: 0 18px 44px rgba(37, 24, 16, 0.1);
}

.drilldown-card span,
.smart-panel-card span,
.quick-action-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.drilldown-card strong,
.smart-panel-card strong,
.quick-action-card strong {
  display: block;
  margin: 6px 0;
  font-size: 18px;
}

.drilldown-card p,
.smart-panel-card p {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.45;
}

.drilldown-card small {
  color: var(--forest);
  font-weight: 700;
}

.activity-timeline,
.priority-stack {
  display: grid;
  gap: 12px;
}

.timeline-card {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
  padding: 14px;
}

.timeline-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(37, 24, 16, 0.08);
}

.timeline-card span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.timeline-card strong {
  display: block;
  margin: 8px 0 6px;
  font-size: 18px;
}

.timeline-card p {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.5;
}

.timeline-card small {
  color: var(--forest);
  font-weight: 700;
}

.timeline-card.danger {
  border-color: rgba(175, 79, 71, 0.18);
  background: rgba(175, 79, 71, 0.05);
}

.timeline-card.warning {
  border-color: rgba(190, 138, 47, 0.18);
}

.timeline-card.success {
  border-color: rgba(47, 106, 84, 0.18);
}

.drilldown-card.danger,
.smart-panel-card.danger {
  background:
    radial-gradient(circle at top right, rgba(175, 79, 71, 0.13), transparent 35%),
    rgba(255, 255, 255, 0.72);
}

.drilldown-card.success,
.smart-panel-card.success {
  background:
    radial-gradient(circle at top right, rgba(47, 106, 84, 0.13), transparent 35%),
    rgba(255, 255, 255, 0.72);
}

.timeline-item,
.run-card,
.report-card,
.watch-card {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--line);
}

.timeline-item strong,
.run-card strong,
.report-card strong,
.watch-card strong,
.agent-card h3,
.module-card h3 {
  display: block;
  font-size: 17px;
  margin-bottom: 6px;
}

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

.input {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(75, 57, 41, 0.14);
  background: rgba(255, 255, 255, 0.82);
  padding: 13px 15px;
  color: var(--text);
}

.large-input {
  min-height: 170px;
  resize: vertical;
}

.form-grid,
.stack {
  display: grid;
  gap: 14px;
}

label span {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--muted);
}

.analysis-layout,
.result-grid {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

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

.analysis-card {
  border-radius: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.analysis-card h3,
.table-card h3 {
  margin: 0 0 12px;
  font-size: 19px;
}

.list-block {
  display: grid;
  gap: 12px;
}

.reports-grid {
  display: grid;
  gap: 16px;
}

.report-ready-card h4 {
  margin: 0 0 10px;
  font-size: 16px;
}

.report-brief {
  display: grid;
  gap: 16px;
}

.report-summary-block {
  border: 1px solid rgba(47, 106, 84, 0.14);
  border-radius: 18px;
  background: rgba(47, 106, 84, 0.08);
  padding: 15px;
}

.report-summary-block p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.compact-list .list-item {
  padding: 12px;
}

.list-item {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
}

.clickable-list-item {
  width: 100%;
  text-align: left;
  color: var(--text);
}

.list-item p {
  margin: 6px 0 0;
  line-height: 1.55;
  color: var(--muted);
}

.badge {
  width: fit-content;
  background: rgba(35, 30, 27, 0.08);
  color: var(--muted);
}

.badge.success {
  background: var(--forest-soft);
  color: var(--forest);
}

.badge.warning {
  background: rgba(190, 138, 47, 0.14);
  color: #8f6314;
}

.badge.danger {
  background: var(--rose-soft);
  color: var(--rose);
}

.bar-list {
  display: grid;
  gap: 12px;
}

.bar-row {
  display: grid;
  gap: 8px;
}

.bar-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.bar-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(35, 30, 27, 0.08);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--copper));
}

.table-card {
  display: grid;
  gap: 14px;
}

.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  border-top: 1px solid rgba(75, 57, 41, 0.08);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(75, 57, 41, 0.1);
  text-align: left;
  vertical-align: top;
}

.data-table {
  table-layout: auto;
  min-width: 980px;
}

.embedded-data-table {
  min-width: 620px;
}

.data-table th,
.data-table td {
  min-width: 150px;
  max-width: 360px;
}

th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.table-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 16px;
  align-items: start;
}

.embedded-table-workspace {
  display: block;
  min-width: 0;
}

.settings-layout {
  display: grid;
  gap: 16px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* Wide multi-column tables (e.g. AI Governance policy map, decision log) need
   the full row width so columns stay readable; stack them instead of squeezing
   an 11-column table into a half-width card. */
.settings-grid.ai-gov-tables {
  grid-template-columns: minmax(0, 1fr);
}

.settings-intro {
  margin-top: 0;
}

.settings-advanced {
  padding: 18px;
}

.settings-advanced summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
}

.settings-advanced[open] summary {
  margin-bottom: 12px;
}

.compact-advanced {
  margin-top: 16px;
}

.integration-center-card,
.ai-provider-card {
  padding: 18px;
}

.integration-grid,
.ai-provider-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.ai-provider-grid {
  grid-template-columns: repeat(2, minmax(280px, 1fr));
}

.integration-card,
.provider-key-card {
  display: grid;
  gap: 14px;
  align-content: space-between;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.integration-card h4,
.provider-key-card h4 {
  margin: 4px 0 8px;
  font-size: 20px;
}

.integration-actions,
.provider-key-form {
  display: grid;
  gap: 10px;
}

.danger-soft {
  color: #9f1d1d;
  border-color: rgba(185, 28, 28, 0.22);
  background: rgba(254, 242, 242, 0.76);
}

.access-manager-card {
  padding: 18px;
}

.access-manager-stats {
  min-width: 320px;
  margin: 0;
}

.access-profile-list {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.access-profile-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.7);
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.invite-manager-card,
.org-tree-card {
  padding: 18px;
}

.invite-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.invite-form-grid label {
  display: grid;
  gap: 6px;
}

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

.invite-actions {
  align-items: center;
  margin-top: 16px;
}

.invite-mini-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.invite-mini-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.org-tree {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.org-node-wrap {
  display: grid;
  gap: 12px;
}

.org-node {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-width: 240px;
  max-width: 340px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 112, 84, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(0, 112, 84, 0.10), transparent 45%),
    rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.org-node:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 112, 84, 0.42);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.org-node.active {
  border-color: #0f766e;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.28), 0 12px 28px rgba(15, 23, 42, 0.10);
}

.org-node-text {
  min-width: 0;
}

.org-node-text strong {
  font-size: 15px;
}

.org-chart {
  display: grid;
  gap: 22px;
  margin-top: 18px;
}

.org-section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.org-leadership-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.org-dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 16px;
}

.org-dept {
  display: grid;
  gap: 10px;
  padding: 12px 14px 16px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--org-accent, #0f766e);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.org-dept:hover {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}

.org-dept-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.org-dept-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--org-accent, #0f766e);
}

.org-dept-count {
  min-width: 22px;
  text-align: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--org-accent, #0f766e) 14%, transparent);
  color: var(--org-accent, #0f766e);
  font-size: 12px;
  font-weight: 700;
}

.org-dept-reports {
  display: grid;
  gap: 8px;
  margin-left: 18px;
  padding-left: 16px;
  border-left: 2px solid color-mix(in srgb, var(--org-accent, #0f766e) 30%, transparent);
}

.org-node.lead {
  border-color: color-mix(in srgb, var(--org-accent, #0f766e) 40%, var(--line));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--org-accent, #0f766e) 12%, transparent), transparent 55%),
    #ffffff;
}

.org-node.lead .org-avatar {
  background: var(--org-accent, #0f766e);
}

.org-lead-badge {
  margin-left: auto;
  align-self: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--org-accent, #0f766e) 14%, transparent);
  color: var(--org-accent, #0f766e);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.org-avatar {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: #0f172a;
  color: #fff;
  font-weight: 900;
}

.org-node strong,
.org-node span,
.org-node small {
  display: block;
}

.org-node span,
.org-node small {
  color: var(--muted);
}

.org-children {
  display: grid;
  gap: 12px;
  margin-left: 24px;
  padding-left: 20px;
  border-left: 2px solid rgba(0, 112, 84, 0.18);
}

.org-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
  gap: 20px;
  margin-top: 18px;
  align-items: start;
}

.org-detail {
  position: sticky;
  top: 12px;
}

.org-detail-empty {
  padding: 28px 20px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  text-align: center;
}

.org-person-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.org-person-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.org-person-head > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.org-person-head strong {
  display: block;
  font-size: 17px;
}

.org-person-head span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.org-avatar.large {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  font-size: 16px;
}

.org-person-fields {
  display: grid;
  gap: 10px;
}

.org-person-field {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.org-person-field span {
  color: var(--muted);
}

.org-person-field strong {
  text-align: right;
  word-break: break-word;
}

.org-person-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.org-person-actions .primary-link,
.org-person-actions .ghost-btn {
  flex: 1 1 auto;
  min-height: 38px;
  justify-content: center;
}

.org-detail-close {
  margin-left: auto;
}

.org-person-noactions {
  font-size: 13px;
}

@media (max-width: 900px) {
  .org-layout {
    grid-template-columns: 1fr;
  }
  .org-detail {
    position: static;
  }
}

.access-profile-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.access-profile-head h4 {
  margin: 4px 0 6px;
  font-size: 24px;
}

.access-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.access-edit-grid label,
.decision-fields label,
.calendar-create-grid label,
.message-edit-grid label {
  display: grid;
  gap: 6px;
}

.access-edit-grid label span,
.access-preset-row > span,
.access-section > span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.access-edit-grid .wide {
  grid-column: 1 / -1;
}

.access-notes {
  min-height: 84px;
  resize: vertical;
}

.access-preset-row,
.access-section {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.access-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.access-chip-grid.dense .chip {
  font-size: 12px;
  padding: 8px 12px;
}

.active-chip {
  border-color: rgba(47, 106, 84, 0.35);
  background: rgba(47, 106, 84, 0.12);
  color: var(--forest);
}

.table-main {
  min-width: 0;
}

.table-card-enhanced {
  padding: 0;
  overflow: hidden;
}

.table-heading,
.module-control-row,
.module-stat-strip {
  padding-left: 20px;
  padding-right: 20px;
}

.table-heading {
  padding-top: 20px;
}

.module-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.module-stat {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 241, 232, 0.72));
  padding: 12px;
}

.module-stat span {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.module-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.module-control-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 16px;
}

.smart-panel-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 20px 16px;
}

.table-search span {
  margin-bottom: 6px;
}

.relation-note {
  color: var(--muted);
  font-size: 13px;
  padding-bottom: 13px;
}

.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(255, 250, 243, 0.96);
  backdrop-filter: blur(8px);
}

/* Drag-to-resize column handles (sticky th provides the positioning context). */
.col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
  touch-action: none;
  user-select: none;
}
.col-resize-handle::after {
  content: "";
  position: absolute;
  top: 16%;
  right: 2px;
  width: 2px;
  height: 68%;
  border-radius: 2px;
  background: transparent;
  transition: background 0.12s ease;
}
.col-resize-handle:hover::after,
body.col-resizing .col-resize-handle::after { background: var(--accent, #2e6a54); }
body.col-resizing,
body.col-resizing * { cursor: col-resize !important; user-select: none !important; }

/* Clickable column header (opens the field editor) */
.col-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  text-align: left;
}
.col-header-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-header-caret { opacity: 0; font-size: 11px; flex: none; transition: opacity 0.12s ease; }
.data-table th:hover .col-header-caret { opacity: 0.55; }
.col-header-btn:hover { color: var(--accent, #2e6a54); }

/* Column editor modal */
.col-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.col-editor-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.42);
  animation: record-drawer-fade 0.16s ease;
}
.col-editor {
  position: relative;
  width: min(420px, 94vw);
  background: var(--surface, #fffdf9);
  border: 1px solid var(--line, #e4e7ec);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.28);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.col-editor-head h3 { margin: 3px 0 2px; }
.col-editor-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #667085);
  margin-top: 10px;
}
.col-editor .input { width: 100%; }
.col-editor textarea.input { resize: vertical; font-family: inherit; line-height: 1.5; }
.col-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}
.col-editor-actions-right { display: flex; gap: 8px; }

/* Airtable-style row selection (checkbox replaces the row number on hover/select) */
.resizable-table th { overflow: visible; }
.row-select-cell { position: relative; text-align: center; padding-left: 0; padding-right: 0; }
.row-select-cell .row-select {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  margin: 0;
  cursor: pointer;
  transition: opacity 0.1s ease;
}
.data-table tbody tr:hover .row-select-cell .row-select,
.row-select-cell .row-select:checked { opacity: 1; }
.data-table tbody tr:hover .row-select-cell .row-open-btn,
.data-table tbody tr.row-selected .row-select-cell .row-open-btn { visibility: hidden; }
.row-select-all { cursor: pointer; }
.data-table tbody tr.row-selected { background: rgba(46, 106, 84, 0.08); }

/* Bulk action bar */
.table-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 12px;
  background: rgba(46, 106, 84, 0.08);
  border: 1px solid rgba(46, 106, 84, 0.35);
  border-radius: 10px;
}
.table-bulk-count { font-weight: 600; font-size: 13px; color: var(--forest, #2e6a54); }
.table-bulk-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.table-bulk-bar .ghost-chip { margin-left: auto; }
.chip.bulk-danger { color: #b42318; border-color: rgba(180, 35, 24, 0.35); }
.chip.bulk-danger:hover { background: rgba(180, 35, 24, 0.08); }

/* Column header dropdown menu */
.col-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  min-width: 184px;
  background: #fffdf9;
  border: 1px solid var(--line, #e4e7ec);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.2);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.col-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: #1d2433;
  white-space: nowrap;
}
.col-menu-item:hover { background: #f1efe8; }
.col-menu-item.is-active { color: var(--forest, #2e6a54); font-weight: 600; }
.col-menu-item.danger { color: #b42318; }
.col-menu-sep { height: 1px; background: var(--line, #e4e7ec); margin: 4px 2px; }

/* Column reorder drop target */
th.col-drop-target { box-shadow: inset 3px 0 0 var(--accent, #2e6a54); }

/* Bulk action dialog (tasks / message) */
.bulk-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bulk-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted, #667085);
  cursor: pointer;
}
.bulk-attached {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e4e7ec);
}
.bulk-attached-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  max-height: 96px;
  overflow-y: auto;
}
.bulk-attached-chips .linked-chip { max-width: none; white-space: nowrap; }

/* Multi-recipient picker in the "Send message" bulk dialog. */
.bulk-recipients {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 168px;
  overflow-y: auto;
  margin: 4px 0 4px;
  padding: 4px;
  border: 1px solid var(--line, #e4e7ec);
  border-radius: 10px;
}
.bulk-recipient {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.bulk-recipient:hover { background: rgba(47, 106, 84, 0.08); }
.bulk-recipient input { cursor: pointer; }

.data-table tbody tr {
  transition: background 160ms ease, box-shadow 160ms ease;
}

.data-table tbody tr:hover,
.data-table tbody tr.selected-row {
  background: rgba(190, 138, 47, 0.08);
}

.row-number-cell {
  width: 52px;
  min-width: 52px !important;
  max-width: 52px !important;
  text-align: center;
}

.row-open-btn {
  min-width: 34px;
  min-height: 34px;
  border: 1px solid rgba(75, 57, 41, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--text);
}

.table-select {
  width: 100%;
  min-width: 180px;
  border: 1px solid rgba(75, 57, 41, 0.14);
  background: rgba(255, 255, 255, 0.84);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 10px;
  white-space: normal;
}

.linked-field {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 260px;
}

.linked-field-empty {
  grid-template-columns: minmax(190px, 1fr);
}

.linked-field .linked-select {
  min-width: 0;
  width: 100%;
}

.linked-record-button,
.linked-cell-state {
  border: 1px solid rgba(47, 106, 84, 0.18);
  border-radius: 999px;
  background: rgba(47, 106, 84, 0.08);
  color: var(--forest);
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.linked-record-button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 42px;
  text-align: left;
  line-height: 1.25;
  white-space: normal;
}

.linked-record-button:hover {
  border-color: rgba(47, 106, 84, 0.34);
  background: rgba(47, 106, 84, 0.14);
}

.linked-record-button--unmatched,
.linked-cell-state.restricted {
  border-color: rgba(75, 57, 41, 0.14);
  background: rgba(75, 57, 41, 0.07);
  color: var(--muted);
}

.linked-record-button--unmatched {
  cursor: default;
}

.linked-change-select {
  min-width: 110px;
  width: 110px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.linked-chip {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(47, 106, 84, 0.18);
  border-radius: 999px;
  background: rgba(47, 106, 84, 0.1);
  color: var(--forest);
  padding: 6px 10px;
  font-size: 12px;
  white-space: normal;
  text-align: left;
  line-height: 1.35;
}

/* Sales-signal chips captured from LinkedIn (CRM cells + record inspector). */
.signal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.signal-chip {
  display: inline-block;
  background: #ecfdf3;
  color: #027a48;
  border: 1px solid #a6f4c5;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
}

/* Several linked records on one field (e.g. "CRM: Acme, Beta, Gamma") render as a
   row of individually clickable chips so each record opens on its own. */
.linked-chip-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.linked-chip-group button.linked-chip {
  cursor: pointer;
}
.linked-chip-prefix {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.restricted-chip {
  border-color: rgba(75, 57, 41, 0.12);
  background: rgba(75, 57, 41, 0.07);
  color: var(--muted);
}

/* Linked/connected chips inside table cells. The .linked-field grid is sized for
   the wide record inspector (min-width 260px, a 170px chip column), which makes
   it overflow narrow table columns and clip mid-word into the next column. In
   table cells, let the chip column flex down so the pill truncates with a clean
   ellipsis inside its cell; the full value stays available on hover. */
.data-table td .linked-field {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 28px;
}
.data-table td .linked-field.linked-field-empty {
  grid-template-columns: minmax(0, 1fr);
}
.data-table td .linked-field > select {
  min-width: 0;
  width: 100%;
}
.data-table td .linked-chip,
.data-table td .linked-record-button {
  display: inline-block;
  width: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  line-height: 1.5;
}

.restricted-linked-field {
  min-height: 42px;
  align-content: center;
  grid-template-columns: 1fr;
}

.multi-linked-field {
  display: grid;
  gap: 7px;
  min-width: 260px;
}

.participants-picker {
  min-width: 280px;
}

.participants-details {
  position: relative;
}

.participants-summary {
  min-height: 42px;
  list-style: none;
  display: grid;
  gap: 2px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 38px 8px 12px;
  cursor: pointer;
}

.participants-summary::-webkit-details-marker {
  display: none;
}

.participants-summary::after {
  content: "v";
  position: absolute;
  top: 11px;
  right: 14px;
  color: var(--muted);
  font-size: 15px;
}

.participants-summary span {
  font-weight: 800;
  color: var(--text);
}

.participants-summary small {
  color: var(--muted);
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Participant names live in the chips below; an empty preview should take no space. */
.participants-summary small:empty {
  display: none;
}

/* Compact variant: names show as chips above; the toggle is just a tiny add/edit
   affordance underneath (a small "+" button), with no count text or boxy dropdown. */
.participants-summary-mini {
  min-height: 0;
  border: none;
  background: none;
  padding: 0;
  margin-top: 4px;
  width: fit-content;
}
.participants-summary-mini::after { display: none; }
.participants-summary-mini span {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1px 7px;
  line-height: 1.5;
}
.participants-summary-mini:hover span {
  color: var(--text);
  border-color: var(--muted);
}

.participants-menu {
  z-index: 30;
  margin-top: 6px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow);
  padding: 8px;
}

.participant-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}

.participant-option:hover {
  background: rgba(47, 106, 84, 0.08);
}

.participant-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
}

.multi-linked-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.multi-linked-chips .linked-record-button,
.multi-linked-chips .linked-chip {
  width: auto;
  min-height: 0;
  padding: 6px 9px;
  font-size: 11px;
}

.privacy-redacted-cell {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 1px dashed rgba(75, 57, 41, 0.2);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--muted);
  background: rgba(75, 57, 41, 0.05);
  font-weight: 700;
}

.linked-empty {
  color: var(--muted);
  font-size: 12px;
}

.record-inspector {
  position: sticky;
  top: 98px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(190, 138, 47, 0.12), transparent 34%),
    rgba(255, 251, 245, 0.92);
  box-shadow: var(--shadow);
  padding: 18px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

/* Slide-over record editor opened from a card/kanban board. */
.record-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: flex-end;
}
.record-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.38);
  animation: record-drawer-fade 0.18s ease;
}
.record-drawer {
  position: relative;
  width: min(520px, 94vw);
  height: 100%;
  background: var(--surface, #fffdf9);
  box-shadow: -18px 0 50px rgba(16, 24, 40, 0.22);
  overflow-y: auto;
  animation: record-drawer-in 0.2s ease;
}
.record-drawer .record-inspector {
  position: static;
  top: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  min-height: 100%;
  padding: 20px;
}
@keyframes record-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes record-drawer-fade { from { opacity: 0; } to { opacity: 1; } }

.inspector-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.inspector-header h3 {
  margin: 4px 0 4px;
  font-size: 23px;
}

.inspector-fields {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.inspector-field {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(75, 57, 41, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
  padding: 10px;
}

.inspector-field span,
.inspector-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* Source records a task/message was linked from (openable chips + Open button). */
.inspector-linked-records {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px;
}
.inspector-linked-records .linked-chip-group { gap: 6px; }
.inspector-linked-records button.linked-chip { cursor: pointer; }

.inspector-field .participants-summary span,
.participants-summary [data-participants-label] {
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}

.inspector-field .participants-summary small {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

.inspector-field strong {
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.editable-inspector-fields {
  gap: 10px;
}

.editable-inspector-field {
  background: rgba(255, 255, 255, 0.72);
}

.inspector-field-control {
  display: grid;
  gap: 7px;
}

.inspector-field-control .table-input,
.inspector-field-control .table-select,
.inspector-field-control .table-textarea,
.inspector-field-control .linked-field,
.inspector-field-control .multi-linked-field {
  width: 100%;
  min-width: 0;
}

.inspector-field-control .linked-field {
  grid-template-columns: 1fr;
}

.inspector-field-control .linked-change-select {
  margin-top: 6px;
}

.related-list {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.quick-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 10px 0 16px;
}

.quick-action-card {
  padding: 11px 12px;
  border-radius: 15px;
  background: rgba(47, 106, 84, 0.08);
}

.quick-action-card strong {
  font-size: 14px;
  margin: 0 0 3px;
}

.related-card {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(47, 106, 84, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
  padding: 12px;
  color: var(--text);
}

.related-card span,
.related-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.related-card strong {
  display: block;
  margin: 4px 0;
}

.small-empty {
  padding: 14px;
  font-size: 13px;
}

.messages-workspace {
  display: grid;
  grid-template-columns: 250px minmax(280px, 0.85fr) minmax(360px, 1.15fr);
  gap: 16px;
  align-items: start;
}

.messages-sidebar,
.message-list-panel,
.message-detail-panel,
.message-detail-card,
.message-composer {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.messages-sidebar,
.message-list-panel,
.message-detail-panel {
  min-height: 0;
  max-height: calc(100vh - 210px);
}

/* Each column scrolls inside its own fixed height (Slack-style) */
.messages-sidebar,
.message-detail-panel {
  overflow-y: auto;
}

.message-list-panel {
  display: flex;
  flex-direction: column;
}

.message-list-panel .message-thread-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.messages-sidebar {
  padding: 16px;
}

.messages-sidebar-header h3 {
  margin: 5px 0 14px;
}

.message-channel-list {
  display: grid;
  gap: 8px;
}

.message-channel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.46);
  color: var(--text);
  padding: 10px 12px;
}

.message-channel.active,
.message-channel:hover {
  border-color: rgba(47, 106, 84, 0.18);
  background: rgba(47, 106, 84, 0.1);
}

.message-channel strong {
  border-radius: 999px;
  background: rgba(35, 30, 27, 0.08);
  padding: 3px 8px;
  font-size: 12px;
}

.messages-tip {
  margin-top: 16px;
  padding: 13px;
  border-radius: 16px;
  background: rgba(190, 138, 47, 0.1);
  color: var(--muted);
  line-height: 1.45;
}

.messages-tip strong {
  color: var(--text);
}

.messages-people-block {
  margin-top: 18px;
}

.message-people-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.message-person-card {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.46);
  color: var(--text);
  padding: 10px 12px;
}

.message-person-card:hover,
.message-person-card.active {
  border-color: rgba(190, 138, 47, 0.22);
  background: rgba(190, 138, 47, 0.08);
}

.message-person-avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  background: rgba(47, 106, 84, 0.12);
  color: var(--forest);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}

.message-person-avatar.own {
  background: rgba(23, 22, 22, 0.12);
  color: var(--ink);
}

.message-person-avatar.online {
  background: rgba(47, 106, 84, 0.12);
  color: var(--forest);
}

.message-person-avatar.focus {
  background: rgba(190, 138, 47, 0.16);
  color: #8f6314;
}

.message-person-avatar.busy,
.message-person-avatar.away {
  background: rgba(175, 79, 71, 0.14);
  color: var(--rose);
}

.message-person-meta,
.message-person-side {
  display: grid;
  gap: 2px;
}

.message-person-meta strong,
.message-person-side strong {
  font-size: 13px;
}

.message-person-meta small,
.message-person-side small {
  color: var(--muted);
  font-size: 11px;
}

.message-person-side {
  justify-items: end;
}

.message-list-panel,
.message-detail-panel {
  padding: 16px;
}

.message-list-tools {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.message-search-input {
  width: 100%;
}

.message-compact-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.message-thread-list {
  display: grid;
  gap: 10px;
  max-height: 570px;
  overflow-y: auto;
  padding-right: 4px;
}

.message-thread {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--text);
  padding: 14px;
}

.message-thread.active,
.message-thread:hover {
  border-color: rgba(190, 138, 47, 0.32);
  background: rgba(190, 138, 47, 0.08);
}

.message-thread-top,
.message-meta-row,
.message-detail-header,
.message-link-strip {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.message-thread-party,
.message-bubble-party {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.message-thread-party small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.message-thread p {
  color: var(--muted);
  line-height: 1.45;
  margin: 8px 0;
}

.message-thread-subline {
  margin: -2px 0 10px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.78;
}

.message-thread-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.message-meta-row {
  color: var(--muted);
  font-size: 12px;
}

.message-detail-panel {
  display: grid;
  gap: 16px;
}

.message-detail-card,
.message-composer {
  padding: 18px;
  box-shadow: none;
}

.message-compose-note {
  margin: 2px 0 14px;
  color: var(--muted);
  line-height: 1.5;
}

.message-detail-header h3 {
  margin: 5px 0 6px;
  font-size: 26px;
}

.message-bubble {
  margin: 16px 0;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(47, 106, 84, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.76);
  border: 1px solid var(--line);
  padding: 16px;
}

.message-bubble p {
  margin: 0;
  line-height: 1.6;
}

.message-link-strip {
  justify-content: flex-start;
  margin-bottom: 16px;
}

.message-ai-summary {
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.56);
  padding: 14px 16px;
}

.message-ai-summary strong {
  display: block;
  margin-bottom: 6px;
}

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

.message-presence-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.message-presence-chip {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--text);
  padding: 8px 12px;
}

.message-presence-chip strong {
  font-size: 12px;
}

.message-presence-chip small {
  color: var(--muted);
  font-size: 11px;
}

.message-transcript {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

/* Slack-style thread view */
.slack-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.message-thread-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.message-thread-title h3 {
  margin: 0 0 6px;
  font-size: 20px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.message-thread-hash {
  color: var(--muted);
  font-weight: 600;
}

.message-thread-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}

.message-thread-actions {
  flex-shrink: 0;
}

.slack-thread .message-transcript {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  max-height: 430px;
  overflow-y: auto;
  padding-right: 4px;
}

.slack-thread .message-bubble {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}

.slack-thread .message-bubble:hover {
  background: rgba(15, 23, 42, 0.04);
}

.slack-thread .message-bubble.unread {
  background: rgba(183, 121, 31, 0.07);
}

.message-bubble-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #475569;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}

.message-bubble-avatar.own {
  background: #0f766e;
}

.message-bubble-body {
  min-width: 0;
  flex: 1;
}

.message-bubble-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.message-bubble-meta strong {
  font-size: 14px;
}

.message-bubble-time {
  font-size: 11px;
  color: var(--muted);
}

.message-bubble-unread {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b7791f;
  background: rgba(183, 121, 31, 0.14);
  padding: 1px 7px;
  border-radius: 999px;
}

.slack-thread .message-bubble-body p {
  margin: 0;
  line-height: 1.5;
  font-size: 14px;
  word-break: break-word;
}

.message-thread-details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.5);
  overflow: hidden;
}

.message-thread-details > summary {
  cursor: pointer;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
  user-select: none;
}

.message-thread-details > summary::-webkit-details-marker {
  display: none;
}

.message-thread-details > summary::before {
  content: "+ ";
  font-weight: 800;
}

.message-thread-details[open] > summary::before {
  content: "\2212 ";
}

.message-thread-details[open] > summary {
  border-bottom: 1px solid var(--line);
}

.message-thread-details .message-edit-grid {
  padding: 14px;
  margin: 0;
}

.message-thread-details .message-ai-summary {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

/* Compact Slack-style thread list cards */
.message-thread-list .message-thread {
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  color: inherit;
}

.message-thread-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  overflow-x: hidden;
}

.message-thread-list .message-thread {
  max-width: 100%;
  box-sizing: border-box;
}

.message-thread-list .message-thread.unread {
  border-left: 3px solid #b7791f;
}

.message-thread-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #475569;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}

.message-thread-body {
  min-width: 0;
  flex: 1;
}

.message-thread-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.message-thread-name {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-thread-list .message-thread.unread .message-thread-name {
  font-weight: 800;
}

.message-thread-time {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted);
}

.message-thread-preview {
  margin: 2px 0 6px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.message-thread-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
}

.message-thread-channel {
  color: #0f766e;
  font-weight: 700;
}

.message-thread-unread {
  color: #b7791f;
  font-weight: 800;
  background: rgba(183, 121, 31, 0.14);
  padding: 1px 7px;
  border-radius: 999px;
}

.message-thread-tag {
  color: var(--muted);
  background: rgba(15, 23, 42, 0.05);
  padding: 1px 7px;
  border-radius: 999px;
}

/* Cleaner thread-list toolbar */
.message-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.message-list-headtext {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.message-list-headtext h3 {
  margin: 0;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-new-btn {
  flex-shrink: 0;
  min-height: 34px;
  padding: 0 14px;
}

.message-list-panel .message-search-input {
  width: 100%;
  margin-bottom: 10px;
}

.message-list-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.message-list-filters .chip {
  min-height: 30px;
  font-size: 12px;
}

.message-list-filters .chip.active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

/* Sidebar inbox views (All / Unread / Linked) */
.message-sidebar-views {
  display: grid;
  gap: 2px;
  margin-bottom: 14px;
}

.message-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.message-view:hover {
  background: rgba(15, 23, 42, 0.04);
}

.message-view.active {
  background: rgba(20, 115, 99, 0.1);
}

.message-view span {
  font-size: 13px;
}

.message-view.active span {
  font-weight: 700;
  color: #0f766e;
}

.message-view strong {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.message-view.active strong {
  color: #0f766e;
}

.message-sidebar-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 6px;
  padding: 0 4px;
}

/* Tasks Kanban board */
.tasks-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 18px;
  align-items: start;
}

.tasks-board-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.tasks-board-headtext h3 {
  margin: 0;
  font-size: 18px;
}

.tasks-board-search {
  width: 100%;
  margin-bottom: 14px;
}

.tasks-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(215px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.tasks-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(248, 250, 252, 0.7);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  max-height: calc(100vh - 300px);
}

.tasks-column-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px 10px;
}

.tasks-column-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.tasks-column[data-status-col="in_progress"] .tasks-column-name { color: #2563eb; }
.tasks-column[data-status-col="review"] .tasks-column-name { color: #9333ea; }
.tasks-column[data-status-col="blocked"] .tasks-column-name { color: #b42318; }
.tasks-column[data-status-col="done"] .tasks-column-name { color: #15803d; }

.tasks-column-count {
  min-width: 22px;
  text-align: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.tasks-column-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 40px;
}

.tasks-column-empty {
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.task-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  transition: box-shadow 0.12s ease, transform 0.12s ease, border-color 0.12s ease;
}

.task-card:hover {
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.task-card.active {
  border-color: rgba(20, 115, 99, 0.5);
  box-shadow: 0 0 0 2px rgba(20, 115, 99, 0.2);
}

.task-card-title {
  font-size: 13px;
  line-height: 1.35;
}

.task-card-project {
  font-size: 11px;
  color: #0f766e;
  font-weight: 600;
}

.task-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.task-card-assignee {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-card-assignee.muted {
  color: var(--muted);
}

.task-card-avatar {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: #475569;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}

.task-card-due {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

.task-card-due.overdue {
  color: #b42318;
  font-weight: 700;
}

/* Tasks Airtable-style filters */
.task-filter-wrap {
  margin-bottom: 12px;
}

.task-filter-panel {
  margin-top: 8px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.7);
}

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

.task-filter-join {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  min-width: 42px;
}

.task-filter-row .input {
  min-height: 34px;
  flex: 0 1 auto;
}

.task-filter-row select.input {
  max-width: 160px;
}

.task-filter-row input[data-task-filter-value] {
  max-width: 190px;
}

.task-filter-remove {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.task-filter-remove:hover {
  color: #b42318;
  border-color: rgba(180, 35, 24, 0.3);
}

.task-filter-add {
  align-self: start;
}

.task-filter-empty {
  font-size: 12px;
  color: var(--muted);
}

/* Compact linked-context chips in thread detail */
.slack-thread .message-link-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.slack-thread .message-link-strip > * {
  font-size: 11px;
}

.thread-bubble {
  margin: 0;
  max-width: 88%;
}

.thread-bubble.unread {
  border-color: rgba(190, 138, 47, 0.24);
  background:
    radial-gradient(circle at top right, rgba(190, 138, 47, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.78);
}

.thread-bubble.own {
  margin-left: auto;
  background:
    radial-gradient(circle at top right, rgba(23, 22, 22, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(46, 34, 23, 0.98), rgba(76, 48, 24, 0.98));
  border-color: rgba(76, 48, 24, 0.22);
}

.thread-bubble.own p,
.thread-bubble.own .message-bubble-head,
.thread-bubble.own .message-meta-row,
.thread-bubble.own .message-bubble-head strong {
  color: #f7f1e9;
}

.thread-bubble.own .table-link {
  color: #f7f1e9;
}

.message-bubble-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.message-bubble-head strong {
  color: var(--text);
  font-size: 14px;
}

.message-template-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

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

.message-edit-grid .table-textarea,
.message-compose-grid textarea {
  min-height: 100px;
}

.message-compose-primary {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.message-body-field textarea {
  min-height: 120px;
  resize: vertical;
}

.message-compose-advanced {
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.5);
  overflow: hidden;
}

.message-compose-advanced > summary {
  cursor: pointer;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
  user-select: none;
}

.message-compose-advanced > summary::-webkit-details-marker {
  display: none;
}

.message-compose-advanced > summary::before {
  content: "+ ";
  font-weight: 800;
}

.message-compose-advanced[open] > summary::before {
  content: "\2212 ";
}

.message-compose-advanced[open] > summary {
  border-bottom: 1px solid var(--line);
}

.message-compose-advanced .message-compose-grid {
  padding: 14px;
}

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

.decision-console {
  display: grid;
  gap: 18px;
}

.decision-hero,
.decision-card,
.decision-result-card {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  border-radius: 24px;
}

.decision-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 18px;
  padding: 22px;
  background:
    radial-gradient(circle at top right, rgba(47, 106, 84, 0.12), transparent 32%),
    rgba(255, 251, 245, 0.9);
}

.decision-hero h3 {
  margin: 6px 0 10px;
  font-size: 30px;
  letter-spacing: -0.02em;
}

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

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

.decision-context-grid div {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  padding: 14px;
}

.decision-context-grid span,
.decision-card-head span,
.decision-result-primary span,
.decision-result-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.decision-context-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
}

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

.decision-card {
  padding: 20px;
  display: grid;
  gap: 16px;
}

.strategy-brief {
  border: 1px solid rgba(47, 106, 84, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(47, 106, 84, 0.08), rgba(255, 255, 255, 0.5));
  padding: 14px;
}

.strategy-brief strong {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--forest);
}

.strategy-brief p {
  margin: 6px 0 0;
  line-height: 1.55;
  color: var(--text);
}

.decision-card.wide {
  grid-column: span 2;
}

.decision-card-head strong {
  display: block;
  margin-top: 6px;
  font-size: 21px;
}

.decision-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(75, 57, 41, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.42);
}

.decision-fields label span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.decision-fields.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.decision-output {
  min-height: 160px;
}

.decision-result-card {
  padding: 16px;
  box-shadow: none;
}

.decision-result-primary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.decision-result-primary strong {
  font-size: 28px;
  letter-spacing: -0.02em;
}

.decision-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.decision-result-grid p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.portfolio-decision-section {
  grid-column: 1 / -1;
}

.forecast-console {
  display: grid;
  gap: 18px;
}

.forecast-hero,
.forecast-kpi-card,
.forecast-visual-card,
.forecast-scenario-card,
.forecast-command-card,
.forecast-table-section {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  border-radius: 24px;
}

.forecast-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
  gap: 22px;
  padding: 24px;
  background:
    radial-gradient(circle at 90% 8%, rgba(47, 106, 84, 0.16), transparent 34%),
    radial-gradient(circle at 12% 100%, rgba(190, 138, 47, 0.14), transparent 30%),
    rgba(255, 251, 245, 0.92);
}

.forecast-hero h3 {
  margin: 8px 0 12px;
  max-width: 760px;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.forecast-hero p,
.forecast-command-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
}

.forecast-action-row,
.forecast-command-grid,
.forecast-section-head,
.forecast-gauge-top,
.forecast-bar-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.forecast-action-row {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 20px;
}

.forecast-meta-strip,
.forecast-table-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.forecast-meta-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(47, 106, 84, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--forest);
  font-size: 13px;
  font-weight: 700;
}

.forecast-hero-panel {
  display: grid;
  gap: 12px;
}

.forecast-hero-panel div,
.forecast-gauge,
.forecast-bar-item {
  border: 1px solid rgba(75, 57, 41, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  padding: 14px;
}

.forecast-hero-panel span,
.forecast-kpi-card span,
.forecast-scenario-card span,
.forecast-gauge-top strong,
.forecast-bar-meta span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.forecast-hero-panel strong {
  display: block;
  margin-top: 6px;
  font-size: 28px;
  letter-spacing: -0.03em;
}

.forecast-hero-panel small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

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

.forecast-kpi-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  text-align: left;
  color: var(--text);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.forecast-kpi-card:hover,
.forecast-bar-item:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 106, 84, 0.35);
  box-shadow: 0 18px 38px rgba(47, 106, 84, 0.12);
}

.forecast-kpi-card strong {
  font-size: 31px;
  letter-spacing: -0.035em;
}

.forecast-kpi-card div {
  color: var(--muted);
}

.forecast-kpi-card small {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(35, 30, 27, 0.06);
  color: var(--muted);
  font-size: 12px;
}

.forecast-kpi-card em {
  display: inline-flex;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--forest-soft);
  color: var(--forest);
  font-style: normal;
  font-size: 12px;
}

.forecast-kpi-card p,
.forecast-scenario-card p,
.forecast-gauge p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.forecast-kpi-card.warning em,
.forecast-scenario-card.warning .badge {
  background: var(--gold-soft);
  color: #8f6314;
}

.forecast-visual-grid,
.forecast-scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

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

.forecast-section-head {
  align-items: flex-start;
  margin-bottom: 16px;
}

.forecast-section-head h3 {
  margin: 4px 0 0;
  font-size: 23px;
  letter-spacing: -0.02em;
}

.forecast-section-head p {
  margin: 6px 0 0;
}

.forecast-bar-list,
.forecast-gauge-stack {
  display: grid;
  gap: 12px;
}

.forecast-bar-item {
  display: grid;
  gap: 10px;
  width: 100%;
  text-align: left;
  color: var(--text);
}

.forecast-bar-meta strong {
  font-size: 15px;
}

.forecast-compare-row {
  display: grid;
  grid-template-columns: 42px minmax(140px, 1fr) 82px;
  gap: 10px;
  align-items: center;
}

.forecast-compare-row span,
.forecast-compare-row b {
  color: var(--muted);
  font-size: 13px;
}

.forecast-compare-row b {
  text-align: right;
  color: var(--text);
}

.forecast-compare-track,
.forecast-gauge-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(35, 30, 27, 0.08);
  overflow: hidden;
}

.forecast-compare-track i,
.forecast-gauge-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.forecast-compare-track .current {
  background: rgba(35, 30, 27, 0.22);
}

.forecast-compare-track .forecast,
.forecast-gauge-track i {
  background: linear-gradient(90deg, var(--forest), #69a58d);
}

.forecast-bar-item.inverse .forecast {
  background: linear-gradient(90deg, var(--gold), var(--copper));
}

.forecast-gauge {
  display: grid;
  gap: 9px;
}

.forecast-gauge-top span {
  font-weight: 800;
  color: var(--text);
}

.forecast-scenario-card {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.forecast-scenario-card.success {
  background:
    linear-gradient(180deg, rgba(47, 106, 84, 0.09), rgba(255, 255, 255, 0.72)),
    var(--panel);
}

.forecast-scenario-card.warning {
  background:
    linear-gradient(180deg, rgba(190, 138, 47, 0.12), rgba(255, 255, 255, 0.74)),
    var(--panel);
}

.forecast-scenario-card.danger {
  background:
    linear-gradient(180deg, rgba(175, 79, 71, 0.1), rgba(255, 255, 255, 0.74)),
    var(--panel);
}

.forecast-scenario-card strong {
  font-size: 26px;
  letter-spacing: -0.025em;
}

.forecast-command-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 18px;
  align-items: center;
  padding: 20px;
}

.forecast-command-card h3 {
  margin: 6px 0 8px;
  font-size: 24px;
}

.forecast-command-grid {
  align-items: stretch;
}

.forecast-command-grid .smart-panel-card {
  flex: 1 1 0;
  min-width: 0;
}

.forecast-table-section {
  padding: 20px;
}

.forecast-table-section .embedded-table-workspace {
  margin-top: 10px;
}

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

.portfolio-kpi {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--text);
  padding: 15px;
}

.portfolio-kpi:hover,
.table-link:hover {
  border-color: rgba(47, 106, 84, 0.28);
  background: rgba(47, 106, 84, 0.08);
}

.portfolio-kpi span,
.portfolio-kpi small {
  display: block;
  color: var(--muted);
  line-height: 1.4;
}

.portfolio-kpi strong {
  display: block;
  margin: 6px 0;
  font-size: 20px;
}

.portfolio-kpi.danger {
  background: rgba(175, 79, 71, 0.08);
}

.portfolio-kpi.success {
  background: rgba(47, 106, 84, 0.08);
}

.portfolio-kpi.warning {
  background: rgba(190, 138, 47, 0.1);
}

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

.portfolio-table {
  min-width: 1080px;
}

.portfolio-table th,
.portfolio-table td {
  background: rgba(255, 255, 255, 0.42);
}

.table-link {
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--forest);
  text-align: left;
  padding: 7px 8px;
  font-weight: 700;
}

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

pre.json {
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  background: rgba(32, 25, 21, 0.05);
  overflow-x: auto;
  white-space: pre-wrap;
  line-height: 1.45;
}

.agent-card,
.module-card {
  border-radius: 22px;
  padding: 20px;
}

.agent-card {
  background:
    radial-gradient(circle at top right, rgba(190, 138, 47, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(255, 251, 245, 0.94), rgba(249, 243, 235, 0.88));
}

.module-card {
  background: rgba(255, 255, 255, 0.7);
}

.module-card p,
.agent-card p {
  color: var(--muted);
  line-height: 1.6;
}

.agent-meta,
.module-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.empty-state,
.loading {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed rgba(75, 57, 41, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.52);
}

details {
  border-top: 1px solid rgba(75, 57, 41, 0.1);
  margin-top: 10px;
  padding-top: 10px;
}

summary {
  cursor: pointer;
  color: var(--text);
}

@media (max-width: 1280px) {
  .kpi-grid,
  .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .table-workspace {
    grid-template-columns: 1fr;
  }

  .record-inspector {
    position: static;
    max-height: none;
  }
}

@media (max-width: 1100px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    max-height: none;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .hero,
  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .kpi-grid,
  .grid-2,
  .analysis-layout,
  .result-grid,
  .agent-grid,
  .module-grid,
  .command-board,
  .smart-panel-row,
  .department-room-grid,
  .messages-workspace,
  .message-edit-grid,
  .message-compose-grid,
  .forecast-hero,
  .forecast-kpi-grid,
  .forecast-visual-grid,
  .forecast-scenario-grid,
  .forecast-command-card {
    grid-template-columns: 1fr;
  }

  .span-2 {
    grid-column: auto;
  }

  .module-control-row,
  .module-stat-strip,
  .settings-grid,
  .integration-grid,
  .ai-provider-grid,
  .access-edit-grid,
  .decision-hero,
  .decision-grid,
  .decision-fields,
  .decision-fields.three,
  .decision-result-grid,
  .decision-context-grid,
  .portfolio-kpis {
    grid-template-columns: 1fr;
  }

  .decision-card.wide {
    grid-column: auto;
  }

  .access-profile-head {
    flex-direction: column;
  }

  .access-manager-stats {
    min-width: 0;
    width: 100%;
  }

  .forecast-command-grid,
  .forecast-section-head {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .view,
  .topbar {
    padding: 18px;
  }

  .hero,
  .panel {
    padding: 18px;
  }

  .topbar-title {
    font-size: 22px;
  }

  .hero h2 {
    font-size: 32px;
  }

  .forecast-hero,
  .forecast-table-section,
  .forecast-command-card,
  .forecast-scenario-card,
  .forecast-kpi-card {
    padding: 16px;
  }

  .forecast-compare-row {
    grid-template-columns: 36px minmax(90px, 1fr) 70px;
  }
}

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

.sidebar-section {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.sidebar-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  padding: 0 8px;
}

.interactive-card {
  text-align: left;
  cursor: pointer;
  appearance: none;
  width: 100%;
}

.workspace-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.workspace-toolbar-copy {
  color: var(--muted);
}

.small-btn {
  min-height: 36px;
  padding: 0 12px;
}

.row-action-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.table-input,
.table-textarea {
  width: 100%;
  min-width: 150px;
  border: 1px solid rgba(75, 57, 41, 0.14);
  background: rgba(255, 255, 255, 0.84);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 10px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

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

.table-input:focus,
.table-textarea:focus,
.table-select:focus {
  min-width: 260px;
  outline: 2px solid rgba(47, 106, 84, 0.18);
  border-color: rgba(47, 106, 84, 0.34);
  box-shadow: 0 10px 30px rgba(47, 106, 84, 0.08);
  position: relative;
  z-index: 3;
}

.assistant-chat {
  display: grid;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.assistant-message {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
}

.assistant-message div {
  white-space: pre-wrap;
  line-height: 1.55;
}

.assistant-message.user {
  background: rgba(190, 138, 47, 0.1);
}

.assistant-message.assistant {
  background: rgba(47, 106, 84, 0.08);
}

.assistant-compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-top: 16px;
}

.assistant-agent-shell {
  display: grid;
  gap: 18px;
}

.assistant-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 18px;
  align-items: stretch;
  padding: 22px;
  border: 1px solid rgba(47, 106, 84, 0.22);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(231, 246, 240, 0.72));
  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.06);
}

.assistant-hero-card h3 {
  margin: 4px 0 8px;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
}

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

.assistant-status-grid span,
.assistant-capability-grid div {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.assistant-status-grid strong {
  font-size: 1.25rem;
}

.assistant-capability-grid span {
  color: var(--muted);
  line-height: 1.45;
}

.assistant-command-card {
  display: grid;
  gap: 16px;
}

.assistant-section-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

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

.assistant-quick {
  border: 1px solid rgba(47, 106, 84, 0.22);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.88);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.assistant-quick:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 106, 84, 0.42);
  box-shadow: 0 14px 30px rgba(17, 24, 39, 0.08);
}

.assistant-agent-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  gap: 18px;
  align-items: start;
}

.assistant-side-panel {
  position: sticky;
  top: 110px;
  display: grid;
  gap: 16px;
}

.assistant-mini-list {
  display: grid;
  gap: 8px;
}

.assistant-linked-row {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  text-align: left;
  cursor: pointer;
}

.assistant-linked-row span {
  font-weight: 800;
}

.assistant-linked-row small {
  color: var(--muted);
}

.assistant-execution-panel {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid rgba(47, 106, 84, 0.28);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(232, 247, 241, 0.95), rgba(255, 255, 255, 0.92));
  box-shadow: 0 16px 44px rgba(17, 24, 39, 0.07);
}

.assistant-execution-panel h3 {
  margin: 4px 0 8px;
}

.assistant-execution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.assistant-execution-grid > div {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.assistant-execution-grid span {
  color: var(--muted);
}

.assistant-execution-actions {
  align-content: start;
}

.auth-user-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(47, 106, 84, 0.08);
  border: 1px solid rgba(47, 106, 84, 0.14);
  color: var(--forest);
  font-weight: 700;
  white-space: nowrap;
}

.system-alerts-panel {
  position: fixed;
  top: 18px;
  right: 18px;
  width: min(420px, calc(100vw - 24px));
  max-height: min(78vh, 760px);
  z-index: 58;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 251, 245, 0.96);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  transform: translateX(calc(100% + 26px));
  transition: transform 220ms ease;
}

.system-alerts-panel.open {
  transform: translateX(0);
}

.system-alerts-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.system-alerts-header h3 {
  margin: 4px 0 6px;
}

.system-alerts-header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.system-alerts-list {
  display: grid;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
}

.system-alert-item {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
}

.system-alert-item.warning {
  border-color: rgba(190, 138, 47, 0.18);
}

.system-alert-item.danger {
  border-color: rgba(175, 79, 71, 0.2);
  background: rgba(175, 79, 71, 0.06);
}

.system-alert-item.success {
  border-color: rgba(47, 106, 84, 0.18);
}

.system-alert-copy {
  display: grid;
  gap: 8px;
}

.system-alert-copy strong {
  font-size: 16px;
}

.system-alert-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.system-alert-actions {
  display: flex;
  justify-content: flex-end;
}

.toast-stack {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: grid;
  gap: 10px;
  width: min(560px, calc(100vw - 28px));
  pointer-events: none;
}

.toast {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 251, 245, 0.96);
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.toast.success {
  border-color: rgba(47, 106, 84, 0.18);
}

.toast.warning {
  border-color: rgba(190, 138, 47, 0.18);
}

.toast.danger {
  border-color: rgba(175, 79, 71, 0.2);
  background: rgba(255, 247, 246, 0.98);
}

.toast strong {
  display: block;
  margin-bottom: 4px;
}

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

.app-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(22, 19, 17, 0.42);
  backdrop-filter: blur(12px);
}

.app-modal-card {
  width: min(560px, 100%);
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 251, 245, 0.98);
  box-shadow: var(--shadow);
}

.app-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.app-modal-head h3 {
  margin: 4px 0 0;
}

.app-modal-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.app-modal-input-wrap {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.app-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: start center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(244, 239, 230, 0.82);
  backdrop-filter: blur(10px);
}

.auth-card {
  width: min(460px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  display: grid;
  gap: 18px;
  padding: 28px;
  margin: auto 0;
  border-radius: 30px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(190, 138, 47, 0.16), transparent 40%),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 28px 60px rgba(35, 30, 27, 0.16);
}

.auth-card h2 {
  margin: 4px 0 10px;
}

.auth-copy {
  color: var(--muted);
  line-height: 1.6;
}

.auth-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(246, 248, 250, 0.84);
}

.auth-mode-tab {
  border: 0;
  border-radius: 13px;
  padding: 11px 14px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.auth-mode-tab.active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-form label {
  display: grid;
  gap: 6px;
}

.auth-divider {
  height: 1px;
  background: var(--line);
  margin: 2px 0;
}

.auth-error {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(154, 52, 18, 0.16);
  background: rgba(154, 52, 18, 0.08);
  color: #9a3412;
  font-weight: 700;
}

.waitlist-card { position: relative; }
.waitlist-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.waitlist-close:hover { color: var(--ink); border-color: var(--ink); }
.waitlist-card textarea.input { resize: vertical; min-height: 52px; font: inherit; }
.waitlist-success {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(0, 112, 84, 0.22);
  background: rgba(232, 245, 239, 0.85);
  color: #0a5c46;
  line-height: 1.55;
}
.waitlist-success strong { font-size: 16px; }

.auth-verification-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(0, 112, 84, 0.18);
  border-radius: 20px;
  background: rgba(232, 245, 239, 0.78);
}

.auth-verification-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.auth-dev-link {
  display: block;
  margin-top: 6px;
  word-break: break-all;
  color: var(--accent);
  font-weight: 700;
}

.auth-demo-users {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.support-admin-btn {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 132px;
  padding: 14px 16px;
  border: 1px solid rgba(35, 30, 27, 0.16);
  border-radius: 18px;
  background: linear-gradient(135deg, #231e1b, #5f3a1f);
  color: #fff;
  box-shadow: 0 18px 40px rgba(35, 30, 27, 0.24);
  cursor: pointer;
}

.support-admin-btn span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
}

.support-admin-btn strong {
  font-size: 18px;
}

.support-admin-btn.active,
.support-admin-btn:hover {
  transform: translateY(-1px);
}

.support-admin-btn.busy {
  opacity: 0.88;
}

.support-admin-panel {
  position: fixed;
  top: 18px;
  right: 18px;
  bottom: 96px;
  width: min(420px, calc(100vw - 24px));
  z-index: 59;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(190, 138, 47, 0.14), transparent 38%),
    rgba(248, 243, 235, 0.96);
  box-shadow: 0 28px 60px rgba(35, 30, 27, 0.18);
  backdrop-filter: blur(14px);
  transform: translateX(calc(100% + 24px));
  transition: transform 180ms ease;
}

.support-admin-panel.open {
  transform: translateX(0);
}

.support-admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.support-admin-header h3 {
  margin: 2px 0 4px;
}

.support-admin-header p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Ten wrapping chips plus a 170px textarea were eating the whole panel, leaving the
   conversation as a two-line sliver with scrollbars on both axes. Cap the chips,
   guarantee the log some room, and lay the composer out as a real toolbar. */
.support-admin-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 124px;
  overflow-y: auto;
  padding-right: 4px;
  flex: 0 0 auto;
}

.support-admin-log {
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  gap: 10px;
  padding-right: 4px;
  min-height: 140px;
  align-content: start;
}

/* Buttons the assistant offers ("Open Command Center") were being clipped by the
   narrow panel; let them wrap and shrink instead. */
.support-admin-log .chip,
.support-admin-log .button {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.support-admin-compose {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.support-admin-compose .large-input {
  flex: 1 1 100%;
  min-height: 96px;
}
.support-admin-compose .voice-btn,
.support-admin-compose .voice-lang { flex: 0 0 auto; }
.support-admin-compose #support-admin-send {
  flex: 1 1 auto;
  margin-left: auto;
  min-width: 140px;
}
.support-admin-compose .voice-diag {
  flex: 1 1 100%;
  order: 9; /* keep the technical readout beneath the controls */
  margin-top: 0;
}

.support-admin-message {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-soft);
}

.support-admin-message.user {
  background: rgba(190, 138, 47, 0.1);
}

.support-admin-message.assistant {
  background: rgba(47, 106, 84, 0.07);
}

.support-admin-message strong {
  display: block;
  margin-bottom: 6px;
}

.support-admin-message p {
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--text);
}

.support-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.info-list {
  display: grid;
  gap: 12px;
}

.calendar-command {
  display: grid;
  gap: 18px;
}

.calendar-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 18px;
  align-items: stretch;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(190, 138, 47, 0.14), transparent 38%),
    rgba(255, 255, 255, 0.76);
  box-shadow: var(--shadow-soft);
}

.calendar-hero h3 {
  max-width: 780px;
  margin-bottom: 10px;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 0.98;
}

.calendar-hero p {
  max-width: 720px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

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

.calendar-kpi {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.calendar-kpi:hover {
  transform: translateY(-2px);
  border-color: rgba(35, 30, 27, 0.22);
  background: #fff;
}

.calendar-kpi span,
.calendar-kpi small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.calendar-kpi strong {
  display: block;
  margin: 8px 0 4px;
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--text);
}

.calendar-kpi.danger strong {
  color: #9a3412;
}

.calendar-shell {
  padding: 18px;
}

.calendar-toolbar {
  gap: 14px;
  align-items: flex-start;
}

.calendar-toolbar-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.calendar-person-select {
  display: grid;
  gap: 5px;
  min-width: 220px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.75fr);
  gap: 18px;
  align-items: start;
}

.calendar-month-panel {
  min-width: 0;
}

.calendar-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.calendar-head,
.calendar-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.calendar-head {
  margin-bottom: 10px;
}

.calendar-head-cell {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 0 6px;
}

.calendar-grid {
  display: grid;
  gap: 10px;
}

.calendar-cell {
  min-height: 130px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  padding: 10px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.calendar-cell.empty {
  background: rgba(35, 30, 27, 0.03);
}

.calendar-cell.today {
  border-color: rgba(47, 106, 84, 0.32);
  box-shadow: inset 0 0 0 1px rgba(47, 106, 84, 0.13);
}

.calendar-cell.selected {
  border-color: rgba(35, 30, 27, 0.42);
  background:
    linear-gradient(135deg, rgba(190, 138, 47, 0.12), rgba(255, 255, 255, 0.92)),
    #fff;
  box-shadow: 0 16px 34px rgba(35, 30, 27, 0.08);
}

.calendar-cell.has-items:hover {
  border-color: rgba(190, 138, 47, 0.38);
  background: #fff;
}

.calendar-day-hit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.calendar-date {
  font-weight: 700;
}

.calendar-count {
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(35, 30, 27, 0.08);
  color: var(--muted);
  font-size: 12px;
}

.calendar-items {
  display: grid;
  gap: 6px;
}

.calendar-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  width: 100%;
  min-height: 30px;
  border: 0;
  text-align: left;
  font-size: 13px;
  color: var(--text);
  background: rgba(190, 138, 47, 0.1);
  border-radius: 999px;
  padding: 6px 9px;
  cursor: pointer;
}

.calendar-item span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.calendar-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.calendar-item:hover {
  background: rgba(190, 138, 47, 0.18);
}

.calendar-item.danger {
  background: rgba(154, 52, 18, 0.12);
}

.calendar-item.done {
  background: rgba(47, 106, 84, 0.12);
}

.calendar-item.event {
  background: rgba(47, 106, 84, 0.09);
}

.calendar-more {
  border: 0;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}

.calendar-agenda {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.people-calendar-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(47, 106, 84, 0.07), rgba(255, 255, 255, 0.86)),
    rgba(255, 255, 255, 0.82);
  padding: 16px;
}

.people-calendar-summary,
.people-calendar-list {
  display: grid;
  gap: 8px;
}

.person-calendar-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  padding: 12px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.person-calendar-card:hover,
.person-calendar-card.active {
  border-color: rgba(35, 30, 27, 0.32);
  background: #fff;
  transform: translateY(-1px);
}

.person-calendar-card.all {
  align-items: center;
  background: rgba(35, 30, 27, 0.04);
}

.person-calendar-card span,
.person-calendar-card small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.person-calendar-card strong {
  display: block;
  margin: 3px 0;
  font-size: 15px;
}

.person-calendar-card.all strong {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
}

.person-status-block {
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 3px;
  min-width: 94px;
}

.person-status-block b {
  font-size: 13px;
}

.availability-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 0 4px rgba(35, 30, 27, 0.04);
}

.availability-dot.online {
  background: #2f6a54;
}

.availability-dot.focus {
  background: #be8a2f;
}

.availability-dot.busy {
  background: #9a3412;
}

.availability-dot.away {
  background: #8a8f86;
}

.capacity-meter {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(35, 30, 27, 0.08);
}

.capacity-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f6a54, #be8a2f 68%, #9a3412);
}

.agenda-head,
.agenda-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.agenda-head h3 {
  margin: 4px 0 0;
}

.calendar-quick-add,
.agenda-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  padding: 16px;
}

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

.calendar-create-grid label,
.agenda-edit-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.calendar-create-grid .wide {
  grid-column: 1 / -1;
}

.calendar-add-btn {
  width: 100%;
  margin-top: 12px;
}

.agenda-list {
  display: grid;
  gap: 12px;
}

.agenda-card {
  display: grid;
  gap: 12px;
}

.agenda-card.danger {
  border-color: rgba(154, 52, 18, 0.22);
  background: rgba(154, 52, 18, 0.04);
}

.agenda-card.done {
  border-color: rgba(47, 106, 84, 0.2);
  background: rgba(47, 106, 84, 0.05);
}

.agenda-card.busy {
  border-color: rgba(75, 57, 41, 0.18);
  background: repeating-linear-gradient(
    135deg,
    rgba(75, 57, 41, 0.045),
    rgba(75, 57, 41, 0.045) 8px,
    rgba(255, 255, 255, 0.72) 8px,
    rgba(255, 255, 255, 0.72) 16px
  );
}

.agenda-card h4 {
  margin: 2px 0 0;
  font-size: 18px;
  line-height: 1.15;
}

.agenda-card-head span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.agenda-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.agenda-time {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(35, 30, 27, 0.08);
  color: var(--text);
  font-weight: 700;
}

.agenda-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.mini-label.warning,
.badge.warning {
  background: rgba(190, 138, 47, 0.14);
  color: #8f6314;
}

.mini-label.success,
.badge.success {
  background: var(--forest-soft);
  color: var(--forest);
}

@media (max-width: 960px) {
  .assistant-hero-card,
  .assistant-agent-layout {
    grid-template-columns: 1fr;
  }

  .assistant-quick-grid,
  .assistant-status-grid,
  .assistant-capability-grid,
  .assistant-execution-grid {
    grid-template-columns: 1fr;
  }

  .assistant-side-panel {
    position: static;
  }

  .assistant-compose {
    grid-template-columns: 1fr;
  }

  .support-admin-panel {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 92px;
  }

  .system-alerts-panel {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: 56vh;
  }

  .toast-stack {
    width: calc(100vw - 24px);
  }

  .app-modal-card {
    padding: 18px;
  }

  .calendar-hero,
  .calendar-layout {
    grid-template-columns: 1fr;
  }

  .calendar-toolbar-actions {
    justify-content: stretch;
  }

  .calendar-person-select {
    width: 100%;
  }

  .calendar-kpis {
    grid-template-columns: 1fr;
  }

  .calendar-agenda {
    position: static;
  }

  .calendar-head,
  .calendar-row {
    grid-template-columns: 1fr;
  }

  .calendar-create-grid,
  .agenda-edit-grid {
    grid-template-columns: 1fr;
  }
}

/* Professional workspace polish */
:root {
  --bg: #f6f7f9;
  --bg-2: #eef1f4;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --line: #d9dee5;
  --line-strong: #c4cbd5;
  --text: #17202a;
  --muted: #667085;
  --gold: #b7791f;
  --gold-soft: rgba(183, 121, 31, 0.12);
  --copper: #b45309;
  --forest: #047857;
  --forest-soft: rgba(4, 120, 87, 0.1);
  --rose: #b42318;
  --rose-soft: rgba(180, 35, 24, 0.1);
  --ink: #111827;
  --shadow: 0 10px 28px rgba(16, 24, 40, 0.07);
  --radius-xl: 12px;
  --radius-lg: 10px;
  --radius-md: 8px;
  /* Design tokens used by board/KPI/filter components — mapped to the active theme */
  --surface: var(--panel);
  --surface-alt: var(--bg-2);
  --text-muted: var(--muted);
  --border: var(--line);
  --accent: #6366f1;
}

html,
body {
  background: var(--bg);
  color: var(--text);
}

body,
input,
select,
textarea,
button,
h1,
h2,
h3,
.topbar-title,
.kpi-value {
  font-family: "Segoe UI", "Aptos", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}

.shell {
  grid-template-columns: 284px minmax(0, 1fr);
}

.sidebar {
  padding: 20px 16px;
  background: #ffffff;
  border-right: 1px solid var(--line);
}

.brand-block {
  gap: 10px;
  margin-bottom: 22px;
  cursor: pointer;
  border-radius: 10px;
  transition: opacity 0.15s ease;
}
.brand-block:hover { opacity: 0.78; }
.brand-block:focus-visible { outline: 2px solid var(--accent, #2e6a54); outline-offset: 3px; }

.brand-mark {
  width: 40px;
  height: 40px;
  background: none;
}

.sidebar h1 {
  font-size: 20px;
  line-height: 1.1;
}

.brand-block .brand-tagline {
  margin-top: 5px;
  font-size: 9px;
  letter-spacing: 0.14em;
}

.sidebar-copy {
  margin: 14px 0 16px;
  font-size: 13px;
  line-height: 1.45;
}

.eyebrow,
.sidebar-search-label,
th,
.access-edit-grid label span,
.access-preset-row > span,
.access-section > span,
.calendar-create-grid label,
.agenda-edit-grid label,
.calendar-person-select,
.inspector-field span,
.inspector-section-title {
  letter-spacing: 0.04em;
}

.sidebar-search {
  padding: 10px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: #f8fafc;
}

.sidebar-search-input,
.input,
.table-input,
.table-textarea,
.table-select {
  border-radius: 8px;
  background: #ffffff;
  border-color: var(--line);
}

.sidebar-nav {
  display: grid;
  gap: 8px;
}

.sidebar-folder {
  border-radius: 8px;
  background: transparent;
}

.sidebar-folder-header {
  min-height: 40px;
  padding: 8px 10px;
  background: #f8fafc;
}

.folder-icon {
  min-width: 30px;
  height: 22px;
  border-radius: 6px;
  background: #eef2f7;
  color: #344054;
  font-size: 10px;
}

.nav-row {
  grid-template-columns: minmax(0, 1fr) 32px;
}

.nav-btn {
  min-height: 36px;
  border-radius: 7px;
  padding: 8px 10px;
}

.favorite-btn {
  min-height: 36px;
  border-radius: 7px;
}

.nav-btn.active,
.favorite-btn.active {
  background: #e8f3ff;
  border-color: #98c7f2;
  color: #0b4a7a;
}

.sidebar-footer {
  gap: 8px;
}

.status-pill,
.mini-label,
.badge {
  border-radius: 999px;
}

.main {
  background: var(--bg);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  align-items: flex-start;
  padding: 14px 22px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
}

.topbar-title {
  font-size: 22px;
  line-height: 1.2;
}

.topbar-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
}

.topbar-actions {
  justify-content: flex-end;
  gap: 8px;
  max-width: 720px;
}

.ghost-btn,
.button,
.chip,
.ghost-link,
.primary-link {
  min-height: 36px;
  border-radius: 8px;
}

.ghost-btn,
.chip,
.ghost-link {
  background: #ffffff;
  border-color: var(--line);
}

.chip.active {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

.table-load-more {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.button,
.primary-link {
  background: #111827;
  color: #ffffff;
}

.button.secondary {
  background: #eef2f7;
  color: #1d2939;
}

.danger-action {
  color: var(--rose);
  border-color: rgba(180, 35, 24, 0.22);
  background: #fff8f7;
}

.view {
  padding: 20px 22px 112px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  padding: 4px 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero.compact {
  padding: 4px 0 14px;
}

.hero h2 {
  margin: 4px 0 4px;
  max-width: 760px;
  font-size: 28px;
  line-height: 1.15;
}

.hero p {
  max-width: 760px;
  font-size: 14px;
  line-height: 1.5;
}

.kpi-grid,
.grid,
.agent-grid,
.module-grid {
  gap: 12px;
}

.kpi-grid {
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  margin-top: 0;
}

.grid-2,
.agent-grid {
  margin-top: 12px;
}

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

.kpi-card,
.panel,
.agent-card,
.module-card,
.timeline-item,
.run-card,
.analysis-card,
.record-inspector,
.calendar-quick-add,
.agenda-card,
.people-calendar-panel,
.calendar-month-panel,
.message-detail-card,
.message-composer,
.message-list-panel,
.message-people-panel {
  border-color: var(--line);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.kpi-card {
  min-height: 118px;
  border-radius: 10px;
  padding: 14px;
}

.interactive-kpi:hover {
  transform: none;
  border-color: #7bb7e8;
  box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
}

.kpi-label {
  font-size: 12px;
  font-weight: 600;
}

.kpi-value {
  margin-top: 6px;
  font-size: 28px;
  line-height: 1.05;
}

.kpi-note {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.4;
}

.panel,
.analysis-card {
  border-radius: 10px;
  padding: 16px;
  margin-top: 12px;
}

.panel-heading {
  margin-bottom: 10px;
}

.panel-heading h3 {
  font-size: 17px;
  line-height: 1.25;
}

.module-card,
.agent-card,
.timeline-item,
.run-card,
.list-item {
  border-radius: 8px;
}

.module-card {
  padding: 14px;
}

.module-card h3 {
  font-size: 15px;
}

.form-grid,
.stack,
.list-block,
.highlight-list,
.watch-list,
.report-list {
  gap: 10px;
}

.table-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 12px;
}

.table-card-enhanced {
  border-radius: 10px;
}

.table-heading,
.module-control-row,
.module-stat-strip {
  padding-left: 14px;
  padding-right: 14px;
}

.table-heading {
  padding-top: 14px;
}

.module-control-row {
  grid-template-columns: minmax(240px, 1fr) minmax(160px, auto);
  margin-bottom: 10px;
}

.module-stat-strip,
.smart-panel-row {
  gap: 8px;
}

.module-stat,
.smart-panel-card {
  border-radius: 8px;
  background: #f8fafc;
}

.table-wrap {
  max-height: calc(100vh - 330px);
  overflow: auto;
  border-top: 1px solid var(--line);
}

.data-table {
  min-width: 1040px;
}

.data-table th,
.data-table td {
  min-width: 138px;
  max-width: 300px;
  padding: 9px 8px;
  vertical-align: top;
}

.data-table th {
  background: #f8fafc;
  color: #475467;
  font-size: 11px;
}

.data-table tbody tr:hover,
.data-table tbody tr.selected-row {
  background: #f3f8ff;
}

.table-input,
.table-textarea,
.table-select {
  min-width: 132px;
  padding: 8px 9px;
  font-size: 13px;
}

.table-input:focus,
.table-textarea:focus,
.table-select:focus {
  min-width: 132px;
  outline: 2px solid rgba(46, 144, 250, 0.16);
  border-color: #84caff;
  box-shadow: none;
}

.table-textarea {
  min-height: 72px;
}

.row-open-btn {
  min-width: 30px;
  min-height: 30px;
  border-radius: 7px;
}

.row-action-stack {
  justify-content: flex-start;
}

.record-inspector {
  top: 78px;
  border-radius: 10px;
  padding: 14px;
  max-height: calc(100vh - 92px);
}

.inspector-header h3 {
  font-size: 18px;
}

.inspector-field,
.quick-action-card,
.related-card {
  border-radius: 8px;
}

.quick-action-card {
  background: #f0fdf9;
  border: 1px solid #c6f6df;
}

.linked-chip {
  border-radius: 999px;
}

.messages-workspace {
  gap: 12px;
}

.message-thread,
.message-person-card,
.message-detail-card,
.message-composer,
.message-people-panel,
.message-list-panel {
  border-radius: 10px;
}

.message-thread {
  padding: 11px;
}

.message-bubble {
  border-radius: 10px;
}

.calendar-command {
  gap: 12px;
}

.calendar-hero {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  padding: 16px;
  border-radius: 10px;
  background: #ffffff;
}

.calendar-hero h3 {
  font-size: 24px;
  line-height: 1.15;
}

.calendar-kpi,
.calendar-cell,
.calendar-quick-add,
.agenda-card,
.people-calendar-panel {
  border-radius: 10px;
}

.calendar-cell {
  min-height: 112px;
  padding: 8px;
}

.calendar-item {
  border-radius: 6px;
  min-height: 28px;
  background: #eef6ff;
}

.calendar-item.danger {
  background: #fff1f0;
}

.calendar-item.done,
.calendar-item.event {
  background: #ecfdf3;
}

.support-admin-btn {
  border-radius: 10px;
}

.support-admin-panel,
.system-alerts-panel,
.command-palette-card,
.app-modal-card {
  border-radius: 12px;
}

@media (max-width: 1180px) {
  .shell {
    grid-template-columns: 260px minmax(0, 1fr);
  }

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

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

  .table-workspace,
  .calendar-layout {
    grid-template-columns: 1fr;
  }

  .record-inspector,
  .calendar-agenda {
    position: static;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    min-height: auto;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .topbar,
  .hero,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .topbar {
    position: relative;
  }

  .topbar-actions,
  .hero-actions {
    justify-content: flex-start;
  }

  .view {
    padding: 16px;
  }

  .kpi-grid,
  .module-grid,
  .agent-grid,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .agent-command-layer,
  .agent-result-hero,
  .agent-command-metrics,
  .agent-readiness-grid,
  .agent-metric-strip,
  .ai-answer-brief-grid,
  .ai-visual-grid,
  .ai-brief-card-grid,
  .ai-direct-card,
  .ai-source-panel {
    grid-template-columns: 1fr;
  }

  .ai-direct-trace {
    justify-content: flex-start;
  }

  .ai-source-grid,
  .ai-decision-map {
    grid-template-columns: 1fr;
  }

  .ai-decision-map i {
    width: 2px;
    height: 22px;
    justify-self: center;
  }

  .hero h2 {
    font-size: 24px;
  }
}

/* Interaction and communication polish */
.favorite-btn {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  padding: 0;
  overflow: hidden;
  font-size: 18px;
  line-height: 1;
}

.messages-workspace {
  grid-template-columns: 270px minmax(340px, 0.9fr) minmax(420px, 1.15fr);
}

/* Remove duplicated module header — the topbar already shows the screen title. */
#view-workspace > .hero.compact {
  display: none;
}

#view-workspace > .panel:first-of-type {
  margin-top: 4px;
}

.messages-sidebar,
.message-list-panel,
.message-detail-panel,
.message-detail-card,
.message-composer {
  border-radius: 14px;
}

.message-thread {
  border-radius: 12px;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

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

.message-thread.active {
  border-color: rgba(20, 115, 99, 0.32);
  background: rgba(20, 115, 99, 0.07);
}

.message-thread:has(.badge.warning),
.thread-bubble.unread {
  border-left: 4px solid #b7791f;
}

.message-composer {
  background: rgba(255, 255, 255, 0.96);
}

.message-template-row .chip,
.message-detail-header .chip,
.message-list-panel .chip {
  min-height: 34px;
}

.linked-chip,
.related-card,
.smart-panel-card,
.clickable-list-item {
  cursor: pointer;
}

.unmatched-chip {
  cursor: default;
  background: rgba(120, 113, 108, 0.1);
  color: #57534e;
}

.danger-action {
  color: #8f2f2a;
  border-color: rgba(143, 47, 42, 0.18);
}

/* Topbar actions must not inherit sidebar navigation sizing. */
.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: none;
}

.topbar-actions .ghost-btn,
.topbar-actions .primary-link,
.topbar-actions .nav-btn {
  width: auto;
  min-width: auto;
  max-width: none;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 10px;
  white-space: nowrap;
  font-size: 13px;
}

.topbar-actions .primary-link.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}

.topbar-actions .nav-btn.active {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}

.topbar-actions #save-workspace-btn,
.topbar-actions #reset-workspace-btn {
  min-width: 82px;
}

.topbar-actions #dirty-indicator {
  flex: 0 0 auto;
}

.workspace-switcher {
  display: grid;
  grid-template-columns: auto minmax(170px, 240px) auto;
  gap: 8px;
  align-items: center;
  flex: 0 1 380px;
  padding: 6px 8px;
  border: 1px solid rgba(47, 106, 84, 0.16);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(47, 106, 84, 0.1), transparent 45%),
    rgba(255, 255, 255, 0.78);
}

.workspace-switcher label {
  color: var(--forest);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.workspace-select {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(75, 57, 41, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  padding: 8px 10px;
}

.workspace-create-btn {
  min-height: 38px !important;
  padding-inline: 12px !important;
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .topbar-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .workspace-switcher {
    grid-template-columns: 1fr;
    width: 100%;
    flex-basis: 100%;
  }
}

@media (max-width: 1280px) {
  .messages-workspace {
    grid-template-columns: 250px minmax(320px, 1fr);
  }

  .message-detail-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .messages-workspace,
  .message-compose-grid,
  .message-edit-grid {
    grid-template-columns: 1fr;
  }

  .span-2 {
    grid-column: auto;
  }
}

/* AI governance */
.ai-governance-workspace {
  display: grid;
  gap: 18px;
}

.ai-governance-panel {
  border-color: rgba(17, 24, 39, 0.12);
  background:
    radial-gradient(circle at top right, rgba(20, 115, 99, 0.10), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 244, 236, 0.92));
}

.ai-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.ai-mode-card {
  display: grid;
  gap: 8px;
  min-height: 170px;
  padding: 18px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.ai-mode-card:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(20, 115, 99, 0.34);
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.10);
}

.ai-mode-card.active {
  border-color: rgba(20, 115, 99, 0.55);
  background: linear-gradient(145deg, rgba(230, 244, 239, 0.98), rgba(255, 255, 255, 0.95));
  box-shadow: inset 0 0 0 1px rgba(20, 115, 99, 0.16);
}

.ai-mode-card:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.ai-mode-card strong {
  font-size: 20px;
}

.ai-mode-card span:last-child {
  color: var(--muted);
  line-height: 1.45;
}

.ai-governance-guardrail {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(143, 47, 42, 0.16);
  border-radius: 16px;
  background: rgba(255, 247, 237, 0.82);
  color: #5f2c13;
}

.ai-checkup-card .primary-btn {
  min-width: 170px;
}

.pm-control-tower {
  border-color: rgba(20, 115, 99, 0.18);
  background:
    radial-gradient(circle at top right, rgba(20, 115, 99, 0.10), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 249, 0.94));
}

.pm-control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.pm-score-card,
.pm-panel,
.pm-signal-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
}

.pm-score-card {
  min-height: 132px;
  padding: 18px;
}

.pm-score-card span,
.pm-panel-head .eyebrow {
  display: block;
  margin-bottom: 8px;
}

.pm-score-card strong {
  display: block;
  font-size: 24px;
  line-height: 1.1;
}

.pm-score-card p,
.pm-signal-card p,
.pm-workflow-list span {
  color: var(--muted);
  line-height: 1.45;
}

.pm-score-card.attention {
  border-color: rgba(191, 83, 44, 0.28);
  background: linear-gradient(145deg, rgba(255, 247, 237, 0.95), rgba(255, 255, 255, 0.94));
}

.pm-score-card.healthy {
  border-color: rgba(20, 115, 99, 0.24);
  background: linear-gradient(145deg, rgba(230, 244, 239, 0.96), rgba(255, 255, 255, 0.94));
}

.pm-control-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.pm-panel {
  padding: 18px;
}

.pm-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.pm-signal-bars {
  display: grid;
  gap: 12px;
}

.pm-signal-bar-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
  color: var(--muted);
}

.pm-signal-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.08);
}

.pm-signal-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #147363, #7ab8a8);
}

.pm-empty-strip {
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}

.pm-workflow-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-workflow-list li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.pm-workflow-list li:last-child {
  border-bottom: 0;
}

.pm-top-signals {
  margin-top: 16px;
}

.pm-signal-list {
  display: grid;
  gap: 12px;
}

.pm-signal-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
}

.pm-signal-card.high {
  border-color: rgba(191, 83, 44, 0.28);
  box-shadow: inset 4px 0 0 rgba(191, 83, 44, 0.42);
}

.pm-signal-card.medium {
  border-color: rgba(173, 113, 32, 0.22);
  box-shadow: inset 4px 0 0 rgba(173, 113, 32, 0.34);
}

.pm-signal-card.low {
  border-color: rgba(20, 115, 99, 0.18);
  box-shadow: inset 4px 0 0 rgba(20, 115, 99, 0.26);
}

.pm-signal-rank {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.06);
  font-weight: 800;
}

.pm-signal-body {
  display: grid;
  gap: 8px;
}

.pm-signal-body h4 {
  margin: 0;
  font-size: 18px;
}

.pm-signal-meta,
.pm-signal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pm-signal-action {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(20, 115, 99, 0.14);
  border-radius: 14px;
  background: rgba(230, 244, 239, 0.52);
}

.pm-signal-action span {
  color: var(--muted);
  line-height: 1.45;
}

.ai-action-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.ai-action-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
}

.ai-action-card h4 {
  margin: 10px 0 6px;
  font-size: 18px;
}

.ai-action-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.ai-action-card small {
  display: inline-block;
  margin-top: 10px;
  color: var(--muted);
}

.analysis-followup-card {
  margin-top: 18px;
  border-color: rgba(20, 115, 99, 0.18);
  background:
    radial-gradient(circle at top right, rgba(20, 115, 99, 0.10), transparent 34%),
    rgba(255, 255, 255, 0.94);
}

@media (max-width: 980px) {
  .pm-control-grid,
  .pm-control-columns {
    grid-template-columns: 1fr;
  }

  .pm-workflow-list li,
  .pm-signal-card {
    grid-template-columns: 1fr;
  }
}

.analysis-followup-log {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.analysis-followup-message {
  width: min(780px, 100%);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
}

.analysis-followup-message.user {
  justify-self: end;
  background: rgba(239, 246, 255, 0.9);
  border-color: rgba(37, 99, 235, 0.18);
}

.analysis-followup-message.assistant {
  justify-self: start;
  background: rgba(240, 247, 242, 0.92);
  border-color: rgba(20, 115, 99, 0.18);
}

.analysis-followup-message strong,
.analysis-followup-message span {
  display: block;
}

.analysis-followup-message span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.analysis-followup-message p {
  margin: 8px 0 0;
  line-height: 1.5;
  white-space: pre-wrap;
}

.analysis-followup-structured {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.analysis-followup-structured .ai-brief-card {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

.analysis-followup-structured .ai-brief-card h4 {
  font-size: 12px;
}

.analysis-followup-structured .ai-brief-card p,
.analysis-followup-structured .ai-brief-card li {
  font-size: 14px;
}

.analysis-followup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.analysis-followup-form {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.analysis-followup-compose-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.analysis-followup-compose-bar span {
  color: var(--muted);
  font-size: 13px;
}

.analysis-followup-submit {
  min-width: 168px;
  min-height: 46px;
  border: 1px solid rgba(15, 23, 42, 0.92);
  background: var(--ink);
  color: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}

.analysis-followup-submit:hover {
  filter: brightness(1.08);
}

.analysis-followup-form textarea {
  min-height: 92px;
  resize: vertical;
}

.compact-empty {
  min-height: auto;
  padding: 18px;
}

.table-action-cluster {
  align-items: center;
  justify-content: flex-end;
}

.file-upload-control {
  align-items: center;
  background: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.95);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.file-upload-control:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.file-upload-control.compact {
  border-radius: 12px;
  min-height: 34px;
  padding: 0 12px;
}

.file-upload-control.disabled {
  cursor: wait;
  opacity: 0.7;
}

.file-upload-control input {
  display: none;
}

.module-file-shelf {
  align-items: center;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.92), rgba(255, 255, 255, 0.96));
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 18px;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(220px, 0.8fr) 1.2fr;
  margin: 16px 0;
  padding: 16px;
}

.module-file-shelf strong {
  display: block;
  font-size: 18px;
  margin: 4px 0;
}

.module-file-shelf p {
  color: var(--muted);
  margin: 0;
}

.module-file-list,
.record-file-list {
  display: grid;
  gap: 8px;
}

.file-chip,
.file-row {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 2px;
  padding: 10px 12px;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.file-chip:hover,
.file-row:hover {
  border-color: rgba(0, 121, 107, 0.36);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.file-chip span,
.file-row span {
  font-weight: 800;
  overflow-wrap: anywhere;
}

.file-chip small,
.file-row small {
  color: var(--muted);
}

.record-file-panel {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 18px;
  margin: 18px 0;
  padding: 14px;
  background: rgba(248, 250, 252, 0.84);
}

.record-file-panel-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.record-file-panel-head small {
  color: var(--muted);
  display: block;
  margin-top: 2px;
}

.inline-title {
  margin: 0;
}

.file-preview-root {
  inset: 0;
  position: fixed;
  z-index: 3000;
}

.file-preview-backdrop {
  background: rgba(15, 23, 42, 0.48);
  inset: 0;
  position: absolute;
}

.file-preview-modal {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.26);
  display: grid;
  grid-template-rows: auto minmax(320px, 1fr);
  inset: 5vh 5vw;
  overflow: hidden;
  position: absolute;
}

.file-preview-head {
  align-items: flex-start;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 20px 24px;
}

.file-preview-head h3 {
  font-size: clamp(20px, 2vw, 30px);
  margin: 4px 0 6px;
  overflow-wrap: anywhere;
}

.file-preview-head p {
  color: var(--muted);
  margin: 0;
}

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

.file-preview-canvas,
.file-preview-empty {
  align-items: center;
  background: #f8fafc;
  display: flex;
  justify-content: center;
  min-height: 0;
  padding: 20px;
}

.file-preview-canvas img {
  border-radius: 16px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.16);
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.file-preview-frame {
  border: 0;
  height: 100%;
  width: 100%;
}

.file-preview-empty {
  align-content: center;
  color: var(--muted);
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.file-preview-empty strong {
  color: var(--ink);
  font-size: 20px;
}

/* AI Agents workspace polish */
#view-agents .agent-grid {
  align-items: start;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
}

#view-agents .agent-command-layer {
  align-items: start;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.5fr);
  min-height: 0;
  padding: 18px;
}

.agent-command-copy {
  align-content: start;
  display: grid;
  gap: 10px;
}

.agent-command-copy h3 {
  margin-bottom: 0;
}

.agent-command-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

#view-agents .agent-command-metrics {
  align-items: stretch;
}

#view-agents .agent-command-metric {
  align-content: space-between;
  max-height: 168px;
  min-height: 128px;
  overflow: hidden;
}

#view-agents .agent-command-metric strong {
  display: -webkit-box;
  font-size: 19px;
  line-height: 1.18;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#view-agents .agent-command-metric small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

#view-agents .recent-run-metric strong {
  font-size: 15px;
}

#view-agents .agent-card-pro {
  align-content: start;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 249, 0.94)),
    radial-gradient(circle at top right, rgba(47, 106, 84, 0.08), transparent 38%);
  border-radius: 12px;
  gap: 12px;
  min-height: 330px;
  padding: 16px;
}

#view-agents .agent-card-pro h3 {
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
}

#view-agents .agent-card-pro > p,
#view-agents .agent-operating-brief span,
#view-agents .run-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

#view-agents .agent-card-pro > p {
  min-height: 42px;
  -webkit-line-clamp: 2;
}

#view-agents .agent-operating-brief span {
  -webkit-line-clamp: 3;
}

#view-agents .agent-source-row {
  min-height: 34px;
}

#view-agents .agent-actions {
  margin-top: auto;
}

#view-agents .run-preview {
  -webkit-line-clamp: 3;
}

@media (max-width: 1320px) {
  #view-agents .agent-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  #view-agents .agent-command-layer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .ai-mode-grid,
  .metric-grid.three {
    grid-template-columns: 1fr;
  }

  .ai-action-card {
    grid-template-columns: 1fr;
  }

  .analysis-followup-compose-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .analysis-followup-submit {
    width: 100%;
  }

  .module-file-shelf {
    grid-template-columns: 1fr;
  }

  .record-file-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .file-preview-modal {
    inset: 2vh 2vw;
  }

  .file-preview-head {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ===== Recruitment: pipeline + tech stack ===== */
.recruitment-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.recruitment-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.recruitment-head h3 {
  margin: 0 0 2px;
  font-size: 1.05rem;
  font-weight: 650;
}

.recruitment-head .muted {
  font-size: 0.82rem;
  color: var(--text-muted, #6b7280);
}

/* Pipeline */
.pipeline-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.pipeline-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pipeline-stage-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pipeline-stage-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #6366f1) 16%, transparent);
  color: var(--accent, #6366f1);
  font-size: 0.78rem;
  font-weight: 700;
  flex: none;
}

.pipeline-connector {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #6366f1) 40%, transparent), transparent);
}

.pipeline-stage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  min-height: 132px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  font: inherit;
  color: inherit;
}

.pipeline-stage-card:hover {
  border-color: color-mix(in srgb, var(--accent, #6366f1) 45%, transparent);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.pipeline-stage-card.is-active {
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #6366f1) 30%, transparent);
}

/* KPI strip */
.rec-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.rec-kpi {
  position: relative;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  overflow: hidden;
}

.rec-kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--kpi, #6366f1);
}

.rec-kpi-value {
  font-size: 1.55rem;
  font-weight: 720;
  line-height: 1.1;
  color: var(--kpi, #6366f1);
}

.rec-kpi-label {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #6b7280);
  margin-top: 4px;
}

/* Progress bar in stage */
.pipeline-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--surface-alt, #f3f4f6);
  overflow: hidden;
}

.pipeline-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent, #6366f1);
  min-width: 4px;
}

.pipeline-empty {
  font-size: 0.74rem;
  color: var(--text-muted, #9ca3af);
  font-style: italic;
}

/* Avatars */
.rec-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--av, #6366f1);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex: none;
}

.rec-avatar-sm {
  width: 24px;
  height: 24px;
  font-size: 0.62rem;
  border: 2px solid var(--surface, #fff);
  margin-left: -6px;
}

.rec-avatar-row {
  display: flex;
  align-items: center;
  padding-left: 6px;
}

.rec-avatar-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 7px;
  margin-left: -6px;
  border-radius: 999px;
  background: var(--surface-alt, #eef0f3);
  color: var(--text-muted, #6b7280);
  font-size: 0.66rem;
  font-weight: 700;
  border: 2px solid var(--surface, #fff);
}

/* Drill-down candidate panel */
.rec-drill-hint {
  font-size: 0.82rem;
  color: var(--text-muted, #9ca3af);
  padding: 6px 2px;
}

.rec-drill {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  background: var(--surface, #fff);
  padding: 16px;
}

.rec-drill-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.rec-drill-head h4 {
  margin: 0 0 2px;
  font-size: 0.98rem;
  font-weight: 650;
}

.rec-candidate-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rec-candidate {
  display: grid;
  grid-template-columns: auto minmax(140px, 1.4fr) minmax(120px, 1fr) minmax(120px, 1.2fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border, #eceef1);
  background: var(--surface-alt, #fafbfc);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .12s, background .12s;
}

.rec-candidate:hover {
  border-color: color-mix(in srgb, var(--accent, #6366f1) 40%, transparent);
  background: var(--surface, #fff);
}

.rec-candidate-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rec-candidate-main strong {
  font-size: 0.88rem;
  font-weight: 620;
}

.rec-candidate-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.rec-rating {
  font-size: 0.74rem;
  font-weight: 700;
  color: #d97706;
}

.rec-tag,
.rec-owner {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-alt, #eef0f3);
  color: var(--text-muted, #6b7280);
}

.rec-candidate-next {
  font-size: 0.78rem;
  color: var(--text-muted, #6b7280);
  text-align: right;
}

/* Filter pills (tools) */
.rec-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rec-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text, #374151);
  cursor: pointer;
  transition: all .12s;
}

.rec-pill span {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-alt, #eef0f3);
  color: var(--text-muted, #6b7280);
}

.rec-pill:hover {
  border-color: color-mix(in srgb, var(--accent, #6366f1) 45%, transparent);
}

.rec-pill.is-active {
  background: var(--accent, #6366f1);
  border-color: var(--accent, #6366f1);
  color: #fff;
}

.rec-pill.is-active span {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.tool-cat-tag {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #6366f1) 10%, transparent);
  color: var(--accent, #6366f1);
}

.tool-status.is-muted {
  background: var(--surface-alt, #f3f4f6);
  color: var(--text-muted, #6b7280);
}

.pipeline-stage-count {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 1.35rem;
  font-weight: 720;
  line-height: 1;
  color: var(--accent, #6366f1);
}

.pipeline-stage-card strong {
  font-size: 0.92rem;
  font-weight: 640;
  padding-right: 34px;
}

.pipeline-stage-card p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
  flex: 1;
}

.pipeline-stage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pipeline-owner,
.pipeline-sla {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}

.pipeline-owner {
  background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent);
  color: var(--accent, #6366f1);
}

.pipeline-sla {
  background: var(--surface-alt, #f3f4f6);
  color: var(--text-muted, #6b7280);
}

/* Tools stack */
.tools-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.tools-category-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6b7280);
}

.tools-category-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-alt, #f3f4f6);
  font-size: 0.72rem;
  letter-spacing: 0;
}

.tools-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.tool-card {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.tool-card:hover {
  border-color: color-mix(in srgb, var(--accent, #6366f1) 45%, transparent);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.tool-edit-hint {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent);
  color: var(--accent, #6366f1);
  opacity: 0;
  transition: opacity .15s;
}

.tool-card:hover .tool-edit-hint {
  opacity: 1;
}

/* ===== Candidate + Position boards ===== */
.rec-avatar-xs {
  width: 20px;
  height: 20px;
  font-size: 0.56rem;
}

/* ===== Table view polish: clean, Airtable-style cells =====
   Cells read as plain text; the edit field only appears on hover/focus.
   Scoped to .data-table so the record inspector keeps its visible fields. */
.data-table td .table-input,
.data-table td .table-textarea,
.data-table td .table-select {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  box-shadow: none;
  transition: background .12s ease, border-color .12s ease;
}

.data-table td .table-textarea {
  min-height: 34px;
  resize: none;
  line-height: 1.4;
}

/* Whole-cell hover hint so it's clear the value is editable */
.data-table tbody td:hover .table-input,
.data-table tbody td:hover .table-textarea,
.data-table tbody td:hover .table-select {
  background: #f4f7fb;
  border-color: #e3e8ef;
}

.data-table td .table-input:focus,
.data-table td .table-textarea:focus,
.data-table td .table-select:focus {
  background: #ffffff;
  border-color: #84caff;
  outline: 2px solid rgba(46, 144, 250, 0.16);
  min-width: 0;
}

.data-table td .table-textarea:focus {
  min-height: 84px;
  resize: vertical;
}

/* Tighter rows now that cells are flat */
.data-table th,
.data-table td {
  padding: 4px 6px;
}

.data-table tbody tr {
  transition: background .1s ease;
}

/* Row open + delete affordances are subtle until row hover */
.data-table tbody td .row-action-stack .ghost-btn {
  opacity: 0.55;
  transition: opacity .12s ease;
}
.data-table tbody tr:hover .row-action-stack .ghost-btn {
  opacity: 1;
}

/* Primary "New record" chip stands out from secondary chips */
.chip.chip-primary {
  background: var(--accent, #2e6a54);
  border-color: var(--accent, #2e6a54);
  color: #ffffff;
  font-weight: 600;
}
.chip.chip-primary:hover {
  filter: brightness(1.06);
}

/* Delete affordances */
.ghost-btn.danger-btn {
  color: #b42318;
  border-color: #fda29b;
  background: #fff5f4;
}
.ghost-btn.danger-btn:hover {
  background: #fee4e2;
  border-color: #f97066;
}

.inspector-danger {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e5e7eb);
  display: flex;
  justify-content: flex-end;
}

.rec-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--sc, #6b7280);
  margin-right: 2px;
}

.rec-person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.rec-person-card,
.rec-pos-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.rec-person-card:hover,
.rec-pos-card:hover {
  border-color: color-mix(in srgb, var(--accent, #6366f1) 45%, transparent);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.rec-person-card:hover .tool-edit-hint,
.rec-pos-card:hover .tool-edit-hint {
  opacity: 1;
}

.rec-person-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rec-person-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rec-person-id strong {
  font-size: 0.9rem;
  font-weight: 640;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rec-person-id .muted {
  font-size: 0.78rem;
}

.rec-stage-badge {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sc, #6b7280) 16%, transparent);
  color: color-mix(in srgb, var(--sc, #6b7280) 80%, #1f2937);
}

.rec-person-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.rec-person-next {
  font-size: 0.78rem;
  color: var(--text-muted, #6b7280);
  line-height: 1.35;
}

.rec-person-owner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--text-muted, #6b7280);
  margin-top: auto;
}

/* Positions */
.rec-pos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.rec-pos-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.rec-pos-head strong {
  font-size: 0.92rem;
  font-weight: 640;
  padding-right: 30px;
}

.rec-priority {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pc, #6b7280) 16%, transparent);
  color: var(--pc, #6b7280);
  flex: none;
}

.rec-pos-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.rec-status-dot {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-alt, #f3f4f6);
  color: var(--text-muted, #6b7280);
}

.rec-status-dot.is-open {
  background: color-mix(in srgb, #22c55e 16%, transparent);
  color: #15803d;
}

.rec-pos-stats {
  display: flex;
  gap: 10px;
}

.rec-pos-stats > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-alt, #f7f8fa);
}

.rec-pos-stats b {
  font-size: 1.1rem;
  font-weight: 720;
  color: var(--accent, #6366f1);
}

.rec-pos-stats span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
}

.rec-pos-posted {
  font-size: 0.72rem;
  color: var(--text-muted, #9ca3af);
}

/* CRM extras */
.rec-prob {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #6366f1 12%, transparent);
  color: #6366f1;
}

.rec-more-note {
  font-size: 0.8rem;
  color: var(--text-muted, #9ca3af);
  padding: 6px 2px;
  text-align: center;
}

.doc-access {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-alt, #f3f4f6);
  color: var(--text-muted, #6b7280);
}

/* ===== Opportunities deal pipeline (Kanban) ===== */
.opp-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  align-items: flex-start;
}

.opp-column {
  flex: 0 0 268px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-alt, #f7f8fa);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 12px;
  max-height: calc(100vh - 300px);
}

.opp-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--col, #6366f1);
}

.opp-column-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 650;
}

.opp-column-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--col, #6366f1) 16%, transparent);
  color: var(--col, #6366f1);
  font-size: 0.7rem;
  font-weight: 700;
}

.opp-column-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--col, #6366f1);
}

.opp-column-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.opp-column-empty {
  font-size: 0.78rem;
  color: var(--text-muted, #9ca3af);
  font-style: italic;
  padding: 8px 4px;
}

.opp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.opp-card:hover {
  border-color: color-mix(in srgb, var(--accent, #6366f1) 45%, transparent);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.opp-card:hover .tool-edit-hint {
  opacity: 1;
}

.opp-card strong {
  font-size: 0.86rem;
  font-weight: 640;
  padding-right: 30px;
}

.opp-card .muted {
  font-size: 0.76rem;
}

.opp-value {
  font-size: 1.05rem;
  font-weight: 720;
  color: var(--text, #111827);
}

.opp-prob {
  display: flex;
  align-items: center;
  gap: 8px;
}

.opp-prob .pipeline-bar {
  flex: 1;
}

.opp-prob span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
}

/* ===== Generic board (universal module cards) ===== */
.gb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 12px;
}

.gb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.gb-card:hover {
  border-color: color-mix(in srgb, var(--accent, #6366f1) 45%, transparent);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.gb-card:hover .tool-edit-hint {
  opacity: 1;
}

.gb-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gb-card-top .rec-person-id strong {
  font-size: 0.9rem;
  font-weight: 640;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gb-card-top .rec-person-id .muted {
  font-size: 0.78rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gb-money {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text, #111827);
}

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

.gb-chip {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-alt, #f3f4f6);
  color: var(--text-muted, #6b7280);
}

.gb-card.analytics-card-static {
  cursor: default;
}

.gb-card.analytics-card-static:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border, #e5e7eb);
}

.analytics-completion {
  display: flex;
  align-items: center;
  gap: 10px;
}

.analytics-completion .pipeline-bar {
  flex: 1;
}

.tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--av, var(--accent, #6366f1)) 16%, transparent);
  color: var(--av, var(--accent, #6366f1));
  font-size: 1.05rem;
  font-weight: 700;
  flex: none;
}

.tool-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tool-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-title-row strong {
  font-size: 0.9rem;
  font-weight: 640;
}

.tool-status {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, #22c55e 16%, transparent);
  color: #15803d;
}

.tool-body p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
}

.tool-owner {
  font-size: 0.72rem;
  color: var(--text-muted, #6b7280);
}

/* ===== Board polish: empty states, module cards ===== */
/* Empty state should span the full width when it lands inside a card grid */
.gb-grid > .empty-state,
.rec-person-grid > .empty-state,
.rec-pos-grid > .empty-state,
.tools-cards > .empty-state,
.pipeline-flow > .empty-state,
.opp-board > .empty-state {
  grid-column: 1 / -1;
  width: 100%;
}

.recruitment-page .empty-state {
  border: 1px dashed color-mix(in srgb, var(--accent, #6366f1) 30%, var(--border, #e5e7eb));
  background: var(--surface, #fff);
}

/* Overview "all modules" cards — tighter, with hover lift consistent with boards */
.module-card.interactive-card {
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.module-card.interactive-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  border-color: color-mix(in srgb, var(--accent, #6366f1) 40%, transparent);
}

/* ===== Responsive: new board components on tablet / mobile ===== */
@media (max-width: 900px) {
  .rec-kpis {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  .recruitment-head {
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .rec-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .rec-kpi {
    padding: 12px 12px 12px 14px;
  }
  .rec-kpi-value {
    font-size: 1.3rem;
  }
  .gb-grid,
  .rec-person-grid,
  .rec-pos-grid,
  .tools-cards,
  .pipeline-flow {
    grid-template-columns: 1fr;
  }
  .opp-column {
    flex-basis: 84vw;
    max-height: none;
  }
  /* Airtable filter rows stack vertically so selects/inputs stay tappable */
  .task-filter-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .task-filter-row .input {
    flex: 1 1 100%;
    min-width: 0;
  }
  .task-filter-join {
    flex: 0 0 auto;
  }
  .rec-filter-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .rec-pill {
    flex: 0 0 auto;
  }
  .recruitment-head {
    flex-direction: column;
  }
  .rec-candidate {
    grid-template-columns: auto 1fr;
  }
  .rec-candidate-meta,
  .rec-candidate-next {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* ===== Accessibility: visible keyboard focus for interactive board elements ===== */
.gb-card:focus-visible,
.tool-card:focus-visible,
.rec-person-card:focus-visible,
.rec-pos-card:focus-visible,
.opp-card:focus-visible,
.pipeline-stage-card:focus-visible,
.rec-candidate:focus-visible,
.rec-pill:focus-visible,
.kpi-card.interactive-kpi:focus-visible,
.module-card.interactive-card:focus-visible,
.task-filter-remove:focus-visible,
.recruitment-page .chip:focus-visible {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 2px;
  border-color: var(--accent, #6366f1);
}

/* Respect reduced-motion preference for the card hover transitions */
@media (prefers-reduced-motion: reduce) {
  .gb-card,
  .tool-card,
  .rec-person-card,
  .rec-pos-card,
  .opp-card,
  .pipeline-stage-card,
  .rec-candidate,
  .rec-pill,
  .module-card.interactive-card,
  .kpi-card.interactive-kpi {
    transition: none;
  }
  .gb-card:hover,
  .tool-card:hover,
  .rec-person-card:hover,
  .rec-pos-card:hover,
  .opp-card:hover,
  .pipeline-stage-card:hover,
  .module-card.interactive-card:hover {
    transform: none;
  }
}

/* ===== Drag & drop (Kanban: Tasks + Opportunities) ===== */
.task-card[draggable="true"],
.opp-card[draggable="true"] {
  cursor: grab;
}

.task-card.is-dragging,
.opp-card.is-dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.tasks-column.drop-active,
.opp-column.drop-active {
  outline: 2px dashed var(--accent, #6366f1);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--accent, #6366f1) 8%, var(--surface-alt, #f3f4f6));
}

/* ===== Board controls row: filters + sort ===== */
.board-controls {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.board-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.board-sort-select {
  height: 34px;
  padding: 4px 10px;
  font-size: 0.82rem;
  border-radius: 999px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--text, #374151);
  cursor: pointer;
}

.board-sort-dir {
  white-space: nowrap;
}

/* Inline add button in Kanban columns */
.kanban-add {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: 1px dashed var(--border, #d9dee5);
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted, #6b7280);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.kanban-add:hover {
  border-color: var(--accent, #6366f1);
  color: var(--accent, #6366f1);
  background: color-mix(in srgb, var(--accent, #6366f1) 6%, transparent);
}

.kanban-add:focus-visible {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 2px;
}

/* ===== Bulk actions ===== */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #6366f1) 8%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 30%, transparent);
}

.bulk-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent, #6366f1);
  white-space: nowrap;
}

.bulk-set-label {
  font-size: 0.8rem;
  color: var(--text-muted, #6b7280);
}

.bulk-value {
  height: 32px;
  width: 130px;
  padding: 4px 10px;
  font-size: 0.82rem;
  border-radius: 8px;
}

.chip.bulk-danger {
  color: #b42318;
  border-color: color-mix(in srgb, #b42318 35%, transparent);
}

.chip.bulk-danger:hover:not([disabled]) {
  background: color-mix(in srgb, #b42318 10%, transparent);
}

.chip[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Selected card state in bulk mode */
.gb-card.is-selected,
.rec-person-card.is-selected,
.rec-pos-card.is-selected,
.tool-card.is-selected {
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #6366f1) 35%, transparent);
}

.gb-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--border, #d9dee5);
  background: var(--surface, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
}

.gb-check.on {
  background: var(--accent, #6366f1);
  border-color: var(--accent, #6366f1);
}

/* ===== Grouped board ===== */
.gb-group {
  margin-bottom: 18px;
}

.gb-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 4px;
  margin-bottom: 10px;
  border: none;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: transparent;
  font: inherit;
  color: var(--text, #111827);
  cursor: pointer;
  text-align: left;
}

.gb-group-head strong {
  font-size: 0.92rem;
  font-weight: 650;
}

.gb-group-caret {
  font-size: 0.7rem;
  color: var(--text-muted, #6b7280);
  width: 12px;
}

.gb-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-alt, #f3f4f6);
  color: var(--text-muted, #6b7280);
  font-size: 0.72rem;
  font-weight: 700;
}

.gb-group-head:hover {
  border-color: var(--accent, #6366f1);
}

.gb-group-head:focus-visible {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 2px;
}

/* ===== Color labels + inline rename ===== */
.gb-stripe {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

.gb-swatch {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--border, #d9dee5);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, transform .12s;
  z-index: 2;
}

.gb-card:hover .gb-swatch,
.rec-person-card:hover .gb-swatch,
.rec-pos-card:hover .gb-swatch,
.tool-card:hover .gb-swatch {
  opacity: 1;
}

/* Keep an assigned color visible even without hover */
.gb-swatch:not([style*="transparent"]) {
  opacity: 1;
  border-color: transparent;
}

.gb-swatch:hover {
  transform: scale(1.15);
}

[data-rename] {
  border-radius: 5px;
  padding: 0 2px;
  margin: 0 -2px;
}

[data-rename]:not(.renaming):hover {
  background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent);
  cursor: text;
}

[data-rename].renaming {
  outline: 2px solid var(--accent, #6366f1);
  background: var(--surface, #fff);
  cursor: text;
}

/* ===== AI agent loading indicator ===== */
.agent-run-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.agent-loading-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agent-loading-head strong {
  font-size: 0.95rem;
}

.agent-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--accent, #6366f1) 25%, transparent);
  border-top-color: var(--accent, #6366f1);
  animation: agent-spin 0.7s linear infinite;
  flex: none;
}

@keyframes agent-spin {
  to { transform: rotate(360deg); }
}

.agent-elapsed {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
}

.agent-phase {
  font-size: 0.85rem;
  color: var(--text-muted, #6b7280);
}

.agent-loading-bar {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-alt, #f3f4f6);
  overflow: hidden;
}

.agent-loading-bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 35%;
  border-radius: 999px;
  background: var(--accent, #6366f1);
  animation: agent-bar 1.3s ease-in-out infinite;
}

@keyframes agent-bar {
  0% { left: -35%; }
  100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-spinner { animation-duration: 1.6s; }
  .agent-loading-bar span { animation: none; left: 0; width: 100%; opacity: 0.55; }
}

/* Deep-link entity mentions inside AI answers */
.ai-entity-link {
  display: inline;
  border: none;
  background: none;
  padding: 0 1px;
  margin: 0;
  font: inherit;
  color: var(--accent, #6366f1);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent, #6366f1) 55%, transparent);
  text-decoration: none;
}

.ai-entity-link:hover {
  border-bottom-style: solid;
  background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent);
  border-radius: 4px;
}

.ai-entity-link:focus-visible {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 1px;
  border-radius: 4px;
}

/* ===== Agentic RAG: Sources & Evidence panel ===== */
.rag-sources {
  border-left: 4px solid var(--accent, #6366f1);
}

.rag-sources-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.rag-sources-head h3 {
  margin: 0;
}

.rag-sources-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 18px;
}

.rag-col h4 {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #6b7280);
}

.rag-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  font: inherit;
  font-size: 0.78rem;
  color: var(--text, #374151);
  max-width: 100%;
}

.rag-chip em {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent, #6366f1);
  background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent);
  padding: 1px 6px;
  border-radius: 999px;
}

.rag-chip.clickable {
  cursor: pointer;
  transition: border-color .12s, background .12s;
}

.rag-chip.clickable:hover {
  border-color: var(--accent, #6366f1);
  background: color-mix(in srgb, var(--accent, #6366f1) 8%, transparent);
}

.rag-chip.clickable:focus-visible {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 2px;
}

.rag-web-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rag-web-list li {
  font-size: 0.82rem;
}

.rag-web-list a {
  color: var(--accent, #6366f1);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent, #6366f1) 45%, transparent);
}

.rag-web-list a:hover {
  border-bottom-style: solid;
}

.rag-web-list small {
  display: block;
  color: var(--text-muted, #6b7280);
  font-size: 0.74rem;
  margin-top: 1px;
}

@media (max-width: 760px) {
  .rag-sources-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== CRM funnel + Finance trend visualizations ===== */
.funnel-card {
  border-left: 4px solid var(--accent, #6366f1);
}

.funnel-title {
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #6b7280);
}

.crm-funnel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.crm-funnel-row {
  display: grid;
  grid-template-columns: 150px 1fr 96px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .12s, border-color .12s;
}

.crm-funnel-row:hover {
  background: var(--surface-alt, #f7f8fa);
  border-color: var(--border, #e5e7eb);
}

.crm-funnel-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-funnel-track {
  height: 16px;
  border-radius: 999px;
  background: var(--surface-alt, #f0f1f4);
  overflow: hidden;
}

.crm-funnel-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  min-width: 6px;
}

.crm-funnel-val {
  font-size: 0.8rem;
  color: var(--text-muted, #6b7280);
  text-align: right;
  white-space: nowrap;
}

.crm-funnel-val b {
  color: var(--text, #111827);
}

.crm-funnel-conv {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted, #9ca3af);
  padding-left: 158px;
}

/* Finance trend */
.fin-trend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.fin-legend {
  display: flex;
  gap: 12px;
}

.fin-key {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.fin-key::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.fin-key.inc::before { background: #10b981; }
.fin-key.exp::before { background: #ef4444; }

.fin-trend {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 140px;
  padding-top: 8px;
  overflow-x: auto;
}

.fin-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 42px;
  height: 100%;
}

.fin-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  width: 100%;
  flex: 1;
}

.fin-bars span {
  width: 12px;
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}

.fin-bars .inc { background: #10b981; }
.fin-bars .exp { background: #ef4444; }

.fin-month small {
  font-size: 0.68rem;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .crm-funnel-row { grid-template-columns: 110px 1fr 70px; }
  .crm-funnel-conv { padding-left: 118px; }
}

/* ===== Decision Engine: data-grounded recommendation cards ===== */
.decision-rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.decision-rec {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-top-width: 4px;
  background: var(--surface, #fff);
}

.decision-rec.success { border-top-color: #10b981; }
.decision-rec.warning { border-top-color: #f59e0b; }
.decision-rec.danger { border-top-color: #ef4444; }

.decision-rec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.decision-rec-head span {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #6b7280);
}

.decision-rec-headline {
  font-size: 1.15rem;
  font-weight: 720;
  line-height: 1.2;
}

.decision-rec-reason {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted, #6b7280);
  line-height: 1.45;
}

.decision-rec-move {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #eceef1);
}

.decision-rec-move span {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #9ca3af);
}

.decision-rec-move p {
  margin: 3px 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
}

.decision-rec .chip {
  align-self: flex-start;
  margin-top: 4px;
}

/* ===== Decision Engine executive takeaways ===== */
.decision-takeaways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin: 4px 0 18px;
}

.decision-takeaway {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.4;
  border: 1px solid var(--border, #e5e7eb);
  border-left-width: 4px;
  background: var(--surface, #fff);
}

.decision-takeaway .dt-icon { flex: none; font-size: 1rem; }
.decision-takeaway.success { border-left-color: #10b981; background: color-mix(in srgb, #10b981 6%, var(--surface, #fff)); }
.decision-takeaway.warning { border-left-color: #f59e0b; background: color-mix(in srgb, #f59e0b 6%, var(--surface, #fff)); }
.decision-takeaway.danger { border-left-color: #ef4444; background: color-mix(in srgb, #ef4444 6%, var(--surface, #fff)); }

/* ===== Finance: charts layout + spend-by-category breakdown ===== */
.fin-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 4px;
}

.fin-charts .funnel-card { margin: 0; }

.fin-breakdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
}

.fin-cat-row {
  display: grid;
  grid-template-columns: 110px 1fr 110px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .12s, border-color .12s;
}

.fin-cat-row:hover {
  background: var(--surface-alt, #f7f8fa);
  border-color: var(--border, #e5e7eb);
}

.fin-cat-name {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fin-cat-track {
  height: 12px;
  border-radius: 999px;
  background: var(--surface-alt, #f0f1f4);
  overflow: hidden;
}

.fin-cat-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #ef4444;
  min-width: 4px;
}

.fin-cat-val {
  font-size: 0.78rem;
  color: var(--text-muted, #6b7280);
  text-align: right;
  white-space: nowrap;
}

.fin-cat-val b { color: var(--text, #111827); }

/* Income / revenue bars use green to distinguish from red spend bars */
.fin-cat-inc .fin-cat-fill { background: #10b981; }

.fin-cat-more {
  padding: 7px 8px 2px;
  font-size: 0.78rem;
  text-align: right;
}

/* Profit & loss statement (common-size income statement) */
.pnl {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 4px;
}

.pnl-row {
  display: grid;
  grid-template-columns: 1fr auto 56px;
  align-items: baseline;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 0.86rem;
}

.pnl-label { color: var(--text, #111827); }
.pnl-amt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text, #111827); }
.pnl-pct { font-variant-numeric: tabular-nums; text-align: right; color: var(--text-muted, #6b7280); font-size: 0.8rem; }

.pnl-rev .pnl-amt { color: #059669; }
.pnl-cost { color: var(--text-muted, #6b7280); }
.pnl-cost .pnl-amt { color: #dc2626; }

.pnl-subtotal {
  border-top: 1px solid var(--border, #e5e7eb);
  margin-top: 2px;
}
.pnl-subtotal .pnl-label,
.pnl-subtotal .pnl-amt { font-weight: 700; }

.pnl-net {
  border-top: 2px solid var(--text, #111827);
  margin-top: 2px;
  background: var(--surface-alt, #f7f8fa);
}
.pnl-net .pnl-label { font-weight: 700; }
.pnl-net .pnl-amt { font-weight: 800; color: #059669; }

.pnl-margins {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #e5e7eb);
  font-size: 0.8rem;
  color: var(--text-muted, #6b7280);
}
.pnl-margins b { color: var(--text, #111827); font-size: 0.95rem; }

@media (max-width: 900px) {
  .fin-charts { grid-template-columns: 1fr; }
}

/* Subtle discoverability hint for Kanban interactions */
.board-hint {
  margin: 2px 0 12px;
  font-size: 0.78rem;
  color: var(--text-muted, #6b7280);
  background: var(--surface-alt, #f3f4f6);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 7px 12px;
}

@media (max-width: 640px) {
  .board-sort {
    margin-left: 0;
  }
}

/* ============================================================
   TABLE VIEW v2 — data-first, calm, professional grid
   ============================================================ */

/* Two-column workspace: data grid + record inspector */
.table-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 14px;
  align-items: start;
}

.table-card-enhanced {
  padding: 0;
  overflow: hidden;
}

/* Compact single-row header: title (left) + actions (right) */
.table-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px 10px;
}
.table-toolbar-title h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}
.table-toolbar-title .muted {
  font-size: 12.5px;
}
.table-toolbar .chip-group.table-action-cluster {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* Search bar with icon, scoped pill, clear button */
.table-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 16px 12px;
}
.table-search-input {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
  display: flex;
  align-items: center;
}
.table-search-input svg {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  color: #98a2b3;
  pointer-events: none;
}
.table-search-input .input {
  width: 100%;
  padding: 9px 32px 9px 34px;
  border-radius: 9px;
  background: #f8fafc;
  border: 1px solid var(--line, #e5e7eb);
  font-size: 13.5px;
}
.table-search-input .input:focus {
  background: #ffffff;
  border-color: #84caff;
  outline: 2px solid rgba(46, 144, 250, 0.14);
}
.table-search-clear {
  position: absolute;
  right: 8px;
  border: none;
  background: transparent;
  color: #98a2b3;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
}
.table-search-clear:hover {
  color: #475467;
  background: #eef2f6;
}

/* Smart-panel shortcuts & board filters sit tight inside the card */
.table-main .smart-panel-row {
  margin: 0;
  padding: 0 16px 12px;
}
.table-main .board-filters {
  margin: 0;
}

/* The grid is the hero — give it the available height */
.table-card-enhanced .table-wrap {
  max-height: calc(100vh - 210px);
  overflow: auto;
  border-top: 1px solid var(--line, #e5e7eb);
}

/* Fixed layout = predictable, readable columns that always fit the container
   (no horizontal scroll, no mid-word wrapping). Collapsing the inspector gives
   the grid the full width so every column has comfortable room. */
.table-card-enhanced .data-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}
.table-card-enhanced .data-table th,
.table-card-enhanced .data-table td {
  /* Readable floor: few columns fill the width comfortably; many columns keep
     this minimum and the grid scrolls horizontally instead of cramming. */
  min-width: 110px;
  max-width: none;
}

/* Collapsed inspector → table spans the whole workspace */
.table-workspace.panel-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

/* Inspector close button + header layout */
.inspector-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inspector-close {
  border: 1px solid var(--line, #e5e7eb);
  background: #fff;
  color: #667085;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}
.inspector-close:hover {
  background: #f2f4f7;
  color: #1d2939;
}

/* Inputs must shrink with their column — kill the legacy 132px min-width so the
   grid fits the container instead of forcing horizontal scroll. */
.table-card-enhanced .data-table td .table-input,
.table-card-enhanced .data-table td .table-textarea,
.table-card-enhanced .data-table td .table-select {
  min-width: 0;
  width: 100%;
}
.table-card-enhanced .data-table td .table-input:focus,
.table-card-enhanced .data-table td .table-textarea:focus,
.table-card-enhanced .data-table td .table-select:focus {
  min-width: 0;
}

/* Single-line cells truncate cleanly; full value shows on hover (title) + inspector */
.table-card-enhanced .data-table td .table-input,
.table-card-enhanced .data-table td .table-select {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 32px;
}
.table-card-enhanced .data-table td .table-select {
  padding-right: 18px;
}
/* Date inputs need room for the native picker control */
.table-card-enhanced .data-table td input[type="date"] {
  min-width: 0;
}

/* Keep every cell's content inside its column (no overlap into neighbours) */
.table-card-enhanced .data-table tbody td {
  overflow: hidden;
}
.table-card-enhanced .data-table td .linked-field {
  max-width: 100%;
  min-width: 0;
}
.table-card-enhanced .data-table td .linked-record-button {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
/* Linked picker select also fits the column */
.table-card-enhanced .data-table td .linked-field select,
.table-card-enhanced .data-table td .linked-select {
  max-width: 100%;
  min-width: 0;
}
/* Participant chips (multi-linked) stay on one tidy line */
.table-card-enhanced .data-table td .multi-linked-chips {
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Sticky, quiet header */
.table-card-enhanced .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  box-shadow: inset 0 -1px 0 var(--line, #e5e7eb);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 9px 8px;
}

/* Calm rows with thin separators */
.table-card-enhanced .data-table tbody td {
  padding: 2px 6px;
  border-bottom: 1px solid #f1f3f7;
  vertical-align: middle;
}
.table-card-enhanced .data-table tbody tr:hover {
  background: #f7faff;
}
.table-card-enhanced .data-table tbody tr.selected-row {
  background: #eef4ff;
  box-shadow: inset 2px 0 0 var(--accent, #2e6a54);
}

/* Row number = open-record affordance (higher specificity than the column floor) */
.table-card-enhanced .data-table .row-number-cell {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}
.table-card-enhanced .row-open-btn {
  background: transparent;
  border: none;
  color: #98a2b3;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  min-width: 0;
  min-height: 0;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
/* This cell opens the full record, but on its own it reads as a plain row number.
   A always-visible chevron says it is clickable without waiting for a hover, which
   also matters on touch where there is no hover at all. */
.table-card-enhanced .row-open-btn::after {
  content: "\203A";
  font-size: 13px;
  line-height: 1;
  opacity: 0.55;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.table-card-enhanced .data-table tbody tr:hover .row-open-btn {
  color: var(--accent, #2e6a54);
  font-weight: 700;
}
.table-card-enhanced .data-table tbody tr:hover .row-open-btn::after {
  opacity: 1;
  transform: translateX(1px);
}

/* Actions column: narrow, reveals delete on row hover */
.table-card-enhanced .data-table .row-actions-cell {
  width: 76px;
  min-width: 76px;
  max-width: 76px;
  text-align: right;
}
.table-card-enhanced .row-actions-cell .row-action-stack {
  justify-content: flex-end;
}

/* Compact, collapsible files (only shows when files exist) */
.module-file-shelf-compact {
  margin: 0 16px 10px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  background: #fbfcfe;
  padding: 8px 12px;
}
.module-file-shelf-compact summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
  list-style: none;
}
.module-file-shelf-compact summary::-webkit-details-marker { display: none; }
/* The native triangle is hidden above, so put an explicit one back: without it the
   row reads as a static label and nobody discovers it opens. */
.module-file-shelf-compact summary::after {
  content: "\25B8";
  margin-left: auto;
  color: #8a8073;
  font-size: 11px;
  transition: transform 0.18s ease;
}
.module-file-shelf-compact[open] summary::after { content: "\25BE"; }
.module-file-shelf-compact summary .eyebrow { margin: 0; }
.module-file-shelf-compact .module-file-list { margin-top: 8px; }

/* Load-more sits inside the card footer */
.table-card-enhanced .table-load-more {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--line, #e5e7eb);
}

@media (max-width: 1100px) {
  .table-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .table-workspace .record-inspector {
    position: static;
    max-height: none;
  }
}

/* Vendor support viewing a client workspace — data redacted notice */
.support-redacted-banner {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 13.5px;
  line-height: 1.5;
}
.support-redacted-banner strong { color: #78350f; }

/* ===== User avatar + profile ===== */
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
#auth-user-pill { display: inline-flex; align-items: center; gap: 8px; }

.profile-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  z-index: 1200;
  overflow-y: auto;
}
.profile-modal {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.25);
  display: flex;
  flex-direction: column;
}
.profile-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 8px;
}
.profile-modal-head .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #98a2b3; }
.profile-close { border: 1px solid var(--line, #e5e7eb); background: #fff; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; color: #667085; }
.profile-close:hover { background: #f2f4f7; }
.profile-modal-body { padding: 4px 18px 8px; display: flex; flex-direction: column; gap: 12px; }
.profile-avatar-row { display: flex; gap: 14px; align-items: center; }
.profile-avatar-controls { display: flex; flex-direction: column; gap: 8px; }
.profile-upload-btn {
  border: 1px solid var(--line, #e5e7eb); background: #fff; border-radius: 8px;
  padding: 6px 12px; font-size: 13px; cursor: pointer; align-self: flex-start;
}
.profile-upload-btn:hover { background: #f2f4f7; }
.profile-color-row { display: flex; gap: 6px; flex-wrap: wrap; }
.profile-color { width: 24px; height: 24px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; }
.profile-color.on { border-color: #111827; box-shadow: 0 0 0 2px #fff inset; }
.profile-link-btn { background: none; border: none; color: #b42318; font-size: 12.5px; cursor: pointer; padding: 0; align-self: flex-start; }
.profile-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.profile-field > span { color: #475467; font-size: 12px; }
.profile-field .input { padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line, #e5e7eb); }
.profile-field .input[readonly] { background: #f8fafc; color: #667085; }
.profile-readonly { padding: 9px 10px; background: #f8fafc; border-radius: 8px; color: #475467; font-size: 13px; }
.profile-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #475467; margin-top: 8px; }
.profile-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.profile-muted { font-size: 12.5px; color: #667085; margin: 0; }
.profile-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--line, #e5e7eb); margin-top: 8px; }

/* Compact density personal setting */
body.compact-mode .analysis-card,
body.compact-mode .table-card-enhanced { padding: 10px; }
body.compact-mode .integ-card { padding: 10px; }
body.compact-mode .rec-kpi { padding: 10px 12px; }

/* ============================================================
   INTEGRATIONS DIRECTORY (connector gallery)
   ============================================================ */
.integrations-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.integ-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.integ-kpi {
  background: #ffffff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.integ-kpi span { font-size: 12px; color: var(--text-muted, #6b7280); }
.integ-kpi strong { font-size: 22px; }
.integ-kpi.accent-green strong { color: #059669; }

.integ-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.integ-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.integ-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f8fafc;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 999px;
  font-size: 12px;
  color: #667085;
}
.integ-legend-chip b { color: #1d2939; font-weight: 600; }

/* Tabs */
.integ-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.integ-tab {
  border: none;
  background: none;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #667085;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.integ-tab:hover { color: #1d2939; }
.integ-tab.on { color: var(--accent, #2e6a54); border-bottom-color: var(--accent, #2e6a54); }

/* Unified Automations hub */
.automations-workspace { display: flex; flex-direction: column; gap: 16px; }
.automations-tabs { margin-bottom: 2px; }
.automations-intro .panel-heading { align-items: flex-start; }
.automations-intro .eyebrow { color: var(--accent, #2e6a54); }
.integ-flows-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 4px 0 12px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  background: #f9fafb;
  font-size: 13px;
  color: #475467;
}

/* Highlight the connected section */
.integ-group-connected .integ-group-head { color: #047857; }
.integ-group-connected .integ-group-head span { background: #d1fae5; color: #047857; }

.integ-automations {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  background: #ffffff;
}
.integ-auto-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.integ-auto-head strong { font-size: 14px; }
.integ-auto-head small { color: var(--text-muted, #6b7280); font-size: 12px; }
.integ-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.integ-auto-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.integ-auto-item.on { background: #f0fdf9; border-color: #a7f3d0; }
.integ-auto-item input[disabled] { cursor: not-allowed; }
.integ-auto-item:has(input[disabled]) { opacity: 0.55; cursor: not-allowed; }

/* Automation rules builder */
.integ-rules { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.integ-rule {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  background: #f8fafc;
}
.integ-rule-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.integ-rule-fields { font-size: 12.5px; }
.integ-rule-fields summary { cursor: pointer; color: #475467; }
.integ-rule-fields summary b { color: #1d2939; }
.integ-rule-fieldgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px 12px;
  margin-top: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 7px;
}
.integ-rule-fieldgrid label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  cursor: pointer;
}
.integ-rule .input {
  padding: 7px 9px;
  border-radius: 7px;
  border: 1px solid var(--line, #e5e7eb);
  background: #fff;
  font-size: 13px;
}
.integ-rule select.input { flex: 0 1 230px; min-width: 150px; max-width: 280px; cursor: pointer; }
.integ-rule-when, .integ-rule-arrow { font-size: 12.5px; color: #667085; white-space: nowrap; flex-shrink: 0; }
.integ-rule-name { width: 130px; }
.integ-rule-url { flex: 1 1 220px; min-width: 180px; }
.integ-rule-del {
  margin-left: auto;
  border: 1px solid var(--line, #e5e7eb);
  background: #fff;
  color: #98a2b3;
  width: 28px; height: 28px;
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
}
.integ-rule-del:hover { background: #fee4e2; color: #b42318; border-color: #fda29b; }
.integ-rule-empty { font-size: 13px; color: #98a2b3; padding: 6px 2px; }

.integ-help {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #475467;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 8px 10px;
}
.integ-callout {
  font-size: 12.5px;
  line-height: 1.5;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 12px;
}
.integ-search { flex: 1 1 280px; min-width: 220px; }
.integ-note { font-size: 12px; color: var(--text-muted, #6b7280); }

.integ-group { display: flex; flex-direction: column; gap: 10px; }
.integ-group-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475467;
  display: flex;
  align-items: center;
  gap: 8px;
}
.integ-group-head span {
  background: #eef2f6;
  color: #667085;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
}

.integ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.integ-card {
  background: #ffffff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease;
}
.integ-card:hover {
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
  border-color: #d0d5dd;
  transform: translateY(-1px);
}
.integ-card.is-connected {
  border-color: #a7f3d0;
  background: linear-gradient(180deg, #f0fdf9 0%, #ffffff 60%);
}

.integ-card-top { display: flex; align-items: center; gap: 12px; }
.integ-logo {
  position: relative;
  overflow: hidden;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--integ-color, #475467);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
}
/* Real brand logo overlays the initials when it loads (white tile, contained). */
.integ-logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
  padding: 5px;
  box-sizing: border-box;
  border-radius: inherit;
}
.integ-card-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.integ-card-id h4 { margin: 0; font-size: 15px; line-height: 1.15; }

.integ-pill {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
}
.integ-pill.on { background: #d1fae5; color: #047857; }
.integ-pill.off { background: #eef2f6; color: #667085; }
.integ-pill.cfg { background: #fef3c7; color: #b45309; }
.integ-pill.err { background: #fee2e2; color: #b42318; }

.integ-card.is-error { border-color: #fecaca; }
.integ-conn small { display: block; color: #667085; margin-top: 2px; font-size: 11px; }
.integ-conn.bad { background: #fef2f2; color: #b42318; }
.integ-conn.bad small { color: #b42318; }

.integ-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #475467;
  min-height: 36px;
}
.integ-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11.5px;
  color: #667085;
}
.integ-sync { font-size: 11.5px; color: #059669; }

.integ-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.integ-btn {
  flex: 1;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.integ-btn.is-connect {
  background: var(--accent, #2e6a54);
  color: #ffffff;
  border-color: var(--accent, #2e6a54);
}
.integ-btn.is-connect:hover { filter: brightness(1.06); }
.integ-btn.is-disconnect {
  background: #ffffff;
  color: #b42318;
  border-color: #fda29b;
}
.integ-btn.is-disconnect:hover { background: #fee4e2; }
.integ-config {
  border: 1px solid var(--line, #e5e7eb);
  background: #ffffff;
  color: #475467;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
.integ-config:hover { background: #f2f4f7; }

@media (max-width: 900px) {
  .integ-kpis { grid-template-columns: repeat(2, 1fr); }
}

.integ-conn {
  font-size: 11.5px;
  color: #047857;
  background: #ecfdf5;
  border-radius: 6px;
  padding: 4px 8px;
  word-break: break-all;
}

/* Connect modal */
.integ-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(16, 24, 40, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.integ-modal {
  background: #ffffff;
  border-radius: 14px;
  width: min(520px, 100%);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.28);
}
.integ-modal-wide { width: min(620px, 100%); }
.gsheet-steps {
  margin: 4px 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #344054;
  line-height: 1.45;
}
.gsheet-steps li { padding-left: 2px; }
.gsheet-code {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gsheet-code textarea {
  width: 100%;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #1d2939;
  background: #0c111d;
  color: #e4e7ec;
  border: 1px solid #1d2939;
  border-radius: 10px;
  padding: 12px 14px;
  resize: vertical;
  white-space: pre;
  overflow-x: auto;
}
.gsheet-code .chip { align-self: flex-start; cursor: pointer; }
.google-tabs {
  display: flex;
  gap: 6px;
  background: #f2f4f7;
  padding: 4px;
  border-radius: 10px;
}
.google-tab {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #475467;
  cursor: pointer;
}
.google-tab.is-active { background: #ffffff; color: #101828; box-shadow: 0 1px 2px rgba(16,24,40,0.12); }
.google-signin-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #3c4043;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,24,40,0.08);
}
.google-signin-btn:hover { background: #f8f9fa; }
.google-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
.google-admin { border: 1px solid #eaecf0; border-radius: 10px; padding: 10px 12px; }
.google-admin summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #344054; }
.google-admin .integ-field { margin-top: 10px; }
.google-admin code { background: #f2f4f7; padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* AI Meeting Assistant modal */
.ma-modal { position: relative; width: min(680px, 100%); }
.ma-body { max-height: 64vh; overflow: auto; }
.ma-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ma-area { font-family: inherit; line-height: 1.5; resize: vertical; }
.ma-label { font-size: 12px; font-weight: 700; color: #344054; text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.ma-count { background: #eef2ff; color: #3538cd; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.ma-list { display: flex; flex-direction: column; gap: 6px; }
.ma-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #eaecf0; border-radius: 8px; font-size: 13px; cursor: pointer; }
.ma-item.is-off { opacity: .45; background: #fafafa; }
.ma-item input { margin: 0; }
.ma-item-task { flex: 1; color: #1d2939; }
.ma-chip { background: #f2f4f7; color: #475467; border-radius: 6px; padding: 1px 7px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ma-chip-due { background: #fef0c7; color: #b54708; }
.ma-empty { font-size: 12px; color: #98a2b3; padding: 6px 2px; }
.ma-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #344054; margin-top: 6px; cursor: pointer; }
.ma-context-action { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ma-context { border: 1px solid #d1fadf; background: #f6fef9; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.ma-context-empty { border-color: #eaecf0; background: #fafafa; color: #667085; font-size: 13px; }
.ma-context-title { font-size: 12px; font-weight: 700; color: #027a48; }
.ma-context-row { font-size: 12.5px; color: #344054; }
.ma-busy { position: absolute; inset: 0; background: rgba(255,255,255,.72); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 14px; z-index: 5; font-size: 13px; color: #475467; }
.ma-spinner { width: 30px; height: 30px; border: 3px solid #e4e7ec; border-top-color: #2e6a54; border-radius: 50%; animation: ma-spin .8s linear infinite; }
@keyframes ma-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .ma-grid { grid-template-columns: 1fr; } }

/* AI Governance — hybrid brain + rules */
.gov-busy { display: flex; align-items: center; gap: 12px; padding: 18px 4px; color: #475467; font-size: 13px; }
.gov-summary { font-size: 14px; line-height: 1.6; color: #1d2939; background: #f8fafc; border-left: 3px solid #2e6a54; padding: 10px 14px; border-radius: 8px; margin: 4px 0 14px; }
.gov-subhead { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #475467; margin: 14px 0 8px; }
.gov-count { background: #eef2ff; color: #3538cd; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.gov-rec-list, .gov-rule-list { display: flex; flex-direction: column; gap: 8px; }
.gov-rec { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; border: 1px solid #eaecf0; border-radius: 10px; padding: 12px 14px; }
.gov-rec-main { flex: 1; min-width: 0; }
.gov-rec-main strong { font-size: 14px; color: #101828; }
.gov-rec-main p { margin: 5px 0 0; font-size: 13px; color: #475467; line-height: 1.5; }
.gov-rec-do { color: #2e6a54 !important; font-weight: 600; }
.gov-mod { background: #f2f4f7; color: #475467; border-radius: 6px; padding: 1px 7px; font-size: 11px; font-weight: 600; }
.gov-risk { border-radius: 6px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.gov-risk.success { background: #d1fadf; color: #027a48; }
.gov-risk.warning { background: #fef0c7; color: #b54708; }
.gov-risk.danger { background: #fee4e2; color: #b42318; }
.gov-risk.neutral { background: #f2f4f7; color: #475467; }
.gov-rule { display: flex; gap: 10px; align-items: center; border: 1px solid #eaecf0; border-radius: 10px; padding: 10px 12px; }
.gov-rule.is-suggested { justify-content: space-between; border-style: dashed; background: #fcfcfd; }
.gov-rule.is-off { opacity: .5; }
.gov-rule-toggle { display: flex; align-items: center; }
.gov-rule-body { flex: 1; min-width: 0; }
.gov-rule-body strong { font-size: 13.5px; color: #101828; }
.gov-rule-body p { margin: 4px 0 0; font-size: 12.5px; color: #475467; line-height: 1.5; }
.gov-rule-meta { font-size: 11.5px !important; color: #027a48 !important; font-weight: 600; }
.gov-rule.is-off .gov-rule-meta { color: #98a2b3 !important; }
.gov-brain-card { border-top: 3px solid #2e6a54; }
.icon-btn { border: 0; background: transparent; color: #98a2b3; cursor: pointer; font-size: 14px; padding: 4px 8px; border-radius: 6px; }
.icon-btn:hover { background: #f2f4f7; color: #b42318; }

/* Top-bar account menu (avatar dropdown that collapses identity + Undo/Alerts/Lock) */
.account-menu { position: relative; }
.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 3px;
  border: 1px solid #e4e7ec;
  border-radius: 999px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  transition: background .15s, border-color .15s;
}
.account-trigger:hover { background: #f9fafb; border-color: #d0d5dd; }
.account-menu.is-open .account-trigger { background: #f2f4f7; border-color: #d0d5dd; }
.account-avatar-slot { display: inline-flex; }
.account-avatar-slot .user-avatar { display: inline-flex; }
.account-caret { width: 12px; height: 12px; color: #667085; transition: transform .18s; }
.account-menu.is-open .account-caret { transform: rotate(180deg); }
.account-alert-dot {
  position: absolute; top: 1px; left: 24px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #f04438; border: 2px solid #fff;
}
.account-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 248px;
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.16);
  padding: 8px;
  z-index: 80;
}
.account-menu.is-open .account-dropdown { display: block; animation: account-pop .14s ease; }
@keyframes account-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.account-identity {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 10px; cursor: pointer; border-radius: 8px;
}
.account-identity:hover { background: #f9fafb; }
.account-identity-text { display: flex; flex-direction: column; min-width: 0; }
.account-identity-text strong { font-size: 14px; color: #101828; }
.account-identity-text span { font-size: 12px; color: #475467; }
.account-identity-text small { font-size: 11.5px; color: #98a2b3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-divider { height: 1px; background: #f2f4f7; margin: 6px 4px; }
.account-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; background: transparent; border-radius: 8px;
  font-size: 13.5px; color: #344054; cursor: pointer; text-align: left;
}
.account-item:hover:not(:disabled) { background: #f2f4f7; }
.account-item:disabled { opacity: .45; cursor: default; }
.account-item .account-ico { width: 18px; text-align: center; font-size: 14px; }
.account-item .alerts-count {
  margin-left: auto; background: #f04438; color: #fff; border-radius: 999px;
  min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.account-item-danger { color: #b42318; }
.account-item-danger:hover:not(:disabled) { background: #fef3f2; }

/* Settings — tabbed, sectioned admin surface */
.settings-shell { display: flex; flex-direction: column; gap: 16px; }
.settings-head .eyebrow { font-size: 11px; }
.settings-head h2 { margin: 2px 0 4px; font-size: 22px; color: #101828; }
.settings-head p { margin: 0; max-width: 720px; }
.settings-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid #eaecf0; padding-bottom: 0;
}
.settings-tab {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: transparent; cursor: pointer;
  padding: 10px 14px; font-size: 14px; font-weight: 600; color: #667085;
  border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0;
  transition: color .15s, background .15s;
}
.settings-tab:hover { color: #344054; background: #f9fafb; }
.settings-tab.is-active { color: #2e6a54; border-bottom-color: #2e6a54; }
.settings-tab-ico { font-size: 15px; }
.settings-body { display: flex; flex-direction: column; gap: 16px; }
.settings-stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-top: 4px;
}
.settings-stat {
  border: 1px solid #eaecf0; border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; background: #fcfcfd;
}
.settings-stat span { font-size: 12px; color: #667085; }
.settings-stat strong { font-size: 22px; color: #101828; }
.settings-quicklinks { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.settings-quicklinks .chip { cursor: pointer; }
.settings-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-form-actions { margin-top: 12px; }
.settings-ws-list { display: flex; flex-direction: column; gap: 8px; }
.settings-ws-row {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid #eaecf0; border-radius: 10px; padding: 10px 14px;
}
.settings-ws-meta { display: flex; flex-direction: column; }
.settings-ws-meta strong { font-size: 14px; color: #101828; }
.settings-ws-meta span { font-size: 12px; color: #667085; }
@media (max-width: 640px) { .settings-form-grid { grid-template-columns: 1fr; } }

/* Admin integration management table */
.integ-admin-table { margin-top: 14px; border: 1px solid #eaecf0; border-radius: 10px; overflow: hidden; overflow-x: auto; }
.integ-admin-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.5fr) 84px minmax(130px, 1.3fr) minmax(120px, 1fr) 116px 132px auto;
  align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid #f2f4f7; font-size: 13px; min-width: 880px;
}
.integ-admin-row:last-child { border-bottom: 0; }
.integ-admin-head {
  background: #f9fafb; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: #667085;
}
.integ-admin-row:not(.integ-admin-head):hover { background: #fcfcfd; }
.integ-admin-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.integ-admin-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #101828; }
.integ-admin-name .integ-logo { width: 24px; height: 24px; flex: 0 0 24px; font-size: 9px; }
.integ-admin-acct, .integ-admin-by { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; }
.integ-admin-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
.integ-admin-actions .small-btn { padding: 4px 10px; font-size: 12px; }
.danger-soft { color: #b42318; }
.danger-soft:hover { background: #fef3f2; border-color: #fecdca; }
.integ-admin-foot { margin: 12px 2px 0; font-size: 12.5px; }
.integ-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.integ-modal-title { flex: 1; min-width: 0; }
.integ-modal-title .eyebrow { font-size: 11px; }
.integ-modal-title h3 { margin: 0; font-size: 18px; }
.integ-modal-close {
  border: 1px solid var(--line, #e5e7eb);
  background: #fff;
  color: #667085;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
}
.integ-modal-close:hover { background: #f2f4f7; }
.integ-modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.integ-modal-note { margin: 0; font-size: 13px; color: #475467; line-height: 1.5; }
.integ-field { display: flex; flex-direction: column; gap: 4px; }
.integ-field span { font-size: 12px; font-weight: 600; color: #344054; }
.integ-field span em { font-weight: 400; color: #98a2b3; font-style: normal; }
.integ-field .input {
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--line, #e5e7eb);
  background: #fff;
  font-size: 13.5px;
}
.integ-field .input:focus { border-color: #84caff; outline: 2px solid rgba(46, 144, 250, 0.14); }
.integ-field .input[readonly] { background: #f8fafc; color: #475467; }
.integ-modal-sec {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: #667085;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.45;
}
.integ-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--line, #e5e7eb);
}
.integ-modal-actions .integ-btn { flex: 0 0 auto; }

/* Campaign lead conversation thread (Message Queue inspector) */
.conv-thread { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.conv-row { display: flex; flex-direction: column; max-width: 88%; }
.conv-row.conv-out { align-self: flex-end; align-items: flex-end; }
.conv-row.conv-in { align-self: flex-start; align-items: flex-start; }
.conv-meta { font-size: 10.5px; color: #98a2b3; margin: 0 4px 2px; }
.conv-bubble {
  font-size: 12.5px; line-height: 1.4; padding: 7px 11px; border-radius: 12px;
  white-space: pre-wrap; word-break: break-word;
}
.conv-out .conv-bubble { background: #2e6a54; color: #fff; border-bottom-right-radius: 4px; }
.conv-in .conv-bubble { background: #f2f4f7; color: #101828; border-bottom-left-radius: 4px; }

/* ---- Message Campaigns manager (outreach-style cards + sequence builder) ---- */
.ord-camp { display: flex; flex-direction: column; gap: 14px; }
.ord-camp-banner {
  display: flex; gap: 10px; align-items: flex-start;
  background: #ecfdf3; border: 1px solid #a6f4c5; color: #05603a;
  border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.5;
}
.ord-camp-banner-dot { width: 10px; height: 10px; border-radius: 50%; background: #12b76a; margin-top: 5px; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(18,183,106,0.2); }
.ord-camp-actions { display: flex; gap: 10px; }
.ord-camp-new {
  background: #2e6a54; color: #fff; border: none; border-radius: 10px;
  padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.ord-camp-new:hover { background: #275c49; }
.ord-camp-link { background: none; border: none; color: #667085; font-size: 13px; cursor: pointer; text-decoration: underline; }

.ord-camp-list { display: flex; flex-direction: column; gap: 14px; }
.ord-camp-card {
  background: #fff; border: 1px solid #e4e7ec; border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.ord-camp-card.is-active { border-color: #a6f4c5; box-shadow: 0 4px 16px rgba(18,183,106,0.08); }
.ord-camp-card-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.ord-camp-name {
  font-size: 17px; font-weight: 700; border: none; border-bottom: 1.5px solid transparent;
  padding: 4px 2px; color: #101828; background: none; flex: 1; min-width: 180px;
}
.ord-camp-name:focus { outline: none; border-bottom-color: #2e6a54; }

.ord-camp-status-group { display: inline-flex; background: #f2f4f7; border-radius: 10px; padding: 3px; gap: 2px; }
.ord-camp-status {
  border: none; background: none; cursor: pointer; font-size: 12.5px; font-weight: 600;
  color: #667085; padding: 6px 12px; border-radius: 8px; transition: all .12s;
}
.ord-camp-status:hover { color: #344054; }
.ord-camp-status.on-active.active { background: #12b76a; color: #fff; }
.ord-camp-status.on-paused.active { background: #f79009; color: #fff; }
.ord-camp-status.on-inactive.active { background: #98a2b3; color: #fff; }

.ord-camp-stats { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 4px; font-size: 12.5px; color: #667085; }
.ord-camp-stats b { color: #101828; font-weight: 700; }
.ord-camp-stat-reply b { color: #027a48; }
.ord-camp-stat-steps { margin-left: auto; color: #98a2b3; }

.ord-camp-seq { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid #f2f4f7; }
.ord-seq-step { background: #f9fafb; border: 1px solid #eef0f3; border-radius: 10px; padding: 10px 12px; position: relative; }
.ord-seq-step::before {
  content: ""; position: absolute; left: 22px; top: -10px; height: 10px; width: 2px; background: #e4e7ec;
}
.ord-seq-step:first-child::before { display: none; }
.ord-seq-invite { background: #f5f7ff; border-color: #e0e7ff; }
.ord-seq-step-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.ord-seq-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #2e6a54; background: #ecfdf3; border-radius: 6px; padding: 3px 8px;
}
.ord-seq-badge-invite { color: #3538cd; background: #eef2ff; }
.ord-seq-toggle { font-size: 12.5px; color: #344054; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ord-seq-wait { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #667085; }
.ord-seq-wait-label { color: #98a2b3; }
.ord-seq-num { width: 46px; text-align: center; border: 1px solid #d0d5dd; border-radius: 6px; padding: 4px 4px; font-size: 12.5px; }
.ord-seq-remove { border: none; background: none; color: #b42318; cursor: pointer; font-size: 14px; padding: 2px 6px; margin-left: 4px; }
.ord-seq-remove:hover { color: #912018; }
.ord-seq-text {
  width: 100%; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 8px;
  padding: 8px 10px; font-size: 13px; line-height: 1.45; color: #101828; background: #fff;
  resize: vertical; min-height: 48px; font-family: inherit;
}
.ord-seq-text:focus { outline: none; border-color: #2e6a54; }
.ord-seq-hint { font-size: 12px; color: #98a2b3; font-style: italic; }

/* ---- Campaigns v2: collapsible rows + vertical timeline ---- */
.ord-camp-count { font-size: 12.5px; color: #98a2b3; align-self: center; margin-left: auto; }
.ord-camp-card { padding: 0; overflow: hidden; }
.ord-camp-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.ord-camp-row:hover { background: #fcfcfd; }
.ord-camp-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #98a2b3; }
.ord-camp-dot.s-active { background: #12b76a; box-shadow: 0 0 0 3px rgba(18,183,106,0.18); }
.ord-camp-dot.s-paused { background: #f79009; }
.ord-camp-dot.s-inactive { background: #d0d5dd; }
.ord-camp-card .ord-camp-name { font-size: 15px; font-weight: 700; border: none; border-bottom: 1.5px solid transparent; padding: 2px 2px; color: #101828; background: none; flex: 0 1 220px; min-width: 120px; }
.ord-camp-card .ord-camp-name:focus { outline: none; border-bottom-color: #2e6a54; }
.ord-camp-chan { font-size: 12px; color: #667085; white-space: nowrap; }
.ord-camp-kpi { font-size: 12px; color: #667085; white-space: nowrap; }
.ord-camp-kpi b { color: #101828; }
.ord-camp-kpi-rate b { color: #027a48; }
.ord-camp-kpi, .ord-camp-chan { display: none; }
@media (min-width: 1100px) { .ord-camp-kpi, .ord-camp-chan { display: inline; } }
.ord-camp-row .ord-camp-status-group { margin-left: auto; }
.ord-camp-del { border: none; background: none; cursor: pointer; font-size: 14px; opacity: .5; padding: 4px 6px; }
.ord-camp-del:hover { opacity: 1; }
.ord-camp-chev { color: #98a2b3; font-size: 11px; width: 14px; text-align: center; }
.ord-camp-body { padding: 4px 16px 18px; border-top: 1px solid #f2f4f7; background: #fcfcfd; }
.ord-camp-funnel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 0 16px; }
.ord-fn { text-align: center; min-width: 78px; background: #fff; border: 1px solid #eef0f3; border-radius: 10px; padding: 8px 6px; }
.ord-fn-n { font-size: 18px; font-weight: 700; color: #101828; }
.ord-fn-l { font-size: 10.5px; color: #98a2b3; text-transform: uppercase; letter-spacing: .03em; }
.ord-fn-arrow { color: #d0d5dd; font-size: 16px; }
.ord-tl { position: relative; padding-left: 4px; }
.ord-tl::before { content: ""; position: absolute; left: 21px; top: 14px; bottom: 22px; width: 2px; background: #e4e7ec; }
.ord-tl-node { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 4px 0; }
.ord-tl-icon { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 16px; background: #fff; border: 2px solid #e4e7ec; }
.ord-tl-icon-invite { border-color: #c7d7fe; background: #eef4ff; }
.ord-tl-icon-msg { border-color: #a6f4c5; background: #ecfdf3; }
.ord-tl-body { flex: 1; padding-bottom: 6px; }
.ord-tl-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: #101828; margin-bottom: 6px; }
.ord-tl-switch { font-size: 12px; font-weight: 500; color: #344054; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ord-tl-remove { border: none; background: none; color: #b42318; cursor: pointer; font-size: 12px; }
.ord-tl-remove:hover { text-decoration: underline; }
.ord-tl-text { width: 100%; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.45; color: #101828; background: #fff; resize: vertical; min-height: 46px; font-family: inherit; }
.ord-tl-text:focus { outline: none; border-color: #2e6a54; }
.ord-tl-meta { font-size: 11px; color: #98a2b3; margin-top: 3px; }
.ord-tl-hint { font-size: 12px; color: #98a2b3; font-style: italic; }
.ord-tl-wait { position: relative; padding: 2px 0 2px 52px; }
.ord-tl-wait-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #475467; background: #fff; border: 1px dashed #d0d5dd; border-radius: 999px; padding: 3px 10px; }
.ord-tl-num { width: 38px; text-align: center; border: 1px solid #d0d5dd; border-radius: 5px; padding: 2px 3px; font-size: 11.5px; }
.ord-tl-end { font-size: 11.5px; color: #98a2b3; padding: 8px 0 2px 52px; }

/* ---- Campaigns v3: snippets, templates, A/B, duplicate ---- */
.ord-camp-kpi-accept b { color: #3538cd; }
.ord-camp-icon-btn { border: none; background: none; cursor: pointer; font-size: 14px; opacity: .55; padding: 4px 6px; }
.ord-camp-icon-btn:hover { opacity: 1; }
.ord-snipbar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 6px; }
.ord-snip-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: #98a2b3; margin-right: 2px; }
.ord-snip {
  border: 1px solid #e0e7ff; background: #f5f7ff; color: #3538cd; cursor: pointer;
  font-size: 11px; font-weight: 600; border-radius: 6px; padding: 3px 8px;
}
.ord-snip:hover { background: #eef2ff; border-color: #c7d2fe; }
.ord-snip-grow { flex: 1; }
.ord-snip-save { color: #027a48; background: #ecfdf3; border-color: #a6f4c5; }
.ord-snip-save:hover { background: #d1fadf; }
.ord-tpl-select { font-size: 11.5px; border: 1px solid #d0d5dd; border-radius: 6px; padding: 3px 6px; color: #475467; background: #fff; max-width: 140px; }
.ord-ab-add { color: #6941c6 !important; }
.ord-ab-b { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e4e7ec; }
.ord-ab-rate { font-size: 11.5px; font-weight: 600; color: #027a48; }
.ord-ab-rate.ord-ab-nodata { color: #98a2b3; font-weight: 500; }

/* Campaign background-engine live status */
.ord-camp-live { margin-top: 8px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; display: inline-block; background: #fff; border: 1px solid #d1fadf; color: #05603a; }
.ord-camp-live.ord-live-on { background: #fff; border-color: #a6f4c5; color: #027a48; }
.ord-camp-live.ord-live-off { background: #fffaeb; border-color: #fedf89; color: #b54708; }

/* Conversation composer (reply to a lead from the platform) */
.conv-compose { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; flex-wrap: wrap; }
.conv-draft-hint {
  flex-basis: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: #285c48; background: #f0f7f4; border: 1px solid #cfe6dc;
  border-radius: 8px; padding: 5px 10px;
}
.conv-draft-clear {
  margin-left: auto; border: none; background: transparent; color: #2e6a54; cursor: pointer;
  font-size: 11.5px; font-weight: 600; text-decoration: underline; padding: 0;
}
.conv-draft-clear:hover { color: #275c49; }
.conv-draft-hint.is-followup { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.suggested-reply-card.is-followup { border-left: 3px solid #f59e0b; }
.suggested-reply-tag { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: middle; }
.suggested-reply-tag.reply { background: #eff8ff; color: #175cd3; }
.suggested-reply-tag.followup { background: #fff7ed; color: #c2410c; }
.conv-nextfu { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: #475467; margin-top: 2px; }
.conv-nextfu input { padding: 3px 6px; font-size: 12px; border: 1px solid #d0d5dd; border-radius: 8px; }
.conv-nextfu .muted { font-size: 11px; }
/* Follow-up timing rules editor */
.fr-panel { margin: 8px 0; border: 1px solid #e4e7ec; border-radius: 10px; background: #fcfcfd; }
.fr-toggle { width: 100%; display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 9px 12px; font-size: 13px; font-weight: 600; color: #344054; cursor: pointer; }
.fr-panel.is-open { background: #fff; }
.fr-body { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.fr-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: #344054; }
.fr-scope select { min-width: 200px; }
.fr-rows { display: flex; flex-direction: column; gap: 6px; }
.fr-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: #344054; }
.fr-ovr { width: 18px; display: inline-flex; justify-content: center; }
.fr-label { min-width: 160px; font-weight: 500; }
.fr-en { display: inline-flex; align-items: center; gap: 4px; }
.fr-row input[type="number"] { width: 56px; padding: 3px 6px; font-size: 12px; border: 1px solid #d0d5dd; border-radius: 8px; }
.fr-row input:disabled { background: #f2f4f7; color: #98a2b3; }
.fr-esc { font-size: 12.5px; color: #344054; }
.fr-esc input { width: 56px; padding: 3px 6px; font-size: 12px; border: 1px solid #d0d5dd; border-radius: 8px; }
.fr-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fr-actions .muted { font-size: 11px; }
.conv-input {
  flex: 1; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 10px;
  padding: 8px 11px; font-size: 13px; line-height: 1.45; color: #101828; background: #fff;
  resize: vertical; min-height: 40px; max-height: 160px; font-family: inherit;
}
.conv-input:focus { outline: none; border-color: #2e6a54; }
.conv-send {
  border: none; background: #2e6a54; color: #fff; border-radius: 10px; cursor: pointer;
  font-size: 13px; font-weight: 600; padding: 9px 16px; white-space: nowrap;
}
.conv-send:hover { background: #275c49; }
.conv-send:disabled { opacity: .6; cursor: default; }

/* Message Queue: stage pills + qualification select */
.stage-pill { display: inline-block; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; border: 1px solid transparent; }
.stage-none { background: #f2f4f7; color: #98a2b3; }
.stage-invite { background: #eef2ff; color: #3538cd; border-color: #c7d2fe; }
.stage-msg { background: #eff8ff; color: #175cd3; border-color: #b2ddff; }
.stage-leadreply { background: #ecfdf3; color: #027a48; border-color: #a6f4c5; }
.stage-ourreply { background: #f0fdf9; color: #107569; border-color: #99f6e0; }
.stage-followup { background: #fffaeb; color: #b54708; border-color: #fedf89; }

.qual-select { border-radius: 999px; border: 1px solid #d0d5dd; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; background: #fff; color: #475467; min-width: 120px; }
.qual-select:focus { outline: none; border-color: #2e6a54; }
.qual-interested { background: #ecfdf3; color: #027a48; border-color: #a6f4c5; }
.qual-booked { background: #eef2ff; color: #3538cd; border-color: #c7d2fe; }
.qual-maybe-later, .qual-follow-up-later { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.qual-not-interested, .qual-no-fit, .qual-wrong-person { background: #fef3f2; color: #b42318; border-color: #fecdca; }

/* Message Queue quick filters */
.qf-bar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; flex-basis: 100%; margin-top: 8px; }
.qf-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: #98a2b3; font-weight: 700; margin-right: 2px; }
.qf-sep { width: 1px; height: 16px; background: #e4e7ec; margin: 0 6px; }
.qf-chip { border: 1px solid #e4e7ec; background: #fff; color: #475467; cursor: pointer; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 4px 11px; }
.qf-chip:hover { background: #f9fafb; }
.qf-chip.active { background: #101828; color: #fff; border-color: #101828; }
.qf-chip.qf-qual.active { background: #2e6a54; border-color: #2e6a54; }

/* Quick-filter chip counts */
.qf-count { display: inline-block; min-width: 16px; text-align: center; font-size: 10.5px; font-weight: 700; background: #eef0f3; color: #667085; border-radius: 999px; padding: 0 5px; margin-left: 3px; line-height: 16px; }
.qf-chip.active .qf-count { background: rgba(255,255,255,0.25); color: #fff; }

/* Campaign → leads + lead → campaigns linking */
.ord-camp-body-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 4px; }
.ord-camp-body-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #98a2b3; font-weight: 700; }
.ord-camp-viewleads { border: 1px solid #d0d5dd; background: #fff; color: #344054; cursor: pointer; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 5px 11px; }
.ord-camp-viewleads:hover { background: #f9fafb; border-color: #2e6a54; color: #2e6a54; }
.lead-camp-list { display: flex; flex-direction: column; gap: 6px; }
.lead-camp-card { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-align: left; width: 100%; border: 1px solid #e4e7ec; background: #fff; border-radius: 10px; padding: 8px 11px; cursor: pointer; }
.lead-camp-card:hover { border-color: #2e6a54; background: #f9fafb; }
.lead-camp-name { font-size: 13px; font-weight: 600; color: #101828; flex: 1; min-width: 100px; }
.lead-camp-qual { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; border: 1px solid #e4e7ec; color: #475467; }

/* Airtable-style hide-fields panel */
.fields-control { position: relative; display: inline-block; }
.fields-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; width: 250px;
  background: #fff; border: 1px solid #e4e7ec; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16,24,40,0.16); padding: 10px;
}
.fields-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fields-panel-head strong { font-size: 13px; color: #101828; }
.fields-panel-actions { display: flex; gap: 6px; }
.fields-mini { border: none; background: none; color: #2e6a54; cursor: pointer; font-size: 11.5px; font-weight: 600; }
.fields-mini:hover { text-decoration: underline; }
.fields-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.fields-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #344054; padding: 5px 6px; border-radius: 7px; cursor: pointer; }
.fields-row:hover { background: #f9fafb; }
.fields-row input { cursor: pointer; }

/* Fields panel: higher stacking + board card field list + hint */
.fields-panel { z-index: 9999 !important; }
.fields-hint { font-size: 11.5px; color: #98a2b3; margin: 0 2px 8px; }
.gb-fieldlist { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f2f4f7; text-align: left; }
.gb-fieldrow { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.35; }
.gb-fieldlbl { color: #98a2b3; flex: 0 0 88px; text-transform: capitalize; }
.gb-fieldval { color: #344054; flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

/* ---- Airtable-style colored select fields ---- */
.sel-cell { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; width: 100%; max-width: 100%; min-width: 0; min-height: 26px; background: none; border: none; cursor: pointer; padding: 2px; text-align: left; }
.sel-cell:hover { background: #f9fafb; border-radius: 6px; }
.sel-pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; line-height: 1.4; border-radius: 999px; padding: 2px 10px; border: 1px solid transparent; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.sel-empty { color: #cbd5e1; font-size: 15px; padding: 0 4px; }

#select-popover-host { position: relative; z-index: 10050; }
.selp-backdrop { position: fixed; inset: 0; z-index: 10050; }
.selp-pop { position: fixed; z-index: 10051; width: 260px; max-height: 360px; overflow-y: auto; background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; box-shadow: 0 16px 40px rgba(16,24,40,0.2); padding: 8px; }
.selp-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #98a2b3; font-weight: 700; padding: 4px 6px 8px; }
.selp-list { display: flex; flex-direction: column; gap: 2px; }
.selp-row { display: flex; align-items: center; gap: 6px; padding: 3px; border-radius: 8px; }
.selp-row:hover { background: #f9fafb; }
.selp-opt { flex: 1; display: flex; align-items: center; gap: 8px; border: none; background: none; cursor: pointer; padding: 2px; text-align: left; }
.selp-check { width: 14px; color: #2e6a54; font-weight: 700; font-size: 12px; }
.selp-color { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #e4e7ec; cursor: pointer; flex: 0 0 auto; }
.selp-empty { font-size: 12px; color: #98a2b3; padding: 8px 6px; }
.selp-palette { margin-top: 8px; padding: 8px 6px; border-top: 1px solid #f2f4f7; }
.selp-palette-title { font-size: 11.5px; color: #475467; margin-bottom: 6px; }
.selp-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.selp-swatch { height: 26px; border-radius: 7px; border: 1.5px solid; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.selp-swatch span { width: 10px; height: 10px; border-radius: 50%; }
.selp-swatch.on { outline: 2px solid #2e6a54; outline-offset: 1px; }
.selp-add { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f2f4f7; }
.selp-add-input { width: 100%; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.selp-add-input:focus { outline: none; border-color: #2e6a54; }

/* Static qualification pill (board cards) — reuses the .qual-* color classes */
.qual-pill { display: inline-block; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 10px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; border: 1px solid #e4e7ec; color: #475467; }

/* Column editor: option color picker */
.col-opt-editor { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; padding: 6px; border: 1px solid #eef0f3; border-radius: 10px; margin-bottom: 8px; }
.col-opt-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.col-opt-row .sel-pill { flex: 0 0 auto; }
.col-opt-color { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #e4e7ec; cursor: pointer; flex: 0 0 auto; }
.col-opt-palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; flex-basis: 100%; padding: 6px; background: #f9fafb; border-radius: 8px; }

/* LinkedIn profile photos */
.rec-avatar.has-photo { background-size: cover; background-position: center; color: transparent; }
.cell-photo { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; }

/* Profile photo lightbox */
.rec-avatar.has-photo, .cell-photo { cursor: zoom-in; }
#photo-zoom-host .photo-zoom-backdrop { position: fixed; inset: 0; z-index: 11000; background: rgba(16,24,40,0.72); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.photo-zoom-img { width: min(80vw, 420px); height: auto; max-height: 80vh; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,0.45); object-fit: contain; background: #fff; }

.conv-lastact { font-weight: 500; color: #98a2b3; text-transform: none; letter-spacing: 0; }

/* Relative "time ago" pill (last activity) */
.ago-pill { display: inline-block; font-size: 11.5px; font-weight: 600; color: #475467; background: #f2f4f7; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }

/* Auto "Last modified" column */
.mod-col-head { color: #98a2b3; font-weight: 600; white-space: nowrap; }
.mod-col-cell { white-space: nowrap; }

/* ===== Landing: Values (human-centered) ===== */
.landing-values { border-bottom: 1px solid rgba(23, 22, 22, 0.1); }
.values-core {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0;
  margin: 0 0 26px;
}
.values-core li {
  font-size: 12.5px; font-weight: 600; color: #2e6a54; letter-spacing: .01em;
  background: #eaf3ee; border: 1px solid #d3e6dc; border-radius: 999px; padding: 6px 13px;
}
.values-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.value-card {
  display: flex; flex-direction: column; gap: 10px; padding: 24px;
  background: #ffffff; border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 12px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.value-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -22px rgba(23, 22, 22, 0.4); border-color: rgba(46, 106, 84, 0.35); }
.value-card h3 { font-size: 17px; margin: 0; color: #171616; }
.value-card p { margin: 0; color: #6a5d53; line-height: 1.55; font-size: 14px; }
.value-card em {
  margin-top: auto; font-style: normal; font-weight: 600; color: #171616;
  line-height: 1.5; padding-top: 12px; border-top: 1px solid rgba(23, 22, 22, 0.08);
}
.values-manifesto {
  margin: 30px 0 0; padding: 28px 32px; border-radius: 14px;
  background: linear-gradient(160deg, #12261d 0%, #1c3a2c 100%); color: #eef3ef;
  border: none;
}
.values-manifesto p { margin: 0 0 12px; line-height: 1.65; color: #dbe6de; font-size: 15px; }
.values-manifesto p:last-child { margin-bottom: 0; }
.values-manifesto strong { color: #ffffff; font-weight: 600; }

/* ===== Landing: Comparison / Why Ordelume ===== */
.landing-compare { border-bottom: 1px solid rgba(23, 22, 22, 0.1); }
.compare-cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px;
}
.compare-col {
  padding: 20px; border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 12px; background: #ffffff;
}
.compare-col-tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: #6a5d53; margin-bottom: 12px;
}
.compare-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.compare-col li { font-size: 13.5px; color: #6a5d53; line-height: 1.4; }
.compare-col.is-ordelume { background: #12261d; border-color: #12261d; }
.compare-col.is-ordelume .compare-col-tag { color: #dbb469; }
.compare-col.is-ordelume li { color: #e7efe9; font-weight: 500; }
.compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid rgba(23, 22, 22, 0.1); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 860px; background: #fff; }
.compare-table td.no { color: #c3b9ad; }
.compare-table th, .compare-table td { padding: 13px 16px; text-align: center; font-size: 13.5px; border-bottom: 1px solid rgba(23, 22, 22, 0.08); }
.compare-table thead th { font-size: 12.5px; font-weight: 700; color: #6a5d53; background: #f6f1e8; }
.compare-table tbody th[scope="row"] { text-align: left; font-weight: 600; color: #171616; min-width: 210px; }
.compare-table td { color: #6a5d53; }
.compare-table .is-ordelume { background: rgba(46, 106, 84, 0.08); color: #1c3a2c; font-weight: 700; }
.compare-table thead th.is-ordelume { background: #12261d; color: #dbb469; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
.compare-legend { margin: 14px 0 0; font-size: 11.5px; color: #8a7d72; line-height: 1.6; }
.compare-legend span { white-space: nowrap; }
.compare-closing {
  margin: 22px 0 0; padding: 0 0 0 18px; border-left: 3px solid #2e6a54;
  font-size: 16px; line-height: 1.6; color: #171616; font-style: normal;
}

/* ===== Landing: Works-with strip ===== */
.landing-stack-strip {
  text-align: center; padding: 22px 0 10px; margin: 6px 0 10px;
  border-top: 1px solid rgba(23, 22, 22, 0.1); border-bottom: 1px solid rgba(23, 22, 22, 0.1);
}
.stack-strip-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #98897c; margin-bottom: 14px; }
.stack-strip-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; list-style: none; margin: 0; padding: 0; }
.stack-strip-logos li {
  font-size: 13px; font-weight: 600; color: #4a4038; background: #fff;
  border: 1px solid rgba(23, 22, 22, 0.14); border-radius: 999px; padding: 7px 14px;
  transition: border-color .14s ease, color .14s ease;
}
.stack-strip-logos li:hover { border-color: #2e6a54; color: #2e6a54; }
.stack-strip-more { display: block; margin-top: 13px; font-size: 12px; color: #98897c; }

.landing-final-note { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.66); }
.spotlight-mock .mock-window { transition: transform .2s ease, box-shadow .2s ease; }
.spotlight-mock .mock-window:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -28px rgba(23, 22, 22, 0.5); }

/* Lead profile summary card (CRM inspector) */
.lead-profile { margin: 0 0 14px; padding: 14px 16px; background: #f6f8f7; border: 1px solid #e2e8e4; border-left: 3px solid #2e6a54; border-radius: 10px; }
.lp-top { display: flex; align-items: flex-start; gap: 12px; }
.lp-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 4px 12px -6px rgba(23, 22, 22, 0.5); }
.lp-top-copy { flex: 1; }
.lp-top-copy .lp-accepted-badge { margin-bottom: 6px; }
.lp-top .lp-headline { flex: 1; margin: 0; }
.lp-headline { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #1f2a24; line-height: 1.45; }
.lp-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: #4a5a52; }
.lp-meta span { display: inline-flex; align-items: center; gap: 4px; }
.lp-link-btn { border: none; background: none; padding: 0; margin: 0; font: inherit; color: #2e6a54; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.lp-link-btn:hover { color: #275c49; }
.lp-contacts { margin-top: 10px; }
.lp-contacts .lp-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a9a92; margin-bottom: 6px; }
.lp-contact-list { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-contact-chip { font-size: 12px; font-weight: 600; color: #2e6a54; background: #eaf3ee; border: 1px solid #cfe6dc; border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.lp-contact-chip:hover { background: #dbece4; }
.lp-contact-chip.is-plain { color: #6a5d53; background: #f2f4f3; border-color: #e2e8e4; cursor: default; }
.lp-contact-chip.is-accepted { color: #1c5e3f; background: #d8f0e2; border-color: #8fd3b0; }
.lp-contact-chip.is-accepted:hover { background: #c9e9d5; }
.lp-accepted-badge { display: inline-block; font-size: 10.5px; font-weight: 700; color: #1c5e3f; background: #d8f0e2; border: 1px solid #8fd3b0; border-radius: 999px; padding: 1px 8px; letter-spacing: 0; text-transform: none; }
.lp-about { margin-top: 10px; }
.lp-about .lp-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a9a92; margin-bottom: 3px; }
.lp-about p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #3a463f; max-height: 128px; overflow: auto; }
.job-criteria { margin-bottom: 14px; }
.job-criteria .jc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.job-criteria .jc-head-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.job-criteria .jc-group { width: auto; min-width: 180px; padding: 6px 9px; font-size: 12.5px; }
.job-criteria .jc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; }
.job-criteria .jc-field { display: flex; flex-direction: column; gap: 4px; }
.job-criteria .jc-field > span { font-size: 11.5px; font-weight: 700; color: #6a5d53; }
.job-criteria .jc-field.jc-num { max-width: 180px; }
.jc-analysis { margin-top: 14px; padding: 12px 14px; border: 1px solid #e2e8e4; border-left: 3px solid #2e6a54; border-radius: 10px; background: #f6f8f7; }
.jc-analysis-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.jc-analysis-body { font-size: 12.5px; line-height: 1.55; color: #3a463f; white-space: pre-wrap; max-height: 340px; overflow: auto; }
.xai-panel { margin-top: 12px; border-top: 1px solid #e2e8e4; padding-top: 8px; }
.xai-panel > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: #2e6a54; list-style: none; display: flex; align-items: center; gap: 6px; }
.xai-panel > summary::-webkit-details-marker { display: none; }
/* "Why this?" is the whole point of the explainability panel, so it has to look
   openable; the native triangle is suppressed above. */
.xai-panel > summary::after { content: "\25B8"; font-size: 11px; opacity: 0.75; }
.xai-panel[open] > summary::after { content: "\25BE"; }
.xai-body { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.xai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.xai-chip { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: #f1ece2; color: #5f5347; }
.xai-chip em { font-style: normal; font-weight: 700; opacity: .7; margin-right: 5px; }
.xai-chip.ok { background: #e7f2ec; color: #1f6a4f; }
.xai-chip.warn { background: #fef6e7; color: #a86a12; }
.xai-chip.bad { background: #fdecea; color: #a8412f; }
.xai-line { margin: 0; font-size: 12px; line-height: 1.5; color: #3a463f; }
.xai-line.muted { color: #8a7d6f; font-size: 11.5px; }
.xai-factor, .xai-ev { display: inline-block; font-size: 11px; padding: 2px 8px; margin: 2px 4px 2px 0; border-radius: 6px; background: #f6f8f7; border: 1px solid #e2e8e4; color: #4a4038; }
.job-fit { margin-bottom: 10px; }
.job-fit-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #eee7da; color: #5f5347; }
.job-fit-badge.is-good { background: #e7f2ec; color: #1f6a4f; }
.job-fit-badge.is-partial { background: #fef6e7; color: #a86a12; }
.job-fit-badge.is-no { background: #fdecea; color: #a8412f; }
.job-signals { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.job-signal { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: #f1ece2; color: #4a4038; }
.job-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.job-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #e7f2ec; color: #1f6a4f; border: 1px solid #cfe5d9; }
.lp-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 11px; font-size: 12px; }
.lp-links a { color: #2e6a54; font-weight: 600; text-decoration: none; }
.lp-links a:hover { text-decoration: underline; }

/* ===== Blog (standalone pages) ===== */
.blog-body { background: #fffaf3; color: #171616; margin: 0; }
.blog-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px clamp(20px, 5vw, 60px); border-bottom: 1px solid rgba(23, 22, 22, 0.08); position: sticky; top: 0; background: rgba(255, 250, 243, 0.92); backdrop-filter: blur(8px); z-index: 10; }
.blog-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 18px; color: #171616; text-decoration: none; }
.blog-nav-links { display: flex; align-items: center; gap: 18px; }
.blog-nav-links a { color: #4a4038; text-decoration: none; font-size: 14px; font-weight: 500; }
.blog-nav-links a:hover { color: #2e6a54; }
.blog-cta { background: #2e6a54; color: #fff !important; padding: 9px 16px; border-radius: 999px; font-weight: 600; transition: background .16s ease; }
.blog-cta:hover { background: #275c49; }
.blog-wrap { max-width: 960px; margin: 0 auto; padding: clamp(30px, 5vw, 56px) clamp(20px, 5vw, 40px) 56px; }
.blog-head { max-width: 720px; margin-bottom: 34px; }
.blog-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #dbb469; }
.blog-head h1 { font-size: clamp(28px, 4.5vw, 44px); line-height: 1.1; margin: 12px 0 0; }
.blog-head p { color: #6a5d53; line-height: 1.6; font-size: 17px; margin-top: 14px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.blog-card { border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 14px; background: #fff; transition: transform .16s ease, box-shadow .16s ease; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -24px rgba(23, 22, 22, 0.45); }
.blog-card a { display: block; padding: 22px; text-decoration: none; color: inherit; }
.blog-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #2e6a54; background: #eaf3ee; border-radius: 999px; padding: 4px 10px; }
.blog-card h2 { font-size: 18px; line-height: 1.25; margin: 12px 0 8px; color: #171616; }
.blog-card p { color: #6a5d53; line-height: 1.5; font-size: 14px; margin: 0 0 14px; }
.blog-meta { font-size: 12px; color: #98897c; }
.blog-subscribe { margin-top: 40px; text-align: center; padding: 36px clamp(20px, 4vw, 40px); border-radius: 16px; background: linear-gradient(160deg, #12261d 0%, #1c3a2c 100%); color: #fff; }
.blog-subscribe h3 { margin: 0 0 8px; font-size: 22px; }
.blog-subscribe p { margin: 0 0 18px; color: #c6d3cc; }
.blog-footer { border-top: 1px solid rgba(23, 22, 22, 0.08); padding: 22px clamp(20px, 5vw, 60px); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: #8a7d72; }
.blog-footer a { color: #6a5d53; text-decoration: none; }
.blog-footer a:hover { color: #2e6a54; }
.blog-post { max-width: 720px; margin: 0 auto; }
.blog-back { display: inline-block; margin-bottom: 16px; color: #2e6a54; text-decoration: none; font-size: 13.5px; font-weight: 600; }
.blog-post h1 { font-size: clamp(26px, 4vw, 40px); line-height: 1.12; margin: 12px 0 6px; }
.blog-post-meta { color: #98897c; font-size: 13.5px; margin: 0 0 26px; }
.blog-post h2 { font-size: 22px; margin: 32px 0 10px; color: #171616; }
.blog-post p { color: #2b2620; line-height: 1.7; font-size: 17px; margin: 0 0 18px; }
.blog-cta-box { margin-top: 36px; padding: 26px; border-radius: 14px; background: #f6f1e8; text-align: center; }
.blog-cta-box strong { display: block; font-size: 18px; color: #171616; }
.blog-cta-box p { color: #6a5d53; margin: 6px 0 16px; font-size: 14px; }
@media (max-width: 820px) { .blog-grid { grid-template-columns: 1fr; } }

/* Blog index: hero visual + tag filters */
.blog-head.has-visual { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 32px; align-items: center; max-width: none; }
.blog-head-copy { max-width: 620px; }
.blog-hero-visual { width: 100%; height: auto; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.blog-filter { font-size: 12.5px; font-weight: 600; color: #4a4038; background: #fff; border: 1px solid rgba(23, 22, 22, 0.14); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: all .14s ease; }
.blog-filter:hover { border-color: #2e6a54; color: #2e6a54; }
.blog-filter.is-active { background: #2e6a54; border-color: #2e6a54; color: #fff; }
.blog-card.is-hidden { display: none; }
@media (max-width: 820px) { .blog-head.has-visual { grid-template-columns: 1fr; } .blog-hero-visual { max-width: 340px; margin: 4px auto 0; } }

/* Blog: product screenshot mockups (framed) */
.shot { border: 1px solid rgba(23, 22, 22, 0.14); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(23, 22, 22, 0.55); background: #fff; }
.shot-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f2efe8; border-bottom: 1px solid rgba(23, 22, 22, 0.08); }
.shot-bar > i { width: 10px; height: 10px; border-radius: 50%; background: #d0c8ba; display: inline-block; }
.shot-bar > i:nth-child(1) { background: #e5a09a; }
.shot-bar > i:nth-child(2) { background: #e6c98a; }
.shot-bar > i:nth-child(3) { background: #a9cbb6; }
.shot-bar em { margin-left: 10px; font-style: normal; font-size: 12px; color: #8a7d72; }
.shot-body { padding: 18px; background: #fbfaf7; }
.shot-title { font-size: 13px; font-weight: 700; color: #171616; margin: 0 0 12px; }
.shot-chat { display: flex; flex-direction: column; gap: 8px; }
.shot-msg { max-width: 82%; padding: 9px 13px; border-radius: 13px; font-size: 13px; line-height: 1.4; }
.shot-msg.out { align-self: flex-end; background: #2e6a54; color: #fff; border-bottom-right-radius: 4px; }
.shot-msg.in { align-self: flex-start; background: #eceff2; color: #1f2937; border-bottom-left-radius: 4px; }
.shot-msg small { display: block; font-size: 10.5px; opacity: .7; margin-bottom: 2px; }
.shot-composer { margin-top: 14px; border: 1px solid #d0d5dd; border-radius: 12px; padding: 11px 13px; background: #fff; }
.shot-hint { display: inline-block; font-size: 11.5px; font-weight: 600; color: #285c48; background: #eaf3ee; border: 1px solid #cfe6dc; border-radius: 8px; padding: 4px 10px; margin-bottom: 9px; }
.shot-input { display: flex; gap: 10px; align-items: flex-end; }
.shot-fakeinput { flex: 1; font-size: 13px; color: #101828; line-height: 1.45; }
.shot-send { background: #2e6a54; color: #fff; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.shot-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.shot-kpi { background: #fff; border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 10px; padding: 15px 12px; text-align: center; }
.shot-kpi strong { display: block; font-size: 24px; color: #2e6a54; line-height: 1.1; }
.shot-kpi span { font-size: 11.5px; color: #6a5d53; }
@media (max-width: 520px) { .shot-kpis { grid-template-columns: 1fr; } }

.blog-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(23, 22, 22, 0.08); }
.blog-share > span { font-size: 13px; font-weight: 600; color: #6a5d53; }
.blog-share-btn { font-size: 13px; font-weight: 600; color: #2e6a54; background: #eaf3ee; border: 1px solid #cfe6dc; border-radius: 999px; padding: 7px 14px; text-decoration: none; cursor: pointer; transition: background .16s ease; }
.blog-share-btn:hover { background: #dbece4; }

/* Blog visuals: stats, tables, charts, diagrams */
.blog-figure { margin: 30px 0; padding: 22px 24px; border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 14px; background: #fff; }
.blog-figure.dark { background: linear-gradient(160deg, #12261d 0%, #1c3a2c 100%); border-color: transparent; }
.blog-figcap { margin-top: 14px; font-size: 12.5px; color: #98897c; text-align: center; }
.blog-figure.dark .blog-figcap { color: #8ea79b; }
.blog-figtitle { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #2e6a54; margin-bottom: 16px; }
.blog-figure.dark .blog-figtitle { color: #dbb469; }

.blog-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 30px 0; }
.blog-stat { padding: 20px 16px; border-radius: 12px; background: #f6f1e8; text-align: center; }
.blog-stat strong { display: block; font-size: 30px; color: #2e6a54; line-height: 1.05; }
.blog-stat span { display: block; margin-top: 6px; font-size: 12.5px; color: #6a5d53; line-height: 1.4; }

.blog-callout { margin: 30px 0; padding: 20px 24px; border-left: 4px solid #2e6a54; background: #eaf3ee; border-radius: 0 12px 12px 0; font-size: 18px; line-height: 1.5; color: #1c3a2c; font-weight: 600; }

.blog-table-wrap { overflow-x: auto; margin: 30px 0; border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 12px; }
.blog-table2 { width: 100%; border-collapse: collapse; min-width: 520px; background: #fff; font-size: 14.5px; }
.blog-table2 th, .blog-table2 td { padding: 12px 16px; text-align: left; border-bottom: 1px solid rgba(23, 22, 22, 0.08); vertical-align: top; }
.blog-table2 thead th { background: #f6f1e8; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #6a5d53; }
.blog-table2 tbody th { font-weight: 600; color: #171616; }
.blog-table2 tbody tr:last-child td, .blog-table2 tbody tr:last-child th { border-bottom: none; }
.blog-table2 .good { color: #2e6a54; font-weight: 600; }
.blog-table2 .ord { background: rgba(46, 106, 84, 0.06); }

.blog-bars { display: flex; align-items: flex-end; gap: clamp(14px, 4vw, 40px); height: 200px; padding: 8px 4px 0; }
.blog-barcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.blog-barcol .bar { width: 100%; max-width: 76px; border-radius: 8px 8px 0 0; background: linear-gradient(#2e6a54, #3f8168); box-shadow: inset 0 -2px 0 rgba(0,0,0,.06); }
.blog-barcol .bar.muted { background: linear-gradient(#cabfa8, #ded3bd); }
.blog-barcol .barval { font-size: 13px; font-weight: 700; color: #171616; margin-bottom: 6px; }
.blog-barcol b { margin-top: 10px; font-size: 13px; color: #171616; }
.blog-barcol em { font-size: 12px; color: #6a5d53; font-style: normal; text-align: center; margin-top: 2px; }

.blog-flow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.blog-flow .node { font-size: 12.5px; font-weight: 600; color: #eef3ef; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 8px 14px; }
.blog-flow .node.hot { background: rgba(219,180,105,0.16); border-color: #dbb469; color: #fff; }
.blog-flow .arr { color: rgba(255,255,255,0.4); }

.blog-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.blog-split .box { border-radius: 12px; padding: 16px; text-align: center; }
.blog-split .box.before { background: #fbe9e4; border: 1px solid #f2cabb; }
.blog-split .box.after { background: #eaf3ee; border: 1px solid #cfe6dc; }
.blog-split .box strong { display: block; font-size: 14px; color: #171616; margin-bottom: 8px; }
.blog-split .box .chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.blog-split .box .chips span { font-size: 11px; background: rgba(255,255,255,0.7); border-radius: 999px; padding: 3px 9px; color: #6a5d53; }
.blog-split .box.after .chips span { background: #2e6a54; color: #fff; font-weight: 600; }
.blog-split .arrowto { font-size: 22px; color: #98897c; }

@media (max-width: 620px) {
  .blog-stats { grid-template-columns: 1fr; }
  .blog-split { grid-template-columns: 1fr; }
  .blog-split .arrowto { transform: rotate(90deg); }
}

/* ===== Landing: Integrations section ===== */
.landing-integrations { border-bottom: 1px solid rgba(23, 22, 22, 0.1); }
.int-group { margin-top: 26px; }
.int-cat { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #2e6a54; margin: 0 0 12px; }
.int-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.int-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background: #fff; border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 12px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.int-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -22px rgba(23, 22, 22, 0.42); border-color: rgba(46, 106, 84, 0.35); }
.int-logo { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.int-card strong { display: block; font-size: 15px; color: #171616; }
.int-card p { margin: 3px 0 0; color: #6a5d53; line-height: 1.45; font-size: 13px; }
.int-note { margin: 24px 0 0; font-size: 13px; color: #8a7d72; }
@media (max-width: 860px) { .int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .int-grid { grid-template-columns: 1fr; } }

/* ===== Landing: Self-hosted / own deployment (pricing) ===== */
.pricing-selfhost {
  margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px);
  align-items: center; padding: clamp(24px, 3vw, 36px); border-radius: 18px;
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(46, 106, 84, 0.1), transparent 55%),
    linear-gradient(160deg, #ffffff 0%, #f6f1e8 100%);
  border: 1px solid rgba(23, 22, 22, 0.1);
}
.pricing-selfhost-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #2e6a54; }
.pricing-selfhost-copy h3 { margin: 10px 0 0; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.15; color: #171616; }
.pricing-selfhost-copy p { margin: 12px 0 18px; color: #6a5d53; line-height: 1.55; font-size: 14.5px; }
.pricing-selfhost-opts { display: flex; flex-direction: column; gap: 12px; }
.selfhost-opt { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 12px; padding: 14px 16px; }
.selfhost-opt strong { display: block; color: #171616; font-size: 15px; }
.selfhost-opt p { margin: 3px 0 0; color: #6a5d53; line-height: 1.45; font-size: 13.5px; }
@media (max-width: 760px) { .pricing-selfhost { grid-template-columns: 1fr; } }

/* ===== Landing: A day with your agents ===== */
.landing-day { border-bottom: 1px solid rgba(23, 22, 22, 0.1); }
.day-flow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 30px; }
.day-flow-node {
  font-size: 12.5px; font-weight: 600; color: #6a5d53; background: #fff;
  border: 1px solid rgba(23, 22, 22, 0.12); border-radius: 999px; padding: 8px 15px;
  animation: dayPulse 5s ease-in-out infinite;
}
.day-flow-node[data-step="1"] { animation-delay: 1s; }
.day-flow-node[data-step="2"] { animation-delay: 2s; }
.day-flow-node[data-step="3"] { animation-delay: 3s; }
.day-flow-node[data-step="4"] { animation-delay: 4s; }
.day-flow-arrow { width: 20px; height: 2px; background: rgba(23, 22, 22, 0.16); border-radius: 2px; }
@keyframes dayPulse {
  0%, 18% { border-color: #2e6a54; color: #1c3a2c; background: #eaf3ee; box-shadow: 0 8px 20px -12px rgba(46, 106, 84, 0.7); }
  24%, 100% { border-color: rgba(23, 22, 22, 0.12); color: #6a5d53; background: #fff; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .day-flow-node { animation: none; } }
.day-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 840px; }
.day-item { display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: stretch; }
.day-time { font-size: 13px; font-weight: 700; color: #2e6a54; padding-top: 18px; text-align: right; }
.day-card { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid rgba(23, 22, 22, 0.1); border-left: 3px solid #2e6a54; border-radius: 12px; padding: 16px 18px; transition: transform .16s ease, box-shadow .16s ease; }
.day-card:hover { transform: translateX(3px); box-shadow: 0 14px 30px -22px rgba(23, 22, 22, 0.42); }
.day-ic { font-size: 24px; line-height: 1; }
.day-card h4 { margin: 0 0 4px; font-size: 16px; color: #171616; }
.day-card p { margin: 0; color: #6a5d53; line-height: 1.5; font-size: 14px; }
@media (max-width: 560px) { .day-item { grid-template-columns: 48px 1fr; gap: 10px; } }

/* ===== Landing: ROI estimator ===== */
.landing-roi { border-bottom: 1px solid rgba(23, 22, 22, 0.1); }
.roi-widget { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: center; background: #fff; border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 16px; padding: 26px; }
.roi-inputs { display: flex; flex-direction: column; gap: 18px; }
.roi-field { display: flex; flex-direction: column; gap: 8px; }
.roi-label { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; color: #344054; }
.roi-label b { color: #2e6a54; }
.roi-field input[type="range"] { width: 100%; accent-color: #2e6a54; cursor: pointer; }
.roi-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.roi-result { text-align: center; padding: 18px 10px; background: #f6f1e8; border-radius: 12px; }
.roi-result strong { display: block; font-size: 25px; color: #171616; line-height: 1.1; }
.roi-result span { font-size: 12px; color: #6a5d53; }
.roi-result.accent { background: #12261d; }
.roi-result.accent strong { color: #fff; }
.roi-result.accent span { color: #c6d3cc; }
.roi-note { margin: 14px 0 0; font-size: 12px; color: #98897c; line-height: 1.6; max-width: 760px; }
@media (max-width: 800px) { .roi-widget { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .roi-results { grid-template-columns: 1fr; } }

/* ===== Landing: Founder note ===== */
.founder-card {
  max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: 260px 1fr; gap: clamp(24px, 4vw, 48px);
  align-items: center; padding: clamp(30px, 4vw, 48px); border-radius: 22px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(219, 180, 105, 0.1), transparent 55%),
    linear-gradient(160deg, #ffffff 0%, #f7f2ea 100%);
  border: 1px solid rgba(23, 22, 22, 0.08); box-shadow: 0 30px 70px -50px rgba(23, 22, 22, 0.5);
}
.founder-media { display: flex; flex-direction: column; align-items: center; text-align: center; }
.founder-photo-wrap { position: relative; width: 168px; height: 168px; margin-bottom: 18px; }
.founder-photo-wrap::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  background: conic-gradient(from 210deg, #2e6a54, #dbb469, #2e6a54); opacity: .55; z-index: 0;
}
.founder-photo, .founder-mark {
  position: relative; z-index: 1; width: 168px; height: 168px; border-radius: 50%;
  object-fit: cover; border: 4px solid #fff; box-shadow: 0 18px 40px -22px rgba(23, 22, 22, 0.6);
}
.founder-mark { display: none; place-items: center; background: #2e6a54; color: #f2efe8; font-weight: 700; font-size: 56px; }
.founder-name { color: #171616; font-size: 19px; font-weight: 700; }
.founder-role { color: #8a7d72; font-size: 13.5px; margin-top: 2px; }
.founder-linkedin {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 9px 16px;
  font-size: 13px; font-weight: 600; color: #fff; background: #2e6a54; border-radius: 999px;
  text-decoration: none; transition: background .16s ease, transform .16s ease;
}
.founder-linkedin:hover { background: #275c49; transform: translateY(-1px); }
.founder-quote { position: relative; padding-top: 26px; }
.founder-quote::before {
  content: "\201C"; position: absolute; top: -8px; left: -6px; font-size: 110px; line-height: 1;
  font-family: Georgia, "Times New Roman", serif; color: rgba(46, 106, 84, 0.2); pointer-events: none;
}
.founder-quote blockquote { position: relative; margin: 0; border: none; padding: 0; }
.founder-quote blockquote p { position: relative; margin: 0 0 14px; font-size: clamp(16px, 2vw, 19.5px); line-height: 1.62; color: #2b2620; }
.founder-quote blockquote p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .founder-card { grid-template-columns: 1fr; text-align: center; }
  .founder-quote { text-align: left; padding-top: 30px; }
}

/* ===== Landing: Agentic Business OS (vision) ===== */
.landing-agentic {
  margin: 22px 0; padding: 48px clamp(20px, 4vw, 56px); border-radius: 20px;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(47, 106, 84, 0.32), transparent 55%),
    linear-gradient(160deg, #10201a 0%, #0c1613 100%);
  color: #eef3ef; overflow: hidden;
}
.aos-inner { max-width: 1040px; margin: 0 auto; }
.aos-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #dbb469; }
.aos-head h2 { margin: 12px 0 0; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.06; color: #fff; max-width: 16ch; }
.aos-lede { margin: 16px 0 0; max-width: 62ch; color: #c6d3cc; line-height: 1.6; font-size: clamp(15px, 1.6vw, 17px); }

.aos-eras { display: flex; align-items: stretch; gap: 12px; margin: 34px 0 0; flex-wrap: wrap; }
.aos-era {
  flex: 1 1 200px; min-width: 190px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px; padding: 16px 18px; color: #cdd8d2; position: relative;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.aos-era:hover { transform: translateY(-2px); border-color: rgba(219, 180, 105, 0.5); }
.aos-era.is-active { background: rgba(219, 180, 105, 0.1); border-color: #dbb469; }
.aos-era-tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8ea79b; }
.aos-era strong { display: block; margin: 6px 0 4px; font-size: 18px; color: #fff; }
.aos-era em { font-style: normal; font-size: 13px; line-height: 1.45; color: #b6c5bd; }
.aos-era.is-active em { color: #e7efe9; }
.aos-era-badge { position: absolute; top: -10px; right: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #10201a; background: #dbb469; border-radius: 999px; padding: 3px 9px; }
.aos-era-arrow { align-self: center; color: rgba(255, 255, 255, 0.35); font-size: 18px; }
.aos-era-detail { margin: 16px 0 0; padding: 16px 18px; background: rgba(255, 255, 255, 0.05); border-left: 3px solid #dbb469; border-radius: 8px; color: #dbe6df; line-height: 1.6; font-size: 15px; }

.aos-block { margin: 34px 0 0; }
.aos-sub { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #dbb469; }
.aos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.aos-card {
  padding: 20px; border-radius: 14px; background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: 8px;
  transition: transform .18s ease, border-color .18s ease;
}
.aos-card:hover { transform: translateY(-3px); border-color: rgba(219, 180, 105, 0.4); }
.aos-card strong { color: #fff; font-size: 16px; }
.aos-card p { margin: 0; color: #b6c5bd; line-height: 1.5; font-size: 13.5px; }
.aos-num { font-size: 22px; font-weight: 700; color: rgba(219, 180, 105, 0.6); letter-spacing: .02em; }
.aos-ic { font-size: 24px; }
.aos-card.accent { background: rgba(47, 106, 84, 0.16); border-color: rgba(47, 106, 84, 0.5); }

.aos-closing { margin: 36px 0 0; padding: 0; border: none; font-size: clamp(19px, 2.4vw, 26px); line-height: 1.4; color: #fff; font-weight: 600; max-width: 26ch; }
.aos-actions { margin: 22px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px) { .aos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .aos-grid { grid-template-columns: 1fr; } .aos-era-arrow { display: none; } }

/* ===== Landing: click-to-detail modal ===== */
.value-card.is-clickable, .outcome-card.is-clickable, .research-stat.is-clickable, .int-card.is-clickable { cursor: pointer; }
.compare-table tbody tr.is-clickable { cursor: pointer; }
.compare-table tbody tr.is-clickable:hover { background: rgba(46, 106, 84, 0.05); }
.outcome-card.is-clickable { transition: transform .16s ease, box-shadow .16s ease; }
.outcome-card.is-clickable:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -20px rgba(23, 22, 22, 0.45); }
.value-card.is-clickable::after { content: "Details →"; font-size: 11.5px; font-weight: 600; color: #2e6a54; opacity: .55; transition: opacity .16s ease; margin-top: -2px; }
.value-card.is-clickable:hover::after { opacity: 1; }

/* These cards open a detail dialog, but a lift on hover is the only thing that ever
   said so: invisible on first look and absent entirely on touch. Give each one a
   corner chevron that is always there and strengthens on hover. */
.outcome-card.is-clickable,
.research-stat.is-clickable,
.int-card.is-clickable { position: relative; }
.outcome-card.is-clickable::after,
.research-stat.is-clickable::after,
.int-card.is-clickable::after {
  content: "\203A";
  position: absolute;
  /* Sits above the card's own text band: these cards centre a wide figure that
     reaches close to the edge, so the arrow has to clear it vertically. */
  top: 6px;
  right: 10px;
  font-size: 14px;
  line-height: 1;
  color: #2e6a54;
  opacity: 0.45;
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
.outcome-card.is-clickable:hover::after,
.research-stat.is-clickable:hover::after,
.int-card.is-clickable:hover::after { opacity: 1; transform: translateX(2px); }

/* Comparison rows open the same dialog; mark the row label so the whole row reads
   as interactive rather than a static table cell. */
.compare-table tbody tr.is-clickable th[scope="row"] { position: relative; padding-right: 22px; }
.compare-table tbody tr.is-clickable th[scope="row"]::after {
  content: "\203A";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #2e6a54;
  opacity: 0.45;
  font-size: 15px;
  transition: opacity .16s ease;
}
.compare-table tbody tr.is-clickable:hover th[scope="row"]::after { opacity: 1; }
/* Explainable AI cards: gentle lift + an always-visible "Details" arrow, like the agent cards. */
#explainable .xai-land-grid > div { cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
#explainable .xai-land-grid > div:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(18, 25, 39, 0.1); border-color: rgba(47, 106, 84, 0.35); }
#explainable .xai-land-grid > div::after { content: "Details →"; display: block; margin-top: 12px; font-size: 11.5px; font-weight: 700; color: #2e6a54; opacity: .5; transition: opacity .16s ease, transform .16s ease; }
#explainable .xai-land-grid > div:hover::after { opacity: 1; transform: translateX(3px); }
.detail-block h4 { margin: 0 0 8px; font-size: 13px; color: #171616; }
.detail-points { margin: 0 0 4px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.detail-points li { color: #4a4038; line-height: 1.5; font-size: 14px; }
.detail-example { margin: 14px 0 0; padding: 12px 14px; background: #f6f1e8; border-radius: 10px; }
.detail-example span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #98897c; margin-bottom: 4px; }
.detail-example p { margin: 0; color: #4a4038; line-height: 1.5; font-size: 14px; }
.detail-metric { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: #2e6a54; }

/* ===== Landing: Research band ===== */
.landing-research { border-bottom: 1px solid rgba(23, 22, 22, 0.1); }
.research-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.research-stat {
  padding: 22px 24px; background: #ffffff; border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.research-stat strong { font-size: 34px; line-height: 1; color: #2e6a54; font-weight: 700; }
.research-stat span { color: #4a4038; line-height: 1.5; font-size: 14.5px; }
.research-stat cite { margin-top: auto; font-style: normal; font-size: 12px; color: #98897c; }
.research-note { margin: 16px 0 0; font-size: 12px; color: #98897c; line-height: 1.6; max-width: 760px; }

@media (max-width: 900px) {
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .research-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .values-grid { grid-template-columns: 1fr; }
  .compare-cols { grid-template-columns: 1fr; }
  .research-grid { grid-template-columns: 1fr; }
  .values-manifesto { padding: 22px; }
}

/* ===== Duplicate finder overlay ===== */
.dedupe-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(12, 17, 29, 0.55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; }
.dedupe-card { background: #fff; border-radius: 16px; max-width: 640px; width: 100%; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); padding: 22px; }
.dedupe-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.dedupe-head h3 { font-size: 18px; margin-top: 4px; }
.dd-sub { font-size: 13px; color: #5f5347; margin-top: 6px; line-height: 1.5; }
.dedupe-close { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: #98897c; }
.dedupe-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.dedupe-groups { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow: auto; padding-right: 2px; }
.dd-group { border: 1px solid #e7e0d4; border-radius: 12px; padding: 12px; }
.dd-recs { display: flex; flex-direction: column; gap: 8px; }
.dd-rec { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: #faf7f1; border: 1px solid #eee7db; }
.dd-rec.keep { background: #f0f6f2; border-color: #cfe6da; }
.dd-keep { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #2e6a54; background: #dcebe4; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.dd-drop { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #8a8073; background: #efe9df; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.dd-rec-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dd-rec-main b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-rec-main span { font-size: 11.5px; color: #5f5347; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-meta { font-size: 11px; color: #98897c; white-space: nowrap; }
.dd-group-actions { display: flex; gap: 8px; margin-top: 10px; }
.dedupe-empty { padding: 24px 0; text-align: center; color: #5f5347; }
.mini-btn { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; border: 1px solid #2e6a54; background: #2e6a54; color: #fff; cursor: pointer; }
.mini-btn.ghost { background: transparent; color: #2e6a54; }

/* ===== Upwork Assist gig board ===== */
.uw-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.uw-col { background: #faf7f1; border: 1px solid #e7e0d4; border-radius: 10px; padding: 8px; min-width: 170px; }
.uw-col h5 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #8a7a5e; margin: 2px 2px 8px; display: flex; justify-content: space-between; align-items: center; }
.uw-col h5 span { background: #efe9df; border-radius: 999px; padding: 0 7px; color: #5f5347; font-size: 10px; }
.uw-card { background: #fff; border: 1px solid #e7e0d4; border-radius: 8px; padding: 8px 9px; margin-bottom: 7px; }
.uw-card-title { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.uw-card-title a { color: #2e6a54; text-decoration: none; }
.uw-note { font-size: 11px; color: #5f5347; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.uw-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; gap: 6px; }
.uw-date { font-size: 10px; color: #98897c; white-space: nowrap; }
.uw-acts { display: flex; gap: 3px; }
.uw-acts button { border: 1px solid #e7e0d4; background: #fff; border-radius: 6px; font-size: 11px; padding: 2px 6px; cursor: pointer; color: #5f5347; line-height: 1.2; }
.uw-acts button:hover:not(:disabled) { background: #f2ede4; }
.uw-acts button:disabled { opacity: 0.35; cursor: default; }
.uw-empty { font-size: 11px; color: #b9ad9c; text-align: center; padding: 6px 0; }
.uw-warn { display: none; margin-top: 8px; font-size: 12px; line-height: 1.5; color: #9a6c1e; background: #fbf3e2; border: 1px solid #ecd9ad; border-radius: 8px; padding: 8px 10px; }

/* ===== Upwork gig card extras + detail modal ===== */
.uw-open { border: 0; background: transparent; padding: 0; margin: 0; font: inherit; font-weight: 700; color: #171616; cursor: pointer; text-align: left; }
.uw-open:hover { color: #2e6a54; text-decoration: underline; }
.uw-ext { margin-left: 5px; color: #2e6a54; text-decoration: none; font-size: 12px; }
.uw-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.uw-badges span { font-size: 10px; font-weight: 700; color: #6a5d53; background: #efe9df; border-radius: 999px; padding: 1px 7px; }
.uw-detail-body { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; max-height: 62vh; overflow: auto; padding-right: 2px; }
.uw-detail-body > label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: #5f5347; }
.uw-detail-body > label .input { font-weight: 400; }
.uw-files { border: 1px dashed #e0d8c8; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.uw-files-lbl { font-size: 12px; font-weight: 700; color: #5f5347; }
.uw-file { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #faf7f1; border: 1px solid #eee7db; border-radius: 8px; padding: 6px 10px; }
.uw-file a { color: #2e6a54; text-decoration: none; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uw-file-x { border: 0; background: transparent; color: #98897c; cursor: pointer; font-size: 13px; }
.uw-file-add { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: #2e6a54; border: 1px solid #cfe6da; background: #f0f6f2; border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.uw-detail-actions { display: flex; gap: 10px; }

/* ===== Upwork positioning assets + AI suggestions ===== */
.uw-assets { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .uw-assets { grid-template-columns: 1fr 1fr; } }
.uw-assets-col { border: 1px dashed #e0d8c8; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.uw-add-row { display: flex; flex-wrap: wrap; gap: 6px; }
.uw-add-row .input { flex: 1; min-width: 120px; }
.uw-suggest { margin-top: 10px; background: #f0f6f2; border: 1px solid #cfe6da; border-radius: 10px; padding: 10px 12px; }
.uw-sug-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.uw-sug-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #2e6a54; background: #dcebe4; border: 1px solid #bcdccb; border-radius: 999px; padding: 3px 10px; text-decoration: none; }
.uw-sug-chip:hover { background: #cfe6da; }

/* ===== Upwork refine row ===== */
.uw-refine-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.uw-refine-row .input { flex: 1; min-width: 200px; }

/* ===== Upwork refine chat ===== */
.uw-chat { margin-top: 12px; }
.uw-chat-thread { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 4px 2px 8px; }
.uw-chat-empty { font-size: 12px; color: #98897c; padding: 6px 2px; }
.uw-msg { display: flex; }
.uw-msg span { font-size: 12.5px; line-height: 1.45; border-radius: 12px; padding: 7px 11px; max-width: 82%; white-space: pre-wrap; }
.uw-msg.me { justify-content: flex-end; }
.uw-msg.me span { background: #2e6a54; color: #fff; border-bottom-right-radius: 4px; }
.uw-msg.ai span { background: #f2ede4; color: #3f3a33; border-bottom-left-radius: 4px; }

/* ===== Upwork gig detail: price/bids row ===== */
.uw-detail-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 520px) { .uw-detail-row { grid-template-columns: 1fr 1fr; } }
.uw-detail-row > label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: #5f5347; }
.uw-detail-row > label .input { font-weight: 400; }

/* ===== LinkedIn sending schedule overlay ===== */
.sched-body { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
.sched-toggle { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #3f3a33; }
.uw-days { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.uw-day { border: 1px solid #e7e0d4; background: #fff; color: #5f5347; border-radius: 8px; font-size: 12.5px; font-weight: 700; padding: 6px 12px; cursor: pointer; }
.uw-day.on { background: #2e6a54; border-color: #2e6a54; color: #fff; }
.sched-hours { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sched-hours label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #5f5347; }
.sched-hours .input { width: 92px; }

/* ---- Voice input button ---- */
.voice-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(23, 22, 22, 0.14);
  background: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.voice-btn:hover { border-color: rgba(47, 106, 84, 0.4); background: #f3f8f5; }
.voice-btn.is-recording {
  border-color: #b42318;
  background: rgba(180, 35, 24, 0.08);
  animation: voicePulse 1.3s ease-in-out infinite;
}
.voice-btn.is-busy { opacity: .7; cursor: wait; }
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 35, 24, 0.32); }
  50% { box-shadow: 0 0 0 6px rgba(180, 35, 24, 0); }
}
@media (prefers-reduced-motion: reduce) { .voice-btn.is-recording { animation: none; } }
.voice-btn-sm { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; vertical-align: middle; margin-left: 6px; }
.voice-lang {
  height: 40px;
  max-width: 130px;
  margin-left: 6px;
  padding: 0 8px;
  border: 1px solid rgba(23, 22, 22, 0.14);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  color: #5f5347;
  cursor: pointer;
}
.voice-lang:hover { border-color: rgba(47, 106, 84, 0.4); }
.voice-btn-sm + .voice-lang { height: 28px; font-size: 11px; max-width: 118px; }
.voice-diag {
  display: none;
  width: 100%;
  margin-top: 4px;
  font-size: 10.5px;
  font-family: ui-monospace, Menlo, monospace;
  color: #98a2b3;
}

/* Private-thread badge in the messenger list */
.message-thread-private {
  background: rgba(190, 138, 47, 0.14);
  color: #9a6c1e;
  font-weight: 700;
}

/* ---- Messenger: attachments, voice notes, emoji ---- */
.message-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.msg-tool { cursor: pointer; }
.msg-tool.is-recording { background: rgba(180, 35, 24, 0.1); border-color: #b42318; color: #b42318; }
.msg-tool-status { font-size: 11.5px; color: #6a5d53; }

.message-emoji-panel {
  display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 6px; padding: 8px;
  border: 1px solid rgba(23, 22, 22, 0.1); border-radius: 12px; background: #fff;
  max-height: 148px; overflow-y: auto;
}
.message-emoji-panel[hidden] { display: none; }
.msg-emoji { border: 0; background: transparent; font-size: 19px; line-height: 1; padding: 5px; border-radius: 8px; cursor: pointer; }
.msg-emoji:hover { background: rgba(46, 106, 84, 0.1); }

.message-attach-tray { display: none; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.msg-tray-item {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px;
  border: 1px solid rgba(23, 22, 22, 0.12); border-radius: 999px; background: #fff; font-size: 11.5px;
}
.msg-tray-item img { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; }
.msg-tray-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-tray-remove { border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; color: #8a8073; padding: 0 2px; }
.msg-tray-remove:hover { color: #b42318; }

/* In-thread rendering */
.msg-attachments { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.msg-att-image { display: block; max-width: 260px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(23, 22, 22, 0.1); }
.msg-att-image img { display: block; width: 100%; height: auto; }
.msg-att-voice { display: flex; flex-direction: column; gap: 5px; }
.msg-att-voice audio { width: 100%; max-width: 280px; height: 34px; }
.msg-att-transcript { margin: 0; font-size: 12.5px; line-height: 1.5; color: #5f5347; font-style: italic; }
.msg-att-file {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; text-decoration: none;
  border: 1px solid rgba(23, 22, 22, 0.12); border-radius: 10px; background: rgba(255, 255, 255, 0.7);
  color: inherit; font-size: 12.5px; max-width: 100%;
}
.msg-att-file:hover { border-color: rgba(47, 106, 84, 0.4); }
.msg-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.msg-att-size { color: #8a8073; margin-left: auto; white-space: nowrap; }

/* ---- Messenger: receipts, replies, edits, reactions, search ---- */
.message-bubble { position: relative; }
.msg-bubble-actions {
  position: absolute; top: 6px; right: 8px; display: flex; gap: 2px;
  opacity: 0; transition: opacity .14s ease;
}
.message-bubble:hover .msg-bubble-actions,
.message-bubble:focus-within .msg-bubble-actions { opacity: 1; }
.msg-act {
  border: 1px solid rgba(23, 22, 22, 0.12); background: rgba(255, 255, 255, 0.94);
  border-radius: 7px; width: 26px; height: 24px; font-size: 12px; line-height: 1;
  cursor: pointer; color: #5f5347;
}
.msg-act:hover { border-color: rgba(47, 106, 84, 0.45); color: #2f6a54; }
.msg-act.danger:hover { border-color: #b42318; color: #b42318; }

.msg-receipt { font-size: 11px; color: #98a2b3; margin-left: 2px; }
.msg-receipt.read { color: #2f6a54; font-weight: 700; }
.msg-edited { font-size: 10.5px; color: #98a2b3; font-style: italic; }
.msg-deleted { margin: 0; font-size: 13px; color: #98a2b3; font-style: italic; }
.message-bubble.is-deleted { opacity: .75; }

.msg-quote {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  margin: 0 0 6px; padding: 6px 10px; cursor: pointer;
  border: 0; border-left: 3px solid rgba(47, 106, 84, 0.5);
  border-radius: 0 8px 8px 0; background: rgba(46, 106, 84, 0.07);
  font-size: 11.5px; color: #5f5347;
}
.msg-quote strong { font-size: 11px; color: #2f6a54; }
.msg-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-quote:hover { background: rgba(46, 106, 84, 0.12); }

.msg-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.msg-reaction {
  border: 1px solid rgba(23, 22, 22, 0.12); background: #fff; border-radius: 999px;
  padding: 2px 8px; font-size: 12px; line-height: 1.5; cursor: pointer;
}
.msg-reaction:hover { border-color: rgba(47, 106, 84, 0.45); }
.msg-reaction.mine { background: rgba(46, 106, 84, 0.12); border-color: rgba(47, 106, 84, 0.45); font-weight: 700; }
/* The quick-add row only appears on hover so resting bubbles stay calm. */
.msg-reaction-picker { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .14s ease; }
.message-bubble:hover .msg-reaction-picker,
.message-bubble:focus-within .msg-reaction-picker { opacity: 1; }
.msg-reaction.add { border-style: dashed; opacity: .8; }

.msg-edit { display: grid; gap: 6px; }
.msg-edit textarea { min-height: 68px; font-size: 13px; }
.msg-edit-actions { display: flex; gap: 6px; }

.message-thread-search { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.message-thread-search .input { flex: 1; height: 34px; font-size: 12.5px; }
.message-thread-search .muted { font-size: 11.5px; white-space: nowrap; }

.message-reply-banner {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 6px 10px;
  border-left: 3px solid rgba(47, 106, 84, 0.5); border-radius: 0 8px 8px 0;
  background: rgba(46, 106, 84, 0.07); font-size: 11.5px; color: #5f5347;
}
.message-reply-banner span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes msgFlash {
  0%, 100% { background: transparent; }
  30% { background: rgba(190, 138, 47, 0.2); }
}
.msg-flash { animation: msgFlash 1.3s ease; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .msg-flash { animation: none; } }

/* Privacy state of the composer, stated rather than implied */
.message-compose-note.is-private { color: #2f6a54; font-weight: 600; }
.message-compose-note.is-public {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 10px; border-radius: 10px;
  background: rgba(190, 138, 47, 0.1); border: 1px solid rgba(190, 138, 47, 0.28);
  color: #9a6c1e;
}
.message-compose-note.is-public span { flex: 1; }