:root {
	--bg: #ffffff;
	--bg-sunken: #f6f7f9;
	--bg-elev: #ffffff;
	--bg-hover: #eceef1;
	--bg-active: #dfe6f5;
	--border: #d8dbe0;
	--border-soft: #e8eaee;
	--fg: #1b1d21;
	--fg-dim: #6b7280;
	--fg-faint: #9aa1ab;
	--accent: #2f6feb;
	--add: #1a7f37;
	--add-bg: #e6f5ea;
	--del: #cf222e;
	--del-bg: #fdecee;
	--warn-bg: #fff6e0;
	--warn-border: #e9c46a;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--row: 24px;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #14161a;
		--bg-sunken: #0e1014;
		--bg-elev: #1a1d22;
		--bg-hover: #23262c;
		--bg-active: #2a3550;
		--border: #2d3138;
		--border-soft: #23262c;
		--fg: #e6e8ec;
		--fg-dim: #9aa1ab;
		--fg-faint: #6b7280;
		--accent: #6fa0ff;
		--add: #4ac26b;
		--add-bg: #10261a;
		--del: #f85149;
		--del-bg: #2b1416;
		--warn-bg: #2b2314;
		--warn-border: #7a6220;
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }

html, body {
	height: 100%;
	margin: 0;
}

body {
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--fg);
	font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	overflow: hidden;
}

button, input, select {
	font: inherit;
	color: inherit;
}

button {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 3px 9px;
	cursor: pointer;
}

button:hover { background: var(--bg-hover); }
button.on { background: var(--bg-active); border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }

/* ---------- top bar ---------- */

#topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 12px;
	height: 44px;
	flex: 0 0 auto;
	border-bottom: 1px solid var(--border);
	background: var(--bg-elev);
}

#topbar .brand {
	font-weight: 600;
	letter-spacing: -.01em;
	white-space: nowrap;
}

#topbar .patch-name {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--fg-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 30ch;
}

#summary {
	color: var(--fg-dim);
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#topbar .spacer { flex: 1 1 auto; }

#preamble {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--fg-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 42ch;
}

#banner {
	flex: 0 0 auto;
	padding: 7px 12px;
	background: var(--warn-bg);
	border-bottom: 1px solid var(--warn-border);
	font-size: 12px;
	display: none;
}

#banner.show { display: block; }
#banner .close { float: right; margin-left: 12px; }

/* ---------- layout ---------- */

#main {
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
}

#sidebar {
	width: 340px;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-right: 1px solid var(--border);
	background: var(--bg-sunken);
}

#resizer {
	flex: 0 0 auto;
	width: 5px;
	margin-left: -3px;
	cursor: col-resize;
	background: transparent;
	z-index: 3;
}

#resizer:hover { background: var(--accent); opacity: .4; }

#sidebar-tools {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	border-bottom: 1px solid var(--border);
}

#sidebar-tools .line {
	display: flex;
	gap: 6px;
	align-items: center;
}

#filter {
	flex: 1 1 auto;
	min-width: 0;
	padding: 4px 8px;
	border: 1px solid var(--border);
	border-radius: 5px;
	background: var(--bg-elev);
}

#filter:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

#viewed-progress {
	font-size: 11px;
	color: var(--fg-dim);
	white-space: nowrap;
}

#filelist {
	flex: 1 1 auto;
	overflow: auto;
	padding: 4px 0 24px;
}

/* ---------- file rows ---------- */

.row {
	display: flex;
	align-items: center;
	gap: 6px;
	height: var(--row);
	padding-right: 8px;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}

.row:hover { background: var(--bg-hover); }
.row.cursor { box-shadow: inset 2px 0 0 var(--accent); }
.row.open { background: var(--bg-active); }
.row.viewed .name { opacity: .45; }

.row .name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: var(--mono);
	font-size: 12px;
}

.row .name .dir { color: var(--fg-faint); }
.row.dir > .name { color: var(--fg-dim); }

.row .caret {
	width: 12px;
	text-align: center;
	color: var(--fg-faint);
	font-size: 10px;
}

.row.collapsed .caret { transform: rotate(-90deg); }

.row input[type=checkbox] {
	margin: 0;
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	accent-color: var(--accent);
}

.badge {
	flex: 0 0 auto;
	width: 15px;
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	border-radius: 3px;
	font-family: var(--mono);
}

.b-added { color: var(--add); background: var(--add-bg); }
.b-deleted { color: var(--del); background: var(--del-bg); }
.b-modified { color: #9a6700; background: var(--warn-bg); }
.b-renamed, .b-copied { color: var(--accent); background: var(--bg-active); }

.counts {
	flex: 0 0 auto;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--fg-faint);
}

.counts .a { color: var(--add); }
.counts .d { color: var(--del); }
.counts .tag {
	border: 1px solid var(--border);
	border-radius: 3px;
	padding: 0 3px;
	color: var(--fg-dim);
}
.counts .tag.none { border-color: var(--del); color: var(--del); }

.empty-hint {
	padding: 16px 12px;
	color: var(--fg-dim);
	font-size: 12px;
}

/* ---------- content pane ---------- */

#content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

#file-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 12px;
	border-bottom: 1px solid var(--border);
	background: var(--bg-elev);
	min-height: 40px;
}

#file-header .path {
	font-family: var(--mono);
	font-size: 12.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#file-header .path .dir { color: var(--fg-faint); }
#file-header .meta { color: var(--fg-dim); font-size: 11.5px; white-space: nowrap; }
#file-header .spacer { flex: 1 1 auto; }
#file-header label { display: flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; }

#viewport {
	flex: 1 1 auto;
	min-height: 0;
	position: relative;
	overflow: auto;
}

#editor { position: absolute; inset: 0; }

.placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 100%;
	color: var(--fg-dim);
	text-align: center;
	padding: 24px;
}

.placeholder .big { font-size: 15px; color: var(--fg); }

/* Monaco gap bands */
.gap-line {
	background: var(--bg-sunken) !important;
	font-style: italic;
	opacity: .8;
}

.gap-glyph { background: linear-gradient(var(--border), var(--border)) center/100% 1px no-repeat; }

/* raw fallback */
.raw {
	margin: 0;
	padding: 8px 12px;
	font-family: var(--mono);
	font-size: 12px;
	white-space: pre;
	tab-size: 4;
}

.raw .ln { display: block; }
.raw .h { color: var(--fg-dim); }
.raw .a { color: var(--add); background: var(--add-bg); }
.raw .d { color: var(--del); background: var(--del-bg); }
.raw .m { color: var(--accent); background: var(--bg-sunken); }

/* ---------- binary view ---------- */

.binary {
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 100%;
}

.binary .tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.card {
	border: 1px solid var(--border);
	border-radius: 7px;
	padding: 12px 14px;
	background: var(--bg-elev);
	max-width: 70ch;
}

.card h3 { margin: 0 0 6px; font-size: 13px; }
.card p { margin: 0 0 8px; color: var(--fg-dim); }
.card dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; font-family: var(--mono); font-size: 12px; }
.card dt { color: var(--fg-faint); }
.card dd { margin: 0; }

.checker {
	background-color: var(--bg-sunken);
	background-image:
		linear-gradient(45deg, var(--border-soft) 25%, transparent 25%),
		linear-gradient(-45deg, var(--border-soft) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, var(--border-soft) 75%),
		linear-gradient(-45deg, transparent 75%, var(--border-soft) 75%);
	background-size: 16px 16px;
	background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.pair { display: flex; gap: 14px; flex-wrap: wrap; }

figure.shot {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 100%;
}

figure.shot .frame {
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
}

figure.shot img { max-width: min(46vw, 640px); max-height: 60vh; display: block; image-rendering: auto; }
figure.shot figcaption { font-size: 11.5px; color: var(--fg-dim); font-family: var(--mono); }

.overlay {
	position: relative;
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 10px;
	display: inline-flex;
	align-self: flex-start;
}

.overlay .stage { position: relative; }
.overlay .stage img { display: block; position: absolute; top: 0; left: 0; }
.overlay .veil { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.overlay.swipe .veil { width: var(--pos, 50%); }
.overlay.onion .veil { opacity: var(--opacity, .5); }

.slider { display: flex; align-items: center; gap: 8px; max-width: 420px; }
.slider input { flex: 1 1 auto; }

.hexdump {
	font-family: var(--mono);
	font-size: 11.5px;
	white-space: pre;
	overflow-x: auto;
	background: var(--bg-sunken);
	border-radius: 6px;
	padding: 8px 10px;
	color: var(--fg-dim);
}

/* ---------- drop zone ---------- */

#dropzone {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: pointer;
	background: var(--bg);
	z-index: 5;
}

#dropzone .big { font-size: 17px; }
#dropzone .sub { color: var(--fg-dim); }
#dropzone .keys {
	margin-top: 14px;
	display: grid;
	grid-template-columns: max-content max-content;
	gap: 2px 14px;
	font-size: 12px;
	color: var(--fg-dim);
}
#dropzone .keys b { font-family: var(--mono); font-weight: 500; color: var(--fg); }

#drag-overlay {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: none;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--accent) 18%, transparent);
	border: 3px dashed var(--accent);
	font-size: 17px;
	pointer-events: none;
}

#drag-overlay.show { display: flex; }

.editor-host, .alt-host { position: absolute; inset: 0; }
.alt-host { overflow: auto; }

.overlay-wrap { display: flex; flex-direction: column; gap: 10px; }
#binary { position: absolute; inset: 0; overflow: auto; }

#dropzone .keys-title {
	margin-top: 18px;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fg-faint);
}

#dropzone .keys { margin-top: 6px; }