:root { --accent: #1d4ed8; --bg: #f8fafc; --line: #e2e8f0; --ok: #16a34a; --warn: #b45309; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--bg); color: #0f172a; }
header { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .75rem 1rem; background: #fff; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; color: var(--accent); text-decoration: none; font-size: 1.1rem; }
nav { display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: center; }
nav a { color: #334155; text-decoration: none; }
nav form { display: inline; }
button.link { background: none; border: 0; color: #334155; cursor: pointer; padding: 0; font: inherit; }
main { max-width: 56rem; margin: 0 auto; padding: 1rem; }
h1, h2, h3 { margin: 1rem 0 .5rem; }
.flash { max-width: 56rem; margin: .5rem auto 0; padding: .6rem 1rem; background: #ecfdf5; border: 1px solid var(--ok); border-radius: .4rem; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: .5rem .4rem; border-bottom: 1px solid var(--line); text-align: left; }
td.num, th.num { text-align: right; }
input, select { padding: .4rem; border: 1px solid #cbd5e1; border-radius: .3rem; font: inherit; }
input.score { width: 3.2rem; text-align: center; }
button, .btn { padding: .5rem .9rem; border: 0; border-radius: .3rem; background: var(--accent); color: #fff; font: inherit; cursor: pointer; text-decoration: none; }
form.stack label { display: block; margin: .6rem 0 .2rem; }
.card { background: #fff; border: 1px solid var(--line); border-radius: .5rem; padding: .8rem 1rem; margin: .8rem 0; }
.match { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.match .away { text-align: right; }
.muted { color: #64748b; font-size: .9rem; }
.pts { font-weight: 700; color: var(--ok); }
.warn { color: var(--warn); }
.tablewrap { overflow-x: auto; }