:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f6f7fb;
  background: #080a0f;
  --bg: #080a0f;
  --panel: #10141d;
  --panel-2: #0b0f16;
  --line: #28303e;
  --muted: #939cab;
  --purple: #9b65f6;
  --green: #5de58a;
  --amber: #f4ba61;
  --red: #ff7474;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 16% 0%, #21123d 0, #0c0f16 31%, var(--bg) 68%); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }

.uat-banner { min-height: 40px; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 9px 18px; background: #3d2606; border-bottom: 1px solid #765018; color: #ffe1ad; font-size: 12px; position: sticky; top: 0; z-index: 20; }
.uat-banner strong { border: 1px solid #bd7a1e; border-radius: 999px; padding: 3px 8px; letter-spacing: .08em; }
.shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: calc(100vh - 40px); }
.sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 40px; height: calc(100vh - 40px); padding: 24px 18px 18px; background: rgba(9, 12, 18, .94); border-right: 1px solid var(--line); backdrop-filter: blur(12px); }
.brand { font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.brand span { color: var(--purple); }
.product-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.nav { display: grid; gap: 6px; margin-top: 8px; }
.nav a { color: #cbd1dc; text-decoration: none; padding: 10px 12px; border-radius: 9px; border: 1px solid transparent; }
.nav a:hover, .nav a.active { color: #fff; background: #21163a; border-color: #3e286b; }
.side-note { margin-top: auto; display: grid; gap: 3px; border: 1px solid #2d3440; border-radius: 10px; padding: 11px; background: #0d1118; }
.side-note b { color: var(--green); font-size: 12px; }
.side-note span { color: var(--muted); font-size: 11px; line-height: 1.4; }
.secure { padding: 10px 11px; border-radius: 10px; border: 1px solid #1e6537; background: #0c2114; color: var(--green); font-size: 11px; }

.main { min-width: 0; padding: 24px; }
.topbar { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 18px; }
.topbar h1 { margin: 2px 0 4px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.035em; }
.eyebrow { margin: 0; color: var(--purple); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.workflow-id { margin: 0; color: var(--muted); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.badge { border: 1px solid #27643a; background: #0d2516; color: var(--green); padding: 8px 12px; border-radius: 999px; font-size: 11px; white-space: nowrap; }

.flow { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.step { min-width: 120px; position: relative; display: grid; gap: 5px; padding: 12px; background: #0d1118; border: 1px solid var(--line); border-radius: 12px; }
.step-number { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; background: #1d2430; color: #d9deea; font-size: 11px; font-weight: 800; }
.step strong { font-size: 12px; }
.step small { min-height: 30px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.step-state { color: #6f7888; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.step.active { border-color: #8050d3; box-shadow: inset 0 0 0 1px #8050d3; }
.step.active .step-state { color: #be99ff; }
.step.done { border-color: #24653a; }
.step.done .step-state { color: var(--green); }
.step.locked { opacity: .62; }

.grid { display: grid; grid-template-columns: minmax(300px, 1.3fr) minmax(240px, .8fr) minmax(300px, 1fr); gap: 12px; }
.card { min-width: 0; background: linear-gradient(180deg, rgba(17, 21, 30, .98), rgba(12, 16, 23, .98)); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: 0 12px 36px rgba(0, 0, 0, .12); }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.card h2 { margin: 2px 0 0; font-size: 15px; }
.intake-card { grid-row: span 2; }
.concepts-card { grid-column: 1 / 3; }
.audit-card { grid-column: 2 / 4; }

.field { margin-bottom: 11px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field label { display: block; margin-bottom: 5px; color: #cbd1dc; font-size: 11px; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #343d4d; border-radius: 8px; background: #080c12; color: #fff; padding: 9px 10px; outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(155, 101, 246, .14); }
.field textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.form-message { border-radius: 8px; padding: 9px 10px; font-size: 11px; line-height: 1.4; }
.form-message.ready { color: #a9f2bf; background: #0c2013; border: 1px solid #245d35; }
.form-message.warning { color: #ffd89c; background: #271b0b; border: 1px solid #614317; }
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 11px; }
.btn { border: 1px solid #3a4353; border-radius: 8px; background: #171c26; color: #fff; padding: 9px 12px; font-weight: 800; font-size: 11px; }
.btn:hover:not(:disabled) { border-color: #69758b; transform: translateY(-1px); }
.btn.primary { border-color: #925af0; background: linear-gradient(105deg, #6e34cf, #9a57f2); }
.btn.compact { padding: 7px 9px; }
.btn.full { width: 100%; margin-top: 9px; }
.danger-btn { margin-top: 8px; border-color: #6f3434; color: #ffb0b0; background: #241111; }

.status-pill { border: 1px solid #465063; border-radius: 999px; padding: 5px 8px; color: #b9c0cd; font-size: 9px; font-weight: 900; }
.status-pill.approved { border-color: #286a3d; color: var(--green); background: #0c2114; }
.status-pill.waiting { border-color: #79541e; color: var(--amber); background: #241807; }
.approval-block { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid #323a48; border-radius: 10px; padding: 11px; margin-bottom: 9px; }
.approval-block > div { display: grid; gap: 4px; }
.approval-block b { font-size: 12px; }
.approval-block span { color: var(--muted); font-size: 10px; }
.approval-block.approved { border-color: #286a3d; background: #0b1b11; }
.approval-block.waiting { border-color: #79541e; background: #201608; }
.notice { color: #bdc3ce; background: #171b23; border-radius: 8px; padding: 9px; font-size: 10px; line-height: 1.5; }
.brief-list { display: grid; gap: 10px; margin: 0; }
.brief-list div { border-bottom: 1px solid #252c38; padding-bottom: 9px; }
.brief-list div:last-child { border: 0; padding: 0; }
.brief-list dt { color: #cdaeff; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.brief-list dd { margin: 4px 0 0; color: #c4cad5; font-size: 11px; line-height: 1.5; }
.status-list { display: grid; gap: 7px; }
.status-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid #28303a; border-radius: 8px; font-size: 10px; }
.status-item b { font-size: 9px; text-align: right; }
.ok { color: var(--green); }
.warn-text { color: var(--amber); }
.danger { color: var(--red); }

.concept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.concept { overflow: hidden; border: 1px solid #303846; border-radius: 12px; background: #0a0e14; transition: .18s ease; }
.concept.selected { border-color: var(--green); box-shadow: 0 0 0 2px rgba(93, 229, 138, .12); }
.concept.disabled { opacity: .55; }
.preview { min-height: 135px; display: grid; place-items: center; align-content: center; gap: 6px; background: repeating-linear-gradient(135deg, #171d27, #171d27 10px, #121720 10px, #121720 20px); }
.preview span { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #4c5668; border-radius: 50%; font-size: 20px; font-weight: 900; }
.preview small { color: #737d8d; font-size: 8px; letter-spacing: .1em; }
.concept-body { padding: 11px; }
.concept-body b { font-size: 12px; }
.concept-body p { min-height: 34px; margin: 6px 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.concept-meta { color: var(--green); font-size: 9px; font-weight: 800; }
.muted { color: var(--muted); font-size: 11px; line-height: 1.5; }
.handoff-summary { display: flex; justify-content: space-between; gap: 10px; margin: 13px 0; padding: 10px; border: 1px solid #2b3340; border-radius: 8px; font-size: 10px; }
.audit-list { max-height: 190px; overflow: auto; margin: 0; padding-left: 20px; }
.audit-list li { padding: 6px 0; border-bottom: 1px solid #222a35; }
.audit-list li:last-child { border-bottom: 0; }
.audit-list b, .audit-list span { display: block; font-size: 10px; }
.audit-list span { margin-top: 3px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
footer { margin-top: 18px; color: #697383; text-align: center; font-size: 10px; }

@media (max-width: 1180px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .intake-card { grid-row: span 1; }
  .concepts-card, .audit-card { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  .uat-banner { position: static; align-items: flex-start; flex-direction: column; gap: 4px; }
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav { display: flex; overflow-x: auto; }
  .nav a { white-space: nowrap; }
  .side-note { margin-top: 0; }
  .main { padding: 14px; }
  .grid { grid-template-columns: 1fr; }
  .concepts-card, .audit-card { grid-column: 1; }
  .concept-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .topbar { flex-direction: column; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; }
}