:root {
	--bg: #080c12;
	--bg-soft: #0f1520;
	--surface: #101a29d4;
	--surface-strong: #0d1725;
	--border: #ffffff1f;
	--text: #ecf2ff;
	--muted: #9fb0c8;
	--brand: #51b5ff;
	--brand-2: #74ffd5;
	--warn: #ff9f6e;
	--danger: #ff6d7a;
	--good: #5be2a8;
	--radius: 16px;
	--shadow: 0 20px 44px #00000073;
}

* {
	box-sizing: border-box;
}

.hidden {
	display: none !important;
}

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body {
	font-family: "Aptos", "Segoe UI", "Trebuchet MS", sans-serif;
	color: var(--text);
	background: var(--bg);
	overflow-x: hidden;
}

.app-bg {
	position: fixed;
	inset: 0;
	background:
		radial-gradient(circle at 14% 10%, #1f3e6742 0%, transparent 33%),
		radial-gradient(circle at 88% 0%, #1f725b45 0%, transparent 28%),
		radial-gradient(circle at 52% 96%, #2b355954 0%, transparent 42%),
		linear-gradient(160deg, #070b11 0%, #0a1320 58%, #081018 100%);
	z-index: -1;
}

.app-shell {
	max-width: 1280px;
	margin: 0 auto;
	padding: 28px 20px 36px;
	display: grid;
	gap: 16px;
}

.top-bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 18px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: linear-gradient(180deg, #ffffff12, #ffffff08);
	backdrop-filter: blur(8px);
	box-shadow: var(--shadow);
	transition: transform 220ms ease, opacity 220ms ease;
}

.top-bar.compact {
	transform: translateY(-2px);
}

.eyebrow {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8bc8ff;
}

h1 {
	margin: 8px 0 2px;
	font-size: clamp(1.4rem, 2vw, 2rem);
	letter-spacing: 0.02em;
}

#heroSubtitle {
	margin: 0;
	color: var(--muted);
	font-size: 0.92rem;
}

.top-bar__meta {
	display: grid;
	gap: 10px;
	justify-items: end;
}

.back-link {
	text-decoration: none;
	color: #a8c4e8;
	font-size: 0.83rem;
	border-bottom: 1px solid #5f7794;
}

.status-pill {
	padding: 7px 12px;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid #72b9ff5e;
	background: #1d3352a6;
}

.view {
	min-height: calc(100vh - 188px);
	display: grid;
	align-content: start;
	gap: 12px;
}

.panel {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow);
	backdrop-filter: blur(7px);
}

.reveal {
	opacity: 0;
	transform: translateY(16px) scale(0.99);
	animation: reveal 420ms ease forwards;
}

@keyframes reveal {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.landing-wrap {
	width: min(760px, 100%);
	margin: 0 auto;
	padding: 0;
	display: grid;
	gap: 16px;
}

.landing-main {
	display: grid;
	gap: 12px;
	text-align: center;
}

.chat-input-wrap {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: end;
}

.landing-composer {
	padding: 10px;
	border: 1px solid #d3dce9;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 8px 24px #12345b1f;
}

textarea,
input,
select {
	width: 100%;
	border-radius: 12px;
	border: 1px solid #ffffff2c;
	background: #030912b8;
	color: var(--text);
	padding: 12px 13px;
	font: inherit;
	resize: vertical;
	min-height: 48px;
	outline: none;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

textarea:focus,
input:focus,
select:focus {
	border-color: #65c6ff;
	box-shadow: 0 0 0 3px #4ca7e133;
}

.helper {
	margin: 0;
	font-size: 0.88rem;
	color: var(--muted);
}

button {
	border: 0;
	border-radius: 12px;
	padding: 11px 14px;
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

button:hover {
	transform: translateY(-1px);
}

.primary {
	background: linear-gradient(145deg, #53bcff, #3f8cff);
	color: #02182f;
	box-shadow: 0 10px 22px #2f84dc5c;
}

.secondary {
	background: #1d2d43;
	color: #c4d4ea;
	border: 1px solid #5a7294;
}

.ghost {
	background: transparent;
	color: #9eb1ca;
	border: 1px dashed #547195;
}

.task-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.task-pill {
	border: 1px solid #d3dce9;
	border-radius: 14px;
	background: #f7fbff;
	padding: 10px 12px;
	text-align: left;
	font-size: 0.86rem;
	font-weight: 600;
	color: #213a5a;
	cursor: pointer;
	display: grid;
	gap: 2px;
	transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.task-pill:hover {
	transform: translateY(-1px);
	border-color: #9fc3eb;
	background: #ffffff;
}

.task-pill:focus-visible {
	outline: 2px solid #4f90d6;
	outline-offset: 2px;
}

.task-pill__title {
	font-size: 0.87rem;
	font-weight: 700;
}

.task-pill__hint {
	font-size: 0.77rem;
	line-height: 1.35;
	color: #5a7392;
}

.setup-wrap {
	max-width: 980px;
	margin: 3vh auto 0;
	padding: 20px;
	display: grid;
	gap: 16px;
}

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

.setup-title {
	margin: 0;
	font-size: 1.35rem;
}

.setup-summary {
	margin: 4px 0 0;
	font-size: 0.92rem;
	color: var(--muted);
}

.badge {
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid #ffffff2f;
	background: #1a2a3e;
}

.setup-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 14px;
}

.sub-panel {
	padding: 14px;
	border: 1px solid #ffffff1f;
	border-radius: 12px;
	background: #0a131fc7;
	display: grid;
	gap: 10px;
}

.sub-panel h3 {
	margin: 0;
	font-size: 0.95rem;
}

.step-list {
	display: grid;
	gap: 8px;
}

.step-item {
	padding: 10px;
	border-radius: 10px;
	background: #ffffff08;
	border: 1px solid #ffffff14;
}

.step-item p {
	margin: 0;
	font-size: 0.82rem;
	color: #9db0c8;
}

.step-summary {
	padding: 0 10px 10px;
	margin: 0;
	font-size: 0.8rem;
	color: #7a90ab;
}

.step-item strong {
	display: block;
	margin-bottom: 4px;
	font-size: 0.84rem;
}

.upload-zone {
	border: 1px dashed #68beff8c;
	border-radius: 12px;
	padding: 16px;
	text-align: center;
	color: #b9d1ec;
	background: #0e213445;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.upload-zone.dragging {
	background: #13365b8a;
	border-color: #89d3ff;
}

.upload-zone p {
	margin: 0;
	font-size: 0.86rem;
}

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

.form-field {
	display: grid;
	gap: 6px;
}

.form-field label {
	font-size: 0.79rem;
	color: #a7bdd7;
}

.inline-check {
	display: flex;
	align-items: center;
	gap: 8px;
}

.inline-check input {
	width: auto;
	min-height: 0;
}

.example-list {
	display: grid;
	gap: 6px;
}

.example-item {
	font-size: 0.82rem;
	padding: 8px;
	border-radius: 8px;
	border: 1px solid #ffffff1d;
	background: #ffffff08;
	color: #bad0ea;
}

.action-bar {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding-top: 2px;
}

.workspace {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr) 360px;
	gap: 12px;
	align-items: start;
}

.execution-layout {
	width: min(980px, 100%);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 188px minmax(0, 1fr);
	gap: 6px;
	align-items: start;
}

.execution-rail {
	padding: 0;
}

.execution-main-wrap {
	min-width: 0;
}

.progress-rail-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.progress-step {
	border: 1px solid transparent;
	border-radius: 7px;
	background: transparent;
}

.progress-step-row {
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 6px;
	align-items: center;
	text-align: left;
	color: inherit;
	padding: 5px 6px;
}

.progress-dot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	border: 2px solid #bfd0e7;
	background: #ffffff;
}

.progress-copy {
	display: grid;
	gap: 0;
	min-width: 0;
}

.progress-title {
	font-size: 0.76rem;
	font-weight: 600;
	color: #2b4669;
}

.progress-summary {
	display: none;
}

.progress-status {
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	color: #7a8fa9;
}

.progress-step.is-active {
	border-color: #d2e3f6;
	background: #f6faff;
}

.progress-step.is-active .progress-dot {
	border-color: #6ea7de;
	background: #dff0ff;
	animation: progress-spin 0.9s linear infinite;
}

.progress-step.is-active .progress-status {
	color: #3f74ab;
}

.progress-step.is-done {
	border-color: #d8eadf;
	background: #f8fcfa;
}

.progress-step.is-done .progress-dot {
	border-color: #83be9f;
	background: #dff2e7;
}

.progress-step.is-done .progress-status {
	color: #457e61;
}

@keyframes progress-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.execution-mainpanel {
	padding: 10px;
	display: grid;
	gap: 8px;
	min-width: 0;
	border-color: #e6eef8;
	box-shadow: 0 1px 2px rgba(27, 56, 96, 0.06);
}

.execution-main-header {
	display: grid;
	gap: 4px;
}

.execution-main-header h3 {
	margin: 0;
	font-size: 0.98rem;
}

.execution-main-header p {
	margin: 0;
	font-size: 0.8rem;
	color: #607a99;
}

.activity-list {
	display: grid;
	gap: 5px;
}

.activity-row {
	border: 1px solid #ebf2fa;
	border-radius: 8px;
	background: #ffffff;
	padding: 6px;
	display: grid;
	gap: 3px;
}

.activity-row-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.activity-type {
	font-size: 0.62rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 700;
	color: #6c84a1;
}

.activity-status {
	font-size: 0.62rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid #dfe9f6;
	background: #f7faff;
	color: #5f7a99;
}

.activity-row h4 {
	margin: 0;
	font-size: 0.8rem;
	color: #1d3657;
}

.activity-row p {
	margin: 0;
	font-size: 0.76rem;
	line-height: 1.42;
	color: #5b7593;
}

.execution-main-footer {
	border-top: 1px solid #edf3fa;
	padding-top: 6px;
	display: grid;
	gap: 2px;
}

.execution-main-footer p {
	margin: 0;
	font-size: 0.76rem;
	color: #5b7593;
}

.activity-row.is-active {
	border-color: #c4dbf5;
	background: #f2f8ff;
}

.activity-row.is-active .activity-status {
	border-color: #c4dbf5;
	background: #eaf5ff;
	color: #3e72aa;
}

.activity-row.is-done {
	border-color: #d0e9db;
	background: #f4fbf7;
}

.activity-row.is-done .activity-status {
	border-color: #cde6d8;
	background: #eef9f3;
	color: #467b60;
}

.rail,
.stream,
.preview {
	padding: 14px;
}

.section-title {
	margin: 0;
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #9ab3d3;
}

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

.rail-step {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 8px;
	padding: 8px;
	border: 1px solid #ffffff15;
	border-radius: 10px;
	background: #ffffff06;
}

.rail-step .dot {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	font-size: 0.68rem;
	display: grid;
	place-items: center;
	margin-top: 2px;
	border: 1px solid #607b99;
	color: #7f97b5;
}

.rail-step.done .dot {
	background: #154f39;
	border-color: #5be2a8;
	color: #b6f1d7;
}

.rail-step.active {
	border-color: #74c4ff8c;
	background: #24476a42;
}

.rail-step.active .dot {
	background: #1f4365;
	border-color: #7fceff;
	color: #c5e8ff;
}

.rail-step p {
	margin: 0;
	font-size: 0.8rem;
	color: #9eb0c7;
}

.event-list {
	margin-top: 10px;
	display: grid;
	gap: 8px;
}

.event-item {
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #ffffff16;
	background: #0a131fb8;
	opacity: 0;
	transform: translateY(6px);
	animation: event-in 320ms ease forwards;
}

@keyframes event-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.event-item header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.event-item h4 {
	margin: 0;
	font-size: 0.88rem;
}

.event-item time {
	font-size: 0.74rem;
	color: #97abc6;
}

.event-item p {
	margin: 0;
	font-size: 0.81rem;
	color: #a7bbd3;
}

.empty-note {
	margin-top: 12px;
	padding: 10px;
	border-radius: 10px;
	border: 1px dashed #5e7ea3;
	color: #97abc4;
	font-size: 0.82rem;
}

.preview h3 {
	margin: 10px 0 6px;
	font-size: 1rem;
}

.preview p {
	margin: 0;
	font-size: 0.84rem;
	color: #a9bdd6;
}

.highlight-list,
.quick-list {
	margin: 10px 0 0;
	padding-left: 16px;
	display: grid;
	gap: 5px;
}

.highlight-list li,
.quick-list li {
	font-size: 0.8rem;
	color: #b6c9df;
}

.exception-card {
	margin-top: 10px;
	padding: 12px;
	border-radius: 12px;
	border: 1px solid #ffad7e6c;
	background: #3b25164a;
	display: grid;
	gap: 10px;
}

.exception-card h4 {
	margin: 0;
	font-size: 0.95rem;
}

.exception-card p {
	margin: 0;
	font-size: 0.82rem;
}

.option-list {
	display: grid;
	gap: 8px;
}

.option {
	padding: 9px;
	border-radius: 10px;
	border: 1px solid #ffffff25;
	background: #101a29;
	display: grid;
	gap: 4px;
}

.option.recommended {
	border-color: #67d8b7;
	background: #1a332f;
}

.option.warning {
	border-color: #ff9770;
	background: #3d2318;
}

.option button {
	justify-self: start;
	padding: 8px 10px;
	font-size: 0.78rem;
}

.validation {
	margin-top: 12px;
	display: grid;
	gap: 10px;
}

.validation-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.validation-pane {
	border: 1px solid #ffffff1a;
	border-radius: 10px;
	background: #070d16;
	padding: 10px;
}

.validation-pane h5 {
	margin: 0 0 6px;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9eb6d4;
}

.validation-pane ul {
	margin: 0;
	padding-left: 16px;
	display: grid;
	gap: 4px;
}

.validation-pane li {
	font-size: 0.77rem;
	color: #bccfe3;
}

.validation-actions {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}

.chip {
	border: 1px solid #5d7698;
	border-radius: 999px;
	padding: 6px 9px;
	font-size: 0.74rem;
	background: #122136;
	color: #bdd2ea;
}

.result-wrap {
	max-width: 1000px;
	margin: 1vh auto 0;
	padding: 18px;
	display: grid;
	gap: 14px;
}

.result-head h2 {
	margin: 0;
}

.result-head p {
	margin: 4px 0 0;
	color: var(--muted);
}

.result-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 12px;
}

.result-card {
	padding: 12px;
	border: 1px solid #ffffff1e;
	border-radius: 12px;
	background: #09111ccf;
	display: grid;
	gap: 8px;
}

.result-card h3 {
	margin: 0;
	font-size: 0.95rem;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8rem;
}

.data-table th,
.data-table td {
	padding: 7px;
	border-bottom: 1px solid #ffffff12;
	text-align: left;
}

.issue-group {
	padding: 8px;
	border: 1px solid #ffffff1a;
	border-radius: 10px;
	background: #ffffff07;
	display: grid;
	gap: 2px;
}

.issue-group strong {
	font-size: 0.83rem;
}

.issue-group p {
	margin: 0;
	font-size: 0.77rem;
	color: #a9bfda;
}

.value-card {
	padding: 12px;
	border: 1px solid #66d4bc66;
	border-radius: 12px;
	background: linear-gradient(160deg, #10322c, #0d1d2a);
	display: grid;
	gap: 8px;
}

.value-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.8rem;
	color: #cae6db;
}

.value-row strong {
	color: #effff8;
}

.learn-card {
	padding: 12px;
	border: 1px solid #64b9ff61;
	border-radius: 12px;
	background: linear-gradient(160deg, #152a42, #0f1928);
	display: grid;
	gap: 8px;
}

.learn-card h3 {
	margin: 0;
	font-size: 0.96rem;
}

.learn-card p {
	margin: 0;
	font-size: 0.82rem;
	color: #b6cae1;
}

@media (max-width: 1080px) {
	.workspace {
		grid-template-columns: 1fr;
	}

	.execution-layout {
		grid-template-columns: 1fr;
		gap: 8px;
	}

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

@media (max-width: 760px) {
	.app-shell {
		padding: 16px 12px 28px;
	}

	.landing-wrap,
	.setup-wrap,
	.result-wrap {
		padding: 14px;
	}

	.chat-input-wrap {
		grid-template-columns: 1fr;
	}

	.task-grid,
	.setup-grid,
	.form-grid,
	.validation-grid {
		grid-template-columns: 1fr;
	}

	.top-bar {
		padding: 12px;
	}
}

/* Polish Pass: Motion, hierarchy, and expandable controls */
.view {
	transition: opacity 220ms ease, transform 240ms ease;
	will-change: transform, opacity;
}

.view.stage-exit {
	opacity: 0;
}

.view.stage-enter {
	opacity: 0;
	animation: stage-in 280ms ease forwards;
}

.view.move-up.stage-exit {
	transform: translateY(-10px) scale(0.994);
}

.view.move-up.stage-enter {
	transform: translateY(12px) scale(0.996);
}

.view.move-down.stage-exit {
	transform: translateY(10px) scale(0.994);
}

.view.move-down.stage-enter {
	transform: translateY(-12px) scale(0.996);
}

.view.move-left.stage-exit {
	transform: translateX(-14px) scale(0.996);
}

.view.move-left.stage-enter {
	transform: translateX(14px) scale(0.996);
}

.view.move-right.stage-exit {
	transform: translateX(14px) scale(0.996);
}

.view.move-right.stage-enter {
	transform: translateX(-14px) scale(0.996);
}

@keyframes stage-in {
	to {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
}

.reveal-panel .reveal-item {
	opacity: 0;
	transform: translateY(12px);
	animation: panel-rise 360ms ease forwards;
	animation-delay: calc(var(--panel-index, 0) * 85ms);
}

@keyframes panel-rise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.task-card--stagger {
	opacity: 0;
	transform: translateY(10px) scale(0.99);
	animation: card-in 360ms ease forwards;
	animation-delay: calc(var(--stagger-index, 0) * 56ms);
}

@keyframes card-in {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.step-item {
	padding: 0;
	overflow: hidden;
}

.step-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px;
	background: transparent;
	color: var(--text);
	border-radius: 0;
}

.step-toggle:hover {
	transform: none;
	background: #ffffff06;
}

.step-caret {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	border: 1px solid #6a86a8;
	font-size: 0.85rem;
	color: #bdd6f2;
}

.step-detail {
	padding: 0 10px 10px;
}

.step-detail p {
	margin: 0;
	font-size: 0.82rem;
	color: #9eb5cf;
}

.rail-step {
	padding: 0;
}

.rail-step.selected {
	border-color: #94d5ff8a;
	background: #2a496342;
}

.rail-step__button {
	width: 100%;
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 8px;
	align-items: start;
	padding: 8px;
	border-radius: 10px;
	background: transparent;
	color: var(--text);
	text-align: left;
}

.rail-step__button:hover {
	transform: none;
	background: #ffffff06;
}

.rail-step.active .dot {
	animation: active-pulse 1.25s ease-in-out infinite;
}

@keyframes active-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 #7fceff44;
	}
	50% {
		box-shadow: 0 0 0 7px #7fceff00;
	}
}

.rail-detail {
	margin-top: 10px;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #ffffff1e;
	background: #0a1320cc;
	display: grid;
	gap: 6px;
}

.rail-detail h4 {
	margin: 0;
	font-size: 0.9rem;
}

.rail-detail p {
	margin: 0;
	font-size: 0.8rem;
	color: #a9c0db;
}

.rail-follow {
	justify-self: start;
	padding: 8px 10px;
	font-size: 0.76rem;
}

.option-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.option-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.tiny {
	padding: 6px 9px;
	font-size: 0.74rem;
}

.warning-text {
	color: #ffc5a8;
}

.risk-panel {
	border: 1px solid #ffb38a6f;
	border-radius: 10px;
	background: #3f2a1d66;
	padding: 10px;
	display: grid;
	gap: 6px;
}

.risk-panel h5 {
	margin: 0;
	font-size: 0.84rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffd3bd;
}

.risk-panel p {
	margin: 0;
	font-size: 0.8rem;
	color: #ffd4c0;
}

.risk-panel ul {
	margin: 0;
	padding-left: 16px;
	display: grid;
	gap: 4px;
}

.risk-panel li {
	font-size: 0.78rem;
	color: #ffd9c7;
}

.chip--good {
	border-color: #67d8b7;
	background: #1a3a31;
	color: #c8f7e7;
}

.result-action-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 10px;
	border: 1px solid #ffffff1f;
	border-radius: 12px;
	background: #0d1724c9;
}

.result-action-bar .helper {
	margin-left: 2px;
	min-height: 1em;
}

@media (max-width: 760px) {
	.result-action-bar {
		align-items: stretch;
	}

	.result-action-bar button {
		width: 100%;
	}
}

/* Premium Pass: presenter-first visual treatment */
.app-shell {
	position: relative;
}

.app-shell::before {
	content: "";
	position: absolute;
	inset: -8px -8px auto -8px;
	height: 220px;
	pointer-events: none;
	background: radial-gradient(circle at 26% 10%, #67b9ff2b 0%, transparent 44%), radial-gradient(circle at 78% 18%, #7bf3d024 0%, transparent 42%);
	filter: blur(12px);
	z-index: -1;
}

.top-bar {
	background: linear-gradient(165deg, #ffffff1a 0%, #ffffff08 66%, #9ed2ff1f 100%);
	border-color: #9ecfff33;
}

.top-bar__brand h1,
#heroTitle {
	text-shadow: 0 6px 24px #7fb8ff24;
}

.status-pill {
	background: linear-gradient(145deg, #1f3c5fa8, #1d3352b8);
	border-color: #8ccfff88;
	box-shadow: 0 8px 18px #2f84dc2f;
}

.narration {
	padding: 10px 14px;
	display: grid;
	gap: 3px;
	border-color: #90c8ff4a;
	background: linear-gradient(150deg, #102033d6, #0f1a2bdc 68%, #12263bc9);
}

.narration__label {
	margin: 0;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8cccff;
	font-weight: 700;
}

.narration__text {
	margin: 0;
	font-size: 0.9rem;
	color: #d8e9ff;
	line-height: 1.34;
}

.landing-wrap {
	background: transparent;
}

.landing-headline {
	margin: 0;
	font-size: clamp(1.3rem, 2.3vw, 1.95rem);
	letter-spacing: 0.01em;
	line-height: 1.2;
}

.landing-subhead {
	margin: 0;
	font-size: 0.92rem;
	color: #8ea4bf;
	line-height: 1.42;
}

.focus-note {
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid #ffffff24;
	background: #112238b8;
	display: grid;
	gap: 4px;
}

.focus-note__title {
	margin: 0;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9fd0ff;
}

.focus-note__body {
	margin: 0;
	font-size: 0.83rem;
	color: #c3d8ee;
}

.focus-note.is-birthday {
	border-color: #77d8b08f;
	background: linear-gradient(160deg, #17372eaa, #132738b8);
}

.focus-note.is-import-eob {
	border-color: #89c2ff8a;
	background: linear-gradient(160deg, #182c46c0, #152336b8);
}

.focus-note.is-exception {
	border-color: #ffb0878f;
	background: linear-gradient(160deg, #40271dbd, #2f1d18bf);
}

.section-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.section-kicker {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #a8c5e4;
}

.event-item {
	position: relative;
}

.event-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 7px;
	border-radius: 999px;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid #7ea9cf66;
	background: #1730498f;
	color: #cde6ff;
}

.event-tag.safety {
	border-color: #6adbb588;
	background: #15433591;
	color: #d4ffe9;
}

.event-tag.decision {
	border-color: #ffbc998a;
	background: #4a2b1fa3;
	color: #ffd8c4;
}

.event-tag.delivery {
	border-color: #8bc4ff88;
	background: #1b3458a1;
	color: #d3e9ff;
}

.event-item header {
	align-items: flex-start;
}

.result-wrap {
	background: linear-gradient(160deg, #101d2dd8, #0f1a29d8 70%, #14335699);
}

.result-celebrate {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid #7fd8b88c;
	background: #173e3194;
	font-size: 0.76rem;
	color: #d9fff0;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.result-action-group-title {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9ec6eb;
	font-weight: 700;
	margin-right: 4px;
}

body[data-scenario='birthday-list'] .status-pill {
	border-color: #6fddb588;
	background: linear-gradient(145deg, #1f4d429f, #1a3b56b6);
}

body[data-scenario='import-eob'] .status-pill {
	border-color: #8ac6ff8c;
}

body[data-scenario='import-eob'] .narration {
	border-color: #9ecfff52;
}

body[data-scenario='birthday-list'] .narration {
	border-color: #7ad7b95a;
}

body[data-scenario='landing'] .top-bar {
	padding: 12px 14px;
	border-color: transparent;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
}

body[data-scenario='landing'] .eyebrow,
body[data-scenario='landing'] #heroSubtitle,
body[data-scenario='landing'] #statusPill,
body[data-scenario='landing'] #narrationBar {
	display: none;
}

body[data-scenario='landing'] .view {
	min-height: calc(100vh - 152px);
	align-content: center;
	justify-items: center;
}

body[data-scenario='landing'] .helper {
	color: #8ea4bf;
	font-size: 0.82rem;
}

body[data-scenario='landing'] .chat-input-wrap textarea {
	background: #ffffff;
	color: #13253d;
	border-color: #d3dce9;
	min-height: 96px;
}

body[data-scenario='landing'] .chat-input-wrap textarea:focus {
	border-color: #4f90d6;
	box-shadow: 0 0 0 3px #4f90d62e;
}

body[data-scenario]:not([data-scenario='landing']) .app-shell {
	padding-top: 14px;
}

body[data-scenario]:not([data-scenario='landing']) .view {
	min-height: calc(100vh - 220px);
}

.workflow-plan {
	position: relative;
	padding-left: 12px;
}

.workflow-plan::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #dde7f4;
}

.workflow-plan-list {
	display: grid;
	gap: 7px;
}

.plan-step {
	position: relative;
	border-radius: 8px;
	background: #ffffff;
	border: 1px solid #edf3fa;
	box-shadow: none;
}

.plan-step-toggle {
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	gap: 9px;
	align-items: center;
	padding: 9px 10px;
	background: transparent;
	color: inherit;
	text-align: left;
	border-radius: 8px;
}

.plan-step-toggle:hover {
	transform: none;
	background: #fafcff;
}

.plan-step-marker {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	border: 2px solid #b7cbe4;
	background: #ffffff;
}

.plan-step-main {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.plan-step-title {
	font-size: 0.86rem;
	font-weight: 700;
	color: #1d3657;
}

.plan-step-summary {
	font-size: 0.78rem;
	line-height: 1.38;
	color: #617a98;
}

.plan-step-status {
	font-size: 0.66rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 3px 7px;
	border-radius: 999px;
	border: 1px solid #e2ebf7;
	color: #5f7a99;
	background: #f8fbff;
}

.plan-step-caret {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	border: 1px solid #e2ebf7;
	font-size: 0.78rem;
	color: #537399;
}

.plan-step-detail {
	padding: 0 10px 10px 29px;
}

.plan-step-detail p {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: #526f90;
}

.plan-step.is-active .plan-step-marker {
	border-color: #80afdf;
	background: #dff0ff;
}

.plan-step.is-active .plan-step-status {
	border-color: #c7ddf5;
	background: #eff7ff;
	color: #3b6ea5;
}

.plan-step.is-done .plan-step-marker {
	border-color: #8fcfae;
	background: #eaf9f0;
}

.plan-step.is-done .plan-step-status {
	border-color: #cae6d6;
	background: #f2faf6;
	color: #3f7a59;
}

.workflow-plan-inline {
	margin-bottom: 10px;
}

.stage-composer {
	position: sticky;
	bottom: 0;
	z-index: 12;
	width: min(1040px, calc(100% - 30px));
	margin: 0 auto 12px;
	padding: 10px;
	border: 1px solid #d4e0ef;
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(22, 52, 102, 0.14);
}

.stage-composer textarea {
	width: 100%;
	min-height: 88px;
	max-height: 240px;
	resize: vertical;
	padding: 10px 12px;
	border: 1px solid #cfd9e8;
	border-radius: 11px;
	background: #ffffff;
	color: #1a2e4a;
	font: inherit;
	outline: none;
}

.stage-composer textarea:focus {
	border-color: #5c9ddf;
	box-shadow: 0 0 0 3px #5c9ddf2b;
}

.stage-composer-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}

.stage-composer-send {
	border: 0;
	border-radius: 999px;
	background: #132e50;
	color: #ffffff;
	padding: 8px 14px;
	font-size: 0.84rem;
	font-weight: 700;
}

.demo-workspace-light {
	color: #18304d;
	background: #edf3fb;
}

.demo-workspace-light .app-bg {
	background:
		radial-gradient(circle at 12% 8%, #ffffff 0%, transparent 36%),
		radial-gradient(circle at 88% 0%, #dcecff 0%, transparent 30%),
		linear-gradient(170deg, #f6faff 0%, #eaf1fb 58%, #e5eef9 100%);
}

.demo-workspace-light .top-bar {
	background: #ffffffcc;
	border-color: #d5e2f3;
	box-shadow: 0 10px 22px rgba(22, 52, 102, 0.1);
	backdrop-filter: blur(6px);
}

.demo-workspace-light .narration {
	border-color: #d3e0f0;
	background: #f8fbff;
}

.demo-workspace-light .narration__label {
	color: #4875a6;
}

.demo-workspace-light .narration__text {
	color: #33526f;
}

.demo-workspace-light .panel {
	border-color: #d5e1f2;
	background: #ffffffd9;
	box-shadow: 0 10px 26px rgba(22, 52, 102, 0.12);
}

.demo-workspace-light .landing-subhead {
	color: #607a99;
}

.demo-workspace-light .landing-composer {
	border-color: #d4dfef;
	background: #ffffff;
	box-shadow: 0 12px 30px rgba(25, 57, 110, 0.14);
}

.demo-workspace-light textarea,
.demo-workspace-light input,
.demo-workspace-light select {
	background: #ffffff;
	border-color: #cfd9e8;
	color: #1b324e;
}

.demo-workspace-light .primary {
	background: #132e50;
	color: #ffffff;
	box-shadow: 0 8px 16px rgba(19, 46, 80, 0.22);
}

.demo-workspace-light .secondary {
	background: #f3f7fd;
	border: 1px solid #d1dced;
	color: #2a4463;
}

.demo-workspace-light .ghost {
	background: #ffffff;
	border: 1px dashed #b6c7de;
	color: #4b6483;
}

.demo-workspace-light .setup-wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 8px 0 8px;
	display: grid;
	gap: 12px;
	background: transparent;
}

.demo-workspace-light .workspace {
	gap: 10px;
}

.demo-workspace-light .stream {
	display: grid;
	gap: 8px;
}

.demo-workspace-light .event-list {
	margin-top: 0;
}

.demo-workspace-light .sub-panel {
	background: #f8fbff;
	border-color: #d8e4f3;
}

.demo-workspace-light .step-item {
	background: #ffffff;
	border-color: #d8e4f3;
}

.demo-workspace-light .step-item.active {
	border-color: #a8c8ea;
	background: #f4f9ff;
}

.demo-workspace-light .step-item.done {
	border-color: #b9dfcc;
	background: #f2fbf6;
}

.demo-workspace-light .step-toggle {
	color: #193150;
}

.demo-workspace-light .step-detail p,
.demo-workspace-light .step-summary {
	color: #5e7692;
}

.demo-workspace-light .step-caret {
	border-color: #a9bfd9;
	color: #52739a;
}

.demo-workspace-light .workspace,
.demo-workspace-light .result-wrap {
	color: #1a3554;
}

.demo-workspace-light .rail-step,
.demo-workspace-light .event-item,
.demo-workspace-light .result-card,
.demo-workspace-light .value-card,
.demo-workspace-light .learn-card,
.demo-workspace-light .validation-pane,
.demo-workspace-light .exception-card,
.demo-workspace-light .option {
	background: #ffffff;
	border-color: #d8e4f3;
}

.demo-workspace-light .event-tag {
	background: #eff6ff;
	border-color: #bdd6f2;
	color: #325d88;
}

.demo-workspace-light .event-tag.safety {
	background: #ecfbf5;
	border-color: #b8e8d0;
	color: #2f6b4f;
}

.demo-workspace-light .event-tag.decision {
	background: #fff5ed;
	border-color: #f2cfb4;
	color: #90572d;
}

.demo-workspace-light .event-tag.delivery {
	background: #eef5ff;
	border-color: #bdd2f0;
	color: #355f8b;
}

.demo-workspace-light .section-title,
.demo-workspace-light .section-kicker,
.demo-workspace-light .helper,
.demo-workspace-light .preview p,
.demo-workspace-light .result-head p,
.demo-workspace-light .value-row,
.demo-workspace-light .learn-card p,
.demo-workspace-light .task-desc,
.demo-workspace-light .task-pill__hint {
	color: #5f7896;
}

.demo-workspace-light .result-action-bar {
	background: #f8fbff;
	border-color: #d8e4f3;
}

/* Executing State: strict two-region shell */
.view--executing .execution-layout {
	width: min(1040px, 100%);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 8px;
	align-items: start;
}

.view--executing .execution-rail {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
}

.view--executing .progress-rail-list {
	gap: 2px;
}

.view--executing .progress-step {
	border: 0;
	border-radius: 7px;
	background: transparent;
}

.view--executing .progress-step-row {
	padding: 5px 6px;
	gap: 6px;
}

.view--executing .progress-title {
	font-size: 0.75rem;
	line-height: 1.3;
}

.view--executing .progress-status {
	font-size: 0.58rem;
	letter-spacing: 0.05em;
}

.view--executing .progress-step.is-active {
	background: #f4f8fe;
}

.view--executing .progress-step.is-done {
	background: #f7fbf8;
}

.view--executing .execution-mainpanel {
	padding: 0;
	border: 1px solid #d8e3f1;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 2px 10px rgba(24, 53, 95, 0.08);
}

.view--executing .execution-main-header {
	padding: 12px 14px 10px;
	gap: 4px;
	border-bottom: 1px solid #e8eef7;
	background: #fbfdff;
}

.execution-inline-status {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	color: #23486f;
}

.execution-inline-detail {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.4;
	color: #5a7594;
}

.view--executing .activity-list {
	padding: 0 14px 12px;
	gap: 0;
}

.view--executing .activity-row {
	border: 0;
	border-top: 1px solid #e9eff8;
	border-radius: 0;
	background: transparent;
	padding: 10px 0;
	gap: 4px;
}

.view--executing .activity-row:first-child {
	border-top: 0;
}

.view--executing .activity-row-head {
	gap: 6px;
}

.view--executing .activity-type {
	font-size: 0.6rem;
	color: #6782a1;
}

.view--executing .activity-status {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 0.6rem;
	color: #6f86a3;
}

.activity-row-title {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.35;
	color: #1f3e61;
}

.activity-row-summary {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.45;
	color: #5a7493;
}

.view--executing .activity-row.is-active {
	background: transparent;
}

.view--executing .activity-row.is-active .activity-status {
	color: #2d689e;
}

.view--executing .activity-row.is-done .activity-status {
	color: #3f795a;
}

/* Safety guard: executing view should never show legacy labeled blocks/panels */
.view--executing .rail-detail,
.view--executing .preview,
.view--executing .section-title-row,
.view--executing .section-kicker {
	display: none !important;
}

@media (max-width: 900px) {
	.view--executing .execution-layout {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

@media (max-width: 760px) {
	.stage-composer {
		width: calc(100% - 16px);
		margin-bottom: 8px;
		padding: 8px;
	}
}