/* ==========================================================================
   KEINEWOLKE – Y2K / IndieWeb-Theme
   "Fileserver um 2002": Fenster mit Titelleisten, abgeschrägte Ränder,
   Tahoma + Monospace, warmes Grau und genau eine Akzentfarbe.
   Liegt über style.css – nur Optik, kein Verhalten.
   ========================================================================== */

:root {
  --bg: #cfccc5;
  --surface: #efede8;
  --surface-2: #e2dfd8;
  --text: #1d1d1b;
  --muted: #67645d;
  --line: #9d9990;
  --accent: #2e5b88;
  --accent-text: #ffffff;
  --tile: #ffffff;
  --shadow: 2px 2px 0 rgba(0, 0, 0, .22);
  --radius: 0px;

  --bev-hi: #ffffff;          /* Lichtkante */
  --bev-lo: #8a867d;          /* Schattenkante */
  --bev-dk: #4c4942;          /* äußere Schattenkante */
  --field: #ffffff;           /* Eingabefelder */
  --title-a: #e9e7e1;         /* Titelleiste oben */
  --title-b: #cdc9c0;         /* Titelleiste unten */
  --sel: #2e5b88;             /* Auswahl wie im Explorer */
  --dither: rgba(0, 0, 0, .045);

  --ui: Tahoma, Verdana, "Segoe UI", Geneva, "DejaVu Sans", sans-serif;
  --mono: "Lucida Console", Monaco, "Andale Mono", "Courier New", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #18191b;
    --surface: #26272a;
    --surface-2: #2f3034;
    --text: #e4e2dc;
    --muted: #97948c;
    --line: #4a4b50;
    --accent: #86a9d0;
    --accent-text: #0e1724;
    --tile: #1d1e21;
    --shadow: 2px 2px 0 rgba(0, 0, 0, .5);
    --bev-hi: #46474c;
    --bev-lo: #111214;
    --bev-dk: #000000;
    --field: #1b1c1f;
    --title-a: #393a3f;
    --title-b: #2a2b2f;
    --sel: #3d5f86;
    --dither: rgba(255, 255, 255, .025);
    color-scheme: dark;
  }
}

/* ---------- Grundlagen ---------- */
html { font-size: 13px; }
body {
  font: 13px/1.45 var(--ui);
  background-color: var(--bg);
  /* feines Raster wie ein alter Desktop-Hintergrund */
  background-image:
    linear-gradient(45deg, var(--dither) 25%, transparent 25%, transparent 75%, var(--dither) 75%),
    linear-gradient(45deg, var(--dither) 25%, transparent 25%, transparent 75%, var(--dither) 75%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  -webkit-font-smoothing: auto;
}
::selection { background: var(--sel); color: #fff; }
svg { stroke-width: 1.7; }
.muted { color: var(--muted); }

/* Wiederverwendbare Ränder */
.btn, .chip, .sel-btn, .tool, .menu-item, .tag-chip, .side-link.active, .icon-btn.small,
#toastAction, .lb-nav, .ib {
  border-radius: 0 !important;
}

/* ---------- Buttons: erhaben, beim Drücken eingedrückt ---------- */
.btn, .menu-item, .sel-btn, .chip, .tag-chip {
  font: 12px/1.2 var(--ui);
  font-weight: normal;
  color: var(--text);
  background: linear-gradient(var(--surface), var(--surface-2));
  border: 1px solid;
  border-color: var(--bev-hi) var(--bev-lo) var(--bev-lo) var(--bev-hi);
  box-shadow: 1px 1px 0 var(--bev-dk);
  padding: 5px 12px;
  transition: none;
}
.btn:hover, .menu-item:hover, .sel-btn:hover, .chip:hover, .tag-chip:hover { filter: none; background: var(--surface); }
.btn:active, .menu-item:active, .sel-btn:active, .chip:active, .tag-chip:active, .chip.active {
  transform: none;
  border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo);
  box-shadow: inset 1px 1px 0 var(--bev-dk);
}
.btn:focus-visible, .chip:focus-visible, .sel-btn:focus-visible { outline: 1px dotted var(--text); outline-offset: -4px; }
.btn.primary {
  background: linear-gradient(color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
  color: var(--accent-text);
  font-weight: bold;
  border-color: color-mix(in srgb, var(--accent) 55%, #fff) var(--bev-dk) var(--bev-dk) color-mix(in srgb, var(--accent) 55%, #fff);
}
.btn.primary:hover { background: var(--accent); }
.btn.danger, .sel-btn.danger { color: #a3262a; }
@media (prefers-color-scheme: dark) { .btn.danger, .sel-btn.danger { color: #f08a8a; } }
.btn.danger-fill { background: linear-gradient(#c64b4b, #9e2f2f); color: #fff; font-weight: bold; border-color: #e08b8b #4a1414 #4a1414 #e08b8b; }
.btn svg, .sel-btn svg { width: 15px; height: 15px; }
.chip { padding: 4px 10px; color: var(--text); }
.chip.active { background: var(--surface-2); color: var(--text); font-weight: bold; }

.icon-btn { border-radius: 0; border: 1px solid transparent; }
.icon-btn:hover { background: var(--surface-2); border-color: var(--bev-hi) var(--bev-lo) var(--bev-lo) var(--bev-hi); }
.icon-btn svg { width: 17px; height: 17px; }

/* Eingabefelder: eingelassen */
.search, .login-card input, .share-new select, .share-new input[type=text], .share-url input,
.pick-new input, .vault-field input, .ask-box input, .tag-add input {
  border-radius: 0 !important;
  background: var(--field) !important;
  border: 1px solid !important;
  border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo) !important;
  box-shadow: inset 1px 1px 0 var(--bev-dk);
  font-family: var(--ui);
  font-size: 13px;
  color: var(--text) !important;
}

/* ---------- Kopfleiste = Fenster-Toolbar ---------- */
.topbar {
  background: linear-gradient(var(--title-a), var(--title-b));
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--bev-dk);
  box-shadow: inset 0 1px 0 var(--bev-hi), inset 0 -1px 0 var(--bev-lo);
  gap: 10px;
}
.brand { font: bold 13px var(--mono); letter-spacing: 0; }
.brand-text::after { content: "://fileserver"; font-weight: normal; color: var(--muted); }
.logo {
  width: 22px; height: 22px; border-radius: 0; background: var(--accent);
  border: 1px solid; border-color: color-mix(in srgb, var(--accent) 50%, #fff) var(--bev-dk) var(--bev-dk) color-mix(in srgb, var(--accent) 50%, #fff);
}
.logo::after { inset: 5px; border-width: 2px; }
.search { height: 26px; padding: 0 8px; max-width: 360px; }
.search input { font: 12px var(--ui); }
.search svg { width: 14px; height: 14px; }
.filters { gap: 0; }
.filters .chip + .chip { margin-left: -1px; }
#uploadBtn { padding: 5px 14px; }

.menu {
  border-radius: 0; padding: 0; gap: 0; background: var(--surface);
  border: 1px solid; border-color: var(--bev-hi) var(--bev-dk) var(--bev-dk) var(--bev-hi);
  box-shadow: var(--shadow);
}
.menu .storage { padding: 10px 12px; font-family: var(--mono); font-size: 11px; border-bottom: 1px solid var(--line); }
.menu .storage strong { font: bold 12px var(--ui); }
.menu-item { border: 0; box-shadow: none; background: transparent; text-align: left; padding: 7px 12px; }
.menu-item:hover { background: var(--sel); color: #fff; }
.meter {
  height: 12px; border-radius: 0; background: var(--field);
  border: 1px solid; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo);
}
.meter > i { background: repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 9px); }

/* ---------- Seitenleiste = Explorer ---------- */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--bev-dk);
  box-shadow: inset -1px 0 0 var(--bev-lo), inset 1px 0 0 var(--bev-hi);
  padding: 10px 8px 16px;
}
.side-h {
  font: bold 10px var(--mono); letter-spacing: .08em; color: var(--muted);
  border-bottom: 1px dotted var(--line); padding: 0 4px 3px 6px; margin-bottom: 4px;
}
.side-sec + .side-sec { border-top: 0; padding-top: 6px; }
.side-link { border-radius: 0; padding: 4px 8px; font-size: 12px; gap: 8px; }
.side-link svg { width: 15px; height: 15px; }
.side-link small { font-family: var(--mono); font-size: 10px; }
.side-link:hover { background: var(--surface-2); }
.side-link.active, .side-link.active:hover { background: var(--sel); color: #fff; font-weight: normal; }
.side-link.active svg, .side-link.active small { color: #fff; }
.side-link.active span { text-decoration: underline dotted; text-underline-offset: 3px; }
.side-empty { font-size: 11px; }
.side-tags { padding: 2px 4px; gap: 4px; }
.tag-chip { padding: 2px 7px; font-size: 11px; box-shadow: none; }
.tag-chip small { font-family: var(--mono); font-size: 10px; }
.tag-chip.active { background: var(--sel); color: #fff; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); }
/* 88×31-Knopf ganz unten, wie früher */
.sidebar::after {
  content: "KEINEWOLKE\A ⌂ selbst gehostet";
  white-space: pre; display: block; width: 88px; height: 31px; box-sizing: border-box;
  margin: 18px 0 0 8px; padding: 3px 4px; overflow: hidden;
  font: 9px/12px var(--mono); color: var(--text);
  background: linear-gradient(var(--surface), var(--surface-2));
  border: 1px solid; border-color: var(--bev-hi) var(--bev-dk) var(--bev-dk) var(--bev-hi);
  opacity: .85;
}

/* ---------- Inhalt ---------- */
main { padding-bottom: 70px; }
.stats { font: 11px var(--mono); color: var(--muted); }
.stats::before { content: "> "; }
.scope-head { padding-top: 14px; }
.scope-head h1 { font: bold 18px var(--ui); letter-spacing: 0; }
.scope-head h1 svg { width: 20px; height: 20px; }
.scope-head .crumb { font: 11px var(--mono); }
.scope-note { font-size: 12px; }
.scope-actions .btn { padding: 5px 12px; font-size: 12px; }

.month-head {
  background: var(--bg);
  background-image: inherit; background-size: inherit;
  font: bold 13px var(--mono); text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px dotted var(--line); padding: 10px 2px 5px;
}
.month-head small { font: 11px var(--mono); text-transform: none; letter-spacing: 0; }
.month-head small::before { content: "["; } .month-head small::after { content: "]"; }
.day-head { font: 11px var(--mono); padding: 12px 2px 6px; }
.day-head span { font-weight: bold; }

/* Vorschaubilder mit weißem Rand wie in alten Web-Galerien */
.grid { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tile {
  border-radius: 0; background: var(--tile); padding: 4px;
  border: 1px solid var(--line); box-shadow: 1px 1px 0 rgba(0, 0, 0, .12);
}
.tile img { transition: opacity .2s; }
.tile:hover img, .tile.selected:hover img { transform: none; }
.tile:hover { border-color: var(--accent); }
.tile:focus-visible { outline: 1px dotted var(--text); outline-offset: 2px; }
.tile .badge, .tile .fmt, .tile .trash-left {
  border-radius: 0; font: 10px var(--mono); background: rgba(20, 20, 20, .75); backdrop-filter: none;
}
.tile .badge { right: 8px; bottom: 8px; padding: 1px 5px 1px 4px; }
.tile .fmt { right: 8px; top: 8px; }
.tile .marks { left: 8px; bottom: 8px; }
.tile .mark { border-radius: 0; width: 18px; height: 18px; background: rgba(20, 20, 20, .75); }
.tile .check {
  border-radius: 0; left: 8px; top: 8px; width: 16px; height: 16px;
  border: 1px solid; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo);
  background: var(--field); box-shadow: inset 1px 1px 0 var(--bev-dk);
}
.tile.selected { background: var(--tile); border-color: var(--sel); outline: 2px solid var(--sel); outline-offset: -1px; }
.tile.selected img { transform: none; border-radius: 0; opacity: .82; }
.tile.selected .check { background: var(--field); border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); }
.tile.selected .check::after { left: 4px; top: 0; width: 4px; height: 9px; border-color: var(--text); border-width: 0 2px 2px 0; }
.day-check {
  border-radius: 0; width: 14px; height: 14px; border: 1px solid;
  border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); background: var(--field);
}
.day-check.on { background: var(--field); border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); }
.day-check.on::after { left: 3px; top: 0; width: 4px; height: 8px; border-color: var(--text); }
.tile .noprev { font-family: var(--mono); }
@media (max-width: 760px) {
  .grid { gap: 4px; grid-template-columns: repeat(3, 1fr); }
  .tile { padding: 2px; }
  .tile .check { left: 5px; top: 5px; }
}

.scrubber { font-family: var(--mono); font-size: 10px; }
.scrubber a { border-radius: 0; padding: 1px 5px; }
.scrubber a:hover, .scrubber a.current { background: var(--sel); color: #fff; }

/* Ordner-Übersicht: Ordner-Kacheln */
.folder-cover {
  border-radius: 0; background: var(--tile); padding: 4px;
  border: 1px solid var(--line); box-shadow: 1px 1px 0 rgba(0, 0, 0, .12);
}
.folder-card:hover .folder-cover { transform: none; box-shadow: 1px 1px 0 rgba(0, 0, 0, .12); border-color: var(--accent); }
.folder-card strong { font: bold 12px var(--ui); }
.folder-card span { font: 11px var(--mono); }
.folder-card:focus-visible strong { outline: 1px dotted var(--text); }

/* Leerer Zustand */
.empty-art { border-radius: 0; background: var(--accent); transform: none; box-shadow: var(--shadow); width: 96px; height: 72px; }
.empty-art::before { border-radius: 0; transform: translate(10px, -10px); background: var(--surface-2); border: 1px solid var(--line); }
.empty h2 { font: bold 16px var(--ui); }

/* ---------- Fenster: Dialoge, Upload, Menüs ---------- */
.dlg, .uploads, .login-card {
  border-radius: 0 !important;
  background: var(--surface);
  border: 1px solid; border-color: var(--bev-hi) var(--bev-dk) var(--bev-dk) var(--bev-hi);
  box-shadow: inset -1px -1px 0 var(--bev-lo), var(--shadow);
}
.dlg-backdrop { background: rgba(40, 40, 36, .35); }
/* Titelleiste */
.dlg header, .uploads header {
  margin: -16px -18px 12px; padding: 4px 4px 4px 10px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--title-b)));
  color: #fff;
}
.dlg header strong, .uploads header strong { font: bold 12px var(--ui); color: #fff; }
.dlg header .icon-btn, .uploads header .icon-btn {
  width: 18px; height: 16px; color: var(--text);
  background: var(--surface); border: 1px solid; border-color: var(--bev-hi) var(--bev-dk) var(--bev-dk) var(--bev-hi);
}
.dlg header .icon-btn svg, .uploads header .icon-btn svg { width: 11px; height: 11px; stroke-width: 2.4; }
.uploads header { margin: 0; }
.dlg { padding: 16px 18px 16px; }
.hint { font-size: 12px; }

/* Rückfrage-Dialog bekommt eine Titelleiste über ::before */
.ask-box { padding: 0 16px 16px; gap: 10px; }
.ask-box::before {
  content: "Rückfrage"; display: block; margin: 0 -16px 4px; padding: 5px 10px;
  font: bold 12px var(--ui); color: #fff;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--title-b)));
}
.ask-box > strong { font: bold 13px var(--ui); }
.ask-box p { font-size: 12px; }

/* Upload-Fenster mit Block-Fortschritt */
.up-total { height: 14px; margin: 6px 10px; background: var(--field); border: 1px solid; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); }
.up-total div { background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 10px); }
#upList li { font-size: 12px; }
#upList .s { font: 11px var(--mono); }
#upList .bar { height: 8px; border-radius: 0; background: var(--field); border: 1px solid var(--line); }
#upList .bar i { background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 7px); }

/* Auswahl-Leiste = Toolbar */
.selbar {
  background: linear-gradient(var(--title-a), var(--title-b));
  border-bottom: 1px solid var(--bev-dk); box-shadow: inset 0 1px 0 var(--bev-hi), var(--shadow);
}
.sel-info strong { font: bold 13px var(--ui); }
.sel-info span { font: 11px var(--mono); }
.sel-btn { box-shadow: none; padding: 4px 9px; margin-left: 2px; }

/* Teilen-Dialog */
.share-list li { border-radius: 0; border: 1px solid var(--line); background: var(--field); }
.share-list .meta strong { font: bold 12px var(--ui); }
.share-list .meta span { font: 11px var(--mono); }
.share-url input { font: 11px var(--mono) !important; }
.check-row { border-radius: 0; border: 1px dotted var(--line); background: var(--field); }
.check-row strong { font: bold 12px var(--ui); }
.strip-badge { color: var(--accent); }
.pick-row { border-radius: 0; }
.pick-row:hover { background: var(--sel); color: #fff; }
.pick-row:hover small { color: #dfe6ef; }
.pick-cover { border-radius: 0; border: 1px solid var(--line); }
#pickBody .chip-x { border-radius: 0; }

/* Toast = kleines Hinweisfenster */
.toast {
  border-radius: 0; font: 12px var(--mono); background: var(--surface); color: var(--text);
  border: 1px solid; border-color: var(--bev-hi) var(--bev-dk) var(--bev-dk) var(--bev-hi); box-shadow: var(--shadow);
  padding: 7px 12px;
}
.toast::before { content: "i"; display: inline-grid; place-items: center; width: 15px; height: 15px; font: bold 11px var(--ui); color: #fff; background: var(--accent); margin-right: 2px; }
#toastAction { color: var(--accent); text-decoration: underline; font: bold 12px var(--ui); }

/* Drag & Drop */
.drop { background: rgba(40, 40, 36, .45); backdrop-filter: none; }
.drop-inner { border-radius: 0; border: 2px dashed #fff; font-family: var(--ui); }
.drop-inner strong { font: bold 18px var(--ui); }

/* ---------- Login ---------- */
.login-card { padding: 0 20px 20px; gap: 12px; }
.login-card::before {
  content: "Anmeldung – KEINEWOLKE Fileserver"; display: block; margin: 0 -20px 10px; padding: 5px 10px; text-align: left;
  font: bold 12px var(--ui); color: #fff;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--title-b)));
}
.brand.big { font: bold 18px var(--mono); }
.login-card p { font-size: 12px; }
.login-card input { padding: 7px 8px; }
.login-card .btn { padding: 7px; }

/* ---------- Großansicht ---------- */
.lb-top {
  background: linear-gradient(#2c2d31, #1b1c1f);
  border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 #44454a;
  padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px;
}
.lb-title strong { font: bold 12px var(--ui); }
.lb-title span { font: 11px var(--mono); }
.icon-btn.light { border-radius: 0; width: 34px; height: 30px; }
.icon-btn.light:hover { background: #3a3b40; border-color: #55565c #0a0a0b #0a0a0b #55565c; }
.icon-btn.light.on[data-lb="select"] { background: var(--sel); }
.lb-nav {
  width: 34px; height: 54px; background: rgba(30, 30, 33, .85);
  border: 1px solid; border-color: #55565c #0a0a0b #0a0a0b #55565c;
}
.lb-info { background: #222326; border-left: 1px solid #000; box-shadow: inset 1px 0 0 #3c3d42; font-size: 12px; }
.lb-info .info-h { font: bold 10px var(--mono); color: #8d8b86; border-bottom: 1px dotted #45464b; padding-bottom: 3px; }
.lb-info dt { font-family: var(--mono); font-size: 11px; }
.chip-x { border-radius: 0; background: #34353a; font-size: 12px; }
.lb-info .tag-chip { background: transparent; border-color: #46474c; color: #ccc; box-shadow: none; }
.lb-info .btn.small { background: #34353a; color: #ddd; border-color: #4a4b50 #0a0a0b #0a0a0b #4a4b50; box-shadow: none; }
.tag-add input { background: #1a1b1e !important; border-color: #0a0a0b #46474c #46474c #0a0a0b !important; color: #eee !important; }

/* ---------- Editor ---------- */
.ed-top { background: linear-gradient(#2c2d31, #1b1c1f); border-bottom: 1px solid #000; }
.ed-top strong { font: bold 12px var(--ui); }
.ed-tools { background: #202124; border-top: 1px solid #000; box-shadow: inset 0 1px 0 #3c3d42; }
.tool {
  border-radius: 0; font: 12px var(--ui); background: linear-gradient(#36373c, #2a2b2f);
  border: 1px solid; border-color: #55565c #0a0a0b #0a0a0b #55565c;
}
.tool.active { background: #d8d6d0; color: #111; border-color: #0a0a0b #fff #fff #0a0a0b; }
.btn.ghost { color: #eee; background: linear-gradient(#36373c, #2a2b2f); border-color: #55565c #0a0a0b #0a0a0b #55565c; box-shadow: none; }
.crop-box .h::after { border-width: 3px; }
.trim-bar, .trim-sel { border-radius: 0; }
.trim-info { font-family: var(--mono); }

/* ---------- Statusleiste ---------- */
.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 18; height: 24px;
  display: flex; align-items: stretch; gap: 3px; padding: 2px 3px;
  font: 11px var(--mono); color: var(--text);
  background: var(--surface); border-top: 1px solid var(--bev-hi); box-shadow: 0 -1px 0 var(--bev-lo);
}
.statusbar span {
  display: flex; align-items: center; gap: 6px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo);
}
.statusbar .sb-path { flex: 1; min-width: 0; }
.statusbar .dot { width: 7px; height: 7px; background: #3f8f4f; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.statusbar .dot.off { background: #a33; }
.uploads { bottom: 34px; }
@media (min-width: 1100px) { .statusbar { left: 0; } }
@media (max-width: 760px) {
  .statusbar .sb-count, .statusbar .sb-ver { display: none; }
  .uploads { bottom: 32px; }
  .brand-text::after { content: none; }
}
#uploads:not([hidden]) ~ .statusbar { z-index: 18; }
.toast { bottom: 36px; }

/* ---------- Sortieren & Filtern (Retro) ---------- */
.sort-btn { padding: 5px 10px; }
.sort-btn svg { width: 14px; height: 14px; }
.sort-btn.on { color: var(--text); font-weight: bold; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); box-shadow: inset 1px 1px 0 var(--bev-dk); background: var(--surface-2); }
.sort-count { border-radius: 0; font: bold 10px var(--mono); background: var(--sel); color: #fff; height: 15px; min-width: 15px; }
.filter-panel {
  border-radius: 0; background: var(--surface); padding: 0;
  border: 1px solid; border-color: var(--bev-hi) var(--bev-dk) var(--bev-dk) var(--bev-hi);
  box-shadow: inset -1px -1px 0 var(--bev-lo), var(--shadow);
}
.fp-title {
  padding: 4px 4px 4px 10px; margin-bottom: 10px; font: bold 12px var(--ui); color: #fff;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--title-b)));
}
.fp-title .icon-btn {
  width: 18px; height: 16px; color: var(--text); background: var(--surface);
  border: 1px solid; border-color: var(--bev-hi) var(--bev-dk) var(--bev-dk) var(--bev-hi);
}
.fp-title .icon-btn svg { width: 11px; height: 11px; stroke-width: 2.4; }
/* klassischer Gruppenrahmen */
.filter-panel fieldset { border-radius: 0; border: 1px solid var(--bev-lo); box-shadow: 1px 1px 0 var(--bev-hi), inset 1px 1px 0 var(--bev-hi); padding: 6px 10px 10px; }
.filter-panel legend { font: 12px var(--ui); color: var(--text); padding: 0 4px; }
.fp-radio, .fp-check { font-size: 12px; }
.fp-row label, .fp-grid label { font-size: 12px; color: var(--text); }
.filter-panel input[type=date], .filter-panel select {
  border-radius: 0; background: var(--field); font: 12px var(--ui);
  border: 1px solid; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); box-shadow: inset 1px 1px 0 var(--bev-dk);
}
.fp-presets .btn { padding: 3px 8px; font-size: 11px; }
.fp-foot { border-top: 1px solid var(--bev-lo); box-shadow: inset 0 1px 0 var(--bev-hi); }
.fp-foot span { font: 11px var(--mono); }
.active-filters { padding-top: 10px; }
.af-sort { font: 11px var(--mono); }
.af-chip {
  border-radius: 0; font: 11px var(--ui); color: var(--text); background: var(--field);
  border: 1px solid; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); padding: 2px 4px 2px 8px;
}
.af-chip b { font: bold 11px var(--mono); color: var(--muted); }
.af-chip:hover b { color: #a3262a; }
.af-reset { font: 11px var(--ui); color: var(--accent); }
@media (max-width: 760px) {
  .topbar { gap: 5px; padding-left: 10px; padding-right: 10px; }
  .topbar .chip { padding: 4px 7px; font-size: 11px; }
  .sort-btn { padding: 4px 6px; }
  #uploadBtn { padding: 4px 9px; }
  #menuBtn { width: 30px; }
  .nav-btn { width: 32px; margin-left: -4px; }
}
.up-x { border-radius: 0; font: bold 13px var(--mono); }
.up-x:hover { background: var(--surface-2); color: #a3262a; }
.uploads header .up-cancel { color: var(--text); padding: 1px 7px; font-size: 11px; box-shadow: none; }

/* ---------- LUT (Retro) ---------- */
.lutp-bar { background: linear-gradient(#2c2d31, #1b1c1f); border-top: 1px solid #000; box-shadow: inset 0 1px 0 #44454a; font: 11px var(--mono); }
.lutp-btn {
  border-radius: 0; font: 12px var(--ui); background: linear-gradient(#3a3b40, #2a2b2f);
  border: 1px solid; border-color: #5a5b61 #0a0a0b #0a0a0b #5a5b61;
}
.lutp-btn:active, .lutp-btn.on { background: #d8d6d0; color: #111; border-color: #0a0a0b #fff #fff #0a0a0b; }
.lutp-name { color: #a9c3e4; }
.lutp-load { font: 12px var(--mono); }
.lut-menu {
  border-radius: 0; background: #26272a; padding: 0 0 6px;
  border: 1px solid; border-color: #55565c #000 #000 #55565c; box-shadow: 2px 2px 0 rgba(0,0,0,.6); font: 12px var(--ui);
}
.lm-title { padding: 4px 10px; margin-bottom: 4px; color: #fff; font: bold 12px var(--ui);
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #2a2b2f)); }
.lm-row { border-radius: 0; margin: 0 4px; }
.lm-row:hover { background: var(--sel); color: #fff; }
.lm-row small { font: 10px var(--mono); }
.lm-foot { border-top: 1px dotted #45464b; margin: 6px 4px 0; }
.lm-foot .btn.small { background: linear-gradient(#3a3b40, #2a2b2f); color: #eee; border-color: #5a5b61 #0a0a0b #0a0a0b #5a5b61; box-shadow: none; }
.lut-row { border-radius: 0; background: var(--field); border: 1px solid var(--line); }
.lut-name small { font: 10px var(--mono); }
.lut-cams label { font-size: 12px; }
.lut-cams select { border-radius: 0; background: var(--field); border: 1px solid; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); font: 12px var(--ui); }