/* =====================================================================
   OwlyPowly — Smart Finance Tracker — »Track your flow, shape your future.«
   Oblikovni sistem: topla svetla podlaga, bele kartice, skrilasto-indigo
   primarna barva, smaragdna za prihodke, rubinasta za odhodke.
   ===================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/vendor/inter/inter-latin.woff2") format("woff2");
  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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/vendor/inter/inter-latin-ext.woff2") format("woff2");
  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;
}

:root {
  /* podlage */
  --ozadje: #F8FAFC;
  --kartica: #FFFFFF;
  --kartica-2: #F8FAFC;
  --rob: #E2E8F0;
  --rob-mocan: #CBD5E1;
  /* besedilo */
  --besedilo: #0F172A;
  --besedilo-2: #334155;
  --sivo: #64748B;
  --sivo-2: #64748B;             /* WCAG AA: 4,5 : 1 tudi na podlagi */
  /* primarna (skrilasto-indigo) */
  --glavna: #2563EB;              /* Trust Blue: glavni gumbi */
  --glavna-hover: #1D4ED8;
  --poudarek: #2563EB;            /* poudarki v vmesniku (aktivni meni, ikone) */
  --poudarek-bg: #EFF6FF;
  --sekundarni: #F1F5F9;
  --sekundarni-hover: #E2E8F0;
  /* pomen */
  --prihodek: #047857;          /* besedilo: 5,5 : 1 na beli (AA) */
  --prihodek-akcent: #10B981;
  --prihodek-bg: #ECFDF5;
  --izdatek: #C81E1E;            /* besedilo: 5,7 : 1 na beli, 5,2 : 1 na rdeči podlagi */
  --izdatek-akcent: #EF4444;
  --izdatek-bg: #FEF2F2;
  --nevarno-bg: #FEE2E2;
  --prenos: #4F46E5;
  --prenos-bg: #EEF2FF;
  --jantar: #F59E0B;              /* samo za ploskve; za besedilo in ikone --jantar-besedilo */
  --jantar-besedilo: #B45309;
  --rob-polja: #8090A4;           /* robovi vnosnih polj: 3,3 : 1 (WCAG 1.4.11) */
  --jantar-bg: #FFFBEB;
  --opozorilo: #FFFBEB;
  --opozorilo-rob: #FDE68A;
  /* barve, ki se v temni shemi spremenijo */
  --na-glavni: #FFFFFF;
  --glava-bg: rgba(248, 250, 252, .86);
  --nevarno-besedilo: #B91C1C;
  --nevarno-hover-bg: #FECACA;
  --nevarno-hover: #B91C1C;
  --ok-besedilo: #065F46;
  --ok-rob: #A7F3D0;
  --napaka-besedilo: #991B1B;
  --napaka-rob: #FECACA;
  --opozorilo-besedilo: #78350F;
  --negotovo-bg: #FEF3C7;
  --negotovo-besedilo: #92400E;
  --stolpec: #CBD5E1;
  --trak: #EEF1F5;
  --crta-tabele: #F1F4F8;
  --senca-fab: 0 12px 30px -10px rgba(15, 23, 42, .55);
  /* znamka */
  --znamka-od: #2563EB;
  --znamka-do: #F59E0B;
  /* sova (logotip v glavi) */
  --sova-glava: #2563EB;
  --sova-oko: #F59E0B;
  --sova-zenica: #0F172A;
  --sova-crta: #FFFFFF;
  --znamka-besedilo: #0F172A;
  /* oblika */
  --polmer: 16px;
  --polmer-gumb: 10px;
  --senca: 0 1px 3px rgba(15, 23, 42, .04), 0 1px 2px rgba(15, 23, 42, .03);
  --senca-dvig: 0 10px 30px -12px rgba(15, 23, 42, .18);
  --prehod: all .2s ease;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; font-size: 16px; }
html[data-pisava="majhna"] { font-size: 14.5px; }
html[data-pisava="velika"] { font-size: 18px; }
html[data-pisava="zelo-velika"] { font-size: 20px; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .9375rem;
  line-height: 1.5;
  letter-spacing: -0.006em;
  background: var(--ozadje);
  color: var(--besedilo-2);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--glavna); text-underline-offset: 3px; }
a:hover { color: var(--prenos); }

h1, h2, h3 { color: var(--besedilo); letter-spacing: -0.02em; }
h1 { font-size: 1.75rem; font-weight: 700; margin: .3em 0 .7em; }
h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .9em; }

/* Vsi zneski: tabularne številke, da so decimalke poravnane. */
.znesek, .vnos-znesek, .povzetek strong, .stanje-hero, td, .letna, .najvecji strong,
.postavke-racuna input, input[inputmode=decimal], .razdelitev-povzetek, #vsota-postavk {
  font-variant-numeric: tabular-nums;
}

/* ---------- glava: znamka, meni, nastavitve, gumb ---------- */
.vrh {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap;
  padding: .75rem max(1.25rem, calc((100vw - 1160px) / 2));
  background: var(--glava-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rob);
}
.znamka { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--besedilo); }
.znamka:hover { color: var(--besedilo); }
.znamka img { width: 34px; height: 34px; }
.znamka-besedilo { display: flex; flex-direction: column; line-height: 1.05; }
.znamka-ime { font-size: 1.02rem; letter-spacing: .06em; }
.znamka-ime b { font-weight: 800; }
.znamka-ime span { font-weight: 400; color: var(--sivo); }
.znamka-slogan { font-size: .66rem; line-height: 1.2; color: var(--sivo); letter-spacing: .01em; margin-top: 3px; white-space: nowrap; }

.meni { display: flex; gap: .15rem; align-items: center; overflow-x: auto; scrollbar-width: none; flex: 1; }
.meni::-webkit-scrollbar { display: none; }
.meni a {
  color: var(--sivo); text-decoration: none; font-weight: 500; font-size: .9rem;
  padding: .42rem .68rem; border-radius: 999px; white-space: nowrap; transition: var(--prehod);
}
.meni a:hover { color: var(--besedilo); background: var(--sekundarni); }
.meni a.aktiven { color: var(--besedilo); background: var(--kartica); box-shadow: var(--senca); font-weight: 600; }

.desno-v-glavi { display: flex; align-items: center; gap: .6rem; margin-left: auto; }

.vsebina { max-width: 1160px; margin: 0 auto; padding: 1.6rem 1.25rem 6rem; }

/* ---------- kartice ---------- */
.kartica {
  background: var(--kartica);
  border: 1px solid var(--rob);
  border-radius: var(--polmer);
  box-shadow: var(--senca);
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.25rem;
}
.glava-kartice { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.glava-kartice h2 { margin: 0; }
.glava-kartice a { font-size: .85rem; font-weight: 500; color: var(--sivo); text-decoration: none; }
.glava-kartice a:hover { color: var(--besedilo); }

.mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem 1.1rem; }

/* ---------- obrazci ---------- */
label { display: flex; flex-direction: column; gap: .35rem; font-weight: 500; font-size: .85rem; color: var(--besedilo-2); margin-bottom: .9rem; }
label small { font-weight: 400; color: var(--sivo); }
.mreza > label > input, .mreza > label > select, .mreza > label > textarea { margin-top: auto; }
/* Vrstica z velikim poljem za znesek: ostala polja v vrstici enako visoka. */
@media (min-width: 641px) {
  .mreza:has(.vnos-znesek) > label > input, .mreza:has(.vnos-znesek) > label > select { height: 3.625rem; min-height: 0; }
}
label.potrditveno { flex-direction: row; align-items: center; gap: .55rem; font-weight: 400; font-size: .92rem; }
/* Pri daljšem besedilu se kvadratek ne sme stisniti; poravnan je s prvo vrstico. */
label.potrditveno input[type=checkbox] { flex: 0 0 auto; align-self: flex-start; margin-top: .15em; }

input, select, button, .gumb { font: inherit; font-size: .9375rem; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%;
  padding: .62rem .8rem;
  border: 1px solid var(--rob-polja);
  border-radius: var(--polmer-gumb);
  background: var(--kartica);
  color: var(--besedilo);
  min-height: 44px;
  transition: var(--prehod);
}
input:hover:not([type=checkbox]):not([type=radio]), select:hover { border-color: var(--sivo-2); }
input:focus, select:focus, textarea:focus, button:focus-visible, .gumb:focus-visible, a:focus-visible {
  outline: 3px solid rgba(99, 102, 241, .28); outline-offset: 1px; border-color: var(--prenos);
}
select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
label > *, .mreza > *, .postavka > * { min-width: 0; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--glavna); }
input.vnos-znesek { font-size: 1.5rem !important; font-weight: 700; letter-spacing: -0.02em; }

/* ---------- gumbi: primarni, sekundarni, destruktivni ---------- */
button, .gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .62rem 1rem; min-height: 44px;
  border: 0; border-radius: var(--polmer-gumb);
  background: var(--glavna); color: var(--na-glavni);
  font-weight: 600; text-decoration: none; cursor: pointer;
  transition: var(--prehod);
}
button:hover, .gumb:hover { background: var(--glavna-hover); color: var(--na-glavni); transform: translateY(-1px); box-shadow: var(--senca-dvig); }
button:active, .gumb:active { transform: translateY(0); box-shadow: none; }
.sekundarni { background: var(--sekundarni); color: var(--besedilo-2); }
.sekundarni:hover { background: var(--sekundarni-hover); color: var(--besedilo); box-shadow: none; }
.nevaren { background: var(--nevarno-bg); color: var(--nevarno-besedilo); }
.nevaren:hover { background: var(--nevarno-hover-bg); color: var(--nevarno-hover); box-shadow: none; }
.velik { font-size: 1rem; padding: .8rem 1.4rem; min-height: 50px; }
.gumb-majhen { padding: .35rem .75rem; min-height: 34px; font-size: .85rem; }
.gumbi { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.desno { display: flex; justify-content: flex-end; margin: 1rem 0; }
.gumb.onemogoceno { opacity: .5; pointer-events: none; }
.ikona { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.vrstica-obrazca { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.vrstica-obrazca input:not([type=checkbox]):not([type=radio]), .vrstica-obrazca select { width: auto; flex: 1 1 200px; }
.vrstica-obrazca label { margin: 0; }

.namig { color: var(--sivo); font-size: .82rem; margin: .4rem 0 .9rem; }
.prazno { color: var(--sivo); }

/* ---------- sporočila ---------- */
.sporocilo { padding: .8rem 1.1rem; border-radius: 12px; margin-bottom: 1.2rem; font-size: .92rem; }
.sporocilo.ok { background: var(--prihodek-bg); color: var(--ok-besedilo); border: 1px solid var(--ok-rob); }
.sporocilo.napaka { background: var(--izdatek-bg); color: var(--napaka-besedilo); border: 1px solid var(--napaka-rob); }
.sporocilo ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.opozorilo { background: var(--opozorilo); border: 1px solid var(--opozorilo-rob); color: var(--opozorilo-besedilo); padding: .65rem .9rem; border-radius: 12px; font-size: .9rem; }

/* ---------- segmentni preklopi (zavihki) ---------- */
.zavihki { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-bottom: 1.2rem; background: var(--sekundarni); padding: 4px; border-radius: 12px; }
.zavihek {
  padding: .45rem 1rem; border-radius: 9px; text-decoration: none; color: var(--sivo);
  font-weight: 600; font-size: .9rem; transition: var(--prehod);
}
.zavihek:hover { color: var(--besedilo); }
.zavihek.aktiven { background: var(--kartica); color: var(--besedilo); box-shadow: var(--senca); }
.zavihek.aktiven.izdatek { color: var(--izdatek); }
.zavihek.aktiven.prihodek { color: var(--prihodek); }
.zavihek.aktiven.prenos { color: var(--prenos); }

/* ---------- obrazec vnosa ---------- */
.razdelitev { margin: .4rem 0 .9rem; border-top: 1px solid var(--rob); padding-top: .8rem; }
.razdelitev summary { cursor: pointer; font-weight: 600; color: var(--besedilo); }
.postavka { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) auto; gap: .45rem; margin-bottom: .5rem; }
select.predlagano { border-color: var(--prenos); background: var(--prenos-bg); }

/* ---------- glava strani z navigacijo ---------- */
.glava-strani { display: flex; align-items: center; gap: .8rem; }
.glava-strani h1 { margin: .3em 0; min-width: 9ch; text-align: center; }
.izbira-racuna { margin-bottom: 1.2rem; }

/* ---------- KPI ploščice ---------- */
.povzetek { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .9rem; margin-bottom: 1.25rem; }
.povzetek > div {
  background: var(--kartica); border: 1px solid var(--rob); border-radius: var(--polmer); box-shadow: var(--senca);
  padding: 1rem 1.15rem;
}
.povzetek span { display: block; color: var(--sivo); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
.povzetek strong { font-size: 1.3rem; font-weight: 700; color: var(--besedilo); letter-spacing: -0.02em; }
.povzetek-velik strong { font-size: 1.4rem; }
.prihodek { color: var(--prihodek) !important; }
.izdatek { color: var(--izdatek) !important; }

/* ---------- hero: skupno stanje ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; align-items: end;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(56, 189, 248, .14), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(49, 46, 129, .07), transparent 60%),
    var(--kartica);
  padding: 1.6rem 1.75rem;
}
.hero-oznaka { color: var(--sivo); font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.stanje-hero { font-size: clamp(2.1rem, 4.4vw, 2.5rem); font-weight: 700; color: var(--besedilo); letter-spacing: -0.035em; line-height: 1.1; margin: .3rem 0 .55rem; }
.sprememba { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 500; padding: .2rem .6rem; border-radius: 999px; }
.sprememba.gor { background: var(--prihodek-bg); color: var(--prihodek); }
.sprememba.dol { background: var(--izdatek-bg); color: var(--izdatek); }
.sprememba .ikona { width: 15px; height: 15px; }
.hero-pojasnilo { color: var(--sivo); font-size: .8rem; margin-left: .35rem; }
.mini-graf-naslov { display: flex; justify-content: space-between; gap: 1rem; color: var(--sivo); font-size: .78rem; margin-bottom: .4rem; }
.mini-graf-naslov strong { color: var(--besedilo); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- nov vnos (trije enaki gumbi) ---------- */
.gumbi-nalaganja { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: .2rem 0 .6rem; }
.gumbi-nalaganja .gumb {
  width: 100%; min-height: 64px; margin: 0; flex-direction: row; gap: .55rem;
  font-size: 1rem; font-weight: 600; text-align: center; padding: .6rem;
}
.gumbi-nalaganja .gumb .ikona { width: 20px; height: 20px; }
.nov-vnos h2 { margin-bottom: .9rem; }

/* ---------- mreža pripomočkov na pregledu ---------- */
.mreza-pregleda { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.mreza-pregleda > .kartica { margin: 0; }

/* ---------- ikone kategorij v mehkih krogih ---------- */
.ikona-krog {
  width: 40px; height: 40px; flex: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sekundarni); color: var(--besedilo-2);
}
.ikona-krog .ikona { width: 19px; height: 19px; }
.ikona-krog.t-hrana { background: #FFF7ED; color: #C2410C; }
.ikona-krog.t-dom { background: #EEF2FF; color: #4338CA; }
.ikona-krog.t-avto { background: #EFF6FF; color: #1D4ED8; }
.ikona-krog.t-otroci { background: #FDF2F8; color: #BE185D; }
.ikona-krog.t-zdravje { background: #FEF2F2; color: #B91C1C; }
.ikona-krog.t-osebno { background: #F5F3FF; color: #6D28D9; }
.ikona-krog.t-prosti { background: #FFFBEB; color: #B45309; }
.ikona-krog.t-pocitnice { background: #ECFEFF; color: #0E7490; }
.ikona-krog.t-finance { background: #F1F5F9; color: #334155; }
.ikona-krog.t-prihodek { background: var(--prihodek-bg); color: var(--prihodek); }
.ikona-krog.t-prenos { background: var(--prenos-bg); color: var(--prenos); }
.ikona-krog.t-ostalo { background: #F7F7EF; color: #65733B; }

/* ---------- poraba po skupinah ---------- */
.skupina-pregled { border-bottom: 1px solid var(--rob); }
.skupina-pregled:last-child { border-bottom: 0; }
.skupina-pregled summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .35rem .9rem; align-items: center;
  padding: .7rem 0; cursor: pointer; list-style: none;
}
.skupina-pregled summary::-webkit-details-marker { display: none; }
.skupina-pregled .ikona-krog { grid-row: span 2; }
.skupina-pregled .ime { font-weight: 600; color: var(--besedilo); font-size: .95rem; }
.skupina-pregled .znesek { font-weight: 600; text-align: right; white-space: nowrap; color: var(--besedilo); }
.skupina-pregled .trak { grid-column: 2 / 4; }
.trak { background: var(--trak); border-radius: 999px; height: 6px; overflow: hidden; }
.trak span { display: block; height: 100%; border-radius: 999px; }
.trak .izdatek { background: var(--besedilo); }
.trak .prihodek { background: var(--prihodek-akcent); }
.skupina-pregled ul { list-style: none; margin: 0 0 .7rem; padding: 0 0 0 3.1rem; }
.skupina-pregled li { display: flex; justify-content: space-between; gap: .6rem; padding: .3rem 0; font-size: .9rem; }
.skupina-pregled li a { color: var(--besedilo-2); text-decoration: none; }
.skupina-pregled li a:hover { color: var(--prenos); }
.skupina-pregled li small { color: var(--sivo); }

/* ---------- seznam transakcij ---------- */
.dan-transakcij { color: var(--sivo); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; padding: 1rem .5rem .4rem; list-style: none; }
.dan-transakcij:first-child { padding-top: .3rem; }
.seznam-vnosov { list-style: none; margin: 0; padding: 0; }
.seznam-vnosov.kartica { padding: .5rem .6rem; }
.seznam-vnosov li.vnos {
  display: flex; align-items: center; gap: .7rem; padding: .1rem .5rem;
  border-radius: 12px; transition: var(--prehod);
}
.seznam-vnosov li.vnos:hover { background: var(--kartica-2); }
.seznam-vnosov li.vnos > input[type=checkbox] { opacity: .45; }
.seznam-vnosov li.vnos:hover > input[type=checkbox], .seznam-vnosov li.vnos > input[type=checkbox]:checked { opacity: 1; }
.vnos-povezava {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center;
  flex: 1; padding: .6rem 0; text-decoration: none; color: var(--besedilo-2); min-width: 0;
}
.vnos-povezava:hover { color: var(--besedilo-2); }
.vnos-opis { display: flex; flex-direction: column; min-width: 0; }
.vnos-opis strong { font-weight: 600; color: var(--besedilo); font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vnos-opis small { color: var(--sivo); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vnos-znesek { font-weight: 600; text-align: right; white-space: nowrap; display: flex; flex-direction: column; color: var(--besedilo); font-size: .97rem; }
.vnos-znesek small { font-weight: 400; color: var(--sivo); font-size: .78rem; }
.vnos.prihodek .vnos-znesek { color: var(--prihodek); }
.vnos.izdatek .vnos-znesek { color: var(--izdatek); }
.vnos.prenos .vnos-znesek { color: var(--prenos); }
.znacka-priloge { color: var(--sivo-2); }

/* ---------- filtri in skupinska dejanja ---------- */
.filtri summary { cursor: pointer; font-weight: 600; color: var(--besedilo); display: flex; align-items: center; gap: .5rem; }
.filtri form { margin-top: 1rem; }
.skupinska-dejanja { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin-bottom: .8rem; }
.skupinska-dejanja select { width: auto; flex: 0 1 220px; }
.skupinska-dejanja select, .skupinska-dejanja button { min-height: 38px; height: 38px; }
.skupinska-dejanja button { padding-top: 0; padding-bottom: 0; }
.skupinska-dejanja label { margin: 0 auto 0 0; }

/* ---------- kategorije in računi ---------- */
.glava-skupine { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; }
.seznam-kategorij, .seznam-racunov { list-style: none; margin: 0; padding: 0; }
.seznam-kategorij li, .seznam-racunov li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .65rem 0; border-bottom: 1px solid var(--rob);
}
.seznam-kategorij li:last-child, .seznam-racunov li:last-child { border-bottom: 0; }
.ime-kategorije { color: var(--besedilo); }
.ime-kategorije small, .seznam-racunov small { color: var(--sivo); margin-left: .4rem; font-size: .8rem; }
.skrita { opacity: .55; }
.znacka { background: var(--sekundarni); color: var(--sivo); border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; font-weight: 500; margin-left: .3rem; }
.dejanja { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
details.uredi summary { cursor: pointer; color: var(--sivo); font-size: .85rem; font-weight: 500; }
details.uredi summary:hover { color: var(--besedilo); }
details.uredi[open] { flex-basis: 100%; }
.dejanja:has(> details[open]) { flex-basis: 100%; position: relative; }
.dejanja > details[open] ~ form { position: absolute; top: 0; right: 0; }
.seznam-kategorij details.uredi summary, .glava-skupine details.uredi summary { padding: .35rem 0; }
details.uredi form { margin-top: .6rem; }

/* ---------- največji izdatki ---------- */
.najvecji { margin: 0; padding-left: 1.4rem; color: var(--sivo); }
.najvecji a { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; text-decoration: none; color: var(--besedilo-2); }
.najvecji a:hover span { color: var(--besedilo); }
.najvecji strong { color: var(--izdatek); white-space: nowrap; font-weight: 600; }

/* ---------- letni pregled ---------- */
.tabela-ovoj { overflow-x: auto; background: var(--kartica); border: 1px solid var(--rob); border-radius: var(--polmer); box-shadow: var(--senca); }
table.letna { border-collapse: collapse; font-size: .85rem; min-width: 100%; color: var(--besedilo-2); }
.letna th, .letna td { padding: .5rem .7rem; border-bottom: 1px solid var(--crta-tabele); white-space: nowrap; }
.letna td { text-align: right; }
.letna thead th { background: var(--kartica-2); color: var(--sivo); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; position: sticky; top: 0; }
.letna th[scope=row] { text-align: left; font-weight: 400; position: sticky; left: 0; background: var(--kartica); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.letna th[scope=row] a { color: var(--besedilo-2); text-decoration: none; }
.letna .naslov-dela th { background: var(--glavna); color: var(--na-glavni); text-align: left; letter-spacing: .06em; font-size: .75rem; }
.letna .naslov-skupine th { background: var(--kartica-2); text-align: left; font-weight: 600; color: var(--besedilo); }
.letna .vsota-skupine th, .letna .vsota-skupine td { font-weight: 600; color: var(--besedilo); }
.letna td.skupaj { font-weight: 600; background: var(--kartica-2); color: var(--besedilo); }
.letna tfoot th, .letna tfoot td { font-weight: 700; border-top: 2px solid var(--rob-mocan); color: var(--besedilo); }

/* ---------- plavajoč gumb za nov vnos ---------- */
/* Na računalniku je gumb »Nov vnos« v glavi; plavajoč »+« je samo na telefonu. */
.fab { display: none !important; }
.fab:hover { background: var(--glavna-hover); color: var(--na-glavni); }
.fab-plus { line-height: 1; font-weight: 300; }

/* ---------- grafi ---------- */
.filtri-grafov { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: flex-end; }
.filtri-grafov label { margin: 0; flex: 1 1 170px; }
.mreza-grafov { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.mreza-grafov .kartica { margin: 0; }
.mreza-grafov .siroko { grid-column: 1 / -1; }
.glava-grafa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem 1rem; margin-bottom: .8rem; }
.glava-grafa h2 { margin: 0; }
.glava-grafa .namig { margin: .2rem 0 0; }
.preklop { display: inline-flex; background: var(--sekundarni); border-radius: 10px; padding: 3px; gap: 2px; }
.preklop button {
  min-height: 30px; padding: .25rem .75rem; font-size: .8rem; border: 0; border-radius: 8px;
  background: transparent; color: var(--sivo); font-weight: 600;
}
.preklop button:hover { background: transparent; color: var(--besedilo); transform: none; box-shadow: none; }
.preklop button.aktiven { background: var(--kartica); color: var(--besedilo); box-shadow: var(--senca); }
.preklop a {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 30px; padding: .25rem .75rem; font-size: .8rem;
  border-radius: 8px; color: var(--sivo); font-weight: 600; text-decoration: none;
}
.preklop a:hover { color: var(--besedilo); }
.preklop a.aktiven { background: var(--kartica); color: var(--besedilo); box-shadow: var(--senca); }
.preklop a:focus-visible { outline: 2px solid var(--poudarek); outline-offset: 1px; }
@media (pointer: coarse) { .preklop a { min-height: 44px; } }
.platno { position: relative; height: 300px; }
.platno.visoko { height: 360px; }
.tabela-grafa { margin-top: .9rem; }
.nazaj-skupine { margin-bottom: .4rem; }

/* ---------- branje računov ---------- */
.potrditev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.25rem; align-items: start; }
.potrditev .kartica { margin: 0; }
.predogled { position: sticky; top: 5.5rem; display: flex; flex-direction: column; gap: .5rem; }
.predogled img { width: 100%; max-height: 75vh; object-fit: contain; border-radius: 10px; background: var(--kartica-2); }
.predogled iframe { width: 100%; height: 75vh; border: 0; border-radius: 10px; }
label.negotovo input, label.negotovo select { border: 1.5px solid var(--jantar); background: var(--jantar-bg); }
.znacka-negotovo { background: var(--negotovo-bg); color: var(--negotovo-besedilo); border-radius: 999px; padding: .05rem .5rem; font-size: .75rem; font-weight: 600; }
fieldset.darila { border: 1px solid var(--rob); border-radius: 12px; padding: .9rem 1.1rem; margin: .4rem 0 1rem; background: var(--kartica-2); }
fieldset.darila legend { font-weight: 600; padding: 0 .3rem; color: var(--besedilo); }
details.postavke-urejanje { margin: .4rem 0 1rem; }
details.postavke-urejanje summary { cursor: pointer; font-weight: 600; color: var(--besedilo); margin-bottom: .6rem; }
table.postavke-racuna { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.postavke-racuna th { text-align: left; font-size: .72rem; color: var(--sivo); font-weight: 600; padding: .2rem .3rem; text-transform: uppercase; letter-spacing: .05em; }
.postavke-racuna td { padding: .2rem .3rem; vertical-align: middle; }
.postavke-racuna td:nth-child(4) { width: 6.5rem; }
.postavke-racuna td:nth-child(3) { width: 10rem; }
.postavke-racuna td:nth-child(5) { width: 2.6rem; }
.postavke-racuna input:not([type=checkbox]) { min-height: 38px; padding: .35rem .55rem; }
.postavke-racuna .stolpec-darilo { display: none; width: 3.6rem; text-align: center; }
.darilo-da .postavke-racuna .stolpec-darilo { display: table-cell; }
.razdelitev-povzetek { font-weight: 600; color: var(--besedilo); }
pre.prebrano { white-space: pre-wrap; font-size: .82rem; max-height: 400px; overflow: auto; color: var(--besedilo-2); }

/* ---------- prilagoditve ---------- */
@media (max-width: 960px) {
  .mreza-pregleda { grid-template-columns: minmax(0, 1fr); }
  .hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .mreza-grafov { grid-template-columns: minmax(0, 1fr); }
  .platno { height: 260px; }
  .potrditev { grid-template-columns: minmax(0, 1fr); }
  .predogled { position: static; }
  .predogled img { max-height: 45vh; }
  .predogled iframe { height: 50vh; }
}
@media (max-width: 640px) {
  input, select, button, .gumb { font-size: max(16px, 1rem); } /* prepreči povečavo na iPhonu */
  .vrh { padding: .6rem 1rem; gap: .5rem .8rem; }
  .znamka-slogan { display: none; }
  .meni { order: 3; flex-basis: 100%; }
  .desno-v-glavi .gumb-nov-glava { display: none; }
  .vsebina { padding: 1rem 1rem 6rem; }
  h1 { font-size: 1.4rem; }
  .kartica { padding: 1.1rem 1.1rem; }
  .hero { padding: 1.3rem 1.2rem; }
  .vnos-povezava { gap: .7rem; }
  .ikona-krog { width: 36px; height: 36px; }
  .postavka { grid-template-columns: minmax(0, 1fr) 6.5rem auto; }
  .postavka input[name=opis_postavke] { grid-column: 1 / 3; }
  .gumbi .velik { flex: 1; }
  .gumbi-nalaganja { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .gumbi-nalaganja .gumb { min-height: 56px; }
  .fab { display: inline-flex !important; position: fixed; right: 1rem; bottom: 1rem; z-index: 20; width: 3.6rem; height: 3.6rem; padding: 0;
         justify-content: center; align-items: center; border-radius: 999px; background: var(--glavna); color: var(--na-glavni); text-decoration: none;
         box-shadow: var(--senca-fab); }
  .fab-besedilo { display: none; }
  .fab-plus { font-size: 2rem; }
}

/* ---------- vrstica nad pregledom (mesec, račun) ---------- */
.vrstica-pregleda { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.vrstica-pregleda .izbira-racuna { margin: 0; flex: 0 1 460px; }
.gumb-ikona { width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 999px; }
.gumb-nov-glava { padding: .5rem .95rem; min-height: 38px; }

/* Ožji zasloni (prenosnik): slogan pod imenom skrijemo, da meni ostane v eni vrstici. */
@media (max-width: 1240px) and (min-width: 641px) {
  .znamka-slogan { display: none; }
  .meni a { padding: .42rem .55rem; }
}
@media (max-width: 1020px) and (min-width: 641px) {
  .meni { order: 3; flex-basis: 100%; }
}
@media (max-width: 640px) {
  .povzetek { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .povzetek > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .povzetek strong { font-size: 1.1rem; }
}

/* =====================================================================
   Temna shema (data-barve="temna"; »Kot naprava« jo vklopi po sistemu)
   ===================================================================== */
:root[data-barve="temna"] {
  color-scheme: dark;
  --ozadje: #0F172A;
  --kartica: #1E293B;
  --kartica-2: #243247;
  --rob: #334155;
  --rob-mocan: #475569;
  --besedilo: #F1F5F9;
  --besedilo-2: #CBD5E1;
  --sivo: #94A3B8;
  --sivo-2: #8A9BB3;
  --glavna: #2563EB;
  --glavna-hover: #1D4ED8;        /* belo besedilo ostane ≥ 4,5 : 1 */
  --na-glavni: #FFFFFF;
  --poudarek: #60A5FA;
  --poudarek-bg: rgba(59, 130, 246, .16);
  --sekundarni: #334155;
  --sekundarni-hover: #3E4C63;
  --prihodek: #34D399;
  --prihodek-akcent: #10B981;
  --prihodek-bg: rgba(16, 185, 129, .14);
  --izdatek: #F87171;
  --izdatek-akcent: #EF4444;
  --izdatek-bg: rgba(239, 68, 68, .14);
  --nevarno-bg: rgba(239, 68, 68, .18);
  --nevarno-besedilo: #FCA5A5;
  --nevarno-hover-bg: rgba(239, 68, 68, .28);
  --nevarno-hover: #FECACA;
  --prenos: #A5B4FC;
  --prenos-bg: rgba(99, 102, 241, .18);
  --jantar: #FBBF24;
  --jantar-besedilo: #FBBF24;
  --rob-polja: #6B7C94;
  --jantar-bg: rgba(245, 158, 11, .14);
  --opozorilo: rgba(245, 158, 11, .12);
  --opozorilo-rob: rgba(245, 158, 11, .35);
  --opozorilo-besedilo: #FDE68A;
  --ok-besedilo: #A7F3D0;
  --ok-rob: rgba(16, 185, 129, .35);
  --napaka-besedilo: #FECACA;
  --napaka-rob: rgba(239, 68, 68, .35);
  --negotovo-bg: rgba(245, 158, 11, .2);
  --negotovo-besedilo: #FCD34D;
  --stolpec: #475569;
  --trak: #334155;
  --crta-tabele: #2A3850;
  --glava-bg: rgba(15, 23, 42, .85);
  --sova-glava: #3B82F6;
  --sova-zenica: #0F172A;
  --znamka-besedilo: #F1F5F9;
  --senca: 0 1px 2px rgba(0, 0, 0, .35);
  --senca-dvig: 0 10px 30px -12px rgba(0, 0, 0, .7);
  --senca-fab: 0 12px 30px -10px rgba(0, 0, 0, .8);
}
[data-barve="temna"] .hero {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(56, 189, 248, .14), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .14), transparent 60%),
    var(--kartica);
}
[data-barve="temna"] .ikona-krog.t-hrana { background: rgba(249, 115, 22, .16); color: #FDBA74; }
[data-barve="temna"] .ikona-krog.t-dom { background: rgba(99, 102, 241, .18); color: #A5B4FC; }
[data-barve="temna"] .ikona-krog.t-avto { background: rgba(59, 130, 246, .18); color: #93C5FD; }
[data-barve="temna"] .ikona-krog.t-otroci { background: rgba(236, 72, 153, .16); color: #F9A8D4; }
[data-barve="temna"] .ikona-krog.t-zdravje { background: rgba(239, 68, 68, .16); color: #FCA5A5; }
[data-barve="temna"] .ikona-krog.t-osebno { background: rgba(139, 92, 246, .18); color: #C4B5FD; }
[data-barve="temna"] .ikona-krog.t-prosti { background: rgba(245, 158, 11, .16); color: #FCD34D; }
[data-barve="temna"] .ikona-krog.t-pocitnice { background: rgba(6, 182, 212, .16); color: #67E8F9; }
[data-barve="temna"] .ikona-krog.t-finance { background: #1E293B; color: #CBD5E1; }
[data-barve="temna"] .ikona-krog.t-ostalo { background: rgba(132, 148, 77, .18); color: #C5D08F; }
/* Logotip ima temno pisavo – na temni podlagi ga posvetlimo. */
[data-barve="temna"] .znamka img { filter: brightness(1.35) saturate(1.1); }

/* ---------- prijava ---------- */
.prijava { max-width: 420px; margin: 2.5rem auto; padding: 2rem 1.9rem; }
.prijava h1 { margin-top: .6rem; }
.prijava-ikona {
  width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--prenos-bg); color: var(--prenos);
}
.prijava-ikona .ikona { width: 22px; height: 22px; }
.polna-sirina { width: 100%; margin-top: .4rem; }

/* ---------- nastavitve ---------- */
.gumb-nastavitve {
  width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--sivo); background: var(--sekundarni); transition: var(--prehod);
}
.gumb-nastavitve:hover, .gumb-nastavitve.aktiven { color: var(--besedilo); background: var(--sekundarni-hover); }
.namig-naslova { color: var(--sivo); font-weight: 400; font-size: .82rem; }
.ozko { max-width: 420px; }
fieldset.izbira-kartic { border: 0; padding: 0; margin: 0 0 1.1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 28%), 1fr)); gap: .6rem; }
fieldset.izbira-kartic legend { font-weight: 500; font-size: .85rem; color: var(--besedilo-2); margin-bottom: .45rem; padding: 0; }
.kartica-izbire {
  position: relative; margin: 0; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
  padding: .8rem .6rem; border: 1.5px solid var(--rob); border-radius: 12px; cursor: pointer; transition: var(--prehod);
  font-weight: 500; color: var(--besedilo);
}
.kartica-izbire:hover { border-color: var(--rob-mocan); }
.kartica-izbire input { position: absolute; opacity: 0; pointer-events: none; }
.kartica-izbire:has(input:checked) { border-color: var(--prenos); background: var(--prenos-bg); }
.kartica-izbire:has(input:focus-visible) { outline: 3px solid rgba(99, 102, 241, .28); }
.predogled-teme { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 72px; height: 46px; padding: 6px; border-radius: 8px; border: 1px solid var(--rob-mocan); }
.predogled-teme i { border-radius: 3px; }
.predogled-teme i:first-child { grid-column: 1 / -1; }
.predogled-svetla { background: #F5F6F8; }
.predogled-svetla i { background: #FFFFFF; box-shadow: 0 0 0 1px #E2E8F0; }
.predogled-svetla i:first-child { background: #0F172A; }
.predogled-temna { background: #0B1120; }
.predogled-temna i { background: #1E293B; }
.predogled-temna i:first-child { background: #E2E8F0; }
.predogled-sistemska { background: linear-gradient(135deg, #F5F6F8 50%, #0B1120 50%); }
.predogled-sistemska i { background: rgba(148, 163, 184, .45); }
.predogled-pisave { height: 46px; display: flex; align-items: center; font-weight: 600; color: var(--besedilo); }
.pisava-majhna { font-size: 14px; }
.pisava-obicajna { font-size: 18px; }
.pisava-velika { font-size: 23px; }
.pisava-zelo-velika { font-size: 28px; }
.odjava { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--rob); }
.odjava form { margin: 0; }

/* ---------- graf razlike: dve skupini preklopov ---------- */
.preklopi { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.povzetek-razlike { display: block; margin-top: .25rem; color: var(--besedilo); font-weight: 600; font-variant-numeric: tabular-nums; }
.opozorilo-spremembe { margin-bottom: .8rem; }

/* ---------- poravnave in drobnarije (pregled 16. 10. 2026) ---------- */
/* mini graf porabe na pregledu */
.mini-stolpci { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; height: 96px; align-items: end; }
.mini-stolpec { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .3rem;
                height: 100%; text-decoration: none; }
.mini-stolpec .stolpec { width: 100%; max-width: 44px; height: max(2px, calc(var(--v) * 70px)); border-radius: 6px;
                         background: var(--stolpec); transition: var(--prehod); }
.mini-stolpec .stolpec.zdaj { background: var(--glavna); }
.mini-stolpec:hover .stolpec { background: var(--prenos); }
.mini-stolpec small { color: var(--sivo); font-size: .68rem; line-height: 1; }

/* izbira datoteke: gumb v slogu aplikacije namesto privzetega brskalnikovega */
input[type=file] { padding: .35rem .45rem; color: var(--sivo); font-size: .85rem; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; margin-right: .7rem; padding: .45rem .85rem; border: 0; border-radius: 8px;
  background: var(--sekundarni); color: var(--besedilo-2); cursor: pointer; transition: var(--prehod);
}
input[type=file]::file-selector-button:hover { background: var(--sekundarni-hover); color: var(--besedilo); }
.vrstica-obrazca input[type=file] { height: 44px; min-height: 44px; padding-top: 0; padding-bottom: 0; }
input[type=file]::file-selector-button { padding-top: .35rem; padding-bottom: .35rem; margin-top: 5px; }

/* koš: datum v svojem stolpcu */
.vnos-datum { color: var(--sivo); font-size: .82rem; font-variant-numeric: tabular-nums; min-width: 5.6rem; }
.seznam-vnosov .vnos-povezava:has(.vnos-datum) { grid-template-columns: auto minmax(0, 1fr) auto; }

/* priloge in ikone v besedilu */
.priloga { display: inline-flex; align-items: center; gap: .4rem; }
.znacka-priloge .ikona { width: .95em; height: .95em; vertical-align: -0.12em; }
.kartica.prazno { color: var(--sivo); }

/* seznami z gumbom na desni (TRR, kategorije): gumb vedno desno, besedilo se prelomi levo */
.seznam-racunov li { flex-wrap: nowrap; }
.seznam-racunov li > span:first-child { flex: 1; min-width: 0; }
.seznam-racunov li > :last-child { flex: none; }
@media (max-width: 640px) {
  /* zavihki vrste vnosa: tri enako široka polja */
  .zavihki { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); width: 100%; }
  .zavihek { text-align: center; padding: .5rem .4rem; line-height: 1.25; display: flex; align-items: center; justify-content: center; }
}

/* ---------- nastavitve: zavihka, dodajanje računa, podatki ---------- */
.zavihki-nastavitev .zavihek { display: inline-flex; align-items: center; gap: .45rem; }
details.dodaj-racun { margin-top: 1rem; }
details.dodaj-racun > summary { list-style: none; width: auto; }
details.dodaj-racun > summary::-webkit-details-marker { display: none; }
details.dodaj-racun[open] > summary { margin-bottom: 1rem; }
.podatki-sistema { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1.2rem; margin: 0 0 .6rem; font-size: .92rem; }
.podatki-sistema dt { color: var(--sivo); }
.podatki-sistema dd { margin: 0; color: var(--besedilo); overflow-wrap: anywhere; }
.podatki-sistema code { font-size: .85rem; }
@media (max-width: 640px) {
  .podatki-sistema { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .podatki-sistema dd { margin-bottom: .5rem; }
}

/* =====================================================================
   Segmentni preklopi – zavihki (vrsta vnosa, kategorije, nastavitve) in preklopi grafov.
   Proga je za odtenek temnejša od podlage in ima tanko obrobo; izbrani gumb je bel z obrobo,
   da se jasno vidi, kaj je izbrano. Velja povsod v aplikaciji.
   ===================================================================== */
:root {
  --segment-proga: #EBEEF3;
  --segment-aktiven: #FFFFFF;
  --segment-besedilo: #475569;
}
:root[data-barve="temna"] {
  --segment-proga: #0F1626;
  --segment-aktiven: #26324A;
  --segment-besedilo: #A8B4C6;
}
.zavihki, .preklop {
  background: var(--segment-proga);
  border: 1px solid var(--rob);
}
.zavihek, .preklop button { color: var(--segment-besedilo); font-weight: 500; }
.zavihek:hover, .preklop button:hover { color: var(--besedilo); background: rgba(148, 163, 184, .14); }
.zavihek.aktiven, .preklop button.aktiven {
  background: var(--segment-aktiven);
  color: var(--besedilo);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .10), 0 0 0 1px var(--rob-mocan);
}
:root[data-barve="temna"] .zavihek.aktiven, :root[data-barve="temna"] .preklop button.aktiven {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 1px var(--rob-mocan);
}
.zavihek:focus-visible, .preklop button:focus-visible { outline: 3px solid rgba(99, 102, 241, .35); outline-offset: 1px; }
/* Sekundarni gumbi: enaka tanka obroba kot preklopi (narisana znotraj, velikost se ne spremeni). */
.sekundarni { box-shadow: inset 0 0 0 1px var(--rob); }
.sekundarni:hover { box-shadow: inset 0 0 0 1px var(--rob-mocan); }

/* =====================================================================
   Mesečni proračun: kartica na pregledu, meja na mini grafu, obvestilo
   Stanje je vedno označeno z ikono in besedilom, ne samo z barvo.
   ===================================================================== */
:root {
  --stanje-dobro: #059669;   --stanje-dobro-bg: #ECFDF5;
  --stanje-pozor: #B45309;   --stanje-pozor-bg: #FFFBEB;   --stanje-pozor-trak: #F59E0B;
  --stanje-cez: #DC2626;     --stanje-cez-bg: #FEF2F2;     --stanje-cez-trak: #EF4444;
}
:root[data-barve="temna"] {
  --stanje-dobro: #34D399;   --stanje-dobro-bg: rgba(16, 185, 129, .14);
  --stanje-pozor: #FBBF24;   --stanje-pozor-bg: rgba(245, 158, 11, .14);  --stanje-pozor-trak: #F59E0B;
  --stanje-cez: #F87171;     --stanje-cez-bg: rgba(239, 68, 68, .14);     --stanje-cez-trak: #EF4444;
}
.proracun { --stanje: var(--stanje-dobro); --stanje-bg: var(--stanje-dobro-bg); --stanje-trak: var(--stanje-dobro); }
.proracun-blizu, .proracun-napoved { --stanje: var(--stanje-pozor); --stanje-bg: var(--stanje-pozor-bg); --stanje-trak: var(--stanje-pozor-trak); }
.proracun-preseženo { --stanje: var(--stanje-cez); --stanje-bg: var(--stanje-cez-bg); --stanje-trak: var(--stanje-cez-trak); }
.proracun-preseženo { border-color: color-mix(in srgb, var(--stanje-cez) 35%, var(--rob)); }
.proracun-vrh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin-bottom: .7rem; }
.proracun-znesek strong { font-size: 1.45rem; font-weight: 700; color: var(--besedilo); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.proracun-znesek span { color: var(--sivo); font-variant-numeric: tabular-nums; }
.znacka-stanja { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 999px;
                 background: var(--stanje-bg); color: var(--stanje); font-size: .82rem; font-weight: 600; }
.trak-proracuna { position: relative; height: 12px; border-radius: 999px; background: var(--trak); overflow: visible; }
.trak-proracuna .polnilo { display: block; height: 100%; border-radius: 999px; background: var(--stanje-trak); transition: width .4s ease; }
.trak-proracuna .oznaka-danes { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px;
                                background: var(--besedilo); opacity: .55; }
.proracun-sporocilo { margin: .85rem 0 .9rem; color: var(--besedilo-2); }
.proracun-podatki { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem 1rem; margin: 0;
                    padding-top: .85rem; border-top: 1px solid var(--rob); }
.proracun-podatki .siroko { grid-column: 1 / -1; }
.proracun-podatki dt { color: var(--sivo); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.proracun-podatki dd { margin: .15rem 0 0; color: var(--besedilo); font-weight: 600; font-variant-numeric: tabular-nums; }
.namig-delez { color: var(--sivo); font-weight: 500; font-size: .85rem; }
.proracun-povabilo { display: flex; align-items: center; gap: .7rem; color: var(--besedilo-2); }
.proracun-povabilo .ikona { color: var(--prenos); width: 22px; height: 22px; }

/* obvestilo po vnosu (blizu meje / čez) */
.sporocilo.pozor { display: flex; align-items: flex-start; gap: .6rem; background: var(--stanje-pozor-bg); color: var(--besedilo-2);
                   border: 1px solid color-mix(in srgb, var(--stanje-pozor-trak) 45%, transparent); }
.sporocilo.pozor .ikona { color: var(--stanje-pozor); margin-top: .15rem; }
.sporocilo.pozor a { margin-left: .3rem; font-weight: 600; }

/* mini graf: polje stolpca, meja in meseci čez mejo */
.mini-stolpci { position: relative; height: auto; }
.mini-stolpec { height: auto; }
.polje-stolpca { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 70px; }
.mini-stolpec .stolpec.cez { background: var(--stanje-cez-trak); }
.mini-stolpec .stolpec.cez.zdaj { background: var(--stanje-cez); }
.mini-meja { position: absolute; left: 0; right: 0; top: calc((1 - var(--v)) * 70px); border-top: 2px dashed var(--besedilo);
             opacity: .45; pointer-events: none; z-index: 1; }
.legenda-meje { display: flex; align-items: center; gap: .4rem; margin-top: .45rem; color: var(--sivo); font-size: .72rem; }
.crta-meje { width: 18px; border-top: 2px dashed var(--besedilo); opacity: .5; }

/* ---------- trak proračuna: del do meje, del čez mejo (črtkano rdeče), meja in »danes« ---------- */
.trak-proracuna { position: relative; height: 14px; margin: 6px 0 0; }
.trak-proracuna .polnilo { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.trak-proracuna.je-cez .polnilo { background: var(--stanje-pozor-trak); border-radius: 999px 0 0 999px; }
.trak-proracuna .polnilo-cez {
  position: absolute; top: 0; bottom: 0; border-radius: 0 999px 999px 0;
  background: repeating-linear-gradient(135deg, var(--stanje-cez-trak) 0 6px, var(--stanje-cez) 6px 9px);
}
.trak-proracuna .oznaka-meje { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; border-radius: 2px;
                               background: var(--besedilo); }
.trak-proracuna .oznaka-danes { top: -5px; bottom: -5px; width: 0; margin-left: 0; background: none; opacity: .75;
                                border-left: 2px dotted var(--besedilo); border-radius: 0; }
.legenda-traku { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .55rem; color: var(--sivo); font-size: .76rem; }
.legenda-traku:empty { display: none; }
.legenda-traku span { display: inline-flex; align-items: center; gap: .4rem; }
.legenda-traku i { display: inline-block; flex: none; }
.vzorec-znotraj, .vzorec-cez { width: 16px; height: 8px; border-radius: 3px; }
.vzorec-znotraj { background: var(--stanje-pozor-trak); }
.vzorec-cez { background: repeating-linear-gradient(135deg, var(--stanje-cez-trak) 0 4px, var(--stanje-cez) 4px 6px); }
.vzorec-meja { width: 3px; height: 14px; border-radius: 2px; background: var(--besedilo); }
.vzorec-danes { width: 0; height: 14px; border-left: 2px dotted var(--besedilo); opacity: .75; }

/* =====================================================================
   Način storitve: registracija, prijava z e-pošto, preizkus, naročnina, izbris računa
   ===================================================================== */
.past { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.povezave-prijave { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin: 1.1rem 0 0; font-size: .9rem; color: var(--sivo); }
.ponovno-poslji { margin-top: .7rem; }
.prijava label.potrditveno span a { font-weight: 500; }
.gumb-modri { background: #1D4ED8; color: #fff; }
.gumb-modri:hover { background: #2563EB; color: #fff; }
.znacka-preizkusa { display: inline-flex; align-items: center; min-height: 32px; padding: .2rem .75rem; border-radius: 999px;
                    font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap;
                    background: var(--prenos-bg); color: var(--prenos); }
.znacka-preizkusa.potekla { background: var(--stanje-cez-bg); color: var(--stanje-cez); }
.narocnina { --stanje: var(--stanje-dobro); --stanje-bg: var(--stanje-dobro-bg); }
.narocnina-preizkus { --stanje: var(--prenos); --stanje-bg: var(--prenos-bg); }
.narocnina-potekla { --stanje: var(--stanje-cez); --stanje-bg: var(--stanje-cez-bg); }
.narocnina .znacka-stanja { margin-bottom: .6rem; }
.paket .cena { font-size: 1.4rem; color: var(--besedilo); font-variant-numeric: tabular-nums; }
.seznam-kljukic { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .45rem; }
.seznam-kljukic li { padding-left: 1.6rem; position: relative; color: var(--besedilo-2); }
.seznam-kljukic li::before { content: "✓"; position: absolute; left: 0; color: var(--prihodek); font-weight: 700; }
.nevarno-obmocje { border-color: color-mix(in srgb, var(--izdatek) 30%, var(--rob)); }
.nevarno-obmocje details > summary { list-style: none; display: inline-flex; width: auto; }
.nevarno-obmocje details > summary::-webkit-details-marker { display: none; }
.nevarno-obmocje details[open] > summary { margin-bottom: 1rem; }
.pravno h2 { margin-top: 1.6rem; }
.pravno p, .pravno li { color: var(--besedilo-2); }
@media (max-width: 640px) {
  .znacka-preizkusa { font-size: .72rem; padding: .15rem .55rem; }
}

/* ---------- odjava v glavi in koraki čarovnika ---------- */
.odjava-glava { margin: 0; display: inline-flex; }
button.gumb-odjava {
  min-height: 38px; height: 38px; padding: 0 .8rem; gap: .4rem; border-radius: 999px;
  background: var(--sekundarni); color: var(--besedilo-2); font-size: .85rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--rob);
}
button.gumb-odjava:hover { background: var(--nevarno-bg); color: var(--nevarno-besedilo); transform: none; box-shadow: none; }
@media (max-width: 760px) {
  /* na telefonu samo ikona (besedilo ostane za bralnike zaslona v aria-label) */
  button.gumb-odjava { width: 38px; padding: 0; }
  .besedilo-odjave { display: none; }
}
.koraki-carovnika { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; padding: 0; margin: .4rem 0 .6rem;
                    color: var(--sivo); font-size: .88rem; font-weight: 500; }
.koraki-carovnika li { display: inline-flex; align-items: center; gap: .45rem; }
.koraki-carovnika span { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center;
                         justify-content: center; background: var(--sekundarni); color: var(--sivo); font-weight: 700;
                         box-shadow: inset 0 0 0 1px var(--rob); }
.koraki-carovnika .aktiven { color: var(--besedilo); }
.koraki-carovnika .aktiven span { background: var(--glavna); color: var(--na-glavni); box-shadow: none; }
.koraki-carovnika .opravljen span { background: var(--prihodek-bg); color: var(--prihodek); }

/* ---------- prijava napake: subtilna povezava v nogi ---------- */
.noga-aplikacije { max-width: 1160px; margin: -4.5rem auto 0; padding: 0 1.25rem 5.5rem; text-align: center; }
.noga-aplikacije a { display: inline-flex; align-items: center; gap: .35rem; color: var(--sivo); font-size: .8rem;
                     text-decoration: none; padding: .3rem .6rem; border-radius: 999px; transition: var(--prehod); }
.noga-aplikacije a:hover { color: var(--besedilo); background: var(--sekundarni); }
.noga-aplikacije .ikona { width: 14px; height: 14px; }
.prijava-napake { max-width: 560px; }
.prijava-napake textarea { width: 100%; padding: .62rem .8rem; border: 1px solid var(--rob-polja); border-radius: var(--polmer-gumb);
                           background: var(--kartica); color: var(--besedilo); font: inherit; resize: vertical; }

/* ---------- obnovitvena koda (šifrirani računi) ---------- */
.obnovitvena-koda { max-width: 560px; }
.obnovitvena-koda .koda { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.3rem; font-weight: 600;
                          letter-spacing: .06em; text-align: center; padding: .9rem .6rem; margin: 1rem 0;
                          background: var(--sekundarni); border: 1px dashed var(--rob-mocan); border-radius: 12px;
                          overflow-wrap: anywhere; user-select: all; }
.obnovitvena-koda ul { padding-left: 1.2rem; }
.vnos-kode { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; text-transform: uppercase; letter-spacing: .04em; }
@media print {
  .vrh, .meni, .noga-aplikacije, .fab, .obnovitvena-koda form, .obnovitvena-koda .prijava-ikona { display: none !important; }
  .obnovitvena-koda { box-shadow: none; border: 0; }
}

/* ---------- priporočilo za varnostno kopijo (slike računov, starejše od 2 let) ---------- */
.varnostna-kopija .gumbi { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.varnostna-kopija .gumbi a { margin-left: 0; }
.varnostna-kopija form { margin: 0; }

/* ---------- pametni pomočnik ---------- */
.meni-pomocnik { display: inline-flex; align-items: center; gap: .3rem; }
.meni-pomocnik .ikona { width: 15px; height: 15px; color: var(--poudarek); }
.glava-pomocnika { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.2rem; }
.glava-pomocnika h1 { margin: 0 0 .2rem; }
.glava-pomocnika .namig { margin: 0; max-width: 60ch; }
.financni-pregled .glava-kartice { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.povzetek-pregleda { font-size: 1.08rem; font-weight: 600; color: var(--besedilo); margin: .4rem 0 1rem; }
.ugotovitve { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.ugotovitev { display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 12px;
              border: 1px solid var(--rob); background: var(--kartica-2); }
.ugotovitev strong { display: block; color: var(--besedilo); margin-bottom: .15rem; }
.ugotovitev p { margin: 0; color: var(--besedilo-2); font-size: .93rem; font-variant-numeric: tabular-nums; }
.ikona-ugotovitve { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
                    background: var(--sekundarni); color: var(--sivo); }
.ikona-ugotovitve .ikona { width: 17px; height: 17px; }
.ugotovitev.pozor .ikona-ugotovitve { background: var(--jantar-bg); color: var(--jantar-besedilo); }
.ugotovitev.dobro .ikona-ugotovitve { background: var(--prihodek-bg); color: var(--prihodek); }
.ugotovitev.info .ikona-ugotovitve { background: var(--prenos-bg); color: var(--prenos); }
.glava-pomocnika .ikona-krog { flex: 0 0 auto; background: var(--poudarek-bg); color: var(--poudarek); }

/* ---------- ponavljajoči računi ---------- */
.glava-strani .povezava-ponavljajoci { margin-left: auto; }
.seznam-cakajocih { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.seznam-cakajocih li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
                       padding: .7rem .9rem; border: 1px solid var(--rob); border-radius: 12px; background: var(--kartica-2); }
.opis-cakajocega { display: grid; gap: .1rem; }
.opis-cakajocega small { color: var(--sivo); }
.vrstica-zneska { display: flex; gap: .5rem; align-items: center; margin: 0; }
.vrstica-zneska input { width: 7.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.cakajo h2 .ikona { width: 18px; height: 18px; color: var(--jantar-besedilo); vertical-align: -3px; }
.predloge li { display: flex; align-items: center; gap: .5rem; }
.predloge li .vnos-povezava { flex: 1; min-width: 0; }
.predloge li form { margin: 0; }
.predloge li.neaktivna { opacity: .6; }
.predloge .vnos-opis small + small { display: block; }
.znacka-caka { color: var(--negotovo-besedilo); background: var(--negotovo-bg); border-radius: 999px; padding: 0 .45rem; font-weight: 600; }
.vnos-opis small .ikona { width: 12px; height: 12px; vertical-align: -1px; }
.izbira-zneska { border: 0; padding: 0; margin: 0 0 .8rem; display: grid; gap: .4rem; }
.izbira-zneska legend { font-weight: 600; margin-bottom: .3rem; }
.izbira-zneska small { color: var(--sivo); }
.vsebina-placila { flex: 1; min-width: 0; }
.vrstica-placila { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.znesek-placila { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--besedilo); }
.znesek-placila small { font-weight: 400; color: var(--sivo); }
.placila .gumbi { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.placila form { margin: 0; }
.prazno-pomocnika { color: var(--sivo); }

/* ---------- uvoz starega Excela ---------- */
.vrstica-nalaganja { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.kpi-uvoza { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.kpi-uvoza .kartica { margin: 0; padding: .8rem 1rem; display: grid; gap: .15rem; }
.kpi-uvoza small { color: var(--sivo); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.kpi-uvoza strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--besedilo); }
.preslikava { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.preslikava li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: .5rem 1rem; align-items: center;
                 padding: .7rem .9rem; border: 1px solid var(--rob); border-radius: 12px; background: var(--kartica-2); }
.preslikava li.manjka { border-color: var(--jantar); }
.staro-ime { display: grid; gap: .15rem; min-width: 0; }
.staro-ime small { color: var(--sivo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nova-kategorija { display: grid; gap: .3rem; }
.nova-kategorija select { width: 100%; }
.znacka-uvoza { justify-self: start; border-radius: 999px; padding: .05rem .55rem; font-size: .75rem; font-weight: 600; }
.znacka-uvoza.tocno { background: var(--prihodek-bg); color: var(--ok-besedilo); }
.znacka-uvoza.predlog { background: var(--negotovo-bg); color: var(--negotovo-besedilo); }
.znacka-uvoza.manjka { background: var(--izdatek-bg); color: var(--napaka-besedilo); }
.tezave-uvoza { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.tezave-uvoza li { display: grid; gap: .1rem; padding: .55rem .8rem; border-radius: 10px; border: 1px solid var(--rob);
                   font-size: .9rem; font-variant-numeric: tabular-nums; }
.tezave-uvoza li.napaka { background: var(--izdatek-bg); border-color: var(--napaka-rob); }
.tezave-uvoza li.opozorilo { background: var(--jantar-bg); border-color: var(--opozorilo-rob); }
.tezave-uvoza small { color: var(--sivo); }
.tezave-uvoza em { font-style: normal; color: var(--besedilo-2); }
.zavihek-uvoza { margin-bottom: .6rem; }
.zavihek-uvoza summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
.vrstice-uvoza td { text-align: left; }
.vrstice-uvoza td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.vrstice-uvoza tr.napaka td { color: var(--napaka-besedilo); }
.vrstice-uvoza tr.ze td { color: var(--sivo-2); }
@media (max-width: 640px) {
  .preslikava li { grid-template-columns: 1fr; }
  .kpi-uvoza strong { font-size: 1.2rem; }
}

/* ---------- delilnik postavk na računu ---------- */
.postavke-racuna select.kategorija-postavke { width: 100%; min-width: 8rem; max-width: 13rem; font-size: .85rem; padding-block: .35rem; }
.postavke-racuna select.predlagano { border-color: var(--poudarek); background-color: var(--poudarek-bg); }
#razdelitev-kategorij { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  /* Na telefonu ima postavka dve vrstici: opis čez vso širino, pod njim kategorija, znesek in ✕. */
  .postavke-racuna thead { display: none; }
  .postavke-racuna tr.postavka-racuna { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 2.6rem;
    grid-template-areas: "opis opis opis" "kat znesek x"; gap: .35rem; padding: .45rem 0;
    border-bottom: 1px solid var(--crta-tabele); }
  .darilo-da .postavke-racuna tr.postavka-racuna { grid-template-columns: auto minmax(0, 1fr) 5.5rem 2.6rem;
    grid-template-areas: "darilo opis opis opis" "kat kat znesek x"; }
  .postavke-racuna tr.postavka-racuna td { width: auto !important; padding: 0; }
  .postavke-racuna tr.postavka-racuna td:nth-child(1) { grid-area: darilo; align-self: center; }
  .postavke-racuna tr.postavka-racuna td:nth-child(2) { grid-area: opis; }
  .postavke-racuna tr.postavka-racuna td:nth-child(3) { grid-area: kat; }
  .postavke-racuna tr.postavka-racuna td:nth-child(4) { grid-area: znesek; }
  .postavke-racuna tr.postavka-racuna td:nth-child(5) { grid-area: x; }
  .postavke-racuna select.kategorija-postavke { max-width: none; }
  .postavke-racuna input[name=postavka_opis] { width: 100%; }
}

/* ---------- varnostne kopije ---------- */
.vrstica-mape { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-top: 1rem; }
.vrstica-mape label { flex: 1 1 280px; margin: 0; }
.vrstica-mape input { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .88rem; }
.seznam-kopij { margin-top: 1rem; }
.seznam-kopij summary { cursor: pointer; font-weight: 600; }
.seznam-kopij ul { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }
.seznam-kopij li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .5rem .8rem;
                   border: 1px solid var(--rob); border-radius: 10px; background: var(--kartica-2); }
.seznam-kopij li span { display: grid; gap: .1rem; font-variant-numeric: tabular-nums; }
.seznam-kopij li small { color: var(--sivo); }
.seznam-kopij form { margin: 0; }

/* ---------- telefon: spodnja vrstica, »Več«, hiter vnos ---------- */
.spodnji-meni { display: none; }
@media (max-width: 640px) {
  .vrh .meni { display: none; }
  .fab, .fab-telefon { display: none !important; }
  body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  .spodnji-meni { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--kartica);
    border-top: 1px solid var(--rob); padding: .3rem .25rem calc(.35rem + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px -18px rgba(15, 23, 42, .45); }
  .spodnji-meni a { display: grid; justify-items: center; gap: .1rem; padding: .3rem 0; min-height: 48px;
    color: var(--sivo); text-decoration: none; font-size: .68rem; font-weight: 600; }
  .spodnji-meni a .ikona { width: 22px; height: 22px; }
  .spodnji-meni a.aktiven { color: var(--besedilo); }
  .spodnji-meni a.aktiven .ikona { color: var(--poudarek); }
  .spodnji-meni a.nov { align-self: center; }
  .krog-nov { display: grid; place-items: center; width: 52px; height: 52px; margin-top: -1.3rem; border-radius: 50%;
    background: var(--glavna); color: var(--na-glavni); box-shadow: var(--senca-fab); }
  .spodnji-meni a.nov .ikona { color: var(--na-glavni); width: 26px; height: 26px; }
}
.ploscice { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.ploscice a { display: grid; justify-items: start; gap: .6rem; padding: 1rem 1.1rem; min-height: 96px;
  background: var(--kartica); border: 1px solid var(--rob); border-radius: var(--polmer); box-shadow: var(--senca);
  color: var(--besedilo); text-decoration: none; font-weight: 600; transition: var(--prehod); }
.ploscice a:hover { box-shadow: var(--senca-dvig); }
.ploscice .ikona { width: 24px; height: 24px; color: var(--poudarek); }
.hitri-vnos { max-width: 520px; }
.izbira-vrste { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 1rem;
  background: var(--sekundarni); border-radius: 12px; }
.izbira-vrste label { margin: 0; }
.izbira-vrste input { position: absolute; opacity: 0; pointer-events: none; }
.izbira-vrste span { display: block; text-align: center; padding: .55rem; border-radius: 9px; font-weight: 600; color: var(--sivo); cursor: pointer; }
.izbira-vrste input:checked + span { background: var(--kartica); color: var(--besedilo); box-shadow: var(--senca); }
.izbira-vrste input:focus-visible + span { outline: 2px solid var(--poudarek); outline-offset: 2px; }
.velik-znesek { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.stanje-hitrega { min-height: 1.4em; margin: .6rem 0 0; color: var(--besedilo-2); }
.cakajoci ul { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .4rem; }
.cakajoci li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem;
  padding: .5rem .8rem; border: 1px solid var(--rob); border-radius: 10px; background: var(--kartica-2);
  font-variant-numeric: tabular-nums; }
.cakajoci li small { flex-basis: 100%; }
.cakajoci h2 .ikona { width: 18px; height: 18px; color: var(--jantar-besedilo); vertical-align: -3px; }

/* ---------- namestitev na telefon ---------- */
.koraki-namestitve { list-style: none; counter-reset: korak; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 1rem; }
.koraki-namestitve > li { counter-increment: korak; margin: 0; }
.koraki-namestitve h2::before { content: counter(korak) ". "; color: var(--poudarek); }
.qr { display: inline-block; padding: .6rem; background: #FFFFFF; border-radius: 12px; border: 1px solid var(--rob); line-height: 0; }
.qr svg { width: 180px; height: 180px; }
.naslov-za-telefon code { font-size: 1rem; word-break: break-all; }
.odtis { word-break: break-all; font-size: .75rem; }

/* ---------- OwlyPowly: logotip sova in ime ---------- */
.sova .sova-glava { fill: var(--sova-glava); }
.sova .sova-oko { fill: var(--sova-oko); }
.sova .sova-zenica { fill: var(--sova-zenica); }
.sova .sova-blesk { fill: #FFFFFF; }
.sova .sova-crta { fill: none; stroke: var(--sova-crta); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sova .sova-konica { fill: var(--sova-oko); }
.znamka-ime.owly { letter-spacing: -.01em; text-transform: none; font-size: 1.12rem; color: var(--znamka-besedilo); }
.znamka-ime.owly b { font-weight: 800; }
.znamka-ime.owly span { font-weight: 800; color: var(--poudarek); }

/* ---------- UX: dovolj velike tipke na zaslonih na dotik (Fittsov zakon; Apple/Material 44–48 px, WCAG 2.5.8) ---------- */
.glava-strani .gumb-ikona { flex: none; }                      /* puščici za mesec se ne smeta stisniti */
@media (max-width: 640px) {
  .glava-strani { flex-wrap: wrap; }
  .glava-strani .povezava-ponavljajoci { margin-left: 0; order: 9; flex-basis: 100%; justify-content: center; }
}
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 44px; }
  .gumb, button, .gumb-majhen, button.gumb-majhen { min-height: 44px; }
  .gumb-majhen { padding-inline: .9rem; }
  .gumb-ikona, .gumb-nastavitve, button.gumb-odjava { width: 44px; height: 44px; min-height: 44px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  .seznam-vnosov input[type=checkbox] { margin: 11px; }            /* 44 × 44 območje za označevanje vnosa */
  summary { padding-block: .7rem; }
  .namig-naslova, .glava-kartice a, .skupina-pregled li a, .noga-aplikacije a {
    display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- UX: čakanje med branjem računa ---------- */
.cakam-racun { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 1rem;
  background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }
.cakam-racun[hidden] { display: none; }
.cakam-okno { width: min(100%, 380px); display: grid; justify-items: center; gap: .7rem; padding: 1.6rem 1.4rem;
  background: var(--kartica); border: 1px solid var(--rob); border-radius: var(--polmer); box-shadow: var(--senca-dvig); }
.cakam-okno strong { font-size: 1.1rem; color: var(--besedilo); }
.cakam-okno small { color: var(--sivo); }
.vrtavka { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--poudarek-bg);
  border-top-color: var(--poudarek); animation: vrtenje .9s linear infinite; }
@keyframes vrtenje { to { transform: rotate(360deg); } }
.koraki-branja { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; width: 100%; }
.koraki-branja li { display: flex; align-items: center; gap: .5rem; color: var(--sivo); font-size: .92rem; }
.koraki-branja li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--rob-polja); flex: none; }
.koraki-branja li.aktiven { color: var(--besedilo); font-weight: 600; }
.koraki-branja li.aktiven::before { border-color: var(--poudarek); background: var(--poudarek); animation: utrip 1s ease-in-out infinite alternate; }
.koraki-branja li.opravljen { color: var(--prihodek); }
.koraki-branja li.opravljen::before { border-color: var(--prihodek); background: var(--prihodek); }
.koraki-branja .odstotek { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--sivo); font-weight: 600; }
@keyframes utrip { to { opacity: .35; } }
.okostje { display: grid; gap: .45rem; width: 100%; padding: .8rem; border-radius: 10px; background: var(--kartica-2); }
.okostje i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--trak) 25%, var(--rob) 50%, var(--trak) 75%);
  background-size: 200% 100%; animation: okostje 1.3s ease-in-out infinite; }
.okostje i:nth-child(1) { width: 60%; } .okostje i:nth-child(2) { width: 85%; } .okostje i:nth-child(3) { width: 75%; }
.okostje i:nth-child(4) { width: 90%; } .okostje i:nth-child(5) { width: 45%; justify-self: end; }
@keyframes okostje { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- UX: toast potrditve ---------- */
.sporocilo.toast { position: fixed; z-index: 65; left: 50%; top: 5.2rem; width: min(calc(100vw - 2rem), 520px); margin: 0;
  display: flex; align-items: center; gap: .6rem; transform: translateX(-50%); box-shadow: var(--senca-dvig);
  font-weight: 600; animation: toast-noter .25s ease-out; transition: opacity .3s ease, transform .3s ease; }
.sporocilo.toast.toast-skrit { opacity: 0; transform: translate(-50%, -8px); }
.zapri-toast { margin-left: auto; flex: none; width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 999px;
  background: transparent; color: inherit; font-size: .9rem; box-shadow: none; }
.zapri-toast:hover { background: rgba(15, 23, 42, .08); color: inherit; transform: none; }
@keyframes toast-noter { from { opacity: 0; transform: translate(-50%, -10px); } }
@media (max-width: 640px) {
  .sporocilo.toast { top: auto; bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
  .sporocilo.toast.toast-skrit { transform: translate(-50%, 8px); }
}
@media (pointer: coarse) { .zapri-toast { width: 44px; height: 44px; min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .vrtavka, .okostje i, .koraki-branja li.aktiven::before, .sporocilo.toast { animation: none; }
  .sporocilo.toast { transition: none; }
}

/* ---------- UX: hierarhija – znesek je najmočnejši element vrstice, datum in oznake umirjeni ---------- */
.vnos-znesek { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.vnos-opis strong { font-weight: 600; }
@media (pointer: coarse) {
  .znamka, .zavihek, .najvecji a { min-height: 44px; align-items: center; }
  .skupinska-dejanja select, .skupinska-dejanja button, .postavke-racuna input:not([type=checkbox]),
  .gumb-nov-glava { min-height: 44px; height: auto; }
}

/* ---------- inflacija: nastavitve ---------- */
.inflacija-polja { border: 1px solid var(--rob); border-radius: 12px; padding: .9rem 1.1rem; margin: .4rem 0 1rem; background: var(--kartica-2); }
.inflacija-polja legend { font-weight: 600; padding: 0 .3rem; color: var(--besedilo); }
.inflacija-polja .namig { margin: .3rem 0 0; }

/* ---------- inflacija: preklop vrednosti in Owly kartice ---------- */
.preklop-vrednosti { margin: -.2rem 0 .8rem; flex-wrap: wrap; }
.owly-kartica { display: flex; gap: 1rem; align-items: flex-start; border-left: 4px solid var(--jantar);
  background: linear-gradient(120deg, var(--jantar-bg), transparent 55%), var(--kartica); }
.owly-kartica h2 { margin: 0 0 .35rem; font-size: 1.05rem; }
.owly-kartica p { margin: 0 0 .4rem; color: var(--besedilo-2); font-variant-numeric: tabular-nums; }
.owly-sova { flex: none; }

/* ---------- inflacija: poraba proti cenam (Pomočnik) ---------- */
.primerjava-cen { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .55rem; }
.primerjava-cen li { padding: .75rem .9rem; border-radius: 12px; border: 1px solid var(--rob); background: var(--kartica-2);
  border-left: 4px solid var(--rob-polja); }
.primerjava-cen li.hitreje { border-left-color: var(--izdatek-akcent); }
.primerjava-cen li.pocasneje { border-left-color: var(--prihodek-akcent); }
.vrstica-cen { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.vrstica-cen strong { flex: 1 1 10rem; color: var(--besedilo); }
.stevilke-cen { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stevilke-cen b { color: var(--besedilo); }
.stevilke-cen small { color: var(--sivo); }
.primerjava-cen p { margin: .3rem 0 0; color: var(--besedilo-2); font-size: .9rem; font-variant-numeric: tabular-nums; }
.owly-namig { display: flex; align-items: center; gap: .4rem; }
.owly-namig > svg { flex: none; }

/* ---------- inflacija: omejitve izračuna ---------- */
.omejitve-inflacije { margin-top: .6rem; font-size: .875rem; color: var(--besedilo-2); }
.omejitve-inflacije summary { cursor: pointer; font-weight: 600; color: var(--poudarek); }
.omejitve-inflacije ul { margin: .5rem 0; padding-left: 1.2rem; }
.omejitve-inflacije li { margin: .25rem 0; }
.primerjava-cen .steje { font-size: .8125rem; color: var(--besedilo-2); margin-top: .2rem; }
.manjka-cen { margin: .3rem 0; }
@media (pointer: coarse) { .omejitve-inflacije summary { min-height: 44px; display: flex; align-items: center; } }

/* ---------- pojasnila »i« (oblaček popover) ---------- */
.info-gumb { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 1.75rem; height: 1.75rem; min-height: 0; padding: 0; margin: -.2rem 0 0 .15rem; border: 0; border-radius: 50%;
  background: transparent; color: var(--besedilo-2); cursor: pointer; }
.info-gumb .ikona { width: 1.05rem; height: 1.05rem; }
.info-gumb:hover, .info-gumb:focus-visible { background: var(--kartica-2); color: var(--poudarek); }
.info-gumb:focus-visible { outline: 2px solid var(--poudarek); outline-offset: 1px; }
@media (pointer: coarse) { .info-gumb { width: 44px; height: 44px; margin: -.6rem -.4rem -.6rem 0; } }
.info-oblacek { display: none; }
.info-oblacek:popover-open, .info-oblacek.odprt { display: block; }
.info-oblacek { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(24rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem); overflow: auto; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--rob);
  border-radius: 16px; background: var(--kartica); color: var(--besedilo); box-shadow: 0 12px 32px rgba(15, 23, 42, .22);
  font-size: .9375rem; font-weight: 400; line-height: 1.5; text-align: left; letter-spacing: normal; text-transform: none; }
.info-oblacek::backdrop { background: rgba(15, 23, 42, .25); }
.info-glava { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; }
.info-glava strong { flex: 1; font-size: 1rem; }
.info-glava .sova { flex: none; }
.info-zapri { flex: none; width: 2rem; height: 2rem; min-height: 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--kartica-2); color: var(--besedilo); font-size: 1.25rem; line-height: 1; cursor: pointer; }
@media (pointer: coarse) { .info-zapri { width: 44px; height: 44px; } }
.info-odstavek { display: block; margin: 0 0 .5rem; color: var(--besedilo-2); }
.info-owly { display: block; margin-top: .7rem; padding: .55rem .75rem; border-left: 3px solid var(--jantar);
  border-radius: 8px; background: var(--jantar-bg); color: var(--besedilo); }

/* ---------- uvoz: navodila in prepoznani stolpci ---------- */
.navodila-uvoza { margin-top: 1rem; border-top: 1px solid var(--rob); padding-top: .8rem; }
.navodila-uvoza > summary { cursor: pointer; font-weight: 600; color: var(--poudarek); }
.navodila-uvoza table { margin: .6rem 0; }
.stolpci-uvoza th, .stolpci-uvoza td, .primer-uvoza th, .primer-uvoza td { text-align: left; white-space: normal; }
.primer-uvoza { max-width: 28rem; }
.primer-naslov { margin: .8rem 0 0; }
.prepoznani-stolpci ul { margin: .3rem 0 .6rem; padding-left: 1.2rem; }

/* ---------- sova: kupček zlatnikov (logotip, orodja/logotip.py) ---------- */
:root { --sova-kovanec: #F59E0B; --sova-kovanec-rob: #B45309; --sova-sij: #FEF3C7; }
.sova .sova-kovanec { fill: var(--sova-kovanec); stroke: var(--sova-kovanec-rob); stroke-width: .6; }
.sova .sova-kovanec-rob { fill: var(--sova-kovanec-rob); }
.sova .sova-kovanec-crta { fill: none; stroke: var(--sova-kovanec-rob); stroke-width: .55; }
.sova .sova-sij { fill: var(--sova-sij); }
.sova .sova-iskra { fill: var(--sova-kovanec); }

/* ---------- pogled: preklop Preprosto | Razširjeno ---------- */
.preklop-pogleda { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--kartica-2);
  border: 1px solid var(--rob); flex: none; }
.preklop-pogleda a { padding: .3rem .7rem; border-radius: 999px; font-size: .8125rem; font-weight: 600;
  color: var(--besedilo-2); text-decoration: none; white-space: nowrap; }
.preklop-pogleda a.aktiven { background: var(--kartica); color: var(--besedilo); box-shadow: var(--senca); }
.preklop-pogleda a:focus-visible { outline: 2px solid var(--poudarek); outline-offset: 1px; }
@media (pointer: coarse) { .preklop-pogleda a { min-height: 44px; display: inline-flex; align-items: center; } }
@media (max-width: 1180px) { .desno-v-glavi .preklop-pogleda { display: none; } }
.vrstica-pogleda { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vrstica-pogleda .preklop-pogleda { display: inline-flex; }

/* ---------- preprosti pogled: Pregled ---------- */
.preprosti-vrh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 700px) { .preprosti-vrh { grid-template-columns: minmax(0, 1fr); } }
.gumb-poslikaj { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  min-height: 140px; border-radius: var(--polmer); font-size: 1.25rem; font-weight: 700; text-align: center; }
.gumb-poslikaj .ikona { width: 2.5rem; height: 2.5rem; }
.poraba-meseca { display: flex; flex-direction: column; gap: .45rem; justify-content: center; margin: 0; }
.znesek-porabe { font-size: 2.4rem; font-weight: 800; color: var(--izdatek); font-variant-numeric: tabular-nums; line-height: 1.1; }

/* ---------- garancije ---------- */
.garancija { border: 1px solid var(--rob); border-radius: 12px; padding: .8rem 1rem; margin: 1rem 0; background: var(--kartica-2); }
.garancija-vklop span { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.garancija-podrobno { margin-top: .7rem; display: grid; gap: .7rem; }
.garancija-podrobno .oznaka-polja { margin: 0; font-weight: 600; }
.garancija-hitro { display: flex; flex-wrap: wrap; gap: .5rem; }
.garancija-hitro button { min-width: 5.5rem; min-height: 44px; }
.garancija-hitro button.aktiven { background: var(--glavna); border-color: var(--glavna); color: #FFFFFF; }
.garancija-po-meri { display: flex; flex-wrap: wrap; gap: .8rem; }
.garancija-po-meri label { flex: 1 1 9rem; }
.garancija-izid { margin: 0; display: flex; align-items: center; gap: .4rem; }
.garancija textarea { width: 100%; font: inherit; }
.garancije-kartica .glava-kartice h2 { display: inline-flex; align-items: center; gap: .45rem; }
.garancije-kartica.opozorilo-garancij { border-left: 4px solid var(--jantar); }
.seznam-garancij { list-style: none; margin: 0; padding: 0; }
.seznam-garancij > li { border-top: 1px solid var(--rob); }
.seznam-garancij > li:first-child { border-top: 0; }
.seznam-garancij a { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; color: inherit; text-decoration: none; min-height: 44px; }
.seznam-garancij .naziv { display: flex; flex-direction: column; min-width: 0; }
.seznam-garancij small { color: var(--besedilo-2); font-weight: 400; }
.seznam-garancij .iztek { display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; white-space: nowrap; }
.seznam-garancij .iztek.nujno { color: var(--izdatek); }
.seznam-garancij.polni > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; padding: .8rem 0; }
.seznam-garancij.polni .dejanja { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.seznam-garancij .opombe { font-style: italic; }
.seznam-garancij .garancija-potekla { opacity: .75; }
@media (max-width: 640px) { .seznam-garancij.polni > li { grid-template-columns: minmax(0, 1fr); } .seznam-garancij.polni .iztek { align-items: flex-start; } }
.zavihki-garancij { margin: .8rem 0 1rem; display: inline-flex; }
.zavihki-garancij a { text-decoration: none; }
.vec-moznosti { margin: .8rem 0; }
.vec-moznosti > summary { cursor: pointer; font-weight: 600; color: var(--poudarek); min-height: 44px; display: flex; align-items: center; }
.preprosto .stolpec-darilo { display: none; }
.trak-preprosto { --stanje-trak: var(--stanje-dobro); }
.trak-preprosto.proracun-blizu, .trak-preprosto.proracun-napoved { --stanje-trak: var(--stanje-pozor-trak); }
.trak-preprosto.proracun-preseženo { --stanje-trak: var(--stanje-cez-trak); }
.seznam-garancij.polni { padding: .2rem 1.2rem; }
.zavihki-garancij { background: var(--sekundarni); border-radius: 10px; padding: 3px; gap: 2px; }
.zavihki-garancij a { padding: .35rem .8rem; border-radius: 8px; color: var(--sivo); font-weight: 600; font-size: .875rem; }
.zavihki-garancij a.aktiven { background: var(--kartica); color: var(--besedilo); box-shadow: var(--senca); }
.zavihki-garancij small { font-weight: 500; opacity: .8; }
@media (pointer: coarse) { .zavihki-garancij a { min-height: 44px; display: inline-flex; align-items: center; } }

/* ---------- glava: spustni meni »Več« (razširjeni pogled) ---------- */
.meni { overflow: visible; min-width: 0; }
/* meni se ne stisne pod svojo vsebino (sicer »Več« zleze pod značko) – raje se glava prelomi */
@media (min-width: 1021px) { .meni { flex: 1 0 auto; } }
/* z značko paketa/preizkusa je v glavi manj prostora: preklop pogleda ostane v Nastavitvah in na strani Več */
@media (max-width: 1400px) { .desno-v-glavi:has(.uporabnik-glava.s-paketom) .preklop-pogleda { display: none; } }
.meni-vec { position: relative; }
.meni-vec > summary { list-style: none; cursor: pointer; color: var(--sivo); font-weight: 500; font-size: .9rem;
  padding: .42rem .68rem; border-radius: 999px; white-space: nowrap; transition: var(--prehod); }
.meni-vec > summary::-webkit-details-marker { display: none; }
.meni-vec > summary:hover, .meni-vec[open] > summary { color: var(--besedilo); background: var(--sekundarni); }
.meni-vec > summary.aktiven { color: var(--besedilo); background: var(--kartica); box-shadow: var(--senca); font-weight: 600; }
.meni-vec-seznam { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 14rem; padding: .35rem;
  display: flex; flex-direction: column; gap: 2px; background: var(--kartica); border: 1px solid var(--rob);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .18); }
.meni-vec-seznam a { display: flex; align-items: center; gap: .55rem; border-radius: 8px; padding: .55rem .7rem; }
.meni-vec-seznam .ikona { width: 1.05rem; height: 1.05rem; }
@media (pointer: coarse) { .meni-vec > summary, .meni-vec-seznam a { min-height: 44px; display: flex; align-items: center; } }

/* ---------- koledar ---------- */
.koledar-mreza { padding: .8rem; }
.koledar-glava, .koledar-teden { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.koledar-glava span { text-align: center; font-size: .75rem; font-weight: 600; color: var(--sivo); text-transform: uppercase; padding: .2rem 0 .4rem; }
.koledar-teden { margin-bottom: 4px; }
.koledar-dan { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 92px; padding: .35rem .45rem;
  border-radius: 10px; border: 1px solid var(--rob); background: var(--kartica); color: var(--besedilo); text-decoration: none;
  overflow: hidden; font-size: .78rem; font-variant-numeric: tabular-nums; }
.koledar-dan:hover { border-color: var(--poudarek); }
.koledar-dan.drug-mesec { opacity: .45; }
.koledar-dan.vikend { background: var(--kartica-2); }
.koledar-dan.praznik { background: color-mix(in srgb, var(--jantar) 14%, var(--kartica)); border-color: color-mix(in srgb, var(--jantar) 45%, var(--rob)); }
.koledar-dan.danes { box-shadow: inset 0 0 0 2px var(--poudarek); }
.koledar-dan.stopnja-1 { --poraba: 10%; } .koledar-dan.stopnja-2 { --poraba: 20%; }
.koledar-dan.stopnja-3 { --poraba: 32%; } .koledar-dan.stopnja-4 { --poraba: 46%; }
.koledar-dan[class*="stopnja-"]:not(.stopnja-0)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: color-mix(in srgb, var(--izdatek) calc(var(--poraba) * 2), transparent); }
.stevilka-dneva { font-weight: 700; font-size: .9rem; }
.koledar-dan.danes .stevilka-dneva { color: var(--poudarek); }
.ime-praznika { color: var(--jantar-besedilo); font-weight: 600; line-height: 1.2; font-size: .72rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.poraba-dneva { color: var(--izdatek); font-weight: 600; }
.prihodek-dneva { color: var(--prihodek); font-weight: 600; }
.oznake-dneva { display: flex; gap: 3px; margin-top: auto; }
.oznake-dneva .oznaka { display: inline-flex; color: var(--poudarek); }
.oznake-dneva .oznaka.garancija { color: var(--jantar-besedilo); }
.oznake-dneva .ikona { width: .95rem; height: .95rem; }
.legenda-koledarja { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .8rem .2rem 0; font-size: .8rem; color: var(--besedilo-2); }
.legenda-koledarja span { display: inline-flex; align-items: center; gap: .35rem; }
.legenda-koledarja .ikona { width: .95rem; height: .95rem; }
.legenda-koledarja .vzorec { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--rob); }
.legenda-koledarja .vzorec.praznik { background: color-mix(in srgb, var(--jantar) 30%, var(--kartica)); }
.legenda-koledarja .vzorec.stopnja-3 { background: color-mix(in srgb, var(--izdatek) 64%, transparent); }
.dogodki-koledarja { list-style: none; margin: 0; padding: 0; }
.dogodki-koledarja li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--rob); }
.dogodki-koledarja li:first-child { border-top: 0; }
.datum-dogodka { display: flex; flex-direction: column; font-weight: 600; font-variant-numeric: tabular-nums; }
.datum-dogodka small, .opis-dogodka small { color: var(--besedilo-2); font-weight: 400; }
.opis-dogodka { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.opis-dogodka .ikona { width: 1rem; height: 1rem; }
.opozorilo-izvedbe { flex-basis: 100%; color: var(--jantar-besedilo); font-size: .85rem; }
@media (max-width: 640px) {
  .koledar-mreza { padding: .5rem; }
  .koledar-glava, .koledar-teden { gap: 3px; }
  .koledar-dan { min-height: 54px; padding: .25rem; font-size: .7rem; border-radius: 8px; }
  .koledar-dan .ime-praznika, .koledar-dan .prihodek-dneva { display: none; }
  .koledar-dan .poraba-dneva { font-size: .58rem; white-space: nowrap; overflow: hidden; letter-spacing: -.02em; }
  .dogodki-koledarja li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

/* ---------- primerjava z bančnim izpiskom ---------- */
.vidno-skrito { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kpi-uvoza .opozorilo-kpi { border-left: 4px solid var(--jantar); }
.vse-v-redu { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--prihodek); }
.tabela-primerjave td, .tabela-primerjave th { text-align: left; white-space: normal; vertical-align: middle; }
.tabela-primerjave td:nth-child(4) { text-align: right; white-space: nowrap; font-weight: 700; }
.tabela-primerjave select { min-width: 12rem; }
.seznam-primerjave { list-style: none; margin: 0; padding: 0; }
.seznam-primerjave li { border-top: 1px solid var(--rob); }
.seznam-primerjave li:first-child { border-top: 0; }
.seznam-primerjave a, .seznam-primerjave li > span { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0;
  color: inherit; text-decoration: none; min-height: 44px; align-items: center; }
.seznam-primerjave li:has(> span) { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.seznam-primerjave small { display: block; color: var(--besedilo-2); font-weight: 400; }
.seznam-primerjave strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ujemanja > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .4rem; min-height: 44px; }

/* ---------- trenutna inflacija (Grafi, Pregled) ---------- */
.trenutna-inflacija { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.1rem; margin: 0 0 .7rem;
  padding: .55rem .9rem; border-radius: 12px; background: var(--jantar-bg); border: 1px solid color-mix(in srgb, var(--jantar) 35%, var(--rob));
  font-size: .9rem; color: var(--besedilo); font-variant-numeric: tabular-nums; }
.trenutna-inflacija small { color: var(--besedilo-2); }
.trenutna-inflacija a { margin-left: auto; font-size: .85rem; }
.kpi-inflacija small { display: block; color: var(--besedilo-2); font-size: .75rem; margin-top: .15rem; }

/* ---------- paketi in nadgradnja ---------- */
.paketi { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.paketi .paket .cena { font-size: 1.7rem; font-weight: 800; margin: .2rem 0; font-variant-numeric: tabular-nums; }
.paketi .paket.trenutni { border: 2px solid var(--glavna); }
.paketi .paket .gumbi { flex-wrap: wrap; }
.modal-ozadje { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(15, 23, 42, .45); }
.modal-okno { width: min(30rem, 100%); background: var(--kartica); color: var(--besedilo); border-radius: 16px;
  border: 1px solid var(--rob); padding: 1.3rem 1.4rem; box-shadow: 0 20px 50px rgba(15, 23, 42, .3); }
.modal-okno h2 { display: flex; align-items: center; gap: .5rem; margin-top: 0; }
.seznam-paketov-kratko { padding-left: 1.1rem; color: var(--besedilo-2); }
.znacka-preizkusa.brezplacno { background: var(--kartica-2); color: var(--besedilo); }

/* ---------- družina ---------- */
.seznam-clanov { list-style: none; margin: 0 0 1rem; padding: 0; }
.seznam-clanov li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--rob); }
.seznam-clanov li:first-child { border-top: 0; }
.seznam-clanov small { color: var(--besedilo-2); }

/* revizijska sled */
.stanje-verige.ok { border-left: 4px solid var(--prihodek-akcent); }
.stanje-verige.napaka { border-left: 4px solid var(--izdatek-akcent); }
.filtri-sledi { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.filtri-sledi label { flex: 1 1 9rem; }
.filtri-sledi .gumbi { flex: 1 1 100%; }
.tabela-ovoj { overflow-x: auto; }
.tabela-sledi { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela-sledi th, .tabela-sledi td { text-align: left; vertical-align: top; padding: .45rem .5rem; border-bottom: 1px solid var(--rob); }
.tabela-sledi .stevilka { font-variant-numeric: tabular-nums; color: var(--sivo); }
.tabela-sledi .razlike { list-style: none; margin: 0; padding: 0; }
.tabela-sledi .razlike li { overflow-wrap: anywhere; }
.tabela-sledi del { color: var(--izdatek); }
.tabela-sledi ins { color: var(--prihodek); text-decoration: none; }
.tabela-sledi .razlog { display: block; color: var(--sivo); margin-top: .2rem; }
.brez-preloma { white-space: nowrap; }
.razlog-spremembe small { color: var(--sivo); }

/* skrbniška plošča */
.vloga-znacka { font-size: .8rem; font-weight: 600; color: var(--poudarek); border: 1px solid var(--rob); border-radius: 999px; padding: .1rem .55rem; vertical-align: middle; }
.zavihki-admin { margin: .6rem 0 1rem; flex-wrap: wrap; }
.kpi-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.kpi-mreza .kpi { margin: 0; padding: .85rem 1rem; display: grid; gap: .2rem; }
.kpi-mreza .kpi span { color: var(--sivo); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.kpi-mreza .kpi strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.kpi-mreza .kpi small { color: var(--sivo); }
.dejavnost { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .35rem; }
.dejavnost small { color: var(--sivo); }
.dejanja-skrbnika form { display: flex; flex-wrap: wrap; gap: .55rem; align-items: flex-end; margin-bottom: .8rem; }
.dejanja-skrbnika .razlog-polje { flex: 1 1 16rem; margin: 0; }
.rocni-paket { flex-wrap: nowrap; min-width: 30rem; }
.rocni-paket input[name=razlog] { min-width: 10rem; }
.opozorilo-besedilo { color: var(--izdatek); }
.stanje-storitev { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.stanje-storitev li.ok svg { color: var(--prihodek); }
.stanje-storitev li.napaka svg { color: var(--izdatek); }
.stanje-storitev small { color: var(--sivo); overflow-wrap: anywhere; }

/* glava: prijavljeni uporabnik in paket */
.uporabnik-glava { display: inline-flex; align-items: center; gap: .5rem; min-height: 36px; padding: .2rem .7rem .2rem .25rem;
  border-radius: 999px; background: var(--sekundarni); color: var(--besedilo); text-decoration: none; max-width: 15rem; }
.uporabnik-glava:hover { color: var(--besedilo); background: var(--kartica-2); }
.uporabnik-glava:focus-visible { outline: 2px solid var(--poudarek); outline-offset: 2px; }
.uporabnik-glava .avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; font-weight: 700; background: var(--poudarek); color: #fff; }
.uporabnik-besedilo { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.uporabnik-ime { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uporabnik-paket { font-size: .7rem; font-weight: 600; color: var(--prenos); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uporabnik-glava.paket-free .uporabnik-paket { color: var(--sivo); }
.uporabnik-glava.paket-beta .uporabnik-paket { color: var(--jantar-besedilo); }
@media (max-width: 1400px) and (min-width: 641px) { .uporabnik-glava.s-paketom .uporabnik-ime { display: none; } }
@media (max-width: 640px) {
  .uporabnik-glava { padding-right: .55rem; max-width: 11rem; }
  .uporabnik-glava .uporabnik-ime { display: none; }
  .uporabnik-paket .dolgo { display: none; }
  .uporabnik-glava:not(.s-paketom) { padding-right: .25rem; }
}
@media (pointer: coarse) { .uporabnik-glava { min-height: 44px; } }

/* beta */
.beta-uvod { border-left: 4px solid var(--jantar); }
.beta-oznaka { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .3rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .03em; color: var(--jantar-besedilo); }

/* varčevanje in napoved */
.cilj-vrstica { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-bottom: .45rem; }
.cilj-zneski { color: var(--sivo); font-variant-numeric: tabular-nums; font-size: .9rem; }
.cilj-vrstica .cilj-zneski { margin-left: auto; }
.trak-cilja { height: 10px; border-radius: 999px; background: var(--sekundarni); overflow: hidden; }
.trak-cilja span { display: block; height: 100%; border-radius: 999px; background: var(--poudarek); }
.trak-cilja.cilj-po_planu span, .trak-cilja.cilj-dosezen span { background: var(--prihodek-akcent); }
.trak-cilja.cilj-ogrozen span { background: var(--jantar); }
.trak-cilja.cilj-potekel span { background: var(--izdatek-akcent); }
.cilj-sporocilo { margin: .55rem 0 .2rem; }
.znacka-cilja { display: inline-flex; align-items: center; padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
  background: var(--sekundarni); color: var(--sivo); vertical-align: middle; }
.znacka-cilja.cilj-po_planu, .znacka-cilja.cilj-dosezen { background: var(--prihodek-bg); color: var(--prihodek); }
.znacka-cilja.cilj-ogrozen { background: color-mix(in srgb, var(--jantar) 16%, transparent); color: var(--jantar-besedilo); }
.znacka-cilja.cilj-potekel { background: var(--izdatek-bg); color: var(--izdatek); }
.seznam-letnih { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .35rem; }
.seznam-letnih li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.seznam-letnih li > span:first-child { min-width: 6.5rem; color: var(--sivo); }
.seznam-letnih .znesek { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.seznam-letnih form { margin: 0; }
.predlogi-letnih ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.predlogi-letnih form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }
.tabela-poteka .znesek { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-poteka tr.minus .znesek { color: var(--izdatek); }
.obrazec-cilja .gumbi { grid-column: 1 / -1; }

/* hramba slik računov */
.hramba-opozorilo.blizu { border-left: 4px solid var(--jantar); }
.hramba-opozorilo.polno { border-left: 4px solid var(--izdatek-akcent); }
.izbira-moznosti { border: 0; padding: 0; margin: 0 0 .8rem; display: grid; gap: .5rem; }
.izbira-moznosti label { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.priloga.brez-slike { color: var(--sivo); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- pasica za piškotke (storitev) */
.pasica-piskotkov { position: fixed; z-index: 60; left: 1rem; right: 1rem; bottom: 1rem; max-width: 46rem; margin: 0 auto;
  display: flex; gap: 1rem; align-items: center; padding: 1rem 1.15rem; background: var(--kartica);
  border: 1px solid var(--rob-mocan); border-radius: var(--polmer); box-shadow: var(--senca-dvig); }
.pasica-piskotkov .pasica-besedilo { flex: 1; min-width: 0; }
.pasica-piskotkov p { margin: .2rem 0 0; font-size: .9rem; color: var(--besedilo-2); }
.pasica-piskotkov a { color: var(--poudarek); }
.pasica-gumbi { display: flex; gap: .5rem; flex-wrap: wrap; }
.pasica-gumbi button { flex: 1 1 auto; white-space: nowrap; }
@media (max-width: 640px) {
  .pasica-piskotkov { flex-direction: column; align-items: stretch; left: .5rem; right: .5rem;
    bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
  .pristajalna ~ .pasica-piskotkov, body:not(:has(.spodnji-meni)) .pasica-piskotkov { bottom: .5rem; }
}
@media print { .pasica-piskotkov { display: none; } }

/* Neobvezna vprašanja ob registraciji */
fieldset.neobvezno { border: 1px solid var(--rob); border-radius: var(--polmer-gumb); padding: .75rem 1rem 1rem; margin: .5rem 0 1rem; }
fieldset.neobvezno legend { padding: 0 .4rem; font-weight: 600; color: var(--besedilo-2); }

/* ---------------------------------------------------------------- skrbništvo: statistika */
.stat-mreza { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); margin-bottom: 1rem; }
.stat-kartica h2 { font-size: 1rem; margin: 0 0 .6rem; }
.stat-stolpci { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.stat-stolpci li { display: grid; grid-template-columns: minmax(0, 9rem) 1fr auto; gap: .6rem; align-items: center; font-size: .88rem; }
.stat-ime { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-trak { height: .55rem; background: var(--trak); border-radius: 999px; overflow: hidden; }
.stat-trak i { display: block; height: 100%; background: var(--poudarek); border-radius: 999px; }
.stat-st { font-variant-numeric: tabular-nums; font-weight: 600; }
.stat-st small { font-weight: 400; color: var(--sivo); }
.stat-dnevi { display: flex; align-items: flex-end; gap: 2px; height: 8rem; padding: .25rem 0; border-bottom: 1px solid var(--rob); }
.stat-dnevi span { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.stat-dnevi i { display: block; width: 100%; background: var(--poudarek); border-radius: 3px 3px 0 0; min-height: 1px; }
.stat-obdobje { margin-bottom: .75rem; }

/* ---------------------------------------------------------------- skrbništvo: napake in predlogi */
.znacka-odziva { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: var(--sekundarni); color: var(--besedilo-2); }
.znacka-odziva.novo { background: var(--poudarek-bg); color: var(--poudarek); }
.znacka-odziva.v_delu { background: var(--jantar-bg); color: var(--jantar-besedilo); }
.znacka-odziva.reseno { background: var(--prihodek-bg); color: var(--prihodek); }
.besedilo-odziva { white-space: pre-wrap; overflow-wrap: anywhere; }
.posnetek-odziva { max-width: 100%; max-height: 28rem; border: 1px solid var(--rob); border-radius: var(--polmer-gumb); }
.izbira-vrste { border: 0; padding: 0; margin: 0 0 .75rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.izbira-vrste legend { font-weight: 600; margin-bottom: .35rem; }

/* ---------------------------------------------------------------- čarovnik: kategorije */
.razlaga-kategorij p { margin: .35rem 0; }
.razlaga-kategorij > summary { cursor: pointer; font-weight: 600; }
.izbira-skupin { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.izbira-skupine { align-items: flex-start; padding: .6rem .75rem; border: 1px solid var(--rob); border-radius: var(--polmer-gumb); }
.izbira-skupine span { display: flex; flex-direction: column; gap: .1rem; }
.izbira-skupine small { color: var(--sivo); }
.lastna-skupina { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: end; }

/* Na telefonu je toast spodaj – ko je odprta pasica za piškotke, ga prestavimo na vrh, da se ne prekrivata. */
@media (max-width: 640px) {
  body:has(.pasica-piskotkov) .sporocilo.toast { top: 4.6rem; bottom: auto; }
}

/* Dvostopenjska prijava: rezervne kode v dveh stolpcih, koraki vklopa */
.rezervne-kode { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .4rem 1rem; }
.rezervne-kode .koda { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 600; font-variant-numeric: tabular-nums; }
.koraki-vklopa { padding-left: 1.2rem; display: grid; gap: 1rem; }
.koraki-vklopa code { word-break: break-all; }

/* Čarovnik: izbira pogleda (Preprosto / Razširjeno) – širši kartici z opisom, opomba pod njima. */
fieldset.izbira-pogleda { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.izbira-pogleda .kartica-izbire { align-items: flex-start; text-align: left; }
.izbira-pogleda .namig { grid-column: 1 / -1; margin: .25rem 0 0; }
.trenutna-stopnja { margin: .5rem 0; }
.lastna-stopnja summary { cursor: pointer; }

/* Oznaka izdaje v nogi (npr. »OwlyPowly Beta 1.0«) */
.noga-aplikacije .izdaja { display: block; margin-top: .35rem; font-size: .7rem; color: var(--sivo); }

/* ---------- glava aplikacije v eni vrstici (18. 10.) ----------
   Glava je lahko širša od vsebine (do 1400 px), da znamka, meni in desni del stojijo v eni vrsti. Manj pomembno se
   skrije postopno: dolga oznaka bete, slogan in besedilo »Odjava«, nato ime, nato preklop pogleda (ostane v Nastavitvah). */
@media (min-width: 1021px) {
  .vrh { padding-inline: max(1.25rem, calc((100vw - 1400px) / 2)); flex-wrap: nowrap; }
  .vrh .meni { flex: 1 1 auto; min-width: 0; }
  .vrh .desno-v-glavi { flex: none; }
}
@media (max-width: 1699px) { .uporabnik-paket .dolgo { display: none; } }
@media (max-width: 1599px) and (min-width: 641px) {
  .vrh .znamka-slogan { display: none; }
  button.gumb-odjava { width: 38px; padding: 0; }
  .besedilo-odjave { display: none; }
}
@media (max-width: 1399px) and (min-width: 641px) { .uporabnik-glava .uporabnik-ime { display: none; } .uporabnik-glava { padding-right: .6rem; } }
@media (max-width: 1239px) { .desno-v-glavi .preklop-pogleda { display: none; } }
@media (min-width: 1240px) and (max-width: 1400px) { .desno-v-glavi:has(.uporabnik-glava.s-paketom) .preklop-pogleda { display: inline-flex; } }

/* ---------- računi po e-pošti (Nastavitve → Sistem) ---------- */
.eposta-naslov { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .4rem 0 1rem; }
.eposta-naslov code { font-size: 1.05rem; padding: .45rem .75rem; border-radius: 10px; background: var(--kartica-2);
  border: 1px solid var(--rob); overflow-wrap: anywhere; user-select: all; }

/* Izbrana svetla tema: brskalnik (Chrome »samodejni temni način«, Samsung Internet) strani ne sme sam potemniti. */
:root[data-tema="svetla"] { color-scheme: only light; }
:root[data-tema="temna"] { color-scheme: only dark; }
/* Samsung Internet (in podobni) strani s temnim načinom v CSS ne prebarva prisilno – zato je temni način »Kot
   naprava« zapisan tudi kot medijsko pravilo (skripta v base.html nastavi data-barve; to je enakovredna rezerva). */
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistemska"] { color-scheme: dark; }
}
@media (prefers-color-scheme: light) {
  :root[data-tema="sistemska"] { color-scheme: light; }
}