/* ════════════════════════════════════════════════════════════════════════
   NYXIUM · LIQUID GLASS kit (lg.css)  —  celý ekosystém
   PŘESNĚ podle nyxium.cz/sandbox/liquid-glass.html (freefrontend / samarkandiy).
   Žádné vlastní úpravy, ŽÁDNÝ vlastní blur. Jen demo hodnoty:
     ::before  = čiré sklo:  backdrop-filter:blur(0px) + filter:url(#lg-dist)  (jen .lg-on)
     ::after   = bílý overlay rgba(255,255,255,.25) + bílý specular lesk rgba(255,255,255,.75)
     obsah     = z-index:1 nad sklem (ostrý)
   SVG filtr #lg-dist (scale 70) injektuje /lg.js.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --lg-bg-color:  rgba(255, 255, 255, 0.25);
  --lg-highlight: rgba(255, 255, 255, 0.75);
}

/* ─────────────── foto pozadí (sklo refraktuje co je za ním) ─────────────── */
body{
  background:
    linear-gradient(rgba(8,9,14,.46),rgba(8,9,14,.46)),
    url('https://greggvanourek.com/wp-content/uploads/2023/08/Nature-path-by-water-trees-and-mountains-AdobeStock_291242770-scaled.jpeg') center center / cover no-repeat fixed,
    var(--dark, #07090d) !important;
}
@media (pointer:coarse){ body{ background-attachment:scroll !important; } }
/* ─── N2 (přání Šéfa 2026-06-14): theme "cyberpunk" (default, data-theme="") má vlastní foto ───
   Vyšší specificita než body{} výše → přebíjí i s !important. Ostatní themy = nature foto.
   Obrázek /bg/cyberpunk.jpg (Cyberpunk 2077). Prosím N4: při přepisu lg.css zachovat. */
html[data-theme=""] body, html:not([data-theme]) body{
  background:
    linear-gradient(rgba(8,9,14,.46),rgba(8,9,14,.46)),
    url('/bg/cyberpunk.jpg') center center / cover no-repeat fixed,
    var(--dark, #07090d) !important;
}
@media (pointer:coarse){ html[data-theme=""] body, html:not([data-theme]) body{ background-attachment:scroll !important; } }
/* ─── N4 (přání Šéfa 2026-06-14): theme "crimson" má vlastní pozadí (červená textura) ───
   /bg/crimson.jpg místo nature lesa. Vyšší specificita přebíjí base body{}. */
html[data-theme="crimson"] body{
  background:
    linear-gradient(rgba(8,9,14,.46),rgba(8,9,14,.46)),
    url('/bg/crimson.jpg') center center / cover no-repeat fixed,
    var(--dark, #0a0002) !important;
}
@media (pointer:coarse){ html[data-theme="crimson"] body{ background-attachment:scroll !important; } }
/* ─── N2 (přání Šéfa 2026-06-14): další themy vlastní pozadí. Prosím zachovat při přepisu. ───
   neon=světelné pruhy, matrix=zelený kód, synthwave=retro slunce, amber=oranžová akvarel. */
html[data-theme="neon"] body{
  background: linear-gradient(rgba(8,9,14,.46),rgba(8,9,14,.46)), url('/bg/neon.jpg') center center / cover no-repeat fixed, var(--dark, #050510) !important;
}
html[data-theme="matrix"] body{
  background: linear-gradient(rgba(8,9,14,.46),rgba(8,9,14,.46)), url('/bg/matrix.webp') center center / cover no-repeat fixed, #000 !important;
}
html[data-theme="synthwave"] body{
  background: linear-gradient(rgba(8,9,14,.46),rgba(8,9,14,.46)), url('/bg/synthwave.jpg') center center / cover no-repeat fixed, var(--dark, #0d0025) !important;
}
html[data-theme="amber"] body{
  background: linear-gradient(rgba(8,9,14,.46),rgba(8,9,14,.46)), url('/bg/amber.jpg') center center / cover no-repeat fixed, var(--dark, #100800) !important;
}
/* ─── N4: ocean=modrá voda, violet=fialový swirl, rose=růže (přání Šéfa 2026-06-14) ─── */
html[data-theme="ocean"] body{
  background: linear-gradient(rgba(8,9,14,.46),rgba(8,9,14,.46)), url('/bg/ocean.jpg') center center / cover no-repeat fixed, var(--dark, #000d1a) !important;
}
html[data-theme="violet"] body{
  background: linear-gradient(rgba(8,9,14,.46),rgba(8,9,14,.46)), url('/bg/violet.jpg') center center / cover no-repeat fixed, var(--dark, #08001a) !important;
}
html[data-theme="rose"] body{
  background: linear-gradient(rgba(8,9,14,.46),rgba(8,9,14,.46)), url('/bg/rose.jpg') center center / cover no-repeat fixed, var(--dark, #12000a) !important;
}
/* ─── N2: midnight = hvězdná noc nad jezerem (přání Šéfa 2026-06-14) ─── */
html[data-theme="midnight"] body{
  background: linear-gradient(rgba(8,9,14,.46),rgba(8,9,14,.46)), url('/bg/midnight.jpg') center center / cover no-repeat fixed, var(--dark, #000008) !important;
}
/* ─── N4: arctic = zasněžená krajina, toxic = zelené buňky (přání Šéfa 2026-06-14) ─── */
html[data-theme="arctic"] body{
  background: linear-gradient(rgba(8,9,14,.46),rgba(8,9,14,.46)), url('/bg/arctic.jpg') center center / cover no-repeat fixed, var(--dark, #00080f) !important;
}
html[data-theme="toxic"] body{
  background: linear-gradient(rgba(8,9,14,.46),rgba(8,9,14,.46)), url('/bg/toxic.jpg') center center / cover no-repeat fixed, #000 !important;
}
@media (pointer:coarse){
  html[data-theme="neon"] body, html[data-theme="matrix"] body,
  html[data-theme="synthwave"] body, html[data-theme="amber"] body,
  html[data-theme="ocean"] body, html[data-theme="violet"] body, html[data-theme="rose"] body,
  html[data-theme="midnight"] body, html[data-theme="arctic"] body, html[data-theme="toxic"] body{ background-attachment:scroll !important; }
}

/* ─── OBRÁZEK POZADÍ ON/OFF (Šéf 2026-06-14) ───
   html.no-bg-img → žádná fotka, jen barva ladící s aktuálním theme (z theme proměnných
   --dark2/--dark, takže se mění samo při změně theme). Přepíná JS přepínač v Nastavení
   (settings 'bgImage') + FOUC guard.
   Dvojitá třída (.no-bg-img.no-bg-img = specificita 0,2,2) ZÁMĚRNĚ — přebíjí každé
   html[data-theme="x"] body (0,1,2) bez ohledu na pořadí v souboru, i kdyby N2/N4
   přidali nové theme pozadí ZA toto pravidlo. NEsnižovat na jednu třídu. */
html.no-bg-img.no-bg-img body{
  background:
    radial-gradient(125% 125% at 50% 0%, var(--dark2, #0c0c18) 0%, var(--dark, #06060c) 72%) center / cover no-repeat fixed,
    var(--dark, #06060c) !important;
}
@media (pointer:coarse){ html.no-bg-img.no-bg-img body{ background-attachment:scroll, scroll !important; } }

/* ztlumit dekorativní overlaye ať foto prosvítá (Cloud má grid/aurora/scanlines) */
.bg-grid{ opacity:.18 !important; }
.scanlines{ opacity:.4 !important; }
body::before{ opacity:.45 !important; }

/* ═══════════════════════ GLASS POVRCHY ═══════════════════════ */
.card:not(.add-card),
.panel, .dropzone, .qitem, .cat, .upload-card,
.toast, .theme-pop, .ctx-menu, .controls, #folderSidebar{
  overflow:hidden;
  isolation:auto;                 /* NEizolovat → ::before backdrop vidí foto za prvkem */
  background:transparent !important;
  border:0 !important;
  border-radius:18px;
  box-shadow:0 6px 6px rgba(0,0,0,.2), 0 0 20px rgba(0,0,0,.1) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
/* position:relative JEN na in-flow plochy — pozicované overlaye (toast/ctx-menu/theme-pop/
   sidebar) si NECHÁVAJÍ svůj fixed/absolute, jinak vypadnou z ukotvení a rozbijí layout. */
.card:not(.add-card), .panel, .dropzone, .qitem, .cat, .upload-card, .controls{ position:relative; }
#folderSidebar{ border-radius:0 !important; }

/* ::before — čirá refrakční vrstva (snímek pozadí + displacement). Jen .lg-on (Chromium-desktop). */
.lg-on .card:not(.add-card)::before,
.lg-on .panel::before, .lg-on .dropzone::before, .lg-on .qitem::before,
.lg-on .cat::before, .lg-on .upload-card::before,
.lg-on .toast::before, .lg-on .theme-pop::before, .lg-on .ctx-menu::before,
.lg-on .controls::before, .lg-on #folderSidebar::before{
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
  -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
  filter:url(#lg-dist);
  isolation:isolate;
}

/* ::after — bílý overlay + bílý specular lesk (přesně demo hodnoty) */
.card:not(.add-card)::after,
.panel::after, .dropzone::after, .qitem::after, .cat::after, .upload-card::after,
.toast::after, .theme-pop::after, .ctx-menu::after, .controls::after, #folderSidebar::after{
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
  background:var(--lg-bg-color);
  /* rovnoměrný skleněný okraj + měkký vrchní lesk — žádná ostrá tečka v rohu */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lg-highlight) 36%, transparent),
    inset 1px 1px 5px -1px var(--lg-highlight);
}

/* obsah NAD sklem (ostrý) */
.panel > *, .dropzone > *, .qitem > *, .cat > *, .upload-card > *,
.toast > *, .theme-pop > *, .ctx-menu > *, .controls > *, #folderSidebar > *{ position:relative; z-index:1; }
/* karty (Cloud) — flow obsah; absolutní overlaye/odznaky zvlášť */
.card:not(.add-card) > .card-icon, .card:not(.add-card) > .folder-icon,
.card:not(.add-card) > .card-title, .card:not(.add-card) > .card-content,
.card:not(.add-card) > .card-meta, .card:not(.add-card) > .card-actions,
.card:not(.add-card) > .preview-wrap, .card:not(.add-card) > .video-thumb,
.card:not(.add-card) > .file-preview, .card:not(.add-card) > img{ position:relative; z-index:1; }
.card > .select-overlay, .card > .card-checkbox, .card > .top-badges,
.card > .share-badge, .card > .tag-badge, .card .pin-badge{ z-index:2; }

/* Karty = PŘESNĚ demo sklo (čistý bílý overlay .25, žádný barevný tint co zamlžuje refrakci).
   Per-tile barva se drží jen na nadpisu/ikoně (inline CSS Cloudu) — sklo zůstává křišťálové. */
.card[data-color="magenta"] .card-title, .card[data-color="magenta"] .card-icon{ color:#ff66c2; }
.card[data-color="green"]   .card-title, .card[data-color="green"]   .card-icon{ color:#5bffb0; }
.card[data-color="orange"]  .card-title, .card[data-color="orange"]  .card-icon{ color:#ffae66; }
.card[data-color="yellow"]  .card-title, .card[data-color="yellow"]  .card-icon{ color:#ffef66; }
.card.folder-card .card-title, .card.folder-card .folder-icon{ color:#ffd866; }

/* add-card — průsvitné, bez vrstev, bez blur */
.card.add-card{ background:rgba(255,255,255,.08) !important; }

/* ═══════════════════════ TLAČÍTKA & INPUTY — bílý overlay + specular (BEZ blur) ═══════════════════════ */
.btn, .seg button, .tabs button, .theme-btn, .iconbtn, .preset,
.back-btn, .cpy, .toolbar-btn, .len-presets button, .styck, .fsb-action, .sidebar-toggle{
  background:var(--lg-bg-color) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  color:#fff !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lg-highlight) 36%, transparent),
    inset 1px 1px 5px -1px var(--lg-highlight),
    0 4px 12px -4px rgba(0,0,0,.35) !important;
}
.btn:hover, .seg button:hover, .tabs button:hover, .theme-btn:hover, .iconbtn:hover,
.preset:hover, .fsb-action:hover, .sidebar-toggle:hover{
  background:rgba(255,255,255,.36) !important;
  border-color:rgba(255,255,255,.5) !important;
}
.btn-primary, .seg button.on, .tabs button.on, .seg button[aria-selected="true"]{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--cyan,#00f5ff) 45%, var(--lg-bg-color)),
    color-mix(in srgb,var(--magenta,#ff1a6e) 40%, var(--lg-bg-color))) !important;
}

input[type=text], input[type=password], input[type=number], input[type=search],
textarea, select, .inp, .txtinp{
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.4) !important;
  color:#fff;
}
input:focus, textarea:focus, select:focus, .inp:focus{
  border-color:color-mix(in srgb,var(--cyan,#00f5ff) 55%, transparent) !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.4),
             0 0 0 3px color-mix(in srgb,var(--cyan,#00f5ff) 16%, transparent) !important;
}

/* ═══════════════════════ FOLDERS SIDEBAR — sklo ═══════════════════════ */
#folderSidebar .fsb-header, #folderSidebar .fsb-actions{ border-bottom-color:rgba(255,255,255,.18) !important; }
.fsb-row{ position:relative; z-index:1; }
.fsb-row:hover{ background:rgba(255,255,255,.16) !important; color:#fff !important; }
.fsb-row.active{ background:rgba(255,255,255,.22) !important; color:#fff !important; }
.fsb-divider{ background:rgba(255,255,255,.18) !important; }

/* ═══════════════ VNITŘNÍ TMAVÉ PRVKY → glass (jen background+box-shadow, layout-safe) ═══════════════
   Boxy, výsledková/odhad pole, slidery, keypad, toggly. MĚNÍM jen barvu+lesk, NE position/
   overflow/display → nemůže rozbít layout. Barevné vzorky (.theme-opt, color inputy) vynechány. */
.calc-screen, .calc-pad button, .rem-cell,
.mc-out, .mc-json, .mc-preview, .mc-ta, .mc-cell, .mc-sw,
.css-out, .fmt,
.ai-box, .crack-cell, .out-wrap, .subcard, .brow, .len-presets button, .bar-track,
.q-btn, .q-ico, .tog{
  background: var(--lg-bg-color) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lg-highlight) 36%, transparent), inset 1px 1px 5px -1px var(--lg-highlight) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.calc-pad button:hover, .brow:hover, .q-btn:hover, .len-presets button:hover, .mc-sw:hover, .tog:hover,
.fmt:hover, .crack-cell:hover{ background:rgba(255,255,255,.36) !important; border-color:rgba(255,255,255,.5) !important; }
/* slider thumb (decimal places / length) – světlý glassy puntík */
input[type=range]{ accent-color:#fff; }

/* hover lift na povrchech */
.card:not(.add-card):hover, .panel:hover, .dropzone:hover, .qitem:hover, .cat:hover{
  box-shadow:0 8px 12px rgba(0,0,0,.25),
             0 0 26px color-mix(in srgb, var(--cyan,#00f5ff) 30%, transparent) !important;
}

/* ─── gradient scrollbar (jednotný) ─── */
*{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--cyan,#00f5ff) 55%,transparent) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--cyan,#00f5ff),var(--magenta,#ff1a6e)); border-radius:20px; border:2px solid transparent; background-clip:padding-box; }

/* ── lg-readability (N4, přání Šéfa 2026-06-14): text-shadow pro čitelnost nad fotem ── */
body{ text-shadow:0 1px 3px rgba(0,0,0,.82), 0 0 2px rgba(0,0,0,.55); }
/* inputy/tlačítka bez stínu (čistý text v poli) */
input, textarea, select, .btn, .seg button, .tabs button{ text-shadow:none; }