:root {
  --bg: #f7f3ec;
  --ink: #18221f;
  --muted: #65706c;
  --card: rgba(255,255,255,.82);
  --line: rgba(24,34,31,.1);
  --accent: #8f6a3f;
  --accent-dark: #6f4f2e;
  --sage: #254e45;
  --soft-sage: #e8f0ed;
  --shadow: 0 20px 60px rgba(37, 78, 69, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Manrope", system-ui, sans-serif;
  background: radial-gradient(circle at top left, #fff 0, var(--bg) 42%, #efe7da 100%);
  color: var(--ink);
  overflow-x: hidden;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.ambient {
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .3;
  pointer-events: none;
}
.ambient-one { width: 360px; height: 360px; background: #d6c09e; top: -80px; right: -80px; }
.ambient-two { width: 300px; height: 300px; background: #a9c4bb; bottom: -120px; left: -100px; }

.topbar {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--sage); color: white; font-weight: 800;
  box-shadow: 0 10px 24px rgba(37,78,69,.2);
}
.brand strong { display:block; font-size: 15px; letter-spacing:.04em; }
.brand span { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
.status-pill {
  padding: 9px 13px; border:1px solid var(--line); border-radius:999px;
  background: rgba(255,255,255,.6); font-size:12px; font-weight:700;
}
.status-pill span {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#36a36f; margin-right:6px; box-shadow:0 0 0 5px rgba(54,163,111,.12);
}

.app-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 24px auto 60px;
  position: relative; z-index: 1;
}
.screen {
  display:none;
  background: var(--card);
  border:1px solid rgba(255,255,255,.85);
  box-shadow: var(--shadow);
  border-radius: 32px;
  min-height: 650px;
  padding: clamp(28px, 5vw, 72px);
  backdrop-filter: blur(18px);
  animation: fadeUp .45s ease;
}
.screen.active { display:block; }

.hero-screen {
  text-align:center;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}
.hero-screen.active { display:flex; }
.eyebrow, .step-label {
  display:inline-block; text-transform:uppercase; letter-spacing:.13em;
  color:var(--accent-dark); font-size:11px; font-weight:800;
}
h1 {
  font-size: clamp(48px, 7.4vw, 88px);
  line-height: .98; letter-spacing:-.055em; margin:22px 0;
}
h1 span { color:var(--sage); }
.hero-copy {
  max-width:760px; font-size: clamp(17px,2vw,21px);
  line-height:1.7; color:var(--muted); margin:0 auto;
}
.hero-actions { display:flex; gap:12px; margin-top:34px; justify-content:center; flex-wrap:wrap; }

.primary-btn, .ghost-btn, .back-btn {
  border-radius:14px; padding:14px 18px; border:1px solid transparent;
  font-weight:800; transition:.2s ease;
}
.primary-btn {
  background:var(--sage); color:white; box-shadow:0 12px 26px rgba(37,78,69,.18);
}
.primary-btn:hover { transform:translateY(-2px); background:#1e4139; }
.primary-btn span { margin-left:12px; }
.ghost-btn { background:white; border-color:var(--line); color:var(--ink); }
.ghost-btn:hover, .back-btn:hover { border-color:rgba(37,78,69,.3); transform:translateY(-1px); }
.back-btn { background:transparent; border-color:var(--line); color:var(--muted); padding:10px 13px; }

.flow-strip {
  margin-top:50px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:center;
  opacity:.84;
}
.flow-strip div { display:flex; gap:8px; align-items:center; }
.flow-strip b {
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--soft-sage); color:var(--sage); font-size:12px;
}
.flow-strip span { font-size:13px; font-weight:800; }
.flow-strip i { color:#a5aaa8; font-style:normal; }

.panel-heading, .results-header {
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:36px;
}
.panel-heading h2, .results-header h2, .reasoning-card h2 {
  margin:8px 0 6px; font-size:clamp(30px,4vw,48px); letter-spacing:-.04em;
}
.panel-heading p, .results-header p, .reasoning-card p { margin:0; color:var(--muted); }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.form-grid label { display:flex; flex-direction:column; gap:9px; }
.form-grid label span { font-size:13px; font-weight:800; }
.wide { grid-column:1 / -1; }
input, textarea, select {
  width:100%; border:1px solid var(--line); background:rgba(255,255,255,.78);
  border-radius:16px; padding:15px 16px; color:var(--ink); outline:none;
}
input:focus, textarea:focus, select:focus {
  border-color:rgba(37,78,69,.5); box-shadow:0 0 0 4px rgba(37,78,69,.08);
}
textarea { resize:vertical; min-height:110px; }
.form-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:6px; }
.micro-note { color:var(--muted); font-size:12px; max-width:420px; line-height:1.6; }

.context-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.7fr); gap:26px; }
.question-card, .reasoning-preview {
  border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.66);
}
.question-card { padding:30px; min-height:390px; }
.question-progress { height:6px; background:#ecece8; border-radius:99px; overflow:hidden; margin-bottom:28px; }
.question-progress span { display:block; height:100%; width:25%; background:var(--sage); transition:.3s ease; }
.question-number { font-size:11px; color:var(--accent-dark); font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.question-card h3 { font-size:27px; line-height:1.3; letter-spacing:-.025em; margin:13px 0 9px; }
.question-card p { color:var(--muted); margin:0 0 24px; line-height:1.6; }
.options-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.option-btn {
  text-align:left; padding:16px; border:1px solid var(--line); background:white; border-radius:15px;
  font-weight:750; color:var(--ink); transition:.2s ease;
}
.option-btn:hover { border-color:var(--sage); background:var(--soft-sage); transform:translateY(-1px); }

.reasoning-preview { padding:22px; }
.mini-title { display:block; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; }
.context-item {
  display:flex; gap:12px; padding:14px 10px; border-radius:14px; opacity:.48; transition:.25s ease;
}
.context-item.active, .context-item.complete { opacity:1; background:var(--soft-sage); margin-bottom:8px; }
.context-item > span {
  flex:0 0 28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:white; color:var(--sage); font-weight:800; font-size:12px;
}
.context-item b, .context-item small { display:block; }
.context-item b { font-size:13px; }
.context-item small { color:var(--muted); margin-top:3px; font-size:11px; }

.reasoning-screen { text-align:center; }
.reasoning-card { max-width:760px; margin:0 auto; }
.pulse-orb {
  width:92px; height:92px; border-radius:50%; margin:0 auto 24px;
  display:grid; place-items:center; background:rgba(37,78,69,.08);
  animation:pulse 1.6s infinite;
}
.pulse-core {
  width:58px; height:58px; border-radius:18px; background:var(--sage); color:white;
  display:grid; place-items:center; font-size:25px; font-weight:800;
}
.reasoning-list { text-align:left; margin:34px auto 22px; display:grid; gap:12px; }
.reasoning-row {
  display:grid; grid-template-columns:20px 1fr; column-gap:12px;
  padding:17px 18px; border-radius:16px; border:1px solid var(--line); background:white; opacity:.45;
}
.reasoning-row.done { opacity:1; background:var(--soft-sage); }
.reasoning-row .loader-dot {
  width:12px; height:12px; border-radius:50%; border:2px solid #a8b3af; margin-top:3px;
}
.reasoning-row.done .loader-dot { background:var(--sage); border-color:var(--sage); box-shadow:0 0 0 5px rgba(37,78,69,.1); }
.reasoning-row b, .reasoning-row small { display:block; }
.reasoning-row small { grid-column:2; color:var(--muted); margin-top:3px; }
.decision-box {
  padding:18px; border-radius:17px; background:#efe7da; border:1px solid rgba(143,106,63,.2);
  opacity:0; transform:translateY(8px); transition:.35s ease;
}
.decision-box.show { opacity:1; transform:translateY(0); }
.decision-box span { display:block; text-transform:uppercase; letter-spacing:.09em; font-size:10px; font-weight:800; color:var(--accent-dark); margin-bottom:4px; }

.result-actions { display:flex; gap:10px; flex-wrap:wrap; }
.reasoning-ribbon {
  padding:17px 20px; border-radius:17px; background:var(--soft-sage);
  border:1px solid rgba(37,78,69,.12); margin-bottom:24px;
}
.reasoning-ribbon span { display:block; text-transform:uppercase; letter-spacing:.08em; color:var(--sage); font-size:10px; font-weight:800; }
.reasoning-ribbon strong { display:block; margin-top:5px; line-height:1.5; }

.tabs { display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:12px; }
.tab {
  border:0; background:transparent; padding:10px 13px; color:var(--muted); font-weight:800; border-radius:12px;
}
.tab.active { background:var(--sage); color:white; }
.tab-panel { display:none; padding:28px 0 6px; }
.tab-panel.active { display:block; animation:fadeUp .25s ease; }

.output-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.output-card {
  padding:20px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.72);
}
.output-card.wide { grid-column:1/-1; }
.output-card h3 { margin:0 0 10px; font-size:17px; }
.output-card p, .output-card li { color:#48534f; line-height:1.65; font-size:14px; }
.output-card ul, .output-card ol { padding-left:20px; margin-bottom:0; }

.bottom-actions {
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.powered { color:var(--muted); font-size:11px; text-align:right; }
.toast {
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px);
  background:var(--ink); color:white; padding:12px 16px; border-radius:12px;
  opacity:0; pointer-events:none; transition:.25s ease; z-index:20; font-size:13px;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(37,78,69,.18)} 50%{box-shadow:0 0 0 18px rgba(37,78,69,0)} }

@media (max-width: 760px) {
  .topbar, .app-shell { width:min(100% - 22px, 1180px); }
  .brand span { display:none; }
  .screen { min-height:auto; border-radius:24px; padding:24px 18px; }
  .panel-heading, .results-header, .form-footer, .bottom-actions { flex-direction:column; align-items:stretch; }
  .form-grid, .context-layout, .output-grid { grid-template-columns:1fr; }
  .wide, .output-card.wide { grid-column:auto; }
  .options-grid { grid-template-columns:1fr; }
  .reasoning-preview { order:-1; }
  .flow-strip i { display:none; }
  .flow-strip { gap:12px; }
  .result-actions { width:100%; }
  .result-actions button { flex:1; }
}