/* Shared Lolarchiver nav: top bar + left sidebar.
   Single source of truth, referenced absolutely from every subdomain:
     https://lolarchiver.com/css/redesign.css?v=...
   Loaded AFTER the page's existing stylesheets so it overrides them.
   Only the nav is styled here; page content is never touched. */

:root {
	--ink: #1c1c1c;
	--ink-soft: #545454;
	--ink-faint: #7f8896;
	--deep: #1c2f59;
	--deep2: #5e728d;
	--accent-deep: #14539a;
	--line: #dcdfe4;
	--line-strong: #b9bec7;
	--r-sm: 3px;
	--r-md: 5px;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* ---------------- Top bar ---------------- */
.lz-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 8px 22px;
	border-bottom: 1px solid var(--line);
	/* opaque on purpose: a translucent bar picked up whatever each page had behind it,
	   which made it look grey on some pages (e.g. database_lookup) */
	background: #f6f7f9;
	position: sticky;
	top: 0;
	z-index: 30;
	font-family: var(--sans);
}
.lz-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.lz-brand:hover, .lz-brand:focus, .lz-brand:hover b, .lz-brand:hover .lz-tag { text-decoration: none !important; }
.lz-brand img { width: 26px; height: 26px; object-fit: contain; }
.lz-brand b {
	font-family: var(--sans);
	font-weight: 700;
	font-size: 1.08rem;
	text-transform: uppercase;
	letter-spacing: .045em;
	background: linear-gradient(95deg, #161616 0%, #223a66 50%, #3a63a2 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.lz-brand .lz-tag {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-faint);
	border: 1px solid var(--line);
	padding: 1px 6px;
	border-radius: var(--r-sm);
}
.lz-topnav { display: flex; gap: 4px; align-items: center; }
.lz-topnav a {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ink-soft);
	text-decoration: none;
	padding: 6px 11px;
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: background-color .14s ease, color .14s ease;
}
.lz-topnav a:hover { background: #e9eff7; color: var(--deep); text-decoration: none; }
.lz-topnav a.acct { border: 1px solid var(--line-strong); color: var(--deep); }
.lz-topnav a.acct:hover { border-color: var(--deep2); background: #eef3fa; }
.lz-topnav a.cta { color: #fff; background: var(--deep); border: 1px solid var(--deep); }
.lz-topnav a.cta:hover { background: #17264a; color: #fff; }

/* ---------------- Left nav ---------------- */
.lz-shell { display: flex; align-items: flex-start; }
.lz-sidebar {
	width: 236px;
	flex: 0 0 236px;
	padding: 10px 14px 40px;
	border-right: 1px solid var(--line);
	position: sticky;
	top: 49px;
	height: calc(100vh - 49px);
	overflow-y: auto;
	background: transparent;
	font-family: var(--mono);
}
.nv { list-style: none; margin: 0; padding: 0; }
.nv > li { margin: 1px 0; }
.nv-group-label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-faint);
	padding: 11px 10px 5px;
}
.nv-group-label:first-child { padding-top: 3px; }
.nv-row, .nv summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #3a4658;
	text-decoration: none;
	border-left: 2px solid transparent;
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.nv-row:hover, .nv summary:hover,
.nv-row:focus-visible, .nv summary:focus-visible {
	background: #e9f1fb;
	color: var(--deep);
	border-left-color: var(--deep2);
	text-decoration: none;
}
.nv-row.active { background: #e4eefb; color: var(--deep); border-left-color: var(--deep); }
.nv-row img, .nv summary img { width: 16px; height: 16px; object-fit: contain; flex: 0 0 16px; }
.nv-row svg, .nv summary svg { width: 16px; height: 16px; flex: 0 0 16px; }
.nv .ico-blank { width: 16px; height: 16px; flex: 0 0 16px; display: inline-block; }
/* Several subdomain stylesheets declare `* { font-family: arial, sans-serif; }`, which
   targets nested nodes directly and defeats inheritance. Set the label font explicitly. */
.nv .lbl { overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); }
.nv details > summary { list-style: none; }
.nv details > summary::-webkit-details-marker { display: none; }
.nv .caret { margin-left: auto; width: 12px; height: 12px; opacity: .45; transition: transform .2s ease, opacity .15s ease; }
.nv details[open] > summary .caret { transform: rotate(90deg); opacity: .8; }
.nv-sub { list-style: none; margin: 2px 0 6px; padding: 0 0 0 38px; }
.nv-sub a {
	display: block;
	padding: 5px 8px;
	font-family: var(--sans);
	font-size: 12.5px;
	letter-spacing: 0;
	text-transform: none;
	color: #6b7688;
	text-decoration: none;
	border-radius: var(--r-sm);
	transition: background-color .12s ease, color .12s ease;
}
.nv-sub a:hover { background: #eef4fb; color: var(--deep); text-decoration: none; }
.nv-sub a.active { color: var(--deep); background: #eef4fb; font-weight: 600; }
.nv-row.donate { color: #c0405a; }
.nv-row.donate:hover { background: #fdecef; border-left-color: #d9536c; color: #a52f46; }

/* ---------------- Dark pages ----------------
   Twitch tools, dodge tracker and nhentai run on a #18181f background via
   `body.content-container` (trackingdodgers.css). Match the bars to that background
   and lift the text/hover states so they stay readable. */
body.content-container .lz-topbar {
	background: #18181f;
	border-bottom-color: rgba(255, 255, 255, .12);
}
body.content-container .lz-brand b {
	background: linear-gradient(95deg, #ffffff 0%, #d3dcee 55%, #8fa8d6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
body.content-container .lz-brand .lz-tag {
	color: rgba(255, 255, 255, .55);
	border-color: rgba(255, 255, 255, .20);
}
body.content-container .lz-topnav a { color: rgba(255, 255, 255, .74); }
body.content-container .lz-topnav a:hover { background: rgba(255, 255, 255, .09); color: #ffffff; }
body.content-container .lz-topnav a.acct { color: #ffffff; border-color: rgba(255, 255, 255, .30); }
body.content-container .lz-topnav a.acct:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .48); }
body.content-container .lz-topnav a.cta { background: #3a63a2; border-color: #3a63a2; color: #ffffff; }
body.content-container .lz-topnav a.cta:hover { background: #4b78bd; border-color: #4b78bd; }

body.content-container .lz-sidebar { border-right-color: rgba(255, 255, 255, .10); }
body.content-container .nv-group-label { color: rgba(255, 255, 255, .42); }
body.content-container .nv-row,
body.content-container .nv summary { color: rgba(255, 255, 255, .80); }
body.content-container .nv-row:hover,
body.content-container .nv summary:hover,
body.content-container .nv-row:focus-visible,
body.content-container .nv summary:focus-visible {
	background: rgba(255, 255, 255, .09);
	color: #ffffff;
	border-left-color: #8fa8d6;
}
body.content-container .nv-row.active {
	background: rgba(143, 168, 214, .18);
	color: #ffffff;
	border-left-color: #8fa8d6;
}
body.content-container .nv-sub a { color: rgba(255, 255, 255, .60); }
body.content-container .nv-sub a:hover { background: rgba(255, 255, 255, .08); color: #ffffff; }
body.content-container .nv-sub a.active { background: rgba(143, 168, 214, .16); color: #ffffff; }
body.content-container .nv .caret { opacity: .6; }
body.content-container .nv-row.donate { color: #ff8b9e; }
body.content-container .nv-row.donate:hover { background: rgba(255, 100, 130, .14); border-left-color: #ff6b85; color: #ffb3c0; }

/* ---------------- Stacking ----------------
   Page modals ("Modules available", output card) declare a low z-index (10/12) in the
   subdomain stylesheets, so the sticky top bar (z-index 30) would sit above their dim
   overlay. Lift the modals so they cover the whole viewport, top bar included. */
.search-modal { z-index: 1000 !important; }
.output-modal { z-index: 1001 !important; }

/* ---------------- Static content pages (privacy, terms, about, ...) ----------------
   These pages render their text in .donation-card blocks. Give them the same clean,
   light treatment as the rest of the redesign. */
.cards-container {
	max-width: 880px;
	margin: 32px auto 64px !important;
	padding: 0 6px;
	gap: 16px !important;
}
.donation-card {
	background: #fff !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--r-md) !important;
	box-shadow: 0 10px 26px -22px rgba(20, 40, 80, .45);
	overflow: hidden;
}
.donation-card .card-header,
.donation-card .donation-card-header {
	font-family: var(--mono) !important;
	font-size: 11.5px !important;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--deep) !important;
	background: #f7f8fa !important;
	border-bottom: 1px solid var(--line) !important;
	border-radius: 0 !important;
	padding: 12px 20px !important;
}
.donation-card .card-body,
.donation-card .donation-card-body {
	font-family: var(--sans) !important;
	color: #3a4252;
	font-size: 14.5px;
	line-height: 1.65;
	padding: 18px 20px 20px !important;
}
.donation-card .card-body p { margin: 0 0 12px; }
.donation-card .card-body p:last-child { margin-bottom: 0; }
.donation-card .card-body ul,
.donation-card .card-body ol { margin: 0 0 12px; padding-left: 20px; }
.donation-card .card-body li { margin: 4px 0; }
.donation-card .card-body a { color: var(--accent-deep); }
.donation-card .card-body a:hover { color: var(--deep); }
.donation-card .card-body b,
.donation-card .card-body strong { color: var(--ink); font-weight: 600; }
.donation-card .card-body h1,
.donation-card .card-body h2,
.donation-card .card-body h3,
.donation-card .card-body h4 {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	margin: 18px 0 8px;
	letter-spacing: -.005em;
}
.donation-card .card-body table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 13.5px; }
.donation-card .card-body th,
.donation-card .card-body td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.donation-card .card-body th { background: #f7f8fa; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

/* ---------------- Error pages (400/401/403/404/500/maintenance) ----------------
   Namespaced with lz- so they never collide with the animated backgrounds that
   some subdomain stylesheets already define as .lines/.line. */
.lz-scan { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.lz-scan .lz-lines { position: absolute; top: 0; left: 0; right: 0; height: 100%; margin: auto; width: 90vw; transform: skewX(346deg); }
.lz-line {
	position: absolute; width: 1px; height: 100%; top: 0; left: 50%; overflow: hidden;
	background: linear-gradient(to bottom, rgba(70,130,180,0) 0%, rgba(70,130,180,.16) 70%, rgba(70,130,180,.26) 100%);
}
.lz-line::after {
	content: ''; display: block; position: absolute; height: 30vh; width: 100%; top: -60%; left: 0;
	background: linear-gradient(to bottom, rgba(70,130,180,0) 0%, rgb(85 100 255 / 85%) 75%, rgb(33 212 255) 100%);
	animation: lz-drop 10s infinite forwards;
	animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}
.lz-line:nth-child(1) { margin-left: -45%; }
.lz-line:nth-child(1)::after { animation-delay: 2s; }
.lz-line:nth-child(3) { margin-left: 40%; }
.lz-line:nth-child(3)::after { animation-delay: 3s; }
@keyframes lz-drop { 0% { top: -60%; } 100% { top: 110%; } }

.lz-error-wrap {
	flex: 1 1 auto; min-width: 0;
	display: flex; align-items: center; justify-content: center;
	padding: 50px clamp(16px, 4vw, 56px) 80px;
	min-height: calc(100vh - 49px);
}
.lz-error { max-width: 640px; width: 100%; text-align: center; }
.lz-error-kicker {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
	text-transform: uppercase; color: var(--ink-faint); margin: 0;
}
.lz-error-code {
	font-family: var(--mono); font-size: clamp(58px, 12vw, 104px); font-weight: 700;
	line-height: 1; letter-spacing: -.04em; margin: 10px 0 0;
	background: linear-gradient(95deg, #161616 0%, #223a66 52%, #3a63a2 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
}
.lz-error-title {
	font-family: var(--sans); font-size: clamp(19px, 2.6vw, 25px); font-weight: 700;
	color: var(--ink); margin: 12px 0 8px; letter-spacing: -.01em;
}
.lz-error-text {
	font-family: var(--sans); color: var(--ink-soft); font-size: 14.5px;
	margin: 0 auto; max-width: 470px; line-height: 1.6;
}
.lz-error-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.lz-btn-solid, .lz-btn-ghost {
	font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
	font-weight: 600; text-decoration: none; padding: 12px 20px; border-radius: var(--r-md);
	display: inline-flex; align-items: center;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.lz-btn-solid { background: var(--deep); color: #fff; border: 1px solid var(--deep); }
.lz-btn-solid:hover { background: #17264a; color: #fff; text-decoration: none; }
.lz-btn-ghost { background: transparent; color: var(--deep); border: 1px solid var(--line-strong); }
.lz-btn-ghost:hover { border-color: var(--deep2); background: #eef3fa; color: var(--deep); text-decoration: none; }
.lz-error-links {
	margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line);
	display: flex; gap: 8px 22px; justify-content: center; flex-wrap: wrap;
}
.lz-error-links a {
	font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em;
	color: var(--accent-deep); text-decoration: none;
}
.lz-error-links a:hover { color: var(--deep); text-decoration: underline; }

/* Offset the 236px sidebar so the block sits centred in the viewport rather than in
   the leftover space beside it (same treatment as the landing and tool pages). */
@media (min-width: 1000px) {
	.lz-error-wrap { padding-right: calc(236px + clamp(16px, 4vw, 56px)); }
}

/* ---------- Compact icon rail (small screens) ----------
   A 236px sidebar leaves too little room on a phone, so below 860px the nav collapses
   to an icon rail. Row labels stay in the DOM (clipped, not removed) so screen readers
   still announce them. An opened category is a flyout, which is why nothing here clips
   overflow. The top bar sheds its tag and plain links so the key actions still fit. */
@media (max-width: 860px) {
	.lz-topbar { padding: 8px 12px; gap: .5rem; }
	.lz-brand b { font-size: 1rem; }
	.lz-brand .lz-tag { display: none; }
	.lz-topnav { gap: 3px; }
	.lz-topnav a { padding: 6px 9px; font-size: 10.5px; letter-spacing: .05em; }
	.lz-topnav a:not(.acct):not(.cta) { display: none; }

	.lz-sidebar {
		width: 68px;
		flex: 0 0 68px;
		padding: 6px 0 26px;
		height: auto;
		max-height: none;
		overflow: visible;
		z-index: 45;
	}
	.nv > li { position: relative; }

	.nv-group-label {
		margin: 7px 7px 0;
		padding: 8px 2px 4px;
		text-align: center;
		font-size: 8.5px;
		letter-spacing: .07em;
		line-height: 1.3;
		border-top: 1px solid var(--line);
	}
	.nv-group-label:first-child { margin-top: 0; padding-top: 4px; border-top: 0; }

	.nv-row, .nv summary { padding: 9px; gap: 0; justify-content: flex-start; }
	.nv .lbl {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
	.nv .caret { margin-left: auto; width: 11px; height: 11px; }

	.nv-sub {
		position: absolute; top: 0; left: 100%; z-index: 50;
		margin: 0 0 0 5px; padding: 5px; min-width: 162px;
		background: #ffffff; border: 1px solid var(--line-strong);
		border-radius: var(--r-sm); box-shadow: 0 16px 32px -18px rgba(20, 40, 80, .55);
	}
	.nv-sub a { padding: 6px 9px; font-size: 12px; white-space: nowrap; }

	body.content-container .nv-sub {
		background: #1f1f27; border-color: rgba(255, 255, 255, .18);
		box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .8);
	}
	body.content-container .nv-group-label { border-top-color: rgba(255, 255, 255, .12); }
	.lz-error-wrap { min-height: calc(100vh - 90px); }
}