: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;
}

.nav-dropdown {
	position: relative;
}

.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;
}

.nav-dropdown-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 1;
	display: none;
	min-width: 140px;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	box-shadow: var(--shadow);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
	display: grid;
}

.nav-dropdown-menu a {
	white-space: nowrap;
}

.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;
}

/* SuperGo */
.supergo-home,
.game-page {
	display: grid;
	gap: 24px;
}

.go-hero,
.lobby-grid,
.live-game {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
	gap: 24px;
}

.go-hero {
	padding: 42px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(240, 189, 88, 0.15), rgba(63, 184, 131, 0.12)), var(--surface);
	align-items: center;
}

.go-hero h1,
.game-heading h1 {
	margin: 0;
	font-size: clamp(42px, 7vw, 72px);
	line-height: 1;
}

.game-stats,
.rule-grid {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.game-stats span {
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--muted);
}

.game-settings {
	display: grid;
	gap: 14px;
	padding: 28px;
}

.game-settings h2,
.lobby-share h2 {
	margin: 0;
}

.game-settings label {
	display: grid;
	gap: 6px;
	font-weight: 700;
}

.game-settings input,
.game-settings select,
.share-url {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: var(--bg);
	color: var(--ink);
	font: inherit;
}

.go-rules { padding: 28px; }
.go-rules h2 { margin-top: 0; }
.rule-grid p { flex: 1 1 220px; color: var(--muted); line-height: 1.5; }
.rule-grid strong { color: var(--ink); }
.game-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.lobby-share { padding: 32px; }
.share-url { margin: 10px 0 18px; font-family: var(--mono); }
.cancel-lobby { align-self: end; }
.button.danger { background: var(--red); color: #250a08; }

.live-game { grid-template-columns: minmax(250px, 0.55fr) minmax(0, 1.45fr); align-items: start; }
.game-sidebar { display: grid; gap: 14px; }
.game-sidebar .panel { padding: 20px; }
.game-sidebar h2 { margin: 0 0 8px; font-size: 22px; }
.player-card { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.player-card.active { color: var(--accent-strong); }
.player-card span:not(.stone) { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.player-card time { font-family: var(--mono); font-size: 18px; font-weight: 800; }
.stone, .board-stone { display: block; border-radius: 50%; }
.stone { width: 18px; height: 18px; }
.stone.black, .board-stone.black { background: radial-gradient(circle at 35% 30%, #6a6a6a, #090909 60%); border: 1px solid #000; }
.stone.white, .board-stone.white { background: radial-gradient(circle at 35% 30%, #fff, #d6d4cb 65%); border: 1px solid #aaa; }
.board-panel { display: grid; justify-items: center; gap: 10px; }
.go-board { --board-size: 9; --board-inset: clamp(16px, 3.8vw, 42px); position: relative; box-sizing: border-box; width: min(76vw, 720px); aspect-ratio: 1 / 1; border: 14px solid #8c622b; border-radius: 8px; background-color: #d7a751; box-shadow: inset 0 0 32px rgba(71, 36, 8, 0.48), var(--shadow); }
.board-surface { position: absolute; inset: var(--board-inset); background-image: linear-gradient(to right, rgba(48, 29, 10, 0.92) 0, rgba(48, 29, 10, 0.92) 1px, transparent 1px), linear-gradient(to bottom, rgba(48, 29, 10, 0.92) 0, rgba(48, 29, 10, 0.92) 1px, transparent 1px); background-size: calc(100% / (var(--board-size) - 1)) 100%, 100% calc(100% / (var(--board-size) - 1)); box-shadow: inset -1px 0 rgba(48, 29, 10, 0.92), inset 0 -1px rgba(48, 29, 10, 0.92); }
.board-point { position: absolute; width: calc(100% / (var(--board-size) - 1)); height: calc(100% / (var(--board-size) - 1)); left: var(--point-x); top: var(--point-y); margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; min-width: 0; transform: translate(-50%, -50%); }
.board-point:not(:disabled):hover { background: rgba(255, 255, 255, 0.16); }
.board-point:disabled { cursor: default; }
.board-stone { position: absolute; width: 92%; height: 92%; left: 4%; top: 4%; z-index: 2; box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.45); }
.game-message { min-height: 22px; margin: 0; color: var(--red); }

@media (max-width: 820px) {
	.go-hero, .lobby-grid, .live-game { grid-template-columns: 1fr; }
	.go-hero { padding: 28px; }
	.game-heading { align-items: flex-start; flex-direction: column; }
	.go-board { width: min(100%, 680px); }
}

.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;
	}
}