:root {
	color-scheme: dark;
	--bg: #101512;
	--surface: #19221d;
	--surface-soft: #222d27;
	--ink: #edf7f0;
	--muted: #aebcb4;
	--line: #39473f;
	--accent: #3fb883;
	--accent-strong: #75d9aa;
	--blue: #68b6e3;
	--red: #ef8178;
	--amber: #f0bd58;
	--violet: #b7a1ef;
	--on-accent: #08130e;
	--shadow: 0 18px 50px rgba(0, 0, 0, 0.30);
	--mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
}

	body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background:
		linear-gradient(180deg, rgba(63, 184, 131, 0.15), rgba(63, 184, 131, 0) 300px),
		var(--bg);
}

a {
	color: var(--accent-strong);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

code,
pre {
	font-family: var(--mono);
}

img,
video {
	max-width: 100%;
}

.hidden,
[hidden] {
	display: none !important;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.app-header {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px 28px;
	background: rgba(16, 21, 18, 0.88);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(16px);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
	font-weight: 800;
}

.brand img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}

.brand span {
	font-size: 20px;
}

.app-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	flex-wrap: wrap;
}

.app-nav a {
	color: var(--ink);
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
}

.app-nav a:hover,
.app-nav .nav-strong {
	background: var(--accent);
	color: var(--on-accent);
	text-decoration: none;
}

.content {
	width: min(1440px, 100%);
	margin: 0 auto;
	padding: 36px 28px 56px;
	flex: 1;
}

.home-content {
	display: grid;
	gap: 18px;
}

.home-content .warning-panel,
.home-content .section-grid {
	margin-top: 0;
}

.app-footer {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 28px;
	color: var(--muted);
	border-top: 1px solid var(--line);
}

.eyebrow {
	margin: 0 0 8px;
	color: var(--accent-strong);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0;
	text-transform: uppercase;
}

.hero-panel,
.panel,
.warning-panel,
.form-card,
.tool-card,
.status-card,
.task-column,
.codex-jobs,
.supertask-stats,
.task-detail-panel,
.task-comments,
.task-log-panel,
.filebox,
.preview-panel,
.file-info > div {
	border: 1px solid var(--line);
	border-radius: 8px;
	background: rgba(25, 34, 29, 0.92);
	box-shadow: var(--shadow);
}

.hero-panel {
	min-height: 480px;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
	align-items: center;
	gap: 28px;
	padding: 42px;
	background:
		linear-gradient(135deg, rgba(63, 184, 131, 0.16), rgba(104, 182, 227, 0.10)),
		var(--surface);
}

.hero-panel h1,
.page-heading h1,
.form-card h1 {
	margin: 0;
	font-size: 54px;
	line-height: 1;
	letter-spacing: 0;
}

.hero-copy {
	max-width: 780px;
	color: var(--muted);
	font-size: 19px;
	line-height: 1.55;
}

.hero-actions,
.button-row,
.detail-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.button,
button,
input[type="submit"] {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
	text-decoration: none;
}

.button:hover,
button:hover,
input[type="submit"]:hover {
	border-color: var(--accent);
	text-decoration: none;
}

.button.primary,
button.primary,
input.primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}

.button.primary:hover,
button.primary:hover {
	background: var(--accent-strong);
}

.button.danger,
button.danger,
.icon-button.danger {
	color: var(--red);
	border-color: rgba(239, 129, 120, 0.42);
}

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

.status-card {
	padding: 18px;
}

.status-card span {
	display: block;
	color: var(--muted);
	font-size: 13px;
	font-weight: 800;
}

.status-card strong {
	display: block;
	margin-top: 10px;
	font-size: 42px;
	line-height: 1;
}

.warning-panel {
	margin-top: 18px;
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 24px;
	padding: 22px;
	border-color: rgba(239, 129, 120, 0.48);
	background: #352420;
}

.warning-panel h2,
.panel h2,
.tool-card strong,
.codex-jobs h2,
.supertask-stats h2,
.task-log-header h2,
.task-comments h2 {
	margin: 0;
}

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

.section-grid.three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel,
.tool-card {
	padding: 24px;
}

.tool-card {
	display: block;
	color: var(--ink);
	min-height: 180px;
}

.tool-card span {
	color: var(--muted);
	font-size: 13px;
	font-weight: 900;
	text-transform: uppercase;
}

.tool-card strong {
	display: block;
	margin-top: 8px;
	font-size: 25px;
}

.tool-card p,
.panel p,
.warning-panel p,
.page-heading p,
.muted-text {
	color: var(--muted);
	line-height: 1.6;
}

.steps {
	margin: 0;
	padding-left: 20px;
	line-height: 1.7;
}

.copy-block,
.task-log-panel pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	margin: 12px 0 0;
	padding: 16px;
	border-radius: 8px;
	background: #0b100d;
	color: var(--ink);
	font-size: 13px;
	line-height: 1.55;
}

.panel-heading,
.supertask-header,
.task-detail-heading,
.codex-jobs-header,
.supertask-stats-header,
.task-comments-heading,
.task-log-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.feature-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.feature-list div {
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface-soft);
}

.feature-list strong,
.feature-list span {
	display: block;
}

.feature-list span {
	margin-top: 6px;
	color: var(--muted);
}

.pill,
.task-queue-pill,
.task-queue-label,
.task-count,
#codex-job-count,
#stats-completed-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 5px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface-soft);
	color: var(--muted);
	font-size: 13px;
	font-weight: 900;
}

.pill.muted {
	color: var(--muted);
}

.page-heading {
	margin-bottom: 22px;
}

.page-heading h1 {
	font-size: 44px;
}

.form-shell,
.lock-screen {
	min-height: 68vh;
	display: grid;
	place-items: center;
}

.form-shell.wide .form-card {
	width: min(760px, 100%);
}

.form-card {
	width: min(520px, 100%);
	padding: 28px;
}

.form-card form {
	display: grid;
	gap: 12px;
	margin-top: 20px;
}

label {
	color: var(--ink);
	font-size: 14px;
	font-weight: 900;
}

input,
textarea,
select {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	padding: 10px 12px;
}

textarea {
	resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
	outline: 3px solid rgba(63, 184, 131, 0.28);
	border-color: var(--accent);
}

.form-error,
.task-error {
	padding: 10px 12px;
	border-radius: 8px;
	background: #382321;
	color: var(--red);
	font-weight: 800;
}

.form-success {
	padding: 10px 12px;
	border-radius: 8px;
	background: #173527;
	color: var(--accent-strong);
	font-weight: 800;
}

.form-links {
	display: flex;
	gap: 12px;
	margin-top: 18px;
	flex-wrap: wrap;
}

.honeypot {
	position: absolute;
	left: -9999px;
}

.table-wrapper {
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 12px;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

th {
	color: var(--muted);
	font-size: 12px;
	text-transform: uppercase;
}

.icon-button {
	width: 38px;
	height: 38px;
	min-height: 38px;
	padding: 0;
	font-size: 12px;
}

.icon-button img {
	width: 18px;
	height: 18px;
	display: block;
}

/* Supertask board */

.supertask-content {
	width: min(1680px, 100%);
}

.supertask {
	display: grid;
	gap: 18px;
}

.supertask-title h1 {
	margin: 0;
	font-size: 34px;
}

.supertask-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.supertask-search {
	flex: 1;
	min-width: 260px;
	max-width: 520px;
}

.task-auto-toggle.is-active {
	background: var(--accent);
	color: var(--on-accent);
	border-color: var(--accent);
}

.task-create-link,
.task-plan-link,
.task-column-create {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 900;
	text-decoration: none;
}

.task-create-link {
	min-height: 40px;
	padding: 9px 14px;
}

.task-plan-link {
	min-height: 40px;
	padding: 9px 14px;
	background: var(--violet);
}

.task-column-create {
	width: 30px;
	height: 30px;
}

.server-reload-state {
	margin: 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: #3c3018;
	color: var(--amber);
	font-weight: 900;
}

.task-board {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	align-items: start;
}

.task-column {
	min-height: 280px;
	padding: 14px;
	box-shadow: none;
}

.task-column-header,
.task-column-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.task-column-header h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 16px;
}

.status-dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--muted);
}

.status-backlog { background: var(--muted); }
.status-feature { background: var(--blue); }
.status-bug { background: var(--red); }
.status-processing { background: var(--amber); }
.status-error { background: var(--red); }
.status-done { background: var(--accent); }
.status-archive { background: var(--ink); }

.task-list {
	min-height: 200px;
	display: grid;
	gap: 10px;
	margin-top: 14px;
}

.task-card {
	display: grid;
	gap: 10px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface-soft);
	cursor: grab;
}

.task-card:hover,
.task-card:focus {
	border-color: var(--accent);
	outline: none;
}

.task-description {
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	line-height: 1.45;
}

.task-processing-time,
.task-meta {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.task-meta {
	display: block;
}

.task-meta span,
.task-meta time {
	display: block;
}

.task-archive-drop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px;
	border: 1px dashed var(--muted);
	border-radius: 8px;
	background: rgba(34, 45, 39, 0.72);
	color: var(--muted);
}

.codex-jobs,
.supertask-stats {
	padding: 20px;
}

.codex-jobs-table-wrap {
	margin-top: 14px;
	overflow-x: auto;
}

.codex-job-status {
	display: inline-flex;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--surface-soft);
	font-size: 12px;
	font-weight: 900;
}

.codex-job-stop {
	min-height: 32px;
}

.supertask-stat-cards,
.supertask-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 16px;
}

.supertask-stats-grid {
	grid-template-columns: 1fr;
}

.supertask-stat-card {
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface-soft);
}

.supertask-stat-card span,
.stats-panel-heading span {
	color: var(--muted);
	font-size: 13px;
	font-weight: 800;
}

.supertask-stat-card strong {
	display: block;
	margin-top: 8px;
	font-size: 24px;
}

.processing-chart-panel {
	padding-top: 4px;
}

.stats-panel-heading {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.processing-bucket-chart {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

.processing-bucket-row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 42px;
	align-items: center;
	gap: 10px;
}

.processing-bucket-label,
.processing-bucket-count,
.empty-stats {
	color: var(--muted);
	font-size: 13px;
}

.processing-bucket-bar {
	height: 10px;
	border-radius: 999px;
	background: var(--line);
	overflow: hidden;
}

.processing-bucket-bar span {
	display: block;
	width: var(--bar-size, 0%);
	height: 100%;
	background: var(--accent);
}

/* Task detail */

.task-detail {
	display: grid;
	gap: 18px;
}

.task-back-link {
	width: fit-content;
}

.task-detail-heading h1 {
	margin: 0;
	font-size: 34px;
}

.task-detail-meta {
	color: var(--muted);
	font-size: 13px;
}

.task-detail-meta span,
.task-detail-meta time {
	display: block;
}

.task-detail-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
	gap: 18px;
	align-items: start;
}

.task-detail-primary {
	display: grid;
	gap: 18px;
}

.task-detail-panel,
.task-comments,
.task-log-panel {
	padding: 20px;
}

.task-detail-panel form,
.comment-form {
	display: grid;
	gap: 12px;
}

.task-detail-processing,
.task-detail-actions,
.task-create-options {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.task-detail-processing strong {
	display: block;
	margin-top: 4px;
	font-size: 24px;
}

/* Planning conversation */

.plan-heading-actions,
.plan-form-actions,
.plan-proposal-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.plan-chat-panel,
.plan-proposal {
	border: 1px solid var(--line);
	border-radius: 8px;
	background: rgba(25, 34, 29, 0.92);
	box-shadow: var(--shadow);
}

.plan-chat-panel {
	display: grid;
	gap: 16px;
	padding: 20px;
}

.plan-message-list {
	display: grid;
	gap: 12px;
	min-height: 260px;
	max-height: 56vh;
	overflow-y: auto;
	padding-right: 4px;
}

.plan-empty {
	align-self: center;
	margin: 0;
	color: var(--muted);
	text-align: center;
}

.plan-message {
	width: min(820px, 88%);
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface-soft);
}

.plan-message-user {
	justify-self: end;
	border-color: rgba(63, 184, 131, 0.55);
	background: #173527;
}

.plan-message span {
	display: block;
	color: var(--muted);
	font-size: 12px;
	font-weight: 900;
}

.plan-message p {
	margin: 6px 0 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	line-height: 1.5;
}

.plan-message-form {
	display: grid;
	gap: 10px;
	border-top: 1px solid var(--line);
	padding-top: 16px;
}

.plan-message-form textarea {
	min-height: 104px;
}

.plan-request-state {
	color: var(--muted);
	font-size: 13px;
	font-weight: 800;
}

.plan-proposal {
	padding: 20px;
}

.plan-proposal h2 {
	margin: 0;
	font-size: 22px;
}

.plan-proposal ol {
	display: grid;
	gap: 10px;
	margin: 16px 0 0;
	padding-left: 26px;
}

.plan-proposal li {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	line-height: 1.5;
}

.plan-created-tasks {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
	font-weight: 800;
}

.task-create-options {
	margin-bottom: 0;
}

.task-comments {
	display: grid;
	gap: 14px;
}

.comment-list {
	display: grid;
	gap: 10px;
}

.comment {
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface-soft);
}

.comment-meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	color: var(--muted);
	font-size: 13px;
}

.comment p {
	margin-bottom: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.task-log-panel {
	position: sticky;
	top: 86px;
}

.task-log-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--accent-strong);
	font-size: 12px;
	font-weight: 900;
}

.task-log-live span {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--accent);
}

.task-log-panel pre {
	max-height: 660px;
	overflow: auto;
}

/* Superstatic */

.new-upload-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: stretch;
}

#new-upload-input {
	display: none;
}

.new-upload-dropzone {
	display: grid;
	place-items: center;
	gap: 6px;
	min-height: 150px;
	border: 2px dashed var(--line);
	background: var(--surface-soft);
}

.new-upload-dropzone.drag-over,
.new-upload-dropzone:hover {
	border-color: var(--accent);
}

.new-upload-title {
	font-size: 22px;
	font-weight: 900;
}

.new-upload-help,
.new-upload-selected {
	color: var(--muted);
	font-size: 14px;
}

.filegrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
	margin-top: 18px;
}

.filebox {
	position: relative;
	display: grid;
	gap: 12px;
	padding: 12px;
	box-shadow: none;
}

.filebox:hover {
	border-color: var(--accent);
}

.filebox-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 8px;
}

.filebox p,
.file-preview,
.file-actions {
	position: relative;
	z-index: 2;
}

.filebox p {
	margin: 0;
	min-height: 42px;
	font-size: 13px;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.file-preview {
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: var(--surface-soft);
	overflow: hidden;
}

.file-preview img,
.file-preview video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.file-actions {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
}

.file-actions form {
	margin: 0;
}

.superstatic-detail {
	display: grid;
	gap: 18px;
}

.preview-panel {
	min-height: 56vh;
	display: grid;
	place-items: center;
	padding: 18px;
	background: var(--surface-soft);
}

.large-preview {
	width: 100%;
	height: 100%;
	max-height: 68vh;
	object-fit: contain;
}

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

.file-info > div {
	padding: 14px;
	box-shadow: none;
}

.file-info span {
	display: block;
	color: var(--muted);
	font-size: 13px;
	font-weight: 900;
}

.file-info p {
	margin: 6px 0 0;
	overflow-wrap: anywhere;
}

@media (max-width: 960px) {
	.hero-panel,
	.warning-panel,
	.section-grid,
	.section-grid.three,
	.task-detail-layout {
		grid-template-columns: 1fr;
	}

	.feature-list,
	.supertask-stat-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.task-log-panel {
		position: static;
	}
}

@media (max-width: 700px) {
	.app-header,
	.app-footer {
		align-items: flex-start;
		flex-direction: column;
	}

	.content {
		padding: 24px 14px 42px;
	}

	.hero-panel {
		min-height: 0;
		padding: 24px;
	}

	.hero-panel h1,
	.page-heading h1,
	.form-card h1 {
		font-size: 38px;
	}

	.status-grid,
	.feature-list,
	.supertask-stat-cards,
	.file-info,
	.new-upload-form {
		grid-template-columns: 1fr;
	}

	.task-board {
		grid-template-columns: 1fr;
	}

	.comment-meta {
		display: block;
	}
}