/* public/style.css
============================================================
 Neti∞n Store – Liquid Glass vNext (ULTRA)
 - fixed/pinned background (scrollt NICHT mit)
 - echte Glow-Layer (korrekte Pseudo-Elemente)
 - modernere Typo, bessere Abstände, mehr Tiefe
 - strong glass + soft borders + crisp focus
 - store + app + admin compatible
============================================================ */

/* ============================================================
   TOKENS
============================================================ */
:root{
  /* Base */
  --bg0:#f5f7ff;
  --bg1:#ffffff;

  --text:rgba(10,14,25,.92);
  --text2:rgba(10,14,25,.64);
  --text3:rgba(10,14,25,.44);

  /* Glass */
  --glass:rgba(255,255,255,.60);
  --glass2:rgba(255,255,255,.46);
  --glass3:rgba(255,255,255,.32);

  /* Strokes */
  --border:rgba(255,255,255,.62);
  --border2:rgba(20,30,55,.14);
  --border3:rgba(20,30,55,.10);

  /* Depth */
  --shadow:0 22px 80px rgba(10,14,25,.18);
  --shadow2:0 12px 40px rgba(10,14,25,.12);
  --shadow3:0 8px 22px rgba(10,14,25,.09);
  --inset:inset 0 1px 0 rgba(255,255,255,.70);

  /* Accent */
  --accent:#2f7cff;
  --accent2:#8b5cff;
  --ok:#2bd67b;
  --warn:#ffb020;
  --bad:#ff4d6d;

  /* Radius */
  --radius-xl:26px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:12px;

  /* FX */
  --blur:18px;
  --blur2:24px;

  --focus:0 0 0 3px rgba(47,124,255,.22);
  --focus2:0 0 0 4px rgba(139,92,255,.18);

  --ring:rgba(255,255,255,.58);
  --ring2:rgba(255,255,255,.36);

  --ease:cubic-bezier(.2,.9,.2,1);
  --ease2:cubic-bezier(.2,.8,.2,1);

  /* Layout */
  --pageMax:1200px;
  --appMax:880px;
  --adminMax:1500px;

  /* Topbar height hint */
  --topbarH:72px;
}

/* DARK MODE */
:root[data-theme="dark"]{
  --bg0:#070913;
  --bg1:#0b0e1a;

  --text:rgba(245,247,255,.92);
  --text2:rgba(245,247,255,.62);
  --text3:rgba(245,247,255,.42);

  --glass:rgba(15,18,33,.58);
  --glass2:rgba(15,18,33,.44);
  --glass3:rgba(15,18,33,.32);

  --border:rgba(255,255,255,.12);
  --border2:rgba(255,255,255,.09);
  --border3:rgba(255,255,255,.07);

  --shadow:0 26px 90px rgba(0,0,0,.58);
  --shadow2:0 14px 44px rgba(0,0,0,.44);
  --shadow3:0 10px 28px rgba(0,0,0,.36);
  --inset:inset 0 1px 0 rgba(255,255,255,.08);

  --accent:#5ab0ff;
  --accent2:#a18bff;
  --ok:#39e38a;
  --warn:#ffb74a;
  --bad:#ff5a7a;

  --ring:rgba(255,255,255,.16);
  --ring2:rgba(255,255,255,.11);
}

/* ============================================================
   RESET / BASE
============================================================ */
*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ height:100%; }

html{
  background:var(--bg1);
  color-scheme:light dark;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
}

body{
  margin:0;
  min-height:100%;
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  overflow-x:hidden;

  /* PINNED BACKGROUND */
  background:
    radial-gradient(900px 650px at 15% 10%, rgba(47,124,255,.18), transparent 60%),
    radial-gradient(850px 700px at 85% 25%, rgba(139,92,255,.16), transparent 60%),
    radial-gradient(900px 750px at 40% 95%, rgba(43,214,123,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-attachment:fixed,fixed,fixed,fixed;
  background-repeat:no-repeat;
  background-size:auto,auto,auto,cover;
  background-position:15% 10%,85% 25%,40% 95%,0 0;
}

/* echte Glow-Layer (valid CSS, keine „Pseudoception“) */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:-25%;
  pointer-events:none;
  z-index:-2;
}

body::before{
  background:
    radial-gradient(closest-side at 22% 30%, rgba(47,124,255,.22), transparent 62%),
    radial-gradient(closest-side at 78% 36%, rgba(139,92,255,.18), transparent 62%),
    radial-gradient(closest-side at 55% 82%, rgba(43,214,123,.12), transparent 64%);
  filter:blur(62px);
  opacity:.28;
  animation:floaty 22s ease-in-out infinite;
}

body::after{
  z-index:-3;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px);
  opacity:.07;
  mix-blend-mode:soft-light;
}

@keyframes floaty{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(2%,-2%,0) scale(1.06); }
}

a{ color:inherit; }
img{ max-width:100%; }
button,input,textarea,select{ font:inherit; }
::selection{ background:rgba(47,124,255,.22); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  body::before{ animation:none; }
  *{ transition:none!important; animation:none!important; }
}

/* ============================================================
   TYPO
============================================================ */
h1,h2,h3{
  letter-spacing:.2px;
}
h2{
  margin:22px 0 10px;
  font-size:18px;
}
p{ margin:0; }

/* ============================================================
   GLASS HELPERS
============================================================ */
.glass{
  background:linear-gradient(180deg,var(--glass),var(--glass2));
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
}
.glass2{
  background:linear-gradient(180deg,var(--glass2),var(--glass3));
  border:1px solid var(--border2);
  box-shadow:var(--shadow3);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass,.glass2{
    background:rgba(255,255,255,.88);
  }
  :root[data-theme="dark"] .glass,
  :root[data-theme="dark"] .glass2{
    background:rgba(12,14,24,.88);
  }
}

.card{
  border-radius:var(--radius-xl);
  padding:16px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:radial-gradient(900px 280px at 18% 0%, rgba(255,255,255,.48), transparent 55%);
  opacity:.22;
}
:root[data-theme="dark"] .card::before{
  background:radial-gradient(900px 280px at 18% 0%, rgba(255,255,255,.18), transparent 55%);
  opacity:.20;
}

.subtle{ color:var(--text2); font-size:13px; }
.stack{ display:grid; gap:2px; }

/* ============================================================
   TOPBAR
============================================================ */
.topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  min-height:var(--topbarH);

  background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.22));
  border-bottom:1px solid rgba(255,255,255,.40);
  box-shadow:0 10px 36px rgba(10,14,25,.10);

  backdrop-filter:blur(var(--blur2));
  -webkit-backdrop-filter:blur(var(--blur2));
}
:root[data-theme="dark"] .topbar{
  background:linear-gradient(180deg, rgba(10,12,22,.45), rgba(10,12,22,.28));
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 48px rgba(0,0,0,.40);
}

.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(900px 220px at 20% 0%, rgba(255,255,255,.26), transparent 55%);
  opacity:.35;
}
:root[data-theme="dark"] .topbar::before{ opacity:.20; }

.topbar-left{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0;
}

.topbar-icon{
  width:42px;
  height:42px;
  object-fit:contain;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.16);
}

.header{
  margin:0;
  font-size:20px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.topbar-right{
  display:flex;
  gap:10px;
  align-items:center;
}

/* ============================================================
   BUTTONS / INPUTS / FOCUS
============================================================ */
:focus{ outline:none; }
:focus-visible{ box-shadow:var(--focus); border-radius:12px; }

.icon-btn,
.btn{
  border-radius:999px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--glass),var(--glass3));
  box-shadow:var(--shadow3);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  transition:transform .12s var(--ease), filter .12s var(--ease), box-shadow .12s var(--ease), opacity .12s var(--ease);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
}

.icon-btn{ padding:9px 12px; }
.btn{ padding:10px 14px; font-weight:800; }

.icon-btn:hover,
.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:var(--shadow2);
}
.icon-btn:active,
.btn:active{ transform:translateY(0) scale(.99); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

.btn-primary{
  border:1px solid rgba(255,255,255,.30);
  background:
    radial-gradient(120% 200% at 20% 0%, rgba(255,255,255,.40), transparent 45%),
    linear-gradient(135deg, rgba(47,124,255,.96), rgba(139,92,255,.92));
  color:#fff;
}

.btn-danger{
  border:1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(120% 200% at 20% 0%, rgba(255,255,255,.28), transparent 45%),
    linear-gradient(135deg, rgba(255,77,109,.96), rgba(255,176,32,.62));
  color:#fff;
}

.btn-ghost{
  border:1px solid var(--border2);
  background:linear-gradient(180deg,var(--glass2),var(--glass3));
}

.btn-small{ padding:8px 12px; font-size:13px; }

.private-btn{ opacity:.35; }
.private-btn:hover{ opacity:.95; }

input,textarea,select{
  width:100%;
  border-radius:14px;
  border:1px solid var(--border2);
  background:linear-gradient(180deg,var(--glass2),var(--glass3));
  color:var(--text);
  padding:10px 12px;
  outline:none;
  box-shadow:var(--inset);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
}
textarea{ min-height:92px; resize:vertical; line-height:1.45; }

input:focus-visible,textarea:focus-visible,select:focus-visible{
  box-shadow:var(--focus);
}

code{
  padding:2px 7px;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.08);
}
:root[data-theme="dark"] code{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.10);
}

/* ============================================================
   BADGES / PILLS
============================================================ */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:650;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.26);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
}
:root[data-theme="dark"] .badge{
  border-color:rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
}
.badge-soft{
  background:rgba(0,0,0,.06);
  border-color:rgba(0,0,0,.08);
  color:var(--text2);
}
:root[data-theme="dark"] .badge-soft{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.10);
}
.badge-tag{ opacity:.95; }

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:750;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
}
:root[data-theme="dark"] .pill{
  border-color:rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
}
.pill-soft{
  color:var(--text2);
  background:rgba(0,0,0,.06);
  border-color:rgba(0,0,0,.08);
}
:root[data-theme="dark"] .pill-soft{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.10);
}
.pill-link{
  text-decoration:none;
  color:var(--text);
  transition:transform .12s var(--ease), filter .12s var(--ease);
}
.pill-link:hover{ transform:translateY(-1px); filter:brightness(1.05); }

/* ============================================================
   STORE (index.html)
============================================================ */
.main-layout{
  max-width:var(--pageMax);
  margin:0 auto;
  padding:18px 18px 44px;
}

.controls{ display:grid; gap:14px; margin:14px 0 18px; }

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.filters label{
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--text2);
  font-size:13px;
}
.filters select{
  border-radius:999px;
  padding:9px 12px;
  width:auto;
}
.result-count{ margin-left:auto; color:var(--text2); font-size:13px; }

.search-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:linear-gradient(180deg,var(--glass2),var(--glass3));
  box-shadow:var(--shadow3);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  transition:box-shadow .12s var(--ease), transform .12s var(--ease);
}
.search-pill:focus-within{
  box-shadow:var(--shadow2), var(--focus);
  transform:translateY(-1px);
}

.search-pill input{
  border:none;
  background:transparent;
  box-shadow:none;
  padding:6px 0;
  border-radius:0;
}
.search-pill input:focus{ box-shadow:none; }
.search-ico{ color:var(--text2); font-weight:900; }

.pill-btn{
  border-radius:999px;
  border:1px solid var(--border2);
  background:linear-gradient(180deg,var(--glass2),var(--glass3));
  box-shadow:var(--shadow3);
  padding:8px 10px;
  cursor:pointer;
  color:var(--text);
  transition:transform .12s var(--ease), filter .12s var(--ease);
}
.pill-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.pill-btn:active{ transform:translateY(0) scale(.99); }

.app-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
  gap:18px;
}

@keyframes cardIn{
  from{ opacity:0; transform:translateY(12px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.app-card{
  border-radius:var(--radius-xl);
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--glass),var(--glass2));
  box-shadow:var(--shadow2);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  overflow:hidden;
  cursor:pointer;
  transition:transform .14s var(--ease), box-shadow .14s var(--ease), filter .14s var(--ease);

  opacity:0;
  transform:translateY(10px) scale(.985);
  animation:cardIn .55s var(--ease) forwards;
  animation-delay:calc(var(--i, 0) * 35ms);
}
.app-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:radial-gradient(900px 240px at 18% 0%, rgba(255,255,255,.42), transparent 55%);
  opacity:.18;
}
:root[data-theme="dark"] .app-card::before{ opacity:.14; }

@media (prefers-reduced-motion:reduce){
  .app-card{ animation:none; opacity:1; transform:none; }
}

.app-card:hover{
  transform:translateY(-5px) scale(1.012);
  box-shadow:var(--shadow);
  filter:brightness(1.03);
}
.app-card:focus-visible{ box-shadow:var(--shadow), var(--focus2); }

.app-icon-wrapper{
  padding:12px 12px 0;
  display:flex;
  justify-content:center;
}
.app-icon{
  width:100%;
  aspect-ratio:1;
  object-fit:contain;
  border-radius:18px;
  background:rgba(0,0,0,.05);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 14px 34px rgba(0,0,0,.10);
}
:root[data-theme="dark"] .app-icon{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}

.app-card-body{
  padding:10px 14px 14px;
  display:grid;
  gap:6px;
}
.app-card-title-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.app-card-title{ margin:0; font-size:16px; }
.app-card-dev{ margin:0; color:var(--text2); font-size:13px; }
.app-card-meta{ margin:0; color:var(--text2); font-size:12px; }
.app-card-desc{ margin:4px 0 0; font-size:13px; line-height:1.35; }

.tag-holder{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}

.card-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.no-results{
  margin-top:20px;
  padding:18px;
  border-radius:var(--radius-xl);
  border:1px dashed rgba(255,255,255,.45);
  background:linear-gradient(180deg,var(--glass2),var(--glass3));
  box-shadow:var(--shadow2);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  text-align:center;
}

/* ============================================================
   APP DETAILS (app.html)
============================================================ */
.app-page{
  max-width:var(--appMax);
  margin:0 auto;
  padding:22px 18px 48px;
}

.back-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--glass),var(--glass3));
  box-shadow:var(--shadow3);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  color:var(--text);
  text-decoration:none;
  transition:transform .12s var(--ease), filter .12s var(--ease), box-shadow .12s var(--ease);
  white-space:nowrap;
}
.back-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:var(--shadow2); }
.back-btn:active{ transform:translateY(0) scale(.99); }

.app-header{
  display:grid;
  grid-template-columns:112px 1fr;
  gap:16px;
  align-items:center;
  padding:18px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--glass),var(--glass2));
  box-shadow:var(--shadow2);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  border-radius:var(--radius-xl);
  position:relative;
  overflow:hidden;
}
.app-header::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:radial-gradient(900px 280px at 12% 0%, rgba(255,255,255,.55), transparent 58%);
  opacity:.20;
}
:root[data-theme="dark"] .app-header::after{ opacity:.16; }

.app-header-icon{
  width:112px;
  height:112px;
  border-radius:24px;
  object-fit:contain;
  background:rgba(0,0,0,.05);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 18px 52px rgba(10,14,25,.16);
}
:root[data-theme="dark"] .app-header-icon{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 18px 52px rgba(0,0,0,.58);
}

.app-header-text h1{ margin:0; font-size:26px; }
.app-header-text p{ margin:4px 0 10px; color:var(--text2); font-size:13px; }
.header-tags{ display:flex; flex-wrap:wrap; gap:8px; }

/* Download button + progress */
.download-btn{
  position:relative;
  overflow:hidden;
  display:block;
  margin:16px 0 16px;
  padding:14px 16px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.34);
  color:#fff;
  font-weight:900;
  letter-spacing:.2px;
  box-shadow:var(--shadow);
  background:
    radial-gradient(120% 220% at 18% 0%, rgba(255,255,255,.38), transparent 45%),
    linear-gradient(135deg, rgba(47,124,255,.96), rgba(139,92,255,.92));
  transition:transform .12s var(--ease), filter .12s var(--ease), box-shadow .12s var(--ease), opacity .12s var(--ease);
}
.download-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
  box-shadow:0 22px 78px rgba(10,14,25,.18);
}
.download-btn:active{ transform:translateY(0) scale(.99); }
.download-btn.disabled{ opacity:.60; pointer-events:none; }

.download-btn.downloading{
  background:
    radial-gradient(120% 220% at 18% 0%, rgba(255,255,255,.30), transparent 45%),
    linear-gradient(135deg, rgba(43,214,123,.92), rgba(47,124,255,.92));
}
.download-btn.downloading::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:55%;
  height:100%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 100%);
  animation:dl-shine 1.25s ease-in-out infinite;
}
@keyframes dl-shine{ 0%{ left:-120%; } 100%{ left:135%; } }

.download-progress{
  position:absolute;
  left:0;
  bottom:0;
  height:4px;
  width:0%;
  background:rgba(255,255,255,.78);
  transition:width .1s linear;
  box-shadow:0 0 18px rgba(255,255,255,.35);
}
.download-preload{
  display:none;
  position:absolute;
  left:-100%;
  bottom:0;
  height:4px;
  width:100%;
  background:rgba(255,255,255,.55);
  animation:dl-preload 1.0s linear infinite;
  opacity:.7;
}
@keyframes dl-preload{ 0%{ left:-100%; } 100%{ left:100%; } }

/* Meta / desc / extra */
.meta-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px 14px;
  padding:16px;
  border-radius:var(--radius-xl);
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--glass),var(--glass2));
  box-shadow:var(--shadow2);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  font-size:14px;
}
.meta-row b{ font-weight:900; }

.desc-box,
.extra-box{
  margin-top:12px;
  padding:16px;
  border-radius:var(--radius-xl);
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--glass),var(--glass2));
  box-shadow:var(--shadow2);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  line-height:1.6;
}

.desc-box a,
.extra-box a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}

.hint{ color:var(--text2); font-size:13px; }

/* Downloads list */
.downloads-list{
  list-style:none;
  padding:0;
  margin:10px 0 0;
  display:grid;
  gap:10px;
}
.downloads-list li{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--glass),var(--glass2));
  box-shadow:var(--shadow3);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
}
.downloads-list a{
  color:var(--accent);
  text-decoration:none;
  font-weight:900;
  word-break:break-all;
}
.downloads-list a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}
.downloads-size{
  color:var(--text2);
  font-size:12px;
  white-space:nowrap;
}

/* Extra “all keys” */
.extra-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px 14px;
}
.quick-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.kvgrid{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.kvrow{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:10px;
  align-items:start;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border2);
  background:linear-gradient(180deg,var(--glass2),var(--glass3));
  box-shadow:var(--shadow3);
}
.kvk{ color:var(--text2); font-weight:900; font-size:12px; padding-top:2px; }
.kvv{ font-size:13px; }
.kvv-multi{ line-height:1.55; }

/* Changelog */
.changelog{
  margin-top:12px;
  border-radius:16px;
  border:1px solid var(--border2);
  background:linear-gradient(180deg,var(--glass2),var(--glass3));
  box-shadow:var(--shadow3);
  overflow:hidden;
}
.changelog summary{
  cursor:pointer;
  user-select:none;
  padding:12px 14px;
  font-weight:950;
}
.changelog-box{
  padding:0 14px 14px;
  color:var(--text);
  line-height:1.6;
}

/* ============================================================
   GALLERY (app.html)
============================================================ */
.gallery-section{ margin:22px 0 18px; }

.gallery-wrapper{
  position:relative;
  width:100%;
  height:420px;
  border-radius:var(--radius-xl);
  overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--glass2),var(--glass3));
  box-shadow:var(--shadow);
  backdrop-filter:blur(calc(var(--blur) + 6px));
  -webkit-backdrop-filter:blur(calc(var(--blur) + 6px));
}

.gallery-viewport{
  width:100%;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.gallery-track{
  display:flex;
  height:100%;
  transition:transform .35s var(--ease2);
}

.gallery-track > *{
  flex:0 0 100%;
  width:100%;
  height:100%;
  object-fit:contain;
  background:rgba(0,0,0,.85);
}

.gallery-video,
.gallery-image{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:rgba(0,0,0,.85);
}

.gallery-arrow{
  z-index:3;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:32px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:transform .12s var(--ease), filter .12s var(--ease), background .12s var(--ease);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
}
.gallery-arrow:hover{
  background:rgba(0,0,0,.52);
  filter:brightness(1.05);
  transform:translateY(-50%) scale(1.05);
}
.gallery-left{ left:12px; }
.gallery-right{ right:12px; }

/* ============================================================
   LIGHTBOX (app.html)
============================================================ */
.lightbox.hidden{ display:none; }

.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
}

.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  cursor:zoom-out;
}

#lightbox-content{
  position:relative;
  z-index:2;
  max-width:95vw;
  max-height:95vh;
  display:grid;
  place-items:center;
}

.lightbox-img,
.lightbox-video{
  max-width:95vw;
  max-height:95vh;
  object-fit:contain;
  background:rgba(0,0,0,.92);
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 140px rgba(0,0,0,.70);
}

.lightbox-img{ cursor:zoom-out; }

.lightbox-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:62px;
  height:62px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:40px;
  cursor:pointer;
  transition:transform .12s var(--ease), background .12s var(--ease);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
}
.lightbox-arrow:hover{
  background:rgba(0,0,0,.58);
  transform:translateY(-50%) scale(1.05);
}
.lb-left{ left:26px; }
.lb-right{ right:26px; }

/* ============================================================
   ADMIN (admin.html) — kompatibel gelassen
   (deine vorhandenen Klassen bleiben gültig)
============================================================ */
.admin-shell{
  max-width:var(--adminMax);
  margin:0 auto;
  padding:0 18px 40px;
}

.admin-layout{
  margin:16px auto 40px;
  display:grid;
  grid-template-columns:340px 1fr;
  gap:18px;
}

.panel{
  border-radius:var(--radius-xl);
  overflow:hidden;
}
.panel-tree{ max-height:calc(100vh - 120px); display:flex; flex-direction:column; }
.panel-editor{ min-height:calc(100vh - 120px); }

/* Tree top */
.tree-top{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border-bottom:1px solid var(--border2);
}

.tree-actions{ display:flex; gap:10px; justify-content:flex-end; }
.tree-hint{ padding:0 14px 12px; color:var(--text2); font-size:12px; }

kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Cascadia Mono","Segoe UI Mono",monospace;
  font-size:11px;
  padding:2px 6px;
  border-radius:8px;
  background:rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.10);
}
:root[data-theme="dark"] kbd{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.10); }

.tree-list{ padding:14px; overflow:auto; scroll-behavior:smooth; }

.tree-dev{
  border:1px solid rgba(255,255,255,.35);
  border-radius:16px;
  padding:10px 12px;
  background:linear-gradient(180deg,var(--glass2),var(--glass3));
  box-shadow:var(--shadow3);
  margin-bottom:10px;
}
:root[data-theme="dark"] .tree-dev{ border-color:rgba(255,255,255,.10); }

.tree-dev summary{
  cursor:pointer;
  font-weight:950;
  user-select:none;
  list-style:none;
}
.tree-dev summary::-webkit-details-marker{ display:none; }

.app-btn{
  width:100%;
  margin-top:8px;
  text-align:left;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  color:var(--text);
  box-shadow:var(--shadow3);
  cursor:pointer;
  transition:transform .12s var(--ease), filter .12s var(--ease), box-shadow .12s var(--ease);
}
:root[data-theme="dark"] .app-btn{
  background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12));
  border-color:rgba(255,255,255,.10);
}
.app-btn:hover{ transform:translateY(-1px); filter:brightness(1.04); }
.app-btn.active{ box-shadow:var(--shadow), var(--focus2); }

/* Editor top */
.editor-top{
  padding:16px;
  border-bottom:1px solid var(--border2);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.editor-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
#title{ margin:0; font-size:18px; }
#subtitle{ margin-top:4px; }

/* Small utils */
hr{ border:none; border-top:1px solid var(--border2); margin:14px 0; }

::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(47,124,255,.22), rgba(139,92,255,.18));
  border:3px solid rgba(0,0,0,0);
  background-clip:padding-box;
  border-radius:999px;
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(90,176,255,.22), rgba(161,139,255,.18));
  border:3px solid rgba(0,0,0,0);
  background-clip:padding-box;
}
::-webkit-scrollbar-track{ background:transparent; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 920px){
  .admin-layout{ grid-template-columns:1fr; }
  .panel-tree{ max-height:unset; }

  .app-header{ grid-template-columns:1fr; }
  .meta-row{ grid-template-columns:1fr; }
  .downloads-size{ white-space:normal; text-align:right; }
  .gallery-wrapper{ height:320px; }
  .extra-grid{ grid-template-columns:1fr; }
  .kvrow{ grid-template-columns:1fr; }
}

@media (max-width: 520px){
  .topbar{ padding:12px 12px; }
  .topbar-icon{ width:38px; height:38px; border-radius:12px; }
  .header{ font-size:18px; }
  .app-grid{ grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); }
  .downloads-list li{ grid-template-columns:1fr; border-radius:18px; }
}

/* ============================================================
   END
============================================================ */