@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Manrope:wght@400;600;700;800&display=swap");

:root {
  --paper: #fbfff8;
  --mint: #dff4ed;
  --leaf: #2d7d67;
  --ink: #203236;
  --quiet: #667979;
  --coral: #ef745f;
  --sun: #f3c94f;
  --teal: #12968d;
  --blue: #2f6f9f;
  --line: rgba(32, 50, 54, 0.14);
  --shadow: 0 18px 48px rgba(32, 50, 54, 0.12);
  --panel: rgba(255, 255, 255, 0.82);
  --panel-strong: rgba(255, 255, 255, 0.94);
  --glass: rgba(255, 255, 255, 0.82);
  --glass-strong: rgba(255, 255, 255, 0.94);
  --border: rgba(32, 50, 54, 0.14);
  --accent: #12968d;
  --accent-hot: #ef745f;
  --text: #203236;
  --muted: #667979;
  --glow: rgba(18, 150, 141, 0.16);
}

* {
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

body {
  background:
    radial-gradient(circle at 14% 10%, rgba(223, 244, 237, 0.92), transparent 32%),
    radial-gradient(circle at 90% 8%, rgba(239, 116, 95, 0.12), transparent 28%),
    linear-gradient(180deg, var(--paper) 0%, #eef9f4 55%, #fff 100%) !important;
  color: var(--ink) !important;
}

body::selection {
  background: rgba(243, 201, 79, 0.45);
}

h1,
h2,
.title,
.summary-title,
.scenarios-title,
.column-title,
.front-title,
.radar-title,
.persona-tag,
.metric-value {
  color: var(--ink) !important;
}

h1 {
  font-family: "Fraunces", Georgia, serif !important;
}

p,
.kv,
.muted,
.helper,
.summary-sub,
.scenarios-sub,
.message-time,
.chat-session-time,
.radar-subtitle,
.section-head p,
.logo-text span:last-child,
.brand-text span:last-child {
  color: var(--quiet) !important;
}

.header,
header,
.nav {
  background: rgba(251, 255, 248, 0.9) !important;
  border: 1px solid rgba(32, 50, 54, 0.1) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  color: var(--ink) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 10px 28px rgba(32, 50, 54, 0.06) !important;
}

.logo,
.brand,
.brand-link {
  color: var(--ink) !important;
}

.syntrae-logo-image {
  width: 148px;
  max-width: 42vw;
  height: auto;
  display: block;
  border-radius: 14px;
  background: #fff;
  padding: 4px;
  box-shadow: 0 10px 24px rgba(32, 50, 54, 0.1);
}

.brand-page-label {
  color: var(--quiet) !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em !important;
  white-space: nowrap;
}

.logo-icon,
.mark,
.agent-avatar,
.q-num,
.work-icon {
  border-radius: 8px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--leaf), var(--teal) 52%, var(--coral)) !important;
  box-shadow: 0 10px 22px rgba(18, 150, 141, 0.18) !important;
}

.container,
.main,
main {
  color: var(--ink) !important;
}

.card,
.panel,
.section,
.persona-column,
.chat-column,
.question-card,
.question-box,
.backgrounds,
.backgrounds .item,
.backgrounds .item .flip-face,
.conclusion,
.radar,
.portrait,
.persona-preview,
.outcome-results,
.outcome-summary,
.outcome-history,
.outcome-history-item,
.pathway-card,
.scenario-card,
.metric,
.summary-grid .metric,
.bar-row,
.chat-session-item,
.persona-card,
.message.agent .message-content,
.empty,
.status,
.support-box {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  box-shadow: 0 14px 38px rgba(32, 50, 54, 0.08) !important;
}

.persona-column,
.chat-column,
.panel,
.card {
  backdrop-filter: blur(10px);
}

.hero {
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow) !important;
}

.dropdown-menu,
.photo-menu .panel,
.persona-check,
.run-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow) !important;
}

.dropdown-item,
.link-btn,
.nav-btn,
.back-btn,
.btn,
.btn-ghost,
.history-btn,
.more-btn,
.name-btn,
.clear-btn,
.mini-icon-btn,
.photo-menu button {
  background: rgba(255, 255, 255, 0.84) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.dropdown-item:hover,
.link-btn:hover,
.nav-btn:hover,
.back-btn:hover,
.btn:hover,
.history-btn:hover,
.more-btn:hover,
.name-btn:hover,
.clear-btn:hover,
.mini-icon-btn:hover,
.photo-menu button:hover {
  background: var(--mint) !important;
  border-color: rgba(18, 150, 141, 0.28) !important;
  color: var(--ink) !important;
  transform: translateY(-1px) !important;
}

.primary-btn,
.edit-btn,
.save-btn,
.send-btn,
.run-btn,
.btn-primary,
.persona-check .yes {
  background: var(--leaf) !important;
  border: 1px solid rgba(45, 125, 103, 0.16) !important;
  border-radius: 8px !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(45, 125, 103, 0.18) !important;
}

.primary-btn:hover,
.edit-btn:hover,
.save-btn:hover,
.send-btn:hover,
.run-btn:hover:not(:disabled),
.btn-primary:hover,
.persona-check .yes:hover {
  background: #246f5b !important;
  transform: translateY(-1px) !important;
}

.stop-btn {
  background: var(--coral) !important;
}

input,
textarea,
select,
.chat-input,
.persona-select {
  background: #fbfff8 !important;
  border: 1px solid rgba(32, 50, 54, 0.18) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus,
.chat-input:focus,
.persona-select:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 4px rgba(18, 150, 141, 0.14) !important;
}

.more-btn .line {
  background: var(--leaf) !important;
}

.persona-card.active,
.chat-session-item.active,
.option.selected {
  background: var(--mint) !important;
  border-color: rgba(18, 150, 141, 0.42) !important;
  box-shadow: 0 14px 34px rgba(18, 150, 141, 0.12) !important;
}

.message.user .message-content {
  background: var(--leaf) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(45, 125, 103, 0.18) !important;
}

.message.agent .message-content {
  background: #fff !important;
}

.badge.ready,
.status[data-type="success"] {
  color: #1c6b55 !important;
  background: rgba(223, 244, 237, 0.9) !important;
  border-color: rgba(45, 125, 103, 0.24) !important;
}

.badge.not-ready,
.status[data-type="error"] {
  color: #9f3d32 !important;
  background: rgba(239, 116, 95, 0.12) !important;
  border-color: rgba(239, 116, 95, 0.24) !important;
}

.bar-title,
.bar-head,
.bar-extremes,
.backgrounds h4,
.backgrounds .value-back,
.conclusion p,
.scenario-card h3,
.scenario-metrics,
.scenario-actions div,
.pathway-card h4,
.pathway-meta,
.pathway-actions div,
.prompt,
.option-label,
.category {
  color: var(--ink) !important;
}

.bar-scale,
.compat-track,
.progress-track {
  background: rgba(32, 50, 54, 0.08) !important;
  border-color: rgba(32, 50, 54, 0.12) !important;
}

.bar-fill,
.compat-fill,
.progress-fill {
  background: linear-gradient(90deg, var(--leaf), var(--teal), var(--coral)) !important;
}

.footer,
footer {
  color: var(--quiet) !important;
  background: transparent !important;
  border-top: 1px solid rgba(32, 50, 54, 0.08) !important;
}

@media (prefers-reduced-motion: no-preference) {
  .card,
  .panel,
  .persona-column,
  .chat-column,
  .question-card,
  .backgrounds,
  .backgrounds .item,
  .radar,
  .conclusion,
  .persona-preview,
  .outcome-results,
  .outcome-history,
  .demo-persona-card,
  .demo-card,
  .tree-card,
  .recommendation-card,
  .section {
    animation: syntraeFadeLift 0.56s ease both;
  }

  .persona-preview:nth-child(2),
  .tree-card:nth-child(2),
  .backgrounds .item:nth-child(2),
  .section:nth-child(2) {
    animation-delay: 0.08s;
  }

  .tree-card:nth-child(3),
  .backgrounds .item:nth-child(3),
  .section:nth-child(3) {
    animation-delay: 0.16s;
  }

  .demo-card:hover,
  .demo-persona-card:hover,
  .tree-card:hover,
  .persona-preview:hover,
  .section:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 18px 48px rgba(32, 50, 54, 0.13) !important;
  }
}

@keyframes syntraeFadeLift {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .header,
  header {
    border-radius: 0 !important;
  }
}