@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root{
	--bg:#f6f8fa;
	--card:#ffffff;
	--accent:#0366d6;
	--muted:#6b7280;
	--muted-2:#94a3b8;
	--shadow: 0 6px 18px rgba(18,22,30,0.06);
}

/* Base / Reset */
* {
	box-sizing: border-box;
}

html,
body,
#app {
	height: 100%;
}

body {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: var(--bg);
	color: #0f1720;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#app {
	max-width: 1100px;
	margin: 28px auto;
	padding: 20px;
}

/* Header */
header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

header h1 {
	margin: 0;
	font-size: 28px;
	line-height: 1.05;
	font-weight: 700;
}

header { padding: 6px 0 4px; }

/* Controls */
.controls {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}

.controls input {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid #e6e9ef;
	border-radius: 10px;
	background: #fff;
	box-shadow: var(--shadow);
	outline: none;
}

.controls input:focus {
	box-shadow: 0 8px 20px rgba(3,102,214,0.08);
	border-color: var(--accent);
}

.controls select {
	padding: 10px 12px;
	border: 1px solid #e6e9ef;
	border-radius: 10px;
	background: #fff;
	outline: none;
}

/* Layout */
main {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 16px;
}

.panel {
	background: var(--card);
	border-radius: 12px;
	min-height: 300px;
	padding: 12px;
	box-shadow: var(--shadow);
}

/* Execution list */
#list {
	overflow: auto;
	padding: 8px;
}

.item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: background 0.12s, transform 0.08s;
}

.item:hover {
	background: #f4f7fb;
	transform: translateY(-1px);
}

.statusDot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-top: 6px;
	flex: 0 0 12px;
}

.statusDot.success { background: #16a34a; }
.statusDot.error  { background: #ef4444; }

.itemBody { flex: 1; min-width: 0; }

.itemBody .title {
	font-weight: 600;
	color: #0b1220;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.itemBody .meta {
	margin-top: 4px;
	font-size: 12px;
	color: var(--muted-2);
}

.itemBody .id {
	margin-top: 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	color: var(--muted-2);
}

.statusPill {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	margin-left: 8px;
	background: #f1f5f9;
	color: #0b1220;
}

.statusPill.success { background: #e6f9ef; color: #054f2d; }
.statusPill.error  { background: #fff1f2; color: #6b021f; }

/* Detail */
#detail h2 { margin: 0 0 8px; }
#detail .meta { color: var(--muted-2); margin-bottom: 8px; }

/* Responsive */
@media (max-width: 880px) {
	main { grid-template-columns: 1fr; }
	#list { max-height: 320px; }
}