/* Nadzorna plosca — crno / belo / sivo / zlato.
 *
 * Globina je iz SVETLOBE, ne iz okvirjev: vsaka plosca ima zgoraj svetel rob
 * (kot da luc pada od zgoraj) in spodaj mehko senco. Zlato je edina barva, ki
 * nosi pomen — vse ostalo je siva lestvica.
 *
 * ⛔ IZJEMA, KI OSTANE BARVNA: izguba. Plosca za trgovanje, ki dobicka in
 * izgube ne loci na prvi pogled, je lepa in neuporabna. Dobicek je zlat
 * (denar), izguba je pridusen rdec — nasicenost je znizana, da se sklada s
 * paleto, kontrast pa ostane nad 4.5:1.
 */

:root {
  /* ── siva lestvica ── */
  --crna: #08090b;
  --crna-2: #0e1013;
  --plosca-1: #16181d;
  --plosca-2: #1c1f25;
  --rob: rgba(255, 255, 255, 0.08);
  --rob-mocan: rgba(212, 175, 55, 0.28);

  --bela: #f6f5f2;
  --siva-1: #b9b7b1;
  --siva-2: #8a8882;
  --siva-3: #5c5a56;

  /* ── zlato ── */
  --zlato: #d9b45a;
  --zlato-svetlo: #f0d68f;
  --zlato-temno: #8f7327;
  --zlato-medlo: rgba(217, 180, 90, 0.14);

  --plus: var(--zlato);
  --minus: #d4726a;

  /* Zelena je PRIDRZANA za dotok podatkov in nikjer drugje. Zlato pomeni
     denar, zelena pomeni „tece“ — ce bi bila feed pika zlata, bi jo oko
     bralo kot dobicek. */
  --zelena: #5faa78;
  --zelena-medla: rgba(95, 170, 120, 0.16);

  /* ⛔ „Segoe UI" PRED „Segoe UI Variable Text": obe sta na tem racunu
     namesceni (merjeno po sirini besedila, ne z `document.fonts.check`, ki
     vrne `true` tudi za manjkajoce), a Variable ima pri tezkih rezah mehkejso
     potezo. Za plosco, kjer je pol vsebine krepkih stevilk, je klasicna
     Segoe UI citljivejsa. */
  --pisava: "Segoe UI", Inter, "SF Pro Text", -apple-system,
            BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* ⛔ STEVILKE NISO V ENOPRESLEDNI PISAVI. Poravnavo stolpcev naredi
     `font-variant-numeric: tabular-nums` — to je natanko njen namen — in
     deluje v vsakem od skladov spodaj. Monospace je dodala pisalni videz,
     ki k trgovalni plosci ne sodi (user: „pisavo daj neko klasicno bold
     moderno"). Isti grotesk, samo tezja reza. */
  --pisava-st: var(--pisava);

  --r: 14px;

  /* ── LESTVICA GLOBINE ──
     Vsaka stopnja ima iste stiri plasti, samo mocnejse. Luc pada od ZGORAJ:
     svetel notranji rob na vrhu, temen na dnu, tesna senca tik ob robu
     (stik s podlago) in siroka mehka senca spodaj (razdalja od podlage).
     Doslednost je tisto, kar da obcutek prostora — nakljucne sence dajo
     samo umazanijo. */
  --dvig-1:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.65),
    0 10px 22px -10px rgba(0, 0, 0, 0.85),
    0 24px 48px -24px rgba(0, 0, 0, 0.9);
  --dvig-2:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.6),
    0 18px 36px -14px rgba(0, 0, 0, 0.92),
    0 40px 70px -30px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(217, 180, 90, 0.18);
  /* Vdolbina: isto, obrnjeno. Vsebnik je vgreznjen, kartice v njem dvignjene
     — to je najmocnejsi namig za globino, mocnejsi od same sence. */
  --vdolbina:
    inset 0 2px 5px rgba(0, 0, 0, 0.75),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.04);
}

* { box-sizing: border-box; }

html { background: var(--crna); }

/* ⛔ BREZ SPLETNE PISAVE. Plosca mora delati tudi, ko omrezja ni — CDN bi
   pomenil, da se ob slabi povezavi razsuje prav takrat, ko jo najbolj gledas.
   Sklad je zato sistemski, izbran po tem, kaj je na Windows/macOS res na
   voljo, in dopolnjen z locenim skladom za STEVILKE: `tabular-nums` sam po
   sebi ne poravna stolpcev, ce pisava nima enako sirokih cifer. */
body {
  margin: 0;
  min-height: 100vh;
  color: var(--bela);
  font: 15px/1.55 var(--pisava);
  background: var(--crna);
  -webkit-font-smoothing: antialiased;
}

/* Ozadje je LOCEN pritrjen sloj (ne `background-attachment: fixed`) — sicer
   pri drsenju ostanejo nepobarvani pasovi. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 640px at 50% -14%, rgba(217, 180, 90, 0.10) 0%,
                    transparent 60%),
    radial-gradient(900px 520px at 8% 4%, rgba(255, 255, 255, 0.035) 0%,
                    transparent 55%),
    linear-gradient(180deg, var(--crna-2) 0%, var(--crna) 42%);
}

a { color: inherit; text-decoration: none; }

/* ⛔ BREZ `max-width` (user 2026-09-04: „rastegni cez cel ekran"). Na 2000 px
   zaslonu je 1560 px pas pustil cetrtino zaslona prazno, kartice pa stisnjene
   v stiri stolpce, ceprav jih gre sest.

   Rob raste z zaslonom prek `clamp`: 14 px na telefonu, ~40 px na namizju.
   Vsebina se siri, robovi ostanejo mirni. */
.ovoj { width: 100%; margin: 0 auto; padding: clamp(16px, 1.6vw, 30px)
        clamp(14px, 2vw, 40px) 80px; }

/* ───────────────────────────── glava ───────────────────────────── */
.glava {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap; margin-bottom: 24px;
}
/* Logotip je SIROK napis (724x96), ne kvadratna znacka — visina ga doloci,
   sirina sledi razmerju. */
.logo {
  height: 40px; width: auto; display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
}

/* Znak robota: podeduje barvo borze prek `currentColor`. */
.znak-robota { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.kartica .vrh .znak-robota { color: var(--siva-2); }
.kartica:hover .vrh .znak-robota { color: var(--zlato); }
.znak-velik {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  color: var(--zlato);
  background: linear-gradient(180deg, var(--plosca-2), var(--plosca-1));
  border: 1px solid var(--rob-mocan);
  box-shadow: var(--dvig-1);
}
.znak-velik .znak-robota { width: 26px; height: 26px; }

.znak {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; letter-spacing: 0.4px;
  color: #241d07;
  background: linear-gradient(160deg, var(--zlato-svetlo) 0%,
                              var(--zlato) 46%, var(--zlato-temno) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 6px 16px -6px rgba(217, 180, 90, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.6);
}
.naslov {
  font-size: 20px; font-weight: 650; letter-spacing: -0.3px;
  background: linear-gradient(180deg, #ffffff 0%, var(--siva-1) 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.podnaslov { color: var(--siva-2); font-size: 13px; margin-top: 3px; }
.glava .desno { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.utrip {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--siva-1); font-size: 13px;
  padding: 8px 15px; border-radius: 999px;
  background: linear-gradient(180deg, var(--plosca-2), var(--plosca-1));
  border: 1px solid var(--rob);
  box-shadow: var(--dvig-1);
}
.pika { width: 8px; height: 8px; border-radius: 50%; background: var(--zlato); }
.pika.slaba { background: var(--minus); }
.pika.zadrzana { background: var(--zlato-temno); }

/* ─────────────────────────── pike feedov ───────────────────────────
   Levo od ure, ista pilula kot „updated“ — isti razred podatka: kako svez
   je prikaz. Manjsa pisava, ker jih je vec in ura ostane glavna. */
.feedi { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.feed {
  gap: 7px; padding: 7px 12px; font-size: 12px;
  letter-spacing: 0.2px;
}
.feed .ime { font-weight: 600; color: var(--siva-1); }

.feed.ok .pika {
  background: var(--zelena);
  box-shadow: 0 0 0 3px var(--zelena-medla), 0 0 10px rgba(95, 170, 120, 0.75);
}
.feed.opozorilo .pika {
  background: var(--zlato);
  box-shadow: 0 0 0 3px var(--zlato-medlo);
}
.feed.neznano .pika { background: var(--siva-3); box-shadow: none; }

/* ⛔ Rdeca UTRIPA. Izpad dotoka je edino stanje na tej plosci, ki zahteva
   ukrepanje takoj — vse ostalo lahko pocaka na naslednji pogled. Utripa
   pika IN rob pilule, da se opazi tudi s kota. */
.feed.izpad {
  border-color: rgba(212, 114, 106, 0.55);
  animation: feed-utrip 1.1s ease-in-out infinite;
}
.feed.izpad .ime { color: var(--minus); }
.feed.izpad .pika { background: var(--minus); }

@keyframes feed-utrip {
  0%, 100% {
    box-shadow: var(--dvig-1), 0 0 0 0 rgba(212, 114, 106, 0.55);
  }
  50% {
    box-shadow: var(--dvig-1), 0 0 0 5px rgba(212, 114, 106, 0);
  }
}

/* Kdor je nastavil, da ne mara gibanja, dobi mirno rdeco — barva in beseda
   povesta isto, utripanje je samo ojacitev. */
@media (prefers-reduced-motion: reduce) {
  .feed.izpad { animation: none; background: rgba(212, 114, 106, 0.12); }
}

/* Pas opozorila nad vsem. Rdeč in nezaprljiv: privzeto geslo ni nadloga,
   je odprta vrata. */
.opozorilo-pas {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 13px 16px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(212, 114, 106, 0.18),
              rgba(212, 114, 106, 0.09));
  border: 1px solid rgba(212, 114, 106, 0.45);
  box-shadow: var(--dvig-1);
}
.opozorilo-pas .besedilo {
  flex: 1; min-width: 220px; color: #f0c4bf;
  font-size: 13px; font-weight: 600; line-height: 1.45;
}
.gumb-opozorilo {
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(212, 114, 106, 0.6);
  background: rgba(212, 114, 106, 0.16);
  color: #f6ded9; font: inherit; font-size: 12.5px; font-weight: 700;
}
.gumb-opozorilo:hover { background: rgba(212, 114, 106, 0.28); }

/* ────────────────────────────── stran prijave ──────────────────────────────
   Ista paleta in ista globina kot plosca — prijava ni „druga stran“, je ista
   platforma pred vrati. */
.stran-prijave { display: grid; place-items: center; min-height: 100vh; }
.prijava-ovoj {
  width: min(400px, calc(100vw - 32px)); text-align: center;
}
.prijava-ovoj .logo { height: 44px; width: auto; margin: 0 auto 10px; }
.prijava-ovoj .naslov {
  font-size: 15px; font-weight: 700; color: var(--siva-1);
  margin-bottom: 26px; letter-spacing: 0.2px;
}
.prijava { padding: 24px 22px; text-align: left; }
.prijava .k {
  display: block; font-size: 10.5px; letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--siva-3); margin-bottom: 9px;
}
.polje {
  width: 100%; box-sizing: border-box;
  padding: 12px 13px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid var(--rob); color: var(--bela);
  font: inherit; font-size: 15px;
  box-shadow: var(--vdolbina);
}
.polje:focus {
  outline: none; border-color: var(--rob-mocan);
  box-shadow: var(--vdolbina), 0 0 0 3px rgba(217, 180, 90, 0.13);
}
.gumb-prijava {
  width: 100%; margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--rob-mocan); border-radius: 10px;
  background: linear-gradient(180deg, var(--zlato-svetlo), var(--zlato));
  color: #241c05; font: inherit; font-weight: 700; font-size: 14px;
  cursor: pointer; box-shadow: var(--dvig-1);
}
.gumb-prijava:hover { filter: brightness(1.06); }
.gumb-prijava:disabled { filter: grayscale(0.6); cursor: default; }

.sporocilo { min-height: 18px; margin-top: 12px; font-size: 12.5px; }
.sporocilo.slabo { color: var(--minus); }

.setup p { color: var(--siva-1); font-size: 13px; line-height: 1.55; }
.setup code {
  display: block; margin-top: 10px; padding: 10px 12px;
  border-radius: 9px; background: rgba(0, 0, 0, 0.4);
  box-shadow: var(--vdolbina); color: var(--zlato-svetlo);
  font-size: 12.5px; overflow-x: auto;
}

/* Odjava sedi ob uri; ista pilula, samo tisa. */
.odjava {
  background: none; border: 1px solid var(--rob); color: var(--siva-3);
  border-radius: 999px; padding: 8px 13px; font: inherit; font-size: 12px;
  cursor: pointer;
}
.odjava:hover { color: var(--siva-1); border-color: var(--rob-mocan); }

/* ─────────────────────────────── skeleti ───────────────────────────────
   Prvi `/api/slika` traja nekaj sekund (sest virov, dva cez WAN). Prazen
   zaslon v tem casu ne pove nic — ne loci „nalagam" od „pokvarjeno je".
   Skelet pove obliko, ki prihaja, in drzi visino, da vsebina ob prihodu ne
   preskoci.

   ⛔ Skeleti so v HTML, ne v JS: narisani so ze ob prvem izrisu strani, brez
   cakanja na modul. Vsak `narisi*` svojemu vsebniku postavi `innerHTML = ""`,
   zato izginejo sami — posebnega pospravljanja ni.

   ⛔ ⁠Ob napaki se sij USTAVI (`skeleti-ustavljeni`). Utripanje obljublja, da
   podatek prihaja; ce ne pride, je obljuba laz. */
.skelet {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, 0.045);
  border-radius: 7px;
}
.skelet::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent,
              rgba(255, 255, 255, 0.075) 45%, transparent);
  animation: skelet-drsi 1.5s ease-in-out infinite;
}
@keyframes skelet-drsi { to { transform: translateX(100%); } }

/* Ustavljen skelet potemni: se vedno drzi visino, a nic vec ne obljublja. */
body.skeleti-ustavljeni .skelet::after { animation: none; }
body.skeleti-ustavljeni .skelet { background: rgba(255, 255, 255, 0.025); }

@media (prefers-reduced-motion: reduce) {
  .skelet::after { animation: none; }
}

/* Oblike. Visine so PREPISANE iz prave vsebine, ne ugibane — zato ob prihodu
   podatka ni skoka. */
.skelet-vrstica { height: 11px; }
.skelet-znesek { height: 30px; width: 62%; margin: 10px 0 9px; }
.skelet-oznaka { height: 10px; width: 46%; }
.skelet-drobno { height: 10px; width: 34%; }
.graf-skelet { height: 200px; margin-top: 6px; border-radius: 10px; }
.skelet-pilula { height: 31px; width: 108px; border-radius: 999px; }
.skelet-vir { height: 24px; width: 96px; border-radius: 999px; }

/* Vir, ki se ravno nalaga: siv, ne rdec. Rdeca je za okvaro. */
.vir.caka { color: var(--siva-3); border-style: dashed; }

/* Kartica robota: vrh, pas stevilk, stikalo — iste mere kot prava. */
.skelet-kartica .skelet-vrh { display: flex; gap: 12px; align-items: center; }
.skelet-kartica .skelet-znak {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
}
.skelet-kartica .skelet-naslov { flex: 1; }
.skelet-kartica .skelet-naslov > div { margin-bottom: 7px; }
.skelet-kartica .skelet-pas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 16px; padding: 11px 12px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.26);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
.skelet-kartica .skelet-pas > div { height: 34px; }

/* ───────────────────────────── plosce ───────────────────────────── */
.plosca {
  background:
    radial-gradient(120% 90% at 12% -20%, rgba(255, 255, 255, 0.055) 0%,
                    transparent 60%),
    linear-gradient(168deg, var(--plosca-2) 0%, var(--plosca-1) 78%,
                    #121419 100%);
  border: 1px solid var(--rob);
  border-radius: var(--r);
  box-shadow: var(--dvig-1);
  position: relative;
}

/* Robni odsev: tanka svetla crta po zgornjem in levem robu, kot da se luc
   lomi na prelomu materiala. Brez nje so plosce ploscate nalepke. */
.plosca::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12),
              rgba(255, 255, 255, 0) 38%);
  -webkit-mask: linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px;
}

.denar-vrsta {
  display: grid; gap: 16px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(238px, 100%), 1fr));
}
.denar { padding: 19px 21px; position: relative; overflow: hidden; }
/* zlata nit ob levem robu — edini barvni poudarek na kartici racuna */
.denar::before {
  content: ""; position: absolute; inset: 12px auto 12px 0; width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--pas, var(--siva-3)),
                              transparent);
}
.denar .oznaka {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--siva-2); font-weight: 550;
}
/* ⛔ RELIEF, NE SENCA. Znak dobi svetlo teme in temno podnozje — oko to
   bere kot vklesano v povrsino. Preliv cez crko doda se ukrivljenost.
   Kontrast ostane visok, ker je preliv med belo in svetlo sivo, ne med
   belo in barvo ozadja. */
.denar .znesek {
  font-family: var(--pisava-st);
  font-size: 30px; font-weight: 750; margin-top: 7px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.9px;
  background: linear-gradient(180deg, #ffffff 0%, #dcdad4 52%, #a9a69f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.9))
          drop-shadow(0 1px 0 rgba(255, 255, 255, 0.10));
}
.denar.skupaj .znesek {
  background: linear-gradient(180deg, #ffeec0 0%, var(--zlato-svetlo) 45%,
                              var(--zlato) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9))
          drop-shadow(0 0 12px rgba(217, 180, 90, 0.35));
}
.denar .drobno { font-size: 12.5px; color: var(--siva-3); margin-top: 6px; }
.denar.skupaj { --pas: var(--zlato); }
.denar.skupaj .znesek { color: var(--zlato-svetlo); }
.denar.IBKR { --pas: var(--siva-1); }
.denar.HL { --pas: var(--zlato); }
.denar.BINANCE { --pas: var(--zlato-temno); }

/* ───────────────────────────── graf ───────────────────────────── */
.graf-plosca {
  padding: 21px 23px 13px; margin-bottom: 24px;
  /* vsebnik gre NAVZNOTER, kartice navzven — kontrast naredi prostor */
  box-shadow: var(--vdolbina);
  background: linear-gradient(180deg, #101217 0%, #14161b 100%);
}
.graf-plosca::before { display: none; }
.graf-glava {
  display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap; margin-bottom: 8px;
}
.graf-glava h2 {
  margin: 0; font-size: 16px; font-weight: 620; letter-spacing: -0.2px;
}
.graf-glava .pojasnilo { color: var(--siva-3); font-size: 12.5px; }
.graf-glava .skupno {
  margin-left: auto; font-family: var(--pisava-st);
  font-size: 24px; font-weight: 750;
  font-variant-numeric: tabular-nums; letter-spacing: -0.8px;
}
canvas { width: 100%; display: block; }

.obdobja { display: flex; gap: 6px; margin-left: 10px; }
.obdobja button {
  background: linear-gradient(180deg, #23262c, #191c21);
  color: var(--siva-2);
  border: 1px solid var(--rob); border-radius: 9px;
  padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              0 1px 2px rgba(0, 0, 0, 0.5);
  transition: color 120ms ease, border-color 120ms ease;
}
.obdobja button:hover { color: var(--bela); }
.obdobja button.izbran {
  color: #241d07; border-color: var(--zlato);
  background: linear-gradient(180deg, var(--zlato-svetlo), var(--zlato));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
              0 3px 10px -3px rgba(217, 180, 90, 0.6);
}

/* ───────────────────────── kartice robotov ───────────────────────── */
.razdelek { margin: 34px 0 16px; display: flex; align-items: center; gap: 16px; }
.razdelek h2 {
  margin: 0; font-size: 12.5px; font-weight: 650;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--zlato);
}

/* Logotipi borz. Visina jih doloci, sirina sledi razmerju — vsak ima svojo,
   ker so razlicno siroki napisi. Rahlo pridusena, da ne tekmujejo s
   stevilkami na karticah pod njimi. */
/* ⛔ ENAKA VISINA ZA VSE TRI. Izmerjeno na canvasu: crnilo vsakega logotipa
   zapolni svoj okvir od roba do roba (delez 1,0), zato je visina okvirja tudi
   visina crke — rocno razlicne vrednosti so pomenile samo, da je bil IBKR
   manjsi od ostalih dveh. */
.venue-logo {
  height: 26px; width: auto; display: block; opacity: 0.95;
  flex: none;
}

/* Na kartici racuna je logotip oznaka, ne naslov — zato manjsi in tisji. */
.denar .venue-logo { height: 17px; opacity: 0.85; margin-bottom: 2px; }
.razdelek .crta {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--rob-mocan), transparent 70%);
}
.razdelek .stevec { color: var(--siva-3); font-size: 12.5px; }

.mreza {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

/* ⛔ ASIMETRICEN ROB. Enakomeren rob naredi nalepko; svetlejsi zgoraj in
   temnejsi spodaj naredi PLOSCO Z DEBELINO. To je mocnejsi namig za globino
   od same sence in stane en sam deklarator. */
.kartica {
  padding: 18px 19px 16px;
  display: block; position: relative; overflow: hidden;
  border-top-color: rgba(255, 255, 255, 0.16);
  border-bottom-color: rgba(0, 0, 0, 0.75);
  transition: transform 180ms cubic-bezier(.2, .7, .3, 1),
              box-shadow 180ms ease, border-color 180ms ease;
}
.kartica:hover {
  transform: translateY(-5px) scale(1.006);
  box-shadow: var(--dvig-2);
  border-color: var(--rob-mocan);
}
.kartica:active { transform: translateY(-1px) scale(0.998); }
/* zlata svetloba, ki pade na zgornji rob — daje kartici debelino */
.kartica::after {
  content: ""; position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent,
              rgba(240, 214, 143, 0.45), transparent);
}

/* Mreza kartic dobi pod vsako kartico „stik s podlago" — brez njega
   kartice lebdijo v niču in dvig se ne prebere. */
.mreza { perspective: 1400px; }
.kartica { transform-style: preserve-3d; }
.kartica .vrh { display: flex; align-items: flex-start; gap: 10px; }
/* ime robota je prva stvar, ki jo oko isce — zato najtezje */
.kartica .ime {
  font-weight: 700; font-size: 16px; letter-spacing: -0.25px;
  color: #fff;
}
.kartica .pod {
  color: var(--siva-3); font-size: 12px; margin-top: 4px;
  display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
}

.znacka {
  font-size: 10.5px; padding: 2.5px 9px; border-radius: 999px;
  letter-spacing: 0.7px; font-weight: 600;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07),
              0 1px 2px rgba(0, 0, 0, 0.5);
}
.znacka.IBKR { color: var(--siva-1); }
.znacka.HL { color: var(--zlato); }
.znacka.BINANCE { color: var(--zlato-temno); }

.stanje {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--siva-1); white-space: nowrap;
  font-weight: 600; letter-spacing: 0.2px;
}
.stanje .pika.live {
  background: var(--zlato);
  box-shadow: 0 0 0 3px rgba(217, 180, 90, 0.16),
              0 0 12px rgba(217, 180, 90, 0.7);
}
.stanje .pika.silent { background: var(--zlato-temno); }
.stanje .pika.stopped { background: var(--siva-3); }
.stanje .pika.unknown { background: var(--minus); }

.stevilke {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-top: 16px;
  /* pas stevilk je rahlo vgreznjen v kartico — vsebina sedi V plosci */
  padding: 11px 12px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.26);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6),
              inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
/* ⛔⛔ `minmax(0, 1fr)` in `min-width: 0` STA POTREBNA OBA. Element mreze
   ima privzeto `min-width: auto` in se NE skrci pod sirino vsebine — z
   `repeat(3, 1fr)` je stolpec ostal pri svoji naravni sirini, vsebina je
   stekla cez rob in oznaka sosednjega stolpca je izginila pod njo. Videlo
   se je sele, ko je znesek dobil se odstotek. */
.stevilka { min-width: 0; }
.stevilka .k {
  font-size: 10.5px; color: var(--siva-3); letter-spacing: 0.9px;
  text-transform: uppercase;
}
.stevilka .v {
  font-family: var(--pisava-st);
  /* ⚠️ Znesek se sme skrciti, ne sme pa čez rob: pri sestmestnih vrednostih
     (-$9,876.54) je 18px prevec za tretjino kartice. */
  font-size: clamp(14px, 1.35vw + 8px, 18px);
  font-weight: 720; margin-top: 3px; overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums; letter-spacing: -0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9),
               0 -1px 0 rgba(255, 255, 255, 0.07);
}
.graf-glava .skupno { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9); }
/* pripis ob veliki stevilki: „5 · 0 today" — locen po velikosti in barvi,
   da se ne bere kot del stevila */
.stevilka .v .pripis {
  font-size: 11px; font-weight: 500; color: var(--siva-3);
  letter-spacing: 0; white-space: nowrap;
}
/* ⛔ Pripis gre v SVOJO vrstico. Ob znesku je bil v isti vrstici in je
   „-$9,876.54 -5.67%" preplavil tretjino stolpca; poleg tega se je ob
   veliki stevilki bral kot njen del. Svoja vrstica resi oboje in stolpec
   ostane ozek. */
.stevilka .v .pripis { display: block; margin-top: 2px; }
/* Odstotek obdrži svojo barvo: `.stevilka .v .pripis` je bolj specifičen od
   `.minus`, zato bi ga sicer pobarvalo v sivo in znak dobička ali izgube bi
   izginil. Ostane pa MAJHEN — glavna številka je znesek. */
.stevilka .v .pripis.plus { color: var(--zlato-svetlo); font-weight: 600; }
.stevilka .v .pripis.minus { color: var(--minus); font-weight: 600; }

.plus { color: var(--zlato-svetlo); font-weight: 700; }
.minus { color: var(--minus); font-weight: 700; }
.ni { color: var(--siva-3); font-weight: 500; font-size: 15px; }

.pozicija {
  margin-top: 14px; padding: 11px 13px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(217, 180, 90, 0.10),
                              rgba(217, 180, 90, 0.04));
  border: 1px solid rgba(217, 180, 90, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap;
}

/* Rezija (SPIKE refill): namenoma tiho, lociti od stevilk strategije. */
.rezija {
  margin-top: 13px; padding-top: 11px;
  border-top: 1px dashed rgba(255, 255, 255, 0.10);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; font-size: 12.5px;
}
.rezija .k { color: var(--siva-3); }
.rezija .v { font-family: var(--pisava-st); font-variant-numeric: tabular-nums;
  font-weight: 700; }

.napaka-vrstica {
  margin-top: 12px; font-size: 12.5px; color: var(--minus);
  display: flex; gap: 7px; align-items: flex-start;
}

/* ───────────────────────────── tabele ───────────────────────────── */
.tabela-ovoj { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-weight: 600; color: var(--siva-3);
  font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase;
  padding: 11px 13px; border-bottom: 1px solid var(--rob);
  white-space: nowrap;
  background: linear-gradient(180deg, #1d2027, #14161b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
              0 1px 0 rgba(0, 0, 0, 0.6);
  position: sticky; top: 0; z-index: 1;
}
td {
  padding: 10px 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--siva-1);
}
/* stevilcni stolpci v svojem skladu — brez tega se PnL ne poravna */
td.stevilcno { font-family: var(--pisava-st); font-weight: 650; }
tbody tr:hover td { background: rgba(217, 180, 90, 0.05); color: var(--bela); }
tr:last-child td { border-bottom: none; }
.stevilcno { text-align: right; }

/* ───────────────────────── stran robota ───────────────────────── */
.nazaj {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--siva-2); font-size: 13.5px; margin-bottom: 16px;
}
.nazaj:hover { color: var(--zlato); }
.dvojno { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.blok { padding: 19px 21px; }
.blok h3 {
  margin: 0 0 13px; font-size: 11.5px; font-weight: 650;
  color: var(--zlato); letter-spacing: 1.4px; text-transform: uppercase;
}
.par {
  display: flex; justify-content: space-between; gap: 14px; padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.par:last-child { border-bottom: none; }
.par .k { color: var(--siva-3); font-size: 13px; }
.par .v {
  font-size: 13.5px; font-variant-numeric: tabular-nums;
  color: var(--bela); font-weight: 600;
}

.viri { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.vir {
  font-size: 11.5px; padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--rob); color: var(--siva-3);
  background: rgba(0, 0, 0, 0.25);
}
.vir.slab { color: var(--minus); border-color: rgba(212, 114, 106, 0.42); }

.prazno { color: var(--siva-3); padding: 24px; text-align: center; }

/* ───────────────────────── ozki zasloni ─────────────────────────
   Dva preloma, ne pet: tablica (graf in podrobnosti drug pod drugim) in
   telefon (vse v en stolpec). Vec prelomov pomeni vec stanj, ki jih nihce
   ne preveri. */

/* tablica in ozko okno */
@media (max-width: 1000px) {
  .dvojno { grid-template-columns: 1fr; }
  .denar .znesek { font-size: 25px; }
  .graf-glava .skupno { margin-left: 0; }
}

/* telefon */
@media (max-width: 620px) {
  .ovoj { padding: 14px 12px 56px; }

  /* Glava se prelomi: znak in naslov v vrsti, utrip pod njiju cez celo sirino,
     sicer se „osvezeno 13:07" stisne v dve besedi na vrstico. */
  .glava { gap: 12px; margin-bottom: 16px; }

  /* ⛔ Na telefonu pike NE smejo v isto vrsto kot ura: skupaj so preširoke,
     zavijejo vsaka v svojo vrstico in ura obvisi ob drugi — videti je kot
     napaka postavitve. Dobijo svojo vrsto in si jo enakomerno razdelijo. */
  /* ⛔ `flex-wrap` MORA biti tu: `.glava` ga ima, `.desno` pa ne. Brez
     njega pike zasedejo vso širino, ura pa nima kam in visi čez desni
     rob zaslona. */
  .glava .desno { width: 100%; gap: 8px; flex-wrap: wrap; }
  .feedi { width: 100%; gap: 6px; flex-wrap: nowrap; }
  .feed {
    flex: 1 1 0; min-width: 0; justify-content: center;
    padding: 6px 8px; font-size: 11px; gap: 6px; white-space: nowrap;
  }
  .feed .ime { overflow: hidden; text-overflow: ellipsis; }
  .logo { height: 30px; }
  .venue-logo { height: 21px; }
  .denar .venue-logo { height: 14px; }
  .znak-velik { width: 38px; height: 38px; border-radius: 11px; }
  .znak { width: 38px; height: 38px; border-radius: 11px; font-size: 12px; }
  .naslov { font-size: 16px; }
  .glava .desno { margin-left: 0; width: 100%; }
  .utrip { width: 100%; justify-content: center; }

  /* Denar: dva stolpca. En sam bi potisnil kartice robotov pod tri zaslone. */
  .denar-vrsta { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .denar { padding: 13px 14px; }
  .denar .znesek { font-size: 20px; letter-spacing: -0.5px; }
  .denar .oznaka { font-size: 10px; letter-spacing: 0.8px; }
  .denar .drobno { font-size: 11px; }

  .graf-plosca { padding: 15px 14px 10px; margin-bottom: 18px; }
  .graf-glava { gap: 8px; }
  .graf-glava h2 { font-size: 14.5px; }
  /* Pojasnilo pod grafom je na telefonu tretja vrstica besedila nad grafom —
     vsebina je pomembnejsa od opombe. */
  .graf-glava .pojasnilo { display: none; }
  .graf-glava .skupno { font-size: 20px; }
  .obdobja { margin-left: 0; width: 100%; }
  .obdobja button { flex: 1; padding: 7px 4px; }

  .mreza { gap: 10px; }
  .kartica { padding: 14px 15px 13px; }
  .kartica .ime { font-size: 15px; }
  .stevilke { gap: 8px; }
  .stevilka .v { font-size: 16px; }

  /* Dotik rabi vecjo tarco od miske. */
  .stikalo { padding: 9px 14px 9px 9px; }
  .stikalo .drsnik { width: 38px; height: 20px; }
  .stikalo .drsnik::after { width: 14px; height: 14px; }
  .stikalo.vklop .drsnik::after { transform: translateX(18px); }

  .blok { padding: 15px 15px; }
  .par { padding: 8px 0; }

  /* Tabele ostanejo tabele in drsijo vodoravno — prelom v kartice bi na
     telefonu skril prav stolpce, zaradi katerih se tabelo bere (PnL, bps). */
  th, td { padding: 8px 10px; }
  table { font-size: 12.5px; }
}

/* ─────────────────────────── stikalo robota ───────────────────────────
   Drsnik, ne kljukica: stanje mora biti berljivo brez branja besedila.
   Oborožen = zlat in desno, razorožen = siv in levo. */
.stikalo-ovoj { margin-top: 14px; display: flex; }

.stikalo {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 7px; border-radius: 999px;
  border: 1px solid var(--rob); font: inherit; font-size: 12px;
  color: var(--siva-1); cursor: pointer;
  background: linear-gradient(180deg, #23262c, #191c21);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              0 1px 2px rgba(0, 0, 0, 0.5);
  transition: border-color 140ms ease, color 140ms ease;
}
.stikalo:hover:not(:disabled) { border-color: var(--rob-mocan); color: var(--bela); }

.stikalo .drsnik {
  width: 34px; height: 18px; border-radius: 999px; position: relative;
  background: #0d0f12; border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);
  flex: none;
}
.stikalo .drsnik::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(180deg, #6e6c66, #45433f);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 160ms cubic-bezier(.2, .7, .3, 1), background 160ms ease;
}
.stikalo.vklop .drsnik {
  background: linear-gradient(180deg, #4a3c14, #2a2210);
  border-color: rgba(217, 180, 90, 0.45);
}
.stikalo.vklop .drsnik::after {
  transform: translateX(16px);
  background: linear-gradient(180deg, var(--zlato-svetlo), var(--zlato));
  box-shadow: 0 0 10px rgba(217, 180, 90, 0.75),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.stikalo.vklop { color: var(--zlato-svetlo); }
.stikalo.izklop .oznaka { color: var(--siva-2); }

.stikalo.neznano .drsnik::after { background: var(--minus); }
.stikalo:disabled, .stikalo.tece { opacity: 0.6; cursor: progress; }

/* Brez razorožitve: videti mora kot NEDELUJOČ gumb, ne kot izklopljen bot. */
.stikalo.nedostopno {
  cursor: help; opacity: 0.5; border-style: dashed;
  background: none; box-shadow: none;
}
.stikalo.nedostopno .drsnik { opacity: 0.4; }