/* Aramco Stadium look, taken from aramcostadium.com: deep navy, white, green for "live".
   shortcut: system fonts stand in for the site's licensed Aktiv Grotesk / Loew Next Arabic; swap in the brand fonts from Khaled (self-hosted, so no extra firewall domain). */
:root {
	--navy: #010532;
	--navy-2: #0a0f45;
	--navy-3: #161c5c;
	--ink: #010532;
	--muted: #5f6369;
	--line: #e2e5ec;
	--bg: #f4f5f8;
	--card: #ffffff;
	--green: #00d246;
	--blue: #1480db;
	--red: #c62f35;
	--amber: #b46900;
	--radius: 14px;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", "Geeza Pro", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: inherit; }

.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dark .eyebrow { color: rgba(255, 255, 255, 0.6); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-inline-end: 6px; vertical-align: 1px; }

.btn { font: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.btn:hover { border-color: #c9cdd8; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.danger { color: var(--red); }
.btn.on { background: var(--navy); border-color: var(--navy); color: #fff; }

.field { display: block; margin: 0 0 16px; }
.field > span { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.input, select.input { font: inherit; font-size: 16px; width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }

@media (pointer: coarse) {
	.btn, .input { min-height: 44px; }
}