/* Basic reset and variables */
:root {
	--bg: #0b1520;
	--panel: #0f1f2d;
	--card: #122436;
	--text: #e6eef6;
	--muted: #92a3b5;
	--accent: #4cc3ff;
	--accent-2: #00e0a4;
	--border: #1f3a54;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	background: linear-gradient(180deg, var(--bg), #08101a 60%);
	color: var(--text);
	line-height: 1.6;
}
.container { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 16px; }

.site-header { border-bottom: 1px solid var(--border); background: rgba(10, 20, 32, 0.6); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; }
.site-header .container { padding: 18px 16px; }
.site-header h1 { margin: 0; font-size: 20px; font-weight: 700; }
.site-header .tagline { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

.site-footer { border-top: 1px solid var(--border); margin-top: 40px; }
.site-footer .container { padding: 24px 16px; color: var(--muted); font-size: 14px; }

.search-section { margin: 28px 0; }
#search { width: 100%; padding: 14px 16px; font-size: 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); outline: none; box-shadow: 0 0 0 2px transparent; transition: box-shadow .2s, border-color .2s; }
#search:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(76, 195, 255, 0.25); }

.results { margin-top: 16px; display: grid; gap: 12px; }
.result { padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.result a { color: var(--text); text-decoration: none; font-weight: 600; }
.result p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

.cards { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 0; margin: 8px 0 0; }
.card { display: block; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, var(--card), #0e1d2c); color: var(--text); text-decoration: none; font-weight: 600; transition: transform .08s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.25); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); border: 0; }