:root {
	--ep-bg: #edf4ff;
	--ep-ink: #10243c;
	--ep-muted: #5a6d86;
	--ep-panel: #ffffffd9;
	--ep-line: #cdd9eb;
	--ep-accent: #1f6ec6;
	--ep-good: #20825f;
	--ep-warn: #8f5f13;
	--ep-shadow: 0 12px 24px #16355e18;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: "Aptos", "Bahnschrift", "Trebuchet MS", sans-serif;
	color: var(--ep-ink);
	background:
		radial-gradient(circle at 12% 10%, #ffffff 0%, transparent 34%),
		radial-gradient(circle at 90% 2%, #deebff 0%, transparent 34%),
		linear-gradient(165deg, #f5f9ff 0%, var(--ep-bg) 100%);
}

.ep-shell {
	max-width: 1320px;
	margin: 0 auto;
	padding: 20px;
	display: grid;
	gap: 14px;
}

.ep-topbar,
.ep-card,
.ep-notice {
	border: 1px solid var(--ep-line);
	border-radius: 14px;
	background: var(--ep-panel);
	box-shadow: var(--ep-shadow);
	backdrop-filter: blur(5px);
}

.ep-topbar {
	padding: 16px;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
	gap: 16px;
}

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

h1 {
	margin: 0;
	font-size: 1.85rem;
}

.ep-goal {
	margin: 10px 0 0;
	line-height: 1.45;
	color: var(--ep-muted);
}

.ep-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

.ep-badge,
.ep-chip {
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	border: 1px solid #b5cce8;
	background: #ebf2ff;
}

.ep-badge {
	background: #e0f4ea;
	border-color: #9fd5ba;
	color: #155841;
}

.ep-badge.fallback {
	background: #fff3dc;
	border-color: #efc173;
	color: #7a4d08;
}

.ep-chip.fallback {
	background: #fff3dc;
	border-color: #efc173;
	color: #7a4d08;
}

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

.ep-progress-track {
	height: 10px;
	border-radius: 999px;
	background: #e4ecf8;
	border: 1px solid #bfd0e8;
	overflow: hidden;
}

.ep-progress-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #2f78ca, #4cbca0);
	transition: width 320ms ease;
}

.ep-progress-text {
	margin: 7px 0 0;
	font-size: 0.8rem;
	color: var(--ep-muted);
}

.ep-link-row {
	margin-top: 10px;
	text-align: right;
}

.ep-link-row a {
	color: #265a9f;
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid #93b1de;
}

.ep-notice {
	padding: 10px 12px;
	font-size: 0.88rem;
}

.ep-notice.is-loading {
	color: #355983;
}

.ep-notice.is-success {
	color: #1f5f43;
	border-color: #b5dcc8;
	background: #eff9f3;
}

.ep-notice.is-warning {
	color: #7d5615;
	border-color: #e7cf9c;
	background: #fff9ed;
}

.ep-notice.is-error {
	color: #8b283a;
	border-color: #e4bdc6;
	background: #fff4f6;
}

.ep-grid {
	display: grid;
	grid-template-columns: 300px minmax(520px, 1fr) 300px;
	gap: 12px;
	align-items: start;
}

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

.ep-card {
	padding: 12px;
}

.ep-card-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}

.ep-card-head h2 {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #22456f;
}

.ep-subtitle {
	margin: 0;
	font-size: 0.77rem;
	color: var(--ep-muted);
}

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

.ep-step-item {
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #cbd9ec;
	background: #f9fbff;
}

.ep-step-item.is-active {
	border-color: #82b4e8;
	background: #edf5ff;
	box-shadow: 0 0 0 1px #cae1fd;
}

.ep-step-item.is-done {
	border-color: #9bcfb8;
	background: #f1fbf5;
}

.ep-step-top {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.ep-step-title {
	font-weight: 700;
	font-size: 0.86rem;
}

.ep-step-meta {
	margin-top: 4px;
	font-size: 0.77rem;
	color: var(--ep-muted);
	line-height: 1.35;
}

.ep-kv-list {
	margin-top: 10px;
	display: grid;
	gap: 7px;
}

.ep-kv-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	padding: 8px;
	border: 1px solid #d5e2f3;
	border-radius: 8px;
	background: #f8fbff;
}

.ep-kv-row span:first-child {
	font-size: 0.78rem;
	color: #466288;
	font-weight: 700;
}

.ep-kv-row span:last-child {
	font-size: 0.8rem;
	text-align: right;
	color: #173258;
}

.ep-artifacts {
	margin: 10px 0 0;
	padding-left: 18px;
	display: grid;
	gap: 8px;
	font-size: 0.82rem;
	color: #2a4568;
}

.ep-artifacts li {
	line-height: 1.35;
}

.ep-events-strip {
	margin-top: 10px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 8px;
}

.ep-event {
	border: 1px solid #cadef6;
	background: #f6faff;
	border-radius: 10px;
	padding: 8px;
}

.ep-event-time {
	font-size: 0.73rem;
	color: #4f6d92;
}

.ep-event-name {
	font-size: 0.8rem;
	font-weight: 700;
	margin-top: 4px;
}

.ep-turn-list {
	margin-top: 10px;
	display: grid;
	gap: 9px;
}

.ep-turn {
	border: 1px solid #d5e2f2;
	background: #fafdff;
	border-radius: 10px;
	padding: 10px;
}

.ep-turn-head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.ep-turn-role {
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #2a5f9e;
}

.ep-turn-time {
	font-size: 0.74rem;
	color: #60799a;
}

.ep-turn-summary {
	margin-top: 6px;
	font-size: 0.83rem;
	line-height: 1.45;
	color: #173557;
}

.ep-raw-preview {
	margin-top: 10px;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #d1e0f3;
	background: #f6fafe;
	font-size: 0.78rem;
	line-height: 1.4;
	color: #284262;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	max-height: 360px;
	overflow: auto;
}

@media (max-width: 1180px) {
	.ep-grid {
		grid-template-columns: 280px minmax(0, 1fr);
	}

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

@media (max-width: 900px) {
	.ep-topbar {
		grid-template-columns: 1fr;
	}

	.ep-meta-row,
	.ep-link-row {
		justify-content: flex-start;
		text-align: left;
	}

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

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