/* Packet6 IP lookup — self-contained styles, system fonts only, no external
   resources. Light and dark themes via prefers-color-scheme. */

:root {
	--bg: #070b14;
	--bg-2: #0c1424;
	--grid: rgba(120, 160, 220, 0.05);
	--card: #0e1728;
	--card-top: #131f36;
	--border: #1d2c48;
	--border-soft: #17233c;
	--text: #eef3fb;
	--muted: #93a6c4;
	--faint: #6d80a0;
	--accent: #4c8dff;
	--accent-soft: rgba(76, 141, 255, 0.14);
	--accent-line: rgba(76, 141, 255, 0.35);
	--ok: #3ddc97;
	--chip-bg: #101f36;
	--chip-border: #244168;
	--btn-bg: #16233c;
	--btn-bg-hover: #1c2d4c;
	--btn-border: #274169;
	--mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Mono", "Menlo", "Consolas", monospace;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #f3f6fb;
		--bg-2: #e7eef8;
		--grid: rgba(40, 90, 160, 0.06);
		--card: #ffffff;
		--card-top: #ffffff;
		--border: #e1e8f2;
		--border-soft: #eef2f8;
		--text: #0d1729;
		--muted: #55688a;
		--faint: #7f90ac;
		--accent: #1f6feb;
		--accent-soft: rgba(31, 111, 235, 0.10);
		--accent-line: rgba(31, 111, 235, 0.28);
		--ok: #16a06a;
		--chip-bg: #eef4ff;
		--chip-border: #cfe0ff;
		--btn-bg: #f4f7fc;
		--btn-bg-hover: #e9f0fb;
		--btn-border: #d3deee;
		--shadow: 0 30px 70px -40px rgba(20, 45, 90, 0.35);
	}
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	font-family: var(--sans);
	color: var(--text);
	background:
		/* faint network grid */
		linear-gradient(var(--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px),
		/* focal glow */
		radial-gradient(900px 500px at 50% -8%, var(--bg-2), transparent 62%),
		var(--bg);
	background-size: 46px 46px, 46px 46px, auto, auto;
	background-position: center top;
	display: grid;
	place-items: center;
	padding: 32px 20px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.card {
	position: relative;
	width: 100%;
	max-width: 600px;
	background: linear-gradient(180deg, var(--card-top), var(--card));
	border: 1px solid var(--border);
	border-radius: 22px;
	padding: 52px 48px 34px;
	box-shadow: var(--shadow);
	text-align: center;
	overflow: hidden;
}

/* thin brand accent line along the very top of the card */
.card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--text);
	text-decoration: none;
	font-weight: 650;
	font-size: 16px;
	letter-spacing: -0.01em;
	margin-bottom: 40px;
	opacity: 0.92;
	transition: opacity 0.15s ease;
}
.brand:hover { opacity: 1; }
.brand .mark { color: var(--accent); }
.brand .six { color: var(--accent); }

.eyebrow {
	margin: 0 0 18px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--faint);
}

/* --- hero: the IP + copy button --- */
.hero {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px 16px;
}

.ip {
	margin: 0;
	font-family: var(--mono);
	font-weight: 600;
	font-size: clamp(1.7rem, 7.5vw, 3.1rem);
	letter-spacing: -0.02em;
	word-break: break-all;
	line-height: 1.1;
	color: var(--text);
}

.copy {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--sans);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text);
	background: var(--btn-bg);
	border: 1px solid var(--btn-border);
	border-radius: 10px;
	padding: 8px 13px;
	cursor: pointer;
	line-height: 1;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.06s ease;
	-webkit-user-select: none;
	user-select: none;
}
.copy:hover { background: var(--btn-bg-hover); border-color: var(--accent-line); }
.copy:active { transform: translateY(1px); }
.copy:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.copy svg { display: block; color: var(--accent); }
.copy .i-check { display: none; color: var(--ok); }
.copy.is-done { border-color: var(--ok); color: var(--ok); }
.copy.is-done .i-copy { display: none; }
.copy.is-done .i-check { display: block; }
.copy.is-fail { border-color: #e06767; color: #e06767; }

/* --- protocol chip --- */
.proto { margin: 22px 0 0; }

.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--muted);
	background: var(--chip-bg);
	border: 1px solid var(--chip-border);
	padding: 6px 13px;
	border-radius: 999px;
	letter-spacing: 0.04em;
}
.chip .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.note {
	margin: 34px auto 0;
	max-width: 44ch;
	font-size: 14px;
	color: var(--muted);
}

.foot {
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--border-soft);
	font-size: 13px;
	color: var(--faint);
}
.foot p { margin: 0; }
.foot .cli { margin-bottom: 9px; }
.foot code {
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--text);
	background: var(--chip-bg);
	border: 1px solid var(--border-soft);
	padding: 3px 8px;
	border-radius: 7px;
}
.foot a { color: var(--accent); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

@media (max-width: 460px) {
	.card { padding: 40px 24px 28px; border-radius: 18px; }
	.brand { margin-bottom: 32px; }
}

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