:root {
	--bg: #0f172a;
	--panel: #0b1324;
	--mut: #94a3b8;
	--fg: #e5e7eb;
	--line: #1f2937;
	--accent: #22d3ee
}

* {
	box-sizing: border-box
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 14px/1.45 system-ui, Segoe UI, Roboto, Ubuntu, Arial
}

header {
	position: sticky;
	top: 0;
	z-index: 5;
	background: #0b1222;
	border-bottom: 1px solid #0a0f1c
}

.logo-top {
	display: flex;
	justify-content: center;
	align-items: center;
}

.logo-top img.logo-blend {
	height: 200px;
	filter: invert(1) brightness(1.1) contrast(1.2);
	mix-blend-mode: screen;
}

.wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px
}

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

input[type="search"], select {
	padding: 10px 12px;
	border: 1px solid var(--line);
	background: var(--panel);
	color: var(--fg);
	border-radius: 10px
}

input[type="search"] {
	flex: 1;
	min-width: 240px
}

.btn {
	appearance: none;
	border: 1px solid var(--line);
	background: linear-gradient(180deg, #0f1b34, #0b1324);
	color: var(--fg);
	padding: 10px 14px;
	border-radius: 10px;
	cursor: pointer;
	transition: .15s transform ease, .15s box-shadow ease;
	box-shadow: 0 0 0 rgba(34, 211, 238, 0);
}

.btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(34, 211, 238, .15)
}

.btn:active {
	transform: translateY(0)
}

.btn[disabled] {
	opacity: .6;
	cursor: not-allowed
}

.btn--accent {
	border-color: #0c2a34;
	box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .25)
}

.count {
	color: var(--mut);
	margin-top: 6px
}

.results {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px
}

.card {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 12px
}

.hdr {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: center
}

.file {
	font-weight: 600
}

.mut {
	color: var(--mut)
}

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

.snippet {
	white-space: pre-wrap;
	margin-top: 6px
}

mark {
	background: rgba(34, 211, 238, .28);
	outline: 1px solid rgba(34, 211, 238, .45);
	border-radius: 3px;
	padding: 0 2px
}

.chips {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 4px
}

.chip {
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 2px 8px;
	background: #071024;
	color: #9fb3cf;
	font-size: 12px
}

.empty {
	color: #94a3b8;
	text-align: center;
	padding: 28px
}

footer {
	color: #8ea0bf;
	text-align: center;
	padding: 24px
}