/* ══ WINE2D2 — DROID U UGLU EKRANA ══════════════════════════════════════════════════
   Plutajuće dugme dole desno i panel sa razgovorom, na SVAKOM ekranu (renderuje se
   JEDNOM, u MainLayout.razor).

   ─────────────────────────────────────────────────────────────────────────────────
   NIJEDNA BOJA OVDE NIJE NOVA.
   ─────────────────────────────────────────────────────────────────────────────────
   Wine2D2 nema paletu u promenljivim — boje stoje kao brojevi po datotekama. Zato su
   OVDE, i samo ovde, prepisane u promenljive, i uz SVAKU piše iz koje datoteke i sa
   kog reda je uzeta. Ko sutra uvede pravu kućnu paletu, menja samo ovaj jedan blok i
   ceo droid ide za njom.

   Provereno poređenjem sa: wwwroot/dist/css/dock-panel.css, wine2d3.css, wine2d2.css
   i Wine2D2WebMobile/Components/Pages/Shared/VoiceInput_Component.razor.

   AKCENAT DROIDA JE TEAL #3aadae, I EVO ZAŠTO BAŠ ON:
   u dock-panel.css teal nosi `.dock-card.on` — okvir panela koji TRAŽI NEŠTO OD TEBE
   (dock-panel.css:36), i `@keyframes dock-attn`, kojim panel pulsira kad počne da
   opslužuje novo polje (dock-panel.css:250-259). U ovoj kući teal već znači „ovo je
   živo i traži te sada". Droid je tačno to. Nijedna nova vrednost nije izmišljena.
   ══════════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── PODLOGE I OKVIRI ─────────────────────────────────────────────────────────
       dock-panel.css:33 (.dock-card): background #fff, border 1px solid #d7dde3,
       border-radius 14px. Panel droida je ista kartica. */
    --w2d-karta: #fff;
    --w2d-okvir: #d7dde3;
    --w2d-radijus: 14px;

    /* dock-panel.css:59 (.dock-foot): border-top #e2e8f0, background #fbfcfe */
    --w2d-crta: #e2e8f0;
    --w2d-podnozje: #fbfcfe;

    /* ── PISMO ───────────────────────────────────────────────────────────────────
       dock-panel.css:38-44: naslov #16222f, tiši tekst #5b6b7b, najtiši #94a3b8. */
    --w2d-tekst: #16222f;
    --w2d-tise: #5b6b7b;
    --w2d-najtise: #94a3b8;

    /* ── MEHUR DROIDA ────────────────────────────────────────────────────────────
       dock-panel.css:64 (.dock-empty-i): #eef4fb / #cfe0f2 / #2c4a68 — u panelu je to
       već „ovo ti govori program". Droid nasleđuje isti mehur. */
    --w2d-droid-bg: #eef4fb;
    --w2d-droid-okvir: #cfe0f2;
    --w2d-droid-tekst: #2c4a68;

    /* ── MEHUR ČOVEKA ────────────────────────────────────────────────────────────
       dock-panel.css:47 (.dock-head-close): background #f1f5f9, tekst #16222f. */
    --w2d-covek-bg: #f1f5f9;

    /* ── UPOZORENJE ──────────────────────────────────────────────────────────────
       dock-panel.css:66-70 (.dock-tips): #fffbeb / #fde9b5, naslov #92700c, red #4a3d13 */
    --w2d-paznja-bg: #fffbeb;
    --w2d-paznja-okvir: #fde9b5;
    --w2d-paznja-naslov: #92700c;
    --w2d-paznja-tekst: #4a3d13;

    /* ── GREŠKA ──────────────────────────────────────────────────────────────────
       dock-panel.css:133 (.dock-btn--del): background #fdecea, tekst #C0392B */
    --w2d-greska-bg: #fdecea;
    --w2d-greska: #C0392B;

    /* ── KUĆNA PLAVA ─────────────────────────────────────────────────────────────
       dock-panel.css:131 (.dock-btn--ok) i :114 (fokus prsten rgba(24,95,165,.13)) */
    --w2d-plava: #185FA5;
    --w2d-plava-prsten: rgba(24,95,165,.15);

    /* ── POPUNJENO POLJE ─────────────────────────────────────────────────────────
       dock-panel.css:147 (.dock-field.filled): border #16a34a, background #f6fdf8 */
    --w2d-uredu: #16a34a;
    --w2d-uredu-bg: #f6fdf8;

    /* ── AKCENAT DROIDA ──────────────────────────────────────────────────────────
       dock-panel.css:36 (.dock-card.on) i :250-259 (keyframes dock-attn) */
    --w2d-teal: #3aadae;
    --w2d-teal-slabo: rgba(58,173,174,.09);
    --w2d-teal-prsten: rgba(58,173,174,.55);

    /* ── SNIMANJE ────────────────────────────────────────────────────────────────
       VoiceInput_Component.razor (mobilna, red 79-80): #ef4444 sa prstenom
       rgba(239,68,68,0.25). Isto ponašanje mora izgledati isto na oba uređaja. */
    --w2d-snima: #ef4444;
    --w2d-snima-prsten: rgba(239,68,68,0.25);

    /* ── SENKE ───────────────────────────────────────────────────────────────────
       OBE SU DOSLOVNE, NIJEDNA NIJE IZMIŠLJENA — ni druga prozirnost iste boje.

       Mala (dugme leži na strani):  wine2d3.css:1236, .fchip.on
       Velika (sloj lebdi nad svim): wine2d3.css:525, .select-content — to je senka
       kojom kuća već crta PLUTAJUĆI sloj, pa panel droida stoji kao i svaki drugi. */
    --w2d-senka: 0 2px 8px rgba(20,34,47,.18);
    --w2d-senka-panel: 7px 10px 18px 0px rgba(150,150,150,0.79);

    /*  SLOJ — IZMEREN, NE PROCENJEN.

        wine2d3.css:577  .popup                 -> 9000   (prozor naloga, izbor sudova...)
        wine2d3.css:99   .swal2-container       -> 9999   (potvrda snimanja)
        wine2d3.css:106  .blazored-toast-...    -> 9999   (obaveštenja)

        Droid ide IZNAD prozora, jer se iz prozora naloga i zove („Otvori razgovor"), a ISPOD
        potvrde i obaveštenja, jer poruka o snimanju mora da bude iznad svega.

        Namerno NIJE 9000: to je isti broj kao .popup, pa bi ko je gore odlučivao redosled u
        dokumentu — a to je vrsta greške koja se pojavi tek kad se nešto premesti.               */
    --w2d-sloj: 9500;
}

/* ── PLUTAJUĆE DUGME ──────────────────────────────────────────────────────────────
   Krug 52px dole desno. Nije „chat" nego DROID: u krugu stoji sam crtež, bez slova. */
.w2d-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: var(--w2d-sloj);
    width: 52px; height: 52px; border-radius: 50%;
    border: 1.5px solid var(--w2d-okvir); background: var(--w2d-karta);
    box-shadow: var(--w2d-senka); cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit; line-height: 1;
    transition: border-color .12s, box-shadow .12s;
}
/* Na hover se menja SAMO okvir. Jača senka bi bila nova vrednost, a droid nema
   nijednu svoju: kartica koja se budi u ovoj kući menja okvir (.dock-card.on). */
.w2d-fab:hover { border-color: var(--w2d-teal); }
.w2d-fab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--w2d-teal-prsten); }
.w2d-fab.on { border-color: var(--w2d-teal); }

/* Dugme koje čeka odgovor pulsira ISTOM animacijom kao panel koji traži polje
   (dock-panel.css, keyframes dock-attn) — samo okvirom, ne veličinom. */
.w2d-fab.pita { animation: w2d-attn 620ms ease-out infinite; }
@keyframes w2d-attn {
    0%   { box-shadow: 0 0 0 0 rgba(58,173,174,0); }
    35%  { box-shadow: 0 0 0 6px var(--w2d-teal-prsten); }
    100% { box-shadow: 0 0 0 0 rgba(58,173,174,0); }
}

/* Broj neodgovorenih pitanja. Ista pločica kakvu nosi .sum-chip, samo okrugla. */
.w2d-fab-broj {
    position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px;
    border-radius: 10px; background: var(--w2d-teal); color: #fff;
    font-size: 11px; font-weight: 800; line-height: 19px; padding: 0 5px;
    border: 2px solid var(--w2d-karta);
}

/* ── PANEL ────────────────────────────────────────────────────────────────────────
   Širina 460px — ISTA mera koju nosi .dock-rail (dock-panel.css:21), da droid i
   dokovani panel stoje u istoj koloni i ne prave dva različita „desna stuba". */
.w2d-panel {
    position: fixed; right: 22px; bottom: 86px; z-index: var(--w2d-sloj);
    width: 460px; max-width: calc(100vw - 44px);
    height: min(640px, calc(100vh - 130px));
    background: var(--w2d-karta); border: 1px solid var(--w2d-okvir);
    border-radius: var(--w2d-radijus); box-shadow: var(--w2d-senka-panel);
    display: flex; flex-direction: column; overflow: hidden;
}
/* Panel je otvoren i traži odgovor — isti teal okvir kao .dock-card.on */
.w2d-panel.pita { border-color: var(--w2d-teal); }

/* Na uskom ekranu panel ide preko cele širine, kao što .dock-rail pada ispod
   obrasca na 1180px (dock-panel.css:25-30). */
@media (max-width: 620px) {
    .w2d-panel { right: 10px; left: 10px; width: auto; bottom: 78px;
                 height: min(560px, calc(100vh - 110px)); }
    .w2d-fab { right: 14px; bottom: 14px; }
}

/* Obaveštenja (Blazored, dole desno na bottom:2rem) stajala bi TAČNO preko dugmeta.
   Zato se podižu iznad njega. Jedina izmena je razmak od dna — ni boja, ni ponašanje. */
.blazored-toast-container.position-bottomright { bottom: 92px; }

/* ── ZAGLAVLJE PANELA — isto kao .dock-head ──────────────────────────────────── */
.w2d-head {
    flex: 0 0 auto; background: var(--w2d-karta); color: var(--w2d-tekst);
    padding: 10px 12px 8px; display: flex; align-items: flex-start; gap: 10px;
    border-bottom: 1.5px solid #000;
}
.w2d-head-t { flex: 1 1 auto; min-width: 0; }
.w2d-head-k { font-size: 10px; font-weight: 800; letter-spacing: 1.1px;
              text-transform: uppercase; color: var(--w2d-najtise); line-height: 1.3; }
.w2d-head-n { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--w2d-tekst); }
.w2d-head-x { font-size: 11.5px; color: var(--w2d-tise); line-height: 1.4; margin-top: 2px; }
.w2d-head-btn {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
    background: var(--w2d-covek-bg); border: 1px solid var(--w2d-okvir);
    color: var(--w2d-tise); font-size: 14px; font-weight: 700; line-height: 1;
    font-family: inherit; padding: 0;
}
.w2d-head-btn:hover { background: var(--w2d-crta); color: var(--w2d-tekst); }

/* ── TELO: razgovor ─────────────────────────────────────────────────────────── */
.w2d-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 12px 4px; }

.w2d-red { display: flex; margin-bottom: 10px; }
.w2d-red--covek { justify-content: flex-end; }

.w2d-mehur {
    max-width: 86%; border-radius: 11px; padding: 9px 12px;
    font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.w2d-mehur--droid { background: var(--w2d-droid-bg); border: 1px solid var(--w2d-droid-okvir);
                    color: var(--w2d-droid-tekst); }
.w2d-mehur--covek { background: var(--w2d-covek-bg); border: 1px solid var(--w2d-crta);
                    color: var(--w2d-tekst); }

/* Znak droida uz njegov mehur — sitan crtež, isti onaj iz plutajućeg dugmeta. */
.w2d-red--droid .w2d-znak { flex: 0 0 auto; margin-right: 8px; margin-top: 2px; }

/* Dopisano objašnjenje uz brojač čekanja („model radi na kućnom računaru"). Tiše je od poruke
   jer nije poruka nego umirivanje — čita se samo ako čekanje počne da smeta. */
.w2d-tiho { opacity: .68; font-style: italic; }

/* ── ŠTA JE ČULO: polje koje se KUCA, ne gotov mehur ───────────────────────────
   Najjeftinija mreža u celom sistemu: greška Whispera se hvata dok je rečenica
   čoveku još u glavi. Zato transkript NIKAD ne ide sam u model. */
.w2d-culo {
    background: var(--w2d-podnozje); border: 1.5px solid var(--w2d-teal);
    border-radius: 11px; padding: 9px 11px; margin-bottom: 10px;
}
.w2d-culo-k { font-size: 10px; font-weight: 800; letter-spacing: .9px;
              text-transform: uppercase; color: var(--w2d-paznja-naslov); margin-bottom: 5px; }
.w2d-culo textarea {
    width: 100%; border: 1px solid var(--w2d-okvir); border-radius: 9px; padding: 8px 10px;
    font-size: 13px; line-height: 1.5; color: var(--w2d-tekst); background: var(--w2d-karta);
    font-family: inherit; resize: vertical; min-height: 62px;
}
.w2d-culo textarea:focus { outline: none; border-color: var(--w2d-plava);
                           box-shadow: 0 0 0 3px var(--w2d-plava-prsten); }
.w2d-culo-red { display: flex; gap: 8px; margin-top: 8px; }

/* ── PITANJA: zatvorena, sa SADRŽAJEM svakog kandidata ─────────────────────────
   Čovek prepoznaje sud po vinu i količini, ne po šifri. Zato svaki odgovor nosi
   ceo opis, a ne samo oznaku. */
.w2d-pitanje {
    background: var(--w2d-paznja-bg); border: 1px solid var(--w2d-paznja-okvir);
    border-radius: 11px; padding: 10px 12px; margin-bottom: 10px;
}
.w2d-pitanje-k { font-size: 10.5px; font-weight: 800; letter-spacing: .9px;
                 text-transform: uppercase; color: var(--w2d-paznja-naslov); margin-bottom: 4px; }
.w2d-pitanje-t { font-size: 13px; font-weight: 700; color: var(--w2d-paznja-tekst);
                 line-height: 1.45; margin-bottom: 8px; }
.w2d-odg { display: flex; flex-direction: column; gap: 6px; }
.w2d-odg button {
    display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
    border: 1.5px solid var(--w2d-okvir); background: var(--w2d-karta);
    border-radius: 10px; padding: 9px 12px; font-size: 12.5px; font-weight: 700;
    color: var(--w2d-tekst); line-height: 1.35;
    transition: border-color .12s, background .12s;
}
.w2d-odg button:hover:not(:disabled) { border-color: var(--w2d-plava); background: var(--w2d-droid-bg); }
.w2d-odg button:disabled { opacity: .45; cursor: default; }
/* Poslednji odgovor je uvek izlaz („Nijedan — ponoviću"), pa se i vidi kao izlaz. */
.w2d-odg button.izlaz { color: var(--w2d-tise); font-weight: 600; }

/* ── NALAZI VALIDATORA ────────────────────────────────────────────────────────── */
.w2d-nalaz { border-radius: 10px; padding: 8px 11px; margin-bottom: 6px;
             font-size: 12px; line-height: 1.45; }
.w2d-nalaz--greska { background: var(--w2d-greska-bg); color: var(--w2d-greska); font-weight: 700; }
.w2d-nalaz--paznja { background: var(--w2d-paznja-bg); border: 1px solid var(--w2d-paznja-okvir);
                     color: var(--w2d-paznja-tekst); }

/* ── ČITANJE NAZAD ────────────────────────────────────────────────────────────── */
.w2d-nazad {
    background: var(--w2d-podnozje); border: 1px solid var(--w2d-crta); border-radius: 11px;
    padding: 9px 12px; margin-bottom: 10px;
}
.w2d-nazad-k { display: block; font-size: 10px; font-weight: 800; letter-spacing: .9px;
               text-transform: uppercase; color: var(--w2d-najtise); margin-bottom: 3px; }
.w2d-nazad-t { font-size: 13px; color: var(--w2d-tekst); line-height: 1.55; }

/* ── NACRT SPREMAN ────────────────────────────────────────────────────────────── */
.w2d-nacrt {
    background: var(--w2d-uredu-bg); border: 1.5px solid var(--w2d-uredu);
    border-radius: 11px; padding: 10px 12px; margin-bottom: 10px;
}
.w2d-nacrt-t { font-size: 12.5px; color: var(--w2d-tekst); line-height: 1.5; margin-bottom: 8px; }

/* ── PODNOŽJE: mikrofon i kucanje ─────────────────────────────────────────────── */
.w2d-foot { flex: 0 0 auto; border-top: 1px solid var(--w2d-crta); padding: 9px 12px;
            background: var(--w2d-podnozje); }
.w2d-foot-red { display: flex; gap: 8px; align-items: center; }
.w2d-foot input[type=text] {
    flex: 1 1 auto; min-width: 0; border: 1.5px solid var(--w2d-okvir); border-radius: 10px;
    padding: 9px 11px; font-size: 13px; color: var(--w2d-tekst); background: var(--w2d-karta);
    font-family: inherit;
}
.w2d-foot input[type=text]:focus { outline: none; border-color: var(--w2d-plava);
                                   box-shadow: 0 0 0 3px var(--w2d-plava-prsten); }

/* Mikrofon. Boje i prsten doslovno kao u mobilnoj (VoiceInput_Component) — isto
   ponašanje ne sme da izgleda različito na dva uređaja. */
.w2d-mic {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 22px; border: none;
    color: #fff; font-size: 15px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: var(--w2d-tekst); transition: background .2s, box-shadow .2s;
    font-family: inherit; padding: 0;
}
.w2d-mic:disabled { background: var(--w2d-najtise); cursor: default; }
.w2d-mic.snima { background: var(--w2d-snima); box-shadow: 0 0 0 5px var(--w2d-snima-prsten); }

.w2d-status { margin-top: 5px; font-size: 11.5px; min-height: 15px; line-height: 1.4; }
.w2d-status--snima { color: var(--w2d-snima); font-weight: 700; }
.w2d-status--radi  { color: var(--w2d-najtise); }
.w2d-status--greska{ color: #b91c1c; }   /* VoiceInput_Component.razor:110 — ista greška, ista boja */

/* ── DUGMAD PANELA — doslovno .dock-btn iz dock-panel.css:128-135 ────────────── */
.w2d-btn { border: none; border-radius: 10px; padding: 9px 13px; font-size: 12.5px;
           font-weight: 800; cursor: pointer; font-family: inherit; line-height: 1.1; }
.w2d-btn--ok  { background: var(--w2d-plava); color: #fff; }
.w2d-btn--off { background: #eef2f7; color: var(--w2d-tise); }   /* dock-panel.css:132 */
.w2d-btn--del { background: var(--w2d-greska-bg); color: var(--w2d-greska); }
.w2d-btn--w   { width: 100%; }
.w2d-btn:hover:not(:disabled) { filter: brightness(1.05); }
.w2d-btn:disabled { opacity: .45; cursor: default; }

/* ══ DROID — CRTEŽ ═════════════════════════════════════════════════════════════
   SVG se crta u kodu (Wine2D2-Avatar.razor), bez ijedne slike sa interneta i bez
   ijednog novog fajla u dist/img. Tri stanja, i to su JEDINE animacije u celom
   sklopu:
       miran  — ništa se ne miče
       sluša  — oko diše (1.4s)
       misli  — oko klizi levo-desno (0.9s)                                        */
/* ── ROBOT SA LOGOA (dist/img/wine2d2-512.png), boje pokupljene sa same ikone ──────────
   Kupola i ruke su bele; na beloj kartici bi nestale, zato nose tanku ivicu. Na tamnoj
   podlozi ivica se ne vidi i ništa ne kvari. */
.w2d-droid {
    display: block;
    --w2d-kupola:     #ffffff;
    --w2d-kupola-iv:  #b9c6d3;
    --w2d-traka-pl:   #8fb6e6;
    --w2d-zenica:     #1b2a47;
    --w2d-bure:       #d3953f;
    --w2d-duga:       #b97e2f;
    --w2d-obruc:      #5e5b30;
    --w2d-ruka-pl:    #9dc1ee;
    --w2d-stopalo:    #3b7dd8;
}
.w2d-droid .kupola     { fill: var(--w2d-kupola); stroke: var(--w2d-kupola-iv); stroke-width: .6; }
.w2d-droid .traka      { fill: var(--w2d-traka-pl); }
.w2d-droid .lampa      { fill: var(--w2d-traka-pl); }
.w2d-droid .zenica     { fill: var(--w2d-zenica); }
.w2d-droid .odsjaj     { fill: #fff; opacity: .9; }
.w2d-droid .bure       { fill: var(--w2d-bure); }
.w2d-droid .duga       { stroke: var(--w2d-duga); stroke-width: .7; fill: none; opacity: .8; }
.w2d-droid .obruc      { fill: var(--w2d-obruc); }
.w2d-droid .ruka       { fill: var(--w2d-kupola); stroke: var(--w2d-kupola-iv); stroke-width: .6; }
.w2d-droid .ruka-plava { fill: var(--w2d-ruka-pl); }
.w2d-droid .stopalo    { fill: var(--w2d-stopalo); }

/* Oko diše / klizi. Klasa stoji na GRUPI (zenica + odsjaj), pa odsjaj prati zenicu. */
/* MIRAN NEMA NIJEDNO PRAVILO — i to je tačno ono što znači. */
.w2d-droid--miran .oko { }
.w2d-droid--slusa .oko { animation: w2d-disi 1.4s ease-in-out infinite; }
@keyframes w2d-disi { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.w2d-droid--misli .oko { animation: w2d-klizi .9s ease-in-out infinite; }
@keyframes w2d-klizi { 0%, 100% { transform: translateX(-2.4px); } 50% { transform: translateX(2.4px); } }

@media (prefers-reduced-motion: reduce) {
    .w2d-droid .oko { animation: none !important; }
}
}

/* ══ ZNAK DROIDA NA POLJU OBRASCA ═══════════════════════════════════════════════
   Sićušan crtež uz polje koje je droid popunio. Mišem preko njega vidi se DOSLOVNO
   izgovoreni deo iz kog je polje nastalo — to je ceo trag od rečenice do broja.
   Namerno nije boja polja: obrazac već koristi zeleno za „popunjeno" i plavo za
   „bira se", pa bi treća boja polja značila treću stvar koju niko ne pamti.        */
.w2d-znak {
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle; cursor: help;
}
.w2d-znak--polje { margin-left: 6px; }

/* Traka droida nad obrascem — ista kartica, samo teal okvir („traži te sada"). */
.w2d-traka {
    background: var(--w2d-droid-bg); border: 1.5px solid var(--w2d-teal);
    border-radius: var(--w2d-radijus); padding: 11px 13px; margin-bottom: 12px;
}
.w2d-traka-h { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.w2d-traka-n { font-size: 13.5px; font-weight: 800; color: var(--w2d-droid-tekst); }
.w2d-traka-x { margin-left: auto; }

/* ══ POTVRDA PRED SNIMANJE ══════════════════════════════════════════════════════ */
.w2d-potvrda-h { font-size: 15px; font-weight: 800; color: var(--w2d-tekst); margin-bottom: 4px; }
.w2d-potvrda-x { font-size: 12px; color: var(--w2d-tise); line-height: 1.5; margin-bottom: 12px; }
.w2d-kontrola { display: flex; align-items: center; gap: 10px; padding: 9px 11px;
                border: 1.5px solid var(--w2d-okvir); border-radius: 10px; margin-bottom: 8px;
                background: var(--w2d-karta); }
.w2d-kontrola.ok  { border-color: var(--w2d-uredu); background: var(--w2d-uredu-bg); }
.w2d-kontrola.lose{ border-color: var(--w2d-greska); background: var(--w2d-greska-bg); }
.w2d-kontrola-t { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--w2d-tekst);
                  line-height: 1.4; }
.w2d-kontrola-t small { display: block; font-size: 11.5px; color: var(--w2d-tise); margin-top: 2px; }
.w2d-kontrola input {
    flex: 0 0 96px; width: 96px; text-align: center; font-size: 17px; font-weight: 800;
    color: var(--w2d-tekst); padding: 7px 8px; border: 1.5px solid var(--w2d-okvir);
    border-radius: 10px; background: var(--w2d-karta); font-family: inherit;
    font-variant-numeric: tabular-nums;
}
.w2d-kontrola input:focus { outline: none; border-color: var(--w2d-plava);
                            box-shadow: 0 0 0 3px var(--w2d-plava-prsten); }