:root {
	--brand: #a83031;
	--brand-dark: #3c010e;
	--gold: #f4c542;
	--ink: #16171b;
	--muted: #6b6b6b;
	--bg: #f5f5f7;
	--card: #ffffff;
	--border: #e7e7ec;
	--success: #1e8e5a;
	--danger: #c4352b;
	--warn: #b88200;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background: var(--bg);
	color: var(--ink);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	padding-bottom: 72px;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 620px; margin: 0 auto; padding: 0 16px; }

/* ---- Top bar ---- */
.topbar {
	background: linear-gradient(180deg, var(--brand), var(--brand-dark));
	color: #fff;
	padding: 14px 16px;
	display: flex; align-items: center; justify-content: space-between;
	position: sticky; top: 0; z-index: 50;
	box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.topbar .logo { font-size: 18px; font-weight: 800; letter-spacing: .3px; }
.topbar .logo span { color: var(--gold); }
.topbar .wallet {
	background: rgba(255,255,255,.14);
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 14px; font-weight: 700;
	border: 1px solid rgba(255,255,255,.2);
	display: inline-flex; align-items: center; gap: 6px;
}
.topbar .wallet b { color: var(--gold); }

/* ---- Bottom nav ---- */
.bottomnav {
	position: fixed; bottom: 0; left: 0; right: 0;
	background: #fff; border-top: 1px solid var(--border);
	display: grid; grid-template-columns: repeat(5, 1fr);
	z-index: 50;
	box-shadow: 0 -2px 10px rgba(0,0,0,.05);
}
.bottomnav a {
	padding: 10px 4px;
	text-align: center; color: var(--muted);
	font-size: 11px; font-weight: 500;
	border: none;
}
.bottomnav a .ic { font-size: 22px; display: block; margin-bottom: 2px; }
.bottomnav a.active { color: var(--brand); }
.bottomnav a:hover { text-decoration: none; color: var(--brand); }

/* ---- Cards ---- */
.card {
	background: var(--card);
	border-radius: 12px;
	border: 1px solid var(--border);
	margin: 12px 0;
	overflow: hidden;
}
.card-header {
	padding: 14px 16px;
	font-weight: 700;
	border-bottom: 1px solid var(--border);
	background: #fafafc;
}
.card-body { padding: 14px 16px; }

/* ---- Market tile ---- */
.market {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 14px;
	margin: 10px 0;
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px;
}
.market .name { font-weight: 700; font-size: 16px; }
.market .time { font-size: 12px; color: var(--muted); margin-top: 3px; }
.market .result {
	font-family: "Courier New", monospace;
	font-weight: 800; color: var(--brand);
	font-size: 17px; letter-spacing: 1px; margin-top: 3px;
}
.market .status {
	padding: 5px 10px; font-size: 11px; border-radius: 999px;
	font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.status.s-open { background: #e4f5ec; color: var(--success); }
.status.s-close { background: #fff3cd; color: var(--warn); }
.status.s-closed { background: #fde2e1; color: var(--danger); }
.market-actions {
	display: flex; gap: 8px; margin-top: 10px;
}
.market-actions .btn { flex: 1; }

/* ---- Buttons ---- */
.btn {
	display: inline-block;
	padding: 11px 18px;
	border-radius: 10px;
	border: none; cursor: pointer;
	font-weight: 700; font-size: 15px;
	background: var(--brand); color: #fff;
	transition: transform .1s, box-shadow .1s;
	text-decoration: none; text-align: center;
}
.btn:hover { text-decoration: none; color: #fff; transform: translateY(-1px); }
.btn-block { display: block; width: 100%; }
.btn-gold { background: var(--gold); color: #1a0b0d; }
.btn-ghost { background: #f1f1f4; color: var(--ink); }
.btn-ghost:hover { color: var(--ink); background: #e7e7ec; }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---- Form ---- */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #444; }
.form-control {
	width: 100%; padding: 11px 13px;
	border: 1px solid var(--border);
	border-radius: 10px;
	font-size: 15px; background: #fff;
}
.form-control:focus { outline: none; border-color: var(--brand); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---- Alerts ---- */
.alert {
	padding: 11px 14px; border-radius: 10px;
	margin: 12px 0; font-size: 14px;
	border: 1px solid transparent;
}
.alert-error { background: #fde2e1; color: var(--danger); border-color: #f5c2c0; }
.alert-success { background: #e4f5ec; color: var(--success); border-color: #b7e4c9; }
.alert-info { background: #dff2ff; color: #0b4e7a; border-color: #b0daef; }

/* ---- Number grid ---- */
.num-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	margin: 12px 0;
}
.num-grid.w3 { grid-template-columns: repeat(4, 1fr); }
.num-cell {
	aspect-ratio: 1 / 1;
	background: #fff; border: 2px solid var(--border); border-radius: 10px;
	font-weight: 700; font-size: 18px; color: var(--ink);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: all .1s;
	position: relative;
}
.num-cell.w3 { font-size: 15px; aspect-ratio: 3 / 2; }
.num-cell:hover { border-color: var(--brand); color: var(--brand); }
.num-cell.selected {
	background: linear-gradient(180deg, var(--brand), var(--brand-dark));
	color: #fff; border-color: var(--brand-dark);
}
.num-cell.selected::after {
	content: attr(data-amount);
	position: absolute; bottom: 2px; right: 4px;
	font-size: 10px; background: var(--gold); color: #1a0b0d;
	padding: 1px 4px; border-radius: 4px;
	font-weight: 800;
}

/* ---- Radio session ---- */
.radio-pills { display: flex; gap: 8px; }
.radio-pill {
	flex: 1;
	background: #f1f1f4;
	padding: 10px 12px;
	border-radius: 10px;
	text-align: center;
	border: 2px solid transparent;
	cursor: pointer;
	font-weight: 600;
}
.radio-pill input { display: none; }
.radio-pill.selected { background: #fff; border-color: var(--brand); color: var(--brand); }

/* ---- List rows ---- */
.list-row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid var(--border);
}
.list-row:last-child { border-bottom: 0; }
.list-row .pri { font-weight: 600; font-size: 15px; }
.list-row .sec { font-size: 12px; color: var(--muted); margin-top: 2px; }
.list-row .amt { font-weight: 800; font-size: 15px; }
.list-row .amt.cr { color: var(--success); }
.list-row .amt.dr { color: var(--danger); }

/* ---- Tabs ---- */
.tabs { display: flex; background: #fff; border-radius: 10px; padding: 4px; border: 1px solid var(--border); margin: 12px 0; }
.tabs a {
	flex: 1; padding: 9px 10px; text-align: center;
	border-radius: 8px; font-weight: 600; font-size: 14px;
	color: var(--muted);
}
.tabs a.active { background: var(--brand); color: #fff; }
.tabs a:hover { text-decoration: none; }

/* ---- Auth (login/register) ---- */
.auth-card {
	margin: 30px auto;
	max-width: 420px;
	background: #fff;
	padding: 28px 24px;
	border-radius: 16px;
	border: 1px solid var(--border);
	box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.auth-card h1 { text-align: center; margin: 0 0 6px; font-size: 24px; }
.auth-card .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 14px; }
.auth-card .alt { text-align: center; margin-top: 18px; font-size: 14px; color: var(--muted); }

/* ---- Hero (home) ---- */
.hero-wallet {
	background: linear-gradient(180deg, var(--brand), var(--brand-dark));
	color: #fff;
	border-radius: 14px;
	padding: 22px;
	margin: 14px 0;
	position: relative;
	overflow: hidden;
}
.hero-wallet::after {
	content: "";
	position: absolute; right: -40px; top: -40px;
	width: 160px; height: 160px;
	background: radial-gradient(circle, rgba(244,197,66,.22), transparent 70%);
	pointer-events: none;
}
.hero-wallet .lbl { font-size: 13px; opacity: .85; }
.hero-wallet .bal { font-size: 34px; font-weight: 800; margin-top: 4px; color: var(--gold); }
.hero-wallet .acts { margin-top: 14px; display: flex; gap: 8px; }
.hero-wallet .btn { flex: 1; }

h2.section { font-size: 17px; margin: 18px 0 6px; padding: 0 2px; }

/* ---- Totals bar (bet page) ---- */
.totals {
	position: sticky; bottom: 72px;
	background: #fff; border-top: 1px solid var(--border);
	padding: 14px 16px;
	display: flex; gap: 10px; align-items: center;
	margin: 0 -16px;
}
.totals .meta { flex: 1; }
.totals .meta .sm { font-size: 12px; color: var(--muted); }
.totals .meta b { font-size: 18px; color: var(--ink); }

/* ---- Empty state ---- */
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty .ic { font-size: 44px; }