:root {
    --bg: #060917;
    --panel: rgba(13, 19, 43, 0.88);
    --panel-2: rgba(18, 26, 57, 0.92);
    --line: rgba(255, 255, 255, 0.08);
    --text: #f6f8ff;
    --muted: #909ab8;
    --accent: #00ff87;
    --accent-2: #04f5ff;
    --purple: #6c2cff;
    --danger: #ff4d7d;
    --warning: #ffcf4a;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 8%, rgba(108,44,255,.26), transparent 32%),
        radial-gradient(circle at 8% 92%, rgba(0,255,135,.12), transparent 32%),
        var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dashboard {
    width: 100vw;
    height: 100vh;
    min-width: 1000px;
    padding: 2.25vh 2.3vw 2vh;
    display: grid;
    grid-template-rows: 11vh 1fr;
    gap: 1.8vh;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding: 0 .2vw 1.6vh;
}

.brand { display: flex; align-items: center; gap: 1.2vw; }
.logo { height: 7vh; width: auto; max-width: 9vw; object-fit: contain; }

.eyebrow, .section-kicker {
    color: var(--accent);
    font-size: clamp(11px, .78vw, 18px);
    font-weight: 800;
    letter-spacing: .18em;
}

h1 { margin: .55vh 0 0; font-size: clamp(28px, 2.25vw, 48px); line-height: 1; letter-spacing: -.03em; }
h2 { margin: .25vh 0 0; font-size: clamp(22px, 1.45vw, 34px); letter-spacing: -.02em; }

.topbar-right { display: flex; align-items: center; gap: 1.4vw; }
.gw-box { text-align: right; display: grid; gap: .7vh; justify-items: end; color: var(--muted); font-size: clamp(12px, .9vw, 20px); font-weight: 700; }
.clock { font-variant-numeric: tabular-nums; font-size: clamp(34px, 3vw, 60px); font-weight: 850; letter-spacing: -.05em; min-width: 6.4vw; text-align: right; }

.badge { padding: .45vh .7vw; border-radius: 999px; font-size: clamp(10px, .67vw, 15px); letter-spacing: .12em; }
.badge.live { color: #06120b; background: var(--accent); box-shadow: 0 0 24px rgba(0,255,135,.3); }
.badge.provisional { color: #1b1200; background: var(--warning); }
.badge.idle { color: var(--accent-2); background: rgba(4,245,255,.1); border: 1px solid rgba(4,245,255,.25); }

.content-grid { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 25.5vw; gap: 1.15vw; }
.panel { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 1.1vw; box-shadow: 0 1.2vw 3vw rgba(0,0,0,.22); }

.leaderboard { min-height: 0; padding: 2.2vh 1.35vw 1.45vh; display: grid; grid-template-rows: 6.8vh 4.8vh 1fr; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.panel-heading.compact { align-items: center; }

.table-head, .league-row {
    display: grid;
    grid-template-columns: 4.3vw minmax(0, 1fr) 7vw 8vw 5.4vw;
    align-items: center;
}
.table-head { color: #73809f; font-weight: 800; font-size: clamp(10px, .68vw, 15px); letter-spacing: .12em; border-bottom: 1px solid var(--line); }
.table-head > span:nth-child(n+3) { text-align: right; }
.table-body { min-height: 0; display: grid; align-content: stretch; }
.league-row {
    min-height: 0;
    height: 100%;
    border-bottom: 1px solid var(--line);
    padding: .45vh .35vw;
    transition: background .2s ease;
}
.league-row:last-child { border-bottom: 0; }
.league-row.highlight { background: linear-gradient(90deg, rgba(0,255,135,.12), rgba(0,255,135,.025)); border-radius: .75vw; box-shadow: inset .18vw 0 0 var(--accent); }
.rank { font-size: clamp(18px, 1.3vw, 30px); font-weight: 850; color: #cfd5e8; }
.team-cell { min-width: 0; padding-right: 1vw; }
.team-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(17px, 1.15vw, 27px); line-height: 1.05; font-weight: 820; letter-spacing: -.015em; }
.manager-name { margin-top: .35vh; color: var(--muted); font-size: clamp(11px, .73vw, 17px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.captain { color: #c0c8df; margin-left: .45vw; }
.score { text-align: right; font-variant-numeric: tabular-nums; font-size: clamp(18px, 1.25vw, 29px); font-weight: 840; }
.score.gw { color: var(--accent); }
.movement { text-align: right; font-size: clamp(14px, .9vw, 20px); font-weight: 800; }
.movement.up { color: var(--accent); }
.movement.down { color: var(--danger); }
.movement.flat { color: #77819c; }
.loading-row { display: grid; place-items: center; color: var(--muted); font-size: clamp(16px, 1vw, 22px); }

.sidebar { min-height: 0; display: grid; grid-template-rows: 25.5vh 1fr 10.5vh; gap: 1.15vh; }
.hero-card { padding: 2.2vh 1.45vw; position: relative; overflow: hidden; }
.hero-card::after { content: ""; position: absolute; width: 15vw; height: 15vw; right: -6vw; bottom: -9vw; border-radius: 50%; background: radial-gradient(circle, rgba(0,255,135,.23), transparent 65%); }
.hero-manager { margin-top: 1.6vh; font-size: clamp(24px, 1.8vw, 40px); line-height: 1; font-weight: 900; letter-spacing: -.035em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-team { margin-top: .7vh; color: var(--muted); font-size: clamp(12px, .82vw, 18px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-points { position: absolute; bottom: 2vh; left: 1.45vw; display: flex; align-items: baseline; gap: .5vw; }
.hero-points strong { font-size: clamp(48px, 4.2vw, 84px); line-height: .8; color: var(--accent); letter-spacing: -.07em; }
.hero-points span { color: #a9b1c8; font-weight: 850; letter-spacing: .15em; }

.matches { padding: 1.7vh 1.25vw 1.25vh; min-height: 0; display: grid; grid-template-rows: 5.6vh 1fr; }
.live-dot-wrap { color: var(--accent); font-size: clamp(10px, .68vw, 15px); font-weight: 900; letter-spacing: .13em; display: flex; align-items: center; gap: .4vw; }
.live-dot-wrap.hidden { visibility: hidden; }
.live-dot { width: .55vw; height: .55vw; min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 1vw rgba(0,255,135,.8); animation: pulse 1.3s infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }
.fixtures { min-height: 0; overflow: hidden; display: grid; align-content: start; gap: .65vh; }
.fixture { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .65vw; min-height: 4.7vh; padding: .65vh .7vw; border: 1px solid rgba(255,255,255,.055); border-radius: .65vw; background: rgba(255,255,255,.025); }
.fixture.live { border-color: rgba(0,255,135,.23); background: rgba(0,255,135,.055); }
.fixture-team { font-size: clamp(12px, .77vw, 17px); font-weight: 800; }
.fixture-team.away { text-align: right; }
.fixture-mid { min-width: 5.5vw; text-align: center; font-size: clamp(11px, .72vw, 16px); font-weight: 850; font-variant-numeric: tabular-nums; }
.fixture-mid .scoreline { display: block; color: var(--text); font-size: clamp(13px, .9vw, 20px); }
.fixture-mid .match-status { display: block; color: var(--muted); margin-top: .12vh; font-size: clamp(9px, .55vw, 12px); letter-spacing: .08em; }
.fixture.live .match-status { color: var(--accent); }

.status { padding: 1.3vh 1.15vw; display: grid; align-content: center; gap: .8vh; }
.status-row { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: clamp(10px, .66vw, 15px); }
.status-row strong { color: #d9deed; font-weight: 800; text-align: right; }

.error-toast { position: fixed; left: 50%; bottom: 2vh; transform: translateX(-50%); max-width: 60vw; padding: 1.1vh 1vw; color: #fff; background: rgba(165,23,65,.95); border: 1px solid rgba(255,255,255,.18); border-radius: .7vw; font-weight: 700; box-shadow: 0 1vw 3vw rgba(0,0,0,.35); }

@media (max-aspect-ratio: 4/3) {
    body { overflow: auto; }
    .dashboard { min-width: 0; height: auto; min-height: 100vh; grid-template-rows: auto auto; }
    .content-grid { grid-template-columns: 1fr; }
    .sidebar { grid-template-columns: 1fr; grid-template-rows: auto; }
}

/* Compact table for many rows: app.js sets .dense (more than 12 rows) and --rows. */
.table-body.dense { --row-h: calc(67vh / var(--rows)); }
.table-body.dense .league-row { padding: 0 .35vw; overflow: hidden; }
.table-body.dense .league-row.highlight { border-radius: .3vw; }
.table-body.dense .rank,
.table-body.dense .score { font-size: min(1.15vw, calc(var(--row-h) * .55)); }
.table-body.dense .movement { font-size: min(.85vw, calc(var(--row-h) * .45)); }
.table-body.dense .team-cell { display: flex; align-items: baseline; gap: .8vw; overflow: hidden; white-space: nowrap; }
.table-body.dense .team-name { flex: 0 1 auto; font-size: min(1vw, calc(var(--row-h) * .55)); }
.table-body.dense .manager-name { flex: 1 1 0; min-width: 0; margin-top: 0; font-size: min(.72vw, calc(var(--row-h) * .42)); }