/* Infis Cockpit (Marko 15. 11. 2026): nadzorni sistem Infisa.
   Zasnova: kontrolna soba. Temen levi trak in temen »utrip« (orbita ljudi, ki so zdaj v Infisu, in EKG sporočil zadnje
   ure) sta edini glasni element; vse ostalo mirno, svetlo, berljivo. Barve AHAC (oranžna #F1371F → #FF8A00), pisava
   Nunito, števila tabelarna. Svetla in temna tema; prefers-reduced-motion brez gibanja. */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #EDEFF4; --panel: #FFFFFF; --panel-2: #F6F7FA; --ink: #1C1A27; --ink-2: #4B4859; --ink-3: #82808F; --line: #E0E2E9;
  --o: #F1371F; --o2: #FF8A00; --o-mehko: #FFEDE6; --o-mocno: #B4290F;
  --zel: #15A34A; --zel-m: #E3F6EA; --mod: #2563EB; --mod-m: #E6EEFF; --rum: #C97A06; --rum-m: #FFF4DE; --rde: #DC2626; --rde-m: #FDE8E8;
  --vij: #7C3AED; --vij-m: #F0E9FF;
  --noc: #15131E; --noc-2: #1F1B2C; --noc-ink: #EDEBF5; --noc-ink-2: #A9A5BD; --noc-line: rgba(255, 255, 255, .09);
  --r: 10px; --r-l: 16px; --senca: 0 1px 2px rgba(28, 26, 39, .05), 0 8px 24px -14px rgba(28, 26, 39, .22);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="svetla"]) {
    --bg: #0E0D14; --panel: #17151F; --panel-2: #1D1A27; --ink: #ECEAF4; --ink-2: #B7B3C7; --ink-3: #85819A; --line: #2A2737;
    --o-mehko: #3A1C14; --o-mocno: #FF9C6E; --zel-m: #0F2C1C; --mod-m: #14213F; --rum-m: #33240A; --rde-m: #3A1414; --vij-m: #251842;
    --senca: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -16px rgba(0, 0, 0, .8); color-scheme: dark;
  }
}
:root[data-tema="temna"] {
  --bg: #0E0D14; --panel: #17151F; --panel-2: #1D1A27; --ink: #ECEAF4; --ink-2: #B7B3C7; --ink-3: #85819A; --line: #2A2737;
  --o-mehko: #3A1C14; --o-mocno: #FF9C6E; --zel-m: #0F2C1C; --mod-m: #14213F; --rum-m: #33240A; --rde-m: #3A1414; --vij-m: #251842;
  --senca: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -16px rgba(0, 0, 0, .8); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: "Nunito", system-ui, sans-serif; font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--bg);
       font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
.i { width: 1.15em; height: 1.15em; flex: none; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; }
.nic { color: var(--ink-3); }
.mali { color: var(--ink-3); font-size: .82rem; margin: .5rem 0 0; }
.presledek { flex: 1; }
button { font: inherit; }

/* gumbi */
.gumb { display: inline-flex; align-items: center; gap: .45rem; height: 2.4rem; padding: 0 1rem; border-radius: var(--r); border: 1px solid var(--line);
        background: var(--panel); color: var(--ink); font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.gumb:hover { border-color: color-mix(in srgb, var(--o) 45%, var(--line)); }
.gumb:active { transform: translateY(1px); }
.gumb.glavni { background: linear-gradient(135deg, var(--o2), var(--o)); border: 0; color: #fff; box-shadow: 0 6px 18px -8px var(--o); }
.gumb.slab { background: var(--rde); border-color: var(--rde); color: #fff; }
.gumb.velik { height: 3rem; padding: 0 1.4rem; font-size: 1rem; border-radius: 12px; }
.gumb .i { width: 1.1rem; height: 1.1rem; }
.ikona-g { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9px; border: 1px solid transparent; background: none;
           color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.ikona-g:hover { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
:focus-visible { outline: 2px solid var(--mod); outline-offset: 2px; }

/* značke */
.znacka { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem .12rem .4rem; border-radius: 999px; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.znacka .i { width: .85rem; height: .85rem; }
.znacka.ok { background: var(--zel-m); color: var(--zel); }
.znacka.skrb { background: var(--o-mehko); color: var(--o-mocno); }
.znacka.siva { background: var(--panel-2); color: var(--ink-3); border: 1px solid var(--line); }
.znacka.obv { background: var(--vij-m); color: var(--vij); margin-left: .3rem; }
.znacka.slab { background: var(--rde-m); color: var(--rde); }
.znacka.cockpit { background: var(--mod-m); color: var(--mod); }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem .12rem .4rem; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line);
        font-size: .8rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.chip .i { width: .85rem; height: .85rem; color: var(--ink-3); }
.chip.oseba-c { background: var(--mod-m); border-color: transparent; color: var(--mod); }
.chip.sistem { color: var(--ink-3); }
.pas { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem 1rem; border-radius: var(--r); font-size: .9rem; margin: 0 0 1rem; }
.pas .i { margin-top: .1rem; }
.pas.slab { background: var(--rde-m); color: var(--rde); }
.pas.info { background: var(--mod-m); color: var(--mod); }

/* ---------------------------------- prijava ---------------------------------- */
.v-prijava { background: var(--noc); color: var(--noc-ink); }
.prijava { min-height: 100%; display: grid; place-items: center; position: relative; overflow: hidden; padding: 2rem 1rem; }
.prijava-scena { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.radar { width: min(130vmin, 980px); height: auto; opacity: .9; }
.radar-o { fill: none; stroke: var(--noc-line); stroke-width: 1.2; }
.radar-sweep { transform-origin: 300px 300px; animation: radar 6s linear infinite; }
@keyframes radar { to { transform: rotate(360deg); } }
.radar-pt { fill: var(--o2); opacity: 0; animation: radar-pt 6s ease-out infinite; animation-delay: var(--d); }
@keyframes radar-pt { 0%, 8% { opacity: 0; r: 3; } 12% { opacity: 1; r: 7; } 60% { opacity: .2; r: 5; } 100% { opacity: 0; } }
.prijava-k { position: relative; width: min(26rem, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: .9rem;
             padding: 2.2rem 2rem 1.8rem; border-radius: 22px; background: rgba(23, 21, 31, .72); border: 1px solid var(--noc-line);
             backdrop-filter: blur(14px); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); }
.prijava-k .znak { width: 4.8rem; height: 4.8rem; filter: drop-shadow(0 10px 24px rgba(241, 55, 31, .45)); }
.prijava-k h1 { font-size: 1.9rem; font-weight: 900; letter-spacing: -.02em; }
.prijava-k > p { margin: 0; color: var(--noc-ink-2); line-height: 1.55; }
.prijava-k .gumb.glavni { width: 100%; justify-content: center; margin-top: .4rem; }
.prijava-n { color: var(--noc-ink-2); font-size: .78rem; opacity: .8; }
.prijava-dev { width: 100%; display: grid; gap: .5rem; text-align: left; font-size: .82rem; color: var(--noc-ink-2); border-top: 1px solid var(--noc-line); padding-top: .9rem; }
.prijava-dev label { display: grid; gap: .3rem; }
.prijava-dev input { height: 2.4rem; border-radius: 9px; border: 1px solid var(--noc-line); background: rgba(255, 255, 255, .06); color: var(--noc-ink); padding: 0 .8rem; font: inherit; }
.v-prijava .pas.slab { background: rgba(220, 38, 38, .15); color: #FCA5A5; text-align: left; width: 100%; }
.znak-anim .zn-p { transform-origin: 60px 60px; animation: zn-p .6s var(--ease) both; }
.znak-anim .zn-z { animation: zn-z .6s var(--ease) .15s both; }
.znak-anim .zn-s { animation: zn-s .6s var(--ease) .3s both; }
@keyframes zn-p { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
@keyframes zn-z { from { transform: translate(18px, -12px); opacity: 0; } }
@keyframes zn-s { from { transform: translate(-18px, 12px); opacity: 0; } }
.zn-d { animation: zn-d 1.4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes zn-d { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

/* ---------------------------------- okvir ---------------------------------- */
.okvir { display: grid; grid-template-columns: 15rem minmax(0, 1fr); height: 100vh; height: 100dvh; }
.rail { display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem .8rem 1rem; background: var(--noc); color: var(--noc-ink-2); overflow-y: auto; }
.rail-znak { display: flex; align-items: center; gap: .7rem; padding: .2rem .5rem .6rem; text-decoration: none; color: var(--noc-ink); }
.rail-znak .znak { width: 2.4rem; height: 2.4rem; flex: none; }
.rail-znak b { display: block; font-size: 1.15rem; font-weight: 900; line-height: 1; }
.rail-znak small { display: block; font-size: .78rem; color: var(--o2); font-weight: 800; letter-spacing: .02em; }
.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-nav a, .rail-k, .rail-infis { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: 10px; text-decoration: none;
                                    font-weight: 700; font-size: .92rem; color: var(--noc-ink-2); transition: background .15s, color .15s; }
.rail-nav a .i { width: 1.2rem; height: 1.2rem; }
.rail-nav a:hover { background: rgba(255, 255, 255, .05); color: var(--noc-ink); }
.rail-nav a.on { background: linear-gradient(90deg, rgba(241, 55, 31, .22), rgba(241, 55, 31, .04)); color: #fff; box-shadow: inset 3px 0 0 var(--o); }
.rail-nav a.on .i { color: var(--o2); }
.rail-kmalu { margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--noc-line); display: flex; flex-direction: column; gap: 1px; }
.rail-kmalu p { margin: 0 0 .3rem; padding: 0 .75rem; font-size: .72rem; font-weight: 800; color: rgba(169, 165, 189, .6); }
.rail-k { opacity: .45; cursor: default; font-size: .86rem; padding-top: .4rem; padding-bottom: .4rem; }
.rail-k .i { width: 1.05rem; height: 1.05rem; }
.rail-infis { margin-top: auto; border: 1px solid var(--noc-line); font-size: .86rem; }
.rail-infis:hover { color: #fff; border-color: rgba(255, 138, 0, .5); }
.glavni-st { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.vrh { flex: none; display: flex; align-items: center; gap: .8rem; height: 3.8rem; padding: 0 1.6rem; border-bottom: 1px solid var(--line); background: var(--panel); }
.vrh-n { font-size: 1.3rem; font-weight: 900; letter-spacing: -.01em; }
.zivo { display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .65rem; border-radius: 999px; background: var(--zel-m); color: var(--zel); font-size: .76rem; font-weight: 800; }
.zivo i { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; animation: utrip-p 2s ease-in-out infinite; }
.zivo.slab { background: var(--rde-m); color: var(--rde); }
.zivo.slab i { animation: none; }
@keyframes utrip-p { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 60% { box-shadow: 0 0 0 6px transparent; } }
.tema-l { display: none; }
:root[data-tema="temna"] .tema-s { display: none; } :root[data-tema="temna"] .tema-l { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="svetla"]) .tema-s { display: none; } :root:not([data-tema="svetla"]) .tema-l { display: block; } }
.jaz { position: relative; }
.jaz-b { display: flex; align-items: center; gap: .55rem; padding: .25rem .5rem .25rem .25rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 700; font-size: .88rem; cursor: pointer; }
.jaz-b .i { width: .9rem; height: .9rem; color: var(--ink-3); }
.vsebina { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem 1.6rem 2.5rem; }

/* meni (dejanja, profil) */
.meni { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40; min-width: 15rem; padding: .35rem; border-radius: 12px; border: 1px solid var(--line);
        background: var(--panel); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .35); animation: meni-in .16s var(--ease); }
.meni[hidden] { display: none; }
.meni.gor { top: auto; bottom: calc(100% + .4rem); }
@keyframes meni-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.meni-g { margin: 0; padding: .5rem .6rem .6rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; display: grid; gap: .1rem; }
.meni-g small { color: var(--ink-3); font-size: .78rem; }
.meni-g .znacka { width: fit-content; margin-top: .3rem; }
.meni form { margin: 0; }
.meni-o { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .6rem; border: 0; border-radius: 8px; background: none; color: var(--ink); font-weight: 700; font-size: .88rem; text-align: left; cursor: pointer; }
.meni-o:hover { background: var(--panel-2); }
.meni-o .i { color: var(--ink-3); }
.meni-o.slab { color: var(--rde); } .meni-o.slab .i { color: var(--rde); }
.vr-meni { position: relative; display: inline-block; }

/* avatarji */
.ava { --h: 20; position: relative; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: 50%; overflow: hidden;
       background: hsl(var(--h) 55% 88%); color: hsl(var(--h) 45% 32%); font-size: .74rem; font-weight: 900; }
.ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:root[data-tema="temna"] .ava { background: hsl(var(--h) 30% 26%); color: hsl(var(--h) 60% 82%); }

/* ---------------------------------- pregled: utrip ---------------------------------- */
.utrip { position: relative; display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 1.4rem 1.6rem;
         border-radius: 22px; color: var(--noc-ink); overflow: hidden;
         background: radial-gradient(120% 140% at 0% 0%, rgba(241, 55, 31, .26), transparent 55%), linear-gradient(135deg, var(--noc-2), var(--noc)); box-shadow: var(--senca); }
.utrip::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent, #000 40%); }
.utrip-orbita { position: relative; display: flex; flex-direction: column; align-items: center; }
.orbita { width: 100%; max-width: 20rem; height: auto; overflow: visible; }
.orb-o { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1; stroke-dasharray: 3 6; }
.orb-o.tanka { stroke: rgba(255, 255, 255, .05); stroke-dasharray: none; }
.orb-val circle { fill: rgba(241, 55, 31, .35); transform-origin: 160px 160px; animation: orb-val 3s ease-out infinite; }
@keyframes orb-val { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.6); opacity: 0; } }
.orb-ljudje .orb-os { transform-origin: 160px 160px; animation: orb-krog var(--t) linear infinite; animation-delay: var(--zam); }
@keyframes orb-krog { to { transform: rotate(360deg); } }
.orb-ljudje .orb-os > g { animation: orb-krog var(--t) linear infinite reverse; animation-delay: var(--zam); transform-box: fill-box; transform-origin: center; }
.orb-oseba-o { fill: #2A2438; stroke: var(--o2); stroke-width: 2; }
.orb-oseba-t { fill: #fff; font: 900 11px "Nunito", sans-serif; text-anchor: middle; dominant-baseline: central; }
.utrip-st { margin-top: -.6rem; text-align: center; }
.utrip-st b { display: block; font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -.03em;
              background: linear-gradient(135deg, #fff, #FFC9A8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.utrip-st span { font-size: .85rem; color: var(--noc-ink-2); font-weight: 700; }
.utrip-desno { position: relative; z-index: 1; min-width: 0; }
.utrip-g { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.utrip-g h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 800; }
.utrip-g h2 .i { color: var(--o2); }
.utrip-u { margin-left: auto; color: var(--noc-ink-2); font-weight: 700; }
.utrip-u b { color: #fff; font-size: 1.4rem; font-weight: 900; }
.ekg { display: block; width: 100%; height: 9.5rem; margin-top: .6rem; overflow: visible; }
.ekg-mreza line { stroke: rgba(255, 255, 255, .06); }
.ekg-p { fill: url(#ekg-g); }
.ekg-l { fill: none; stroke: #FF9A3C; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ekg-sij { fill: none; stroke: #FF6A1A; stroke-width: 6; opacity: .55; }
.ekg-l.risi { stroke-dasharray: var(--dol); stroke-dashoffset: var(--dol); animation: ekg-risi 1.4s var(--ease) forwards; }
@keyframes ekg-risi { to { stroke-dashoffset: 0; } }
.ekg-pika { fill: #fff; filter: drop-shadow(0 0 6px #FF8A00); animation: ekg-pika 1.6s ease-in-out infinite; }
@keyframes ekg-pika { 50% { r: 7; } }
.ekg-os { display: flex; justify-content: space-between; color: rgba(169, 165, 189, .7); font-size: .72rem; font-weight: 700; margin-top: .3rem; }
.utrip-kaz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 1.1rem 0 0; }
.utrip-kaz > div { padding: .7rem .85rem; border-radius: 12px; background: rgba(255, 255, 255, .045); border: 1px solid var(--noc-line); min-width: 0; }
.utrip-kaz dt { display: flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 800; color: var(--noc-ink-2); }
.utrip-kaz dt .i { width: .95rem; height: .95rem; color: var(--o2); }
.utrip-kaz dd { margin: .2rem 0 0; font-size: 1.7rem; font-weight: 900; line-height: 1.1; color: #fff; }
.utrip-kaz small { color: rgba(169, 165, 189, .8); font-size: .74rem; }
.utrip-kaz .izkl dd { color: rgba(255, 255, 255, .35); }

/* ---------------------------------- plošče ---------------------------------- */
.plosce { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.plosca { grid-column: span 4; padding: 1.1rem 1.2rem 1.15rem; border-radius: var(--r-l); background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.plosca h2 { display: flex; align-items: center; gap: .5rem; font-size: .98rem; font-weight: 800; margin-bottom: .9rem; }
.plosca h2 .i { color: var(--o); }
.plosca h2 small { margin-left: auto; font-weight: 700; font-size: .78rem; color: var(--ink-3); }
.plosca h3 { font-size: .85rem; margin: 1rem 0 .5rem; color: var(--ink-2); }
.p-dni { grid-column: span 8; }
.p-ura { grid-column: span 4; }
.p-opoz { grid-column: span 4; }
.p-kanali { grid-column: span 4; }
.p-streznik { grid-column: span 4; }
.dve-st .plosca { grid-column: span 6; }
.povezava { display: inline-block; margin-top: .9rem; color: var(--o-mocno); font-weight: 800; font-size: .86rem; text-decoration: none; }
.povezava:hover { text-decoration: underline; }
.trak { display: flex; height: .8rem; border-radius: 999px; overflow: hidden; background: var(--panel-2); gap: 2px; }
.trak i { width: var(--w); min-width: 0; transition: width .8s var(--ease); }
.t-ok { background: linear-gradient(90deg, #22C55E, var(--zel)); } .t-brez { background: #C9C7D3; } .t-off { background: var(--rde); }
.legenda { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .82rem; color: var(--ink-2); }
.legenda i { display: inline-block; width: .6rem; height: .6rem; border-radius: 3px; margin-right: .35rem; }
.legenda b { color: var(--ink); }
.vrsta-st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.vrsta-st div { padding: .6rem .7rem; border-radius: 10px; background: var(--panel-2); }
.vrsta-st b { display: block; font-size: 1.4rem; font-weight: 900; line-height: 1.1; }
.vrsta-st span { font-size: .76rem; color: var(--ink-3); font-weight: 700; }
.stolpci { display: block; width: 100%; height: 11rem; overflow: visible; }
.stolpci rect.st { fill: url(#st-g); rx: 2; transform-box: fill-box; transform-origin: bottom; animation: st-rast .7s var(--ease) both; animation-delay: calc(var(--i) * 18ms); }
.stolpci rect.st.danes { fill: url(#st-g2); }
.stolpci rect.st:hover { filter: brightness(1.15); }
.stolpci line { stroke: var(--line); }
.stolpci text { fill: var(--ink-3); font: 700 10px "Nunito", sans-serif; }
@keyframes st-rast { from { transform: scaleY(0); } }
.os-dni { display: flex; justify-content: space-between; color: var(--ink-3); font-size: .72rem; font-weight: 700; margin-top: .3rem; }
.urnik { display: block; width: 100%; max-width: 15rem; margin: 0 auto; overflow: visible; }
.urnik .u-o { fill: none; stroke: var(--line); }
.urnik .u-s { fill: var(--o); opacity: .85; transform-origin: 120px 120px; animation: u-rast .7s var(--ease) both; animation-delay: calc(var(--i) * 25ms); }
.urnik .u-s.zdaj { fill: var(--o2); opacity: 1; }
.urnik text { fill: var(--ink-3); font: 800 10px "Nunito", sans-serif; text-anchor: middle; dominant-baseline: central; }
.urnik .u-sred { fill: var(--ink); font-size: 22px; font-weight: 900; }
.urnik .u-sred2 { fill: var(--ink-3); font-size: 9.5px; }
@keyframes u-rast { from { transform: scale(.55); opacity: 0; } }
.opoz { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.opoz li { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .75rem; border-radius: 10px; font-size: .88rem; font-weight: 600; }
.opoz .op-napaka { background: var(--rde-m); color: var(--rde); }
.opoz .op-info { background: var(--mod-m); color: var(--mod); }
.opoz .i { margin-top: .12rem; }
.prazno-ok { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .9rem; border-radius: 10px; background: var(--zel-m); color: var(--zel); font-weight: 800; }
.lestvica { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.lestvica li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .45rem .65rem; border-radius: 8px; font-size: .88rem; font-weight: 700; overflow: hidden; }
.lestvica li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, var(--o-mehko), color-mix(in srgb, var(--o-mehko) 40%, transparent));
                       border-radius: 8px; animation: lest .8s var(--ease) both; animation-delay: calc(var(--i) * 60ms); transform-origin: left; }
@keyframes lest { from { transform: scaleX(0); } }
.lestvica li > * { position: relative; }
.lestvica span { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lestvica span .i { width: .95rem; height: .95rem; color: var(--o); }
.dvojno { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .6rem; }
.razp { padding: .6rem .7rem; border-radius: 10px; background: var(--panel-2); }
.razp b { display: block; font-size: 1.35rem; font-weight: 900; line-height: 1.15; }
.razp b small { font-size: .8rem; color: var(--ink-3); margin-left: .1rem; }
.razp span { font-size: .76rem; color: var(--ink-3); font-weight: 700; }
.krivulja { display: block; width: 100%; height: 5.5rem; overflow: visible; }
.krivulja.visoka { height: 10rem; }
.krivulja path { fill: none; stroke-width: 2; stroke-linejoin: round; }
.krivulja .k-cpu { stroke: var(--o); } .krivulja .k-ram { stroke: var(--mod); } .krivulja .k-zdaj { stroke: var(--zel); } .krivulja .k-ms { stroke: var(--vij); stroke-dasharray: 4 3; }
.krivulja .k-pl { fill: color-mix(in srgb, var(--o) 14%, transparent); stroke: none; }
.krivulja line { stroke: var(--line); }
.krivulja text { fill: var(--ink-3); font: 700 10px "Nunito", sans-serif; }
.pik { display: inline-block; width: .7rem; height: .2rem; border-radius: 2px; margin: 0 .3rem 0 .6rem; vertical-align: middle; }
.pik.cpu { background: var(--o); } .pik.ram { background: var(--mod); } .pik.zdaj { background: var(--zel); } .pik.ms { background: var(--vij); }

/* ---------------------------------- tabele ---------------------------------- */
.hitri { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.hit { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
       color: var(--ink-2); font-weight: 700; font-size: .86rem; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.hit .i { width: 1rem; height: 1rem; }
.hit b { padding: 0 .45rem; border-radius: 999px; background: var(--panel-2); color: var(--ink); font-size: .78rem; }
.hit:hover { border-color: color-mix(in srgb, var(--o) 40%, var(--line)); color: var(--ink); }
.hit.on { background: var(--noc); border-color: var(--noc); color: #fff; }
.hit.on b { background: var(--o); color: #fff; }
:root[data-tema="temna"] .hit.on { background: var(--o); border-color: var(--o); }
.tabela-ovoj { border-radius: var(--r-l); border: 1px solid var(--line); background: var(--panel); overflow: auto; max-height: calc(100dvh - 15rem); }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.tabela thead th { position: sticky; z-index: 2; background: var(--panel-2); text-align: left; font-size: .78rem; font-weight: 800; color: var(--ink-2); padding: .65rem .8rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabela thead tr:first-child th { top: 0; }
.tabela thead tr.filtri th { top: 2.35rem; padding-top: .35rem; padding-bottom: .55rem; }
.tabela th[data-sort] { cursor: pointer; user-select: none; }
.tabela th[data-sort]::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .4rem; border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); transform: rotate(45deg) translateY(-2px); opacity: .7; }
.tabela th[aria-sort="ascending"]::after { border-color: var(--o); transform: rotate(-135deg) translate(-2px, -1px); opacity: 1; }
.tabela th[aria-sort="descending"]::after { border-color: var(--o); opacity: 1; }
.tabela .filtri input, .tabela .filtri select { width: 100%; min-width: 6rem; height: 2rem; padding: 0 .6rem; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: .82rem; font-weight: 600; }
.tabela tbody td { padding: .65rem .8rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
.tabela tbody tr.ugasnjen td { opacity: .58; }
.tabela tbody tr.neuspeh td { background: color-mix(in srgb, var(--rde-m) 55%, transparent); }
.tabela tbody tr.utrip-v td { animation: vr-utrip 1.4s var(--ease); }
@keyframes vr-utrip { 0% { background: var(--o-mehko); } }
.tabela .d { width: 3rem; text-align: right; }
.prazno-f td { text-align: center; color: var(--ink-3); padding: 2rem !important; }
.oseba, .kanal { position: relative; display: flex; align-items: center; gap: .7rem; min-width: 14rem; }
.oseba > span:last-child, .kanal > span:last-child, .dve { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.oseba small, .kanal small, .dve small, .pod { color: var(--ink-3); font-size: .78rem; }
.pod { display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem; }
.pod .i { width: .85rem; height: .85rem; }
.pika-z { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--zel); box-shadow: 0 0 0 2px var(--panel); }
.oseba .pika-z { position: absolute; left: 1.55rem; top: 1.55rem; }
.hit .pika-z { box-shadow: none; }
.viri { display: inline-flex; gap: .35rem; color: var(--ink-3); }
.viri i { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 7px; background: var(--panel-2); }
.viri .i { width: .95rem; height: .95rem; }
.stikalo-z { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; color: var(--ink-3); }
.stikalo-z::before { content: ""; width: 1.9rem; height: 1.1rem; border-radius: 999px; background: var(--line) radial-gradient(circle at 30% 50%, #fff .38rem, transparent .4rem); }
.stikalo-z.on { color: var(--zel); }
.stikalo-z.on::before { background: var(--zel) radial-gradient(circle at 70% 50%, #fff .38rem, transparent .4rem); }
.k-ik { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: 9px; background: var(--o-mehko); color: var(--o-mocno); }
.k-ik.zasebni { background: var(--vij-m); color: var(--vij); }
.mini-trak { display: inline-block; width: 5rem; height: .45rem; border-radius: 999px; background: var(--panel-2); overflow: hidden; vertical-align: middle; margin-right: .5rem; }
.mini-trak i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--o2), var(--o)); }
.mt-n { font-weight: 800; }
.ti { font-size: .78rem; color: var(--ink-3); font-weight: 700; }
.strani { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding-top: .7rem; font-size: .85rem; color: var(--ink-3); }
.strani:empty { display: none; }
.strani .st-t { margin-right: auto; }
.strani button { min-width: 2.2rem; height: 2.1rem; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 800; cursor: pointer; }
.strani button:disabled { opacity: .4; cursor: default; }
.opomba { display: flex; align-items: center; gap: .5rem; color: var(--ink-3); font-size: .82rem; margin: 1rem 0 0; }
.dn-vrh { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.zavihki { display: inline-flex; padding: .25rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); gap: .2rem; }
.zavihki a { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: 9px; text-decoration: none; font-weight: 800; font-size: .88rem; color: var(--ink-2); }
.zavihki a.on { background: var(--noc); color: #fff; }
.zavihki a.on .i { color: var(--o2); }
.pod-c { max-width: 34rem; }
.kv { display: inline-flex; gap: .3rem; margin: .1rem .3rem .1rem 0; padding: .05rem .45rem; border-radius: 6px; background: var(--panel-2); font-size: .78rem; }
.kv i { font-style: normal; color: var(--ink-3); font-weight: 800; }
.kv.raz { background: var(--rum-m); }

/* ---------------------------------- sistem ---------------------------------- */
.sis-glava { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; padding: 1.2rem 1.4rem; border-radius: 20px;
             background: linear-gradient(135deg, var(--noc-2), var(--noc)); color: var(--noc-ink); }
.sis-glava h2 { font-size: 1.4rem; font-weight: 900; }
.sis-glava p { margin: .2rem 0 0; color: var(--noc-ink-2); }
.sis-glava .mali { color: rgba(169, 165, 189, .7); }
.sis-stroj svg { width: 4.6rem; height: 4.6rem; }
.ss-o { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .15); }
.ss-r { fill: rgba(255, 255, 255, .14); }
.ss-l { fill: #22C55E; animation: ss-l 1.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes ss-l { 50% { opacity: .25; } }
.sis-razp { display: flex; gap: .7rem; }
.sis-razp div { padding: .6rem .9rem; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--noc-line); text-align: right; }
.sis-razp b { display: block; font-size: 1.35rem; font-weight: 900; color: #fff; }
.sis-razp span { font-size: .74rem; color: var(--noc-ink-2); font-weight: 700; }
.obroci { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.obroc { position: relative; padding: 1rem 1rem 1.1rem; border-radius: var(--r-l); background: var(--panel); border: 1px solid var(--line); text-align: center; }
.obroc svg { width: 8.5rem; height: 8.5rem; transform: rotate(-90deg); }
.ob-o { fill: none; stroke: var(--panel-2); stroke-width: 10; }
.ob-v { --p: 0; fill: none; stroke: var(--zel); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); transition: stroke-dashoffset 1s var(--ease), stroke .3s; }
.obroc.srednje .ob-v { stroke: var(--rum); } .obroc.visoko .ob-v { stroke: var(--rde); }
.ob-t { position: absolute; left: 0; right: 0; top: 2.9rem; display: flex; flex-direction: column; align-items: center; }
.ob-t .i { width: 1.2rem; height: 1.2rem; color: var(--ink-3); }
.ob-t b { font-size: 1.9rem; font-weight: 900; line-height: 1.1; }
.ob-t b small { font-size: .9rem; color: var(--ink-3); }
.obroc p { margin: .4rem 0 0; display: grid; }
.obroc p small { color: var(--ink-3); font-size: .78rem; }
.storitve, .vklopi { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.storitve li, .vklopi li { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 9px; background: var(--panel-2); font-size: .88rem; }
.storitve li small, .vklopi li small { margin-left: auto; color: var(--ink-3); }
.pika-s { width: .6rem; height: .6rem; border-radius: 50%; background: var(--zel); animation: utrip-p 2s ease-in-out infinite; color: var(--zel); }
.sv-slab .pika-s { background: var(--rde); color: var(--rde); }
.vklopi li .i { width: 1rem; height: 1rem; }
.vklopi li.ok .i { color: var(--zel); } .vklopi li.izk { opacity: .75; } .vklopi li.izk .i { color: var(--ink-3); }
.cert { display: flex; align-items: center; gap: .5rem; margin: .8rem 0 0; font-size: .86rem; font-weight: 700; color: var(--zel); }
.cert.slab { color: var(--rde); }
.kv-tab { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0 0 1rem; font-size: .88rem; }
.kv-tab dt { color: var(--ink-3); font-weight: 700; }
.kv-tab dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* ---------------------------------- potrditev in obvestila ---------------------------------- */
.potrdi { border: 0; padding: 0; border-radius: 18px; width: min(26rem, 92vw); background: var(--panel); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
.potrdi::backdrop { background: rgba(14, 13, 20, .55); backdrop-filter: blur(3px); }
.potrdi[open] { animation: potrdi-in .2s var(--ease); }
@keyframes potrdi-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.potrdi-k { padding: 1.4rem 1.4rem 1.2rem; display: grid; gap: .6rem; }
.potrdi-ik { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--rde-m); color: var(--rde); }
.potrdi-ik .i { width: 1.4rem; height: 1.4rem; }
.potrdi h2 { font-size: 1.15rem; font-weight: 900; }
.potrdi p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.potrdi-g { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .6rem; }
.toasti { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90; display: flex; flex-direction: column; gap: .6rem; width: min(24rem, calc(100vw - 2rem)); }
.toast { position: relative; display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem .95rem; border-radius: 14px; background: var(--panel); color: var(--ink); border: 1px solid var(--line);
         box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45); overflow: hidden; animation: toast-in .35s var(--ease); font-weight: 700; font-size: .9rem; }
.toast.ven { animation: toast-ven .25s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(30px); } }
@keyframes toast-ven { to { opacity: 0; transform: translateX(30px); } }
.toast-ik { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; background: var(--zel-m); color: var(--zel); }
.toast.napaka .toast-ik { background: var(--rde-m); color: var(--rde); }
.toast-ik svg { width: 1.2rem; height: 1.2rem; }
.toast-ik .kl { stroke-dasharray: 24; stroke-dashoffset: 24; animation: kl-risi .5s var(--ease) .15s forwards; }
@keyframes kl-risi { to { stroke-dashoffset: 0; } }
.toast-cas { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--zel); animation: toast-cas var(--t) linear forwards; }
.toast.napaka .toast-cas { background: var(--rde); }
@keyframes toast-cas { from { width: 100%; } to { width: 0; } }
.dela { opacity: .6; pointer-events: none; }

/* ---------------------------------- odzivno ---------------------------------- */
@media (max-width: 1200px) {
  .plosca, .p-dni, .p-ura, .p-opoz, .p-kanali, .p-streznik { grid-column: span 6; }
  .p-dni { grid-column: span 12; }
  .utrip-kaz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .obroci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .okvir { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .rail { flex-direction: row; align-items: center; gap: .4rem; padding: .5rem .7rem; overflow-x: auto; }
  .rail-znak span, .rail-kmalu, .rail-infis span { display: none; }
  .rail-znak { padding: 0 .3rem 0 0; }
  .rail-nav { flex-direction: row; }
  .rail-nav a span { display: none; }
  .rail-infis { margin: 0 0 0 auto; }
  .vrh { padding: 0 1rem; }
  .jaz-b > span:not(.ava) { display: none; }
  .vsebina { padding: 1rem; }
  .utrip { grid-template-columns: 1fr; }
  .plosca, .p-dni, .p-ura, .p-opoz, .p-kanali, .p-streznik, .dve-st .plosca { grid-column: span 12; }
  .sis-glava { grid-template-columns: 1fr; }
  .tabela-ovoj { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .radar-sweep, .orb-ljudje .orb-os, .orb-ljudje .orb-os > g { animation: none !important; }
}

.k-prazno { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 5.5rem; margin: 0; border-radius: 10px; background: var(--panel-2); color: var(--ink-3); font-size: .85rem; font-weight: 700; text-align: center; padding: .8rem; }
.k-prazno.visoka { min-height: 10rem; }
/* izbirni meni (namesto brskalnikovega; enako kot v Infisu) */
.izb { position: relative; width: 100%; min-width: 6rem; }
.izb-b { display: flex; align-items: center; gap: .4rem; width: 100%; height: 2rem; padding: 0 .5rem 0 .6rem; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
         font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; text-align: left; }
.izb-b span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.izb-b .i { width: .9rem; height: .9rem; color: var(--ink-3); transition: transform .15s; }
.izb.odprt .izb-b { border-color: var(--o); box-shadow: 0 0 0 3px color-mix(in srgb, var(--o) 15%, transparent); }
.izb.odprt .izb-b .i { transform: rotate(180deg); }
.izb.aktiven .izb-b { background: var(--o-mehko); border-color: color-mix(in srgb, var(--o) 40%, var(--line)); color: var(--o-mocno); }
.izb-s { position: fixed; z-index: 60; min-width: 11rem; max-height: 18rem; overflow-y: auto; padding: .3rem; border-radius: 10px; border: 1px solid var(--line); background: var(--panel);
         box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .35); animation: meni-in .14s var(--ease); }
.izb-o { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .45rem .55rem; border: 0; border-radius: 7px; background: none; color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; text-align: left; cursor: pointer; }
.izb-o:hover, .izb-o.fokus { background: var(--panel-2); }
.izb-o .kl { margin-left: auto; width: .95rem; height: .95rem; color: var(--o); visibility: hidden; }
.izb-o[aria-selected="true"] { font-weight: 800; }
.izb-o[aria-selected="true"] .kl { visibility: visible; }
.izb-o .pik-o { width: .5rem; height: .5rem; border-radius: 50%; background: var(--line); flex: none; }
.izb-o[aria-selected="true"] .pik-o { background: var(--o); }