/* Fern Library – Layout: Topbar, Filterleiste, Raster, Detail-Panel, Upload, Meine Uploads, Verwaltung. */

:root { --sidebar-w: 248px; --detail-w: 460px; --tile: 200px; }

/* ---------- Topbar ---------- */
.topbar { position: sticky; top: 0; z-index: 40; }
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--lg-sheen), rgba(10,11,14,.9);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border-bottom: 1px solid var(--glass-border);
  opacity: 0; transition: opacity .2s ease;
}
html.scrolled .topbar::before { opacity: 1; }
.topbar-inner {
  position: relative; z-index: 1;
  min-height: var(--topbar-h); padding: 12px 24px;
  display: flex; align-items: center; gap: 16px;
}
.brand {
  /* baseline: Unterkante der Wortmarke = Grundlinie von „Library“ */
  flex: none; display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--fg);
  font-family: var(--font-display); font-weight: 650; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap;
  width: calc(var(--sidebar-w) - 16px);
}
/* Wortmarke als Maske: so lässt sie sich einfärben – beim Hovern Fern-Grün mit Glühen */
.brand-word {
  display: inline-block; height: 26px; aspect-ratio: 183 / 96; background-color: var(--fg);
  -webkit-mask: url(/icons/fern-wordmark.png) center / contain no-repeat;
  mask: url(/icons/fern-wordmark.png) center / contain no-repeat;
  transition: background-color .25s ease;
}
/* Glühen auf der Hülle – an der Wortmarke selbst würde die Maske den Schein wegschneiden */
.brand-glow { display: inline-block; transition: filter .25s ease; }
.brand:hover .brand-word, .brand:focus-visible .brand-word { background-color: var(--accent); }
.brand:hover .brand-glow, .brand:focus-visible .brand-glow {
  filter: drop-shadow(0 0 4px rgba(0,255,73,.9)) drop-shadow(0 0 12px rgba(0,255,73,.6)) drop-shadow(0 0 26px rgba(0,255,73,.35));
}
.brand-lib { color: var(--muted); font-weight: 500; transition: color .25s ease, text-shadow .25s ease; }
.brand:hover .brand-lib, .brand:focus-visible .brand-lib {   /* „Library“ glüht mit, aber schwächer */
  color: var(--accent-2); text-shadow: 0 0 10px rgba(0,255,73,.35);
}
.ic-logo { object-fit: contain; }
.search {
  position: relative; flex: 1 1 auto; min-width: 0; max-width: 860px;
  display: flex; align-items: center;
}
.search > .ic { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.search-input {
  width: 100%; height: 50px; padding: 0 48px 0 48px; font-size: 16px;
  border-radius: 999px; color: var(--fg);
  background: var(--lg-sheen), rgba(24,26,31,.7);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px .5px rgba(255,255,255,.2), inset 0 -1px 1px rgba(0,0,0,.3), 0 10px 30px -18px rgba(0,0,0,.9);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-input::placeholder { color: var(--faint); }
.search-input:focus { outline: none; border-color: rgba(111,160,255,.6); box-shadow: inset 0 1px .5px rgba(255,255,255,.2), 0 0 0 4px var(--accent-soft), 0 10px 30px -18px rgba(0,0,0,.9); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-clear { position: absolute; right: 6px; width: 38px; height: 38px; }
.top-actions { flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto; }
.bl-pill {
  appearance: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px;
  border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap;
  background: var(--lg-sheen), rgba(26,28,34,.55); border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px .5px rgba(255,255,255,.28), inset 0 -1px 1px rgba(0,0,0,.3);
}
.bl-pill:hover { color: var(--fg); }
.bl-pill .ic { width: 18px; height: 18px; }
.bl-pill .dot { background: var(--faint); }
.bl-pill.on { color: var(--fg); }
.bl-pill.on .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.bl-pill.update { color: var(--fg); border-color: rgba(251,191,36,.45); }
.bl-pill.update .dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.addon-ver { font-variant-numeric: tabular-nums; }

/* ---------- Banner (Admin: KI-Schlüssel fehlt) ---------- */
.banner-slot { padding: 0 24px; }
.banner-slot:empty { display: none; }
.banner { margin: 4px 0 8px; }
.banner .btn { flex: none; margin-left: auto; }

/* ---------- Stöbern: Filterleiste + Ergebnisse ---------- */
.browse { display: flex; align-items: flex-start; gap: 24px; padding: 8px 24px 80px; }
html.has-detail .browse, html.has-detail .page { margin-right: var(--detail-w); }
/* Glasfläche außen, Scrollbereich innen: die Scrollleiste sitzt mit Abstand im Glas, die runden Ecken bleiben sauber */
.filters-panel {
  flex: none; width: var(--sidebar-w); display: flex; flex-direction: column; overflow: hidden;
  position: sticky; top: calc(var(--topbar-h) + 4px);
  max-height: calc(100vh - var(--topbar-h) - 16px);
  /* Liquid Glass; die starke Unschärfe verwischt das Hintergrund-Raster, es läuft nicht sichtbar durch die Filter */
  padding: 12px 6px 12px 0;
  background: var(--lg-sheen), var(--glass);
  border: 1px solid var(--lg-border); border-radius: var(--r-lg);
  box-shadow: var(--lg-shadow);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
}
.filters-panel > .filters {
  min-height: 0; overflow-y: auto; padding: 0 8px 8px 14px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent;
}
.facet { padding: 12px 0 10px; border-top: 1px solid var(--line); }
.facet:first-child { border-top: 0; padding-top: 4px; }
.facet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.facet-head .link-btn { font-size: 12.5px; padding: 0; }
.facet-list { display: flex; flex-direction: column; gap: 1px; }
.facet-item {
  appearance: none; border: 0; background: none; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 4px 10px; border-radius: 10px;
  font-size: 14px; color: var(--fg);
}
.facet-item:hover { background: var(--surface-2); }
.facet-item[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-2); box-shadow: inset 0 0 0 1px rgba(0,255,73,.35); }
.facet-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-item .count { flex: none; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.facet-item[aria-pressed="true"] .count { color: var(--accent-2); }
.facet-item.zero { opacity: .45; }
.facet-more { margin-top: 4px; font-size: 13px; padding: 2px 10px; }
.facet-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; }
.color-btn {
  appearance: none; border: 1px solid transparent; background: none; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 4px;
}
.color-btn:hover { background: var(--surface-2); }
.color-btn .cdot { width: 22px; height: 22px; }
.color-btn .count { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.color-btn[aria-pressed="true"] { border-color: rgba(111,160,255,.6); background: var(--accent-soft); }
.color-btn[aria-pressed="true"] .cdot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-2); }

.results { flex: 1; min-width: 0; }
.results-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 44px; margin-bottom: 10px;
}
.results-count { font-size: 15px; font-weight: 600; white-space: nowrap; }
.results-count .muted { font-weight: 500; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1 1 200px; }
.results-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
.size-ctl { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.size-ctl .ic { width: 16px; height: 16px; }
.size-ctl .ic.big { width: 20px; height: 20px; }
.sort-sel { width: auto; padding: 7px 10px; font-size: 14px; border-radius: 10px; min-height: 36px; }
.filter-btn { display: none; }

/* Kauf-Check & Hinweise */
.notice-slot { display: flex; flex-direction: column; gap: 12px; }
.notice-slot:not(:empty) { margin-bottom: 16px; }
.buycheck { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.buycheck-head { display: flex; align-items: center; gap: 14px; }
.buycheck-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.buycheck-icon .ic { width: 24px; height: 24px; }
.buycheck.have { border-color: rgba(52,211,153,.4); box-shadow: var(--lg-shadow), 0 0 0 1px rgba(52,211,153,.18), 0 18px 50px -24px rgba(52,211,153,.45); }
.buycheck.have .buycheck-icon { background: var(--ok-soft); color: var(--ok); box-shadow: 0 0 22px -4px rgba(52,211,153,.6); }
.buycheck.new .buycheck-icon { background: var(--accent-soft); color: var(--accent-2); }
.buycheck-title { font-family: var(--font-display); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.buycheck-sub { color: var(--muted); font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buycheck-list { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.mini-card {
  appearance: none; flex: none; width: 230px; display: flex; gap: 10px; align-items: center; text-align: left;
  padding: 8px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); color: var(--fg);
}
.mini-card:hover { border-color: var(--line-strong); background: var(--surface-3); }
.mini-card .thumb { width: 56px; height: 56px; border-radius: 10px; flex: none; overflow: hidden; }
.mini-card .mc-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mini-card .mc-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-card .mc-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Raster ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr)); gap: 14px; }
.tile {
  appearance: none; border: 0; padding: 0; background: none; color: var(--fg); text-align: left;
  position: relative; border-radius: 16px; display: block; min-width: 0;
  transition: transform .15s ease;
}
.tile:active { transform: scale(.98); }
.tile-img {
  position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden;
  background: var(--lg-sheen), var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 14px 30px -22px rgba(0,0,0,.9);
  transition: box-shadow .15s ease;
}
.tile:hover .tile-img, .tile:focus-visible .tile-img, .tile.sel .tile-img {
  box-shadow: inset 0 0 0 1px rgba(111,160,255,.55), 0 0 0 1px rgba(111,160,255,.25), 0 16px 34px -16px var(--accent-glow);
}
.tile.sel .tile-img { box-shadow: inset 0 0 0 2px var(--accent-2), 0 16px 34px -14px var(--accent-glow); }
.tile:focus-visible { outline: none; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease, transform .4s ease; }
.tile-img img.loaded { opacity: 1; }
.tile:hover .tile-img img.loaded { transform: scale(1.03); }
.tile-info {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px;
  background: linear-gradient(180deg, rgba(5,6,8,0), rgba(5,6,8,.86) 55%);
  display: flex; flex-direction: column; gap: 1px; pointer-events: none;
  opacity: 0; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease;
}
.tile:hover .tile-info, .tile:focus-visible .tile-info { opacity: 1; transform: none; }
.tile-name { font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-badges { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 6px; pointer-events: none; }
.tile-badge {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  background: rgba(5,6,8,.7); color: var(--fg); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tile-badge.warn { color: var(--warn); }
.tile-badge.fmt { margin-left: auto; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; opacity: 0; transition: opacity .15s ease; }
.tile:hover .tile-badge.fmt { opacity: 1; }
/* kleine Kacheln: Text kleiner */
.grid.compact .tile-info { padding: 18px 8px 6px; }
.grid.compact .tile-name { font-size: 12.5px; }
.grid.compact .tile-sub, .grid.compact .tile-badge.fmt { display: none; }

/* Platzhalter (fehlendes Bild / wird vorbereitet) – Farbe nach Kategorie */
.ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--muted); font-size: 12.5px; font-weight: 600; text-align: center; padding: 10px;
  background:
    radial-gradient(70% 60% at 50% 42%, color-mix(in srgb, var(--cat, var(--accent)) 26%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.ph .ic { width: 34%; height: 34%; max-width: 64px; max-height: 64px; color: color-mix(in srgb, var(--cat, var(--accent)) 70%, var(--fg)); opacity: .7; }
.ph.busy .ic { animation: fl-breathe 2.2s ease-in-out infinite; }
@keyframes fl-breathe { 0%,100% { opacity: .35; transform: scale(.96); } 50% { opacity: .8; transform: scale(1.02); } }
.ph-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skeleton .tile-img { background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 300% 100%; animation: fl-shimmer 1.4s ease infinite; }
@keyframes fl-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Kategorien englisch; deutsche Namen für ältere Assets weiter abgebildet */
[data-cat="Vehicles"], [data-cat="Fahrzeuge"] { --cat: #3D7BF0; }
[data-cat="Architecture"], [data-cat="Architektur"] { --cat: #8EA3C8; }
[data-cat="Interior & Furniture"], [data-cat="Innenraum & Möbel"] { --cat: #C9925A; }
[data-cat="Nature & Plants"], [data-cat="Natur & Pflanzen"] { --cat: #46A758; }
[data-cat="Animals"], [data-cat="Tiere"] { --cat: #B98B4E; }
[data-cat="Characters & People"], [data-cat="Figuren & Menschen"] { --cat: #E8829B; }
[data-cat="Props"], [data-cat="Requisiten"] { --cat: #D9B24C; }
[data-cat="Tech & Electronics"], [data-cat="Technik & Elektronik"] { --cat: #2FBFB5; }
[data-cat="Weapons & Military"], [data-cat="Waffen & Militär"] { --cat: #7F8A5C; }
[data-cat="Food & Drink"], [data-cat="Lebensmittel"] { --cat: #F08A3C; }
[data-cat="Clothing & Accessories"], [data-cat="Kleidung & Accessoires"] { --cat: #B07CE8; }
[data-cat="Space & Sci-Fi"], [data-cat="Raumfahrt & Sci-Fi"] { --cat: #6F7BFF; }
[data-cat="Industrial"], [data-cat="Industrie"] { --cat: #9AA0A8; }
[data-cat="Terrain & Landscape"], [data-cat="Gelände & Landschaft"] { --cat: #8DB86B; }
[data-cat="Kits & Collections"], [data-cat="Kits & Sammlungen"] { --cat: #FF7F5C; }
[data-cat="Materials & Textures"], [data-cat="Materialien & Texturen"] { --cat: #C3CAD6; }

.sentinel { height: 1px; }
.load-more { display: flex; justify-content: center; padding: 28px 0; }

/* ---------- Detail-Panel (rechts auf Desktop, Sheet auf schmalen Fenstern) ---------- */
.detail-panel {
  position: fixed; z-index: 45; right: 0; top: var(--topbar-h); bottom: 0; width: var(--detail-w);
  display: flex; flex-direction: column;
  background: var(--lg-sheen), rgba(13,14,17,.86);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border-left: 1px solid rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.08);
  border-top-left-radius: var(--r-xl);
  box-shadow: inset 1px 1px .5px rgba(255,255,255,.18), -30px 0 60px -30px rgba(0,0,0,.8);
  animation: fl-slide .26s cubic-bezier(.2,.9,.25,1);
}
@keyframes fl-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.detail-backdrop { display: none; }
.detail-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px 4px 20px; flex: none; }
.detail-head .grow { flex: 1; min-width: 0; }
.detail-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.detail-foot { flex: none; display: flex; gap: 8px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: rgba(10,11,14,.55); }
.detail-foot .btn { flex: 1 1 auto; min-width: 0; }
.detail-foot .btn + .btn { flex: 0 1 auto; padding: 0 16px; }
html.has-detail .banner-slot { margin-right: var(--detail-w); }
@media (min-width: 1100px) { html.has-detail:not(.sheet-open) .toast-wrap { right: var(--detail-w); } }
.detail-foot .btn span { overflow: hidden; text-overflow: ellipsis; }

.viewer { display: flex; flex-direction: column; gap: 8px; }
.viewer-main { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.viewer-main img { width: 100%; height: 100%; object-fit: cover; }
.viewer-nav { position: absolute; top: calc(50% - 20px); transform: none; width: 40px; height: 40px; opacity: 0;
  transition: opacity .15s ease, background .15s ease, transform .12s ease; }
/* Liquid Glass für die Pfeile (Bild und Großansicht): Glanz oben links, Lichtkante, Unschärfe dahinter */
.viewer-nav, .lightbox .icon-btn {
  color: #fff; border: 1px solid var(--lg-border);
  background: var(--lg-sheen), rgba(255,255,255,.10);
  box-shadow: var(--lg-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
}
.viewer-nav:hover, .lightbox .icon-btn:hover { background: var(--lg-sheen), rgba(255,255,255,.20); }
.viewer-main:hover .viewer-nav { opacity: 1; }
.viewer-nav.prev { left: 8px; } .viewer-nav.next { right: 8px; }
/* ohne translate zentriert: beim Drücken nur minimal kleiner, nichts verschiebt sich unter der Maus */
.viewer-nav:active, .lightbox-nav:active { transform: scale(.96); }
.viewer-kind { position: absolute; left: 10px; bottom: 10px; }
.viewer-main #d-img { cursor: zoom-in; }
/* Großansicht */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(4,5,7,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: fl-fade .18s ease; cursor: zoom-out;
}
.lightbox-img { max-width: min(92vw, 92vh); max-height: 92vh; width: auto; height: auto; border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); cursor: default; }
.lightbox .icon-btn { position: absolute; width: 48px; height: 48px; }
.lightbox-close { top: 18px; right: 18px; }
.lightbox-nav { top: calc(50% - 24px); }
.lightbox-nav.prev { left: 18px; } .lightbox-nav.next { right: 18px; }
.lightbox-kind { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); }
@keyframes fl-fade { from { opacity: 0; } to { opacity: 1; } }
.viewer-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 2px; }
.viewer-thumb { appearance: none; padding: 0; border: 0; flex: none; width: 58px; height: 58px; border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); opacity: .65; transition: opacity .12s ease, box-shadow .12s ease; }
.viewer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.viewer-thumb:hover { opacity: 1; }
.viewer-thumb[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--accent-2); }

.d-title { font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.d-sub { color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 4px; }
.d-desc { color: var(--fg); opacity: .9; }
.d-section { display: flex; flex-direction: column; gap: 8px; }
.d-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.colors { display: flex; flex-wrap: wrap; gap: 8px; }
.color-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); appearance: none; }
.color-chip:hover { color: var(--fg); }
.color-chip .sw { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; border-radius: 14px; overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.kv > div { background: var(--surface); padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kv .v { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kv .s { font-size: 12px; color: var(--faint); }
.kv > .full { grid-column: 1 / -1; }
.scale-row .v { display: flex; align-items: flex-start; gap: 6px; }
.scale-row .v .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.scale-row.ok .v .ic { color: var(--ok); }
.scale-row.off { background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--surface); }
.scale-row.off .v { color: var(--warn); }
.list { border-radius: 14px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.list-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); min-height: 40px; font-size: 14px; }
.list-row:first-child { border-top: 0; }
.list-row .main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .end { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.list-more { width: 100%; border-radius: 0; border: 0; border-top: 1px solid var(--line); justify-content: center; }
.add-tag { display: flex; gap: 6px; }
.add-tag .input { padding: 7px 12px; font-size: 15px; border-radius: 999px; }
.status-box { display: flex; flex-direction: column; gap: 10px; }
.d-more { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); padding-top: 14px; }
.d-loading { display: grid; place-items: center; padding: 80px 0; }

/* ---------- Upload-Formular ---------- */
.drop-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 26px 16px; border-radius: 18px; border: 1.5px dashed var(--line-strong); background: var(--surface);
  color: var(--muted); transition: border-color .15s ease, background .15s ease;
}
.drop-zone:hover, .drop-zone.over { border-color: var(--accent-2); background: var(--accent-soft); color: var(--fg); }
.drop-zone .ic { width: 34px; height: 34px; color: var(--accent-2); }
.drop-zone b { color: var(--fg); }
.file-list { display: flex; flex-direction: column; }
.file-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px 8px 12px; border-top: 1px solid var(--line); font-size: 14px; }
.file-row:first-child { border-top: 0; }
.file-row .ic { width: 18px; height: 18px; color: var(--muted); }
.file-row .main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .end { flex: none; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; }
.req { color: var(--accent-2); }

/* Datei irgendwo aufs Fenster ziehen */
.drop-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(4,5,7,.7); display: grid; place-items: center; padding: 24px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fl-fade .15s ease;
}
.drop-box {
  width: min(560px, 100%); padding: 48px 24px; border-radius: var(--r-xl); text-align: center;
  border: 2px dashed var(--accent-2); background: var(--lg-sheen), rgba(14,15,19,.75);
  box-shadow: 0 0 60px -10px var(--accent-glow); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.drop-ic .ic { width: 48px; height: 48px; color: var(--accent-2); }
.drop-title { font-family: var(--font-display); font-size: 24px; font-weight: 650; }
.drop-sub { color: var(--muted); }

/* ---------- Upload-Leiste unten ---------- */
.upload-bar {
  position: fixed; z-index: 55; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: min(640px, calc(100% - 32px));
  border-radius: 20px; padding: 10px 12px 10px 16px;
  background: var(--lg-sheen), rgba(15,16,20,.86);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px .5px rgba(255,255,255,.25), 0 24px 50px -20px rgba(0,0,0,.9);
  display: flex; flex-direction: column; gap: 8px; animation: fl-up .24s ease;
}
html.has-detail .upload-bar { left: calc((100% - var(--detail-w)) / 2); }
.ub-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ub-icon { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); }
.ub-icon .ic { width: 18px; height: 18px; }
.ub-icon.ok { background: var(--ok-soft); color: var(--ok); }
.ub-icon.over { background: var(--over-soft); color: var(--over); }
.ub-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ub-title { font-weight: 650; font-size: 14px; display: flex; gap: 8px; min-width: 0; }
.ub-title .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-title .pct { flex: none; margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.ub-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ub-actions { flex: none; display: flex; gap: 4px; }
.ub-queue { font-size: 12.5px; color: var(--faint); padding-left: 46px; }
.ub-row + .ub-row { border-top: 1px solid var(--line); padding-top: 8px; }

/* ---------- Seiten: Meine Uploads, Verwaltung ---------- */
.page { padding: 8px 24px 100px; max-width: 1180px; margin: 0 auto; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 18px; }
.page-head h1 { min-width: 0; }
.page-head .grow { flex: 1; }
.back-btn { margin-left: -8px; }
.rows { display: flex; flex-direction: column; }
.urow {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-top: 1px solid var(--line); min-width: 0;
}
.urow:first-child { border-top: 0; }
button.urow { appearance: none; border-left: 0; border-right: 0; border-bottom: 0; background: none; width: 100%; text-align: left; color: inherit; }
button.urow:hover { background: rgba(175,180,195,.05); }
.urow .thumb { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex: none; position: relative; background: var(--surface-2); }
.urow .thumb img { width: 100%; height: 100%; object-fit: cover; }
.urow .thumb .ph .ic { width: 40%; height: 40%; }
.urow .ph-text, .mini-card .ph-text { display: none; }
.urow .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.urow .title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urow .sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urow .err { font-size: 13px; color: var(--over); overflow-wrap: anywhere; }
.urow .end { flex: none; display: flex; align-items: center; gap: 8px; }
.urow .bar { width: 160px; margin-top: 4px; }
.status-chip .spinner { width: 12px; height: 12px; border-width: 2px; }

.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.admin-grid .span2 { grid-column: 1 / -1; }
.sec { display: flex; flex-direction: column; gap: 14px; }
.sec-head { display: flex; align-items: center; gap: 10px; }
.sec-head h2 { flex: 1; min-width: 0; font-size: 18px; }
.sec-head .ic { width: 20px; height: 20px; color: var(--accent-2); }
.sec-text { color: var(--muted); font-size: 14px; }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.stat .big { font-family: var(--font-display); font-size: 30px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .big.over { color: var(--over); }
.arow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); min-width: 0; font-size: 14px; }
.arow:first-child { border-top: 0; }
.arow .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.arow .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow .s { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow .end { flex: none; display: flex; align-items: center; gap: 6px; }
.arow .select { width: auto; padding: 6px 8px; font-size: 14px; border-radius: 10px; }
.secret-box { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-strong); }
.secret-box code { flex: 1; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; color: var(--fg); user-select: all; }
.inline-form { display: flex; gap: 8px; }
.inline-form .input { flex: 1; }

/* ---------- Blender verbinden ---------- */
.steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.steps li { display: flex; gap: 12px; align-items: flex-start; counter-increment: st; }
.steps li::before {
  content: counter(st); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-2); font-weight: 700; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(0,255,73,.35);
}
.steps li > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 3px; }
.pair-code-box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-strong); }
.pair-code { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; font-size: 46px; font-weight: 700; letter-spacing: .18em; padding-left: .18em; color: var(--fg); text-shadow: 0 0 24px var(--accent-glow); user-select: all; }
.pair-code.expired { opacity: .3; text-shadow: none; }
.pair-status { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.pair-ok { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 12px; text-align: center; }
.pair-ok .ic { width: 52px; height: 52px; color: var(--ok); filter: drop-shadow(0 0 14px rgba(52,211,153,.6)); }

/* ---------- Gate: Einladung / ohne Login ---------- */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px var(--gutter); }
.gate-card { width: min(440px, 100%); padding: 30px 26px; display: flex; flex-direction: column; gap: 16px; text-align: center; align-items: stretch; }
.gate-card img { width: 64px; height: 64px; margin: 0 auto 4px; border-radius: 18px; box-shadow: 0 10px 30px -8px var(--accent-glow); }
.gate-card h1 { font-size: 26px; }
.gate-card p { color: var(--muted); }
.gate-card form { display: flex; flex-direction: column; gap: 12px; text-align: left; }

/* ---------- Responsiv ---------- */
@media (max-width: 1380px) { :root { --detail-w: 420px; } }
@media (max-width: 1099px) {
  /* Detail als Sheet */
  html.has-detail .browse, html.has-detail .page { margin-right: 0; }
  html.has-detail .upload-bar { left: 50%; }
  .detail-backdrop { display: block; position: fixed; inset: 0; z-index: 44; background: var(--backdrop); animation: fl-fade .18s ease; }
  .detail-panel {
    top: auto; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 640px; height: calc(100% - 40px - env(safe-area-inset-top, 0px));
    border-radius: var(--r-xl) var(--r-xl) 0 0; border-left: 1px solid rgba(255,255,255,.1); border-right: 1px solid rgba(255,255,255,.1);
    animation: fl-up .26s cubic-bezier(.2,.9,.25,1);
  }
  .detail-panel::before { content: ""; flex: none; display: block; width: 38px; height: 5px; border-radius: 3px; margin: 8px auto 0; background: var(--line-strong); }
  .viewer-nav { opacity: 1; }
}
@media (max-width: 900px) {
  :root { --topbar-h: 116px; }
  .topbar-inner { flex-wrap: wrap; padding: 10px var(--gutter); gap: 10px 10px; }
  .brand { width: auto; order: 1; }
  .top-actions { order: 2; gap: 8px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .search-input { height: 46px; }
  .browse { padding: 4px var(--gutter) 90px; }
  .filters-panel { display: none; }
  .filter-btn { display: inline-flex; }
  .banner-slot { padding: 0 var(--gutter); }
  .page { padding: 4px var(--gutter) 100px; }
  .admin-grid { grid-template-columns: minmax(0, 1fr); }
  /* Filter als Sheet */
  .sheet .filters { display: block; position: static; width: auto; max-height: none; overflow: visible; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 640px) {
  .btn-label { display: none; }
  .top-mine.btn { width: 40px; min-height: 40px; padding: 0; }
  .bl-pill { width: 40px; padding: 0; justify-content: center; position: relative; }
  .bl-pill .dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; }
  .results-head { gap: 8px; }
  .active-filters { order: 5; flex-basis: 100%; }
  .size-ctl { display: none; }
  .grid { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(var(--tile), 150px), 1fr)); }
  .tile-img, .tile { border-radius: 12px; }
  .urow { padding: 10px 6px; gap: 10px; }
  .urow .thumb { width: 52px; height: 52px; }
  .urow .bar { width: 100%; }
  .stat .big { font-size: 24px; }
  .buycheck-title { font-size: 19px; }
  .pair-code { font-size: 36px; }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-foot .btn + .btn span { display: none; }
  .detail-foot .btn + .btn { padding: 0 15px; }
  .detail-body, .detail-head { padding-left: var(--gutter); padding-right: var(--gutter); }
  .detail-foot { padding-left: var(--gutter); padding-right: var(--gutter); }
}
/* Touch: Name immer zeigen (kein Hover) */
@media (hover: none) {
  .tile-info { opacity: 1; transform: none; padding-top: 18px; }
  .tile-sub { display: none; }
}

/* „Add details“ nach dem Upload aus Blender (#complete=<id>) */
.complete-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px; align-items: start; }
.complete-side { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.complete-preview { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--surface-2); position: relative; }
.complete-preview img { width: 100%; height: 100%; object-fit: cover; }
.complete-status { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.complete-status .bar { width: 100%; }
.complete-form { display: flex; flex-direction: column; gap: 14px; }
.complete-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.complete-actions .flex0 { flex: none; }
.bought-note .mini-card { text-decoration: none; color: inherit; }
.urow .chip.details-missing { cursor: pointer; }
@media (max-width: 760px) {
  .complete-grid { grid-template-columns: minmax(0, 1fr); }
  .complete-side { flex-direction: row; align-items: center; }
  .complete-preview { width: 96px; flex: none; }
}
/* ---------- Clear filters (großer Knopf über den Filtern) ---------- */
.clear-filters {
  width: 100%; min-height: 44px; margin: 2px 0 10px; justify-content: center; gap: 8px;
  border-radius: 999px; font-weight: 600; color: var(--accent);
  background: var(--lg-sheen), var(--accent-soft); border: 1px solid var(--accent);
  box-shadow: inset 0 1px .5px rgba(255,255,255,.18), 0 0 18px -6px var(--accent-glow);
}
.clear-filters:hover { background: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.clear-filters:active { transform: scale(.97); }
.clear-filters .ic { width: 18px; height: 18px; }
.clear-filters .num { opacity: .8; }
.clear-filters + .facet { border-top: 0; padding-top: 4px; }

/* ---------- Raster: neue Kacheln beim Selbst-Aktualisieren ---------- */
.tile.tile-new { animation: fl-tile-in .45s cubic-bezier(.2,.9,.25,1) both; }
@keyframes fl-tile-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- Leaderboard ---------- */
.lb-pill .ic { width: 18px; height: 18px; }
.lb-pill:hover .ic { color: var(--accent); }
.lb-top { display: flex; justify-content: center; margin-bottom: 14px; }
.lb-top .seg { width: 100%; max-width: 320px; }
.lb-list { display: flex; flex-direction: column; gap: 6px; }
.lb-row {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px 8px 10px;
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line);
}
.lb-rank {
  flex: none; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: var(--muted); background: var(--surface-3);
}
.lb-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.lb-you {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; color: var(--accent); background: var(--accent-soft);
}
.lb-count { flex: none; display: flex; align-items: baseline; gap: 6px; font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1; }
.lb-unit { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--muted); }
.lb-row.top { background: var(--lg-sheen), var(--surface-2); border-color: var(--line-strong); }
.lb-row.top-1 { border-color: var(--accent); box-shadow: 0 0 22px -8px var(--accent-glow); }
.lb-row.top-1 .lb-rank { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 14px -2px var(--accent-glow); }
.lb-row.top-2 .lb-rank, .lb-row.top-3 .lb-rank { color: var(--fg); background: var(--surface-3); border: 1px solid var(--line-strong); }
.lb-row.me { outline: 1px solid var(--accent-soft); outline-offset: 0; background: var(--lg-sheen), var(--accent-soft); }
.lb-row.top-1.me { outline: 0; }
.lb-empty { padding: 36px 12px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lb-empty .ic { width: 34px; height: 34px; color: var(--faint); }
/* Leaderboard-Pille nur als Icon, sobald es in der Topbar eng wird (Suche bleibt breit) */
@media (max-width: 1280px) {
  .lb-pill { width: 40px; padding: 0; justify-content: center; }
  .lb-pill .btn-label { display: none; }
}
@media (max-width: 640px) {
  .lb-count { font-size: 24px; }
  .lb-row { padding-right: 12px; }
}