/* Petica — topel papirnat slog družinskega kviza + karirasti zvezek kot površina nalog.
   Mobile-first (390 px), temni način prek prefers-color-scheme, vse barve kot spremenljivke. */

:root {
  --ozadje: #faf6ef;
  --papir: #fffdf9;
  --crnilo: #262220;
  --sivo: #7d746b;
  --sivo-svetlo: #b9b0a5;
  --sivo-berljivo: #6b635b; /* drobno besedilo na ozadju: kontrast ≥ 4,5 */
  --pesek: #ede4d3;
  --pesek-temno: #ddd0b9;
  --koral: #d97757;
  --koral-temno: #b85c3e;
  --koral-svetlo: #f4e3db;
  --modra: #3f6fa0;
  --modra-temno: #2e5580;
  --modra-svetla: #dfe8f2;
  --vijolicna: #7a5ba6;
  --vijolicna-temna: #5d4387;
  --vijolicna-svetla: #ebe4f4;
  --smaragdna: #24806a; /* NPZ matematika: bela na njej 4,8 : 1, na papirju 4,7 : 1 */
  --smaragdna-temna: #1d6352;
  --smaragdna-svetla: #dcefe7;
  --zlata: #e8b54d;
  --zlata-temna: #a8781c;
  --zlata-svetla: #f8ebcb;
  --zelena: #5f9147;
  --zelena-temna: #4a7636;
  --zelena-svetla: #e6efdc;
  --rdeca: #c1503c;
  --rdeca-svetla: #f6e0da;
  --na-barvi: #ffffff;
  --mreza: rgba(63, 111, 160, 0.12);
  --mreza-mocna: rgba(63, 111, 160, 0.3);
  --rob-zvezka: #e9a596;
  --obroba-barva: #262220;
  --senca-barva: #262220;
  --obroba: 2px solid var(--obroba-barva);
  --senca: 4px 4px 0 var(--senca-barva);
  --senca-mala: 2px 2px 0 var(--senca-barva);
  --radij: 18px;
  --font-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  /* barva predmeta (matematika = koral, fizika = modra, kemija = vijolična, NPZ = smaragdna) — nastavi .predmet-fiz /
     .predmet-kem / .predmet-npz */
  --pr: var(--koral);
  --pr-temno: var(--koral-temno);
  --pr-svetlo: var(--koral-svetlo);
  --obroc-ozadje: var(--pesek);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ozadje: #1a1714;
    --papir: #26221e;
    --crnilo: #f2ebe1;
    --sivo: #ab a094;
    --sivo: #aba094;
    --sivo-svetlo: #6f665d;
    --sivo-berljivo: #aba094;
    --pesek: #3a332c;
    --pesek-temno: #4b4239;
    --koral: #e58a6b;
    --koral-temno: #f2a88c;
    --koral-svetlo: #3e2a22;
    --modra: #7fa8d6;
    --modra-temno: #a7c4e6;
    --modra-svetla: #1f2c3b;
    --vijolicna: #b49be0;
    --vijolicna-temna: #cfbdf2;
    --vijolicna-svetla: #2c2439;
    --smaragdna: #5cc4a2;
    --smaragdna-temna: #8fdcc2;
    --smaragdna-svetla: #1b302a;
    --zlata: #e8b54d;
    --zlata-temna: #f0c870;
    --zlata-svetla: #3a3020;
    --zelena: #7fb262;
    --zelena-temna: #a3cf88;
    --zelena-svetla: #233020;
    --rdeca: #e07862;
    --rdeca-svetla: #3c221d;
    --na-barvi: #1a1714;
    --mreza: rgba(127, 168, 214, 0.09);
    --mreza-mocna: rgba(127, 168, 214, 0.26);
    --rob-zvezka: #8a4a3f;
    --obroba-barva: #d9cdbd;
    --senca-barva: #050404;
  }
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  color: var(--crnilo);
  background-color: var(--ozadje);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  overflow-x: hidden;
  padding: max(14px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
  /* stolpec: podpis »urosk.net« je na kratkih straneh na dnu zaslona, na dolgih na koncu vsebine */
  display: flex;
  flex-direction: column;
}
.oblak { position: fixed; border-radius: 50%; filter: blur(70px); opacity: 0.45; pointer-events: none; z-index: -1; }
.oblak-a { width: 60vmin; height: 60vmin; background: #f1c8b5; top: -18vmin; right: -22vmin; }
.oblak-b { width: 50vmin; height: 50vmin; background: #d9e3ee; bottom: -20vmin; left: -16vmin; }
@media (prefers-color-scheme: dark) {
  .oblak-a { background: #5a3326; opacity: 0.35; }
  .oblak-b { background: #22344a; opacity: 0.35; }
}

#app { width: 100%; max-width: 560px; margin: 0 auto; }
/* podpis spodaj levo (Uroš 02.11.2026): v toku strani, ne fiksen — nikoli ne prekrije gumbov, tipk ali tipkovnice */
.podpis { margin-top: auto; padding-top: 28px; align-self: flex-start; font-size: 0.78rem; line-height: 1; display: flex; gap: 14px; }
.podpis a { display: inline-block; padding: 6px 0; color: var(--sivo-berljivo); text-decoration: none; letter-spacing: 0.02em; }
.podpis a:hover, .podpis a:focus-visible { color: var(--crnilo); text-decoration: underline; text-underline-offset: 3px; }
/* ☕ Podpri (T-389, Uroš 03.11.2026): zgornja vrstica vsake strani, desno. V toku strani kot podpis — ne fiksna, zato
   nikoli ne prekrije vaje, tipk ali tipkovnice. Povezava je visoka 44 px (dotik), vidni čip je manjši in tih. */
.vrh-strani { width: 100%; max-width: 560px; margin: 0 auto 4px; display: flex; justify-content: flex-end; }
/* desni rob čipa = desni rob vsebine strani (aplikacija in strani za starše imajo različne širine) */
body:has(> .racun) .vrh-strani { max-width: 640px; }
body:has(> .starsi) .vrh-strani { max-width: 980px; }
body:has(> .prijava) .vrh-strani { max-width: 380px; }
.podpri { display: inline-flex; align-items: center; min-height: 44px; color: var(--crnilo); text-decoration: none; }
.podpri-cip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 3px 12px;
  border: var(--obroba); border-radius: 999px; background: var(--papir); box-shadow: var(--senca-mala);
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; line-height: 1;
}
.podpri:hover .podpri-cip { background: var(--zlata-svetla); }
.podpri:active .podpri-cip { transform: translate(2px, 2px); box-shadow: none; }
.podpri:focus-visible { outline: none; }
.podpri:focus-visible .podpri-cip { outline: 3px solid var(--zlata); outline-offset: 2px; }
.nalaganje { text-align: center; color: var(--sivo); padding: 30vh 0; }

h1, h2, h3, .display { font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.01em; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--zlata); outline-offset: 2px; }
.stevilka { font-variant-numeric: tabular-nums; }
.skrito { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.predmet-fiz { --pr: var(--modra); --pr-temno: var(--modra-temno); --pr-svetlo: var(--modra-svetla); }
.predmet-kem { --pr: var(--vijolicna); --pr-temno: var(--vijolicna-temna); --pr-svetlo: var(--vijolicna-svetla); }
.predmet-npz { --pr: var(--smaragdna); --pr-temno: var(--smaragdna-temna); --pr-svetlo: var(--smaragdna-svetla); }

/* ── zasloni ─────────────────────────────────────────────────────────────── */
.zaslon { display: flex; flex-direction: column; gap: 16px; animation: vstop 0.3s ease-out; }
@keyframes vstop { from { opacity: 0; transform: translateY(8px); } }

/* ── gumbi ───────────────────────────────────────────────────────────────── */
.gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 20px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: 0.01em;
  background: var(--pr); color: var(--na-barvi);
  border: var(--obroba); border-radius: 14px; box-shadow: var(--senca);
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.gumb:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--senca-barva); }
.gumb:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: var(--senca); }
.gumb.drugotni { background: var(--papir); color: var(--crnilo); }
.gumb.zlat { background: var(--zlata); color: #2b2111; }
.gumb.siroki { width: 100%; }
.gumb-ikona {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  background: var(--papir); border: var(--obroba); border-radius: 12px; box-shadow: var(--senca-mala);
}
.gumb-ikona:active { transform: translate(2px, 2px); box-shadow: none; }
.gumb-ikona svg { width: 22px; height: 22px; }
.povezava {
  background: none; border: none; padding: 10px 4px; min-height: 44px;
  font-weight: 600; color: var(--crnilo); text-decoration: underline 2px var(--pr); text-underline-offset: 4px;
}

/* ── kartice ─────────────────────────────────────────────────────────────── */
.kartica {
  background: var(--papir); border: var(--obroba); border-radius: var(--radij); box-shadow: var(--senca);
  padding: 16px;
}
.cip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px;
  border: var(--obroba); border-radius: 999px; background: var(--papir); box-shadow: var(--senca-mala);
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; white-space: nowrap;
}
.cip.zlat { background: var(--zlata-svetla); }
.cip.vroc { background: var(--koral-svetlo); }
.cip .mnozitelj { color: var(--zlata-temna); }

/* ── začetni zaslon (ime) ─────────────────────────────────────────────────── */
.dobrodoslica { padding-top: 8vh; text-align: center; gap: 22px; }
.logo {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.9;
  font-size: clamp(3.6rem, 21vw, 5.2rem); transform: rotate(-2deg); display: inline-block;
}
/* znak: obkrožena »5« kot ocena z rdečim pisalom; ob prvem prikazu se krog »nariše« (enkrat, ne v zanki) */
.logo-znak { display: inline-block; width: 0.78em; height: 0.78em; margin-left: 0.06em; vertical-align: 0.42em; transform: rotate(8deg); }
.znak-petice { display: block; width: 100%; height: 100%; overflow: visible; }
.logo:not(.logo-majhen) .znak-petice path:first-child { stroke-dasharray: 720; stroke-dashoffset: 720; animation: narisi-krog 0.9s 0.25s cubic-bezier(.6,.05,.3,1) forwards; }
@keyframes narisi-krog { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .logo .znak-petice path:first-child { animation: none; stroke-dashoffset: 0; } }
.logo-majhen { font-size: 2.1rem; transform: rotate(-2deg); }
.podnaslov { color: var(--sivo); max-width: 30ch; margin: 0 auto; }
.obrazec { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.obrazec label { font-weight: 700; }
.vnos-besedilo {
  width: 100%; min-height: 52px; padding: 12px 14px; font-size: 1.1rem;
  border: 2px solid var(--pesek-temno); border-radius: 12px; background: var(--ozadje);
}
.vnos-besedilo:focus { outline: none; border-color: var(--pr); box-shadow: 0 0 0 3px var(--pr-svetlo); }
.napaka-besedilo { color: var(--rdeca); font-weight: 600; font-size: 0.92rem; }

/* ── domači zaslon ───────────────────────────────────────────────────────── */
.glava { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pozdrav { font-size: 1.55rem; font-weight: 800; }
.pozdrav-pod { color: var(--sivo); margin-top: 2px; }

.nivo-kartica { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.medalja {
  position: relative; width: 64px; height: 64px; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: #2b2111;
}
.medalja svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.medalja span { position: relative; }
.nivo-ime { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; }
.nivo-pod { color: var(--sivo); font-size: 0.9rem; margin-top: 2px; }
.trak {
  height: 14px; margin-top: 8px; border: var(--obroba); border-radius: 999px; background: var(--pesek); overflow: hidden;
}
.trak > div {
  height: 100%; width: 0; background: var(--zlata); border-right: 2px solid var(--obroba-barva);
  transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.trak.prazen > div { border-right: none; }

.dan-vrsta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
/* najožji telefoni (320 px): manjše pike tedna, da kartica dnevnega cilja ne prelije zaslona */
@media (max-width: 350px) {
  .dan-vrsta { gap: 10px; }
  .dan-vrsta .obroc { width: 80px; height: 80px; }
  .dan-vrsta .obroc-besedilo strong { font-size: 1.4rem; }
  .teden { gap: 2px; }
  .teden-pika { width: 20px; height: 20px; font-size: 0.68rem; }
  .teden-dan { font-size: 0.66rem; }
}
.obroc { position: relative; width: 104px; height: 104px; }
.obroc svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.obroc circle { fill: none; stroke-width: 11; }
.obroc .ozadje { stroke: var(--obroc-ozadje); }
.obroc .polnilo { stroke: var(--pr); stroke-linecap: round; transition: stroke-dashoffset 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.obroc.dosezen .polnilo { stroke: var(--zelena); }
.obroc-besedilo {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  font-family: var(--font-display);
}
.obroc-besedilo strong { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.obroc-besedilo small { color: var(--sivo); font-family: var(--font-body); font-size: 0.78rem; }
.dan-opis h3 { font-size: 1.05rem; }
.dan-opis p { color: var(--sivo); font-size: 0.9rem; margin-top: 2px; }
.teden { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.teden-dan { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--sivo); }
.teden-pika {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--pesek-temno);
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; color: var(--crnilo);
}
.teden-dan.malo .teden-pika { background: var(--pesek); }
.teden-dan.steje .teden-pika { background: var(--zlata-svetla); border-color: var(--zlata); }
.teden-dan.cilj .teden-pika { background: var(--zelena); border-color: var(--obroba-barva); color: var(--na-barvi); }
.teden-dan.danes { color: var(--crnilo); font-weight: 700; }
.teden-dan.danes .teden-pika { box-shadow: 0 0 0 2px var(--papir), 0 0 0 4px var(--pr); }

.zavihki {
  /* en stolpec na predmet (matematika, fizika, kemija, NPZ) — vsi v eni vrstici */
  /* širina po besedi (»Matematika« je daljša od »NPZ«), da se pika in ime ne prelomita */
  display: flex; gap: 0; padding: 4px;
  border: var(--obroba); border-radius: 16px; background: var(--pesek); box-shadow: var(--senca-mala);
}
.zavihek {
  flex: 1 1 auto; white-space: nowrap;
  min-height: 46px; border: none; border-radius: 12px; background: transparent;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
}
.zavihek[aria-selected="true"] { background: var(--papir); box-shadow: inset 0 0 0 2px var(--obroba-barva); }
.zavihek .pika-predmeta { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
@media (max-width: 440px) { .zavihek { font-size: 0.95rem; padding: 0 4px; } .zavihek .pika-predmeta { width: 8px; height: 8px; margin-right: 5px; } }
/* najožji telefoni (320 px): štirje zavihki brez pik in z manjšo pisavo, da ni vodoravnega drsenja */
@media (max-width: 350px) { .zavihek { font-size: 0.86rem; padding: 0 3px; } .zavihek .pika-predmeta { display: none; } }

.predmet-vsebina { display: flex; flex-direction: column; gap: 14px; }
.nacini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 600px) { .nacini { grid-template-columns: repeat(4, 1fr); } }
.nacin {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 76px; padding: 10px 12px;
  border: var(--obroba); border-radius: 14px; background: var(--papir); box-shadow: var(--senca-mala); text-align: left;
}
.nacin:active { transform: translate(2px, 2px); box-shadow: none; }
.nacin strong { font-family: var(--font-display); font-size: 1rem; }
.nacin small { color: var(--sivo); font-size: 0.78rem; line-height: 1.25; }
.nacin .ikona { font-size: 1.15rem; line-height: 1; }
.nacin.poudarjen { background: var(--pr-svetlo); }
.nacin:disabled { opacity: 0.5; cursor: default; }

.poglavja { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; }
.poglavje {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  min-height: 64px; padding: 10px 12px; text-align: left;
  border: var(--obroba); border-radius: 14px; background: var(--papir); box-shadow: var(--senca-mala);
}
.poglavje:active { transform: translate(2px, 2px); box-shadow: none; }
.poglavje-oznaka {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--pr-svetlo); color: var(--pr-temno); border: 2px solid var(--pr);
  font-family: var(--font-display); font-weight: 800;
}
.poglavje-ime { font-weight: 700; line-height: 1.2; }
.poglavje-opis { color: var(--sivo); font-size: 0.82rem; line-height: 1.25; margin-top: 2px; }
.poglavje.prazno { opacity: 0.55; }
.zvezdice { display: inline-flex; gap: 1px; }
.zvezdice svg { height: 18px; width: auto; display: block; }
.zvezdica-polna { fill: var(--zlata); stroke: var(--obroba-barva); stroke-width: 1.4; }
.zvezdica-prazna { fill: none; stroke: var(--sivo-svetlo); stroke-width: 2; }

.razdelek { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 4px; }
.razdelek h2 { font-size: 1.25rem; }
.razdelek span { color: var(--sivo); font-size: 0.9rem; }

.znacke-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.znacka {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; text-align: center;
  border-radius: 14px; background: transparent; border: 2px dashed var(--pesek-temno);
}
.znacka.dobljena { background: var(--papir); border: var(--obroba); box-shadow: var(--senca-mala); }
.znacka-medalja {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.55rem;
  background: var(--pesek); filter: grayscale(1); opacity: 0.55;
}
.znacka.dobljena .znacka-medalja {
  background: radial-gradient(circle at 35% 30%, #fff5d9, var(--zlata) 70%);
  border: 2px solid var(--obroba-barva); filter: none; opacity: 1;
}
.znacka-ime { font-weight: 700; font-size: 0.8rem; line-height: 1.15; }
.znacka-opis { color: var(--sivo); font-size: 0.72rem; line-height: 1.2; }
.znacke-vrsta { display: flex; gap: 8px; overflow: hidden; }
.znacke-vrsta .znacka-medalja { width: 44px; height: 44px; font-size: 1.3rem; flex: none; }

.noga { text-align: center; color: var(--sivo); font-size: 0.8rem; padding: 10px 0 0; }

/* ── vaja ────────────────────────────────────────────────────────────────── */
.vaja-glava { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.vaja-naslov { min-width: 0; }
.vaja-naslov h1 { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vaja-naslov small { color: var(--sivo); font-size: 0.8rem; display: block; }
.xp-stevec { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.xp-stevec svg { width: 18px; height: 18px; fill: var(--zlata); stroke: var(--obroba-barva); stroke-width: 1.5; }
.xp-stevec.bum { animation: bum 0.45s ease; }
@keyframes bum { 40% { transform: scale(1.25); } }

.vaja-trak { display: flex; align-items: center; gap: 10px; }
.vaja-trak .napredek { flex: 1; }
.mini-trak { height: 10px; border-radius: 999px; background: var(--pesek); overflow: hidden; border: 2px solid var(--obroba-barva); }
.mini-trak > div { height: 100%; background: var(--pr); transition: width 0.5s ease; }
.mini-trak-opis { font-size: 0.75rem; color: var(--sivo); margin-top: 3px; }

/* zvezek: karirast papir z rdečim robom */
.zvezek {
  position: relative; padding: 18px 14px 20px 40px;
  background-color: var(--papir);
  background-image:
    linear-gradient(var(--mreza) 1px, transparent 1px),
    linear-gradient(90deg, var(--mreza) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
  border: var(--obroba); border-radius: var(--radij); box-shadow: var(--senca);
  display: flex; flex-direction: column; gap: 14px;
}
.zvezek::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 28px; width: 2px; background: var(--rob-zvezka);
}
.oznaka-naloge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 700; color: var(--pr-temno);
  background: var(--pr-svetlo); border: 1.5px solid var(--pr); border-radius: 999px; padding: 2px 10px;
}
.tocke-npz {
  font-size: 0.78rem; font-weight: 700; color: var(--smaragdna-temna); background: var(--smaragdna-svetla);
  border: 1.5px solid var(--smaragdna); border-radius: 999px; padding: 2px 10px; white-space: nowrap; margin-right: auto;
}
.npz-vir { font-size: 0.85rem; color: var(--sivo-berljivo); line-height: 1.4; }
.npz-vir a { color: var(--smaragdna-temna); font-weight: 600; }
.oznaka-naloge.ponovitev { color: var(--zlata-temna); background: var(--zlata-svetla); border-color: var(--zlata); }
.navodilo { font-weight: 600; font-size: 1.02rem; line-height: 1.4; }
.izraz {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 8vw, 2.3rem);
  line-height: 1.25; text-align: center; padding: 6px 0; overflow-wrap: anywhere;
}
.izraz.dolgo { font-size: clamp(1.25rem, 5.6vw, 1.6rem); text-align: left; font-family: var(--font-body); font-weight: 500; }

/* ulomek */
.ulomek { display: inline-flex; flex-direction: column; align-items: stretch; vertical-align: middle; text-align: center; margin: 0 0.12em; line-height: 1.05; font-size: 0.82em; }
.ulomek > span { padding: 0 0.15em; }
.ulomek > span:first-child { border-bottom: 0.08em solid currentColor; padding-bottom: 0.06em; }
.ulomek > span:last-child { padding-top: 0.06em; }
sub { font-size: 0.66em; vertical-align: -0.28em; line-height: 0; }

/* polja */
.predloga {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 4px;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 5.6vw, 1.6rem); line-height: 1.2;
}
.predloga .kos { white-space: pre-wrap; }
.predloga .skupina { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* NPZ postopek v korakih (»1. Odprava oklepajev: [ ]x + [ ] = [ ]x + [ ]«): široka skupina se na telefonu prelomi */
.predmet-npz .predloga .skupina { flex-wrap: wrap; justify-content: center; max-width: 100%; row-gap: 6px; }
.predmet-npz .predloga .skupina .kos { white-space: normal; }
.polje {
  width: 4ch; min-width: 2.6ch; height: 52px; padding: 0 2px; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
  background: var(--papir); border: 2px solid var(--obroba-barva); border-radius: 10px;
  box-shadow: inset 0 -3px 0 var(--pesek);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.2s;
}
.polje:focus { outline: none; border-color: var(--pr); box-shadow: 0 0 0 3px var(--pr-svetlo), inset 0 -3px 0 var(--pr-svetlo); }
.polje.prav { background: var(--zelena-svetla); border-color: var(--zelena); }
.polje.narobe { background: var(--rdeca-svetla); border-color: var(--rdeca); animation: tres 0.3s ease; }
.polje:disabled { opacity: 1; color: var(--crnilo); -webkit-text-fill-color: var(--crnilo); }
@keyframes tres { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.predogled { text-align: center; color: var(--sivo); font-size: 0.95rem; min-height: 1.4em; }
.predogled b { color: var(--crnilo); font-family: var(--font-display); font-size: 1.1rem; }
.namig-ulomek { text-align: center; color: var(--sivo); font-size: 0.82rem; }
.predloga .crka-za { white-space: nowrap; }
/* tipke nad okvirčki: številska tipkovnica na Androidu nima črk in ponekod ne minusa */
.tipke-vnosa { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tipka-vnosa {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; min-width: 60px; padding: 4px 14px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1;
  background: var(--papir); border: var(--obroba); border-radius: 12px; box-shadow: var(--senca-mala);
  touch-action: manipulation; transition: transform 0.08s, box-shadow 0.08s;
}
.tipka-vnosa small { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; color: var(--sivo); }
.tipka-vnosa.predznak { background: var(--pr-svetlo); }
.tipka-vnosa:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.tipka-vnosa:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
.namig-polja { text-align: center; color: var(--sivo); font-size: 0.86rem; line-height: 1.35; }

/* vnos celega izraza (»36x² − 36«): tipke nad poljem, ⌫ ob polju, predogled pod njim */
.vnos-izraza { display: flex; flex-direction: column; gap: 10px; scroll-margin: 12px; }
.tipke-izraza { display: grid; grid-template-columns: repeat(var(--stolpcev, 6), minmax(0, 1fr)); gap: 6px; }
.tipke-izraza.dve { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 600px) { .tipke-izraza.dve { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.tipke-izraza .tipka-vnosa, .vrstica-izraza .tipka-vnosa { min-width: 44px; padding: 4px 0; }
.tipka-vnosa.znak { background: var(--pr-svetlo); }
.vrstica-izraza { display: flex; gap: 6px; align-items: stretch; }
.polje.polje-izraz { flex: 1; width: auto; min-width: 0; padding: 0 12px; text-align: left; font-size: 1.3rem; }
.polje-izraz::placeholder { color: var(--sivo-svetlo); font-weight: 600; font-size: 1.05rem; }
.vrstica-izraza .tipka-vnosa.brisi { width: 56px; flex: none; font-size: 1.25rem; }
.opozorilo-izraza { text-align: center; color: var(--rdeca); font-weight: 600; font-size: 0.9rem; }
.napaka-besedilo.prijazno { color: var(--crnilo); background: var(--zlata-svetla); border: 1.5px solid var(--zlata); border-radius: 10px; padding: 8px 12px; }
@media (max-width: 360px) { .tipke-izraza { gap: 4px; } }
@media (max-width: 340px) { .tipke-izraza:not(.malo) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.predpona-izraza { align-self: center; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; white-space: nowrap; }

/* izbira */
.moznosti { display: grid; gap: 10px; }
.moznosti.slike { grid-template-columns: 1fr 1fr; }
.moznost {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px;
  background: var(--papir); border: var(--obroba); border-radius: 14px; box-shadow: var(--senca-mala);
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; text-align: left;
  transition: transform 0.08s, box-shadow 0.08s;
}
.moznost:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.moznost:disabled { cursor: default; }
.moznost .crka {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--pesek); font-weight: 800; font-size: 0.9rem;
}
.moznost .vsebina { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.moznost.besedilna { font-family: var(--font-body); font-weight: 600; font-size: 1rem; }
.moznost.slika { flex-direction: column; align-items: stretch; padding: 8px; gap: 6px; }
.moznost.slika .crka { align-self: flex-start; }
.moznost.slika svg { width: 100%; height: auto; display: block; }
.moznost.prava { background: var(--zelena); color: var(--na-barvi); animation: tresk 0.35s ease; }
.moznost.prava .crka { background: var(--zelena-svetla); color: var(--crnilo); }
.moznost.napacna { background: var(--rdeca); color: var(--na-barvi); animation: tres 0.3s ease; }
.moznost.napacna .crka { background: var(--rdeca-svetla); color: var(--crnilo); }
.moznost.ugasnjena { opacity: 0.5; }
.moznost.slika.prava, .moznost.slika.napacna { color: var(--crnilo); }
.moznost.slika.prava { background: var(--zelena-svetla); border-color: var(--zelena); box-shadow: 0 0 0 3px var(--zelena); }
.moznost.slika.napacna { background: var(--rdeca-svetla); border-color: var(--rdeca); box-shadow: 0 0 0 3px var(--rdeca); }
@keyframes tresk { 30% { transform: scale(1.03); } }
/* »obkroži vse« (NPZ: izbirni tip z več pravilnimi): obkrožena možnost dobi ročno »obkrožitev«; po preverjanju
   zelena = pravilno obkrožena, črtkana zelena = pravilna, a izpuščena, rdeča = napačno obkrožena */
.moznosti.obkrozi { grid-template-columns: repeat(auto-fill, minmax(min(128px, 100%), 1fr)); }
.moznost.obkrozi-moznost { position: relative; justify-content: center; text-align: center; min-height: 54px; }
.moznost.obkrozi-moznost.izbrana::after, .moznost.obkrozi-moznost.obkrozena::after {
  content: ""; position: absolute; inset: 4px 6px; border: 2.5px solid var(--pr); border-radius: 50% / 45%;
  transform: rotate(-2deg); pointer-events: none; animation: obkrozi 0.35s ease-out;
}
.moznost.obkrozi-moznost.prava::after, .moznost.obkrozi-moznost.napacna::after { border-color: var(--na-barvi); }
.moznost.zgresena { border-style: dashed; border-color: var(--zelena); background: var(--zelena-svetla); box-shadow: 0 0 0 2px var(--zelena); }
.obkrozi-namig { margin-top: -2px; font-size: 0.85rem; color: var(--sivo-berljivo); text-align: center; }

/* poišči napako */
.resitev { display: flex; flex-direction: column; gap: 8px; }
.resitev-zacetek { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; padding-left: 6px; }
.vrstica-gumb {
  display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; width: 100%; min-height: 54px;
  padding: 8px 10px; text-align: left; background: color-mix(in srgb, var(--papir) 80%, transparent);
  border: 2px solid var(--pesek-temno); border-radius: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 4.6vw, 1.25rem);
}
.vrstica-gumb .st { color: var(--sivo); font-size: 0.85rem; font-family: var(--font-body); font-weight: 700; }
.vrstica-gumb:hover:not(:disabled) { border-color: var(--obroba-barva); }
.vrstica-gumb:disabled { cursor: default; }
.vrstica-gumb.prava { border-color: var(--rdeca); background: var(--rdeca-svetla); position: relative; }
.vrstica-gumb.prava::after {
  content: ""; position: absolute; inset: 4px 6px; border: 2.5px solid var(--rdeca); border-radius: 50% / 45%;
  transform: rotate(-1.5deg); pointer-events: none; animation: obkrozi 0.5s ease-out;
}
@keyframes obkrozi { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.vrstica-gumb.izbrana-narobe { border-style: dashed; border-color: var(--sivo); position: relative; }
.tvoja-izbira {
  position: absolute; right: 8px; top: -9px; padding: 0 6px; border-radius: 999px;
  background: var(--papir); border: 1.5px solid var(--sivo); color: var(--sivo);
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; line-height: 1.4;
}

/* grafi (SVG) */
.graf-okvir { display: flex; justify-content: center; }
.graf { width: 100%; max-width: 420px; height: auto; display: block; touch-action: manipulation; user-select: none; }
.graf .mreza-crta { stroke: var(--mreza-mocna); stroke-width: 1; }
.graf .os { stroke: var(--crnilo); stroke-width: 2; }
.graf .os-pusica { fill: var(--crnilo); }
.graf .oznaka { fill: var(--sivo); font-family: var(--font-body); font-size: 11px; }
.graf .oznaka-os { fill: var(--crnilo); font-family: var(--font-display); font-weight: 800; font-size: 14px; font-style: italic; }
.graf .crta { stroke: var(--pr); stroke-width: 3; fill: none; stroke-linecap: round; }
.graf .crta.druga { stroke: var(--modra); }
.graf .crta.tretja { stroke: var(--zelena); }
.graf .tocka { fill: var(--crnilo); }
.graf .tocka-oznaka { fill: var(--crnilo); font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.graf .senca { fill: var(--pr); opacity: 0.18; }
.graf .klik-ploskev { fill: transparent; cursor: crosshair; }
.graf .izbrana { fill: var(--zlata); stroke: var(--obroba-barva); stroke-width: 2; }
.graf .cilj { fill: none; stroke: var(--zelena); stroke-width: 3; }
.graf.mini .crta { stroke-width: 2.5; }
.klik-namig { text-align: center; color: var(--sivo); font-size: 0.88rem; min-height: 1.3em; }
.klik-namig b { color: var(--crnilo); }

/* tabela vrednosti */
.tabela-vr { border-collapse: collapse; margin: 0 auto; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; background: var(--papir); }
.tabela-vr th, .tabela-vr td { border: 2px solid var(--obroba-barva); padding: 6px 10px; text-align: center; min-width: 44px; }
.tabela-vr th { background: var(--pr-svetlo); font-style: italic; }
.tabela-vr td.manjka { color: var(--pr); }
.tabela-okvir { overflow-x: auto; max-width: 100%; }

/* fizikalne sheme */
.shema { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
.shema .voda { fill: #8fb8de; opacity: 0.55; }
.shema .voda-morje { fill: #5f9bbf; opacity: 0.55; }
.shema .voda-olje { fill: #e3c46a; opacity: 0.55; }
.shema .voda-zivo-srebro { fill: #b9c0c7; opacity: 0.8; }
.shema .gladina { stroke: #3f6fa0; stroke-width: 2; }
.shema .posoda { fill: none; stroke: var(--crnilo); stroke-width: 3; stroke-linejoin: round; }
.shema .telo { stroke: var(--crnilo); stroke-width: 2.5; }
.shema .telo-kamen { fill: #9b958c; }
.shema .telo-kocka { fill: #c98f5b; }
.shema .telo-les { fill: #d9a86c; }
.shema .telo-zoga { fill: #e58a6b; }
.shema .sila { stroke-width: 4; stroke-linecap: round; fill: none; }
.shema .sila-g { stroke: var(--rdeca); }
.shema .sila-vz { stroke: var(--modra); }
.shema .sila-druga { stroke: var(--zelena); }
.shema .konica-g { fill: var(--rdeca); }
.shema .konica-vz { fill: var(--modra); }
.shema .konica-druga { fill: var(--zelena); }
.shema .sila-besedilo { font-family: var(--font-display); font-weight: 800; font-size: 19px; fill: var(--crnilo); }
.shema .vrvica { stroke: var(--crnilo); stroke-width: 2; stroke-dasharray: 2 0; }
.shema .roka { fill: #f2c8a8; stroke: var(--crnilo); stroke-width: 2; }
.shema .tla { stroke: var(--crnilo); stroke-width: 3; }
.shema .kota { fill: var(--sivo); font-family: var(--font-body); font-size: 14px; }
.shema .oznaka-posode { font-family: var(--font-display); font-weight: 800; font-size: 16px; fill: var(--crnilo); }
.shema .opeka-celica { fill: #c96f4a; stroke: var(--crnilo); stroke-width: 2.5; stroke-linejoin: round; }
.shema .opeka-vrh { fill: #dd8a64; }
.shema .opeka-bok { fill: #a8573a; }
/* telesa NPZ (svg/telo.js): neprosojne ploskve v treh odtenkih, skriti robovi črtkano, mere temno */
:root { --telo-spredaj: #cfe6dd; --telo-vrh: #e7f3ee; --telo-bok: #b4d6c9; }
@media (prefers-color-scheme: dark) { :root { --telo-spredaj: #24443b; --telo-vrh: #2d5449; --telo-bok: #1b372f; } }
.shema .ploskev { stroke: none; }
.shema .ploskev-spredaj { fill: var(--telo-spredaj); }
.shema .ploskev-vrh { fill: var(--telo-vrh); }
.shema .ploskev-bok { fill: var(--telo-bok); }
.shema .ploskev.voda { fill: #8fb8de; fill-opacity: 0.55; }
.shema .rob { stroke: var(--crnilo); stroke-width: 2; stroke-linecap: round; }
.shema .rob.skrit { stroke-width: 1.4; stroke-dasharray: 5 4; opacity: 0.75; }
.shema .diagonala { stroke: var(--rdeca); stroke-width: 2.2; stroke-dasharray: 7 4; }
.shema .visina { stroke: var(--crnilo); stroke-width: 1.4; stroke-dasharray: 4 3; }
.shema .pravi-kot { fill: none; stroke: var(--crnilo); stroke-width: 1.4; }
.shema .mera { fill: var(--crnilo); font-family: var(--font-body); font-size: 14px; font-weight: 600; paint-order: stroke; stroke: var(--papir); stroke-width: 4px; stroke-linejoin: round; }
.shema .mera.neznana { fill: var(--rdeca); font-weight: 800; }
/* prikazi podatkov NPZ (svg/prikaz.js) */
.shema.prikaz.mini { max-width: 200px; }
.shema .mreza-prikaza { stroke: var(--mreza-mocna); stroke-width: 1; }
.shema .os-prikaza { stroke: var(--crnilo); stroke-width: 2; }
.shema .stolpec { fill: var(--pr); stroke: var(--crnilo); stroke-width: 1.5; }
.shema .slicica { fill: var(--pr); stroke: var(--crnilo); stroke-width: 1.5; }
.shema .izsek { stroke: var(--papir); stroke-width: 2; }
.shema .del-0 { fill: var(--koral); }
.shema .del-1 { fill: var(--modra); }
.shema .del-2 { fill: var(--zlata); }
.shema .del-3 { fill: var(--zelena); }
.shema .del-4 { fill: var(--vijolicna); }
.shema .del-5 { fill: var(--smaragdna); }
.shema .napis-izseka { font-weight: 800; }
.shema .mini-kota { font-size: 10px; }
/* številska premica (N10, svg/premica.js) in slikovni vzorci (N11, svg/vzorec.js) */
.shema .premica-crtica { stroke: var(--crnilo); stroke-width: 1.4; }
.shema .premica-crtica.celo { stroke-width: 2.2; }
.shema .premica-puscica { fill: var(--crnilo); }
.shema .premica-tocka { fill: var(--pr); stroke: var(--crnilo); stroke-width: 1.5; }
.shema .vzorec-vzigalica { stroke: var(--zlata-temna); stroke-linecap: round; }
.shema .vzorec-glavica { fill: var(--rdeca); }
.shema .vzorec-pika { fill: var(--pr); stroke: var(--crnilo); stroke-width: 1.2; }
.shema .vzorec-ploscica { fill: var(--pr-svetlo); stroke: var(--crnilo); stroke-width: 1.4; }
.shema .vzorec-gredica { fill: var(--zelena); opacity: 0.55; }

/* akcije */
.akcije { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.akcije.ena { grid-template-columns: 1fr; }
.gumb-namig {
  min-height: 52px; padding: 8px 14px; border: var(--obroba); border-radius: 14px; background: var(--zlata-svetla);
  box-shadow: var(--senca-mala); font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
}
.gumb-namig small { color: var(--sivo); font-weight: 500; font-size: 0.75rem; display: block; line-height: 1.1; }
.gumb-namig:disabled { opacity: 0.5; cursor: default; }
.namig-okno {
  border: 2px solid var(--zlata); background: var(--zlata-svetla); border-radius: 14px; padding: 12px 14px;
  font-size: 0.98rem; animation: vstop 0.25s ease-out;
}
.namig-okno strong:first-child { display: block; font-family: var(--font-display); margin-bottom: 2px; }

/* 🤖 pomočnik (DeepSeek): gumb v svoji vrstici pod Namigom in Preveri, odgovor v okvirju pod nalogo */
.akcije .gumb-ai { grid-column: 1 / -1; }
.gumb-ai {
  min-height: 52px; padding: 8px 14px; border: var(--obroba); border-radius: 14px; background: var(--modra-svetla);
  box-shadow: var(--senca-mala); font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; text-align: left; color: var(--crnilo);
}
.gumb-ai small { color: var(--sivo-berljivo); font-weight: 500; font-size: 0.75rem; display: block; line-height: 1.1; }
.gumb-ai:active { transform: translate(2px, 2px); box-shadow: none; }
.gumb-ai:disabled { opacity: 0.55; cursor: progress; transform: none; }
.ai-okno {
  display: flex; flex-direction: column; gap: 10px; border: 2px solid var(--modra); background: var(--modra-svetla);
  border-radius: 14px; padding: 12px 14px; font-size: 0.98rem; animation: vstop 0.25s ease-out;
}
.ai-odziv strong, .ai-soglasje strong { display: block; font-family: var(--font-display); margin-bottom: 2px; }
.ai-odziv + .ai-odziv { border-top: 1.5px dashed var(--modra); padding-top: 10px; }
.ai-odziv small, .ai-opomba, .ai-caka { color: var(--sivo-berljivo); font-size: 0.85rem; display: block; }
.ai-napaka { font-weight: 600; }
.ai-soglasje { display: flex; flex-direction: column; gap: 8px; }
.ai-soglasje .povezava { min-height: 48px; align-self: center; }

/* povratna informacija */
.povratna {
  border: var(--obroba); border-radius: var(--radij); box-shadow: var(--senca); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px; animation: vstop 0.25s ease-out;
}
.povratna.prav { background: var(--zelena-svetla); }
.povratna.narobe { background: var(--rdeca-svetla); }
.povratna-glava { display: flex; align-items: center; gap: 12px; }
.povratna-ikona {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 2px solid var(--obroba-barva); color: var(--na-barvi);
}
.povratna.prav .povratna-ikona { background: var(--zelena); }
.povratna.narobe .povratna-ikona { background: var(--rdeca); }
.povratna-ikona svg { width: 24px; height: 24px; }
.povratna-sporocilo { flex: 1; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; line-height: 1.2; }
.povratna-xp {
  font-family: var(--font-display); font-weight: 800; color: #2b2111; background: var(--zlata);
  border: 2px solid var(--obroba-barva); border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.povratna-pravilno { font-size: 1rem; }
.povratna-pravilno b { font-family: var(--font-display); font-size: 1.12rem; }
.past { border-left: 4px solid var(--rdeca); padding: 4px 0 4px 10px; font-weight: 600; }
.povratna-niz { color: var(--zlata-temna); font-weight: 700; font-size: 0.92rem; }

.razlaga { border-top: 2px dashed var(--pesek-temno); padding-top: 10px; }
.razlaga summary {
  cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none;
}
.razlaga summary::-webkit-details-marker { display: none; }
.razlaga summary::before { content: ""; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.2s; margin: 0 4px; }
.razlaga[open] summary::before { transform: rotate(45deg); }
.koraki { list-style: none; padding: 0; margin-top: 6px; display: flex; flex-direction: column; gap: 8px; counter-reset: korak; }
.koraki li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; counter-increment: korak; line-height: 1.45; }
.koraki li::before {
  content: counter(korak); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--papir); border: 2px solid var(--obroba-barva); font-family: var(--font-display); font-weight: 800; font-size: 0.78rem;
}
.solska { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin-top: 6px; }
.solska dt { font-weight: 700; color: var(--pr-temno); font-size: 0.88rem; padding-top: 2px; }
.solska dd { margin: 0; }
.solska dd div + div { margin-top: 2px; }
.solska .odgovor-stavek { font-weight: 700; }

.gumb-naprej { width: 100%; }

/* izziv */
.izziv-ura { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.izziv-pike { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.izziv-pike span { height: 8px; border-radius: 4px; background: var(--pesek); border: 1.5px solid var(--pesek-temno); }
.izziv-pike span.prav { background: var(--zelena); border-color: var(--obroba-barva); }
.izziv-pike span.narobe { background: var(--rdeca); border-color: var(--obroba-barva); }
.izziv-pike span.zdaj { background: var(--pr-svetlo); border-color: var(--pr); }
.rezultat-velik {
  font-family: var(--font-display); font-weight: 800; font-size: 4.2rem; line-height: 1; text-align: center;
  color: var(--pr); text-shadow: 3px 3px 0 var(--senca-barva);
}
.rezultat-velik small { display: block; font-size: 1rem; color: var(--sivo); text-shadow: none; font-family: var(--font-body); font-weight: 600; margin-top: 6px; }
.sredina { text-align: center; }
.zaslon-konec { padding-top: 6vh; text-align: center; }

/* pas: na voljo je nova različica (posodobitev.js) */
.pas-posodobitve {
  position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 520px; margin: 0 auto;
  background: var(--zlata-svetla); color: var(--crnilo); border: var(--obroba); border-radius: 16px; box-shadow: var(--senca); padding: 10px 14px;
}
.pas-posodobitve .gumb { min-height: 44px; flex: none; }

/* obvestila, nivo, značke */
#obvestila { position: fixed; left: 0; right: 0; top: max(12px, env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 30; padding: 0 16px; }
.obvestilo {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 420px; width: 100%;
  background: var(--papir); border: var(--obroba); border-radius: 16px; box-shadow: var(--senca); padding: 10px 14px;
  animation: spust 0.4s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.obvestilo.izhod { animation: dvig 0.3s ease-in forwards; }
@keyframes spust { from { transform: translateY(-120%); opacity: 0; } }
@keyframes dvig { to { transform: translateY(-120%); opacity: 0; } }
.obvestilo .znacka-medalja { filter: none; opacity: 1; background: radial-gradient(circle at 35% 30%, #fff5d9, var(--zlata) 70%); border: 2px solid var(--obroba-barva); animation: zasuk 0.8s ease-out; }
@keyframes zasuk { from { transform: rotateY(180deg) scale(0.4); } }
.obvestilo strong { font-family: var(--font-display); display: block; }
.obvestilo small { color: var(--sivo); }

.prekrivalo {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--ozadje) 70%, transparent); backdrop-filter: blur(3px);
  animation: vstop 0.2s ease-out;
}
.nivo-okno { max-width: 340px; width: 100%; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; animation: odskok 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes odskok { from { transform: scale(0.6); opacity: 0; } }
.nivo-okno .medalja { width: 104px; height: 104px; font-size: 2.6rem; }
.nivo-okno h2 { font-size: 1.9rem; }
.nivo-okno p { color: var(--sivo); }

#konfeti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.konfet { position: absolute; top: -16px; width: 9px; height: 15px; border-radius: 2px; animation: pada var(--t, 2.2s) cubic-bezier(0.3, 0.6, 0.5, 1) forwards; }
@keyframes pada { to { transform: translate(var(--dx, 0), 110vh) rotate(var(--r, 720deg)); opacity: 0.85; } }

.prazno-sporocilo { text-align: center; color: var(--sivo); padding: 24px 8px; }

/* ── učna pot ────────────────────────────────────────────────────────────── */
/* Knafelčeva markacija (rdeč obroč z belo sredino, kot na planinski poti) označi korak, ki je na vrsti */
.markacija {
  display: inline-block; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: #fffdf9; border: 7px solid var(--koral); box-shadow: 0 0 0 2px var(--obroba-barva);
}
.markacija.velika { width: 44px; height: 44px; border-width: 11px; }

/* mini sled: pika za vsak korak, povezana s črto (polna do koraka, ki je na vrsti) */
.sled-mini { display: flex; align-items: center; min-width: 0; }
.sled-pika { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--obroba-barva); background: var(--papir); }
.sled-pika.opravljen { background: var(--zelena); }
.sled-pika.trenutni { width: 18px; height: 18px; background: #fffdf9; border: 5px solid var(--koral); box-shadow: 0 0 0 2px var(--obroba-barva); }
.sled-pika.zaklenjen { background: var(--pesek); border: 2px dashed var(--sivo-svetlo); }
.sled-pika.izbrana { outline: 3px solid var(--zlata); outline-offset: 2px; }
.sled-crta { flex: 1; min-width: 6px; border-top: 3px dashed var(--sivo-svetlo); }
.sled-crta.polna { border-top-style: solid; border-top-color: var(--zelena); }

.niz-pike { display: inline-flex; gap: 3px; vertical-align: middle; }
.niz-pike span { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--obroba-barva); background: var(--papir); }
.niz-pike span.polna { background: var(--zlata); }

/* trak med vajo: sled, »Korak 2 od 7 · zapored 1/3« in gumb »Pravilo« */
.pot-trak { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pot-trak-opis { font-size: 0.85rem; color: var(--sivo); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.3; }
.pot-trak-opis b { color: var(--crnilo); font-family: var(--font-display); font-weight: 800; }
.gumb-pravilo {
  flex: none; min-height: 44px; padding: 6px 12px; border: var(--obroba); border-radius: 12px; background: var(--papir);
  box-shadow: var(--senca-mala); font-weight: 700; white-space: nowrap;
}
.gumb-pravilo:active { transform: translate(2px, 2px); box-shadow: none; }
.gumb-pravilo[aria-expanded="true"] { background: var(--pr-svetlo); }

/* kartica pravila: pravilo, rešen primer na karirastem papirju, pazi, cilj koraka */
.pravilo-kartica {
  background: var(--papir); border: var(--obroba); border-radius: var(--radij); box-shadow: var(--senca);
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.pravilo-okno { animation: vstop 0.25s ease-out; }
.pravilo-okno .pravilo-kartica { box-shadow: var(--senca-mala); }
.pravilo-korak { color: var(--pr-temno); font-weight: 700; font-size: 0.88rem; }
.pravilo-kartica h2 { font-size: 1.45rem; margin-top: -6px; }
.pravilo-opis { color: var(--sivo); margin-top: -6px; }
.pravilo-besedilo { font-size: 1.08rem; line-height: 1.5; }
.pravilo-primeri {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px 36px;
  border: 2px solid var(--pesek-temno); border-radius: 12px; background-color: var(--papir);
  background-image: linear-gradient(var(--mreza) 1px, transparent 1px), linear-gradient(90deg, var(--mreza) 1px, transparent 1px);
  background-size: 22px 22px; background-position: -1px -1px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.4; overflow-wrap: anywhere;
}
.pravilo-primeri::before { content: ""; position: absolute; top: 0; bottom: 0; left: 24px; width: 2px; background: var(--rob-zvezka); }
.pravilo-oznaka { font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; color: var(--sivo); }
.pravilo-pazi { border-left: 4px solid var(--zlata); padding: 2px 0 2px 10px; font-weight: 600; }
.pravilo-cilj { color: var(--sivo); font-size: 0.9rem; }

/* pregled poti: sled korakov z vozlišči — ✓ opravljen, markacija (na vrsti), črtkano zaklenjen */
.pot-uvod-besedilo { color: var(--sivo); }
.sled { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sled-korak { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; }
.sled-korak:not(:first-child)::before,
.sled-korak:not(:last-child)::after { content: ""; position: absolute; left: 15.5px; border-left: 3px dashed var(--sivo-svetlo); }
.sled-korak:not(:first-child)::before { top: -12px; height: calc(50% - 5px); }
.sled-korak:not(:last-child)::after { top: calc(50% + 17px); bottom: 0; }
.sled-korak.opravljen::before, .sled-korak.trenutni::before, .sled-korak.opravljen::after { border-left-style: solid; border-left-color: var(--zelena); }
.vozlisce {
  position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--obroba-barva); background: var(--papir); font-family: var(--font-display); font-weight: 800;
}
.sled-korak.opravljen .vozlisce { background: var(--zelena); color: var(--na-barvi); }
.sled-korak.trenutni .vozlisce { background: #fffdf9; border: 9px solid var(--koral); box-shadow: 0 0 0 2px var(--obroba-barva); }
.sled-korak.zaklenjen .vozlisce { background: var(--pesek); border: 2px dashed var(--sivo-svetlo); color: var(--sivo); font-size: 0.9rem; }
.sled-gumb {
  width: 100%; min-height: 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px;
  text-align: left; border: var(--obroba); border-radius: 14px; background: var(--papir); box-shadow: var(--senca-mala);
}
.sled-gumb:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.sled-st { color: var(--sivo); font-size: 0.78rem; font-weight: 700; }
.sled-ime { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.2; }
.sled-stanje { color: var(--sivo); font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sled-korak.trenutni .sled-gumb { background: var(--pr-svetlo); box-shadow: var(--senca); }
.sled-korak.trenutni .sled-stanje { color: var(--crnilo); font-weight: 600; }
.sled-korak.zaklenjen .sled-gumb { background: transparent; border: 2px dashed var(--pesek-temno); box-shadow: none; cursor: default; }
.sled-korak.zaklenjen .sled-ime { color: var(--sivo); }
.pot-opravljena { display: flex; flex-direction: column; gap: 10px; background: var(--zelena-svetla); }
.pot-opravljena-glava { display: flex; align-items: center; gap: 12px; }
.pot-opravljena-glava h2 { font-size: 1.5rem; }

/* kartica na domačem zaslonu */
.pot-domov { display: flex; flex-direction: column; gap: 10px; background: var(--pr-svetlo); }
.pot-domov-glava { display: flex; align-items: center; gap: 12px; }
.pot-domov-glava small { display: block; color: var(--pr-temno); font-weight: 700; font-size: 0.85rem; }
.pot-domov-glava h2 { font-size: 1.3rem; }
.pot-domov .sled-mini { padding: 4px 2px; }
.pot-domov-korak { line-height: 1.35; }
.pot-domov-korak strong { font-family: var(--font-display); }
.pot-domov-niz { color: var(--sivo); font-size: 0.88rem; margin-top: -4px; display: flex; align-items: center; gap: 8px; }
.pot-domov-gumbi { display: flex; align-items: center; gap: 12px; }
.pot-domov-gumbi .gumb { flex: 1; }

/* praznovanje opravljenega koraka in niz v povratni informaciji */
.korak-opravljen {
  display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--papir);
  border: 2px solid var(--zelena); border-radius: 14px; animation: odskok 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.korak-opravljen strong { display: block; font-family: var(--font-display); font-size: 1.2rem; }
.korak-opravljen small { color: var(--sivo); font-size: 0.9rem; line-height: 1.3; display: block; }
.vozlisce-opravljeno {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--zelena); color: var(--na-barvi); border: 2px solid var(--obroba-barva);
  font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
}
.povratna-pot { font-weight: 600; font-size: 0.92rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gumbi-naprej { display: flex; flex-direction: column; gap: 10px; }

/* ── namizje ─────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  body { padding-top: 28px; }
  #app.siroko { max-width: 1060px; }
  .domov { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: start; }
  .domov-levo { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
  .domov-desno { display: flex; flex-direction: column; gap: 16px; }
  .poglavja { display: grid; grid-template-columns: 1fr 1fr; }
  #app.vaja-sirina { max-width: 640px; }
  body:has(> #app.siroko) .vrh-strani { max-width: 1060px; }
  body:has(> #app.vaja-sirina) .vrh-strani { max-width: 640px; }
}
@media (max-width: 899px) {
  .domov-levo, .domov-desno { display: contents; }
  .domov { display: flex; flex-direction: column; gap: 16px; }
}
@media (max-width: 360px) {
  body { padding-left: 12px; padding-right: 12px; }
  .nacini { grid-template-columns: 1fr 1fr; }
  .zvezek { padding-left: 36px; }
  .zvezek::before { left: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .konfet { display: none; }
}

/* ── starševski pregled ──────────────────────────────────────────────────── */
.starsi { width: 100%; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.starsi-glava { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.starsi-glava h1 { font-size: 1.6rem; }
.starsi-povzetek { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.starsi-povzetek .kartica h3 { font-size: 1rem; color: var(--sivo); font-family: var(--font-body); font-weight: 600; }
.starsi-povzetek .velika { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 5.4vw, 2rem); line-height: 1.1; }
.starsi-povzetek .mala { color: var(--sivo); font-size: 0.9rem; }
.starsi h2 { font-size: 1.25rem; margin-bottom: 8px; }
.osebe-izbirnik { display: flex; flex-wrap: wrap; gap: 8px; }
.osebe-izbirnik .oseba {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  background: var(--papir); color: var(--crnilo); text-decoration: none; font-weight: 600;
  border: var(--obroba); border-radius: 999px; box-shadow: var(--senca-mala);
}
.osebe-izbirnik .oseba .st { color: var(--sivo); font-size: 0.9rem; }
.osebe-izbirnik .oseba.izbrana { background: var(--pr); color: var(--na-barvi); }
.osebe-izbirnik .oseba.izbrana .st { color: inherit; }
.stolpci { width: 100%; max-width: 620px; height: auto; display: block; margin: 0 auto; }
.stolpci .stolpec { fill: var(--koral); }
.stolpci .stolpec-prav { fill: var(--zelena); }
.stolpci .os-besedilo { fill: var(--sivo); font-size: 10px; font-family: var(--font-body); }
.stolpci .vrednost { fill: var(--crnilo); font-size: 10px; font-weight: 700; font-family: var(--font-body); }
.stolpci .crta-osi { stroke: var(--pesek-temno); stroke-width: 1; }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabela th { text-align: left; color: var(--sivo); font-weight: 600; padding: 6px 8px; border-bottom: 2px solid var(--obroba-barva); }
.tabela td { padding: 7px 8px; border-bottom: 1px solid var(--pesek-temno); vertical-align: top; }
.tabela .st { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-drsna { overflow-x: auto; }
.uspeh { display: grid; grid-template-columns: 1fr 120px; gap: 8px; align-items: center; }
.uspeh-trak { height: 10px; border-radius: 999px; background: var(--pesek); overflow: hidden; }
.uspeh-trak > div { height: 100%; background: var(--zelena); }
.uspeh-trak.slabo > div { background: var(--rdeca); }
.uspeh-trak.srednje > div { background: var(--zlata); }
.oznaka-ok { color: var(--zelena-temna); font-weight: 700; }
.oznaka-narobe { color: var(--rdeca); font-weight: 700; }
.sibko { border-left: 5px solid var(--rdeca); }
.sibko h3 { font-size: 1.05rem; }
.napaka-primer { margin-top: 8px; padding: 8px 10px; background: var(--ozadje); border-radius: 10px; font-size: 0.92rem; }
.napaka-primer .naloga { font-weight: 600; }
.prijava { width: 100%; max-width: 380px; margin: 12vh auto 0; }

/* učna pot v starševskem pregledu */
.pot-pojasnilo { color: var(--sivo); font-size: 0.88rem; margin-bottom: 6px; }
.pot-starsi { list-style: none; padding: 0; margin: 0; }
.pot-starsi li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--pesek-temno); overflow-wrap: anywhere; }
.pot-starsi li:last-child { border-bottom: none; }
.pot-starsi .pp-st {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--papir);
  border: 2px solid var(--obroba-barva); font-family: var(--font-display); font-weight: 800; font-size: 0.85rem;
}
.pot-starsi .mala { color: var(--sivo); font-size: 0.88rem; }
.pot-starsi li.obvladan .pp-st { background: var(--zelena); color: var(--na-barvi); }
.pot-starsi li.v-delu .pp-st { background: var(--koral-svetlo); }
.pot-starsi li.brez { color: var(--sivo); }
.pot-starsi li.brez .pp-st { border-style: dashed; border-color: var(--sivo-svetlo); color: var(--sivo); }

/* legenda sil pod shemo vzgona */
.shema-okvir { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sile-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.sila-oznaka { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sila-oznaka i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.sila-oznaka.sila-g i { background: var(--rdeca); }
.sila-oznaka.sila-vz i { background: var(--modra); }
.sila-oznaka.sila-druga i { background: var(--zelena); }

/* starševski pregled na telefonu: kartice namesto tabel (brez vodoravnega drsenja) */
.samo-ozko { display: none; }
.kartice-odgovorov, .kartice-poglavij { list-style: none; padding: 0; margin: 0; }
.kartice-odgovorov li, .kartice-poglavij li { padding: 10px 0; border-bottom: 1px solid var(--pesek-temno); overflow-wrap: anywhere; }
.kartice-odgovorov li:last-child, .kartice-poglavij li:last-child { border-bottom: none; }
.ko-meta { color: var(--sivo); font-size: 0.85rem; }
.ko-meta .oznaka-ok, .ko-meta .oznaka-narobe { font-size: 1rem; }
.ko-naloga { font-weight: 600; margin: 2px 0; }
.ko-odgovor { font-size: 0.92rem; }
.kp-ime { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.kp-zvezdice { white-space: nowrap; }
.kp-pod { color: var(--sivo); font-size: 0.85rem; margin-top: 2px; }
.kartice-poglavij .uspeh { grid-template-columns: 1fr 52px; margin-top: 4px; }
@media (max-width: 640px) {
  .samo-siroko { display: none !important; }
  .samo-ozko { display: block; }
  .starsi .kartica { padding: 14px; }
}

/* ── preizkus znanja (13. 10. 2026) ──────────────────────────────────────── */
/* ocena: barva po oceni (5 in 4 zelena, 3 zlata, 2 koral, 1 rdeča) — vse iz spremenljivk, zato velja tudi v temnem načinu */
.ocena-5 { --ocena: var(--zelena); --ocena-bg: var(--zelena); --ocena-fg: var(--na-barvi); }
.ocena-4 { --ocena: var(--zelena); --ocena-bg: var(--zelena-svetla); --ocena-fg: var(--zelena-temna); }
.ocena-3 { --ocena: var(--zlata); --ocena-bg: var(--zlata-svetla); --ocena-fg: var(--zlata-temna); }
.ocena-2 { --ocena: var(--koral); --ocena-bg: var(--koral-svetlo); --ocena-fg: var(--koral-temno); }
.ocena-1 { --ocena: var(--rdeca); --ocena-bg: var(--rdeca-svetla); --ocena-fg: var(--rdeca); }
.ocena-znak {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; vertical-align: middle;
  border-radius: 50%; border: 2px solid var(--obroba-barva); background: var(--ocena-bg); color: var(--ocena-fg);
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; line-height: 1;
}
.lestvica-ocen { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.lestvica-ocen li { display: inline-flex; align-items: center; gap: 6px; color: var(--sivo); font-size: 0.88rem; font-weight: 600; }
.lestvica-ocen .ocena-znak, .pot-ocena .ocena-znak { width: 28px; height: 28px; font-size: 0.95rem; }

/* med preizkusom: števec in pike (oddane so nevtralne — pravilnost se pokaže šele na koncu) */
.preizkus-stevec { background: var(--pr-svetlo); }
.preizkus-pike { display: grid; grid-template-columns: repeat(var(--n, 20), minmax(0, 1fr)); gap: 3px; }
.preizkus-pike span { height: 8px; border-radius: 4px; background: var(--pesek); border: 1.5px solid var(--pesek-temno); }
.preizkus-pike span.oddano { background: var(--sivo); border-color: var(--obroba-barva); }
.preizkus-pike span.zdaj { background: var(--pr-svetlo); border-color: var(--pr); }
.moznost.izbrana { background: var(--pr-svetlo); box-shadow: 0 0 0 3px var(--pr), var(--senca-mala); }
.moznost.izbrana .crka { background: var(--pr); color: var(--na-barvi); }
.vrstica-gumb.izbrana { border-color: var(--pr); background: var(--pr-svetlo); box-shadow: 0 0 0 2px var(--pr); }

/* uvod, kartici na domačem zaslonu, izbira */
.preizkus-uvod, .preizkus-kartica { display: flex; flex-direction: column; gap: 10px; }
.preizkus-oznaka { color: var(--pr-temno); font-weight: 700; font-size: 0.88rem; }
.preizkus-uvod h2, .preizkus-kartica h2 { font-size: 1.35rem; margin-top: -4px; }
.preizkus-pravila { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.preizkus-lestvica-naslov { font-weight: 700; font-size: 0.92rem; }
.preizkus-kartica.dodeljen { background: var(--zlata-svetla); box-shadow: var(--senca); }
.preizkus-kartica.dodeljen .preizkus-oznaka { color: var(--zlata-temna); }
.preizkus-kartica.v-teku { background: var(--pr-svetlo); }
.preizkus-kartica-opis { font-weight: 600; }
.preizkus-obseg.mesano .poglavje-oznaka, .preizkus-obseg.pot .poglavje-oznaka { font-size: 1.15rem; }

/* zaključni zaslon: žig z oceno, odstotek, lestvica s kazalcem, spodbuda, napake po temah */
.ocena-kartica { display: flex; flex-direction: column; gap: 14px; }
.ocena-vrh { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.ocena-zig {
  width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ocena-bg); color: var(--ocena-fg); border: 6px solid var(--ocena);
  box-shadow: 0 0 0 2px var(--obroba-barva), var(--senca); transform: rotate(-8deg);
  animation: zig 0.6s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.ocena-zig span { font-family: var(--font-display); font-weight: 800; font-size: 4.3rem; line-height: 1; }
@keyframes zig { from { transform: rotate(-40deg) scale(0.3); opacity: 0; } }
.ocena-naslov { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1.15; }
.ocena-odstotek { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1.05; }
.ocena-podatki { color: var(--sivo); font-size: 0.95rem; }
.spodbuda { font-weight: 600; font-size: 1.02rem; }
.ocena-xp { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.ocena-xp svg { width: 18px; height: 18px; fill: var(--zlata); stroke: var(--obroba-barva); stroke-width: 1.5; }
.ocena-xp small { color: var(--sivo); font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; }
.lestvica-trak { position: relative; padding-bottom: 24px; }
.lestvica-deli { display: flex; height: 28px; border: var(--obroba); border-radius: 999px; overflow: hidden; }
.lestvica-deli span {
  flex-basis: 0; display: grid; place-items: center; min-width: 0;
  background: var(--ocena-bg); color: var(--ocena-fg); border-right: 2px solid var(--obroba-barva);
  font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; opacity: 0.5;
}
.lestvica-deli span:last-child { border-right: none; }
.lestvica-deli span.tvoja { opacity: 1; }
.lestvica-kazalec { position: absolute; top: 30px; transform: translateX(-50%); font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; white-space: nowrap; }
.lestvica-kazalec::before { content: "▲ "; }
.kaj-vaditi { display: flex; flex-direction: column; gap: 12px; }
.kaj-vaditi h2 { font-size: 1.3rem; }
.teme-napak { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.tema-napak { display: flex; flex-direction: column; gap: 8px; border-left: 5px solid var(--rdeca); }
.tema-glava { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tema-glava strong { display: block; font-family: var(--font-display); font-size: 1.08rem; line-height: 1.2; }
.tema-glava small { color: var(--rdeca); font-weight: 700; }
.napacne-naloge { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.napacne-naloge li { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: var(--ozadje); border-radius: 10px; overflow-wrap: anywhere; }
.nn-naloga { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.nn-odgovor { font-size: 0.92rem; }
.brez-napak { text-align: center; font-weight: 700; background: var(--zelena-svetla); }
.gumbi-konec { display: flex; flex-direction: column; gap: 10px; }
.pot-ocena { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.92rem; font-weight: 600; }
@media (max-width: 380px) {
  .ocena-zig { width: 92px; height: 92px; }
  .ocena-zig span { font-size: 3.4rem; }
  .ocena-odstotek { font-size: 2rem; }
}

/* starševski pregled: preizkusi in ocene, dodelitev, ponastavitev napredka */
.preizkusi-starsi { display: flex; flex-direction: column; gap: 12px; }
.preizkusi-starsi h2 { margin-bottom: 0; }
.dodeljeni-starsi { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dodeljeni-starsi li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--zlata-svetla); border: 1.5px solid var(--zlata); border-radius: 12px; overflow-wrap: anywhere;
}
.gumb.gumb-majhen { min-height: 44px; padding: 6px 14px; font-size: 0.95rem; box-shadow: var(--senca-mala); }
.dodeli-obrazec { display: flex; flex-direction: column; gap: 6px; border-top: 2px dashed var(--pesek-temno); padding-top: 12px; }
.dodeli-obrazec label { font-weight: 700; }
.dodeli-vrstica { display: flex; gap: 8px; flex-wrap: wrap; }
.dodeli-vrstica select {
  flex: 1 1 220px; min-width: 0; min-height: 52px; padding: 10px 12px; font: inherit; color: var(--crnilo);
  background: var(--ozadje); border: 2px solid var(--pesek-temno); border-radius: 12px;
}
.dodeli-vrstica .gumb { flex: 0 0 auto; }
.tabela-preizkusov .ocena-znak { width: 30px; height: 30px; font-size: 1rem; margin-right: 4px; }
.kartice-preizkusov { list-style: none; padding: 0; margin: 0; }
.kartice-preizkusov li { padding: 10px 0; border-bottom: 1px solid var(--pesek-temno); overflow-wrap: anywhere; }
.kartice-preizkusov li:last-child { border-bottom: none; }
.kpr-glava { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.napake-preizkusa { margin-top: 4px; }
.napake-preizkusa summary { cursor: pointer; color: var(--sivo); font-weight: 600; font-size: 0.9rem; min-height: 32px; display: flex; align-items: center; gap: 6px; list-style: none; }
.napake-preizkusa ul { padding-left: 18px; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.oznaka-dodeljen { font-size: 0.8rem; font-weight: 700; color: var(--zlata-temna); white-space: nowrap; }
.sporocilo-starsi { background: var(--zelena-svetla); font-weight: 600; }
.nevarno-obmocje { border-left: 5px solid var(--rdeca); }
.potrditev summary { cursor: pointer; font-weight: 700; color: var(--rdeca); min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; }
.potrditev summary::-webkit-details-marker, .napake-preizkusa summary::-webkit-details-marker { display: none; }
.potrditev summary::before, .napake-preizkusa summary::before { content: "▸"; display: inline-block; transition: transform 0.2s; }
.potrditev[open] summary::before, .napake-preizkusa[open] summary::before { transform: rotate(90deg); }
.potrditev p { margin: 4px 0 12px; }
.gumb.nevaren { background: var(--rdeca); color: var(--na-barvi); }

/* ── šolski list (01. 11. 2026): kartica, pike a–o, mreža nalog, preizkus ───────────────────────── */
.sklop-domov { display: flex; flex-direction: column; gap: 10px; background: var(--zlata-svetla); }
.sklop-ikona { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.5rem; border: var(--obroba); border-radius: 12px; background: var(--papir); box-shadow: var(--senca-mala); }
.sklop-ikona.velika { width: 48px; height: 48px; font-size: 1.8rem; }
.sklop-pike { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.sklop-pika {
  min-width: 0; height: 26px; display: grid; place-items: center; border-radius: 8px; padding: 0;
  border: 2px solid var(--obroba-barva); background: var(--papir); color: var(--crnilo);
  font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; line-height: 1;
}
.sklop-pika.reseno { background: var(--zelena); color: var(--na-barvi); }
.sklop-pika.napacno { background: var(--rdeca-svetla); border-color: var(--rdeca); }
.sklop-pika.izbrana { outline: 3px solid var(--zlata); outline-offset: 1px; }
.pot-trak .sklop-pike { gap: 4px; }
.sklop-mreza { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sklop-naloga {
  width: 100%; min-height: 56px; display: grid; grid-template-columns: 34px 1fr 28px; gap: 10px; align-items: center; padding: 8px 12px;
  text-align: left; border: var(--obroba); border-radius: 14px; background: var(--papir); box-shadow: var(--senca-mala); color: var(--crnilo);
}
.sklop-naloga:active { transform: translate(2px, 2px); box-shadow: none; }
.sklop-oznaka { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.sklop-enacba { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.3; overflow-wrap: anywhere; }
.sklop-stanje { justify-self: end; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; border: 2px solid var(--pesek-temno); }
.sklop-naloga.reseno .sklop-stanje { background: var(--zelena); color: var(--na-barvi); border-color: var(--obroba-barva); }
.sklop-naloga.napacno .sklop-stanje { background: var(--rdeca-svetla); color: var(--rdeca); border-color: var(--rdeca); }
.sklop-naloga.na-vrsti { background: var(--zlata-svetla); box-shadow: var(--senca); }
.sklop-pravila .pravilo-kartica { margin-top: 6px; box-shadow: none; }
.pravila-sklopa { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }
@media (min-width: 900px) { .sklop-mreza { grid-template-columns: 1fr 1fr; } }

.preizkus-okvir { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--zelena); background: var(--zelena-svetla); overflow-wrap: anywhere; }
.preizkus-okvir.narobe { border-color: var(--rdeca); background: var(--rdeca-svetla); }
.preizkus-okvir strong { font-family: var(--font-display); }
.preizkus-okvir p { font-family: var(--font-display); font-weight: 600; }
.preizkus-okvir .preizkus-sklep { font-family: var(--font-body); font-weight: 700; }
.preizkus-okvir.prav .preizkus-sklep { color: var(--zelena-temna); }
.preizkus-okvir.narobe .preizkus-sklep { color: var(--rdeca); }

/* kemija: vpis formule (H2SO4 → H₂SO₄) in povezovanje ime–formula */
.tipke-formule .tipka-vnosa.crka { font-size: 1.15rem; }
.polje.polje-formule { letter-spacing: 0.02em; }
.povezi { display: flex; flex-direction: column; gap: 12px; }
.povezi-vrstica { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--papir); border: var(--obroba); border-radius: 14px; box-shadow: var(--senca-mala); }
.povezi-ime { font-family: var(--font-body); font-weight: 700; font-size: 1rem; }
.povezi-cipi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.izbira-formule {
  min-height: 44px; padding: 4px 6px; border: 2px solid var(--obroba-barva); border-radius: 10px; background: var(--ozadje);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; touch-action: manipulation;
}
.izbira-formule.izbrana { background: var(--pr); color: var(--na-barvi); border-color: var(--pr-temno); }
.izbira-formule.prava { background: var(--zelena); color: var(--na-barvi); border-color: var(--zelena-temna); }
.izbira-formule.napacna { background: var(--rdeca); color: var(--na-barvi); }
.izbira-formule.ugasnjena { opacity: 0.45; }
.izbira-formule:disabled { cursor: default; }
@media (min-width: 600px) { .povezi-vrstica { flex-direction: row; align-items: center; } .povezi-ime { flex: 0 0 13rem; } .povezi-cipi { flex: 1; } }

/* ── razlaga snovi (01. 11. 2026): #/razlaga/<poglavje> in »📖 Snov« med vajo ─────────────────────────────── */
.vaja-trak:has(> .trak-gumbi) { flex-wrap: wrap; }
.vaja-trak:has(> .trak-gumbi) .napredek { flex: 1 1 110px; }
.trak-gumbi { display: flex; gap: 8px; flex: 0 1 auto; margin-left: auto; }
@media (max-width: 480px) {
  .trak-gumbi { flex: 1 1 100%; }
  .trak-gumbi .gumb-pravilo { flex: 1; }
}
.naloga-vrh { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gumb-snov {
  flex: none; min-height: 44px; padding: 4px 14px; border: var(--obroba); border-radius: 999px; background: var(--papir);
  box-shadow: var(--senca-mala); font-weight: 700; font-size: 0.92rem; white-space: nowrap;
}
.gumb-snov:active { transform: translate(2px, 2px); box-shadow: none; }
.pravilo-razlaga { align-self: flex-start; text-align: left; }

.razlaga-glava .vaja-naslov h1 { font-size: 1.3rem; white-space: normal; }
.razlaga-glava .vaja-naslov h1:focus { outline: none; }
.razlaga-uvod { display: flex; flex-direction: column; gap: 12px; font-size: 1.08rem; line-height: 1.55; }
.razlaga-kazalo ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.razlaga-kazalo-gumb {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; text-align: left;
  background: transparent; border: 2px dashed var(--pesek-temno); border-radius: 12px; font-weight: 600; line-height: 1.25;
}
.razlaga-kazalo-gumb:hover { border-color: var(--pr); }
.razlaga-st {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--pr); color: var(--na-barvi); font-family: var(--font-display); font-weight: 800; font-size: 0.95rem;
}
.razlaga-odsek { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 12px; }
.razlaga-odsek h2 { font-size: 1.3rem; display: flex; align-items: center; gap: 10px; }
.razlaga-besedilo { font-size: 1.05rem; line-height: 1.6; }
.razlaga-formule {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: var(--pr-svetlo); border: var(--obroba); border-left: 8px solid var(--pr); border-radius: 12px;
}
.razlaga-formula { font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; line-height: 1.35; overflow-wrap: anywhere; }
.razlaga-tabela-ovoj { overflow-x: auto; border: 2px solid var(--pesek-temno); border-radius: 12px; }
.razlaga-tabela { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.razlaga-tabela th, .razlaga-tabela td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--pesek-temno); vertical-align: top; }
.razlaga-tabela th { background: var(--pesek); font-weight: 700; }
.razlaga-tabela td { font-family: var(--font-display); font-weight: 600; }
.razlaga-tabela tr:last-child td { border-bottom: none; }
.razlaga-primer {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px 40px;
  border: 2px solid var(--pesek-temno); border-radius: 12px; background-color: var(--papir);
  background-image: linear-gradient(var(--mreza) 1px, transparent 1px), linear-gradient(90deg, var(--mreza) 1px, transparent 1px);
  background-size: 22px 22px; background-position: -1px -1px;
}
.razlaga-primer::before { content: ""; position: absolute; top: 0; bottom: 0; left: 26px; width: 2px; background: var(--rob-zvezka); }
.razlaga-primer-oznaka { font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; color: var(--sivo); text-transform: uppercase; letter-spacing: 0.06em; }
.razlaga-naloga { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.4; overflow-wrap: anywhere; }
.razlaga-pokazi { align-self: flex-start; }
.razlaga-koraki { display: flex; flex-direction: column; gap: 8px; animation: vstop 0.25s ease-out; }
.razlaga-koraki ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; line-height: 1.45; overflow-wrap: anywhere; }
.razlaga-odgovor {
  padding: 8px 12px; border-radius: 10px; background: var(--zelena-svetla); border-left: 5px solid var(--zelena);
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; overflow-wrap: anywhere;
}
.razlaga-odgovor-oznaka { font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; color: var(--sivo); }
.razlaga-pazi {
  padding: 10px 14px; border: 2px solid var(--rdeca); border-left-width: 8px; border-radius: 12px; background: var(--rdeca-svetla);
}
.razlaga-pazi-oznaka { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; }
.razlaga-pazi ul { margin-top: 6px; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.razlaga-povzetek { display: flex; flex-direction: column; gap: 10px; background: var(--zlata-svetla); }
.razlaga-povzetek h2 { font-size: 1.3rem; }
.razlaga-povzetek ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.razlaga-povzetek li { position: relative; padding-left: 30px; line-height: 1.45; font-weight: 600; }
.razlaga-povzetek li::before {
  content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--zelena); color: var(--na-barvi); font-size: 0.8rem; font-weight: 800;
}
.razlaga-zaklenjena { display: flex; flex-direction: column; gap: 12px; }

/* izjava o zasebnosti (#/zasebnost) */
.zasebnost { display: flex; flex-direction: column; gap: 14px; }
.zasebnost-uvod { color: var(--sivo); }
.zasebnost-odsek { display: flex; flex-direction: column; gap: 6px; }
.zasebnost-odsek h2 { font-size: 1.1rem; }

/* ── razumljivost za vsakogar (spec 4a, Uroš TG 20395) ───────────────────── */
/* gumb »?« v glavi vsakega zaslona: vedno na istem mestu, 48 px */
.glava-desno { display: flex; align-items: center; gap: 8px; justify-self: end; }
.gumb-pomoci {
  display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%;
  background: var(--papir); color: var(--crnilo); border: var(--obroba); box-shadow: var(--senca-mala);
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1;
}
.gumb-pomoci:active { transform: translate(2px, 2px); box-shadow: none; }
.pomoc-okno { max-width: 400px; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.pomoc-okno h2 { font-size: 1.35rem; }
.pomoc-koraki { display: flex; flex-direction: column; gap: 8px; padding-left: 1.2em; }
.pomoc-koraki li { line-height: 1.4; }
.pomoc-povezave { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* tri velike izbire na domačem zaslonu */
.izbire { display: flex; flex-direction: column; gap: 12px; }
.izbira {
  display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 14px; width: 100%; min-height: 76px;
  padding: 14px 16px; text-align: left; color: var(--crnilo); text-decoration: none; font: inherit;
  background: var(--papir); border: var(--obroba); border-radius: var(--radij); box-shadow: var(--senca);
  transition: transform 0.08s, box-shadow 0.08s;
}
.izbira:active { transform: translate(3px, 3px); box-shadow: var(--senca-mala); }
.izbira-ikona { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--pr-svetlo); font-size: 1.7rem; }
.izbira-besedilo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.izbira-besedilo strong { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.15; }
.izbira-besedilo small { color: var(--sivo-berljivo); font-size: 0.95rem; line-height: 1.3; }

/* vodnik ob prvem obisku */
.vodnik { min-height: calc(100dvh - 128px); display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.vodnik-glava { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vodnik-kartica { display: flex; flex-direction: column; gap: 12px; padding: 26px 22px; }
.vodnik-kartica h1 { font-size: 1.75rem; line-height: 1.1; }
.vodnik-kartica p { font-size: 1.12rem; line-height: 1.45; }
.vodnik-ikona { font-size: 2.6rem; line-height: 1; }
.vodnik-pike { display: flex; justify-content: center; gap: 8px; }
.vodnik-pike span { width: 10px; height: 10px; border-radius: 50%; background: var(--pesek-temno); }
.vodnik-pike span.aktivna { background: var(--pr); width: 26px; border-radius: 5px; }

/* namig na mestu: oblaček pod elementom, v toku strani */
.namig-na-mestu {
  position: relative; display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px 12px 12px 14px;
  background: var(--zlata-svetla); color: var(--crnilo); border: var(--obroba); border-radius: 14px; box-shadow: var(--senca-mala);
  font-weight: 600; line-height: 1.35;
}
.namig-na-mestu::before {
  content: ""; position: absolute; top: -9px; left: 28px; width: 14px; height: 14px; transform: rotate(45deg);
  background: var(--zlata-svetla); border-left: var(--obroba); border-top: var(--obroba);
}
.namig-na-mestu span { flex: 1; }
.namig-zapri { flex: none; width: 44px; height: 44px; margin: -8px -6px -8px 0; background: none; border: none; color: var(--crnilo); font-size: 1.1rem; }
.vnos-pomoc { color: var(--sivo-berljivo); font-size: 0.92rem; margin-top: -4px; }

/* ── račun za starše /racun (strežniško upodobljeno) ─────────────────────── */
.racun { width: 100%; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.racun-glava { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.racun-domov { color: var(--crnilo); text-decoration: none; }
.obrazec-racuna { display: flex; flex-direction: column; gap: 12px; }
.obrazec-racuna h1 { font-size: 1.6rem; line-height: 1.15; }
.obrazec-racuna .mala, .racun .mala { color: var(--sivo-berljivo); font-size: 0.92rem; }
.vnos-koda { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.25em; text-align: center; }
/* pomoč »?« brez JavaScripta */
.pomoc-strani { position: relative; }
.pomoc-strani > summary { list-style: none; cursor: pointer; }
.pomoc-strani > summary::-webkit-details-marker { display: none; }
.pomoc-strani[open] > .pomoc-okno { position: absolute; right: 0; top: 56px; z-index: 10; width: min(360px, calc(100vw - 32px)); }
/* čarovnik »Korak N od 4« */
.carovnik { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; padding: 0; counter-reset: korak; }
.carovnik li { counter-increment: korak; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--sivo-berljivo); padding-top: 10px; border-top: 5px solid var(--pesek-temno); border-radius: 3px; }
.carovnik li::before { content: counter(korak) " "; font-weight: 800; }
.carovnik li.opravljen { border-top-color: var(--zelena); color: var(--crnilo); }
.carovnik li.trenutni { border-top-color: var(--pr); color: var(--crnilo); }
.carovnik-korak { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* predlogi vzdevkov */
.predlogi-vzdevkov { display: flex; flex-wrap: wrap; gap: 8px; }
.predlog-vzdevka {
  min-height: 44px; padding: 8px 14px; font: inherit; font-weight: 600; color: var(--crnilo);
  background: var(--pr-svetlo); border: var(--obroba); border-radius: 999px; box-shadow: var(--senca-mala);
}
.predlog-vzdevka:active { transform: translate(2px, 2px); box-shadow: none; }
.dodaj-otroka > summary { font-weight: 700; min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.dodaj-otroka[open] > summary { margin-bottom: 10px; }
.otrok-glava h1 { font-size: 1.9rem; }
.velika-koda { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 12vw, 3.2rem); letter-spacing: 0.08em; text-align: center; padding: 10px 0; }
.naprave { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.naprave li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vrstica-gumbov { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.vrstica-gumbov .gumb, .naprave .gumb { min-height: 48px; }
a.gumb { text-decoration: none; }

/* povezava naprave s staršem */
.povezava-koda { align-self: center; }
.povezan-s-starsem { text-align: center; color: var(--sivo-berljivo); font-size: 0.95rem; }
.povezi-vsebina { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.povezano { align-items: center; text-align: center; }

/* selitev /matic → Petica */
.prenos { text-align: left; }
.prenos-povzetek { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }

/* ── NPZ preizkus (spec 5.3, faza E1) ────────────────────────────────────── */
:is(.npz-uvod, .npz-resevanje, .npz-rezultat-zaslon, .priloga-okno, .oddaja-okno) .mala { font-size: 0.88rem; color: var(--sivo-berljivo); }
/* ura v glavi: zlata zadnjih 5 minut, rdeča zadnjo minuto */
.npz-ura { min-height: 44px; padding: 4px 10px; font-size: 1.05rem; background: var(--pr-svetlo); }
.npz-ura.malo-casa { background: var(--zlata-svetla); border-color: var(--zlata-temna); }
.npz-ura.zadnja-minuta { background: var(--rdeca-svetla); color: var(--rdeca); border-color: var(--rdeca); animation: utrip 1s ease-in-out infinite; }
@keyframes utrip { 50% { opacity: 0.65; } }
@media (prefers-reduced-motion: reduce) { .npz-ura.zadnja-minuta { animation: none; } }
@media (max-width: 380px) { .npz-resevanje .vaja-naslov h1 { font-size: 1rem; } .npz-ura { padding: 4px 8px; font-size: 0.98rem; } }
/* seznam nalog 1–5 (odgovorjeno ✓, delno ◐) in priloga */
.npz-trak { justify-content: space-between; }
.npz-seznam { display: flex; gap: 6px; }
.npz-st {
  position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  background: var(--papir); border: var(--obroba); border-radius: 12px; box-shadow: var(--senca-mala);
}
.npz-st:active { transform: translate(2px, 2px); box-shadow: none; }
.npz-st.delno { background: var(--zlata-svetla); }
.npz-st.odgovorjeno { background: var(--pr-svetlo); }
.npz-st.zdaj { outline: 3px solid var(--pr); outline-offset: 2px; }
.npz-st-znak { position: absolute; right: 3px; bottom: 1px; font-size: 0.7rem; line-height: 1; color: var(--pr-temno); }
.npz-st.delno .npz-st-znak { color: var(--zlata-temna); }
@media (max-width: 420px) { .npz-st { width: 44px; } .npz-seznam { gap: 5px; } .npz-trak { gap: 8px; } .gumb-priloga { padding: 6px 10px; } }
@media (max-width: 360px) { .npz-trak { flex-wrap: wrap; } }
.gumb-priloga { min-height: 48px; }
/* naloga s podnalogami */
.npz-naloga { display: flex; flex-direction: column; gap: 14px; }
.npz-naloga-glava { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.npz-naloga-glava h2 { font-size: 1.3rem; outline: none; }
.npz-naloga-glava .tocke-npz { margin-right: 0; }
.npz-crka { font-family: var(--font-display); font-size: 0.95rem; }
.npz-podnaloga .naloga-vrh, .npz-pregled-podnaloge .naloga-vrh { display: flex; align-items: center; gap: 8px; }
.npz-akcije { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.npz-akcije .gumb { width: 100%; }
/* priloga */
.priloga-okno { max-width: 520px; width: 100%; max-height: calc(100dvh - 40px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.priloga-glava { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.priloga-glava h2 { font-size: 1.35rem; }
.priloga-zapri { width: 48px; height: 48px; }
.priloga-okno h3 { font-size: 1.02rem; margin-top: 6px; color: var(--pr-temno); }
.priloga-obrazci { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; align-items: baseline; }
.priloga-obrazci dt { font-weight: 700; font-size: 0.92rem; }
.priloga-obrazci dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.obrazec-npz { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; white-space: nowrap; }
@media (max-width: 420px) { .priloga-obrazci { grid-template-columns: 1fr; gap: 2px; } .priloga-obrazci dd { margin-bottom: 6px; } }
.priloga-kvadrati { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px 10px; font-weight: 600; }
.priloga-priblizki { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.oddaja-okno p { line-height: 1.4; }
/* rezultat: točke, odstotek, okvirno povprečje, po poglavjih in pregled nalog */
.npz-obvestilo { padding: 10px 14px; border: 2px solid var(--zlata-temna); border-radius: 12px; background: var(--zlata-svetla); font-weight: 700; }
.npz-rezultat { display: flex; flex-direction: column; gap: 12px; }
.npz-rezultat-vrh { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.npz-tocke-velike {
  display: grid; place-items: center; align-content: center; width: 112px; height: 112px; border-radius: 50%;
  background: var(--pr-svetlo); border: 6px solid var(--pr); box-shadow: 0 0 0 2px var(--obroba-barva), var(--senca);
  font-family: var(--font-display); line-height: 1;
}
.npz-tocke-velike strong { font-size: 2.6rem; font-weight: 800; }
.npz-tocke-velike span { font-size: 1.05rem; font-weight: 700; color: var(--sivo-berljivo); }
.npz-tocke-velike small { font-size: 0.8rem; font-weight: 700; color: var(--sivo-berljivo); }
.npz-povprecje { font-weight: 600; }
.npz-po-poglavjih ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; }
.npz-po-poglavjih li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: baseline; }
.npz-po-poglavjih li .mini-trak { grid-column: 1 / -1; }
.npz-pp-tocke { font-family: var(--font-display); font-weight: 800; }
.npz-pregled { display: flex; flex-direction: column; gap: 14px; }
.npz-pregled > h2 { font-size: 1.3rem; }
.npz-pregled-naloga { display: flex; flex-direction: column; gap: 10px; }
.npz-pregled-naloga .tema-glava small { color: var(--sivo-berljivo); }
.npz-tocke-podnaloge { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-family: var(--font-display); }
.npz-tocke-podnaloge svg { width: 18px; height: 18px; }
.npz-tocke-podnaloge.vse { color: var(--zelena-temna); }
.npz-tocke-podnaloge.delno { color: var(--zlata-temna); }
.npz-tocke-podnaloge.nic { color: var(--rdeca); }
.npz-pregled-podnaloge.prav { border-left: 6px solid var(--zelena); }
.npz-pregled-podnaloge.narobe { border-left: 6px solid var(--rdeca); }
.npz-postavke { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.92rem; }
.npz-postavke li { display: flex; align-items: center; gap: 6px; }
.npz-postavke svg { width: 16px; height: 16px; flex: none; }
.npz-postavke li.prav svg { color: var(--zelena-temna); }
.npz-postavke li.narobe svg { color: var(--rdeca); }
.gumb-vadi-poglavje { min-height: 48px; }
.npz-zadnjic { font-weight: 600; }
/* uvod: izbira med celotnim in krajšim preizkusom (velika gumba z obsegom pod napisom) */
.gumb-zacni-npz { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; }
.gumb-npz-obseg { font-size: 0.88rem; font-weight: 600; opacity: 0.9; }
.gumb-npz-opis { margin: -4px 0 6px; text-align: center; color: var(--sivo); }
/* starševski pregled: NPZ preizkus nima ocene */
.znak-npz {
  display: inline-grid; place-items: center; min-width: 40px; height: 30px; padding: 0 6px; vertical-align: middle;
  border: 2px solid var(--obroba-barva); border-radius: 999px; background: var(--smaragdna-svetla); color: var(--smaragdna-temna);
  font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.04em;
}
.npz-poglavja { margin-top: 2px; }

/* liki, krog in konstrukcije NPZ (svg/lik.js): ploskve v odtenkih teles, konstrukcijski loki modro, iskano rdeče */
.shema.lik-slika { max-width: 400px; }
.shema.lik-slika.mini { max-width: 240px; }
.shema .l-mreza { stroke: var(--mreza-mocna); stroke-width: 1; }
.shema .l-ploskev { stroke: var(--crnilo); stroke-width: 2; stroke-linejoin: round; }
.shema .l-lik { fill: var(--telo-spredaj); }
.shema .l-del { fill: var(--telo-bok); }
.shema .l-senca { fill: var(--zlata-svetla); }
.shema .l-prazno { fill: var(--papir); stroke: none; }
.shema .l-ploskev.l-poudarek { fill: var(--rdeca-svetla); stroke: var(--rdeca); }
.shema .l-crta { fill: none; stroke-linecap: round; }
.shema .l-crta.l-rob { stroke: var(--crnilo); stroke-width: 2; }
.shema .l-crta.l-premica { stroke: var(--crnilo); stroke-width: 1.6; }
.shema .l-crta.l-visina { stroke: var(--crnilo); stroke-width: 1.4; stroke-dasharray: 5 4; }
.shema .l-crta.l-crtkano { stroke: var(--crnilo); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: 0.8; }
.shema .l-crta.l-konstrukcija { stroke: var(--modra); stroke-width: 1.5; }
.shema .l-crta.l-poudarek { stroke: var(--rdeca); stroke-width: 2.6; }
.shema .l-kot { fill: none; stroke: var(--crnilo); stroke-width: 1.4; }
.shema .l-kot.l-poudarek { stroke: var(--rdeca); stroke-width: 2; }
.shema .l-pika-kota, .shema .l-pika { fill: var(--crnilo); }
.shema .ime-tocke { fill: var(--crnilo); font-family: var(--font-display); font-weight: 800; font-size: 15px; paint-order: stroke; stroke: var(--papir); stroke-width: 4px; stroke-linejoin: round; }
.shema .ime-kota { fill: var(--crnilo); font-family: var(--font-body); font-size: 13px; font-weight: 600; paint-order: stroke; stroke: var(--papir); stroke-width: 4px; stroke-linejoin: round; }
.shema .ime-kota.neznana { fill: var(--rdeca); font-weight: 800; }
.shema.mini .mera, .shema.mini .ime-kota { font-size: 13px; }
.shema.mini .ime-tocke { font-size: 16px; }
.shema.mini .kota { font-size: 15px; font-weight: 600; fill: var(--crnilo); }

/* načrtovanje (N13): risanje na papir, »Pokaži rešitev« in samoocena z velikima gumboma */
.samoocena { display: flex; flex-direction: column; gap: 12px; }
.samoocena-orodja { font-size: 0.95rem; color: var(--sivo-berljivo); }
.samoocena-resitev { display: flex; flex-direction: column; gap: 8px; border-top: 2px dashed var(--pesek-temno); padding-top: 12px; animation: vstop 0.25s ease-out; }
.samoocena-naslov { font-weight: 800; font-family: var(--font-display); margin-top: 4px; }
.samoocena-merila { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }
.samoocena-gumbi { display: flex; flex-direction: column; gap: 10px; }
.samoocena-vprasanje { font-weight: 700; text-align: center; }
.gumb-samoocena { min-height: 56px; }
.gumb-samoocena svg { width: 22px; height: 22px; flex: none; }
.gumb-samoocena.izbrana { outline: 3px solid var(--pr); outline-offset: 2px; }
.npz-samoocenjeno { margin-left: auto; font-size: 0.75rem; }
.npz-samoocenjeno-vrstica { color: var(--sivo-berljivo); }
.gumb-samoocena.izbrana, .gumb-samoocena[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--zlata), var(--senca); }
.gumb-samoocena:disabled[aria-pressed="false"] { opacity: 0.45; }
.gumb-samoocena:disabled[aria-pressed="true"] { opacity: 1; }