:root {
  --bg: #120d15;
  --bg-2: #1b121d;
  --panel: rgba(38, 28, 44, 0.78);
  --panel-strong: rgba(43, 31, 50, 0.92);
  --panel-soft: rgba(255, 255, 255, 0.025);
  --line: rgba(246, 230, 222, 0.09);
  --line-strong: rgba(246, 230, 222, 0.16);
  --text: #f4ece7;
  --muted: rgba(244, 236, 231, 0.58);
  --muted-2: rgba(244, 236, 231, 0.4);
  --gold: #d9b278;
  --pink: #e56fb1;
  --mint: #86e0c5;
  --orange: #ee9a6f;
  --blue: #82aefa;
  --violet: #a57df1;
  --purple: #8d5bf3;
  --green: #8dc29a;
  --mint-2: #57d9b1;
  --shadow: 0 34px 80px rgba(4, 1, 7, 0.42);
  --radius: 26px;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(circle at top center, rgba(120, 54, 69, 0.25), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(132, 97, 50, 0.12), transparent 24%),
    linear-gradient(180deg, #170f17 0%, #120d15 48%, #100b12 100%);
}

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

.hidden {
  display: none !important;
}

.app-shell {
  width: min(1540px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 36px;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 22px;
}

.sidebar {
  position: sticky;
  top: 20px;
  height: calc(100vh - 40px);
  padding: 26px 0 22px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 10%);
}

.sidebar-top,
.sidebar-section {
  padding: 0 22px;
}

.sidebar-section + .sidebar-section {
  margin-top: 22px;
}

.tiny-kicker,
.sidebar-label,
.section-copy,
.metric-label,
.field-label,
.panel-eyebrow,
.hero-card-eyebrow,
.hero-card-title {
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tiny-kicker,
.sidebar-label,
.section-copy,
.metric-label,
.field-label,
.panel-eyebrow,
.hero-card-eyebrow {
  font-size: 0.73rem;
  color: var(--muted-2);
}

.brand-mark {
  margin: 12px 0 0;
  font-size: 2.8rem;
  line-height: 0.96;
  font-weight: 600;
  letter-spacing: -0.04em;
  font-family: Georgia, "Times New Roman", serif;
}

.brand-mark span,
.hero-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

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

.nav-item {
  width: 100%;
  border: 0;
  color: var(--text);
  padding: 14px 16px;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  position: relative;
}

.nav-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 3px solid transparent;
  background: transparent;
  transition: 180ms ease;
}

.nav-item.active::before {
  border-left-color: rgba(234, 189, 134, 0.85);
  background: linear-gradient(90deg, rgba(109, 82, 111, 0.55), rgba(60, 43, 66, 0.9));
}

.nav-item:hover::before {
  background: rgba(255, 255, 255, 0.03);
}

.nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  flex: none;
  color: white;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.06);
}

.nav-icon::before {
  content: "";
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 3px;
  background: currentColor;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}

.nav-icon[data-icon="grid"]::before {
  mask-image: radial-gradient(circle, #000 58%, transparent 61%);
  -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 61%);
  box-shadow: 0 0 0 7px currentColor, 14px 0 0 0 currentColor, 0 14px 0 0 currentColor, 14px 14px 0 0 currentColor;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
}

.nav-icon[data-icon="plus"]::before,
.nav-icon[data-icon="cross"]::before {
  mask-image: linear-gradient(#000 0 0);
  -webkit-mask-image: linear-gradient(#000 0 0);
  width: 12px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  position: relative;
}

.nav-icon[data-icon="plus"]::after,
.nav-icon[data-icon="cross"]::after,
.nav-icon[data-icon="target"]::after,
.nav-icon[data-icon="pulse"]::after,
.nav-icon[data-icon="spark"]::after,
.nav-icon[data-icon="book"]::after,
.nav-icon[data-icon="columns"]::after,
.nav-icon[data-icon="journal"]::after,
.nav-icon[data-icon="memory"]::after,
.nav-icon[data-icon="guide"]::after,
.nav-icon[data-icon="wave"]::after,
.nav-icon[data-icon="tower"]::after,
.nav-icon[data-icon="gear"]::after,
.nav-icon[data-icon="leaf"]::after {
  content: "";
  position: absolute;
}

.nav-icon[data-icon="plus"]::after,
.nav-icon[data-icon="cross"]::after {
  width: 2px;
  height: 12px;
  background: currentColor;
}

.nav-icon[data-icon="wave"]::before {
  width: 14px;
  height: 10px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 0 50%, transparent 3px, currentColor 4px, transparent 5px) 0 50% / 7px 100% repeat-x;
}

.nav-icon[data-icon="spark"]::before {
  width: 12px;
  height: 12px;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
}

.nav-icon[data-icon="target"]::before,
.nav-icon[data-icon="memory"]::before {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: transparent;
}

.nav-icon[data-icon="target"]::after,
.nav-icon[data-icon="memory"]::after {
  inset: 10px;
  border-radius: 999px;
  background: currentColor;
}

.nav-icon[data-icon="pulse"]::before {
  width: 14px;
  height: 14px;
  clip-path: polygon(0 70%, 18% 70%, 28% 44%, 43% 88%, 57% 20%, 72% 70%, 100% 70%, 100% 86%, 63% 86%, 56% 54%, 42% 100%, 24% 60%, 16% 86%, 0 86%);
}

.nav-icon[data-icon="book"]::before,
.nav-icon[data-icon="journal"]::before,
.nav-icon[data-icon="guide"]::before {
  width: 14px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 2px;
  background: transparent;
}

.nav-icon[data-icon="columns"]::before {
  width: 14px;
  height: 12px;
  background: linear-gradient(90deg, currentColor 0 28%, transparent 28% 36%, currentColor 36% 64%, transparent 64% 72%, currentColor 72% 100%);
}

.nav-icon[data-icon="tower"]::before {
  width: 12px;
  height: 14px;
  clip-path: polygon(50% 0, 73% 18%, 73% 100%, 27% 100%, 27% 18%);
}

.nav-icon[data-icon="gear"]::before {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background:
    radial-gradient(circle, transparent 0 3px, currentColor 3px 6px, transparent 6px),
    conic-gradient(from 0deg, currentColor 0 10deg, transparent 10deg 35deg, currentColor 35deg 45deg, transparent 45deg 80deg, currentColor 80deg 90deg, transparent 90deg 125deg, currentColor 125deg 135deg, transparent 135deg 170deg, currentColor 170deg 180deg, transparent 180deg 215deg, currentColor 215deg 225deg, transparent 225deg 260deg, currentColor 260deg 270deg, transparent 270deg 305deg, currentColor 305deg 315deg, transparent 315deg 350deg, currentColor 350deg 360deg);
}

.nav-icon[data-icon="leaf"]::before {
  width: 14px;
  height: 14px;
  border-radius: 0 80% 0 80%;
  transform: rotate(-45deg);
}

.nav-text {
  font-size: 0.98rem;
}

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

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
}

.view-lead {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 32px;
}

.section-index {
  margin: 0;
  color: var(--gold);
  font-size: 1.8rem;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
}

.section-copy {
  margin: 0;
}

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

.topbar-pill,
.tab-pill,
.mode-pill {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  border-radius: 999px;
  padding: 12px 16px;
  cursor: pointer;
}

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

.hero-block {
  padding: 14px 0 28px;
}

.hero-title {
  margin: 0;
  font-size: clamp(3.2rem, 7vw, 4.8rem);
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: -0.05em;
  font-family: Georgia, "Times New Roman", serif;
}

.hero-subtitle {
  margin: 16px 0 0;
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 780px;
}

.hero-meta-row {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

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

.hero-badge {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
}

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

.metric-card,
.agent-card,
.hero-card,
.glass-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 24%),
    var(--panel);
  box-shadow: var(--shadow);
  position: relative;
}

.metric-card {
  min-height: 156px;
  padding: 22px;
}

.metric-dot,
.agent-avatar,
.agent-status::before {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 14px currentColor;
}

.metric-dot {
  margin-bottom: 14px;
  color: var(--gold);
  background: currentColor;
}

.metric-value {
  margin: 10px 0 8px;
  font-size: 2rem;
  font-weight: 500;
}

.metric-foot {
  margin: 0;
  color: var(--muted);
  font-family: "Consolas", "SFMono-Regular", monospace;
}

.metric-card[data-tone="pink"] .metric-dot,
.hero-badge[data-tone="pink"] {
  color: var(--pink);
}

.metric-card[data-tone="mint"] .metric-dot,
.hero-badge[data-tone="mint"] {
  color: var(--mint);
}

.metric-card[data-tone="orange"] .metric-dot,
.hero-badge[data-tone="orange"] {
  color: var(--orange);
}

.metric-card[data-tone="blue"] .metric-dot,
.hero-badge[data-tone="blue"] {
  color: var(--blue);
}

.metric-card[data-tone="gold"] .metric-dot,
.hero-badge[data-tone="gold"] {
  color: var(--gold);
}

.section-divider {
  margin: 54px auto 44px;
  width: min(360px, 100%);
  display: flex;
  align-items: center;
  gap: 18px;
}

.section-divider span {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.section-divider i {
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  border-radius: 3px;
  background: linear-gradient(135deg, var(--gold), rgba(217, 178, 120, 0.4));
  box-shadow: 0 0 18px rgba(217, 178, 120, 0.45);
}

.section-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

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

.mission-board {
  margin-top: 44px;
}

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

.agent-card {
  min-height: 254px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}

.agent-card::after,
.hero-card::after,
.glass-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 30%);
  pointer-events: none;
}

.agent-card[data-glow="orange"],
.nav-icon[data-glow="orange"] {
  --card-glow: rgba(238, 154, 111, 0.22);
  color: var(--orange);
}

.agent-card[data-glow="pink"],
.nav-icon[data-glow="pink"] {
  --card-glow: rgba(229, 111, 177, 0.22);
  color: var(--pink);
}

.agent-card[data-glow="blue"],
.nav-icon[data-glow="blue"] {
  --card-glow: rgba(130, 174, 250, 0.22);
  color: var(--blue);
}

.agent-card[data-glow="violet"],
.nav-icon[data-glow="violet"] {
  --card-glow: rgba(165, 125, 241, 0.22);
  color: var(--violet);
}

.agent-card[data-glow="purple"],
.nav-icon[data-glow="purple"] {
  --card-glow: rgba(141, 91, 243, 0.22);
  color: var(--purple);
}

.agent-card[data-glow="green"],
.nav-icon[data-glow="green"] {
  --card-glow: rgba(141, 194, 154, 0.22);
  color: var(--green);
}

.agent-card[data-glow="mint"],
.nav-icon[data-glow="mint"] {
  --card-glow: rgba(87, 217, 177, 0.22);
  color: var(--mint-2);
}

.agent-card,
.nav-icon[data-glow] {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 24px 48px rgba(4, 1, 7, 0.28);
}

.agent-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.agent-avatar {
  width: 36px;
  height: 36px;
  background: currentColor;
  box-shadow: 0 0 24px var(--card-glow);
}

.agent-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
}

.agent-status::before {
  content: "";
  background: currentColor;
}

.agent-card-title,
.hero-card-title,
.focus-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 500;
}

.agent-card-copy,
.hero-card-copy,
.panel-copy,
.message-bubble,
.stack-card-copy,
.artifact-meta {
  color: var(--muted);
  line-height: 1.6;
}

.agent-card-link {
  margin-top: auto;
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}

.tab-row,
.mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tab-pill,
.mode-pill {
  padding: 11px 16px;
  color: var(--muted);
}

.tab-pill.active,
.mode-pill.active {
  color: var(--text);
  border-color: rgba(229, 111, 177, 0.28);
  background: linear-gradient(180deg, rgba(177, 77, 126, 0.36), rgba(92, 60, 91, 0.26));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 26px rgba(229, 111, 177, 0.16);
}

.hero-card {
  margin-top: 18px;
  padding: 20px 24px;
}

.hero-card-eyebrow,
.panel-eyebrow {
  margin: 0 0 8px;
}

.hero-card-copy,
.panel-copy {
  margin: 10px 0 0;
}

.mode-row {
  margin-top: 16px;
}

.detail-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(310px, 0.8fr) minmax(360px, 1.2fr);
  gap: 18px;
}

.glass-panel {
  min-height: 360px;
  padding: 20px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 16px;
}

.panel-title {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 72%, var(--pink));
}

.field-stack,
.pill-stack,
.stack-list,
.chat-stack {
  display: grid;
  gap: 14px;
}

.mission-stack {
  margin-top: 18px;
}

.field-card,
.pill-card,
.stack-card,
.message-row,
.workspace-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-soft);
}

.field-card {
  padding: 14px 16px;
}

.field-value {
  margin-top: 10px;
  color: var(--text);
}

.field-value.textarea {
  min-height: 138px;
  white-space: pre-wrap;
}

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

.pill-card {
  padding: 12px 14px;
}

.pill-card strong {
  display: block;
  margin-top: 10px;
  color: var(--text);
}

.primary-button {
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #ef72c1, #ff62af);
  color: white;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(255, 98, 175, 0.3);
}

.helper-copy {
  margin-top: 10px;
  color: var(--muted-2);
  font-size: 0.88rem;
}

.empty-state,
.media-frame,
.cards-frame {
  height: 100%;
  min-height: 300px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.02);
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
}

.empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 2px solid rgba(130, 174, 250, 0.65);
  box-shadow: 0 0 24px rgba(130, 174, 250, 0.22);
  margin: 0 auto 18px;
}

.empty-title {
  font-size: 1.9rem;
  margin: 0 0 12px;
}

.media-frame {
  align-content: start;
  gap: 16px;
}

.media-frame img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--line);
}

.artifact-meta {
  margin: 0;
  width: 100%;
  text-align: left;
}

.stack-card {
  padding: 16px;
}

.stack-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.stack-card-title {
  margin: 0 0 8px;
  font-size: 1rem;
}

.stack-badge {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.stack-card-meta {
  margin: 0 0 10px;
  color: var(--muted-2);
  font-size: 0.84rem;
}

.detail-bottom {
  margin-top: 18px;
}

.chat-stack {
  align-content: start;
}

.message-row {
  padding: 14px;
  display: flex;
}

.message-row.user {
  justify-content: flex-end;
  background: transparent;
  border: 0;
}

.message-bubble {
  max-width: 72%;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
}

.message-row.assistant .message-bubble {
  background: rgba(222, 109, 172, 0.08);
}

.cards-frame {
  gap: 14px;
  text-align: left;
}

.workspace-card {
  width: 100%;
  padding: 16px;
}

.workspace-card h4 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.workspace-card p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 1280px) {
  .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .mission-board-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1040px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 20px;
  }

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

@media (max-width: 760px) {
  .app-shell {
    width: min(100%, calc(100% - 24px));
    padding-top: 18px;
  }

  .topbar,
  .hero-meta-row {
    flex-direction: column;
    align-items: start;
  }

  .metric-grid,
  .agent-card-grid,
  .mission-board-grid,
  .pill-stack {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 2.8rem;
  }
}