/* ============================================================================
   UC POLICE PANEL — jedro dizajn sistema
   ----------------------------------------------------------------------------
   Slog: moderna temna nadzorna plosca. Skoraj crna podlaga, plosce komaj
   svetlejse od nje, lasasta obroba in zaobljeni vogali. Barva se pojavi
   redko in zato nekaj pomeni.

   Od kod izhaja:
     ledena modra       iz logotipa UnderControl — edini poudarek
     Rajdhani           uradna pisava projekta
     zaobljeni vogali   iz referencnih zaslonov, ki jih je dolocil narocnik
     lasaste crte       ista referenca: plosce loci crta, ne senca

   Pomembno: prejsnja razlicica je imela diagonalno prirezane vogale, kot
   jih ima glavno spletisce. Narocnik je izbral moderno smer, zato so zdaj
   povsod zaobljeni. Razreda .cut in .cut-btn sta ostala, da HTML ni bilo
   treba prepisati, a ne rezeta vec — samo zaokrozita.

   Odseki so ostevilceni. Barve so v 1, gumbi v 8.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENI */
:root{
  /* ------------------------------------------------------------- POVRSINE
     Stiri globine. Vsaka naslednja je za spoznanje svetlejsa od prejsnje.
     Razlika je namenoma majhna: plosce loci obroba, ne skok v svetlosti. */
  --surf-0:#030509;        /* stran                                       */
  --surf-1:#0A0E15;        /* plosca                                      */
  --surf-2:#0F151D;        /* plosca na plosci, vrstica ob prehodu miske  */
  --surf-3:#151C26;        /* vnosno polje, izbrana vrstica               */

  --line:rgba(255,255,255,.07);      /* lasasta crta med ploscami         */
  --line-2:rgba(255,255,255,.12);    /* obroba ob prehodu miske           */
  --line-3:rgba(255,255,255,.18);    /* obroba dejavnega polja            */

  /* Led — telo logotipa in edini poudarek strani */
  --ice-50:#FAFDFF;
  --ice-100:#EAF6FF;
  --ice-200:#D2EBFF;
  --ice-300:#B0DCFB;
  --ice-400:#88C9F6;
  --ice-500:#5FB4EE;
  --ice-600:#3D94D8;
  --ice-700:#2570AD;
  --ice-800:#174D7C;
  --ice-900:#0E3252;

  --glow:#7FD4FF;
  --glow-soft:rgba(127,212,255,.28);

  /* -------------------------------------------------------------- STANJA
     Edine barve, ki smejo pomeniti stanje. Nikjer drugje jih ne
     uporabljamo, sicer izgubijo pomen. Vsaka ima ob sebi tudi napis —
     barva nikoli ne nosi pomena sama.                                    */
  --ok:#3FD69B;     --ok-soft:rgba(63,214,155,.12);   --ok-line:rgba(63,214,155,.34);
  --warn:#E8B14C;   --warn-soft:rgba(232,177,76,.12); --warn-line:rgba(232,177,76,.34);
  --bad:#F2647E;    --bad-soft:rgba(242,100,126,.12); --bad-line:rgba(242,100,126,.34);
  --idle:#7E93AC;   --idle-soft:rgba(126,147,172,.12);--idle-line:rgba(126,147,172,.34);

  /* ------------------------------------------------------- OKRASNI ODTENKI
     Samo za razlocevanje kategorij ob NAPISU — znacke enot, vrste opreme.
     Nikoli kot edini nosilec pomena in nikoli v grafu namesto napisa.   */
  --hue-amber:#E8B14C;
  --hue-violet:#9B7BE8;
  --hue-mint:#4FD9A8;
  --hue-rose:#E8879B;
  --hue-cyan:#45C2D4;
  /* Baker je bil dodan za enoto K-9. Sedem odtenkov je bilo ravno toliko,
     kolikor je bilo enot; osma je potrebovala svojega. Proti jantarju je
     dovolj bolj rdec, da ju je ob napisu mogoce lociti.                 */
  --hue-copper:#E0873F;

  --discord:#5865F2;

  /* Besedilo. Vse stiri stopnje so preverjene proti vsem trem povrsinam.
     Najtemnejsa (--tx-4) doseze 5,05 : 1 tudi na najsvetlejsi plosci
     (--surf-3), kar zadosca za drobne velike crke. Ne temni je: panel
     nosi veliko oznak v tej barvi in pri #6C7F94 razmerje pade na 4,07. */
  --tx-1:#F2F7FC;
  --tx-2:#B9C9DA;
  --tx-3:#8194A8;
  --tx-4:#7C8FA5;

  /* Tipografija */
  --f-display:"Rajdhani","Segoe UI",system-ui,sans-serif;
  --f-body:"Rajdhani","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  /* ----------------------------------------------------------- ZAOKROZITEV
     Tri mere. Vecja plosca dobi vecjo, drobna oznaka manjso. Vmesnih
     vrednosti ne uvajamo, sicer stran izgubi enotnost.                  */
  --r-card:16px;
  --r-ctl:11px;
  --r-sm:8px;
  --r-pill:999px;

  /* Ritem */
  --pad:clamp(18px,4vw,56px);
  --maxw:1440px;
  --maxw-narrow:900px;

  /* Krivulje */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-in-out:cubic-bezier(.76,0,.24,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);

  /* Sence — mehke in globoke, nikoli ostre */
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 10px 30px rgba(0,0,0,.45);
  --sh-3:0 26px 70px rgba(0,0,0,.6);

  --header-h:68px;
  --rail-w:252px;
}

/* Razreda iz prejsnje razlicice. Vogalov ne rezeta vec, samo zaokrozita —
   tako je HTML ostal nespremenjen, videz pa je nov.                      */
.cut,.cut-btn{border-radius:var(--r-card);}

/* ------------------------------------------------------------------ 2. BAZA */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
/* Ko drsenje prevzame public.js, mora brskalnik svoje glajenje izklopiti.
   Sicer bi se obe resitvi tepli: mi premaknemo stran na vsako sliko,
   brskalnik pa bi vsak tak premik se sam animiral, in drsenje bi zaostajalo. */
html.ima-gladko{scroll-behavior:auto;}

body{
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  color:var(--tx-2);
  background:var(--surf-0);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden;}

/* Elementi z oznako hidden morajo ostati skriti tudi takrat, kadar jim
   razred doloca display. Brez !important .btn{display:inline-flex} premaga
   privzeto pravilo brskalnika in gumb se pokaze, ceprav je skrit.       */
[hidden]{display:none !important;}

img,svg,video,canvas{display:block;max-width:100%;}
img{height:auto;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none;}
button{cursor:pointer;}
ul,ol{list-style:none;}
table{border-collapse:separate;border-spacing:0;width:100%;}
::selection{background:rgba(95,180,238,.3);color:var(--ice-50);}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:99px;border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(127,212,255,.3);background-clip:content-box;}

:focus-visible{outline:2px solid var(--ice-400);outline-offset:2px;border-radius:6px;}

.skip-link{
  position:fixed;top:-100px;left:16px;z-index:9999;
  padding:12px 20px;border-radius:var(--r-ctl);
  background:var(--ice-500);color:#04121E;font-weight:700;
  transition:top .25s var(--e-out);
}
.skip-link:focus{top:16px;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* --------------------------------------------------- 3. TIPOGRAFSKI SISTEM */
.h-xxl,.h-xl,.h-lg,.h-md,.h-sm,.h-xs{
  font-family:var(--f-display);font-weight:700;
  line-height:1.02;letter-spacing:-.015em;
  color:var(--tx-1);text-wrap:balance;
}
.h-xxl{font-size:clamp(2.9rem,7.2vw,6.4rem);letter-spacing:-.028em;}
.h-xl {font-size:clamp(2.3rem,5.4vw,4.6rem);letter-spacing:-.024em;}
.h-lg {font-size:clamp(1.9rem,3.6vw,3.1rem);letter-spacing:-.02em;}
.h-md {font-size:clamp(1.42rem,2.3vw,2rem);line-height:1.14;}
.h-sm {font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.26;letter-spacing:-.008em;}
.h-xs {font-size:1rem;line-height:1.3;letter-spacing:-.004em;}

/* Kromirano ledeno besedilo — enaka obdelava kot logotip */
.chrome{
  background:linear-gradient(176deg,#FFFFFF 0%,var(--ice-200) 28%,var(--ice-400) 54%,var(--ice-600) 76%,var(--ice-300) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.accent{
  background:linear-gradient(100deg,var(--glow),var(--ice-400) 48%,var(--ice-600));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* Drobna oznaka nad podatkom. Panel jih nosi veliko. */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ice-400);
}
.eyebrow::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--ice-500);}
.eyebrow.is-centered::after{content:"";width:16px;height:2px;border-radius:2px;background:var(--ice-500);}

.label{
  display:block;
  font-family:var(--f-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tx-4);
  margin-bottom:6px;
}

.lede{font-size:clamp(.98rem,1.3vw,1.12rem);line-height:1.74;color:var(--tx-3);max-width:62ch;text-wrap:pretty;}
.muted{color:var(--tx-4);}
.mono{font-family:var(--f-mono);}
.nowrap{white-space:nowrap;}
.center{text-align:center;}

/* ============================================== 3b. NASLOV ODSEKA
   Iz referencnega zaslona: navpicna crtica v barvi poudarka, ob njej
   drobna oznaka z velikimi crkami, nato lasasta crta cez preostalo
   sirino. Loci odseke, ne da bi zavzela vrstico z veliko tipografijo. */
.sh{
  display:flex;align-items:center;gap:12px;
  margin-bottom:16px;
}
.sh::before{
  content:"";width:3px;height:15px;flex:none;border-radius:2px;
  background:linear-gradient(180deg,var(--glow),var(--ice-700));
}
.sh h2,.sh h3,.sh > b{
  font-family:var(--f-mono);font-size:.68rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--tx-2);
  white-space:nowrap;
}
.sh::after{content:"";flex:1;height:1px;background:var(--line);}
/* Kadar odsek nosi tudi gumb, ta stoji za crto. Crta (::after) je v vrsti
   vedno zadnji otrok, zato gumb brez order stoji med naslovom in crto —
   crta je potem tekla od gumba do roba, kot da gumb lezi na njej.     */
.sh .ob{flex:none;order:2;}

/* ----------------------------------------------------------- 4. POSTAVITEV */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
.wrap.is-narrow{max-width:var(--maxw-narrow);}
.section{position:relative;padding-block:clamp(56px,7vw,116px);}
.section.is-tight{padding-block:clamp(40px,4.6vw,72px);}

.sec-head{margin-bottom:clamp(28px,3.6vw,54px);max-width:1020px;}
.sec-head.is-centered{margin-inline:auto;text-align:center;}
.sec-head .eyebrow{margin-bottom:16px;}
.sec-head .lede{margin-top:18px;}
.sec-head.is-centered .lede{margin-inline:auto;}

.grid{display:grid;gap:clamp(12px,1.3vw,18px);}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}

.row{display:flex;align-items:center;gap:12px;}
.row.is-between{justify-content:space-between;}
.row.is-wrap{flex-wrap:wrap;}
.spacer{flex:1;}
.divider{height:1px;border:0;background:var(--line);}

/* ------------------------------------------------------------- 5. OZADJE */
.bg-stack{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--surf-0);}
/* Dve komaj vidni modri sviti. Brez njiju je crnina mrtva. */
.bg-aurora{
  position:absolute;inset:-20%;
  background:
    radial-gradient(34% 30% at 18% 14%,rgba(47,140,255,.13),transparent 64%),
    radial-gradient(30% 28% at 84% 72%,rgba(64,168,255,.09),transparent 64%);
  filter:blur(54px);
  animation:drift 40s ease-in-out infinite alternate;
}
@keyframes drift{
  0%  {transform:translate3d(0,0,0) scale(1);}
  100%{transform:translate3d(-3%,2%,0) scale(1.08);}
}
.bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(86% 70% at 50% 34%,#000 10%,transparent 76%);
  -webkit-mask-image:radial-gradient(86% 70% at 50% 34%,#000 10%,transparent 76%);
}
.bg-vignette{position:absolute;inset:0;background:radial-gradient(128% 96% at 50% 44%,transparent 42%,rgba(3,5,8,.8) 100%);}

/* ------------------------------------------------------------- 6. PLOSCE
   Ena sama plosca za vse. Ozadje je skoraj crno, obroba lasasta, vogali
   zaobljeni. Zamegljenega stekla ni vec — referenca je ploscata.       */
.glass,.panel{
  position:relative;
  background:var(--surf-1);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  transition:border-color .35s var(--e-out),background .35s var(--e-out),
             transform .45s var(--e-out),box-shadow .45s var(--e-out);
}
/* Komaj vidna svetloba na zgornjem robu — plosca tako dobi debelino */
.glass::before,.panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 38%);
}
.glass > *,.panel > *{position:relative;}

.glass-soft{
  background:var(--surf-1);
  border:1px solid var(--line);
  border-radius:var(--r-ctl);
}

/* Plosca, ki je tudi povezava. Dvigne se in obroba se obarva. */
.is-liftable{cursor:pointer;}
.is-liftable:hover{
  transform:translateY(-3px);
  border-color:rgba(127,212,255,.28);
  box-shadow:var(--sh-2);
}

/* ------------------------------------------- 6b. NAGIB ZA KAZALCEM (3D)
   Plosca se rahlo nagne proti kazalcu. JS nastavi --rx in --ry. Nagib je
   majhen (najvec 6 stopinj): vec bi bilo igracarsko in bi otezilo branje
   besedila na plosci.                                                   */
.tilt{
  transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .5s var(--e-out),border-color .35s var(--e-out);
}
.tilt.is-live{transition:transform .12s linear,border-color .35s var(--e-out);}
/* Odsev, ki potuje za kazalcem — daje obcutek gladke povrsine */
.tilt::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(127,212,255,.1),transparent 64%);
  opacity:0;transition:opacity .4s var(--e-out);
}
.tilt:hover::after{opacity:1;}

/* ---------------------------------------------------------------- 7. ZNACKE */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  background:rgba(95,180,238,.1);
  border:1px solid rgba(95,180,238,.26);
  color:var(--ice-300);white-space:nowrap;
}
.tag-ok  {background:var(--ok-soft);  border-color:var(--ok-line);  color:var(--ok);}
.tag-warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn);}
.tag-bad {background:var(--bad-soft); border-color:var(--bad-line); color:var(--bad);}
.tag-idle{background:var(--idle-soft);border-color:var(--idle-line);color:var(--idle);}

/* Pika stanja pred napisom. Napis je obvezen — pika ga samo spremlja. */
.dot{width:7px;height:7px;flex:none;border-radius:50%;background:currentColor;}
.dot.is-zivo{animation:utrip 2.4s var(--e-out) infinite;}
@keyframes utrip{
  0%  {box-shadow:0 0 0 0 currentColor;opacity:1;}
  70% {box-shadow:0 0 0 6px transparent;opacity:.75;}
  100%{box-shadow:0 0 0 0 transparent;opacity:1;}
}

/* ---------------------------------------------------------------- 8. GUMBI */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 24px;border-radius:var(--r-ctl);
  font-family:var(--f-display);font-size:.8rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  border:1px solid transparent;
  overflow:hidden;
  transition:transform .3s var(--e-spring),background .28s var(--e-out),
             border-color .28s var(--e-out),color .28s var(--e-out),box-shadow .3s var(--e-out);
}
.btn svg{width:16px;height:16px;flex:none;}
.btn:active{transform:scale(.97);}
/* Odsev, ki potuje cez gumb ob prehodu miske */
.btn::after{
  content:"";position:absolute;top:0;left:-130%;width:58%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-20deg);transition:left .7s var(--e-out);pointer-events:none;
}
.btn:hover::after{left:150%;}

.btn-primary{
  background:linear-gradient(140deg,var(--ice-300),var(--ice-500) 46%,var(--ice-700));
  color:#03131F;border-color:rgba(255,255,255,.24);
  box-shadow:0 6px 20px rgba(61,148,216,.28);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(95,180,238,.42);}

.btn-glass{background:var(--surf-2);color:var(--tx-1);border-color:var(--line-2);}
.btn-glass:hover{transform:translateY(-2px);border-color:rgba(127,212,255,.38);background:var(--surf-3);}

.btn-ghost{border-color:var(--line-2);color:var(--tx-2);}
.btn-ghost:hover{color:var(--tx-1);border-color:var(--line-3);background:var(--surf-2);transform:translateY(-2px);}

.btn-discord{
  background:linear-gradient(140deg,#5865F2,#3C45C4);color:#fff;
  border-color:rgba(255,255,255,.2);box-shadow:0 6px 20px rgba(88,101,242,.34);
}
.btn-discord:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(88,101,242,.5);}

/* Nevaren gumb ni poln, da ga ni mogoce klikniti po nesreci. */
.btn-danger{border-color:var(--bad-line);color:var(--bad);background:var(--bad-soft);}
.btn-danger:hover{background:rgba(242,100,126,.2);transform:translateY(-2px);}

.btn-sm{padding:8px 15px;font-size:.68rem;border-radius:var(--r-sm);}
.btn-lg{padding:16px 34px;font-size:.86rem;}
.btn-block{width:100%;}
.btn[disabled],.btn.is-disabled{opacity:.4;pointer-events:none;filter:grayscale(.6);}
.btn-row{display:flex;flex-wrap:wrap;gap:11px;}
.btn-row.is-centered{justify-content:center;}

.btn-icon{
  width:36px;height:36px;padding:0;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-ctl);
  color:var(--tx-3);
  transition:color .26s var(--e-out),border-color .26s var(--e-out),background .26s var(--e-out);
}
.btn-icon:hover{color:var(--ice-300);border-color:var(--line-2);background:var(--surf-2);}
.btn-icon svg{width:16px;height:16px;}

/* ------------------------------------------------------------ 9. OBRAZCI */
.field{display:block;margin-bottom:14px;}
.field > span{
  display:block;
  font-family:var(--f-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tx-4);
  margin-bottom:7px;
}
.input,.select,.textarea{
  width:100%;padding:11px 14px;
  background:var(--surf-2);
  border:1px solid var(--line);
  border-radius:var(--r-ctl);
  color:var(--tx-1);font-size:.94rem;
  transition:border-color .26s var(--e-out),background .26s var(--e-out);
}
.input:focus,.select:focus,.textarea:focus{border-color:rgba(127,212,255,.45);background:var(--surf-3);}
.input::placeholder,.textarea::placeholder{color:var(--tx-4);}
.textarea{min-height:118px;resize:vertical;line-height:1.6;}
.select{
  appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238194A8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
}
.select option{background:var(--surf-2);color:var(--tx-1);}

/* Iskalno polje z ikono. V referenci je zaobljeno do konca. */
.search{position:relative;}
.search .input{padding-left:38px;border-radius:var(--r-pill);}
.search > svg{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--tx-4);pointer-events:none;
}

/* ------------------------------------------------------- 9b. PREKLOP JEZIKA
   Uporabljata ga javni del in panel, zato stoji v jedru in ne v enem od
   njiju.                                                                 */
.lang{display:flex;gap:2px;flex:none;border:1px solid var(--line);border-radius:var(--r-ctl);padding:3px;}
.lang button{
  padding:5px 10px;border-radius:var(--r-sm);
  font-family:var(--f-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-4);
  transition:color .24s var(--e-out),background .24s var(--e-out);
}
.lang button:hover{color:var(--tx-2);}
.lang button.is-active{background:var(--surf-3);color:var(--ice-200);}

/* ------------------------------------------------------------ 10. TABELE
   Vrstice niso locene s crtami, ampak se ob prehodu miske osvetlijo.
   Manj crt pomeni mirnejso plosco.                                     */
.table-wrap{overflow-x:auto;}
.table{font-size:.9rem;}
.table th{
  text-align:left;padding:10px 14px;
  font-family:var(--f-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tx-4);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.table td{padding:12px 14px;color:var(--tx-2);vertical-align:middle;border-bottom:1px solid rgba(255,255,255,.04);}
.table tbody tr{transition:background .2s var(--e-out);}
.table tbody tr:hover{background:var(--surf-2);}
.table tbody tr:last-child td{border-bottom:0;}
.table .is-num{text-align:right;font-family:var(--f-mono);font-size:.84rem;}

/* ------------------------------------------------------------ 11. GIBANJE */
.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--e-out) var(--d,0s),transform .7s var(--e-out) var(--d,0s);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none;}

.count{font-variant-numeric:tabular-nums;}

.skeleton{
  background:linear-gradient(90deg,rgba(255,255,255,.035) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.035) 75%);
  background-size:220% 100%;
  animation:shimmer 1.4s linear infinite;
  border-radius:var(--r-sm);color:transparent;user-select:none;
}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-20% 0;}}

/* Kdor je izklopil animacije, jih ne dobi. Vse ostane na koncnem stanju. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;}
  .tilt{transform:none !important;}
}

/* ------------------------------------------------------- 12. MANJSI ZASLONI */
@media (max-width:980px){
  .g-4{grid-template-columns:repeat(2,1fr);}
  .g-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  body{font-size:15px;}
  .g-2,.g-3,.g-4{grid-template-columns:1fr;}
}