:root {
	--bg-deep: #050b16;
	--bg-mid: #09162a;
	--bg-panel: #0e1f37cc;
	--line-soft: #355073;
	--line-strong: #4f6e95;
	--text-main: #eef4ff;
	--text-subtle: #9fb4d4;
	--accent: #3bd2ff;
	--accent-2: #67f8c4;
	--good: #7cfec1;
	--warn: #ffd782;
	--danger: #ff617e;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: "Aptos", "Bahnschrift", "Trebuchet MS", sans-serif;
	color: var(--text-main);
	background:
		radial-gradient(circle at 14% 12%, #1a3966 0%, #091427 34%, transparent 62%),
		radial-gradient(circle at 84% 3%, #0a4255 0%, transparent 38%),
		linear-gradient(170deg, var(--bg-deep), #040812 42%, #070d18 100%);
}

.concept-shell {
	max-width: 1720px;
	margin: 0 auto;
	padding: 24px;
	display: grid;
	gap: 18px;
}

.panel,
.panel-glass {
	border: 1px solid #5b7ca340;
	background: linear-gradient(155deg, #10233fdd, #0d1d33c4 58%, #122033a1);
	border-radius: 16px;
	box-shadow: 0 20px 40px #01071270;
	backdrop-filter: blur(8px);
}

.command-bar {
	padding: 20px;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 18px;
	position: relative;
	overflow: hidden;
}

.command-bar::after {
	content: "";
	position: absolute;
	inset: auto -30% -80% auto;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, #31d0ff35, transparent 72%);
	pointer-events: none;
}

.eyebrow {
	margin: 0 0 6px;
	font-size: 0.72rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--accent-2);
}

.concept-link-wrap {
	margin: 0 0 10px;
}

.concept-link {
	display: inline-block;
	font-size: 0.78rem;
	color: #9fe8ff;
	text-decoration: none;
	border: 1px solid #4a7fb0;
	border-radius: 999px;
	padding: 5px 10px;
	background: #0f2a45;
}

.concept-link:hover {
	color: #d8f7ff;
	border-color: #82dfff;
}

.command-bar h1 {
	margin: 0;
	font-size: 2rem;
	font-weight: 650;
	letter-spacing: 0.015em;
}

.subtitle {
	margin: 10px 0 0;
	line-height: 1.45;
	color: var(--text-subtle);
	max-width: 74ch;
}

.mission-label {
	margin: 0;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #8cb3da;
}

.mission-request {
	margin: 8px 0 12px;
	font-size: 1.05rem;
	line-height: 1.35;
	font-weight: 580;
}

.command-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.run-badge {
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 630;
	border: 1px solid transparent;
}

.run-badge.live {
	background: #17395e;
	border-color: #3cd3ff8a;
	color: #8de8ff;
	animation: softPulse 2.3s ease-in-out infinite;
}

.run-badge.completed {
	background: #1e4f44;
	border-color: #8cf7cc66;
	color: var(--good);
	animation: none;
}

.mode-toggles {
	display: inline-flex;
	background: #0a1628;
	padding: 4px;
	border-radius: 999px;
	border: 1px solid #2a4465;
}

.mode-chip {
	border: 0;
	background: transparent;
	color: var(--text-subtle);
	padding: 5px 12px;
	font-size: 0.76rem;
	border-radius: 999px;
	cursor: default;
}

.mode-chip.is-active {
	background: linear-gradient(140deg, #21456f, #2f6487);
	color: var(--text-main);
}

.progress-wrap {
	margin-top: 10px;
}

.progress-track {
	height: 8px;
	border-radius: 999px;
	background: #081424;
	border: 1px solid #2f4866;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	width: 58%;
	background: linear-gradient(90deg, #1db3ff, #5cf7bf);
	box-shadow: 0 0 16px #5cf7bf66;
	transition: width 700ms ease;
}

.progress-text {
	margin: 8px 0 0;
	font-size: 0.82rem;
	color: #9ab3cf;
}

.layout-grid {
	display: grid;
	grid-template-columns: 320px minmax(660px, 1fr) 350px;
	gap: 16px;
	align-items: start;
}

.panel {
	padding: 16px;
}

.workflow-panel h2,
.orchestration-panel h2,
.results-panel h2,
.trust-panel h2,
.mini-trace h2 {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 620;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #b8c9e3;
}

.workflow-list {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.workflow-step {
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 10px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid #2b4360;
	background: #0b1a2d;
	position: relative;
}

.workflow-step h3 {
	margin: 0;
	font-size: 0.86rem;
	font-weight: 610;
}

.workflow-step p {
	margin: 4px 0 0;
	font-size: 0.76rem;
	line-height: 1.3;
	color: #95aac7;
}

.step-icon {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	font-size: 0.76rem;
	font-weight: 700;
	border: 1px solid #2f4868;
	background: #102440;
}

.workflow-step.done {
	border-color: #3a7f87;
	background: linear-gradient(145deg, #102838, #0d2232);
}

.workflow-step.done .step-icon {
	background: #174045;
	border-color: #2f8f91;
	color: #8dffd0;
}

.workflow-step.pending {
	opacity: 0.75;
}

.workflow-step.active {
	border-color: #5cc5ff;
	background: linear-gradient(142deg, #123459, #0f2a4a);
	box-shadow: 0 0 0 1px #6fd6ff45, 0 0 22px #3bd2ff40;
	animation: activePanel 2.5s ease-in-out infinite;
}

.workflow-step.active .step-icon {
	background: linear-gradient(140deg, #1f5a82, #2d8ea5);
	border-color: #89f7d3;
	color: #f2fcff;
}

.orchestration-panel {
	min-height: 680px;
	position: relative;
	overflow: hidden;
}

.panel-head {
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid #284463;
}

.panel-head p {
	margin: 8px 0 0;
	font-size: 0.86rem;
	color: var(--text-subtle);
}

.operation-stage {
	position: absolute;
	inset: 88px 16px 16px;
	padding: 16px;
	border-radius: 14px;
	border: 1px solid #2e4b70;
	background: linear-gradient(162deg, #102742, #0d1d34 60%, #0b1728);
	opacity: 0;
	transform: translateY(12px) scale(0.99);
	transition: opacity 450ms ease, transform 450ms ease;
	pointer-events: none;
}

.operation-stage.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.stage-label {
	display: inline-block;
	padding: 4px 9px;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	border: 1px solid #3f5e82;
	color: #8cbde2;
	margin-bottom: 12px;
}

.operation-stage h3 {
	margin: 0 0 10px;
	font-size: 1.25rem;
	letter-spacing: 0.01em;
}

.operation-stage p {
	margin: 0;
	line-height: 1.45;
	color: #a5b9d7;
}

.pill-row {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}

.pill {
	padding: 6px 9px;
	border-radius: 999px;
	font-size: 0.74rem;
	border: 1px solid #3c5575;
}

.pill.ok {
	background: #17463d;
	border-color: #6affcf66;
	color: #85ffc9;
}

.pill.info {
	background: #17304d;
	border-color: #68ceff66;
	color: #8fd9ff;
}

.field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 10px;
}

.field-card {
	padding: 12px;
	border-radius: 10px;
	border: 1px solid #2f4868;
	background: #0a192c;
}

.field-title {
	font-size: 0.76rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.field-card.approved {
	border-color: #4bbda880;
}

.field-card.blocked {
	border-color: #ff7b9b70;
}

.field-card.blocked p:last-child {
	color: #ffc1cf;
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

.metric-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 8px;
}

.metric-box {
	border-radius: 12px;
	padding: 14px;
	background: #08172a;
	border: 1px solid #2d4868;
	display: grid;
	gap: 4px;
}

.metric-value {
	font-size: 1.65rem;
	font-weight: 650;
	letter-spacing: 0.01em;
}

.metric-label {
	font-size: 0.78rem;
	color: #97afcc;
}

.metric-box.pulse {
	animation: softPulse 2.4s ease-in-out infinite;
}

.redaction-demo {
	margin-top: 12px;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	padding: 12px;
	border-radius: 10px;
	border: 1px solid #355375;
	background: #081728;
	overflow: hidden;
}

.redaction-demo .col {
	padding: 8px;
	border-radius: 8px;
	font-size: 0.79rem;
	text-align: center;
	border: 1px solid #2d4766;
	background: #10243d;
}

.redaction-demo .col.is-sensitive {
	border-color: #f1647e88;
	color: #ffc8d2;
}

.redaction-sweep {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -35%;
	width: 35%;
	background: linear-gradient(90deg, transparent, #ff617e55, #ff617e80, transparent);
	opacity: 0;
}

.redaction-demo.is-running .redaction-sweep {
	opacity: 1;
	animation: sweep 1.5s ease;
}

.redaction-demo.is-done .col.is-sensitive {
	background: #3a1630;
	color: #ffd2dc;
	text-decoration: line-through;
	text-decoration-thickness: 3px;
}

.small-note {
	margin-top: 10px;
	font-size: 0.78rem;
}

.sheet-preview {
	margin-top: 10px;
	border: 1px solid #3b5b7e;
	border-radius: 10px;
	overflow: hidden;
	background: #0a1728;
}

.sheet-head {
	padding: 10px 12px;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: #10243b;
	border-bottom: 1px solid #2f4b6d;
	color: #89c6ef;
}

.sheet-preview table {
	width: 100%;
	border-collapse: collapse;
}

.sheet-preview th,
.sheet-preview td {
	padding: 10px;
	font-size: 0.8rem;
	border-bottom: 1px solid #213957;
	text-align: left;
}

.sheet-preview th {
	color: #95d1f5;
	background: #0d1d31;
}

.learned-card {
	margin-top: 10px;
	padding: 14px;
	border-radius: 12px;
	border: 1px solid #56cbb6;
	background: linear-gradient(142deg, #133a39, #0f2d31);
	box-shadow: 0 0 24px #4af4cc38;
}

.learned-name {
	font-size: 1.03rem;
	font-weight: 650;
	margin: 0 0 8px;
	color: #c5ffef;
}

.learned-meta {
	font-size: 0.8rem;
}

.learned-badge {
	display: inline-block;
	margin-top: 12px;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 0.74rem;
	border: 1px solid #88ffd8aa;
	color: #b8ffe7;
}

.right-rail {
	display: grid;
	gap: 12px;
}

.result-stats {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

.result-stats div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px;
	border-radius: 8px;
	background: #0a182b;
	border: 1px solid #2c4563;
	font-size: 0.8rem;
}

.result-stats span {
	color: #9bb2cf;
}

.result-stats strong {
	font-size: 0.92rem;
}

.status-good {
	color: #9dffd7;
}

.primary-cta {
	width: 100%;
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid #6fe8c0;
	background: linear-gradient(140deg, #1f6359, #2c8a74);
	color: #ebfff8;
	font-weight: 630;
	font-size: 0.85rem;
}

.trust-panel ul,
.mini-trace ul {
	margin: 12px 0 0;
	padding-left: 17px;
	display: grid;
	gap: 8px;
	color: #a6bad6;
	font-size: 0.8rem;
	line-height: 1.35;
}

.mini-trace li {
	padding: 6px 8px;
	border-radius: 8px;
	border: 1px solid transparent;
}

.mini-trace li.is-current {
	border-color: #6ecfff88;
	background: #123052;
	color: #d6f4ff;
}

.trace-strip {
	padding: 14px;
	display: grid;
	gap: 10px;
}

.trace-strip__title {
	margin: 0;
	font-size: 0.76rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #9ec2e6;
}

.trace-events {
	display: grid;
	grid-template-columns: repeat(7, minmax(160px, 1fr));
	gap: 8px;
}

.trace-events span {
	padding: 8px 9px;
	border: 1px solid #2d4768;
	border-radius: 8px;
	font-size: 0.74rem;
	background: #0a182b;
	color: #94aac6;
	transition: border-color 250ms ease, color 250ms ease, background-color 250ms ease;
}

.trace-events span.is-current {
	border-color: #71d8ff;
	background: #143354;
	color: #daf3ff;
}

@keyframes softPulse {
	0%,
	100% {
		box-shadow: 0 0 0 #0000;
	}
	50% {
		box-shadow: 0 0 18px #55d4ff55;
	}
}

@keyframes activePanel {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-1px);
	}
}

@keyframes sweep {
	0% {
		left: -35%;
	}
	100% {
		left: 100%;
	}
}

@media (max-width: 1450px) {
	.layout-grid {
		grid-template-columns: 300px minmax(580px, 1fr);
	}

	.right-rail {
		grid-column: 1 / -1;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.trace-events {
		grid-template-columns: repeat(4, minmax(170px, 1fr));
	}
}

@media (max-width: 1024px) {
	.command-bar {
		grid-template-columns: 1fr;
	}

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

	.orchestration-panel {
		min-height: 620px;
	}

	.right-rail {
		grid-template-columns: 1fr;
	}

	.trace-events {
		grid-template-columns: repeat(2, minmax(180px, 1fr));
	}
}