* { box-sizing: border-box }
html { color-scheme: dark; min-height: 100vh }
body {
	margin: 0;
	font-family: "IBM Plex Sans", ui-sans-system, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	background: #0f0f10;
	color: #e4e4e7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility
}
a {
	color: #e4e4e7;
	text-underline-offset: 2.5px;
	text-decoration-color: #52525b;
	text-decoration-thickness: 1px
}
a:hover {
	color: #ffffff;
	text-decoration-color: #a1a1aa
}
.wip-banner {
	background: #18181b;
	color: #a1a1aa;
	text-align: center;
	padding: 9px 14px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .01em;
	border-bottom: 1px solid #27272a
}
.wrap {
	max-width: 1024px;
	margin: 28px auto;
	padding: 0 16px
}
.card {
	background: #1a1a1e;
	border: 1px solid #27272a;
	border-radius: 10px;
	padding: 20px 22px;
	margin-bottom: 14px
}
.card h1 {
	margin: 0 0 8px;
	color: #fafafa;
	font-size: 20px;
	font-weight: 650;
	letter-spacing: -.022em;
	line-height: 1.25
}
.muted {
	color: #9f9fa9;
	font-size: 13px;
	line-height: 1.55
}
.muted b {
	color: #d4d4d8;
	font-weight: 600
}
.row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center
}
input[type=search],
select {
	flex: 1 1 260px;
	background: #101012;
	border: 1px solid #34343a;
	color: #fafafa;
	padding: 8px 11px;
	border-radius: 8px;
	outline: none;
	font-size: 14px
}
input[type=search]::placeholder { color: #71717a }
input[type=search]:focus,
select:focus {
	border-color: #52525b;
	box-shadow: 0 0 0 3px rgba(82, 82, 91, .22)
}
.btn {
	background: #232326;
	border: 1px solid #34343a;
	color: #d4d4d8;
	padding: 7px 12px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	line-height: 1
}
.btn:hover {
	background: #2a2a2e;
	color: #fafafa;
	border-color: #3f3f46
}
.btn:disabled {
	opacity: .45;
	cursor: default
}
.stat {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: #9f9fa9;
	margin-top: 10px
}
.stat span { white-space: nowrap }
.stat strong {
	color: #fafafa;
	font-weight: 600
}
table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #161618;
	margin-top: 14px;
	font-size: 13px;
	border: 1px solid #27272a;
	border-radius: 10px;
	overflow: hidden
}
th,
td {
	padding: 9px 10px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #27272a
}
th {
	background: #1e1e21;
	color: #a1a1aa;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	position: sticky;
	top: 0;
	z-index: 1;
	white-space: nowrap
}
td {
	color: #d4d4d8;
	border-color: #232326
}
tr:last-child td { border-bottom: none }
tr:nth-child(even) td { background: #1b1b1e }

.depot {
	font-weight: 620;
	color: #fafafa;
	font-variant-numeric: tabular-nums
}
.name { color: #e4e4e7 }
.small {
	font-size: 12px;
	color: #71717a
}
.versions {
	max-height: 420px;
	overflow: auto;
	border: 1px solid #27272a;
	background: #101012;
	border-radius: 8px;
	margin-top: 8px;
	display: none
}
.versions.open { display: block }
.vhead {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-bottom: 1px solid #27272a;
	background: #1a1a1e;
	position: sticky;
	top: 0;
	z-index: 1
}
.vhead .left {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center
}
.vrow {
	display: grid;
	grid-template-columns: 54px 90px 96px 1fr 118px 54px;
	gap: 8px;
	padding: 6px 10px;
	border-bottom: 1px solid #1f1f23;
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px;
	align-items: center
}
.vrow:last-child { border: none }
.vhash {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #a1a1aa;
	cursor: pointer
}
.vhash:hover { color: #fafafa }
.copy-hash {
	font-size: 11px;
	padding: 3px 7px;
	border-radius: 6px;
	border: 1px solid #34343a;
	background: #1a1a1e;
	color: #a1a1aa;
	cursor: pointer;
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	line-height: 1
}
.copy-hash:hover {
	background: #27272a;
	color: #fafafa;
	border-color: #3f3f46
}
.vfile {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #d4d4d8
}
.pill {
	font-size: 11px;
	padding: 2px 7px;
	border-radius: 999px;
	background: #27272a;
	color: #d4d4d8;
	border: 1px solid #34343a;
	white-space: nowrap
}
.pill-btn {
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #1a1a1e;
	color: #a1a1aa;
	border: 1px solid #34343a;
	cursor: pointer;
	line-height: 1
}
.pill-btn.active {
	background: #fafafa;
	color: #18181b;
	border-color: #fafafa
}
.kbd {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	background: #232326;
	border: 1px solid #34343a;
	padding: 1px 5px;
	border-radius: 5px;
	font-size: 11.5px;
	color: #d4d4d8
}
.footer {
	font-size: 11.5px;
	color: #71717a;
	margin-top: 12px;
	line-height: 1.6
}
.pager {
	display: flex;
	gap: 6px;
	align-items: center;
	font-size: 12px
}
.table-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-top: 12px;
	padding: 10px;
	background: #1a1a1e;
	border: 1px solid #27272a;
	border-radius: 8px
}
.table-pager-num.active {
	background: #fafafa;
	color: #18181b;
	border-color: #fafafa
}
.table-pager-ellipsis {
	padding: 2px 4px;
	color: #71717a
}
@media(max-width:760px) {
	.vrow {
		grid-template-columns: 1fr;
		gap: 2px
	}
	.card { padding: 16px 14px }
	.wrap { padding: 0 12px; margin: 16px auto }
}