:root {
    --pozadi: #eef2f6;
    --karta: #ffffff;
    --text: #1c2733;
    --tlumeny: #5f6f80;
    --okraj: #dbe2ea;
    --akcent: #d9480f;
    --modra: #1c7ed6;
    --stin: 0 1px 2px rgb(16 24 40 / 6%), 0 2px 8px rgb(16 24 40 / 5%);
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --pozadi: #0f1620;
        --karta: #18222e;
        --text: #e6edf3;
        --tlumeny: #93a3b5;
        --okraj: #263342;
        --akcent: #ff8a4c;
        --modra: #4dabf7;
        --stin: none;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--pozadi);
    color: var(--text);
    font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.hlavicka, main, footer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

.hlavicka {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px 24px;
    padding-top: 28px;
    padding-bottom: 20px;
}

h1 { margin: 0; font-size: 2.2rem; letter-spacing: -0.02em; }
h2 { margin: 0; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tlumeny); }

.podtitul, .aktualizace { margin: 0; color: var(--tlumeny); font-size: 0.95rem; }
.aktualizace.stara { color: var(--akcent); }

.mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.karta {
    background: var(--karta);
    border: 1px solid var(--okraj);
    border-radius: 14px;
    box-shadow: var(--stin);
    padding: 16px 18px;
    margin: 0;
    min-width: 0;
}

.hlavni { grid-row: span 2; display: flex; flex-direction: column; }
.hlavni dl { margin-top: auto; }

.hodnota {
    margin: 6px 0 10px;
    font-size: 2.3rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.hodnota small { font-size: 0.95rem; font-weight: 500; color: var(--tlumeny); margin-left: 4px; letter-spacing: 0; }
.hodnota.velka { font-size: 4.5rem; line-height: 1.1; color: var(--akcent); }
.hodnota.velka small { font-size: 1.6rem; }

dl { margin: 0; display: grid; gap: 4px; }
dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; }
dt { color: var(--tlumeny); }
dd { margin: 0; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.vitr { display: flex; align-items: center; gap: 14px; }
.vitr .hodnota { margin: 0; }
.kompas { width: 64px; height: 64px; flex: none; }
.kompas circle { fill: none; stroke: var(--okraj); stroke-width: 3; }
.kompas text { fill: var(--tlumeny); font-size: 11px; font-weight: 600; text-anchor: middle; }
.kompas path { fill: var(--modra); transform-origin: 50px 50px; transition: transform 0.6s ease; }

.grafy { margin-top: 32px; }

.grafy-hlavicka {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.prepinac { display: inline-flex; border: 1px solid var(--okraj); border-radius: 10px; overflow: hidden; background: var(--karta); }
.prepinac button {
    border: 0;
    background: none;
    color: var(--tlumeny);
    font: inherit;
    font-size: 0.9rem;
    padding: 6px 14px;
    cursor: pointer;
}
.prepinac button[aria-pressed="true"] { background: var(--modra); color: #fff; }

.mrizka-grafu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 14px;
}

figcaption { font-size: 0.9rem; font-weight: 600; margin-bottom: 8px; }
canvas { width: 100% !important; height: 220px !important; }

footer {
    padding-top: 28px;
    padding-bottom: 32px;
    color: var(--tlumeny);
    font-size: 0.9rem;
}
footer a { color: var(--modra); }
.navstevy { margin: 8px 0 0; }

/* Mobil: menší dlaždice po dvou vedle sebe, teplota přes celou šířku */
@media (max-width: 600px) {
    .hlavicka { padding-top: 16px; padding-bottom: 12px; }
    h1 { font-size: 1.7rem; }
    h2 { font-size: 0.72rem; }
    .podtitul, .aktualizace { font-size: 0.85rem; }

    .mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .karta { padding: 12px; border-radius: 12px; }

    .hlavni {
        grid-column: 1 / -1;
        grid-row: auto;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 0 20px;
    }
    .hlavni h2 { grid-column: 1 / -1; }
    .hlavni dl { margin-top: 0; }

    .hodnota { font-size: 1.6rem; margin: 4px 0 6px; }
    .hodnota small { font-size: 0.8rem; }
    .hodnota.velka { font-size: 3rem; margin: 2px 0 0; }
    .hodnota.velka small { font-size: 1.2rem; }

    dl div { font-size: 0.8rem; gap: 0 6px; flex-wrap: wrap; }
    dd { margin-left: auto; }

    .vitr { gap: 8px; }
    .kompas { width: 40px; height: 40px; }

    .grafy { margin-top: 20px; }
    .mrizka-grafu { gap: 10px; }
    figcaption { font-size: 0.82rem; }
    canvas { height: 170px !important; }
}