:root {
	--bg: #f4f6fb;
	--surface: #ffffff;
	--surface-2: #eef2ff;
	--text: #1f2937;
	--muted: #6b7280;
	--border: #d1d5db;
	--primary: #2563eb;
	--primary-2: #1d4ed8;
	--danger: #dc2626;
	--success: #15803d;
	--warning: #b45309;
	--shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
	--radius: 14px;
	--gap: 12px;
	--nav-height: 56px;
	font-family: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); }
body { min-height:100vh; }
a { color:inherit; text-decoration:none; }
button, input { font:inherit; }
button { cursor:pointer; border:0; border-radius:10px; padding:10px 14px; background:var(--primary); color:white; }
button:hover { background:var(--primary-2); }
button.secondary { background:#475569; }
button.danger { background:var(--danger); }
button.ghost { background:transparent; color:var(--primary); border:1px solid var(--primary); }
button:disabled { opacity:0.5; cursor:not-allowed; }
input { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:white; }
table { width:100%; border-collapse:collapse; background:white; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
th, td { text-align:left; padding:10px; border-bottom:1px solid var(--border); vertical-align:top; }
th { background:var(--surface-2); }
.page { padding:16px; max-width:960px; margin:0 auto; }
.card { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:16px; }
.stack { display:grid; gap:var(--gap); }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.navbar { position:sticky; top:0; z-index:5; background:var(--surface); height:var(--nav-height); box-shadow:var(--shadow); }
.navbar-inner { max-width:960px; height:100%; margin:0 auto; padding:0 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.nav-links { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nav-link { padding:8px 10px; border-radius:10px; color:var(--muted); }
.nav-link.active { background:var(--surface-2); color:var(--primary); font-weight:bold; }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:16px; }
.auth-card { width:min(100%, 420px); background:var(--surface); border-radius:18px; box-shadow:var(--shadow); padding:20px; }
.form-grid { display:grid; gap:12px; }
.helper { color:var(--muted); font-size:0.92rem; }
.error { color:var(--danger); font-size:0.92rem; }
.success { color:var(--success); font-size:0.92rem; }
.game-list { display:grid; gap:12px; }
.game-item { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; display:grid; gap:10px; }
.board-wrap { display:grid; gap:12px; }
.board-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; background:#1d4ed8; padding:8px; border-radius:16px; max-width:560px; width:100%; margin:0 auto; }
.board-cell { aspect-ratio:1/1; border-radius:50%; background:white; border:1px solid rgba(0,0,0,0.08); }
.board-cell.red { background:#dc2626; }
.board-cell.yellow { background:#facc15; }
.column-buttons { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; max-width:560px; width:100%; margin:0 auto; }
.column-buttons button { padding:8px 0; }
.inline-reset { display:grid; gap:8px; min-width:220px; }
.empty-state { padding:16px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); text-align:center; color:var(--muted); }
@media (min-width:720px) { .form-inline { display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; } }