/* ---------------------------------------------------------------- pisava (Onest, lokalno – brez zunanjih strežnikov) */
@font-face {
    font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("fonts/onest-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("fonts/onest-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- žetoni */
:root {
    color-scheme: light;
    --page: #e6eaef;
    --card: #ffffff;
    --ink: #15202b;
    --ink2: #4a5663;
    --muted: #5c6670;
    --line: #e1e6ec;
    --axis: #c4ccd5;
    --ring: rgba(21, 32, 43, 0.09);
    --lift: 0 1px 2px rgba(21, 32, 43, 0.04), 0 8px 24px -12px rgba(21, 32, 43, 0.12);
    --accent: #1c5cab;
    --accent-ink: #ffffff;
    --wash: #eef4fc;
    --error: #d03b3b;
    --ok: #006300;
    --ok-bg: #e8f3e8;
    --warn-bg: #fff4dc;
    --warn-ink: #7a5200;
    --radius: 12px;

    /* časovni bloki: vsak svoja barva, od toplih (dražji) do hladnih (cenejši); prejem brez blokov */
    --b1: #d63a3a; --b2: #f07c22; --b3: #e3ad00; --b4: #3a86e0; --b5: #7b5fd6; --imp: #3a82f4;
    /* oddaja v omrežje */
    --exp: #14b87f;
    /* faze L1–L3 (preverjene kategorične barve) */
    --ph1: #2a78d6; --ph2: #eb6834; --ph3: #1baf7a;
    /* dnevna profila */
    --s1: #2f80ed; --s2: #f26b30;
    /* merilnik moči: v redu / blizu meje / čez mejo */
    --heat: #f26b30; --sun: #f2b100;
    /* barve let (stalne po letnici) */
    --y1: #2f80ed; --y2: #f26b30; --y3: #14b87f; --y4: #eda100; --y5: #e87ba4;
    --g-ok: #2a78d6; --g-ok2: #5598e7; --g-warn: #f0a020; --g-bad: #e5484d;
    /* toplotna karta: prejem (modra) in oddaja (zelenomodra), od nič do največ */
    --h0: #eef4fc; --h1: #cde2fb; --h2: #9ec5f4; --h3: #6da7ec; --h4: #3987e5; --h5: #256abf; --h6: #184f95; --h7: #0d366b;
    --x0: #eaf7f1; --x1: #c4ebdb; --x2: #8fdabd; --x3: #55c69b; --x4: #1baf7a; --x5: #148a60; --x6: #0e6848; --x7: #094a33;
}
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
        color-scheme: dark;
        --page: #080c10; --card: #151c23; --ink: #eef2f6; --ink2: #b6c0ca; --muted: #8995a1;
        --line: #252f39; --axis: #36424e; --ring: rgba(255, 255, 255, 0.08);
        --lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
        --accent: #5598e7; --accent-ink: #0b0b0b; --wash: #1d2a3a;
        --error: #e66767; --ok: #0ca30c; --ok-bg: #16301a; --warn-bg: #3a2c0c; --warn-ink: #fab219;
        --b1: #ef5f5f; --b2: #f58a3a; --b3: #f2c230; --b4: #5aa2f0; --b5: #9a82ec; --imp: #4a92f6;
        --exp: #1aa875;
        --ph1: #3987e5; --ph2: #d95926; --ph3: #199e70;
        --s1: #4590f5; --s2: #e3622c;
        --heat: #e3622c; --sun: #f5c033;
        --y1: #4590f5; --y2: #e3622c; --y3: #1aa875; --y4: #c98500; --y5: #d55181;
        --g-ok: #3987e5; --g-ok2: #6da7ec; --g-warn: #f5b02e; --g-bad: #ec6a6e;
        --h0: #1d2026; --h1: #15273f; --h2: #133e72; --h3: #1c5cab; --h4: #3987e5; --h5: #6da7ec; --h6: #9ec5f4; --h7: #cde2fb;
        --x0: #1a2420; --x1: #12291f; --x2: #0e5a3f; --x3: #127a55; --x4: #199e70; --x5: #3fbf8f; --x6: #7fd8b5; --x7: #c0eedb;
    }
}

/* ---------------------------------------------------------------- osnova */
* { box-sizing: border-box; }
body {
    margin: 0; background: var(--page); color: var(--ink);
    font: 16px/1.5 "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--accent); }
h1 { font-size: 26px; line-height: 1.2; margin: 0 0 6px; font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: 18px; margin: 0 0 4px; font-weight: 650; letter-spacing: -0.005em; }
h3 { font-size: 15px; margin: 0 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: var(--error); font-weight: 500; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.top {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--card);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; color: var(--ink); }
.bolt { width: 26px; height: 26px; }
.brand-logo { width: 44px; height: 44px; display: block; flex: none; }
@media (max-width: 640px) { .brand-logo { width: 38px; height: 38px; } }
.bolt rect { fill: var(--accent); }
.bolt path { fill: var(--accent-ink); }
.mainnav { display: flex; align-items: center; gap: 16px; font-size: 14px; flex-wrap: wrap; }
.mainnav a { text-decoration: none; color: var(--ink2); }
.mainnav a:hover { color: var(--accent); }
.who { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-sm { display: none; }
.logout { margin: 0; }
main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 24px 16px; }
footer { text-align: center; color: var(--muted); font-size: 13px; padding: 20px 16px; }
footer a { color: var(--muted); }

.card {
    background: var(--card); border: 1px solid var(--ring); border-radius: var(--radius);
    padding: 20px; margin-bottom: 16px;
}
.card.narrow { max-width: 440px; margin: 24px auto; }
.card.medium { max-width: 680px; margin: 24px auto; }
.card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.card > header p { margin: 0; }

/* ---------------------------------------------------------------- obrazci */
label { display: block; margin-bottom: 14px; font-weight: 500; }
label small { color: var(--muted); font-weight: 400; }
input[type=email], input[type=password], input[type=text], input[type=date], input[type=month], input[type=number], select, textarea {
    display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit;
    color: var(--ink); background: var(--page); border: 1px solid var(--line); border-radius: 8px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
label.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 14px; }
label.check input { margin-top: 3px; }
button, .btn {
    display: inline-block; width: 100%; padding: 11px 16px; font: inherit; font-weight: 600; cursor: pointer;
    border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: var(--accent-ink);
    text-align: center; text-decoration: none;
}
button.secondary, .btn.secondary { background: transparent; color: var(--accent); }
button.danger { background: var(--error); border-color: var(--error); color: #fff; }
button.inline, .btn.inline { width: auto; padding: 8px 14px; font-size: 14px; }
button.link { width: auto; padding: 0; border: 0; background: none; color: var(--ink2); font-weight: 400; font-size: 14px; }
button.link:hover { color: var(--accent); }
.links { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; background: var(--ok-bg); }
.flash.error { color: var(--error); }
.notice { padding: 12px 14px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-ink); margin-bottom: 16px; font-size: 14px; }
.notice.info { background: var(--wash); color: var(--ink2); }
.notice.ok { background: var(--ok-bg); color: var(--ink2); }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 20px 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.steps { padding-left: 20px; margin: 8px 0 16px; }
.steps li { margin-bottom: 6px; }

/* ---------------------------------------------------------------- merilna mesta: seznam */
.meters { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.meter-card { display: block; text-decoration: none; color: inherit; margin: 0; transition: border-color .15s; }
.meter-card:hover { border-color: var(--accent); }
.meter-card h2 { margin-bottom: 0; }
.meter-card .meta { margin: 2px 0 16px; }
.meter-card .addr { color: var(--muted); font-size: 13px; }
.mini-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.mini-kpis div { font-size: 13px; color: var(--ink2); }
.mini-kpis strong { display: block; font-size: 20px; color: var(--ink); font-weight: 650; }
.spark { height: 56px; }
.add-card { display: flex; align-items: center; justify-content: center; min-height: 200px; border-style: dashed; color: var(--accent); font-weight: 600; text-decoration: none; }
.status { font-size: 13px; color: var(--muted); }
.status.bad { color: var(--error); }

/* ---------------------------------------------------------------- merilno mesto: glava in zavihki */
.meter-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.meter-head p { margin: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.tabs a {
    padding: 8px 16px; text-decoration: none; color: var(--ink2); background: var(--card);
    border: 1px solid var(--line); border-radius: 99px; white-space: nowrap; font-size: 15px; font-weight: 500;
}
.tabs a:hover { color: var(--ink); border-color: var(--axis); }
.tabs a.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.period { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.period .label { font-size: 20px; font-weight: 650; min-width: 200px; }
.period a.nav, .period span.nav {
    display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); background: var(--card);
}
.period span.nav { color: var(--axis); }
.period form { display: flex; gap: 6px; align-items: center; margin: 0 0 0 auto; }
.period form input { margin: 0; width: auto; padding: 7px 10px; }
.period .tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.daytag { font-size: 13px; padding: 2px 8px; border-radius: 99px; background: var(--wash); color: var(--ink2); }

/* ---------------------------------------------------------------- številke na vrhu */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--ring); border-radius: var(--radius); padding: 14px 14px 12px; min-width: 0; }
.kpi .k { font-size: 13px; color: var(--ink2); display: flex; align-items: center; gap: 8px; font-weight: 500; }
.kpi .v { font-size: 27px; font-weight: 650; line-height: 1.15; margin-top: 8px; white-space: nowrap; }
.kpi .v small { font-size: 14px; font-weight: 500; color: var(--ink2); }
.kpi .s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ki { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; align-items: center; justify-content: center; flex: none; background: var(--wash); color: var(--accent); }
.ki .ico { width: 16px; height: 16px; }
.ki-exp { background: color-mix(in srgb, var(--exp) 16%, transparent); color: var(--exp); }
.ev-sun { color: var(--exp); cursor: help; }
.ev-sun .ico { width: 14px; height: 14px; vertical-align: -2px; }
.ki-bal { background: color-mix(in srgb, var(--s1) 14%, transparent); color: var(--s1); }
.ki-peak { background: color-mix(in srgb, var(--s2) 16%, transparent); color: var(--s2); }
.ki-eur { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chips { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; padding: 2px 7px; border-radius: 99px; background: var(--page); border: 1px solid var(--line); white-space: nowrap; }
.chip-l { font-weight: 500; color: var(--muted); }
.chip.better { color: var(--ok); }
.chip.worse { color: var(--error); }
.chip.neutral, .chip.flat { color: var(--ink2); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* ---------------------------------------------------------------- grafi */
.chart { position: relative; height: 320px; }
.chart.tall { height: 380px; }
.chart.short { height: 240px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid2 > .card { margin-bottom: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink2); margin: 0 0 10px; padding: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: 6px; }
.legend .dash { width: 18px; height: 0; border-top: 2px dashed var(--ink2); }
.legend .lg-temp { cursor: pointer; user-select: none; border-radius: 6px; padding: 1px 6px; margin: -1px -6px; }
.legend .lg-temp:hover { background: var(--wash); }
.legend .lg-temp:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.legend .lg-temp.off { opacity: .5; text-decoration: line-through; }
.legend .sw-line { width: 16px; height: 3px; border-radius: 2px; }
.wa-note { margin: -4px 0 16px; }
.fc-line { display: flex; align-items: center; gap: 6px; }
.fc-line .ico { width: 15px; height: 15px; color: var(--sun); flex: none; }
.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.toggle button { width: auto; border: 0; border-radius: 0; background: transparent; color: var(--ink2); padding: 6px 12px; font-size: 13px; font-weight: 500; }
.toggle button.on { background: var(--accent); color: var(--accent-ink); }

/* toplotna karta */
.heat-wrap { position: relative; overflow-x: auto; }
.heat-wrap canvas { display: block; }
.heat-scale { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.heat-scale .bar { display: flex; height: 10px; width: 180px; border-radius: 3px; overflow: hidden; }
.heat-scale .bar span { flex: 1; }
.tip {
    position: fixed; pointer-events: none; z-index: 10; display: none;
    background: var(--card); color: var(--ink); border: 1px solid var(--ring); border-radius: 8px;
    padding: 8px 10px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.12); white-space: nowrap;
}
.tip b { font-weight: 650; }

/* ---------------------------------------------------------------- primerjave, dobavitelj, razno */
.cmp { margin-top: 6px; font-size: 12px; display: grid; gap: 2px; }
.delta { font-weight: 650; white-space: nowrap; }
.delta.better { color: var(--ok); }
.delta.worse { color: var(--error); }
.delta.neutral, .delta.flat { color: var(--ink2); }
.vs { color: var(--muted); }
.supplier { margin: 2px 0 0; color: var(--ink2); }
.meter-card .supplier { margin: 1px 0 0; }
.mh-refresh { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mh-actions { display: flex; gap: 8px; }
.mh-actions .btn { width: auto; display: inline-flex; align-items: center; }
.mh-actions .btn.on { border-color: var(--accent); background: var(--wash); }
.kpis.inner { margin-bottom: 12px; }
.kpis.inner .kpi { background: var(--page); }
.split-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; background: var(--card); }
.split-bar span { display: block; height: 100%; }
.split-legend { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
.split-legend div { display: flex; align-items: center; gap: 6px; }
.export { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.row-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.row-form label { flex: 1; min-width: 220px; margin-bottom: 0; }
.seg { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-bottom: 10px; }
.price-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.price-fields[data-mode=ET] .f-vt, .price-fields[data-mode=ET] .f-mt { display: none; }
.price-fields[data-mode=VTMT] .f-et { display: none; }
#ps[data-src=catalog] .src-manual, #ps[data-src=manual] .src-catalog { display: none; }
.peaks { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 14px; }
.peaks li { display: flex; justify-content: space-between; gap: 10px; max-width: 360px; }
.tgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 10px; }
.nowrap { white-space: nowrap; }
.heat-detail { min-height: 1.4em; margin: 8px 0 0; color: var(--ink2); }
label.check span { display: inline; }

label.check.consent { background: var(--wash); border-radius: 8px; padding: 10px 12px; color: var(--ink2); }
article.legal h2 { font-size: 17px; margin-top: 22px; }
article.legal p, article.legal li { font-size: 15px; color: var(--ink2); }

/* ---------------------------------------------------------------- vstopna stran */
.mainnav.guest .btn.inline { padding: 7px 14px; color: var(--accent-ink); }
main.landing { max-width: 1180px; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-top: 18px; padding-bottom: 8px; }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--wash); padding: 5px 12px; border-radius: 99px; margin: 0 0 14px; }
.eyebrow .ico { width: 16px; height: 16px; }
.hero h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 14px; }
.hero .hl { color: var(--accent); }
.lead { font-size: 17px; color: var(--ink2); margin: 0 0 16px; max-width: 560px; }
.vs-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.vs-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink2); }
.vs-list .ico { color: var(--accent); flex: none; margin-top: 2px; }
.vs-list strong { color: var(--ink); }
.cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cta .btn { width: auto; padding: 12px 22px; display: inline-flex; align-items: center; justify-content: center; }
.fine { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted); margin: 0; max-width: 560px; }
.fine .ico { width: 16px; height: 16px; flex: none; color: var(--ok); margin-top: 1px; }
.hero-demo { position: relative; }
.hero-demo::before { content: ""; position: absolute; inset: -18px -10px -18px 30px; background: radial-gradient(circle at 70% 30%, var(--wash), transparent 70%); border-radius: 32px; z-index: 0; }
.demo-card { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--ring); border-radius: 18px; padding: 18px; box-shadow: 0 18px 40px rgba(16, 66, 129, .12); }
.demo-head { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 12px; }
.demo-head span { color: var(--muted); }
.demo-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.demo-kpis > div { background: var(--page); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 2px; }
.demo-kpis b { font-size: 21px; margin-top: 4px; }
.demo-kpis small { font-size: 11.5px; color: var(--muted); }
.demo-kpis em { font-style: normal; justify-self: start; margin-top: 4px; }
.demo-bars { display: flex; align-items: flex-end; gap: 6px; height: 108px; padding: 0 2px; border-bottom: 1px solid var(--axis); }
.demo-bars span { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; gap: 2px; }
.demo-bars i { display: block; border-radius: 3px; }
.demo-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); margin: 8px 0 12px; }
.demo-legend span { display: flex; align-items: center; gap: 5px; }
.demo-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.demo-heat { display: grid; gap: 2px; }
.demo-heat div { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }
.demo-heat i { height: 9px; border-radius: 2px; }
.demo-live { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--page); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; font-size: 13px; }
.demo-live-l { color: var(--muted); }
.demo-live-w { font-size: 17px; font-variant-numeric: tabular-nums; }
.demo-ph { display: flex; gap: 8px; color: var(--muted); font-size: 12px; }
.demo-ph i { font-style: normal; }
.demo-ph b { color: var(--ink2); font-weight: 600; font-variant-numeric: tabular-nums; }
.demo-live .chip { margin-left: auto; font-style: normal; }
.live-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--ok); flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: livePulse 2s infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.features { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.feat-live { border-color: color-mix(in srgb, var(--s2) 45%, transparent) !important; }
.end-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--ring); border-radius: 18px; padding: 20px 24px; }
.end-cta h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.01em; }
.end-cta p { margin: 0; color: var(--ink2); font-size: 15px; }
.end-cta .btn { width: auto; padding: 12px 26px; display: inline-flex; }
.features > div { background: var(--card); border: 1px solid var(--ring); border-radius: 14px; padding: 14px; }
.features h3 { margin: 10px 0 4px; font-size: 15px; }
.features p { margin: 0; font-size: 13px; color: var(--ink2); }
.how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; font-size: 13.5px; color: var(--ink2); }
.how div { display: flex; align-items: center; gap: 10px; }
.how b { display: inline-flex; width: 26px; height: 26px; border-radius: 99px; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); font-size: 13px; flex: none; }

@media (max-width: 960px) {
    .hero { grid-template-columns: 1fr; gap: 24px; }
    .features { grid-template-columns: repeat(3, 1fr); }
    .how { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    main.landing { gap: 18px; }
    .lead { font-size: 15.5px; }
    .cta .btn { flex: 1; }
    .demo-kpis b { font-size: 17px; }
    .features { grid-template-columns: 1fr 1fr; gap: 8px; }
    .features > div { padding: 12px; }
    .how { grid-template-columns: 1fr; }
    .demo-live .chip { display: none; }
    .end-cta { padding: 18px; }
    .end-cta .btn { flex: 1; justify-content: center; }
}

/* ---------------------------------------------------------------- tabele */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { font-weight: 600; color: var(--ink2); font-size: 13px; white-space: nowrap; }
th small { font-weight: 400; color: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }
tfoot td { font-weight: 650; border-top: 1px solid var(--axis); border-bottom: 0; }
td .share { display: flex; align-items: center; gap: 8px; }
td .share .track { flex: 1; min-width: 60px; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
td .share .fill { height: 100%; border-radius: 4px; }
.over { color: var(--error); font-weight: 600; }
.okv { color: var(--ok); }
.blk { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
details.more { margin-top: 12px; }
details.more summary { cursor: pointer; color: var(--accent); font-size: 14px; }
details.explain { background: var(--wash); border-radius: 8px; padding: 10px 14px; margin-top: 12px; font-size: 14px; color: var(--ink2); }
details.explain summary { cursor: pointer; font-weight: 600; color: var(--ink); }
details.explain p { margin: 8px 0 0; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 14px; }
dl.facts dt { color: var(--ink2); }
dl.facts dd { margin: 0; font-weight: 500; }

@media (max-width: 760px) {
    .grid2 { grid-template-columns: 1fr; }
    .grid2 > .card + .card { margin-top: 16px; }
    .chart { height: 270px; }
    .chart.tall { height: 300px; }
    .chart.short { height: 220px; }
    dl.facts { grid-template-columns: 1fr; gap: 2px; }
    dl.facts dd { margin-bottom: 8px; }
    .who { display: none; }
    .who-sm { display: inline; }
    .tgrid { grid-template-columns: repeat(2, 1fr); }
}

/* telefon */
@media (max-width: 640px) {
    body { font-size: 15px; }
    main { padding: 14px 12px 24px; }
    .top { padding: 10px 12px; }
    .brand { font-size: 15px; }
    .mainnav { gap: 4px 14px; }
    .mainnav a, .mainnav button.link { padding: 8px 0; }
    h1 { font-size: 21px; }
    h2 { font-size: 17px; }
    .card { padding: 14px; border-radius: 10px; margin-bottom: 12px; }
    .card.narrow, .card.medium { margin: 8px auto; }

    .meter-head { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 10px; }
    .mh-refresh { justify-content: space-between; }
    .mh-refresh button, .mh-actions .btn { min-height: 40px; }

    .tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
    .tabs a { text-align: center; padding: 10px 4px; font-size: 14px; border-radius: 10px; }

    .period { gap: 8px; margin-bottom: 12px; }
    .period .label { flex: 1; min-width: 0; font-size: 17px; text-align: center; order: 2; }
    .period a.nav, .period span.nav { width: 44px; height: 44px; font-size: 20px; }
    .period .prev { order: 1; }
    .period .next { order: 3; }
    .period .tags { order: 4; width: 100%; justify-content: center; }
    .period form { order: 5; width: 100%; margin: 0; }
    .period form input { width: 100%; min-height: 44px; }

    .kpis { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
    .kpi { padding: 10px 11px; border-radius: 10px; }
    .kpi .k { font-size: 12px; gap: 6px; }
    .ki { width: 24px; height: 24px; border-radius: 7px; }
    .ki .ico { width: 14px; height: 14px; }
    .kpi .v { font-size: 22px; margin-top: 6px; }
    .kpi .v small { font-size: 12px; }
    .kpi .s { font-size: 11.5px; }
    .chip { font-size: 11px; padding: 1px 6px; }

    .card > header { margin-bottom: 8px; }
    .legend { gap: 4px 12px; font-size: 12px; }
    .toggle button { padding: 8px 12px; font-size: 13px; }

    table { font-size: 13px; }
    th, td { padding: 7px 6px; }
    th { font-size: 12px; }
    .hide-sm { display: none; }
    td .share .track { display: none; }

    input[type=email], input[type=password], input[type=text], input[type=date], input[type=month], input[type=number], select { font-size: 16px; min-height: 44px; }
    button, .btn { min-height: 44px; }
    button.inline, .btn.inline { min-height: 40px; }
    .export .btn { flex: 1; }
    .row-form label { min-width: 100%; }
    .row-form button { width: 100%; }
    .meters { grid-template-columns: 1fr; gap: 12px; }
    .add-card { min-height: 80px; }
    .spark { height: 48px; }
}

/* Bilanca (sončna elektrarna): + presežek, − primanjkljaj */
.kpi.bal.plus { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 5%, var(--card)); }
.kpi.bal.minus { border-color: color-mix(in srgb, var(--error) 30%, transparent); background: color-mix(in srgb, var(--error) 4%, var(--card)); }
.kpi.bal.plus .v, .kpi.bal.plus .s { color: var(--ok); }
.kpi.bal.minus .v, .kpi.bal.minus .s { color: var(--error); }
.kpi.bal .v small { color: inherit; opacity: .8; }
.balbar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-top: 9px; background: var(--line); gap: 2px; }
.balbar i { display: block; height: 100%; min-width: 2px; }
.balbar .bi { background: var(--imp); }
.balbar .be { background: var(--exp); }
.ballab { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--muted); margin-top: 3px; white-space: nowrap; }

/* Primerjava dobaviteljev */
.rank { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 6px; }
.rank li { display: grid; grid-template-columns: 22px minmax(0, 1.4fr) minmax(60px, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--page); font-size: 13.5px; }
.rank li.cur { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--wash); }
.rank .rn { color: var(--muted); font-weight: 600; text-align: right; }
.rank .rl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .rl span { color: var(--ink2); }
.rank .rl em { font-style: normal; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; margin-left: 2px; }
.rank .rl em.me { color: var(--accent); border-color: var(--accent); }
.rank .rb { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.rank .rb i { display: block; height: 100%; background: var(--imp); border-radius: 4px; }
.rank li:first-child .rb i { background: var(--ok); }
.rank .rb { position: relative; }
.rank .rv { font-weight: 650; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rank .rv small { display: block; font-size: 11.5px; font-weight: 500; }
.rank .rv small.better { color: var(--ok); }
.rank .rv small.worse { color: var(--error); }
@media (max-width: 640px) {
    .rank li { grid-template-columns: 18px minmax(0, 1fr) auto; row-gap: 4px; }
    .rank .rl { white-space: normal; }
    .rank .rb { grid-column: 2 / 4; grid-row: 2; }
}

/* Vstopna stran: varnost, povezava na vodnik */
.trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink2); max-width: 600px; }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust .ico { width: 16px; height: 16px; color: var(--ok); }
.howlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); text-decoration: none; }
.howlink .ico { width: 18px; height: 18px; flex: none; }
.howlink:hover { text-decoration: underline; }

/* Vodnik */
article.guide { max-width: 820px; margin: 16px auto; }
article.guide h1 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.12; margin: 0 0 10px; letter-spacing: -0.01em; }
article.guide h2 { font-size: 19px; margin: 30px 0 8px; scroll-margin-top: 16px; }
article.guide p, article.guide li { font-size: 15px; color: var(--ink2); line-height: 1.6; }
article.guide strong { color: var(--ink); }
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.toc a { font-size: 13px; padding: 5px 11px; border-radius: 99px; background: var(--page); border: 1px solid var(--line); color: var(--ink2); text-decoration: none; }
.toc a:hover { border-color: var(--accent); color: var(--accent); }
.help { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 6px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 650; text-decoration: none; vertical-align: 2px; }
.help:hover { border-color: var(--accent); color: var(--accent); }
.card[id], section[id] { scroll-margin-top: 12px; }
.blocktab { font-size: 14px; }
.blocktab th { font-weight: 500; color: var(--ink2); text-align: left; }
.blocktab td.bk { text-align: center; font-weight: 700; border-radius: 6px; }
.blocktab td.b1 { background: var(--b1); color: #fff; } .blocktab td.b2 { background: var(--b2); color: #fff; }
.blocktab td.b3 { background: var(--b3); color: #0b0b0b; } .blocktab td.b4 { background: var(--b4); color: #fff; }
.blocktab td.b5 { background: var(--b5); color: #fff; }
.faq details { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; background: var(--page); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.faq details p { margin: 8px 0 2px; }
.pos { color: var(--ok); font-weight: 700; } .neg { color: var(--error); font-weight: 700; }
@media (prefers-color-scheme: dark) {
    .blocktab td.b1, .blocktab td.b2 { color: #0b0b0b; }
    .blocktab td.b4, .blocktab td.b5 { color: #fff; }
}

/* ---------------------------------------------------------------- odčitek: KPI kot en povezan trak */
.kpis {
    gap: 0; background: var(--card); border: 1px solid var(--ring); border-radius: 14px;
    overflow: hidden; box-shadow: var(--lift); grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.kpis .kpi { border: 0; border-radius: 0; background: transparent; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); padding: 16px 18px 14px; }
.kpis .kpi .v { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: 10px; }
.kpis .kpi .v small { letter-spacing: 0; }
.kpis .kpi.bal.plus, .kpis .kpi.bal.minus { border: 0; }
.kpis .kpi.bal.plus { background: color-mix(in srgb, var(--ok) 6%, transparent); }
.kpis .kpi.bal.minus { background: color-mix(in srgb, var(--error) 5%, transparent); }
.kpis.inner { box-shadow: none; background: var(--page); }
@media (max-width: 640px) {
    .kpis { grid-template-columns: 1fr 1fr; border-radius: 12px; }
    .kpis .kpi { padding: 12px 12px 11px; }
    .kpis .kpi .v { font-size: 23px; margin-top: 7px; }
    .kpis .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- vstopna stran: ozadje (dnevni profil čez časovne bloke) */
body.has-bg { position: relative; overflow-x: hidden; }
.land-bg { position: fixed; left: 0; right: 0; bottom: 0; height: min(78vh, 680px); z-index: 0; pointer-events: none; }
.land-bg svg { width: 100%; height: 100%; display: block; }
.land-bg .lb-hour { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .55; }
body.has-bg > footer { padding-bottom: 22px; }
main.landing .btn.secondary { background: var(--card); }
.land-bg .lb-line { fill: none; stroke: var(--accent); stroke-opacity: .42; stroke-width: 2; vector-effect: non-scaling-stroke;
    stroke-dasharray: 1; stroke-dashoffset: 0; }
.land-bg .lb-band { opacity: .9; }
body.has-bg > header, body.has-bg > main, body.has-bg > footer { position: relative; z-index: 1; }
body.has-bg > header { background: color-mix(in srgb, var(--page) 82%, transparent); backdrop-filter: blur(6px); }
@media (prefers-reduced-motion: no-preference) {
    .land-bg .lb-line { animation: lbDraw 1.6s cubic-bezier(.4, 0, .2, 1) .15s both; }
    .land-bg .lb-area { animation: lbFade 1.2s ease-out .9s both; }
    @keyframes lbDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    @keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
}
.hero h1 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 750; letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 18px; }
.lead { color: var(--ink2); }
.features > div, .demo-card { background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(4px); }
@media (max-height: 820px) and (min-width: 900px) { .hero h1 { font-size: 46px; margin-bottom: 12px; } }
@media (max-width: 900px) {
    .land-bg { position: absolute; top: 0; bottom: auto; height: 100svh; opacity: .75; }
    .land-bg .lb-hour { display: none; }
    .features > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- nadzorna plošča */
.meter-card { box-shadow: var(--lift); padding: 22px 22px 18px; }
.meter-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.meter-card h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.meter-card .mini-kpis { gap: 14px 12px; }
.meter-card .mini-kpis strong { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin-top: 2px; }
.meter-card .spark { height: 70px; margin-top: 4px; }
.add-card { min-height: 120px; align-self: start; box-shadow: none; background: transparent; border-color: var(--axis); }
.add-card:hover { border-color: var(--accent); background: var(--wash); }

/* ---------------------------------------------------------------- prijava v oknu nad vstopno stranjo */
dialog.auth-dlg {
    width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
    padding: 26px 26px 20px; border: 1px solid var(--ring); border-radius: 18px;
    background: var(--card); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(16, 40, 70, .45);
}
dialog.auth-dlg::backdrop { background: color-mix(in srgb, var(--page) 55%, transparent); backdrop-filter: blur(5px); }
dialog.auth-dlg h1 { font-size: 24px; margin-bottom: 14px; }
.dlg-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; padding: 0; border-radius: 99px; border: 0;
    background: var(--page); color: var(--ink2); font-size: 20px; line-height: 1; cursor: pointer; }
.dlg-x:hover { background: var(--line); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
    dialog.auth-dlg[open] { animation: dlgIn .22s cubic-bezier(.2, .8, .2, 1); }
    @keyframes dlgIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
}
@media (max-width: 640px) {
    dialog.auth-dlg { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: 20px 20px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); }
}
/* samostojne prijavne strani na ozadju vstopne strani */
main.auth { display: flex; flex-direction: column; justify-content: center; }
main.auth .card { box-shadow: var(--lift); }

/* gumb Google (po Googlovih smernicah: bel, z barvnim »G«) */
.btn.google { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f;
    border: 1px solid #747775; font-weight: 600; text-decoration: none; }
.btn.google:hover { background: #f6f8fa; }
.btn.google svg { flex: none; }
@media (prefers-color-scheme: dark) { .btn.google { background: #131314; color: #e3e3e3; border-color: #8e918f; } .btn.google:hover { background: #1f2023; } }

/* ---------------------------------------------------------------- Shelly */
.phdot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ph-a { background: var(--ph1); } .ph-b { background: var(--ph2); } .ph-c { background: var(--ph3); }
.live { margin-bottom: 16px; }
.live-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 4px 8px 6px; }
.live-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.live .dot { width: 10px; height: 10px; border-radius: 99px; background: var(--axis); }
.live .dot.on { background: var(--g-ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--g-ok) 22%, transparent); }
@media (prefers-reduced-motion: no-preference) { .live .dot.on { animation: livePulse 2.4s ease-in-out infinite; } }
@keyframes livePulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--g-ok) 8%, transparent); } }
.live-kpis .live-total .v { font-size: 34px; }
.live-kpis .s b { color: var(--ink); font-weight: 650; }
.kpis .kpi.warn { background: color-mix(in srgb, var(--warn-ink) 7%, transparent); }
.kpis .kpi.warn .s { color: var(--warn-ink); }
/* nastavitve */
.shelly-card > header { align-items: center; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 14px; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-track { width: 44px; height: 26px; border-radius: 99px; background: var(--axis); position: relative; transition: background .15s; flex: none; }
.sw-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 99px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + .sw-track { background: var(--ok); }
.switch input:checked + .sw-track::after { transform: translateX(18px); }
.switch input:focus-visible + .sw-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.shelly-card .shelly-form { display: none; }
.shelly-card:has(#shellyOn:checked) .shelly-form { display: block; }
.shelly-card:has(#shellyOn:checked) .sw-label { font-size: 0; }
.shelly-card:has(#shellyOn:checked) .sw-label::after { content: "Vklopljeno"; font-size: 14px; }
.shelly-fields { display: grid; gap: 10px; margin-top: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.shelly-status { display: grid; gap: 6px; margin: 4px 0 14px; font-size: 14px; }
.shelly-status div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.shelly-status dt { color: var(--muted); }
.shelly-status dd { margin: 0; }
@media (max-width: 640px) { .shelly-status div { grid-template-columns: 1fr; gap: 0; } }
.ok-t { color: var(--ok); } .bad-t { color: var(--error); }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.inline-details { flex: 1 1 100%; }
.inline-details > summary { list-style: none; display: inline-flex; }
.inline-details > summary::-webkit-details-marker { display: none; }
.inline-details[open] > summary { margin-bottom: 12px; }
.remove-shelly { margin-top: 14px; }
.danger-link { color: var(--error) !important; }
.show-sm { display: none; }
@media (max-width: 640px) {
    .show-sm { display: inline; }
}

/* preklop Dan / Mesec / Leto (Shelly) */
.modes { display: inline-flex; gap: 2px; padding: 3px; background: var(--card); border: 1px solid var(--ring); border-radius: 10px; margin-bottom: 12px; }
.modes a { padding: 6px 16px; border-radius: 8px; text-decoration: none; color: var(--ink2); font-size: 14px; font-weight: 600; }
.modes a:hover { color: var(--ink); }
.modes a.on { background: var(--accent); color: var(--accent-ink); }

/* poraba po fazah */
.phase-split[data-dir="imp"] .d-exp, .phase-split[data-dir="exp"] .d-imp { display: none; }
.ps-table td .ph-max { font-weight: 700; color: var(--ink); }
.ps-table td, .ps-table th { white-space: nowrap; }
.ps-table tfoot th { border-top: 2px solid var(--line); font-weight: 650; }
.ps-table tfoot small { font-weight: 400; color: var(--muted); }
.ps-table { max-height: 460px; overflow: auto; margin-top: 12px; }
.ps-table thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }

/* podnapisi v karticah: dve informaciji v dveh vrsticah, število in enota skupaj, brez osamljenih besed */
.kpi .s { text-wrap: pretty; }
.kpi .s .ln { display: block; }
.nw { white-space: nowrap; }

/* ---------------------------------------------------------------- moč zdaj proti dogovorjeni */
.gauge { margin-top: 12px; padding: 16px 18px 14px; background: var(--card); border-radius: var(--radius); box-shadow: var(--lift); }
.gauge-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.gauge-head h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.g-blk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 2px 9px 2px 4px; border-radius: 99px; background: var(--wash); color: var(--ink); white-space: nowrap; }
.g-blk i { width: 18px; height: 18px; border-radius: 99px; display: inline-grid; place-items: center; font-style: normal; font-size: 11px; color: #fff; background: var(--b3); }
.g-blk[data-b="1"] i { background: var(--b1); } .g-blk[data-b="2"] i { background: var(--b2); } .g-blk[data-b="4"] i { background: var(--b4); } .g-blk[data-b="5"] i { background: var(--b5); color: #0b2340; }
.gauge-next { font-size: 13px; color: var(--muted); }
.gauge-read { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px; }
.gauge-read .big { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.gauge-read .big small { font-size: 15px; font-weight: 550; color: var(--muted); margin-left: 2px; }
.gauge-read .of { color: var(--muted); font-size: 14px; }
.g-track { position: relative; height: 14px; margin: 30px 0 30px; border-radius: 99px; background: color-mix(in srgb, var(--axis) 45%, transparent); }
.g-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--g-ok2), var(--g-ok)); }
@media (prefers-reduced-motion: no-preference) { .g-fill { transition: width .6s ease, background-color .3s; } .g-mk { transition: left .6s ease; } }
.gauge[data-st="warn"] .g-fill { background: var(--g-warn); }
.gauge[data-st="over"] .g-fill { background: var(--g-bad); }
.g-mk { position: absolute; top: -6px; bottom: -6px; width: 0; }
.g-mk::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; border-radius: 2px; background: var(--ink); }
.g-mk.lim { top: -9px; bottom: -9px; }
.g-mk.lim::before { background: repeating-linear-gradient(to bottom, var(--ink) 0 4px, transparent 4px 7px); left: -1px; width: 2px; border-radius: 0; }
.g-mk.avg { top: 2px; bottom: 2px; }
.g-mk.avg::before { left: -4px; width: 8px; border-radius: 99px; background: var(--card); box-shadow: 0 0 0 2px var(--ink); }
.g-mk span { position: absolute; left: 0; transform: translateX(-50%); font-size: 12px; white-space: nowrap; color: var(--ink2); }
.g-mk.agr span { bottom: calc(100% + 3px); font-weight: 650; color: var(--ink); }
.g-mk.lim span { top: calc(100% + 3px); }
.g-mk.edge-r span { transform: translateX(-100%); }
.g-mk.edge-l span { transform: none; }
.g-scale { display: none; }
.g-msg { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 14px; background: var(--wash); color: var(--ink2); }
.g-msg b { color: var(--ink); }
.g-msg .ic { flex: none; width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; color: #fff; background: var(--g-ok); font-weight: 700; font-size: 13px; line-height: 1; }
.gauge[data-st="warn"] .g-msg { background: var(--warn-bg); }
.gauge[data-st="warn"] .g-msg .ic { background: var(--g-warn); color: #2b1d00; }
.gauge[data-st="over"] .g-msg { background: color-mix(in srgb, var(--g-bad) 14%, var(--card)); }
.gauge[data-st="over"] .g-msg .ic { background: var(--g-bad); }
.gauge[data-st="none"] .g-msg { background: var(--wash); }
.gauge[data-st="none"] .g-msg .ic { background: var(--axis); }
.g-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.g-legend li { display: flex; align-items: center; gap: 6px; }
.g-legend i { display: inline-block; width: 12px; height: 12px; }
.g-legend .l-agr { width: 3px; background: var(--ink); border-radius: 2px; }
.g-legend .l-lim { width: 2px; background: repeating-linear-gradient(to bottom, var(--ink) 0 3px, transparent 3px 5px); }
.g-legend .l-avg { width: 8px; height: 8px; border-radius: 99px; box-shadow: 0 0 0 2px var(--ink); }
.g-limit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.g-limit label { font-size: 14px; color: var(--ink2); margin: 0; }
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.stepper button { width: 38px; padding: 0; margin: 0; border: 0; border-radius: 0; background: var(--page); color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1; }
.stepper button:hover { background: var(--wash); }
.stepper input { width: 72px; margin: 0; border: 0; border-radius: 0; text-align: center; font-weight: 650; padding: 8px 4px; background: transparent; }
.stepper .u { align-self: center; padding: 0 10px 0 0; font-size: 13px; color: var(--muted); }
.g-limit .btn, .g-limit button[type=submit] { width: auto; padding: 8px 14px; font-size: 14px; margin: 0; }
.g-limit .linklike { background: none; border: 0; color: var(--accent); padding: 0; width: auto; font-size: 13px; text-decoration: underline; margin: 0; }
@media (max-width: 520px) {
    .gauge { padding: 14px 14px 12px; }
    .g-track { height: 16px; }
    .g-legend { gap: 4px 12px; }
    .gauge-read .big { font-size: 26px; }
    .g-limit label { width: 100%; }
}

/* stalna in sezonska poraba */
.sw-seas { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--heat); flex: none; }

/* električni avto (nastavitve) */
.ev-fields[hidden] { display: none; }
.ev-fields { margin-top: 4px; }
.seg-field { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.seg-field legend { font-weight: 500; padding: 0; margin-bottom: 10px; }
.seg-field .seg { margin: 0; }
.seg-field label.check { margin: 0; }
.peaks li { max-width: 480px; }
.peaks li strong { margin-left: auto; }
.peaks .chip svg { width: 12px; height: 12px; }

/* baterija: odgovor */
.verdict { border-radius: 12px; padding: 14px 16px; margin: 4px 0 14px; background: var(--wash); color: var(--ink2); }
.verdict .vh { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.verdict .vi { width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center; font-size: 15px; color: #fff; background: var(--accent); flex: none; }
.verdict p { margin: 6px 0 0; font-size: 15px; }
.verdict[data-v="no"] { background: color-mix(in srgb, var(--g-bad) 10%, var(--card)); }
.verdict[data-v="no"] .vi { background: var(--g-bad); }
.verdict[data-v="maybe"] { background: var(--warn-bg); }
.verdict[data-v="maybe"] .vi { background: var(--g-warn); color: #2b1d00; }
.verdict[data-v="yes"] { background: var(--ok-bg); }
.verdict[data-v="yes"] .vi { background: var(--ok); }
.bat-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.bat-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bat-fields label[hidden] { display: none; }
@media (max-width: 640px) { .bat-fields { grid-template-columns: 1fr; } }
.explain ul { margin: 6px 0 0; padding-left: 18px; }
.explain li { margin: 4px 0; }

/* elektrarna v letu */
.pm { margin: 4px 0 18px; }
.pm-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.pm-side { display: flex; align-items: baseline; gap: 8px; }
.pm-n { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.pm-side.plus .pm-n { color: var(--exp); }
.pm-side.minus .pm-n { color: var(--s1); }
.pm-l { font-size: 14px; color: var(--ink2); }
.pm-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--card); }
.pm-bar .p { background: var(--exp); border-radius: 99px 0 0 99px; }
.pm-bar .m { flex: 1; background: var(--s1); border-radius: 0 99px 99px 0; }
.pm p { margin: 8px 0 0; }
.rec-h { font-size: 15px; margin: 18px 0 10px; }
.rec-hh { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 10px; }
.rec-hh .rec-h { margin: 0; }
.records { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rec { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card); }
.rec .rl { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink2); }
.rec .rl small { color: var(--muted); }
.rec .rv { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 2px; }
.rec .rv small { font-size: 13px; font-weight: 550; color: var(--muted); }
.rec .rv-m { font-size: 20px; }
.rec .rv-m a { color: var(--ink); text-decoration: none; }
.rec .rv-m a:hover { text-decoration: underline; }
.rec .rw { font-size: 13px; color: var(--muted); }
.rd { width: 8px; height: 8px; border-radius: 99px; background: var(--s1); flex: none; display: inline-block; }
.rec-exp .rd, .dpc-exp .rd { background: var(--exp); }
.dp-callouts { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--ink2); margin-bottom: 8px; }
.dpc { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
@media (max-width: 900px) { .records { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .rec { padding: 10px 12px; } .rec .rv { font-size: 21px; } .pm-n { font-size: 26px; } }

/* napoved na kartici merilnega mesta */
.forecast { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px; background: var(--wash); }
.forecast .fl { font-size: 13px; color: var(--ink2); }
.forecast .fv { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; grid-row: span 2; align-self: center; color: var(--ink); }
.forecast .fs { font-size: 12px; color: var(--muted); }
.forecast.plus .fv { color: var(--exp); }
.forecast.minus .fv { color: var(--error); }

/* vzroki konic */
.causes { margin: 14px 0 6px; }
.causes-h { font-weight: 650; margin: 0 0 8px; font-size: 15px; }
.cz-bar { display: flex; gap: 2px; height: 26px; border-radius: 8px; overflow: hidden; }
.cz-bar span { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 650; color: #fff; min-width: 22px; }
.cz-ev { background: var(--b2); }
.cz-long { background: var(--heat); }
.cz-short { background: var(--g-warn); }
.cz-bar .cz-short { color: #2b1d00; }
.cz-leg { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; font-size: 13px; color: var(--ink2); }
.cz-leg li { display: flex; gap: 7px; align-items: baseline; }
.cz-leg i { width: 10px; height: 10px; border-radius: 3px; flex: none; transform: translateY(1px); }
.chip.cz-ev, .chip.cz-long, .chip.cz-short { background: var(--page); }
.chip.cz-ev svg { width: 12px; height: 12px; }
.cz-bar .cz-ev { color: var(--accent-ink); }
.peaks li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 12px; max-width: 520px; }
.peaks li > a { white-space: nowrap; }
.peaks li strong { margin-left: 0; text-align: right; white-space: nowrap; }
.peaks li .chip { justify-self: start; }
@media (max-width: 520px) {
    .peaks li { grid-template-columns: 1fr auto; gap: 2px 10px; padding: 4px 0; }
    .peaks li .chip { grid-column: 1 / -1; }
}

/* sončna sezona */
.season { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 6px; }
.season .ss { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--exp) 9%, var(--card)); }
.season .sl { font-size: 12px; color: var(--ink2); }
.season .sv { font-size: 15px; }
.season .sv strong { font-size: 18px; }
@media (max-width: 640px) { .season { grid-template-columns: 1fr; } .season .ss { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px; } }
.sw-week { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--s1); }
.sw-week.e { background: var(--s2); }
.rec .rl { align-items: flex-start; text-wrap: balance; }
.rec .rl .rd { margin-top: 5px; }

/* vsa leta */
.yr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; background: var(--axis); vertical-align: 0; }
.years-table td .chip { margin-left: 4px; }
.ygrid { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 560px; }
.ygrid th { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; padding: 2px 0; }
.ygrid th.yl { text-align: left; color: var(--ink); font-size: 13px; padding-right: 6px; }
.ygrid td { text-align: center; font-size: 12px; font-weight: 600; padding: 9px 2px; border-radius: 6px; background: var(--page); color: var(--ink); white-space: nowrap; }
.ygrid td.dark { color: #fff; }
.ygrid td.empty { background: transparent; color: var(--muted); font-weight: 400; }
.ygrid td a { color: inherit; text-decoration: none; display: block; }

/* analiza faz */
.ph-kpis .fuse-bar { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--axis) 45%, transparent); margin-top: 10px; overflow: hidden; }
.ph-kpis .fuse-bar span { display: block; height: 100%; border-radius: 99px; background: var(--ph1); }
.ph-kpis .fuse-bar span.ph-b { background: var(--ph2); }
.ph-kpis .fuse-bar span.ph-c { background: var(--ph3); }
.ph-kpis .fuse-bar span[data-hot="1"] { background: var(--g-bad); }

/* ---------- pravne strani: povzetek in preglednice ---------- */
footer .foot-note { display: inline-block; margin-top: 4px; font-size: 12px; opacity: .85; }
.legal .tldr { background: var(--wash); border: 1px solid var(--ring); border-left: 4px solid var(--accent); border-radius: 12px; padding: 4px 16px 8px; margin: 14px 0 6px; }
.legal .tldr h2 { margin-top: 10px; font-size: 15px; }
.legal .tldr ul { margin: 6px 0; padding-left: 18px; }
.legal .tldr li { margin: 4px 0; }
.legal .ptab { width: 100%; font-size: 14px; }
.legal .ptab th, .legal .ptab td { vertical-align: top; text-align: left; padding: 8px 10px; }
.legal .ptab tbody th { font-weight: 600; white-space: normal; min-width: 120px; color: var(--ink); }
.legal .ptab td { color: var(--ink2); }
.legal .ptab td:last-child { min-width: 90px; }
@media (max-width: 600px) {
    .legal .ptab thead { display: none; }
    .legal .ptab tr { display: block; border-bottom: 1px solid var(--ring); padding: 6px 0; }
    .legal .ptab th, .legal .ptab td { display: block; padding: 2px 4px; min-width: 0 !important; }
    .legal .ptab td:last-child:not(:nth-child(2)) { font-size: 12.5px; color: var(--muted); }
}

/* ---------- vodič za API žeton ---------- */
.tg { list-style: none; counter-reset: tg; padding: 0; margin: 12px 0 0; display: grid; gap: 14px; }
.tg-step { counter-increment: tg; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--ring); border-radius: 14px; padding: 14px 16px; }
.tg-txt { position: relative; padding-left: 40px; }
.tg-txt::before { content: counter(tg); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.tg-txt h3 { margin: 3px 0 6px; font-size: 15.5px; color: var(--ink); }
.tg-txt p { margin: 0 0 6px; font-size: 14px; color: var(--ink2); }
.tg-warn { background: color-mix(in srgb, var(--g-warn, #eda100) 14%, transparent); border-radius: 8px; padding: 6px 10px; }
.tg-mock { margin: 0; border: 1px solid var(--ring); border-radius: 10px; overflow: hidden; background: var(--bg, var(--card)); box-shadow: 0 6px 18px -10px rgba(0,0,0,.35); font-size: 12px; }
.tg-bar { display: flex; align-items: center; gap: 5px; padding: 6px 8px; background: var(--wash); border-bottom: 1px solid var(--ring); }
.tg-bar i { width: 7px; height: 7px; border-radius: 99px; background: var(--ring); }
.tg-bar span { margin-left: 6px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--card); border-radius: 99px; padding: 1px 8px; color: var(--muted); font-size: 11px; }
.tg-body { padding: 10px 12px 12px; display: grid; gap: 8px; color: var(--ink2); min-height: 92px; align-content: start; }
.tg-nav { display: flex; gap: 12px; border-bottom: 1px solid var(--ring); padding-bottom: 6px; }
.tg-nav b { font-weight: 500; color: var(--muted); }
.tg-nav b.on { color: var(--ink); font-weight: 700; box-shadow: 0 2px 0 var(--accent); }
.tg-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tg-row.dim { opacity: .5; }
.tg-ph { display: block; height: 8px; border-radius: 99px; background: var(--ring); }
.w25 { width: 25%; } .w45 { width: 45%; } .w60 { width: 60%; }
.tg-in { display: block; height: 22px; border: 1px solid var(--ring); border-radius: 6px; background: var(--card); padding: 2px 8px; line-height: 16px; color: var(--ink); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tg-login { display: grid; gap: 6px; max-width: 200px; margin: 4px auto; width: 100%; }
.tg-btn { justify-self: start; background: var(--ink2); color: var(--card); border-radius: 6px; padding: 3px 10px; font-weight: 600; font-size: 11.5px; }
.tg-btn.acc { background: var(--accent); color: var(--accent-ink); }
.tg-form { display: grid; gap: 7px; }
.tg-form label { display: grid; gap: 2px; font-size: 11px; color: var(--muted); margin: 0; }
.tg-chk { display: inline-flex; align-items: center; gap: 6px; justify-self: start; color: var(--ink); font-weight: 600; }
.tg-chk .box { display: inline-flex; width: 14px; height: 14px; border-radius: 3px; background: var(--accent); color: var(--accent-ink); font-size: 10px; align-items: center; justify-content: center; }
.tg-token { display: flex; align-items: center; gap: 8px; background: var(--wash); border-radius: 6px; padding: 6px 8px; }
.tg-token code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.tg-copy { font-weight: 700; color: var(--accent); }
.tg-hl { position: relative; border-radius: 6px; padding: 2px 6px; outline: 2px solid #f26b30; outline-offset: 1px; animation: tgPulse 2.2s ease-in-out infinite; }
@keyframes tgPulse { 50% { outline-color: color-mix(in srgb, #f26b30 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tg-hl { animation: none; } }
.tg-notes { margin-top: 12px; font-size: 14px; color: var(--ink2); }
.tg-notes p { margin: 6px 0; }
details.tg-wrap .tg-step { background: var(--card); }
@media (max-width: 720px) {
    .tg-step { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
    .tg-mock { max-width: 360px; width: 100%; }
}

/* ---------------------------------------------------------------- vstopna stran: zračna postavitev
   Manj besedila in več prostora: naslov s primerom, nato »Kaj vidiš« in »Začneš v treh korakih«.
   Ozadje (dnevni profil) je samo na dnu zaslona in komaj vidno, da ne moti branja. */
main.landing { gap: 72px; padding-top: 56px; padding-bottom: 40px; justify-content: flex-start; }
.hero { gap: 56px; }
.hero h1 { margin-bottom: 20px; }
.lead { font-size: 20px; line-height: 1.45; max-width: 480px; margin-bottom: 22px; }
.trust-line { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--muted); }
.trust-line .ico { width: 16px; height: 16px; flex: none; color: var(--ok); }
.land-sec h2 { font-size: 24px; letter-spacing: -0.015em; margin: 0 0 18px; }
.land-sec .features { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.land-sec .features > div { padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.land-sec .features .ki { grid-row: span 2; width: 36px; height: 36px; border-radius: 10px; }
.land-sec .features .ki .ico { width: 18px; height: 18px; }
.land-sec .features h3 { margin: 0; font-size: 16px; }
.land-sec .features p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.steps3 { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.steps3 li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink2); background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--ring); border-radius: 14px; padding: 16px 18px; }
.steps3 b { display: inline-flex; width: 28px; height: 28px; border-radius: 99px; align-items: center; justify-content: center; flex: none; background: var(--accent); color: var(--accent-ink); font-size: 14px; }
.start-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.start-cta .btn { width: auto; padding: 13px 28px; display: inline-flex; }
.land-bg { height: min(40vh, 340px); }
.land-bg svg { opacity: .7; }
.land-bg .lb-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.land-bg .lb-axis { stroke: var(--axis); stroke-width: 1; vector-effect: non-scaling-stroke; }
.land-bg .lb-agreed { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 7 7; vector-effect: non-scaling-stroke; opacity: .7; }
.land-bg .lb-bars rect { opacity: .34; transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
    .land-bg .lb-bars rect { animation: lbGrow .7s cubic-bezier(.2, .7, .2, 1) both; }
    @keyframes lbGrow { from { transform: scaleY(0); } to { transform: none; } }
}
@media (max-width: 960px) {
    main.landing { gap: 52px; padding-top: 24px; }
    .land-bg { display: none; }   /* na ožjih zaslonih bi bilo za besedilom */
    .land-sec .features { grid-template-columns: repeat(2, 1fr); }
    .steps3 { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 640px) {
    main.landing { gap: 44px; }
    .lead { font-size: 17px; }
    .land-sec h2 { font-size: 21px; }
    .land-sec .features { grid-template-columns: 1fr; gap: 10px; }
    .land-sec .features > div { padding: 14px 16px; }
    .start-cta .btn { flex: 1; justify-content: center; }
}

/* vstopna stran: video + primeri, pogosta vprašanja */
.land-sec.find { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: start; }
.find-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #0c1116; border: 1px solid var(--ring); box-shadow: 0 18px 40px rgba(16, 66, 129, .12); }
.examples { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.examples li { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--ring); border-radius: 14px; padding: 14px 18px; }
.examples b { font-size: 24px; letter-spacing: -0.02em; color: var(--accent); white-space: nowrap; }
.examples span { font-size: 14.5px; color: var(--ink2); line-height: 1.4; }
.examples strong { color: var(--ink); font-weight: 600; }
.ex-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.faq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.faq-grid > div { background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--ring); border-radius: 14px; padding: 18px 20px; }
.faq-grid h3 { margin: 0 0 6px; font-size: 16px; }
.faq-grid p { margin: 0; font-size: 14.5px; color: var(--ink2); line-height: 1.45; }
@media (max-width: 960px) {
    .land-sec.find { grid-template-columns: 1fr; gap: 44px; }
    .faq-grid { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 640px) {
    .find-video video { aspect-ratio: 9 / 16; max-height: 78vh; width: auto; max-width: 100%; margin: 0 auto; }
    .examples li { grid-template-columns: 76px 1fr; padding: 12px 14px; }
    .examples b { font-size: 20px; }
}

/* pregled: kartica merilnega mesta čez celo širino (povzetek · po urah · moč po blokih) */
.meters { grid-template-columns: 1fr; }
.meter-card:hover { border-color: var(--line); }
.meter-card h2 a { color: inherit; text-decoration: none; }
.meter-card h2 a:hover { color: var(--accent); }
.mc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mc-head .btn { flex: none; }
.meter-card .cols { display: grid; gap: 20px; margin-bottom: 8px; }
.meter-card .col h3 { font-size: 13px; font-weight: 600; color: var(--ink2); margin: 0 0 10px; }
.meter-card a.col { display: block; color: inherit; text-decoration: none; border-radius: 10px; padding: 10px 12px; margin: -10px -12px; transition: background .15s; }
.meter-card a.col:hover { background: var(--wash); }
.miniday { height: 140px; }
.blk-row { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 2px 10px; font-size: 13px; padding: 4px 0; }
.blk-l { color: var(--ink2); font-weight: 600; grid-row: span 2; }
.blk-bar { position: relative; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--axis) 45%, transparent); overflow: hidden; }
.blk-fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--ok); }
.blk-row.blizu .blk-fill { background: var(--g-warn); }
.blk-row.over .blk-fill { background: var(--g-bad); }
.blk-v { color: var(--muted); font-variant-numeric: tabular-nums; }
.blk-row.over .blk-v { color: var(--error); font-weight: 600; }
.blk-row.sezona, .blk-row.brez { grid-template-columns: 52px 1fr; }
.blk-row.sezona .blk-l, .blk-row.brez .blk-l { grid-row: auto; }
.blk-row.sezona { opacity: .6; }
.add-card { min-height: 64px; }
@media (min-width: 900px) {
    .meter-card .cols { grid-template-columns: 1fr 1.3fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
    .mc-head { flex-direction: column; gap: 0; }
    .mc-head .btn { margin-bottom: 18px; }
}

/* nasveti in opozorila (kartica po prijavi, Analiza) */
.advice { display: grid; gap: 8px; margin: 4px 0 20px; }
.adv { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; color: inherit; text-decoration: none; font-size: 14px; line-height: 1.4; border-left: 3px solid transparent; }
.adv:hover { filter: brightness(.97); }
.adv-alert { background: var(--warn-bg); }
.adv-alert .adv-ic { color: var(--warn-ink); }
.adv-stale, .adv-over { border-left-color: var(--g-bad); }
.adv-tip { background: var(--wash); }
.adv-ic { flex: none; width: 18px; text-align: center; }
.adv-b { flex: 1; min-width: 0; }
.adv-t { color: var(--ink2); }
.adv-eur { flex: none; font-style: normal; font-weight: 650; white-space: nowrap; color: var(--ok); }
.adv-more { font-size: 13px; color: var(--accent); text-decoration: none; padding-left: 12px; }
@media (max-width: 600px) {
    .adv { flex-wrap: wrap; }
    .adv-eur { margin-left: 28px; }
}

/* ---------------------------------------------------------------- prenova: skupni deli (smer A) */
.top.app { padding: 10px 20px; }
.top.app .brand { font-weight: 650; letter-spacing: -0.01em; }
.top.app .brand-logo { width: 32px; height: 32px; }
.usermenu { position: relative; }
.usermenu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink2); background: var(--card); }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu[open] summary, .usermenu summary:hover { color: var(--accent); border-color: var(--accent); }
.usermenu .ico { width: 18px; height: 18px; }
.um-list { position: absolute; right: 0; top: 44px; z-index: 20; min-width: 220px; display: grid; gap: 2px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--lift); }
.um-list a, .um-list button.link { display: block; text-align: left; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; width: 100%; }
.um-list a:hover, .um-list button.link:hover { background: var(--wash); }
.um-list form { margin: 0; }
.um-who { padding: 6px 10px 8px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }

.meter-head { align-items: center; margin-bottom: 10px; }
.meter-head h1 { margin-bottom: 2px; }
.mh-fresh { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 99px; display: inline-block; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.dot.late { background: var(--g-warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-warn) 25%, transparent); }
.icon-btn { display: inline-flex; align-items: center; gap: 6px; }
.icon-btn .ico { width: 16px; height: 16px; }

.strip { display: block; height: 24px; margin: 4px 0 14px; padding: 2px 0; border-radius: 6px; }
.strip-svg { display: block; width: 100%; height: 100%; }
.strip-svg .b1 { fill: var(--b1); } .strip-svg .b2 { fill: var(--b2); } .strip-svg .b3 { fill: var(--b3); }
.strip-svg .b4 { fill: var(--b4); } .strip-svg .b5 { fill: var(--b5); }
.strip:hover { background: var(--wash); }

.tabs { gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs a:hover { background: none; border: 0; border-radius: 0; padding: 10px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink2); }
.tabs a:hover { color: var(--ink); }
.tabs a.on { background: none; color: var(--accent); border-bottom-color: var(--accent); font-weight: 650; }

.period .label { min-width: 0; padding: 0 4px; }
.chips { flex-direction: row; flex-wrap: wrap; }

@media (max-width: 640px) {
    .top.app { padding: 8px 12px; }
    .icon-btn span { display: none; }
    .icon-btn { padding: 0 10px; }
    .tabs { display: flex; grid-template-columns: none; gap: 18px; margin-bottom: 12px; }
    .tabs a { padding: 10px 0; font-size: 15px; text-align: left; border-radius: 0; }
    .meter-head { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .period .label { flex: 1; }
}

/* ---------------------------------------------------------------- vstopna stran: fotografije (podprojekt 5)
   Vrh: svetlobni valovi čez celo širino, ki se počasi zibljejo. Pas s kuhinjo in zaključni poziv na sliki hiše. */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: -56px; bottom: -40px; left: calc(50% - 55vw); width: 110vw;
    background: url(../img/val-2400.webp) center 60% / cover no-repeat;
    -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
@media (max-width: 1400px) { .hero::before { background-image: url(../img/val-1600.webp); } }
@media (max-width: 700px) { .hero::before { background-image: url(../img/val-900.webp); top: -24px; left: -16px; right: -16px; width: auto; } }
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) .hero::before { background-image: url(../img/val-dark-2400.webp); opacity: .85; }
}
@media (prefers-color-scheme: dark) and (max-width: 1400px) {
    :root:where(:not([data-theme="light"])) .hero::before { background-image: url(../img/val-dark-1600.webp); }
}
@media (prefers-color-scheme: dark) and (max-width: 700px) {
    :root:where(:not([data-theme="light"])) .hero::before { background-image: url(../img/val-dark-900.webp); }
}
@media (prefers-reduced-motion: no-preference) {
    .hero::before { animation: heroWave 32s ease-in-out infinite alternate; }
    @keyframes heroWave { from { transform: translateX(-2.5%) scaleY(1); } to { transform: translateX(2.5%) scaleY(1.08); } }
}

.land-photo { display: grid; grid-template-columns: 1fr 1.55fr; gap: 40px; align-items: center; }
.lp-text h2 { font-size: 30px; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 12px; }
.lp-text p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--ink2); max-width: 400px; }
.lp-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 72% 60%;
    border-radius: 18px; box-shadow: 0 18px 40px rgba(16, 66, 129, .14); }

.land-sec.start.photo { position: relative; isolation: isolate; border-radius: 22px; overflow: hidden; padding: 40px; min-height: 420px;
    display: flex; flex-direction: column; justify-content: center; }
.start-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 70% 70%; }
.start-panel { max-width: 520px; padding: 26px 28px; border-radius: 18px; border: 1px solid var(--ring);
    background: color-mix(in srgb, var(--card) 84%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--lift); }
.start-panel .steps3 { grid-template-columns: 1fr; gap: 8px; }
.start-panel .steps3 li { padding: 11px 14px; background: color-mix(in srgb, var(--card) 70%, transparent); }
@media (max-width: 960px) {
    .land-photo { grid-template-columns: 1fr; gap: 18px; }
    .lp-text h2 { font-size: 24px; }
}
@media (max-width: 640px) {
    .lp-text h2 { font-size: 21px; }
    .lp-text p { font-size: 15.5px; }
    .lp-img { border-radius: 14px; }
    .land-sec.start.photo { padding: 150px 12px 12px; min-height: 0; border-radius: 16px; }
    .start-img { object-position: 78% 40%; }
    .start-panel { padding: 18px 16px; }
}