Magacin: modal za premeštanje + ujednačen slajder na svim brauzerima

Premeštanje artikla:
  - Padajući <details> meni zamenjen nativnim <dialog> modalom (showModal),
    koji ide u „top layer" pa je uvek iznad svega bez obzira na z-index/overflow.
  - Dodato zatamnjenje pozadine (::backdrop) i fade in/out animacije
    (@starting-style + transition-behavior: allow-discrete).
  - Klik van modala, × dugme i Escape zatvaraju; klik na kategoriju i dalje
    odmah premešta artikal.

  Tema i HTMX:
  - CSS modala premešten iz magacin.html (dodatni-css u headeru) u main.css,
    jer se header ne menja pri HTMX navigaciji (hx-select=#glavni-sadrzaj),
    pa je stil sada uvek prisutan.
  - Modal prati svetlu/tamnu temu preko CSS promenljivih; kad je aktivna
    pozadinska slika, glass-override u base.html ga čini providnim i zamućenim
    kao kartice.
  - Modal centriran (margin:auto, jer reset gazi UA podrazumevano) i pojačana senka.

  Slajder (input[type=range]):
  - Dodata zajednička klasa .klizac sa ručnim stilom za oba motora
    (::-webkit-slider-* i ::-moz-range-*), da svuda izgleda kao u Firefox-u.
  - Plava popunjenost pre glave: Firefox preko ::-moz-range-progress, Chromium
    preko gradijenta i CSS promenljive --popunjeno koju postavlja JS.
  - Svih 12 slajdera (profil_tema, podesavanja_izgled, podesavanja) prešlo sa
    inline accent-color stila na klasu .klizac.

web/templates/stranice/podesavanja_izgled.html

@@ -40,9 +40,15 @@
         {{end}}
         <form method="POST" action="/podesavanja/login-pozadina" enctype="multipart/form-data">
             <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
-            <div style="display:flex;gap:8px;align-items:center;">
-                <input type="file" name="login_pozadina" accept=".jpg,.jpeg,.png,.webp"
-                    style="font-size:13px;color:var(--tekst-sporedni);">
+            <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
+                <input type="file" id="login-pozadina-file" name="login_pozadina" accept=".jpg,.jpeg,.png,.webp"
+                    style="display:none;"
+                    onchange="var s=document.getElementById('login-pozadina-ime');s.textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
+                <label for="login-pozadina-file"
+                    style="padding:8px 16px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;flex-shrink:0;font-weight:500;">
+                    Izaberi fajl
+                </label>
+                <span id="login-pozadina-ime" style="font-size:13px;color:var(--tekst-sporedni);">Nijedan fajl nije izabran</span>
                 <button type="submit"
                     style="padding:8px 16px;background:var(--sb-aktivan);color:var(--tekst-jak);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;transition:opacity 0.2s;flex-shrink:0;"
                     onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
@@ -79,7 +85,7 @@
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurPozadine + 'px'"></span>
                 </div>
                 <input type="range" x-model.number="blurPozadine" min="0" max="20" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
             </div>
             <div style="margin-top:12px;">
                 <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
@@ -87,7 +93,7 @@
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurKartice + 'px'"></span>
                 </div>
                 <input type="range" x-model.number="blurKartice" min="0" max="20" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
             </div>
             <div style="margin-top:12px;">
                 <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
@@ -95,7 +101,7 @@
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="opacity + '%'"></span>
                 </div>
                 <input type="range" x-model.number="opacity" min="0" max="80" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
             </div>
             <div style="margin-top:12px;">
                 <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
@@ -103,7 +109,7 @@
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="zatamnjenjeKartice + '%'"></span>
                 </div>
                 <input type="range" x-model.number="zatamnjenjeKartice" min="0" max="80" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
             </div>
             <form method="POST" action="/podesavanja/login-pozadina/stilovi" style="margin-top:16px;">
                 <input type="hidden" name="_csrf" value="{{.CsrfToken}}">