:root {
  --bg: #080a0f;
  --panel: #131720;
  --panel-soft: #1b212d;
  --border: rgba(255,255,255,0.09);
  --text: #f4f7fb;
  --muted: #b7c1d4;
  --accent: #d8ae62;
  --accent-2: #6db8ff;
  --danger: #ff6b6b;
  --success: #54d18c;
  --shadow: 0 24px 70px rgba(0,0,0,0.34);
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; color: var(--text); }
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(216,174,98,0.16), transparent 28%),
    radial-gradient(circle at 86% 16%, rgba(109,184,255,0.12), transparent 26%),
    linear-gradient(180deg, #06070b, #111720 46%, #080a0f);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
input, select, textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--text);
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: rgba(109,184,255,0.62); box-shadow: 0 0 0 3px rgba(109,184,255,0.12); }
textarea { resize: vertical; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(2.3rem, 4vw, 4.7rem); line-height: 0.98; letter-spacing: -0.06em; }
h2 { margin-bottom: 10px; font-size: clamp(1.4rem, 2vw, 2rem); }
h3 { margin-bottom: 0; font-size: 1.25rem; }
.brain-shell { max-width: 1680px; margin: 0 auto; padding: 24px; }
.presentation-hero {
  display: grid;
  grid-template-columns: minmax(260px, 440px) 1fr;
  gap: 22px;
  align-items: stretch;
  margin-bottom: 18px;
}
.logo-frame {
  min-height: 250px;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid rgba(216,174,98,0.26);
  background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 24px 80px rgba(0,0,0,0.38), 0 0 55px rgba(216,174,98,0.12);
  display: grid;
  place-items: center;
}
.logo-frame img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 10px; }
.hero-main-copy {
  border: 1px solid var(--border);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.022));
  box-shadow: var(--shadow);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.eyebrow { letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; color: var(--accent); font-weight: 800; }
.subtitle { margin-bottom: 20px; color: var(--muted); max-width: 980px; font-size: 1.05rem; line-height: 1.5; }
.top-actions, .route-bar, .inline-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.compact-actions { margin-top: 6px; }
.session-badge, .route-chip, .route-chip-active {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  border-radius:999px;
  padding:0 16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.04);
}
.primary-btn, .ghost-btn, .danger-btn, .voice-btn {
  border-radius:14px;
  min-height:44px;
  padding:0 16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.primary-btn:hover, .ghost-btn:hover, .danger-btn:hover, .voice-btn:hover { transform: translateY(-1px); border-color: rgba(216,174,98,0.45); }
.primary-btn { background: linear-gradient(135deg, rgba(216,174,98,0.36), rgba(216,174,98,0.12)); border-color: rgba(216,174,98,0.48); font-weight: 800; }
.danger-btn { background: rgba(255,107,107,0.08); border-color: rgba(255,107,107,0.35); color: #ffd4d4; }
.voice-btn { border-color: rgba(109,184,255,0.45); background: linear-gradient(135deg, rgba(109,184,255,0.18), rgba(216,174,98,0.10)); font-weight: 800; }
.voice-btn.recording { border-color: rgba(255,107,107,0.65); background: linear-gradient(135deg, rgba(255,107,107,0.22), rgba(216,174,98,0.16)); box-shadow: 0 0 0 3px rgba(255,107,107,0.10), 0 0 24px rgba(255,107,107,0.18); }
.stage-route-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.stage-chip {
  position: relative;
  min-height: 104px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  border-radius: 24px;
  padding: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.stage-chip::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px; bottom: 12px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(216,174,98,0.95), rgba(109,184,255,0.92), rgba(216,174,98,0.95));
  background-size: 220% 100%;
  animation: sweep 2.6s linear infinite;
}
.stage-chip strong { font-size: 1.1rem; }
.stage-chip span { color: var(--muted); margin-top: 5px; }
.stage-chip em { color: var(--success); font-style: normal; font-size: 12px; font-weight: 800; margin-top: 8px; }
.stage-done { background: linear-gradient(180deg, rgba(84,209,140,0.09), rgba(255,255,255,0.03)); border-color: rgba(84,209,140,0.24); }
.stage-active { background: linear-gradient(180deg, rgba(216,174,98,0.18), rgba(109,184,255,0.07)); border-color: rgba(216,174,98,0.42); }
.stage-active em { color: var(--accent); }
.brain-grid { display:grid; grid-template-columns: 1.08fr 0.92fr; gap:18px; }
.summary-grid, .hero-card, .ai-energy-card, .backstage-panel { grid-column: 1 / -1; }
.summary-grid { display:grid; gap:14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card, .metric-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.025));
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.metric-card span { display:block; color: var(--muted); font-size: 13px; }
.metric-card strong { display:block; font-size: 2.05rem; margin: 10px 0 4px; }
.metric-card small { color: var(--muted); }
.status-card strong[data-tone="success"] { color: var(--success); }
.status-card strong[data-tone="warn"] { color: var(--accent); }
.hero-card { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.hero-copy { color: var(--muted); max-width: 980px; line-height: 1.55; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.live-dot {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; border-radius: 999px; padding: 0 12px;
  color: var(--success); border: 1px solid rgba(84,209,140,0.32); background: rgba(84,209,140,0.08); font-weight: 900; font-size: 12px;
}
.live-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 18px rgba(84,209,140,0.8); animation: pulse 1.5s ease-in-out infinite; }
.energy-layout { display:grid; grid-template-columns: 330px 1fr; gap: 22px; align-items: center; }
.equalizer {
  height: 148px;
  border-radius: 24px;
  border: 1px solid rgba(216,174,98,0.22);
  background: radial-gradient(circle at 50% 50%, rgba(216,174,98,0.18), transparent 62%), rgba(0,0,0,0.18);
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  overflow: hidden;
}
.equalizer i {
  width: 14px;
  min-height: 28px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(109,184,255,0.95), rgba(216,174,98,0.92));
  box-shadow: 0 0 22px rgba(216,174,98,0.28);
  animation: rise 1.2s ease-in-out infinite;
}
.equalizer i:nth-child(2) { animation-delay: .12s; }
.equalizer i:nth-child(3) { animation-delay: .26s; }
.equalizer i:nth-child(4) { animation-delay: .06s; }
.equalizer i:nth-child(5) { animation-delay: .38s; }
.equalizer i:nth-child(6) { animation-delay: .18s; }
.equalizer i:nth-child(7) { animation-delay: .48s; }
.equalizer i:nth-child(8) { animation-delay: .30s; }
.equalizer i:nth-child(9) { animation-delay: .08s; }
.equalizer i:nth-child(10) { animation-delay: .22s; }
.energy-bars { display:grid; gap: 12px; }
.energy-row { display:grid; grid-template-columns: 170px 1fr 46px; gap: 12px; align-items:center; }
.energy-row span { color: var(--muted); font-weight: 700; }
.energy-row div { height: 16px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; position: relative; }
.energy-row b { position:absolute; inset:0 auto 0 0; display:block; border-radius: inherit; background: linear-gradient(90deg, rgba(216,174,98,0.94), rgba(109,184,255,0.95), rgba(216,174,98,0.94)); background-size: 220% 100%; animation: sweep 2.4s linear infinite; }
.energy-row em { color: var(--accent); font-style: normal; font-weight: 900; }
.form-grid { display:grid; gap:12px; }
.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.full { grid-column: 1 / -1; }
label span { display:block; color: var(--muted); font-size: 13px; margin-bottom: 7px; }
.helper-text { margin-top:12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.helper-text[data-tone="success"] { color: var(--success); }
.helper-text[data-tone="danger"] { color: #ffd4d4; }
.helper-text[data-tone="info"] { color: var(--muted); }
.helper-copy { color: var(--muted); line-height: 1.55; margin-bottom: 14px; }
.voice-actions { margin-top: 6px; }
.response-grid { display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.mini-heading { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.response-box { min-height: 235px; border-radius: 20px; border:1px solid var(--border); background: rgba(255,255,255,0.035); padding: 14px; white-space: pre-wrap; line-height: 1.55; overflow:auto; }
.response-box-secondary { color: var(--muted); }
.stage4-card { border-color: rgba(216,174,98,0.24); }
.quick-question-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
.quick-question { text-align:left; border:1px solid var(--border); border-radius:18px; background: rgba(255,255,255,0.04); color:var(--text); padding:12px; min-height:112px; display:grid; gap:7px; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.quick-question:hover { transform: translateY(-1px); border-color: rgba(216,174,98,0.48); background: rgba(216,174,98,0.08); }
.quick-question span { color: var(--accent); font-size:12px; letter-spacing:0.12em; }
.quick-question strong { font-size:14px; }
.quick-question small { color: var(--muted); line-height:1.35; }
.backstage-panel { margin-top: 4px; border: 1px solid rgba(255,255,255,0.08); border-radius: 28px; background: rgba(255,255,255,0.025); box-shadow: var(--shadow); overflow: hidden; }
.backstage-panel > summary { cursor: pointer; padding: 18px 22px; color: var(--muted); font-weight: 900; list-style: none; }
.backstage-panel > summary::-webkit-details-marker { display: none; }
.backstage-panel > summary::after { content: ' +'; color: var(--accent); }
.backstage-panel[open] > summary::after { content: ' −'; }
.backstage-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 0 18px 18px; }
.settings-card, .charts-admin-card { grid-column: 1 / -1; }
.charts-row.inside-card { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; }
.chart-stack, .stack-list { display:grid; gap:12px; }
.chart-row { display:grid; grid-template-columns: 140px 1fr auto; gap: 12px; align-items:center; }
.chart-label { color: var(--muted); font-size: 13px; }
.chart-bar { height: 14px; border-radius:999px; background: rgba(255,255,255,0.05); overflow:hidden; position:relative; }
.chart-bar > span { position:absolute; inset:0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, rgba(216,174,98,0.92), rgba(109,184,255,0.9)); }
.chart-value { font-size:12px; }
.memory-card, .strategy-card { border:1px solid var(--border); border-radius: 18px; padding: 14px; background: rgba(255,255,255,0.035); }
.memory-card strong, .strategy-card strong { display:block; margin-bottom:8px; }
.memory-card p, .strategy-card p { margin:0; color: var(--muted); line-height: 1.45; }
.memory-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.badge-row { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.pill { display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 10px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,0.04); font-size: 12px; }
.pill-active { background: rgba(84,209,140,0.12); border-color: rgba(84,209,140,0.35); }
.pill-disabled { background: rgba(255,107,107,0.08); border-color: rgba(255,107,107,0.35); }
.memory-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; }
.memory-actions button { min-height:38px; border-radius:12px; border:1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text); padding:0 12px; }
.empty { color: var(--muted); padding: 16px; border: 1px dashed var(--border); border-radius: 18px; }
@keyframes rise { 0%, 100% { height: 34px; opacity: .66; } 50% { height: 118px; opacity: 1; } }
@keyframes sweep { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
@keyframes pulse { 0%, 100% { transform: scale(.78); opacity: .55; } 50% { transform: scale(1.12); opacity: 1; } }
@media (max-width: 1180px) {
  .presentation-hero, .brain-grid, .backstage-grid, .energy-layout { grid-template-columns: 1fr; }
  .summary-grid, .stage-route-bar, .quick-question-grid, .charts-row.inside-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .brain-shell { padding: 14px; }
  .logo-frame { min-height: 170px; }
  .hero-card { flex-direction: column; align-items: stretch; }
  .summary-grid, .stage-route-bar, .two-col, .response-grid, .quick-question-grid, .charts-row.inside-card { grid-template-columns: 1fr; }
  .energy-row { grid-template-columns: 1fr; gap: 6px; }
  h1 { font-size: 2.4rem; }
}