:root {
	color-scheme: light;
	--bg: #f6f6f4;
	--surface: #fcfcfb;
	--surface-2: #f0f0ed;
	--fg: #0b0b0b;
	--fg-2: #52514e;
	--muted: #7a7974;
	--line: #e2e1dc;
	--line-strong: #cfcec8;
	--accent: #2a78d6;
	--accent-fg: #ffffff;
	--accent-soft: #e5effb;
	--series: #2a78d6;
	--grid: #ebeae6;
	--good: #1f7a3e;
	--good-soft: #e3f3e8;
	--warning: #8a5a00;
	--warning-soft: #fbf0d9;
	--danger: #b42318;
	--danger-soft: #fbe6e4;
	--shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.04);
	--radius: 10px;
	--mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--bg: #121211;
		--surface: #1a1a19;
		--surface-2: #232321;
		--fg: #f0efec;
		--fg-2: #c3c2b7;
		--muted: #8f8e86;
		--line: #2e2e2b;
		--line-strong: #3d3d39;
		--accent: #3987e5;
		--accent-fg: #ffffff;
		--accent-soft: #1b2b40;
		--series: #3987e5;
		--grid: #2a2a27;
		--good: #5cc27f;
		--good-soft: #17301f;
		--warning: #e3b14f;
		--warning-soft: #33280f;
		--danger: #f07a6f;
		--danger-soft: #3a1a17;
		--shadow: none;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #121211;
	--surface: #1a1a19;
	--surface-2: #232321;
	--fg: #f0efec;
	--fg-2: #c3c2b7;
	--muted: #8f8e86;
	--line: #2e2e2b;
	--line-strong: #3d3d39;
	--accent: #3987e5;
	--accent-fg: #ffffff;
	--accent-soft: #1b2b40;
	--series: #3987e5;
	--grid: #2a2a27;
	--good: #5cc27f;
	--good-soft: #17301f;
	--warning: #e3b14f;
	--warning-soft: #33280f;
	--danger: #f07a6f;
	--danger-soft: #3a1a17;
	--shadow: none;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font:
		14px/1.5 ui-sans-serif,
		system-ui,
		-apple-system,
		"Segoe UI",
		sans-serif;
	-webkit-font-smoothing: antialiased;
}

body[data-busy="true"] {
	cursor: progress;
}

h2,
h3 {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
}

h3 {
	margin: 1.5rem 0 0.6rem;
	color: var(--fg-2);
}

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

a:hover {
	text-decoration: underline;
}

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

.mono {
	font-family: var(--mono);
	font-size: 12px;
}

.count {
	margin-left: 0.25rem;
	color: var(--muted);
	font-weight: 500;
}

input,
select {
	min-width: 0;
	height: 2.125rem;
	padding: 0 0.65rem;
	border: 1px solid var(--line-strong);
	border-radius: 7px;
	background: var(--surface);
	color: var(--fg);
	font: inherit;
	transition:
		border-color 120ms ease,
		box-shadow 120ms ease;
}

input:focus,
select:focus {
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--accent-soft);
}

input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	padding: 0;
	accent-color: var(--accent);
}

button,
.button {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	height: 2.125rem;
	padding: 0 0.9rem;
	border: 1px solid var(--line-strong);
	border-radius: 7px;
	background: var(--surface);
	color: var(--fg);
	font: inherit;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color 120ms ease,
		border-color 120ms ease,
		transform 80ms ease;
}

button:hover:not(:disabled),
.button:hover {
	background: var(--surface-2);
	text-decoration: none;
}

button:active:not(:disabled) {
	transform: translateY(1px);
}

button:disabled {
	cursor: default;
	opacity: 0.5;
}

button.primary {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--accent-fg);
}

button.primary:hover:not(:disabled) {
	background: var(--accent);
	filter: brightness(1.08);
}

button.ghost,
.button.ghost {
	border-color: transparent;
	background: transparent;
	color: var(--fg-2);
}

button.ghost:hover:not(:disabled),
.button.ghost:hover {
	background: var(--surface-2);
	color: var(--fg);
}

button.danger {
	border-color: transparent;
	background: var(--danger-soft);
	color: var(--danger);
}

button.small,
.button.small {
	height: 1.75rem;
	padding: 0 0.6rem;
	font-size: 0.8rem;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	padding: 0.75rem 1.5rem;
	border-bottom: 1px solid var(--line);
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(10px);
}

.brand {
	font-weight: 600;
}

.tabs {
	display: flex;
	gap: 0.25rem;
	padding: 0.2rem;
	border-radius: 9px;
	background: var(--surface-2);
}

.tabs button {
	height: 1.85rem;
	border: 0;
	background: transparent;
	color: var(--fg-2);
}

.tabs button[aria-selected="true"] {
	background: var(--surface);
	color: var(--fg);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.session {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: auto;
}

.gate {
	display: grid;
	min-height: 100vh;
	padding: 1.5rem 1rem;
	place-items: center;
}

.gate-card {
	display: grid;
	gap: 0.9rem;
	width: min(400px, 100%);
	padding: 1.75rem;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface);
	box-shadow: var(--shadow);
	animation: rise 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gate-brand h1 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

.gate-card > p {
	margin: -0.4rem 0 0.2rem;
	font-size: 0.85rem;
}

.gate-card .field input,
.gate-card .field select,
.gate-custom input {
	width: 100%;
}

.gate-custom summary {
	color: var(--fg-2);
	font-size: 0.8rem;
	cursor: pointer;
}

.gate-custom input {
	margin-top: 0.4rem;
}

.gate-card button[type="submit"] {
	justify-content: center;
	margin-top: 0.2rem;
}

.gate-error {
	margin: 0;
	padding: 0.5rem 0.7rem;
	border-radius: 7px;
	background: var(--danger-soft);
	color: var(--danger);
	font-size: 0.85rem;
}

@keyframes rise {
	from {
		transform: translateY(6px);
		opacity: 0;
	}
}

main {
	max-width: 1440px;
	margin: 0 auto;
	padding: 1.5rem 1.5rem 5rem;
}

.layout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: start;
	gap: 1.25rem;
}

.stack {
	display: grid;
	gap: 1.25rem;
}

.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.25rem;
}

.card {
	min-width: 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.pill,
.badge {
	display: inline-flex;
	align-items: center;
	height: 1.4rem;
	padding: 0 0.55rem;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--fg-2);
	font-size: 0.75rem;
	font-weight: 500;
	white-space: nowrap;
}

.badge {
	height: 1.2rem;
	padding: 0 0.45rem;
	font-size: 0.7rem;
}

.pill.good {
	background: var(--good-soft);
	color: var(--good);
}

.pill.warning {
	background: var(--warning-soft);
	color: var(--warning);
}

.badge.accent {
	background: var(--accent-soft);
	color: var(--accent);
}

.badge.danger {
	background: var(--danger-soft);
	color: var(--danger);
}

.rows {
	margin: 0 -1.1rem -1rem;
	padding: 0;
	list-style: none;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 0.65rem 1.1rem;
	border-top: 1px solid var(--line);
}

.row.selected {
	background: var(--accent-soft);
}

.row.yanked .version {
	color: var(--muted);
	text-decoration: line-through;
}

.row-main {
	flex: 1;
	min-width: 12rem;
}

.row-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.version {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.row-meta,
.cell-meta {
	color: var(--muted);
	font-size: 0.8rem;
}

.row-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

.chip {
	display: inline-flex;
	align-items: center;
	height: 1.6rem;
	padding: 0 0.55rem;
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	background: var(--surface);
	color: var(--fg-2);
	font-family: var(--mono);
	font-size: 0.75rem;
	text-decoration: none;
	cursor: pointer;
}

.chip.active,
.chip:hover {
	border-color: var(--accent);
	color: var(--accent);
	text-decoration: none;
}

.empty {
	padding: 1rem 1.1rem;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.85rem;
}

td.empty {
	text-align: center;
}

.editor {
	position: sticky;
	top: 4.5rem;
}

.drop {
	position: relative;
	display: grid;
	place-items: center;
	gap: 0.2rem;
	padding: 1.1rem;
	border: 1.5px dashed var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface-2);
	color: var(--fg-2);
	text-align: center;
	cursor: pointer;
	transition:
		border-color 120ms ease,
		background-color 120ms ease;
}

.drop:hover,
.drop.over {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.drop input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.drop small {
	color: var(--muted);
	font-size: 0.75rem;
}

fieldset {
	margin: 1rem 0 0;
	padding: 0;
	border: 0;
}

legend {
	margin-bottom: 0.4rem;
	padding: 0;
	color: var(--muted);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem 0.75rem;
}

.field {
	display: grid;
	gap: 0.25rem;
	font-size: 0.8rem;
	color: var(--fg-2);
}

div.field {
	margin-top: 0.75rem;
}

.field.wide {
	grid-column: 1 / -1;
}

.check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	grid-column: 1 / -1;
	font-size: 0.85rem;
	color: var(--fg-2);
}

progress {
	width: 100%;
	height: 0.4rem;
	margin-top: 1rem;
	accent-color: var(--accent);
}

.editor-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

.preview {
	margin-top: 1rem;
}

.preview summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--fg-2);
	font-size: 0.8rem;
	font-weight: 500;
	cursor: pointer;
}

pre {
	max-height: 50vh;
	margin: 0.6rem 0 0;
	padding: 0.75rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface-2);
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.55;
	overflow: auto;
}

.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

#instanceSearch {
	width: 15rem;
}

.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
	gap: 1rem;
}

.tile {
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.tile-label {
	color: var(--fg-2);
	font-size: 0.8rem;
}

.tile-figure {
	margin-top: 0.2rem;
	font-size: 1.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.tile-detail {
	margin-top: 0.2rem;
	color: var(--muted);
	font-size: 0.75rem;
}

.analytics-top {
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.chart {
	position: relative;
	min-height: 180px;
}

.chart svg,
.spark-chart {
	display: block;
	max-width: 100%;
	overflow: visible;
}

.chart .gridline {
	stroke: var(--grid);
	stroke-width: 1;
}

.chart .baseline {
	stroke: var(--line-strong);
	stroke-width: 1;
}

.chart .axis {
	fill: var(--muted);
	font-size: 10px;
	font-variant-numeric: tabular-nums;
}

.chart .column {
	fill: var(--series);
}

.hit {
	fill: transparent;
	cursor: crosshair;
}

.chart .hit:hover {
	fill: color-mix(in srgb, var(--series) 8%, transparent);
}

.tooltip {
	position: absolute;
	top: 0;
	z-index: 2;
	padding: 0.3rem 0.55rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--surface);
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
	color: var(--fg);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	pointer-events: none;
}

.facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: 0.75rem 1rem;
	margin: 0 0 1rem;
}

.facts .wide {
	grid-column: span 2;
}

.facts dt {
	color: var(--muted);
	font-size: 0.75rem;
}

.facts dd {
	margin: 0.1rem 0 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.distributions {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1.25rem;
}

.distribution h3 {
	margin: 0 0 0.6rem;
	color: var(--fg);
}

.bars {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bars li {
	display: grid;
	grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.8rem;
}

.bar-label {
	overflow: hidden;
	color: var(--fg-2);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bar-track {
	height: 0.55rem;
	border-radius: 0 4px 4px 0;
	background: var(--surface-2);
}

.bar-fill {
	display: block;
	height: 100%;
	min-width: 2px;
	border-radius: 0 4px 4px 0;
	background: var(--series);
}

.bar-value {
	color: var(--fg-2);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.table-wrap {
	margin: 0 -1.1rem;
	overflow-x: auto;
}

.table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.table th {
	padding: 0.5rem 1.1rem;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.table td {
	padding: 0.6rem 1.1rem;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

.table.compact th,
.table.compact td {
	padding: 0.4rem 0.75rem;
	font-size: 0.8rem;
}

.card > .table.compact {
	margin-top: 0.25rem;
}

.table .num {
	text-align: right;
}

.table tr.clickable {
	cursor: pointer;
}

.table tr.clickable:hover,
.table tr.clickable:focus-visible {
	background: var(--surface-2);
	outline: none;
}

.cell-title {
	font-weight: 600;
}

.dot {
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	margin-right: 0.4rem;
	border-radius: 50%;
	vertical-align: 0.1em;
}

.dot.live {
	background: var(--good);
}

.dot.stale {
	background: var(--line-strong);
}

.pager {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.4rem;
	margin-top: 0.75rem;
	font-size: 0.8rem;
}

.pager span {
	margin-right: auto;
}

.empty-state {
	padding: 3rem 1.5rem;
	text-align: center;
}

.empty-state p {
	margin: 0.4rem 0 0;
}

.drawer {
	width: min(960px, 100vw);
	max-width: 100vw;
	height: 100vh;
	max-height: 100vh;
	margin: 0 0 0 auto;
	padding: 1.25rem 1.5rem 2rem;
	border: 0;
	border-left: 1px solid var(--line);
	background: var(--surface);
	color: var(--fg);
	overflow-y: auto;
}

.drawer[open] {
	animation: slide-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.drawer::backdrop {
	background: rgb(0 0 0 / 0.35);
}

@keyframes slide-in {
	from {
		transform: translateX(24px);
		opacity: 0;
	}
}

.drawer .table-wrap {
	margin: 0;
}

.drawer-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.drawer-head h2 {
	font-size: 1.15rem;
}

.drawer-head p {
	margin: 0.2rem 0 0;
}

.sparklines {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 0.75rem;
}

.spark {
	position: relative;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--line);
	border-radius: 8px;
}

.spark-label {
	color: var(--fg-2);
	font-size: 0.75rem;
}

.spark-figure {
	font-size: 1.2rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.spark-empty {
	font-size: 0.75rem;
}

.spark-chart {
	width: 100%;
	height: 48px;
	margin-top: 0.3rem;
}

.spark-chart .line {
	fill: none;
	stroke: var(--series);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.spark-chart .marker {
	fill: var(--series);
	stroke: var(--surface);
	stroke-width: 2;
}

.spark .tooltip {
	top: 0.5rem;
	right: 0.6rem;
}

.logs {
	display: grid;
	grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
	gap: 0.75rem;
}

.log-list {
	max-height: 22rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	list-style: none;
	overflow-y: auto;
}

.log-list .empty {
	border: 0;
}

.log-entry {
	display: grid;
	width: 100%;
	height: auto;
	padding: 0.5rem 0.7rem;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	font-size: 0.8rem;
	text-align: left;
	white-space: normal;
}

.log-pane {
	position: relative;
	min-width: 0;
}

.log-pane .button {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	background: var(--surface);
}

.log-viewer {
	height: 22rem;
	max-height: none;
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.activity {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 20;
}

.activity button {
	border-color: var(--line);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.log-drawer {
	position: fixed;
	right: 1rem;
	bottom: 3.5rem;
	z-index: 20;
	width: min(560px, calc(100vw - 2rem));
	max-height: 40vh;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: 0 8px 32px rgb(0 0 0 / 0.16);
	overflow: hidden;
}

#log {
	max-height: 40vh;
	padding: 0.5rem 0;
	font-family: var(--mono);
	font-size: 12px;
	overflow-y: auto;
}

.log-line {
	padding: 0.15rem 0.9rem;
	color: var(--fg-2);
	white-space: pre-wrap;
}

.log-line time {
	margin-right: 0.6rem;
	color: var(--muted);
}

.log-line.good {
	color: var(--good);
}

.log-line.warning {
	color: var(--warning);
}

.log-line.error {
	color: var(--danger);
}

.toast {
	position: fixed;
	bottom: 1rem;
	left: 50%;
	z-index: 30;
	max-width: calc(100vw - 2rem);
	padding: 0.55rem 0.9rem;
	border-radius: 8px;
	background: var(--fg);
	color: var(--bg);
	font-size: 0.85rem;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 8px);
	transition:
		opacity 160ms ease,
		transform 160ms ease;
}

.toast.visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.toast.error {
	background: var(--danger);
	color: #ffffff;
}

textarea {
	min-width: 0;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--line-strong);
	border-radius: 7px;
	background: var(--surface);
	color: var(--fg);
	font: inherit;
	resize: vertical;
	transition:
		border-color 120ms ease,
		box-shadow 120ms ease;
}

textarea:focus {
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.warning-text {
	color: var(--warning);
}

.news-layout {
	display: grid;
	grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
	align-items: start;
	gap: 1.25rem;
}

.news-list {
	position: sticky;
	top: 4.5rem;
}

.news-row {
	padding: 0;
}

.news-pick {
	display: grid;
	gap: 0.15rem;
	width: 100%;
	height: auto;
	padding: 0.65rem 1.1rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: left;
	white-space: normal;
}

.news-pick:active:not(:disabled) {
	transform: none;
}

.news-row.selected .news-pick {
	background: var(--accent-soft);
}

.news-row-title {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.news-feed-note a {
	margin-left: 0.5rem;
}

.news-feed-note {
	margin: 1rem -1.1rem -1rem;
	padding: 0.75rem 1.1rem;
	border-top: 1px solid var(--line);
	font-size: 0.8rem;
}

.news-editor {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.85rem;
}

.news-editor.fullscreen {
	position: fixed;
	inset: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	border-radius: 0;
	overflow: auto;
}

body.news-fullscreen {
	overflow: hidden;
}

.news-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.news-title {
	flex: 1;
	height: 2.75rem;
	padding: 0 0.1rem;
	border-color: transparent;
	background: transparent;
	font-size: 1.35rem;
	font-weight: 600;
}

.news-title:focus {
	border-color: transparent;
	box-shadow: none;
}

.news-restore {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	background: var(--warning-soft);
	color: var(--warning);
	font-size: 0.85rem;
}

.news-restore span {
	flex: 1;
}

.news-meta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 13rem;
	align-items: end;
	gap: 0.6rem 0.75rem;
}

.news-summary {
	grid-row: span 2;
}

.news-summary > span {
	display: flex;
	gap: 0.4rem;
}

.news-counter {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

.news-summary textarea {
	height: 100%;
	min-height: 4.6rem;
}

.news-pin {
	grid-column: auto;
	height: 2.125rem;
}

.news-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.35rem;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--surface-2);
}

.tools {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.tool-group {
	display: flex;
	gap: 0.1rem;
	padding-right: 0.25rem;
	border-right: 1px solid var(--line-strong);
}

.tool-group:last-child {
	border-right: 0;
}

button.tool {
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	border-color: transparent;
	background: transparent;
	color: var(--fg-2);
}

button.tool:hover:not(:disabled),
button.tool[aria-pressed="true"] {
	background: var(--surface);
	color: var(--fg);
}

.tool svg path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.news-editor[data-mode="preview"] .tools {
	visibility: hidden;
}

.segmented {
	display: flex;
	gap: 0.15rem;
	padding: 0.15rem;
	border-radius: 7px;
	background: var(--line);
}

.segmented button {
	height: 1.6rem;
	border: 0;
	background: transparent;
	color: var(--fg-2);
}

.segmented button[aria-pressed="true"] {
	background: var(--surface);
	color: var(--fg);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.news-panes {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.75rem;
	height: max(22rem, calc(100vh - 29rem));
	min-height: 0;
}

.news-editor.fullscreen .news-panes {
	flex: 1;
	height: auto;
}

.news-editor[data-mode="write"] .news-panes,
.news-editor[data-mode="preview"] .news-panes {
	grid-template-columns: minmax(0, 1fr);
}

.news-editor[data-mode="write"] .news-preview,
.news-editor[data-mode="preview"] .news-writer {
	display: none;
}

.news-writer {
	display: flex;
	min-height: 0;
	border-radius: 8px;
	transition: box-shadow 120ms ease;
}

.news-writer.over {
	box-shadow: 0 0 0 3px var(--accent);
}

.news-body {
	flex: 1;
	padding: 0.85rem 1rem;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.65;
	tab-size: 2;
	resize: none;
}

.news-preview {
	min-height: 0;
	padding: 0.85rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--bg);
	overflow: auto;
}

.news-editor[data-mode="preview"] .news-preview {
	width: 100%;
	max-width: 46rem;
	margin: 0 auto;
}

.news-status {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	color: var(--muted);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.news-status :last-child {
	margin-left: auto;
}

.news-editor .editor-actions {
	margin-top: 0;
}

.news-delete {
	margin-left: auto;
}

.markdown {
	color: var(--fg);
	font-size: 0.925rem;
	line-height: 1.65;
	overflow-wrap: break-word;
}

.markdown > :first-child {
	margin-top: 0;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
	margin: 1.4em 0 0.5em;
	color: var(--fg);
	font-weight: 600;
	line-height: 1.3;
}

.markdown h1 {
	font-size: 1.5rem;
}

.markdown h2 {
	font-size: 1.2rem;
}

.markdown h3 {
	font-size: 1.05rem;
}

.markdown h4 {
	font-size: 0.95rem;
}

.markdown .news-preview-title {
	margin-bottom: 0.75em;
}

.markdown p,
.markdown ul,
.markdown ol,
.markdown blockquote,
.markdown pre,
.markdown table {
	margin: 0 0 0.9em;
}

.markdown ul,
.markdown ol {
	padding-left: 1.4rem;
}

.markdown li + li {
	margin-top: 0.2em;
}

.markdown li:has(> input[type="checkbox"]) {
	list-style: none;
	margin-left: -1.3rem;
}

.markdown input[type="checkbox"] {
	margin: 0 0.4rem 0 0;
	vertical-align: -0.15em;
}

.markdown blockquote {
	padding: 0.1rem 0 0.1rem 0.9rem;
	border-left: 3px solid var(--line-strong);
	color: var(--fg-2);
}

.markdown code {
	padding: 0.1em 0.35em;
	border-radius: 4px;
	background: var(--surface-2);
	font-family: var(--mono);
	font-size: 0.85em;
}

.markdown pre {
	max-height: none;
}

.markdown pre code {
	padding: 0;
	background: transparent;
	font-size: inherit;
}

.markdown img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.markdown hr {
	margin: 1.5em 0;
	border: 0;
	border-top: 1px solid var(--line);
}

.markdown table {
	display: block;
	max-width: 100%;
	border-collapse: collapse;
	overflow-x: auto;
}

.markdown th,
.markdown td {
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--line);
	text-align: left;
}

.markdown th {
	background: var(--surface-2);
	font-weight: 600;
}

[hidden] {
	display: none !important;
}

@media (max-width: 1000px) {
	.layout,
	.analytics-top,
	.split {
		grid-template-columns: minmax(0, 1fr);
	}

	.editor,
	.news-list {
		position: static;
	}

	.news-layout,
	.news-panes {
		grid-template-columns: minmax(0, 1fr);
	}

	.news-editor[data-mode="split"] .news-preview {
		display: none;
	}
}

@media (max-width: 640px) {
	.topbar,
	main {
		padding-right: 1rem;
		padding-left: 1rem;
	}

	.grid,
	.logs {
		grid-template-columns: minmax(0, 1fr);
	}

	#instanceSearch {
		width: 100%;
	}

	.news-meta {
		grid-template-columns: minmax(0, 1fr);
	}

	.news-summary {
		grid-row: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}