diff --git a/TODO.md b/TODO.md
new file mode 100644
index 0000000..6a842c5
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,217 @@
+# U-Navigator – TODO
+
+Stand: 2026-07-14
+
+Ziel dieser Liste ist eine sichere, testbare und veröffentlichungsfähige Version des Plugins. Schreibzugriff sollte erst empfohlen werden, wenn alle Punkte unter P0 abgeschlossen und auf einer echten Unraid-Installation geprüft sind.
+
+## P0 – Sicherheitsblocker
+
+### Geschützte Root-Pfade
+
+- [ ] Eine zentrale Funktion `unav_assert_mutable_path()` einführen.
+- [ ] Löschen eines konfigurierten Root-Pfads verbieten.
+- [ ] Verschieben und Umbenennen eines konfigurierten Root-Pfads verbieten.
+- [ ] Rekursive Rechte- oder Besitzeränderungen direkt am Root-Pfad verbieten.
+- [ ] Quelle und Ziel auch im Worker unmittelbar vor der Operation erneut prüfen.
+- [ ] API-Tests für Delete, Move und Permissions auf `/mnt/user` beziehungsweise einem Test-Root ergänzen.
+
+Abnahmekriterium: Kein mutierender API-Aufruf kann den erlaubten Root selbst verändern oder entfernen.
+
+### Sichere Symlink-Behandlung
+
+- [ ] Eingabepfad und kanonischen Sicherheitspfad getrennt speichern.
+- [ ] Für Dateioperationen `lstat()` statt ausschließlich `realpath()` verwenden.
+- [ ] Beim Löschen eines Symlinks ausschließlich den Link entfernen, niemals dessen Ziel.
+- [ ] Copy und Move von Symlinks entweder kontrolliert implementieren oder ausdrücklich ablehnen.
+- [ ] Symlinks auf Ziele außerhalb erlaubter Roots für Listing, Vorschau und Download weiterhin blockieren.
+- [ ] Rekursive Operationen dürfen Symlinks nicht verfolgen.
+- [ ] Tests für interne Symlinks, externe Symlinks, kaputte Symlinks und Symlink-Schleifen ergänzen.
+
+Abnahmekriterium: Eine Aktion auf einem Symlink wirkt niemals unerwartet auf dessen Ziel.
+
+### Upload-Pfade härten
+
+- [ ] Relative Pfade vollständig validieren; `..` nicht still entfernen, sondern als Fehler ablehnen.
+- [ ] Absolute Pfade, Nullbytes und leere Pfadsegmente ablehnen.
+- [ ] Jeden Parent-Pfad prüfen, bevor ein Verzeichnis angelegt wird.
+- [ ] Beim Anlegen von Upload-Ordnern keine vorhandenen Symlinks durchlaufen.
+- [ ] Zielpfad unmittelbar vor Schreiben beziehungsweise Rename erneut validieren.
+- [ ] Temporäre Upload-Dateien in einem privaten Verzeichnis ablegen und zufällige IDs verwenden.
+- [ ] Abgebrochene und veraltete Upload-Fragmente automatisch entfernen.
+- [ ] Tests für Symlink-Parents und konkurrierende Pfadänderungen ergänzen.
+
+Abnahmekriterium: Ein Upload kann außerhalb der erlaubten Roots weder Dateien noch Verzeichnisse erzeugen.
+
+### CSRF und Request-Schutz
+
+- [ ] Auf einer aktuellen Unraid-7.x-Installation prüfen, ob die WebGUI-Schicht Plugin-PHP-Endpunkte automatisch gegen CSRF schützt.
+- [ ] Direkte POST-Requests ohne, mit falschem und mit gültigem `csrf_token` testen.
+- [ ] Falls nötig, CSRF-Prüfung zentral in `common.php` implementieren.
+- [ ] Mutierende Endpunkte ausschließlich per POST erlauben.
+- [ ] Für nicht erlaubte Methoden `405 Method Not Allowed` und einen `Allow`-Header liefern.
+- [ ] Für JSON- und Formular-Requests dieselben Schutzregeln anwenden.
+- [ ] Authentifizierungsverhalten bei direktem Aufruf aller API-Endpunkte prüfen und dokumentieren.
+
+Abnahmekriterium: Kein mutierender Aufruf funktioniert ohne gültige Unraid-Sitzung und gültigen CSRF-Schutz.
+
+### Ressourcenlimits
+
+- [ ] Maximale Upload-Dateigröße konfigurierbar machen.
+- [ ] Maximale Gesamtgröße und Dateianzahl pro Upload begrenzen.
+- [ ] Raw-Uploads streamen, statt den gesamten Request in den PHP-Speicher zu laden.
+- [ ] Maximale Dateianzahl und Gesamtgröße für ZIP-Downloads festlegen.
+- [ ] Vor ZIP-Erstellung freien temporären Speicher prüfen.
+- [ ] ZIP-Erstellung als Hintergrundjob ausführen.
+- [ ] Laufzeit- und Rekursionstiefenlimits für Size, Copy, Delete und Permissions einführen.
+- [ ] Große Verzeichnisse im Listing paginieren oder begrenzen.
+
+Abnahmekriterium: Einzelne Requests können weder PHP-Speicher noch temporären Speicher unkontrolliert erschöpfen.
+
+## P1 – Datenintegrität und Jobs
+
+### Robuste Copy-/Move-Operationen
+
+- [ ] Kopien zunächst unter einem temporären Zielnamen erstellen.
+- [ ] Ziel erst nach erfolgreicher vollständiger Kopie atomar sichtbar machen.
+- [ ] Unvollständige Ziele bei Fehlern zuverlässig entfernen.
+- [ ] Quelle bei einem Cross-Filesystem-Move erst nach verifizierter Kopie löschen.
+- [ ] Dateigröße und optional Prüfsumme vor dem Löschen der Quelle vergleichen.
+- [ ] Rechte, Owner, Gruppe und Zeitstempel erhalten.
+- [ ] Verhalten für Sparse Files, Hardlinks und Special Files definieren.
+- [ ] Zielkonflikte auch unmittelbar vor dem finalen Rename prüfen.
+- [ ] Tests für Fehler mitten in einer Verzeichniskopie ergänzen.
+
+### Job-System
+
+- [ ] Job-Verzeichnis mit `0700` statt `0777` erstellen.
+- [ ] Jobdateien atomar über temporäre Datei plus Rename schreiben.
+- [ ] Beim Lesen passende Locks beziehungsweise atomare Snapshots verwenden.
+- [ ] Kryptografisch zufällige Job-IDs verwenden.
+- [ ] Prüfen, ob der Worker wirklich gestartet ist; nicht nur den Shell-Exitcode auswerten.
+- [ ] Hängende Jobs nach Timeout als fehlgeschlagen markieren.
+- [ ] Abbruch-Endpunkt für laufende Jobs implementieren.
+- [ ] Abbruchstatus in rekursiven Operationen regelmäßig prüfen.
+- [ ] Abbruchschaltfläche im Transfer-Panel ergänzen.
+- [ ] Alte abgeschlossene Jobs automatisch löschen.
+- [ ] Gleichzeitige, kollidierende Jobs auf denselben Pfaden erkennen und serialisieren oder ablehnen.
+- [ ] Jobfehler mit verständlicher Meldung und technischem Logeintrag trennen.
+
+### Löschschutz
+
+- [ ] Optionalen Papierkorb pro Root implementieren.
+- [ ] Direktes permanentes Löschen als gesonderte Aktion behandeln.
+- [ ] Anzahl und geschätzte Größe vor rekursivem Löschen anzeigen.
+- [ ] Mehrfachauswahl vor dem Start vollständig validieren.
+- [ ] Optional eine zweite Bestätigung für sehr große Löschvorgänge verlangen.
+
+## P1 – Tests
+
+### PHP-Backend testen
+
+- [ ] Eigenständige Tests für die tatsächlich ausgelieferten PHP-Endpunkte aufbauen.
+- [ ] Die Tests in einer Unraid-kompatiblen PHP-Version ausführen.
+- [ ] Listing innerhalb und außerhalb erlaubter Roots testen.
+- [ ] Upload, Download, Preview, Copy, Move, Delete, Size und Permissions testen.
+- [ ] Read-only-Modus für jede mutierende Aktion testen.
+- [ ] Zielkonflikte und ungültige Request-Methoden testen.
+- [ ] Sonderzeichen, Unicode, sehr lange Namen und versteckte Dateien testen.
+- [ ] Mehrere konfigurierte Roots testen.
+- [ ] Regressionstests für alle P0-Sicherheitsfälle ergänzen.
+
+### CI und statische Prüfung
+
+- [ ] `php -l` für alle PHP-Dateien in CI ausführen.
+- [ ] JavaScript-Syntaxprüfung ausführen.
+- [ ] ShellCheck für `build-plugin.sh` aktivieren.
+- [ ] XML beziehungsweise PLG-Manifest validieren.
+- [ ] Paket bauen und mit den Quellen vergleichen.
+- [ ] Manifest-Prüfsumme automatisch verifizieren.
+- [ ] Tests bei jedem Push und Pull Request ausführen.
+
+### Test auf echter Unraid-Instanz
+
+- [ ] Installation auf unterstützten Unraid-Versionen testen.
+- [ ] Upgrade von einer vorherigen Plugin-Version testen.
+- [ ] Deinstallation und Neuinstallation testen.
+- [ ] Verhalten bei gestopptem und gestartetem Array prüfen.
+- [ ] User Shares, Pools und Disk Shares getrennt prüfen.
+- [ ] Große Ordner und große Dateien testen.
+- [ ] WebGUI-Neustart und Server-Neustart während laufender Jobs testen.
+- [ ] Alle offiziellen Themes und mobile Darstellung prüfen.
+
+## P2 – Konfiguration und Bedienung
+
+### Root-Konfiguration
+
+- [ ] Erlaubte Roots in `settings.json` speichern.
+- [ ] Einstellungsoberfläche zum Hinzufügen und Entfernen von Roots bauen.
+- [ ] Nur existierende absolute Verzeichnisse akzeptieren.
+- [ ] Gefährliche Systempfade wie `/`, `/boot`, `/etc`, `/usr`, `/var` und `/root` standardmäßig verbieten.
+- [ ] Pro Root einen Anzeigenamen und Read-only-Status erlauben.
+- [ ] Änderungen an Roots erst nach erneuter serverseitiger Validierung übernehmen.
+- [ ] Root-Auswahl im Explorer anbieten.
+
+### Dateimanager-Funktionen
+
+- [ ] Neuen Ordner anlegen.
+- [ ] Leere Datei anlegen.
+- [ ] Umbenennen mit serverseitiger Namensvalidierung verbessern.
+- [ ] Suche nach Dateiname im aktuellen Ordner implementieren.
+- [ ] Optionale rekursive Suche mit Ergebnislimit ergänzen.
+- [ ] Sortierung nach Name, Typ, Größe und Änderungsdatum anbieten.
+- [ ] Versteckte Dateien ein- und ausblendbar machen.
+- [ ] Breadcrumb-Navigation ergänzen.
+- [ ] Dateibaum beziehungsweise Share-Navigation ergänzen.
+- [ ] Tastaturbedienung für Auswahl, Öffnen, Kopieren, Verschieben und Löschen verbessern.
+
+### Transfer-Oberfläche
+
+- [ ] Reale Fortschrittswerte nach Bytes statt nur nach Top-Level-Einträgen berechnen.
+- [ ] Quelle, Ziel, Geschwindigkeit und Restzeit anzeigen.
+- [ ] Fehlgeschlagene Jobs wiederholbar machen.
+- [ ] Abgeschlossene Einträge einzeln oder gesammelt entfernen.
+- [ ] Uploads pausieren und abbrechen können.
+
+### Vorschau und Download
+
+- [ ] MIME-Typ anhand des Dateiinhalts prüfen, nicht nur anhand der Erweiterung.
+- [ ] SVG-Vorschau sicher behandeln oder deaktivieren.
+- [ ] Medien- und PDF-Vorschau mit geeigneten Sandbox-Headern testen.
+- [ ] HTTP-Range-Requests für große Audio- und Videodateien unterstützen.
+- [ ] RFC-konforme UTF-8-Dateinamen im `Content-Disposition`-Header verwenden.
+- [ ] Einzeldateien streamen, ohne unnötige Pufferung.
+
+## P2 – Protokollierung und Betrieb
+
+- [ ] Audit-Log für Upload, Copy, Move, Delete und Permissions einführen.
+- [ ] Zeitpunkt, Aktion, Quelle, Ziel, Ergebnis und Fehler protokollieren.
+- [ ] Keine CSRF-Tokens oder sensiblen Inhalte ins Debug-Log schreiben.
+- [ ] Logrotation und maximale Loggröße definieren.
+- [ ] Diagnoseexport für Supportfälle anbieten.
+- [ ] Gesundheitsstatus für Job-Worker und temporären Speicher anzeigen.
+
+## P3 – Paketierung und Veröffentlichung
+
+- [ ] Version nur an einer Stelle pflegen und beim Build überall einsetzen.
+- [ ] `package.json`-Version mit der Plugin-Version synchronisieren.
+- [ ] Reproduzierbare TGZ-Pakete mit stabiler Sortierung und Zeitstempeln erzeugen.
+- [ ] Nach Möglichkeit SHA-256 zusätzlich zur MD5-Prüfung veröffentlichen.
+- [ ] Minimale und getestete Unraid-Version im Plugin-Manifest angeben.
+- [ ] Changelog pro Version vollständig pflegen.
+- [ ] Release-Build in einer sauberen Working Copy erzeugen.
+- [ ] Community-Applications-Metadaten validieren.
+- [ ] Installations-, Update- und Rollback-Anleitung ergänzen.
+- [ ] Sicherheitsmodell und bekannte Einschränkungen dokumentieren.
+- [ ] Read-only als empfohlenen Standard deutlich in README und Oberfläche anzeigen.
+
+## Definition of Done für die erste produktive Version
+
+- [ ] Alle P0-Punkte sind abgeschlossen.
+- [ ] PHP-Integrationstests decken alle mutierenden Operationen ab.
+- [ ] Keine Root- oder Symlink-Regression ist offen.
+- [ ] CSRF und Authentifizierung sind auf echter Unraid-Hardware bestätigt.
+- [ ] Große Uploads, Downloads und Verzeichnisse besitzen getestete Limits.
+- [ ] Fehlgeschlagene Copy-/Move-Jobs hinterlassen keine unbemerkten Teildaten.
+- [ ] Installation, Upgrade, Neustart und Deinstallation wurden getestet.
+- [ ] Paketinhalt und Manifest-Prüfsumme stimmen überein.
+- [ ] Dokumentation und Changelog entsprechen dem ausgelieferten Funktionsumfang.
diff --git a/build-plugin.sh b/build-plugin.sh
index f4bfe08..ba7c4d3 100755
--- a/build-plugin.sh
+++ b/build-plugin.sh
@@ -2,7 +2,7 @@
 set -eu
 
 PLUGIN="u-navigator"
-VERSION="2026.07.04.r007"
+VERSION="2026.07.14.r008"
 PKG_DIR="packages"
 WORK_DIR=".plugin-build"
 PKG_NAME="${PLUGIN}-${VERSION}.tgz"
diff --git a/packages/u-navigator-2026.07.14.r008.tgz b/packages/u-navigator-2026.07.14.r008.tgz
new file mode 100644
index 0000000..4d5e7d8
Binary files /dev/null and b/packages/u-navigator-2026.07.14.r008.tgz differ
diff --git a/plugin-root/usr/local/emhttp/plugins/u-navigator/U-Navigator.page b/plugin-root/usr/local/emhttp/plugins/u-navigator/U-Navigator.page
index 08ac58d..24f2bba 100644
--- a/plugin-root/usr/local/emhttp/plugins/u-navigator/U-Navigator.page
+++ b/plugin-root/usr/local/emhttp/plugins/u-navigator/U-Navigator.page
@@ -11,26 +11,7 @@ $plugin = "u-navigator";
 $version = "__VERSION__";
 ?>
 <link rel="stylesheet" href="/plugins/<?=$plugin?>/assets/styles.css?v=<?=$version?>">
-<div class="u-nav app-shell">
-  <header class="topbar">
-    <div>
-      <h1>U-Navigator</h1>
-      <p id="statusText">Initialisiere...</p>
-    </div>
-    <nav class="toolbar" aria-label="Workspace actions">
-      <button id="newExplorerButton" title="Explorer oeffnen">Explorer</button>
-      <button id="newPropertiesButton" title="Eigenschaften oeffnen">Eigenschaften</button>
-      <button id="newQueueButton" title="Transfers einblenden" aria-expanded="false">Transfers</button>
-      <button id="settingsButton" class="icon" title="Einstellungen" aria-label="Einstellungen" aria-expanded="false">
-        <svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-          <path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z"></path>
-          <path d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 1.55V21a2 2 0 1 1-4 0v-.08A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.55-1H3a2 2 0 1 1 0-4h.08A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.34-1.88l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.55V3a2 2 0 1 1 4 0v.08A1.7 1.7 0 0 0 15 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9a1.7 1.7 0 0 0 1.55 1H21a2 2 0 1 1 0 4h-.08A1.7 1.7 0 0 0 19.4 15Z"></path>
-        </svg>
-      </button>
-    </nav>
-  </header>
-  <main id="workspace" class="workspace" aria-label="U-Navigator Workspace"></main>
-</div>
+<div class="u-nav app-shell"></div>
 <script>
 window.UNAV_API_BASE = "/plugins/<?=$plugin?>/api";
 window.UNAV_VERSION = "<?=$version?>";
diff --git a/server/public/app.js b/server/public/app.js
index 109db97..7ec2b8a 100644
--- a/server/public/app.js
+++ b/server/public/app.js
@@ -1,2583 +1,860 @@
-const workspace = document.querySelector('#workspace');
-const appShell = document.querySelector('.u-nav');
-const statusText = document.querySelector('#statusText');
-const transferButton = document.querySelector('#newQueueButton');
-const settingsButton = document.querySelector('#settingsButton');
+const root = document.querySelector('.u-nav') || document.querySelector('.app-shell');
 const API_BASE = window.UNAV_API_BASE || '/api';
+const PHP_API = Boolean(window.UNAV_API_BASE);
 const APP_VERSION = window.UNAV_VERSION || 'dev';
+
 const state = {
   config: null,
-  windows: [],
-  focusedId: null,
-  selectedEntry: null,
-  contextMenu: null,
-  permissionsDialog: null,
-  uploadConflictDialog: null,
-  uiDialog: null,
-  draggedEntry: null,
-  pointerDrag: null,
-  suppressClickPath: null,
-  suppressItemActivationUntil: 0,
-  debug: [],
-  nextDebugId: 1,
+  path: '',
+  entries: [],
+  loading: true,
+  error: null,
+  selected: new Set(),
+  anchor: null,
+  query: '',
+  view: localStorage.getItem('unav-view') || 'list',
+  sort: { key: 'name', direction: 'asc' },
+  history: [],
+  historyIndex: -1,
+  detailsOpen: localStorage.getItem('unav-details') !== 'closed',
+  sidebarOpen: true,
+  drawer: null,
+  preview: null,
+  previewLoading: false,
   jobs: new Map(),
-  uploadTransfers: new Map(),
-  nextUploadTransferId: 1,
-  jobRefresh: new Map(),
-  sizeJobs: new Map(),
-  sizeResults: new Map(),
-  transferPanelVisible: false,
-  transferPanelClosing: false,
-  transferAutoHideTimer: null,
-  settingsPanelVisible: false,
-  typeAhead: {
-    key: '',
-    windowId: null,
-    at: 0
-  },
-  nextWindowId: 1,
-  zIndex: 20
+  uploads: [],
+  context: null,
+  status: 'Initialisiere …'
 };
 
-const icons = {
-  directory: 'Folder',
-  file: 'File',
-  symlink: 'Link',
-  other: 'Item'
-};
-const uiIcons = {
-  arrowLeft: '<path d="M15 18 9 12l6-6"></path>',
-  arrowRight: '<path d="m9 18 6-6-6-6"></path>',
-  close: '<path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>',
-  delete: '<path d="M4 7h16"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M6 7l1 14h10l1-14"></path><path d="M9 7V4h6v3"></path>',
-  enter: '<path d="M7 8 3 12l4 4"></path><path d="M3 12h12a4 4 0 0 0 4-4V5"></path>',
-  folderUpload: '<path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path><path d="M12 16v-6"></path><path d="m9 13 3-3 3 3"></path>',
+const iconPaths = {
+  logo: '<path d="M3 7.5h7l2-2h9v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path><path d="M3 10h18"></path>',
+  back: '<path d="m15 18-6-6 6-6"></path>',
+  forward: '<path d="m9 18 6-6-6-6"></path>',
+  up: '<path d="m6 15 6-6 6 6"></path>',
+  refresh: '<path d="M20 6v5h-5"></path><path d="M4 18v-5h5"></path><path d="M19 11a7 7 0 0 0-12-5L4 9"></path><path d="M5 13a7 7 0 0 0 12 5l3-3"></path>',
+  search: '<circle cx="11" cy="11" r="7"></circle><path d="m20 20-4-4"></path>',
+  upload: '<path d="M12 16V4"></path><path d="m7 9 5-5 5 5"></path><path d="M5 16v4h14v-4"></path>',
+  folderUpload: '<path d="M3 7h7l2 2h9v10H3Z"></path><path d="M12 17v-6"></path><path d="m9 14 3-3 3 3"></path>',
+  list: '<path d="M9 6h11M9 12h11M9 18h11"></path><path d="M4 6h.01M4 12h.01M4 18h.01"></path>',
   grid: '<rect x="4" y="4" width="6" height="6" rx="1"></rect><rect x="14" y="4" width="6" height="6" rx="1"></rect><rect x="4" y="14" width="6" height="6" rx="1"></rect><rect x="14" y="14" width="6" height="6" rx="1"></rect>',
-  list: '<path d="M9 6h11"></path><path d="M9 12h11"></path><path d="M9 18h11"></path><path d="M4 6h.01"></path><path d="M4 12h.01"></path><path d="M4 18h.01"></path>',
-  maximize: '<rect x="5" y="5" width="14" height="14" rx="2"></rect>',
-  minimize: '<path d="M8 4h12v12"></path><path d="M4 8h12v12H4Z"></path>',
-  refresh: '<path d="M20 6v5h-5"></path><path d="M4 18v-5h5"></path><path d="M19 11a7 7 0 0 0-12-4.9L4 9"></path><path d="M5 13a7 7 0 0 0 12 4.9l3-2.9"></path>',
-  upload: '<path d="M12 16V5"></path><path d="m8 9 4-4 4 4"></path><path d="M5 16v3h14v-3"></path>'
+  info: '<circle cx="12" cy="12" r="9"></circle><path d="M12 11v6M12 7h.01"></path>',
+  transfer: '<path d="M7 7h12"></path><path d="m15 3 4 4-4 4"></path><path d="M17 17H5"></path><path d="m9 13-4 4 4 4"></path>',
+  settings: '<circle cx="12" cy="12" r="3"></circle><path d="M19 15a2 2 0 0 0 .4 2.2l.1.1-2.2 2.2-.1-.1A2 2 0 0 0 15 19l-.4.2V21h-3.2v-1.8L11 19a2 2 0 0 0-2.2.4l-.1.1-2.2-2.2.1-.1A2 2 0 0 0 7 15l-.2-.4H5v-3.2h1.8L7 11a2 2 0 0 0-.4-2.2l-.1-.1 2.2-2.2.1.1A2 2 0 0 0 11 7l.4-.2V5h3.2v1.8l.4.2a2 2 0 0 0 2.2-.4l.1-.1 2.2 2.2-.1.1A2 2 0 0 0 19 11l.2.4H21v3.2h-1.8Z"></path>',
+  more: '<circle cx="5" cy="12" r="1"></circle><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle>',
+  close: '<path d="M18 6 6 18M6 6l12 12"></path>',
+  folder: '<path d="M3 7h7l2 2h9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path>',
+  file: '<path d="M6 3h8l4 4v14H6Z"></path><path d="M14 3v5h5"></path>',
+  link: '<path d="M10 13a5 5 0 0 0 7.5.5l2-2a5 5 0 0 0-7-7l-1.1 1"></path><path d="M14 11a5 5 0 0 0-7.5-.5l-2 2a5 5 0 0 0 7 7l1.1-1"></path>',
+  image: '<rect x="3" y="4" width="18" height="16" rx="2"></rect><circle cx="8" cy="9" r="1.5"></circle><path d="m4 17 5-5 4 4 2-2 5 4"></path>',
+  video: '<rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="m10 9 5 3-5 3Z"></path>',
+  music: '<path d="M9 18V5l10-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="16" cy="16" r="3"></circle>',
+  archive: '<path d="M5 3h14v18H5Z"></path><path d="M9 3v4h6V3M9 11h6"></path>',
+  code: '<path d="m8 9-4 3 4 3M16 9l4 3-4 3M14 5l-4 14"></path>',
+  download: '<path d="M12 4v11"></path><path d="m7 11 5 5 5-5"></path><path d="M5 20h14"></path>',
+  edit: '<path d="m4 20 4.5-1 10-10a2.1 2.1 0 0 0-3-3l-10 10Z"></path><path d="m14 7 3 3"></path>',
+  copy: '<rect x="8" y="8" width="12" height="12" rx="2"></rect><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"></path>',
+  move: '<path d="M5 12h14M15 8l4 4-4 4"></path>',
+  trash: '<path d="M4 7h16M9 7V4h6v3M7 7l1 14h8l1-14"></path>',
+  check: '<path d="m5 12 4 4L19 6"></path>',
+  chevron: '<path d="m9 18 6-6-6-6"></path>'
 };
-const previewExtensions = new Set(['txt', 'log', 'md', 'rd', 'rst', 'yaml', 'yml', 'json', 'xml', 'csv', 'tsv', 'ini', 'cfg', 'conf', 'env', 'toml', 'sql', 'nfo', 'srt', 'sub', 'vtt', 'm3u', 'm3u8', 'pls', 'sh', 'bash', 'zsh', 'php', 'js', 'ts', 'tsx', 'jsx', 'css', 'html', 'py', 'go', 'rs', 'java', 'c', 'cpp', 'h', 'hpp', 'bat', 'ps1', 'properties', 'service', 'timer', 'mount', 'rules', 'cron', 'plg', 'page', 'jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'pdf', 'mp3', 'flac', 'm4a', 'ogg', 'wav', 'mp4', 'mkv', 'webm', 'mov']);
-const previewFilenames = new Set(['dockerfile', 'makefile']);
 
-document.querySelector('#newExplorerButton').addEventListener('click', () => openExplorer());
-document.querySelector('#newPropertiesButton').addEventListener('click', () => openProperties());
-transferButton.addEventListener('click', () => toggleTransferPanel());
-settingsButton.addEventListener('click', () => toggleSettingsPanel());
-window.addEventListener('error', (event) => {
-  recordDebug('window.error', {
-    message: event.message,
-    source: event.filename,
-    line: event.lineno,
-    column: event.colno,
-    error: serializeError(event.error)
-  });
-});
-window.addEventListener('unhandledrejection', (event) => {
-  recordDebug('window.unhandledrejection', { reason: serializeError(event.reason) });
-});
-document.addEventListener('keydown', handleTypeAheadKey);
+const previewable = new Set(['txt', 'log', 'md', 'json', 'xml', 'yaml', 'yml', 'ini', 'cfg', 'conf', 'toml', 'csv', 'tsv', 'sh', 'js', 'ts', 'css', 'html', 'php', 'py', 'go', 'rs', 'java', 'c', 'cpp', 'h', 'jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'pdf', 'mp3', 'flac', 'm4a', 'ogg', 'wav', 'mp4', 'mkv', 'webm', 'mov']);
 
 init();
 
 async function init() {
+  renderShell();
+  bindShell();
   try {
-    state.config = await api(apiUrl('config.php'));
-    if (!state.config.roots?.length) {
-      throw new Error('No U-Navigator roots configured');
-    }
-    updateStatusText();
-    openExplorer(state.config.roots[0].path);
+    state.config = await api(endpoint('config'));
+    if (!state.config.roots?.length) throw new Error('Kein verfügbarer Root-Pfad');
+    renderSidebar();
+    await navigate(state.config.roots[0].path, { replace: true });
   } catch (error) {
-    statusText.textContent = error.message;
+    state.loading = false;
+    state.error = error.message;
+    state.status = 'Verbindung fehlgeschlagen';
+    renderContent();
   }
 }
 
-function openExplorer(initialPath = state.config?.roots?.[0]?.path) {
-  if (!initialPath) {
-    statusText.textContent = 'Kein Root-Pfad konfiguriert';
-    return null;
-  }
-  const win = createWindow('Explorer', 'explorer', {
-    width: 760,
-    height: 460,
-    x: 24 + state.windows.length * 24,
-    y: 20 + state.windows.length * 20,
-    data: {
-      path: initialPath,
-      entries: [],
-      selectedPath: null,
-      selectedPaths: [],
-      selectionAnchorPath: null,
-      view: 'icons',
-      loading: false,
-      error: null
-    }
-  });
-  loadExplorer(win, initialPath);
-  return win;
-}
+function renderShell() {
+  root.classList.add('u-nav');
+  root.innerHTML = `
+    <div class="unav-frame">
+      <header class="app-header">
+        <button class="brand" type="button" data-action="home" aria-label="U-Navigator Startseite">
+          <span class="brand-mark">${icon('logo')}</span>
+          <span><strong>U-Navigator</strong><small>File browser</small></span>
+        </button>
+        <div class="header-search">
+          ${icon('search')}
+          <input id="searchInput" type="search" placeholder="In diesem Ordner suchen" autocomplete="off" aria-label="Dateien suchen">
+          <kbd>⌘ K</kbd>
+        </div>
+        <nav class="header-actions" aria-label="Anwendungsaktionen">
+          ${iconButton('transfer', 'Transfers', 'transfers', '<span id="transferBadge" class="action-badge" hidden>0</span>')}
+          ${iconButton('settings', 'Einstellungen', 'settings')}
+        </nav>
+      </header>
 
-function openProperties(entry = state.selectedEntry) {
-  if (entry) {
-    state.selectedEntry = entry;
-  }
+      <div class="browser-shell">
+        <aside id="sidebar" class="sidebar" aria-label="Orte"></aside>
 
-  const existing = state.windows.find((item) => item.kind === 'properties');
-  if (existing) {
-    focusWindow(existing);
-    render();
-    return existing;
-  }
+        <main class="content-shell">
+          <div class="nav-bar">
+            <div class="history-actions">
+              ${iconButton('back', 'Zurück', 'back')}
+              ${iconButton('forward', 'Vor', 'forward')}
+              ${iconButton('up', 'Übergeordneter Ordner', 'up')}
+            </div>
+            <nav id="breadcrumbs" class="breadcrumbs" aria-label="Pfad"></nav>
+            ${iconButton('refresh', 'Neu laden', 'refresh')}
+          </div>
 
-  return createWindow('Eigenschaften', 'properties', {
-    width: 420,
-    height: 320,
-    x: 160,
-    y: 90,
-    data: {}
-  });
-}
+          <div class="command-bar">
+            <div class="primary-actions">
+              <button class="action primary" type="button" data-action="upload">${icon('upload')}<span>Hochladen</span></button>
+              <button class="action" type="button" data-action="upload-folder">${icon('folderUpload')}<span>Ordner</span></button>
+              <span class="command-separator"></span>
+              <button class="action selection-action" type="button" data-action="download" disabled>${icon('download')}<span>Laden</span></button>
+              <button class="action selection-action" type="button" data-action="rename" disabled>${icon('edit')}<span>Umbenennen</span></button>
+              <button class="action selection-action" type="button" data-action="copy" disabled>${icon('copy')}<span>Kopieren</span></button>
+              <button class="action selection-action" type="button" data-action="move" disabled>${icon('move')}<span>Verschieben</span></button>
+              <button class="action danger selection-action" type="button" data-action="delete" disabled>${icon('trash')}<span>Löschen</span></button>
+            </div>
+            <div class="view-actions">
+              <span id="itemCount" class="item-count"></span>
+              ${iconButton('list', 'Listenansicht', 'view-list')}
+              ${iconButton('grid', 'Symbolansicht', 'view-grid')}
+              ${iconButton('info', 'Details', 'details')}
+            </div>
+          </div>
 
-function openPreview(entry, sourceWindowId = state.focusedId) {
-  if (!entry || !isPreviewable(entry)) {
-    showError(new Error('Für diesen Dateityp ist keine Vorschau verfügbar.'));
-    return null;
-  }
+          <div class="explorer-stage">
+            <section id="filePane" class="file-pane" aria-label="Dateien"></section>
+            <aside id="detailsPane" class="details-pane" aria-label="Details"></aside>
+          </div>
 
-  const existing = state.windows.find((item) => item.kind === 'preview');
-  if (existing) {
-    existing.data.entry = entry;
-    existing.data.sourceWindowId = sourceWindowId;
-    existing.data.content = '';
-    existing.data.loading = true;
-    existing.data.error = null;
-    focusWindow(existing);
-    render();
-    loadPreview(existing, entry);
-    return existing;
-  }
-
-  const win = createWindow('Vorschau', 'preview', {
-    width: 620,
-    height: 460,
-    x: 190,
-    y: 110,
-    data: {
-      entry,
-      sourceWindowId,
-      content: '',
-      loading: true,
-      error: null
-    }
-  });
-  loadPreview(win, entry);
-  return win;
-}
-
-function openQueue() {
-  showTransferPanel();
-  return null;
-}
-
-function createWindow(title, kind, options) {
-  const id = `win-${state.nextWindowId++}`;
-  const win = {
-    id,
-    kind,
-    title,
-    x: options.x,
-    y: options.y,
-    width: options.width,
-    height: options.height,
-    maximized: false,
-    zIndex: ++state.zIndex,
-    data: options.data || {}
-  };
-  state.windows.push(win);
-  state.focusedId = id;
-  render();
-  return win;
-}
-
-function render() {
-  workspace.innerHTML = '';
-  for (const win of state.windows) {
-    workspace.appendChild(renderWindow(win));
-  }
-  if (state.contextMenu) {
-    workspace.appendChild(renderContextMenu());
-  }
-  if (state.permissionsDialog) {
-    workspace.appendChild(renderPermissionsDialog());
-  }
-  if (state.uploadConflictDialog) {
-    workspace.appendChild(renderUploadConflictDialog());
-  }
-  if (state.uiDialog) {
-    workspace.appendChild(renderUiDialog());
-  }
-  renderTransferPanel();
-  renderSettingsPanel();
-}
-
-function renderWindow(win) {
-  const el = document.createElement('section');
-  el.className = `window ${state.focusedId === win.id ? 'focused' : ''} ${win.maximized ? 'maximized' : ''}`;
-  el.style.left = `${win.maximized ? 0 : win.x}px`;
-  el.style.top = `${win.maximized ? 0 : win.y}px`;
-  el.style.width = `${win.maximized ? workspace.clientWidth : win.width}px`;
-  el.style.height = `${win.maximized ? workspace.clientHeight : win.height}px`;
-  el.style.zIndex = win.zIndex;
-  el.dataset.windowId = win.id;
-  el.addEventListener('pointerdown', () => focusWindow(win));
-
-  const titlebar = document.createElement('div');
-  titlebar.className = 'titlebar';
-  titlebar.innerHTML = `
-    <strong>${escapeHtml(windowTitle(win))}</strong>
-    <div class="window-actions">
-      <button class="icon" data-action="maximize" title="Maximieren">${iconSvg(win.maximized ? 'minimize' : 'maximize')}</button>
-      <button class="icon" data-action="close" title="Schließen">${iconSvg('close')}</button>
-    </div>
-  `;
-  titlebar.addEventListener('pointerdown', (event) => startDragWindow(event, win));
-  titlebar.querySelector('[data-action="maximize"]').addEventListener('click', (event) => {
-    event.stopPropagation();
-    win.maximized = !win.maximized;
-    focusWindow(win);
-    render();
-  });
-  titlebar.querySelector('[data-action="close"]').addEventListener('click', (event) => {
-    event.stopPropagation();
-    state.windows = state.windows.filter((item) => item.id !== win.id);
-    state.focusedId = state.windows.at(-1)?.id || null;
-    render();
-  });
-
-  const body = document.createElement('div');
-  body.className = 'window-body';
-  if (win.kind === 'explorer') renderExplorer(body, win);
-  if (win.kind === 'properties') renderProperties(body);
-  if (win.kind === 'preview') renderPreview(body, win);
-  body.addEventListener('scroll', () => {
-    if (win.data.lockScroll) {
-      body.scrollTop = win.data.lockScrollTop || 0;
-      body.scrollLeft = win.data.lockScrollLeft || 0;
-      return;
-    }
-    win.data.scrollTop = body.scrollTop;
-    win.data.scrollLeft = body.scrollLeft;
-  });
-
-  el.append(titlebar, body);
-  requestAnimationFrame(() => {
-    body.scrollTop = win.data.scrollTop || 0;
-    body.scrollLeft = win.data.scrollLeft || 0;
-  });
-  if (!win.maximized) {
-    const resize = document.createElement('div');
-    resize.className = 'resize-handle';
-    resize.addEventListener('pointerdown', (event) => startResizeWindow(event, win));
-    el.appendChild(resize);
-  }
-  return el;
-}
-
-function renderExplorer(body, win) {
-  const data = win.data;
-  body.innerHTML = `
-    <div class="pathbar">
-      <button class="icon up-button" data-action="up" title="Eine Ebene zurueck" aria-label="Eine Ebene zurueck">${iconSvg('arrowLeft')}</button>
-      <input value="${escapeAttr(data.path || '')}" aria-label="Pfad">
-      <button class="icon" data-action="go" title="Öffnen" aria-label="Öffnen">${iconSvg('enter')}</button>
-      <button class="icon" data-action="refresh" title="Neu laden" aria-label="Neu laden">${iconSvg('refresh')}</button>
-      <button class="icon" data-action="upload-files" title="Dateien hochladen" aria-label="Dateien hochladen" ${isReadOnly() ? 'disabled' : ''}>${iconSvg('upload')}</button>
-      <button class="icon" data-action="upload-folder" title="Ordner hochladen" aria-label="Ordner hochladen" ${isReadOnly() ? 'disabled' : ''}>${iconSvg('folderUpload')}</button>
-      <button class="icon danger" data-action="delete-selected" title="Auswahl löschen" aria-label="Auswahl löschen" ${isReadOnly() ? 'disabled' : ''}>${iconSvg('delete')}</button>
-      <input class="upload-input" data-upload="files" type="file" multiple>
-      <input class="upload-input" data-upload="folder" type="file" multiple webkitdirectory directory>
-      <div class="view-toggle" aria-label="Ansicht">
-        <button class="icon ${data.view !== 'icons' ? 'active' : ''}" data-action="view-list" title="Listenansicht" aria-label="Listenansicht">${iconSvg('list')}</button>
-        <button class="icon ${data.view === 'icons' ? 'active' : ''}" data-action="view-icons" title="Symbolansicht" aria-label="Symbolansicht">${iconSvg('grid')}</button>
+          <footer class="status-bar">
+            <span id="statusText">Initialisiere …</span>
+            <span id="selectionStatus"></span>
+            <span class="version">${escapeHtml(APP_VERSION)}</span>
+          </footer>
+        </main>
       </div>
     </div>
-    <div class="drop-zone ${data.dragOver ? 'drag-over' : ''}">
-      ${data.error ? `<p class="muted">${escapeHtml(data.error)}</p>` : ''}
-      ${data.loading ? '<p class="muted">Lade...</p>' : renderFileEntries(data.entries || [], data.view || 'list', selectedPathSet(win))}
+    <input id="fileUpload" class="hidden-input" type="file" multiple>
+    <input id="folderUpload" class="hidden-input" type="file" multiple webkitdirectory directory>
+    <div id="drawerHost"></div>
+    <div id="dialogHost"></div>
+    <div id="contextHost"></div>
+  `;
+}
+
+function bindShell() {
+  root.addEventListener('click', handleAction);
+  root.addEventListener('keydown', handleKeydown);
+  root.querySelector('#searchInput').addEventListener('input', (event) => {
+    state.query = event.target.value;
+    renderFiles();
+  });
+  root.querySelector('#fileUpload').addEventListener('change', (event) => uploadFiles([...event.target.files]));
+  root.querySelector('#folderUpload').addEventListener('change', (event) => uploadFiles([...event.target.files]));
+  document.addEventListener('click', closeContext);
+}
+
+async function handleAction(event) {
+  const actionElement = event.target.closest('[data-action]');
+  if (!actionElement || actionElement.disabled) return;
+  const action = actionElement.dataset.action;
+  if (action === 'home') return navigate(state.config?.roots?.[0]?.path);
+  if (action === 'back') return goHistory(-1);
+  if (action === 'forward') return goHistory(1);
+  if (action === 'up') {
+    const currentRoot = activeRoot();
+    if (currentRoot && state.path !== currentRoot.path) return navigate(parentPath(state.path));
+    return;
+  }
+  if (action === 'refresh') return navigate(state.path, { replace: true });
+  if (action === 'path') return navigate(actionElement.dataset.path);
+  if (action === 'root') return navigate(actionElement.dataset.path);
+  if (action === 'view-list') return setView('list');
+  if (action === 'view-grid') return setView('grid');
+  if (action === 'details') return toggleDetails();
+  if (action === 'transfers') return toggleDrawer('transfers');
+  if (action === 'settings') return toggleDrawer('settings');
+  if (action === 'close-drawer') return toggleDrawer(null);
+  if (action === 'upload') return root.querySelector('#fileUpload').click();
+  if (action === 'upload-folder') return root.querySelector('#folderUpload').click();
+  if (action === 'download') return downloadSelected();
+  if (action === 'rename') return renameSelected();
+  if (action === 'copy') return transferSelected('copy');
+  if (action === 'move') return transferSelected('move');
+  if (action === 'delete') return deleteSelected();
+  if (action === 'open') return activateEntry(findEntry(actionElement.dataset.path));
+  if (action === 'clear-selection') return clearSelection();
+  if (action === 'save-settings') return saveSettings(actionElement.closest('form'));
+}
+
+function handleKeydown(event) {
+  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+    event.preventDefault();
+    root.querySelector('#searchInput').focus();
+  }
+  if (event.key === 'Escape') {
+    state.drawer = null;
+    state.context = null;
+    renderDrawer();
+    closeContext();
+  }
+  if (event.key === 'Backspace' && !isTypingTarget(event.target)) {
+    event.preventDefault();
+    goHistory(-1);
+  }
+}
+
+async function navigate(path, options = {}) {
+  if (!path) return;
+  state.loading = true;
+  state.error = null;
+  state.preview = null;
+  state.selected.clear();
+  state.anchor = null;
+  state.status = 'Ordner wird geladen …';
+  renderContent();
+  try {
+    const result = await api(endpoint('list', { path }));
+    state.path = result.path;
+    state.entries = result.entries || [];
+    state.status = `${state.entries.length} Elemente`;
+    if (options.replace && state.historyIndex >= 0) {
+      state.history[state.historyIndex] = state.path;
+    } else if (!options.history) {
+      state.history = state.history.slice(0, state.historyIndex + 1);
+      if (state.history.at(-1) !== state.path) state.history.push(state.path);
+      state.historyIndex = state.history.length - 1;
+    }
+  } catch (error) {
+    state.error = error.message;
+    state.status = 'Ordner konnte nicht geladen werden';
+  } finally {
+    state.loading = false;
+    renderContent();
+  }
+}
+
+function goHistory(offset) {
+  const next = state.historyIndex + offset;
+  if (next < 0 || next >= state.history.length) return;
+  state.historyIndex = next;
+  navigate(state.history[next], { history: true });
+}
+
+function renderContent() {
+  renderSidebar();
+  renderBreadcrumbs();
+  renderFiles();
+  renderDetails();
+  renderStatus();
+  updateControls();
+}
+
+function renderSidebar() {
+  const sidebar = root.querySelector('#sidebar');
+  if (!sidebar || !state.config) return;
+  const roots = state.config.roots || [];
+  sidebar.innerHTML = `
+    <div class="sidebar-section">
+      <div class="sidebar-label">Speicherorte</div>
+      ${roots.map((item, index) => `
+        <button type="button" class="place ${isInside(state.path, item.path) ? 'active' : ''}" data-action="root" data-path="${escapeAttr(item.path)}">
+          <span class="place-icon tone-${(index % 4) + 1}">${icon('folder')}</span>
+          <span><strong>${escapeHtml(rootName(item))}</strong><small>${escapeHtml(item.path)}</small></span>
+          ${isInside(state.path, item.path) ? icon('chevron') : ''}
+        </button>
+      `).join('')}
+    </div>
+    <div class="sidebar-section sidebar-shortcuts">
+      <div class="sidebar-label">Schnellzugriff</div>
+      ${quickPlaces().map((item) => `
+        <button type="button" class="place compact ${state.path === item.path ? 'active' : ''}" data-action="root" data-path="${escapeAttr(item.path)}">
+          ${icon('folder')}<span>${escapeHtml(item.name)}</span>
+        </button>
+      `).join('') || '<p class="sidebar-empty">Ordner erscheinen hier, sobald du navigierst.</p>'}
+    </div>
+    <div class="sidebar-foot">
+      <span class="mode-dot ${state.config.readOnly ? 'readonly' : 'writable'}"></span>
+      <span>${state.config.readOnly ? 'Nur Lesen' : 'Schreibzugriff'}</span>
     </div>
   `;
-
-  const input = body.querySelector('input');
-  body.querySelector('[data-action="go"]').addEventListener('click', () => loadExplorer(win, input.value));
-  body.querySelector('[data-action="refresh"]').addEventListener('click', () => loadExplorer(win, data.path));
-  body.querySelector('[data-action="up"]').addEventListener('click', () => loadExplorer(win, parentPath(data.path)));
-  body.querySelector('[data-action="view-list"]').addEventListener('click', () => setExplorerView(win, 'list'));
-  body.querySelector('[data-action="view-icons"]').addEventListener('click', () => setExplorerView(win, 'icons'));
-  body.querySelector('[data-action="upload-files"]').addEventListener('click', () => body.querySelector('[data-upload="files"]').click());
-  body.querySelector('[data-action="upload-folder"]').addEventListener('click', () => body.querySelector('[data-upload="folder"]').click());
-  body.querySelector('[data-action="delete-selected"]').addEventListener('click', () => deleteEntries(win));
-  for (const inputEl of body.querySelectorAll('.upload-input')) {
-    inputEl.addEventListener('change', async () => {
-      try {
-        await uploadFileList(win, [...inputEl.files], data.path);
-      } catch (error) {
-        showError(error);
-      } finally {
-        inputEl.value = '';
-      }
-    });
-  }
-
-  const dropZone = body.querySelector('.drop-zone');
-  dropZone.addEventListener('dragenter', (event) => {
-    if (hasDropPayload(event)) {
-      event.preventDefault();
-      data.dragOver = true;
-      dropZone.classList.add('drag-over');
-    }
-  });
-  dropZone.addEventListener('dragover', (event) => {
-    if (hasDropPayload(event)) {
-      event.preventDefault();
-      setDropEffect(event, 'copy');
-      data.dragOver = true;
-      dropZone.classList.add('drag-over');
-    }
-  });
-  dropZone.addEventListener('dragleave', () => {
-    data.dragOver = false;
-    dropZone.classList.remove('drag-over');
-  });
-  dropZone.addEventListener('drop', async (event) => {
-    event.preventDefault();
-    data.dragOver = false;
-    dropZone.classList.remove('drag-over');
-    try {
-      await handleDrop(event, win, data.path);
-    } catch (error) {
-      showError(error);
-    }
-  });
-  dropZone.addEventListener('contextmenu', (event) => {
-    event.preventDefault();
-    showContextMenu(event, win, null);
-  });
-
-  for (const row of body.querySelectorAll('.file-row')) {
-    const entry = data.entries.find((item) => item.path === row.dataset.path);
-    row.draggable = false;
-    row.addEventListener('dragstart', (event) => event.preventDefault());
-    row.addEventListener('selectstart', (event) => event.preventDefault());
-    row.addEventListener('pointerdown', (event) => {
-      lockExplorerScroll(win, body);
-      startItemPointerDrag(event, win, entry);
-    });
-    row.addEventListener('click', (event) => {
-      if (shouldSuppressItemActivation()) return;
-      selectEntry(win, entry, body, event);
-    });
-    row.addEventListener('dblclick', () => {
-      if (shouldSuppressItemActivation()) return;
-      if (entry.type === 'directory') {
-        loadExplorer(win, entry.path);
-      } else if (isPreviewable(entry)) {
-        openPreview(entry, win.id);
-      }
-    });
-    row.addEventListener('contextmenu', (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (selectedPathSet(win).has(entry.path)) {
-        state.selectedEntry = entry;
-        focusWindow(win);
-        updatePropertiesWindows();
-      } else {
-        selectEntry(win, entry, null, event);
-      }
-      showContextMenu(event, win, entry);
-    });
-  }
 }
 
-function renderFileEntries(entries, view, selectedPaths = new Set()) {
-  if (!entries.length) {
-    return '<p class="muted">Dieser Ordner ist leer. Dateien können hier abgelegt werden.</p>';
+function renderBreadcrumbs() {
+  const host = root.querySelector('#breadcrumbs');
+  if (!host) return;
+  const rootEntry = (state.config?.roots || []).find((item) => isInside(state.path, item.path));
+  if (!rootEntry) {
+    host.innerHTML = `<button type="button" data-action="path" data-path="${escapeAttr(state.path)}">${escapeHtml(state.path || '…')}</button>`;
+    return;
   }
-  return view === 'icons' ? renderFileIcons(entries, selectedPaths) : renderFileTable(entries, selectedPaths);
-}
-
-function renderFileTable(entries, selectedPaths) {
-  const rows = entries.map((entry) => `
-    <tr class="file-row ${selectedPaths.has(entry.path) ? 'selected' : ''}" data-path="${escapeAttr(entry.path)}" data-type="${escapeAttr(entry.type)}">
-      <td><span class="name-cell"><span class="badge">${icons[entry.type] || 'Item'}</span>${escapeHtml(entry.name)}</span></td>
-      <td>${entry.type}</td>
-      <td>${entry.type === 'file' ? formatBytes(entry.size) : ''}</td>
-      <td>${new Date(entry.modifiedAt).toLocaleString()}</td>
-    </tr>
+  const relative = state.path.slice(rootEntry.path.length).split('/').filter(Boolean);
+  const parts = [{ name: rootName(rootEntry), path: rootEntry.path }];
+  let current = rootEntry.path;
+  for (const name of relative) {
+    current = joinPath(current, name);
+    parts.push({ name, path: current });
+  }
+  host.innerHTML = parts.map((part, index) => `
+    ${index ? '<span class="crumb-separator">›</span>' : ''}
+    <button type="button" data-action="path" data-path="${escapeAttr(part.path)}" ${index === parts.length - 1 ? 'aria-current="page"' : ''}>${escapeHtml(part.name)}</button>
   `).join('');
+}
 
+function renderFiles() {
+  const host = root.querySelector('#filePane');
+  if (!host) return;
+  if (state.loading) {
+    host.innerHTML = `<div class="state-view"><span class="spinner"></span><strong>Ordner wird geladen</strong><span>Einen kleinen Moment …</span></div>`;
+    return;
+  }
+  if (state.error) {
+    host.innerHTML = `<div class="state-view error-state">${icon('folder')}<strong>Dieser Ordner ist nicht erreichbar</strong><span>${escapeHtml(state.error)}</span><button type="button" class="action primary" data-action="refresh">Erneut versuchen</button></div>`;
+    return;
+  }
+  const entries = visibleEntries();
+  if (!entries.length) {
+    const filtered = Boolean(state.query);
+    host.innerHTML = `<div class="state-view">${icon(filtered ? 'search' : 'folder')}<strong>${filtered ? 'Keine Treffer' : 'Dieser Ordner ist leer'}</strong><span>${filtered ? 'Versuche einen anderen Suchbegriff.' : 'Ziehe Dateien hierher oder verwende „Hochladen“.'}</span></div>`;
+    return;
+  }
+  host.className = `file-pane ${state.view}-view`;
+  host.innerHTML = state.view === 'grid' ? gridMarkup(entries) : listMarkup(entries);
+  bindEntryEvents(host);
+}
+
+function listMarkup(entries) {
   return `
-    <table class="file-table">
-      <thead><tr><th>Name</th><th>Typ</th><th>Größe</th><th>Geändert</th></tr></thead>
-      <tbody>${rows}</tbody>
-    </table>
+    <div class="file-table" role="grid" aria-label="Dateiliste">
+      <div class="file-head" role="row">
+        <button type="button" class="select-all" aria-label="Alle auswählen" data-select-all>${state.selected.size && state.selected.size === visibleEntries().length ? icon('check') : ''}</button>
+        ${columnHeader('name', 'Name')}${columnHeader('size', 'Größe')}${columnHeader('type', 'Typ')}${columnHeader('modifiedAt', 'Geändert')}
+      </div>
+      <div class="file-rows">
+        ${entries.map((entry) => `
+          <div class="file-row ${state.selected.has(entry.path) ? 'selected' : ''}" role="row" tabindex="0" data-entry="${escapeAttr(entry.path)}">
+            <button type="button" class="row-check" aria-label="${escapeAttr(entry.name)} auswählen">${state.selected.has(entry.path) ? icon('check') : ''}</button>
+            <div class="name-cell" role="gridcell">
+              <span class="file-type-icon ${fileTone(entry)}">${icon(fileIcon(entry))}</span>
+              <span><strong>${highlight(entry.name, state.query)}</strong><small>${escapeHtml(entry.type === 'directory' ? 'Ordner' : extensionLabel(entry))}</small></span>
+            </div>
+            <div class="meta-cell" role="gridcell">${entry.type === 'file' ? formatBytes(entry.size) : '—'}</div>
+            <div class="meta-cell type-column" role="gridcell">${escapeHtml(typeLabel(entry))}</div>
+            <div class="meta-cell date-column" role="gridcell">${formatDate(entry.modifiedAt)}</div>
+            <button type="button" class="row-more" aria-label="Aktionen für ${escapeAttr(entry.name)}">${icon('more')}</button>
+          </div>
+        `).join('')}
+      </div>
+    </div>
   `;
 }
 
-function renderFileIcons(entries, selectedPaths) {
-  const items = entries.map((entry) => `
-    <button type="button" class="file-row icon-item ${selectedPaths.has(entry.path) ? 'selected' : ''}" data-path="${escapeAttr(entry.path)}" data-type="${escapeAttr(entry.type)}">
-      <span class="file-icon ${escapeAttr(entry.type)}" aria-label="${escapeAttr(icons[entry.type] || 'Item')}"></span>
-      <span class="icon-name">${escapeHtml(entry.name)}</span>
-      <span class="icon-meta">${entry.type === 'file' ? formatBytes(entry.size) : entry.type}</span>
+function gridMarkup(entries) {
+  return `<div class="file-grid">${entries.map((entry) => `
+    <button type="button" class="file-card ${state.selected.has(entry.path) ? 'selected' : ''}" data-entry="${escapeAttr(entry.path)}">
+      <span class="card-check">${state.selected.has(entry.path) ? icon('check') : ''}</span>
+      <span class="card-icon ${fileTone(entry)}">${icon(fileIcon(entry))}</span>
+      <strong>${highlight(entry.name, state.query)}</strong>
+      <small>${entry.type === 'file' ? formatBytes(entry.size) : typeLabel(entry)}</small>
     </button>
-  `).join('');
-
-  return `<div class="icon-grid">${items}</div>`;
+  `).join('')}</div>`;
 }
 
-function setExplorerView(win, view) {
-  win.data.view = view;
-  render();
-}
-
-function renderProperties(body) {
-  const entry = state.selectedEntry;
-  if (!entry) {
-    body.innerHTML = '<p class="muted">Keine Datei ausgewählt.</p>';
-    return;
-  }
-
-  const sizeLabel = entry.type === 'directory' ? directorySizeLabel(entry) : formatBytes(entry.size);
-  body.classList.add('properties');
-  body.innerHTML = `
-    <dl>
-      <dt>Name</dt><dd>${escapeHtml(entry.name)}</dd>
-      <dt>Typ</dt><dd>${escapeHtml(entry.type)}</dd>
-      <dt>Pfad</dt><dd>${escapeHtml(entry.path)}</dd>
-      <dt>Größe</dt><dd>${escapeHtml(sizeLabel)}</dd>
-      <dt>Geändert</dt><dd>${new Date(entry.modifiedAt).toLocaleString()}</dd>
-      <dt>Besitzer</dt><dd>${escapeHtml(formatPrincipal(entry.owner, entry.ownerId))}</dd>
-      <dt>Gruppe</dt><dd>${escapeHtml(formatPrincipal(entry.group, entry.groupId))}</dd>
-      <dt>Rechte</dt><dd>${escapeHtml(entry.permissions ? `0${entry.permissions}`.slice(-4) : '-')}</dd>
-    </dl>
-  `;
-  if (entry.type === 'directory') {
-    ensureDirectorySize(entry);
-  }
-}
-
-function renderPreview(body, win) {
-  const data = win.data;
-  body.classList.add('preview-body');
-  if (data.loading) {
-    body.innerHTML = '<p class="muted">Lade Vorschau...</p>';
-    return;
-  }
-  if (data.error) {
-    body.innerHTML = `<p class="muted">${escapeHtml(data.error)}</p>`;
-    return;
-  }
-  const entry = data.entry;
-  const navigation = previewNavigation(data);
-  body.innerHTML = `
-    <div class="preview-meta">
-      <div class="preview-nav">
-        <button class="icon" data-action="preview-prev" title="Vorherige Datei" aria-label="Vorherige Datei" ${navigation.previous ? '' : 'disabled'}>${iconSvg('arrowLeft')}</button>
-        <button class="icon" data-action="preview-next" title="Nächste Datei" aria-label="Nächste Datei" ${navigation.next ? '' : 'disabled'}>${iconSvg('arrowRight')}</button>
-      </div>
-      <strong>${escapeHtml(entry?.name || data.name || 'Vorschau')}</strong>
-      <span>${escapeHtml(formatBytes(data.size || entry?.size || 0))}</span>
-    </div>
-    ${renderPreviewContent(data)}
-  `;
-  body.querySelector('[data-action="preview-prev"]')?.addEventListener('click', () => openPreview(navigation.previous, data.sourceWindowId));
-  body.querySelector('[data-action="preview-next"]')?.addEventListener('click', () => openPreview(navigation.next, data.sourceWindowId));
-}
-
-function renderPreviewContent(data) {
-  if (data.type === 'markdown') {
-    return `<article class="preview-rendered">${renderMarkdown(data.content || '')}</article>`;
-  }
-  if (data.type === 'csv') {
-    return renderCsvPreview(data.content || '', data.extension === 'tsv' ? '\t' : ',');
-  }
-  if (data.type === 'image') {
-    return `<div class="preview-media"><img src="${escapeAttr(apiUrl(data.rawUrl))}" alt="${escapeAttr(data.name || 'Vorschau')}"></div>`;
-  }
-  if (data.type === 'pdf') {
-    return `<iframe class="preview-frame" src="${escapeAttr(apiUrl(data.rawUrl))}" title="${escapeAttr(data.name || 'PDF Vorschau')}"></iframe>`;
-  }
-  if (data.type === 'audio') {
-    return `<div class="preview-media"><audio controls src="${escapeAttr(apiUrl(data.rawUrl))}"></audio></div>`;
-  }
-  if (data.type === 'video') {
-    return `<div class="preview-media"><video controls src="${escapeAttr(apiUrl(data.rawUrl))}"></video></div>`;
-  }
-  return `<pre class="preview-text">${escapeHtml(data.content || '')}</pre>`;
-}
-
-function previewNavigation(data) {
-  const source = state.windows.find((win) => win.id === data.sourceWindowId && win.kind === 'explorer');
-  const entries = (source?.data.entries || []).filter(isPreviewable);
-  if (entries.length < 2) {
-    return { previous: null, next: null };
-  }
-  const index = entries.findIndex((entry) => entry.path === data.entry?.path);
-  if (index < 0) {
-    return { previous: null, next: null };
-  }
-  return {
-    previous: entries[(index - 1 + entries.length) % entries.length],
-    next: entries[(index + 1) % entries.length]
-  };
-}
-
-async function loadPreview(win, entry) {
-  win.data.loading = true;
-  win.data.error = null;
-  render();
-  try {
-    const result = await api(apiUrl(`preview.php?path=${encodeURIComponent(entry.path)}`));
-    win.data.entry = entry;
-    win.data.sourceWindowId = win.data.sourceWindowId || state.focusedId;
-    win.data.name = result.name;
-    win.data.size = result.size;
-    win.data.type = result.type;
-    win.data.extension = result.extension;
-    win.data.rawUrl = result.rawUrl;
-    win.data.content = result.content;
-  } catch (error) {
-    win.data.error = error.message;
-  } finally {
-    win.data.loading = false;
-    render();
-  }
-}
-
-function renderMarkdown(content) {
-  const blocks = [];
-  let listItems = [];
-  const flushList = () => {
-    if (listItems.length) {
-      blocks.push(`<ul>${listItems.map((item) => `<li>${renderInlineMarkdown(item)}</li>`).join('')}</ul>`);
-      listItems = [];
-    }
-  };
-
-  for (const line of String(content).split(/\r?\n/)) {
-    const heading = /^(#{1,6})\s+(.*)$/.exec(line);
-    if (heading) {
-      flushList();
-      const level = heading[1].length;
-      blocks.push(`<h${level}>${renderInlineMarkdown(heading[2])}</h${level}>`);
-      continue;
-    }
-    const list = /^\s*[-*]\s+(.*)$/.exec(line);
-    if (list) {
-      listItems.push(list[1]);
-      continue;
-    }
-    flushList();
-    if (!line.trim()) continue;
-    blocks.push(`<p>${renderInlineMarkdown(line)}</p>`);
-  }
-  flushList();
-  return blocks.join('');
-}
-
-function renderInlineMarkdown(value) {
-  return escapeHtml(value)
-    .replace(/`([^`]+)`/g, '<code>$1</code>')
-    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
-    .replace(/\*([^*]+)\*/g, '<em>$1</em>');
-}
-
-function renderCsvPreview(content, delimiter) {
-  const rows = parseDelimitedRows(content, delimiter).slice(0, 80);
-  if (!rows.length) {
-    return '<p class="muted">Keine Tabellenzeilen.</p>';
-  }
-  return `
-    <div class="preview-table-wrap">
-      <table class="preview-table">
-        <tbody>
-          ${rows.map((row) => `<tr>${row.map((cell) => `<td>${escapeHtml(cell)}</td>`).join('')}</tr>`).join('')}
-        </tbody>
-      </table>
-    </div>
-  `;
-}
-
-function parseDelimitedRows(content, delimiter) {
-  const rows = [];
-  let row = [];
-  let cell = '';
-  let quoted = false;
-  const text = String(content || '');
-  for (let index = 0; index < text.length; index += 1) {
-    const char = text[index];
-    if (char === '"') {
-      if (quoted && text[index + 1] === '"') {
-        cell += '"';
-        index += 1;
-      } else {
-        quoted = !quoted;
-      }
-      continue;
-    }
-    if (!quoted && char === delimiter) {
-      row.push(cell);
-      cell = '';
-      continue;
-    }
-    if (!quoted && (char === '\n' || char === '\r')) {
-      if (char === '\r' && text[index + 1] === '\n') index += 1;
-      row.push(cell);
-      rows.push(row);
-      row = [];
-      cell = '';
-      continue;
-    }
-    cell += char;
-  }
-  if (cell || row.length) {
-    row.push(cell);
-    rows.push(row);
-  }
-  return rows;
-}
-
-function renderQueue(body) {
-  body.innerHTML = queueMarkup();
-  bindQueueActions(body);
-}
-
-function queueMarkup() {
-  const jobs = [...state.jobs.values()].reverse();
-  const uploads = [...state.uploadTransfers.values()].reverse();
-  const transferItems = [
-    ...uploads.map(uploadTransferMarkup),
-    ...jobs.map((job) => `
-    <article class="job">
-      <strong>${escapeHtml(job.type)} #${escapeHtml(job.id)}</strong>
-      <div class="muted">${escapeHtml(job.status)} · ${escapeHtml(job.message || '')}</div>
-      <div class="progress"><div style="width:${Number(job.progress) || 0}%"></div></div>
-    </article>
-  `)
-  ];
-  const jobMarkup = transferItems.length ? transferItems.join('') : '<p class="muted">Keine Transfers.</p>';
-  const debugSection = state.config?.debug ? debugMarkup() : '';
-
-  return `
-    <div class="queue-list">${jobMarkup}</div>
-    ${debugSection}
-  `;
-}
-
-function uploadTransferMarkup(upload) {
-  const progress = Math.max(0, Math.min(100, Number(upload.progress) || 0));
-  const fileText = `${upload.completedFiles + upload.skippedFiles}/${upload.totalFiles} Dateien`;
-  const byteText = `${formatBytes(upload.uploadedBytes)} / ${formatBytes(upload.totalBytes)}`;
-  const detail = upload.currentFile ? ` · ${upload.currentFile}` : '';
-  const skipped = upload.skippedFiles ? ` · ${upload.skippedFiles} übersprungen` : '';
-  const overwritten = upload.overwrittenFiles ? ` · ${upload.overwrittenFiles} überschrieben` : '';
-  return `
-    <article class="job upload-job">
-      <strong>Upload #${escapeHtml(upload.id)}</strong>
-      <div class="muted">${escapeHtml(upload.status)} · ${escapeHtml(fileText)} · ${escapeHtml(byteText)}${escapeHtml(detail)}${escapeHtml(skipped)}${escapeHtml(overwritten)}</div>
-      <div class="progress"><div style="width:${progress}%"></div></div>
-    </article>
-  `;
-}
-
-function debugMarkup() {
-  const debugMarkup = state.debug.length ? state.debug.slice(-12).reverse().map((item) => `
-    <article class="debug-entry">
-      <strong>#${item.id} ${escapeHtml(item.label)}</strong>
-      <time>${escapeHtml(item.time)}</time>
-      <pre>${escapeHtml(JSON.stringify(item.data, null, 2))}</pre>
-    </article>
-  `).join('') : '<p class="muted">Noch keine Debug-Einträge.</p>';
-
-  return `
-    <section class="debug-log" aria-label="Debug-Protokoll">
-      <header>
-        <strong>Debug</strong>
-        <button type="button" data-action="clear-debug">Leeren</button>
-      </header>
-      ${debugMarkup}
-    </section>
-  `;
-}
-
-function bindQueueActions(root) {
-  root.querySelector('[data-action="clear-debug"]')?.addEventListener('click', () => {
-    state.debug = [];
-    updateTransferPanel();
+function bindEntryEvents(host) {
+  host.querySelector('[data-select-all]')?.addEventListener('click', () => {
+    const entries = visibleEntries();
+    if (state.selected.size === entries.length) state.selected.clear();
+    else entries.forEach((entry) => state.selected.add(entry.path));
+    selectionChanged();
   });
+  host.querySelectorAll('[data-entry]').forEach((element) => {
+    element.addEventListener('click', (event) => selectEntry(event, element.dataset.entry));
+    element.addEventListener('dblclick', () => activateEntry(findEntry(element.dataset.entry)));
+    element.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') activateEntry(findEntry(element.dataset.entry));
+      if (event.key === ' ') { event.preventDefault(); selectEntry(event, element.dataset.entry); }
+    });
+    element.addEventListener('contextmenu', (event) => showContext(event, element.dataset.entry));
+    element.querySelector('.row-more')?.addEventListener('click', (event) => showContext(event, element.dataset.entry));
+  });
+  host.ondragover = (event) => { event.preventDefault(); host.classList.add('drag-over'); };
+  host.ondragleave = () => host.classList.remove('drag-over');
+  host.ondrop = (event) => {
+    event.preventDefault();
+    host.classList.remove('drag-over');
+    if (event.dataTransfer?.files?.length) uploadFiles([...event.dataTransfer.files]);
+  };
 }
 
-function toggleTransferPanel() {
-  if (state.transferPanelVisible) {
-    hideTransferPanel();
+function selectEntry(event, path) {
+  if (event.target.closest('.row-more')) return;
+  const entries = visibleEntries();
+  if (event.shiftKey && state.anchor) {
+    const start = entries.findIndex((entry) => entry.path === state.anchor);
+    const end = entries.findIndex((entry) => entry.path === path);
+    if (start >= 0 && end >= 0) {
+      if (!event.metaKey && !event.ctrlKey) state.selected.clear();
+      entries.slice(Math.min(start, end), Math.max(start, end) + 1).forEach((entry) => state.selected.add(entry.path));
+    }
+  } else if (event.metaKey || event.ctrlKey || event.target.closest('.row-check')) {
+    if (state.selected.has(path)) state.selected.delete(path); else state.selected.add(path);
+    state.anchor = path;
   } else {
-    showTransferPanel();
+    state.selected.clear();
+    state.selected.add(path);
+    state.anchor = path;
   }
+  state.preview = null;
+  selectionChanged();
 }
 
-function showTransferPanel() {
-  if (state.transferAutoHideTimer) {
-    clearTimeout(state.transferAutoHideTimer);
-    state.transferAutoHideTimer = null;
-  }
-  state.transferPanelVisible = true;
-  state.transferPanelClosing = false;
-  renderTransferPanel();
+function selectionChanged() {
+  renderFiles();
+  renderDetails();
+  renderStatus();
+  updateControls();
 }
 
-function hideTransferPanel() {
-  if (!state.transferPanelVisible && !state.transferPanelClosing) {
-    return;
-  }
-  if (state.transferAutoHideTimer) {
-    clearTimeout(state.transferAutoHideTimer);
-    state.transferAutoHideTimer = null;
-  }
-  state.transferPanelVisible = false;
-  state.transferPanelClosing = true;
-  renderTransferPanel();
-  setTimeout(() => {
-    if (!state.transferPanelVisible) {
-      state.transferPanelClosing = false;
-      renderTransferPanel();
-    }
-  }, 220);
+function clearSelection() {
+  state.selected.clear();
+  selectionChanged();
 }
 
-function scheduleTransferAutoHide() {
-  if (!state.transferPanelVisible || activeTransferCount() > 0 || state.transferAutoHideTimer) {
-    return;
-  }
-  state.transferAutoHideTimer = setTimeout(() => {
-    state.transferAutoHideTimer = null;
-    if (activeTransferCount() === 0) {
-      hideTransferPanel();
-    }
-  }, 2200);
+async function activateEntry(entry) {
+  if (!entry) return;
+  if (entry.type === 'directory') return navigate(entry.path);
+  state.selected.clear();
+  state.selected.add(entry.path);
+  state.detailsOpen = true;
+  localStorage.setItem('unav-details', 'open');
+  selectionChanged();
+  if (PHP_API && isPreviewable(entry)) await loadPreview(entry);
 }
 
-function activeTransferCount() {
-  const activeJobs = [...state.jobs.values()].filter((job) => job.type !== 'size' && ['queued', 'running', 'cancel_requested'].includes(job.status)).length;
-  const activeUploads = [...state.uploadTransfers.values()].filter((upload) => ['queued', 'running'].includes(upload.status)).length;
-  return activeJobs + activeUploads;
-}
-
-function renderTransferPanel() {
-  const existing = appShell.querySelector('.transfer-panel');
-  if (!state.transferPanelVisible && !state.transferPanelClosing) {
-    existing?.remove();
-    transferButton.classList.remove('active');
-    transferButton.setAttribute('aria-expanded', 'false');
-    return;
-  }
-
-  const panel = existing || document.createElement('aside');
-  panel.className = `transfer-panel ${state.transferPanelClosing ? 'closing' : 'open'}`;
-  panel.setAttribute('aria-label', 'Transfers');
-  panel.innerHTML = `
-    <header class="transfer-panel-header">
-      <strong>Transfers</strong>
-      <button type="button" class="icon" data-action="close-transfers" title="Schließen">${iconSvg('close')}</button>
-    </header>
-    <div class="transfer-panel-body">${queueMarkup()}</div>
-  `;
-  if (!existing) {
-    appShell.appendChild(panel);
-  }
-
-  const buttonRect = transferButton.getBoundingClientRect();
-  const shellRect = appShell.getBoundingClientRect();
-  const panelWidth = Math.min(520, Math.max(360, shellRect.width - 32));
-  const right = Math.max(16, shellRect.right - buttonRect.right);
-  panel.style.width = `${panelWidth}px`;
-  panel.style.right = `${right}px`;
-  panel.style.top = `${buttonRect.bottom - shellRect.top + 8}px`;
-
-  panel.querySelector('[data-action="close-transfers"]').addEventListener('click', () => hideTransferPanel());
-  bindQueueActions(panel);
-  transferButton.classList.add('active');
-  transferButton.setAttribute('aria-expanded', 'true');
-}
-
-function toggleSettingsPanel() {
-  state.settingsPanelVisible = !state.settingsPanelVisible;
-  renderSettingsPanel();
-}
-
-function renderSettingsPanel() {
-  const existing = appShell.querySelector('.settings-panel');
-  if (!state.settingsPanelVisible) {
-    existing?.remove();
-    settingsButton.classList.remove('active');
-    settingsButton.setAttribute('aria-expanded', 'false');
-    return;
-  }
-
-  const panel = existing || document.createElement('aside');
-  panel.className = 'settings-panel';
-  panel.setAttribute('aria-label', 'Einstellungen');
-  panel.innerHTML = `
-    <header class="settings-panel-header">
-      <strong>Einstellungen</strong>
-      <button type="button" class="icon" data-action="close-settings" title="Schließen">${iconSvg('close')}</button>
-    </header>
-    <div class="settings-panel-body">
-      <label class="setting-row">
-        <span>
-          <strong>Debug</strong>
-          <small>Debug-Protokoll im Transfers-Panel anzeigen</small>
-        </span>
-        <input type="checkbox" data-setting="debug" ${state.config?.debug ? 'checked' : ''}>
-      </label>
-      <label class="setting-row">
-        <span>
-          <strong>Schreibzugriff</strong>
-          <small>Upload, Rename, Move und Copy erlauben</small>
-        </span>
-        <input type="checkbox" data-setting="write" ${state.config && !state.config.readOnly ? 'checked' : ''}>
-      </label>
-    </div>
-  `;
-  if (!existing) {
-    appShell.appendChild(panel);
-  }
-
-  const buttonRect = settingsButton.getBoundingClientRect();
-  const shellRect = appShell.getBoundingClientRect();
-  panel.style.right = `${Math.max(16, shellRect.right - buttonRect.right)}px`;
-  panel.style.top = `${buttonRect.bottom - shellRect.top + 8}px`;
-
-  panel.querySelector('[data-action="close-settings"]').addEventListener('click', () => {
-    state.settingsPanelVisible = false;
-    renderSettingsPanel();
-  });
-  panel.querySelector('[data-setting="debug"]').addEventListener('change', (event) => {
-    saveSettings({ debug: event.currentTarget.checked });
-  });
-  panel.querySelector('[data-setting="write"]').addEventListener('change', (event) => {
-    saveSettings({ readOnly: !event.currentTarget.checked });
-  });
-  settingsButton.classList.add('active');
-  settingsButton.setAttribute('aria-expanded', 'true');
-}
-
-async function saveSettings(changes) {
-  const body = new URLSearchParams();
-  const readOnly = changes.readOnly ?? state.config.readOnly;
-  const debug = changes.debug ?? state.config.debug;
-  body.set('readOnly', readOnly ? '1' : '0');
-  body.set('debug', debug ? '1' : '0');
-  appendCsrf(body);
+async function loadPreview(entry) {
+  state.previewLoading = true;
+  renderDetails();
   try {
-    state.config = await api(apiUrl('config.php'), {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
-      body
-    });
-    updateStatusText();
-    if (!state.config.debug) {
-      state.debug = [];
-    }
-    render();
+    state.preview = await api(endpoint('preview', { path: entry.path }));
   } catch (error) {
-    showError(error);
-  }
-}
-
-function updateStatusText() {
-  if (!state.config) return;
-  statusText.textContent = `${state.config.roots.length} Root, ${state.config.readOnly ? 'Read-only' : 'Schreibzugriff aktiv'} · Debug ${state.config.debug ? 'aktiv' : 'aus'} · ${APP_VERSION}`;
-}
-
-function isReadOnly() {
-  return Boolean(state.config?.readOnly);
-}
-
-async function loadExplorer(win, targetPath) {
-  win.data.loading = true;
-  win.data.error = null;
-  win.data.path = targetPath;
-  render();
-  try {
-    const result = await api(apiUrl(`list.php?path=${encodeURIComponent(targetPath)}`));
-    win.data.path = result.path;
-    win.data.entries = result.entries;
-    reconcileExplorerSelection(win);
-  } catch (error) {
-    win.data.error = error.message;
+    state.preview = { error: error.message };
   } finally {
-    win.data.loading = false;
-    render();
+    state.previewLoading = false;
+    renderDetails();
   }
 }
 
-async function handleDrop(event, win, targetPath) {
-  const uploadItems = await getDroppedUploadItems(event);
-  recordDebug('html.drop', {
-    targetPath,
-    types: dataTransferTypes(event),
-    files: uploadItems.map((item) => ({ name: item.path, size: item.file.size }))
-  });
-  if (state.config.readOnly) {
-    showError(new Error('Read-only mode ist aktiv.'));
-    return;
-  }
-
-  if (uploadItems.length) {
-    await uploadFileList(win, uploadItems, targetPath);
-  }
-}
-
-async function uploadFileList(win, files, targetPath) {
-  if (isReadOnly()) {
-    showError(new Error('Read-only mode ist aktiv.'));
-    return;
-  }
-  if (!files.length) return;
-  const uploadItems = normalizeUploadItems(files);
-  const transfer = createUploadTransfer(targetPath, uploadItems);
-  let overwriteAll = false;
-  for (const [index, item] of uploadItems.entries()) {
-    updateUploadTransfer(transfer, {
-      status: 'running',
-      currentFile: item.path,
-      currentIndex: index + 1
-    });
-    recordDebug('upload.file.request', { path: item.path, size: item.file.size, index: index + 1, total: uploadItems.length });
-    try {
-      await uploadFileChunked(targetPath, item.file, item.path, false, (bytes) => {
-        addUploadProgress(transfer, bytes);
-      });
-      updateUploadTransfer(transfer, {
-        completedFiles: transfer.completedFiles + 1,
-        currentFile: item.path,
-        progress: uploadProgressPercent(transfer)
-      });
-      recordDebug('upload.file.done', { path: item.path, index: index + 1, total: uploadItems.length, overwrite: false });
-    } catch (error) {
-      if (error.status !== 409) {
-        if (isLocalFileReadError(error)) {
-          updateUploadTransfer(transfer, {
-            skippedFiles: transfer.skippedFiles + 1,
-            skippedBytes: transfer.skippedBytes + Number(item.file.size || 0),
-            currentFile: item.path,
-            progress: uploadProgressPercent(transfer)
-          }, true);
-          recordDebug('upload.file.unreadable', {
-            path: item.path,
-            index: index + 1,
-            total: uploadItems.length,
-            error: serializeError(error)
-          });
-          continue;
-        }
-        updateUploadTransfer(transfer, {
-          status: 'failed',
-          message: error.message || 'Upload fehlgeschlagen',
-          currentFile: item.path,
-          progress: uploadProgressPercent(transfer)
-        }, true);
-        throw error;
-      }
-      const conflictAction = overwriteAll ? 'overwrite' : await askUploadConflict({
-        path: item.path,
-        targetPath,
-        index: index + 1,
-        total: uploadItems.length
-      });
-      if (conflictAction === 'overwrite-all') {
-        overwriteAll = true;
-      }
-      const overwrite = overwriteAll || conflictAction === 'overwrite';
-      recordDebug('upload.overwrite.prompt', { path: item.path, action: conflictAction, overwrite });
-      if (!overwrite) {
-        updateUploadTransfer(transfer, {
-          skippedFiles: transfer.skippedFiles + 1,
-          skippedBytes: transfer.skippedBytes + Number(item.file.size || 0),
-          currentFile: item.path,
-          progress: uploadProgressPercent(transfer)
-        });
-        recordDebug('upload.file.skipped', { path: item.path, index: index + 1, total: uploadItems.length });
-        continue;
-      }
-      await uploadFileChunked(targetPath, item.file, item.path, true, (bytes) => {
-        addUploadProgress(transfer, bytes);
-      });
-      updateUploadTransfer(transfer, {
-        completedFiles: transfer.completedFiles + 1,
-        overwrittenFiles: transfer.overwrittenFiles + 1,
-        currentFile: item.path,
-        progress: uploadProgressPercent(transfer)
-      });
-      recordDebug('upload.file.done', { path: item.path, index: index + 1, total: uploadItems.length, overwrite: true });
-    }
-  }
-  updateUploadTransfer(transfer, {
-    status: 'completed',
-    message: 'Abgeschlossen',
-    currentFile: '',
-    progress: 100
-  }, true);
-  scheduleTransferAutoHide();
-  await loadExplorer(win, targetPath);
-}
-
-async function uploadFileChunked(targetPath, file, relativePath, overwrite = false, onChunkUploaded = null) {
-  const chunkSize = 256 * 1024;
-  const totalChunks = Math.max(1, Math.ceil(file.size / chunkSize));
-  let finalPayload = null;
-  for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex += 1) {
-    const start = chunkIndex * chunkSize;
-    const chunk = file.slice(start, Math.min(file.size, start + chunkSize));
-    const data = arrayBufferToBase64(await chunk.arrayBuffer());
-    const body = new URLSearchParams();
-    body.set('uploadMode', 'chunk');
-    body.set('relativePath', relativePath);
-    body.set('chunkIndex', String(chunkIndex));
-    body.set('totalChunks', String(totalChunks));
-    body.set('data', data);
-    if (overwrite) {
-      body.set('overwrite', '1');
-    }
-    appendCsrf(body);
-    const response = await fetch(apiUrl(`upload.php?path=${encodeURIComponent(targetPath)}`), {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
-      body
-    });
-    const text = await response.text();
-    recordDebug('upload.chunk.response', {
-      path: relativePath,
-      chunk: chunkIndex + 1,
-      totalChunks,
-      status: response.status,
-      ok: response.ok,
-      contentType: response.headers.get('content-type'),
-      body: text.slice(0, 1000)
-    });
-    if (!response.ok) {
-      const error = new Error(text || `${response.status} ${response.statusText}`);
-      error.status = response.status;
-      error.path = relativePath;
-      throw error;
-    }
-    onChunkUploaded?.(chunk.size);
-    try {
-      finalPayload = JSON.parse(text);
-    } catch (error) {
-      throw new Error(`Upload lieferte keine JSON-Antwort: ${text.slice(0, 200) || response.headers.get('content-type') || 'leer'}`);
-    }
-  }
-  if (!finalPayload?.uploaded?.length) {
-    throw new Error('Upload wurde vom Server nicht bestätigt.');
-  }
-}
-
-function createUploadTransfer(targetPath, uploadItems) {
-  const transfer = {
-    id: `upload-${state.nextUploadTransferId++}`,
-    status: 'queued',
-    message: 'Wartet',
-    targetPath,
-    totalFiles: uploadItems.length,
-    completedFiles: 0,
-    skippedFiles: 0,
-    overwrittenFiles: 0,
-    totalBytes: uploadItems.reduce((sum, item) => sum + Number(item.file?.size || 0), 0),
-    uploadedBytes: 0,
-    skippedBytes: 0,
-    currentFile: '',
-    currentIndex: 0,
-    progress: 0,
-    updatedAt: Date.now(),
-    lastRenderAt: 0
-  };
-  state.uploadTransfers.set(transfer.id, transfer);
-  showTransferPanel();
-  updateTransferPanel();
-  return transfer;
-}
-
-function updateUploadTransfer(transfer, patch, force = false) {
-  Object.assign(transfer, patch, {
-    message: patch.message ?? `${transfer.currentIndex || 0}/${transfer.totalFiles}`,
-    updatedAt: Date.now()
-  });
-  const now = Date.now();
-  if (force || now - transfer.lastRenderAt > 180) {
-    transfer.lastRenderAt = now;
-    updateTransferPanel();
-  }
-}
-
-function addUploadProgress(transfer, bytes) {
-  transfer.uploadedBytes += Number(bytes || 0);
-  updateUploadTransfer(transfer, {
-    progress: uploadProgressPercent(transfer)
-  });
-}
-
-function uploadProgressPercent(transfer) {
-  if (transfer.totalBytes > 0) {
-    return ((transfer.uploadedBytes + transfer.skippedBytes) / transfer.totalBytes) * 100;
-  }
-  if (transfer.totalFiles > 0) {
-    return ((transfer.completedFiles + transfer.skippedFiles) / transfer.totalFiles) * 100;
-  }
-  return 0;
-}
-
-function isLocalFileReadError(error) {
-  return error?.name === 'NotReadableError'
-    || error?.name === 'NotFoundError'
-    || error?.name === 'SecurityError';
-}
-
-function arrayBufferToBase64(buffer) {
-  const bytes = new Uint8Array(buffer);
-  let binary = '';
-  for (let index = 0; index < bytes.length; index += 0x8000) {
-    binary += String.fromCharCode(...bytes.subarray(index, index + 0x8000));
-  }
-  return btoa(binary);
-}
-
-function normalizeUploadItems(files) {
-  return files.map((item) => {
-    if (item?.file && item?.path) {
-      return item;
-    }
-    const file = item;
-    return {
-      file,
-      path: file.webkitRelativePath || file.name
-    };
-  }).filter((item) => item.file && item.path);
-}
-
-async function createJob(type, source, destination = null, refreshWindowIds = [], extra = {}) {
-  if (['move', 'copy', 'permissions'].includes(type) && isReadOnly()) {
-    showError(new Error('Read-only mode ist aktiv.'));
-    return null;
-  }
-  recordDebug('job.create.request', { type, source, destination, refreshWindowIds, extra });
-  const body = new URLSearchParams();
-  body.set('source', source);
-  if (destination !== null) {
-    body.set('destination', destination);
-  }
-  for (const [key, value] of Object.entries(extra)) {
-    if (value !== null && value !== undefined) {
-      body.set(key, String(value));
-    }
-  }
-  appendCsrf(body);
-  const job = await api(apiUrl(`job.php?action=${encodeURIComponent(type)}`), {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
-    body
-  });
-  recordDebug('job.create.response', job);
-  state.jobs.set(job.id, job);
-  state.jobRefresh.set(job.id, {
-    windowIds: [...new Set(refreshWindowIds)].filter(Boolean),
-    done: false
-  });
-  showTransferPanel();
-  pollJob(job.id);
-  updateTransferPanel();
-  return job;
-}
-
-async function createSizeJob(entry) {
-  recordDebug('size.create.request', { source: entry.path });
-  const body = new URLSearchParams();
-  body.set('source', entry.path);
-  appendCsrf(body);
-  const job = await api(apiUrl('job.php?action=size'), {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
-    body
-  });
-  recordDebug('size.create.response', job);
-  state.jobs.set(job.id, job);
-  state.sizeJobs.set(entry.path, job.id);
-  pollJob(job.id);
-  render();
-  return job;
-}
-
-async function reloadExplorerWindows(ids) {
-  const uniqueIds = new Set(ids);
-  const targets = state.windows.filter((win) => win.kind === 'explorer' && (uniqueIds.has(win.id) || !uniqueIds.size));
-  await Promise.all(targets.map((win) => loadExplorer(win, win.data.path)));
-}
-
-function hasDropPayload(event) {
-  const types = dataTransferTypes(event);
-  return types.includes('Files') || getDroppedFiles(event).length > 0;
-}
-
-async function getDroppedUploadItems(event) {
-  const entries = getDroppedEntries(event);
-  if (entries.length) {
-    const items = [];
-    for (const entry of entries) {
-      items.push(...await readDroppedEntry(entry, ''));
-    }
-    if (items.length) {
-      return items;
-    }
-  }
-  return getDroppedFiles(event).filter((file) => file.size > 0 || file.type || file.name.includes('.')).map((file) => ({
-    file,
-    path: file.webkitRelativePath || file.name
-  }));
-}
-
-function getDroppedEntries(event) {
-  try {
-    return [...(event.dataTransfer?.items || [])]
-      .map((item) => item.webkitGetAsEntry?.())
-      .filter(Boolean);
-  } catch (error) {
-    recordDebug('dataTransfer.entries.error', serializeError(error));
-    return [];
-  }
-}
-
-async function readDroppedEntry(entry, parentPath) {
-  const path = parentPath ? `${parentPath}/${entry.name}` : entry.name;
-  if (entry.isFile) {
-    const file = await new Promise((resolve, reject) => entry.file(resolve, reject));
-    return [{ file, path }];
-  }
-  if (!entry.isDirectory) {
-    return [];
-  }
-  const reader = entry.createReader();
-  const children = await readAllDirectoryEntries(reader);
-  const results = [];
-  for (const child of children) {
-    results.push(...await readDroppedEntry(child, path));
-  }
-  return results;
-}
-
-async function readAllDirectoryEntries(reader) {
-  const entries = [];
-  while (true) {
-    const batch = await new Promise((resolve, reject) => reader.readEntries(resolve, reject));
-    if (!batch.length) {
-      return entries;
-    }
-    entries.push(...batch);
-  }
-}
-
-function showError(error) {
-  const debug = recordDebug('error.shown', serializeError(error));
-  const message = error?.message || String(error);
-  const detail = debug ? `Debug #${debug.id}: ${debug.label}` : '';
-  showMessageDialog('Fehler', message, detail).catch(() => {});
-}
-
-function getDroppedFiles(event) {
-  try {
-    return [...(event.dataTransfer?.files || [])];
-  } catch {
-    return [];
-  }
-}
-
-function dataTransferTypes(event) {
-  try {
-    return [...(event.dataTransfer?.types || [])];
-  } catch (error) {
-    recordDebug('dataTransfer.types.error', serializeError(error));
-    return [];
-  }
-}
-
-function setEffectAllowed(event) {
-  try {
-    event.dataTransfer.effectAllowed = 'copyMove';
-  } catch (error) {
-    recordDebug('dataTransfer.effectAllowed.error', serializeError(error));
-  }
-}
-
-function setDropEffect(event, effect) {
-  try {
-    event.dataTransfer.dropEffect = effect;
-  } catch {
-    recordDebug('dataTransfer.dropEffect.error', { effect });
-  }
-}
-
-async function renameEntry(win, entry) {
-  if (isReadOnly()) {
-    showError(new Error('Read-only mode ist aktiv.'));
-    return;
-  }
-  const nextName = await showPromptDialog('Umbenennen', 'Neuer Name', entry.name);
-  if (!nextName || nextName === entry.name) {
-    return;
-  }
-  if (nextName.includes('/')) {
-    showError(new Error('Der Name darf keinen Slash enthalten.'));
-    return;
-  }
-  await createJob('move', entry.path, `${dirname(entry.path)}/${nextName}`, [win.id]);
-}
-
-async function promptTransfer(win, entry, type) {
-  if (isReadOnly()) {
-    showError(new Error('Read-only mode ist aktiv.'));
-    return;
-  }
-  const targetDir = await showPromptDialog(
-    type === 'copy' ? 'Kopieren' : 'Verschieben',
-    type === 'copy' ? 'Kopieren nach Ordner' : 'Verschieben nach Ordner',
-    win.data.path
-  );
-  if (!targetDir) {
-    return;
-  }
-  await createJob(type, entry.path, `${targetDir.replace(/\/$/, '')}/${entry.name}`, []);
-}
-
-async function deleteEntries(win, entry = null) {
-  if (isReadOnly()) {
-    showError(new Error('Read-only mode ist aktiv.'));
-    return;
-  }
-  const entries = entry && selectedPathSet(win).has(entry.path) ? selectedEntries(win) : (entry ? [entry] : selectedEntries(win));
+function renderDetails() {
+  const pane = root.querySelector('#detailsPane');
+  if (!pane) return;
+  pane.classList.toggle('closed', !state.detailsOpen);
+  if (!state.detailsOpen) { pane.innerHTML = ''; return; }
+  const entries = selectedEntries();
   if (!entries.length) {
-    showError(new Error('Keine Datei ausgewählt.'));
+    pane.innerHTML = `<div class="details-empty">${icon('info')}<strong>Details</strong><span>Wähle eine Datei oder einen Ordner aus.</span></div>`;
     return;
   }
-  const label = entries.length === 1 ? `"${entries[0].name}" wirklich löschen?` : `${entries.length} Objekte wirklich löschen?`;
-  const confirmed = await showConfirmDialog('Löschen bestätigen', label, 'Dieser Vorgang löscht direkt vom Dateisystem.', {
-    confirmLabel: 'Löschen',
-    danger: true
-  });
-  if (!confirmed) {
+  if (entries.length > 1) {
+    const size = entries.reduce((sum, entry) => sum + Number(entry.size || 0), 0);
+    pane.innerHTML = `<div class="details-header"><strong>${entries.length} Elemente</strong>${iconButton('close', 'Details schließen', 'details')}</div><div class="multi-selection-mark">${entries.length}</div><dl class="detail-list"><dt>Ausgewählt</dt><dd>${entries.length}</dd><dt>Dateigröße</dt><dd>${formatBytes(size)}</dd></dl>`;
     return;
   }
-  for (const item of entries) {
-    await createJob('delete', item.path, null, [win.id]);
-  }
-}
-
-function openPermissionsDialog(win, entry) {
-  if (isReadOnly()) {
-    showError(new Error('Read-only mode ist aktiv.'));
-    return;
-  }
-  const entries = selectedPathSet(win).has(entry.path) ? selectedEntries(win) : [entry];
-  state.permissionsDialog = {
-    winId: win.id,
-    entries,
-    mode: normalizeMode(entry.permissions || '0755'),
-    owner: entry.owner || '',
-    group: entry.group || '',
-    recursive: false,
-    hasDirectory: entries.some((item) => item.type === 'directory')
-  };
-  render();
-}
-
-function downloadEntries(win, entry = null) {
-  const entries = entry && selectedPathSet(win).has(entry.path) ? selectedEntries(win) : (entry ? [entry] : [{
-    path: win.data.path,
-    name: basename(win.data.path),
-    type: 'directory'
-  }]);
-  const paths = entries.map((item) => item.path);
-  const query = paths.length === 1
-    ? `path=${encodeURIComponent(paths[0])}`
-    : `paths=${encodeURIComponent(JSON.stringify(paths))}`;
-  recordDebug('download.start', { paths });
-  const link = document.createElement('a');
-  link.href = apiUrl(`download.php?${query}`);
-  link.download = '';
-  document.body.appendChild(link);
-  link.click();
-  link.remove();
-}
-
-function renderPermissionsDialog() {
-  const dialog = state.permissionsDialog;
-  const overlay = document.createElement('div');
-  overlay.className = 'modal-overlay';
-  overlay.innerHTML = `
-    <form class="permissions-modal" aria-label="Berechtigungen ändern">
-      <header>
-        <strong>Berechtigungen ändern</strong>
-        <button type="button" class="icon" data-action="cancel" title="Schließen" aria-label="Schließen">${iconSvg('close')}</button>
-      </header>
-      <div class="modal-body">
-        <p class="muted">${dialog.entries.length === 1 ? escapeHtml(dialog.entries[0].name) : `${dialog.entries.length} Objekte ausgewählt`}</p>
-        <label class="check-row">
-          <input type="checkbox" name="changeMode" checked>
-          <span>Berechtigungen ändern</span>
-        </label>
-        ${permissionMatrixMarkup(dialog.mode)}
-        <label class="field-row">
-          <span>Numerischer Wert</span>
-          <input name="mode" class="mode-input" inputmode="numeric" pattern="[0-7]{3,4}" value="${escapeAttr(dialog.mode)}" aria-label="Numerischer Wert">
-        </label>
-        <label class="check-row">
-          <input type="checkbox" name="changeOwner">
-          <span>Besitzer ändern</span>
-        </label>
-        <input name="owner" value="${escapeAttr(dialog.owner)}" aria-label="Besitzer" disabled>
-        <label class="check-row">
-          <input type="checkbox" name="changeGroup">
-          <span>Gruppe ändern</span>
-        </label>
-        <input name="group" value="${escapeAttr(dialog.group)}" aria-label="Gruppe" disabled>
-        <label class="check-row ${dialog.hasDirectory ? '' : 'disabled'}">
-          <input type="checkbox" name="recursive" ${dialog.hasDirectory ? '' : 'disabled'}>
-          <span>Rekursiv auf Unterordner und Dateien anwenden</span>
-        </label>
-      </div>
-      <footer>
-        <button type="button" data-action="cancel">Abbrechen</button>
-        <button type="submit" class="primary">Anwenden</button>
-      </footer>
-    </form>
-  `;
-
-  const form = overlay.querySelector('form');
-  form.addEventListener('click', (event) => event.stopPropagation());
-  overlay.addEventListener('click', () => closePermissionsDialog());
-  overlay.querySelectorAll('[data-action="cancel"]').forEach((button) => {
-    button.addEventListener('click', () => closePermissionsDialog());
-  });
-  for (const checkboxName of ['changeMode', 'changeOwner', 'changeGroup']) {
-    const checkbox = form.elements[checkboxName];
-    const inputName = checkboxName.replace('change', '').toLowerCase();
-    const input = form.elements[inputName];
-    checkbox.addEventListener('change', () => {
-      input.disabled = !checkbox.checked;
-      if (!input.disabled) input.focus();
-    });
-  }
-  bindPermissionMatrix(form);
-  form.addEventListener('submit', (event) => {
-    event.preventDefault();
-    applyPermissionsDialog(form).catch(showError);
-  });
-  return overlay;
-}
-
-function askUploadConflict(details) {
-  return new Promise((resolve) => {
-    state.uploadConflictDialog = { ...details, resolve };
-    render();
-  });
-}
-
-function renderUploadConflictDialog() {
-  const dialog = state.uploadConflictDialog;
-  const overlay = document.createElement('div');
-  overlay.className = 'modal-overlay';
-  overlay.innerHTML = `
-    <form class="permissions-modal conflict-modal" aria-label="Datei existiert bereits">
-      <header>
-        <strong>Datei existiert bereits</strong>
-        <button type="button" class="icon" data-action="skip" title="Überspringen" aria-label="Überspringen">${iconSvg('close')}</button>
-      </header>
-      <div class="modal-body">
-        <p>Im Zielordner existiert bereits eine Datei mit diesem Namen.</p>
-        <dl class="conflict-details">
-          <dt>Datei</dt>
-          <dd>${escapeHtml(dialog.path)}</dd>
-          <dt>Ziel</dt>
-          <dd>${escapeHtml(dialog.targetPath)}</dd>
-          <dt>Upload</dt>
-          <dd>${escapeHtml(`${dialog.index}/${dialog.total}`)}</dd>
-        </dl>
-      </div>
-      <footer>
-        <button type="button" data-action="skip">Überspringen</button>
-        <button type="button" data-action="overwrite">Überschreiben</button>
-        <button type="submit" class="primary">Alle überschreiben</button>
-      </footer>
-    </form>
-  `;
-
-  const form = overlay.querySelector('form');
-  form.addEventListener('click', (event) => event.stopPropagation());
-  overlay.addEventListener('click', () => closeUploadConflictDialog('skip'));
-  overlay.querySelectorAll('[data-action="skip"]').forEach((button) => {
-    button.addEventListener('click', () => closeUploadConflictDialog('skip'));
-  });
-  overlay.querySelector('[data-action="overwrite"]').addEventListener('click', () => closeUploadConflictDialog('overwrite'));
-  form.addEventListener('submit', (event) => {
-    event.preventDefault();
-    closeUploadConflictDialog('overwrite-all');
-  });
-  setTimeout(() => {
-    form.querySelector('.primary')?.focus();
-  }, 0);
-  return overlay;
-}
-
-function closeUploadConflictDialog(action) {
-  const dialog = state.uploadConflictDialog;
-  if (!dialog) return;
-  state.uploadConflictDialog = null;
-  dialog.resolve(action);
-  render();
-}
-
-function showMessageDialog(title, message, detail = '') {
-  return showUiDialog({
-    type: 'message',
-    title,
-    message,
-    detail,
-    confirmLabel: 'OK'
-  });
-}
-
-function showConfirmDialog(title, message, detail = '', options = {}) {
-  return showUiDialog({
-    type: 'confirm',
-    title,
-    message,
-    detail,
-    confirmLabel: options.confirmLabel || 'OK',
-    cancelLabel: options.cancelLabel || 'Abbrechen',
-    danger: Boolean(options.danger)
-  });
-}
-
-function showPromptDialog(title, label, value = '') {
-  return showUiDialog({
-    type: 'prompt',
-    title,
-    message: label,
-    value,
-    confirmLabel: 'OK',
-    cancelLabel: 'Abbrechen'
-  });
-}
-
-function showUiDialog(options) {
-  return new Promise((resolve) => {
-    state.uiDialog = { ...options, resolve };
-    render();
-  });
-}
-
-function renderUiDialog() {
-  const dialog = state.uiDialog;
-  const overlay = document.createElement('div');
-  overlay.className = 'modal-overlay';
-  const isPrompt = dialog.type === 'prompt';
-  const isConfirm = dialog.type === 'confirm';
-  overlay.innerHTML = `
-    <form class="permissions-modal ui-modal" aria-label="${escapeAttr(dialog.title)}">
-      <header>
-        <strong>${escapeHtml(dialog.title)}</strong>
-        <button type="button" class="icon" data-action="cancel" title="Schließen" aria-label="Schließen">${iconSvg('close')}</button>
-      </header>
-      <div class="modal-body">
-        <p>${escapeHtml(dialog.message || '')}</p>
-        ${dialog.detail ? `<p class="muted">${escapeHtml(dialog.detail)}</p>` : ''}
-        ${isPrompt ? `<input name="value" value="${escapeAttr(dialog.value || '')}" aria-label="${escapeAttr(dialog.message || dialog.title)}">` : ''}
-      </div>
-      <footer>
-        ${isConfirm || isPrompt ? `<button type="button" data-action="cancel">${escapeHtml(dialog.cancelLabel || 'Abbrechen')}</button>` : ''}
-        <button type="submit" class="primary ${dialog.danger ? 'danger-action' : ''}">${escapeHtml(dialog.confirmLabel || 'OK')}</button>
-      </footer>
-    </form>
-  `;
-
-  const form = overlay.querySelector('form');
-  form.addEventListener('click', (event) => event.stopPropagation());
-  overlay.addEventListener('click', () => closeUiDialog(cancelDialogValue(dialog)));
-  overlay.querySelectorAll('[data-action="cancel"]').forEach((button) => {
-    button.addEventListener('click', () => closeUiDialog(cancelDialogValue(dialog)));
-  });
-  form.addEventListener('submit', (event) => {
-    event.preventDefault();
-    if (isPrompt) {
-      closeUiDialog(form.elements.value.value);
-      return;
-    }
-    closeUiDialog(isConfirm ? true : undefined);
-  });
-  setTimeout(() => {
-    const focusTarget = isPrompt ? form.elements.value : form.querySelector('.primary');
-    focusTarget?.focus();
-    if (isPrompt) {
-      focusTarget.select();
-    }
-  }, 0);
-  return overlay;
-}
-
-function cancelDialogValue(dialog) {
-  if (dialog.type === 'confirm') return false;
-  if (dialog.type === 'prompt') return null;
-  return undefined;
-}
-
-function closeUiDialog(value) {
-  const dialog = state.uiDialog;
-  if (!dialog) return;
-  state.uiDialog = null;
-  dialog.resolve(value);
-  render();
-}
-
-function permissionMatrixMarkup(mode) {
-  const digits = modeToDigits(mode);
-  const rows = [
-    ['owner', 'Besitzer-Berechtigungen', digits[0]],
-    ['group', 'Gruppen-Berechtigungen', digits[1]],
-    ['public', 'Öffentliche Berechtigungen', digits[2]]
-  ];
-  return rows.map(([scope, label, digit]) => `
-    <fieldset class="permission-scope" data-scope="${scope}">
-      <legend>${label}</legend>
-      ${permissionCheck(scope, 'read', 'Lesen', digit & 4)}
-      ${permissionCheck(scope, 'write', 'Schreiben', digit & 2)}
-      ${permissionCheck(scope, 'execute', 'Ausführen', digit & 1)}
-    </fieldset>
-  `).join('');
-}
-
-function permissionCheck(scope, bit, label, checked) {
-  return `
-    <label>
-      <input type="checkbox" data-permission="${scope}.${bit}" ${checked ? 'checked' : ''}>
-      <span>${label}</span>
-    </label>
+  const entry = entries[0];
+  pane.innerHTML = `
+    <div class="details-header"><strong>Details</strong>${iconButton('close', 'Details schließen', 'details')}</div>
+    <div class="preview-box">${previewMarkup(entry)}</div>
+    <div class="detail-title"><span class="file-type-icon large ${fileTone(entry)}">${icon(fileIcon(entry))}</span><div><strong>${escapeHtml(entry.name)}</strong><span>${escapeHtml(typeLabel(entry))}</span></div></div>
+    <dl class="detail-list">
+      <dt>Größe</dt><dd>${entry.type === 'file' ? formatBytes(entry.size) : 'Ordner'}</dd>
+      <dt>Geändert</dt><dd>${formatDate(entry.modifiedAt, true)}</dd>
+      ${entry.owner != null ? `<dt>Besitzer</dt><dd>${escapeHtml(entry.owner)}</dd>` : ''}
+      ${entry.group != null ? `<dt>Gruppe</dt><dd>${escapeHtml(entry.group)}</dd>` : ''}
+      ${entry.permissions ? `<dt>Rechte</dt><dd><code>${escapeHtml(entry.permissions)}</code></dd>` : ''}
+      <dt>Pfad</dt><dd class="detail-path">${escapeHtml(entry.path)}</dd>
+    </dl>
+    ${PHP_API && isPreviewable(entry) && !state.preview ? `<button type="button" class="action full" data-action="open" data-path="${escapeAttr(entry.path)}">${icon('image')}<span>Vorschau laden</span></button>` : ''}
   `;
 }
 
-function bindPermissionMatrix(form) {
-  const changeMode = form.elements.changeMode;
-  const modeInput = form.elements.mode;
-  const permissionInputs = [...form.querySelectorAll('[data-permission]')];
-  const setModeDisabled = () => {
-    modeInput.disabled = !changeMode.checked;
-    for (const input of permissionInputs) {
-      input.disabled = !changeMode.checked;
-    }
-  };
-  changeMode.addEventListener('change', setModeDisabled);
-  for (const input of permissionInputs) {
-    input.addEventListener('change', () => {
-      changeMode.checked = true;
-      setModeDisabled();
-      modeInput.value = modeFromPermissionInputs(form);
-    });
-  }
-  modeInput.addEventListener('input', () => {
-    changeMode.checked = true;
-    setModeDisabled();
-    syncPermissionInputsFromMode(form, modeInput.value);
-  });
-  setModeDisabled();
+function previewMarkup(entry) {
+  if (state.previewLoading) return '<span class="spinner"></span>';
+  if (!state.preview) return `<span class="preview-placeholder ${fileTone(entry)}">${icon(fileIcon(entry))}</span>`;
+  if (state.preview.error) return `<span class="preview-error">${escapeHtml(state.preview.error)}</span>`;
+  const data = state.preview;
+  const raw = endpointRaw(data.rawUrl);
+  if (data.type === 'image') return `<img src="${escapeAttr(raw)}" alt="${escapeAttr(entry.name)}">`;
+  if (data.type === 'audio') return `<audio controls src="${escapeAttr(raw)}"></audio>`;
+  if (data.type === 'video') return `<video controls src="${escapeAttr(raw)}"></video>`;
+  if (data.type === 'pdf') return `<iframe src="${escapeAttr(raw)}" title="${escapeAttr(entry.name)}"></iframe>`;
+  return `<pre>${escapeHtml(String(data.content || '').slice(0, 6000))}</pre>`;
 }
 
-function modeFromPermissionInputs(form) {
-  const scopes = ['owner', 'group', 'public'];
-  const values = scopes.map((scope) => {
-    let value = 0;
-    if (form.querySelector(`[data-permission="${scope}.read"]`)?.checked) value += 4;
-    if (form.querySelector(`[data-permission="${scope}.write"]`)?.checked) value += 2;
-    if (form.querySelector(`[data-permission="${scope}.execute"]`)?.checked) value += 1;
-    return String(value);
-  });
-  return values.join('');
+function renderStatus() {
+  root.querySelector('#statusText').textContent = state.status;
+  const selected = selectedEntries();
+  root.querySelector('#selectionStatus').textContent = selected.length ? `${selected.length} ausgewählt · ${formatBytes(selected.reduce((sum, item) => sum + Number(item.size || 0), 0))}` : '';
+  root.querySelector('#itemCount').textContent = `${visibleEntries().length} ${visibleEntries().length === 1 ? 'Element' : 'Elemente'}`;
 }
 
-function syncPermissionInputsFromMode(form, mode) {
-  if (!/^[0-7]{3,4}$/.test(mode)) return;
-  const digits = modeToDigits(mode);
-  for (const [index, scope] of ['owner', 'group', 'public'].entries()) {
-    const digit = digits[index];
-    const map = { read: 4, write: 2, execute: 1 };
-    for (const [bit, value] of Object.entries(map)) {
-      const input = form.querySelector(`[data-permission="${scope}.${bit}"]`);
-      if (input) input.checked = Boolean(digit & value);
-    }
-  }
+function updateControls() {
+  const selected = selectedEntries();
+  root.querySelectorAll('.selection-action').forEach((button) => { button.disabled = !selected.length; });
+  root.querySelector('[data-action="rename"]').disabled = selected.length !== 1 || isReadOnly();
+  for (const action of ['copy', 'move', 'delete']) root.querySelector(`[data-action="${action}"]`).disabled = !selected.length || isReadOnly();
+  root.querySelector('[data-action="upload"]').disabled = isReadOnly();
+  root.querySelector('[data-action="upload-folder"]').disabled = isReadOnly();
+  root.querySelector('[data-action="back"]').disabled = state.historyIndex <= 0;
+  root.querySelector('[data-action="forward"]').disabled = state.historyIndex >= state.history.length - 1;
+  root.querySelector('[data-action="up"]').disabled = !activeRoot() || state.path === activeRoot().path;
+  root.querySelector('[data-action="view-list"]').classList.toggle('active', state.view === 'list');
+  root.querySelector('[data-action="view-grid"]').classList.toggle('active', state.view === 'grid');
+  root.querySelector('[data-action="details"]').classList.toggle('active', state.detailsOpen);
 }
 
-function normalizeMode(mode) {
-  const value = String(mode || '');
-  if (!/^[0-7]{3,4}$/.test(value)) return '755';
-  return value.length === 4 ? value.slice(1) : value;
+function setView(view) {
+  state.view = view;
+  localStorage.setItem('unav-view', view);
+  renderFiles();
+  updateControls();
 }
 
-function modeToDigits(mode) {
-  const normalized = normalizeMode(mode);
-  return normalized.split('').slice(-3).map((digit) => Number(digit));
+function toggleDetails() {
+  state.detailsOpen = !state.detailsOpen;
+  localStorage.setItem('unav-details', state.detailsOpen ? 'open' : 'closed');
+  renderDetails();
+  updateControls();
 }
 
-function closePermissionsDialog() {
-  state.permissionsDialog = null;
-  render();
+function toggleDrawer(name) {
+  state.drawer = state.drawer === name ? null : name;
+  renderDrawer();
 }
 
-async function applyPermissionsDialog(form) {
-  const dialog = state.permissionsDialog;
-  if (!dialog) return;
-  const options = {
-    mode: form.elements.changeMode.checked ? form.elements.mode.value.trim() : '',
-    owner: form.elements.changeOwner.checked ? form.elements.owner.value.trim() : '',
-    group: form.elements.changeGroup.checked ? form.elements.group.value.trim() : '',
-    recursive: form.elements.recursive.checked ? '1' : '0'
-  };
-  if (!options.mode && !options.owner && !options.group) {
-    showError(new Error('Keine Änderung angegeben.'));
-    return;
-  }
-  if (options.mode && !/^[0-7]{3,4}$/.test(options.mode)) {
-    showError(new Error('Berechtigungen müssen aus 3 oder 4 Oktalziffern bestehen.'));
-    return;
-  }
-  const win = state.windows.find((item) => item.id === dialog.winId);
-  closePermissionsDialog();
-  for (const item of dialog.entries) {
-    await createJob('permissions', item.path, null, [win?.id], options);
-  }
-}
-
-function showPropertiesForEntry(win, entry) {
-  selectEntry(win, entry);
-  openProperties(entry);
-}
-
-function showContextMenu(event, win, entry) {
-  const rect = workspace.getBoundingClientRect();
-  state.contextMenu = {
-    x: event.clientX - rect.left,
-    y: event.clientY - rect.top,
-    winId: win.id,
-    entryPath: entry?.path || null
-  };
-  render();
-}
-
-function renderContextMenu() {
-  const menu = document.createElement('div');
-  menu.className = 'context-menu';
-  menu.style.left = `${state.contextMenu.x}px`;
-  menu.style.top = `${state.contextMenu.y}px`;
-
-  const win = state.windows.find((item) => item.id === state.contextMenu.winId);
-  const entry = win?.data.entries?.find((item) => item.path === state.contextMenu.entryPath) || null;
-  const actions = [];
-
-  if (entry) {
-    if (entry.type === 'directory') {
-      actions.push(['Öffnen', () => loadExplorer(win, entry.path)]);
-    } else if (isPreviewable(entry)) {
-      actions.push(['Vorschau', () => openPreview(entry, win.id)]);
-    }
-    actions.push(['Eigenschaften', () => showPropertiesForEntry(win, entry)]);
-    actions.push(['Herunterladen', () => downloadEntries(win, entry)]);
-    if (!isReadOnly()) {
-      actions.push(['Umbenennen', () => renameEntry(win, entry)]);
-      actions.push(['Berechtigungen...', () => openPermissionsDialog(win, entry)]);
-      actions.push(['Kopieren nach...', () => promptTransfer(win, entry, 'copy')]);
-      actions.push(['Verschieben nach...', () => promptTransfer(win, entry, 'move')]);
-      actions.push(['Löschen', () => deleteEntries(win, entry)]);
-    }
+function renderDrawer() {
+  const host = root.querySelector('#drawerHost');
+  if (!state.drawer) { host.innerHTML = ''; return; }
+  if (state.drawer === 'transfers') {
+    const items = [...state.uploads].reverse().concat([...state.jobs.values()].reverse());
+    host.innerHTML = drawerMarkup('Transfers', items.length ? items.map(transferMarkup).join('') : '<div class="drawer-empty">Keine Transfers in dieser Sitzung.</div>');
   } else {
-    actions.push(['Aktuellen Ordner herunterladen', () => downloadEntries(win, null)]);
-    actions.push(['Neu laden', () => loadExplorer(win, win.data.path)]);
+    host.innerHTML = drawerMarkup('Einstellungen', `
+      <form class="settings-form">
+        <label><span><strong>Schreibzugriff</strong><small>Dateioperationen und Uploads erlauben</small></span><input type="checkbox" name="write" ${!isReadOnly() ? 'checked' : ''}></label>
+        <label><span><strong>Debug-Modus</strong><small>Zusätzliche Diagnoseinformationen aktivieren</small></span><input type="checkbox" name="debug" ${state.config?.debug ? 'checked' : ''}></label>
+        <button type="button" class="action primary full" data-action="save-settings">Speichern</button>
+      </form>
+    `);
   }
+}
 
-  for (const [label, action] of actions) {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.textContent = label;
-    button.addEventListener('click', async () => {
-      state.contextMenu = null;
-      render();
-      try {
-        await action();
-      } catch (error) {
-        showError(error);
-      }
-    });
-    menu.appendChild(button);
+function drawerMarkup(title, content) {
+  return `<div class="drawer-scrim" data-action="close-drawer"></div><aside class="drawer"><header><div><small>U-Navigator</small><strong>${escapeHtml(title)}</strong></div>${iconButton('close', 'Schließen', 'close-drawer')}</header><div class="drawer-body">${content}</div></aside>`;
+}
+
+function transferMarkup(item) {
+  const progress = Math.max(0, Math.min(100, Number(item.progress || 0)));
+  return `<article class="transfer-item"><div><span class="transfer-icon">${icon(item.type === 'upload' ? 'upload' : 'transfer')}</span><div><strong>${escapeHtml(item.name || `${item.type} #${item.id}`)}</strong><small>${escapeHtml(item.message || item.status || '')}</small></div><b>${progress}%</b></div><div class="progress"><span style="width:${progress}%"></span></div></article>`;
+}
+
+async function saveSettings(form) {
+  const body = new URLSearchParams({ readOnly: form.elements.write.checked ? '0' : '1', debug: form.elements.debug.checked ? '1' : '0' });
+  appendCsrf(body);
+  try {
+    state.config = await api(endpoint('config'), { method: 'POST', headers: formHeaders(), body });
+    state.status = 'Einstellungen gespeichert';
+    state.drawer = null;
+    renderContent();
+    renderDrawer();
+  } catch (error) { showToast(error.message, 'error'); }
+}
+
+async function uploadFiles(files) {
+  if (!files.length || isReadOnly()) return;
+  const input = root.querySelector('#fileUpload');
+  const folderInput = root.querySelector('#folderUpload');
+  const transfer = { id: Date.now(), type: 'upload', name: files.length === 1 ? files[0].name : `${files.length} Dateien`, status: 'Wird hochgeladen', message: state.path, progress: 5 };
+  state.uploads.push(transfer);
+  updateTransferBadge();
+  state.drawer = 'transfers';
+  renderDrawer();
+  const form = new FormData();
+  files.forEach((file) => {
+    form.append(PHP_API ? 'files[]' : 'files', file, file.name);
+    form.append('paths[]', file.webkitRelativePath || file.name);
+  });
+  const token = getCsrfToken();
+  if (token) form.append('csrf_token', token);
+  try {
+    await api(endpoint('upload', { path: state.path }), { method: 'POST', body: form });
+    transfer.progress = 100;
+    transfer.status = 'Abgeschlossen';
+    showToast(`${files.length} ${files.length === 1 ? 'Datei' : 'Dateien'} hochgeladen`);
+    await navigate(state.path, { replace: true });
+  } catch (error) {
+    transfer.status = 'Fehlgeschlagen';
+    transfer.message = error.message;
+    showToast(error.message, 'error');
+  } finally {
+    input.value = '';
+    folderInput.value = '';
+    updateTransferBadge();
+    renderDrawer();
   }
+}
 
-  setTimeout(() => {
-    const close = () => {
-      state.contextMenu = null;
-      render();
-      document.removeEventListener('click', close);
-      document.removeEventListener('keydown', keyClose);
-    };
-    const keyClose = (event) => {
-      if (event.key === 'Escape') close();
-    };
-    document.addEventListener('click', close);
-    document.addEventListener('keydown', keyClose);
-  }, 0);
+function downloadSelected() {
+  if (!PHP_API) return showToast('Downloads stehen nur im Unraid-Plugin zur Verfügung.', 'error');
+  const paths = selectedEntries().map((entry) => entry.path);
+  if (!paths.length) return;
+  const query = paths.length === 1 ? `path=${encodeURIComponent(paths[0])}` : `paths=${encodeURIComponent(JSON.stringify(paths))}`;
+  const link = document.createElement('a');
+  link.href = `${API_BASE}/download.php?${query}`;
+  link.click();
+}
 
-  return menu;
+async function renameSelected() {
+  const entry = selectedEntries()[0];
+  if (!entry) return;
+  const next = await promptDialog('Umbenennen', 'Neuer Name', entry.name);
+  if (!next || next === entry.name) return;
+  if (next.includes('/') || next.includes('\\') || next === '.' || next === '..' || next.includes('\0')) {
+    return showToast('Der Dateiname enthält ungültige Zeichen.', 'error');
+  }
+  await createJob('move', entry.path, joinPath(parentPath(entry.path), next));
+}
+
+async function transferSelected(type) {
+  const entries = selectedEntries();
+  const destination = await promptDialog(type === 'copy' ? 'Kopieren' : 'Verschieben', 'Zielordner', state.path);
+  if (!destination) return;
+  for (const entry of entries) await createJob(type, entry.path, joinPath(destination, entry.name));
+}
+
+async function deleteSelected() {
+  const entries = selectedEntries();
+  if (!entries.length) return;
+  const confirmed = await confirmDialog('Endgültig löschen?', entries.length === 1 ? `„${entries[0].name}“ wird direkt vom Dateisystem gelöscht.` : `${entries.length} Elemente werden direkt vom Dateisystem gelöscht.`);
+  if (!confirmed) return;
+  for (const entry of entries) await createJob('delete', entry.path);
+}
+
+async function createJob(type, source, destination = null) {
+  const body = new URLSearchParams({ source });
+  if (destination) body.set('destination', destination);
+  appendCsrf(body);
+  try {
+    const job = await api(endpoint('job', { action: type }), { method: 'POST', headers: formHeaders(), body });
+    state.jobs.set(job.id, job);
+    state.drawer = 'transfers';
+    renderDrawer();
+    updateTransferBadge();
+    pollJob(job.id);
+  } catch (error) { showToast(error.message, 'error'); }
 }
 
 async function pollJob(id) {
   try {
-    const job = await api(apiUrl(`job.php?id=${encodeURIComponent(id)}`));
+    const job = await api(endpoint('job', { id }));
     state.jobs.set(id, job);
-    updateTransferPanel();
-    if (['queued', 'running', 'cancel_requested'].includes(job.status)) {
-      setTimeout(() => pollJob(id), 700);
-    } else if (job.type === 'size') {
-      finishSizeJob(job);
-    } else {
-      await refreshAfterJob(job);
-      scheduleTransferAutoHide();
+    renderDrawer();
+    updateTransferBadge();
+    if (['queued', 'running', 'cancel_requested'].includes(job.status)) setTimeout(() => pollJob(id), 700);
+    else {
+      if (job.status === 'completed') { showToast(`${typeLabel({ type: job.type })} abgeschlossen`); await navigate(state.path, { replace: true }); }
+      else showToast(job.error || job.message || 'Dateioperation fehlgeschlagen', 'error');
     }
-  } catch (error) {
-    recordDebug('job.poll.error', { id, error: serializeError(error) });
-    showError(error);
-  }
+  } catch (error) { showToast(error.message, 'error'); }
 }
 
-function ensureDirectorySize(entry) {
-  if (state.sizeResults.has(entry.path) || state.sizeJobs.has(entry.path)) {
-    return;
-  }
-  state.sizeJobs.set(entry.path, 'pending');
-  createSizeJob(entry).catch((error) => {
-    state.sizeJobs.delete(entry.path);
-    showError(error);
-  });
+function updateTransferBadge() {
+  const active = [...state.jobs.values()].filter((item) => ['queued', 'running'].includes(item.status)).length + state.uploads.filter((item) => item.progress < 100 && item.status !== 'Fehlgeschlagen').length;
+  const badge = root.querySelector('#transferBadge');
+  badge.hidden = !active;
+  badge.textContent = active;
 }
 
-function finishSizeJob(job) {
-  state.sizeJobs.delete(job.source);
-  if (job.status === 'completed' && job.result) {
-    state.sizeResults.set(job.source, job.result);
-  }
-  recordDebug('size.finish', { id: job.id, source: job.source, status: job.status, result: job.result || null });
-  updatePropertiesWindows();
-}
-
-async function refreshAfterJob(job) {
-  const refresh = state.jobRefresh.get(job.id);
-  if (refresh?.done) {
-    return;
-  }
-  if (refresh) {
-    refresh.done = true;
-  }
-  const windowIds = refresh?.windowIds || [];
-  recordDebug('job.refresh', { id: job.id, status: job.status, windowIds });
-  await reloadExplorerWindows(windowIds);
-  if (refresh) {
-    state.jobRefresh.delete(job.id);
-  }
-}
-
-function selectEntry(win, entry, scrollBody = null, event = null) {
-  if (state.suppressClickPath === entry.path) {
-    state.suppressClickPath = null;
-    restoreExplorerScroll(win, scrollBody);
-    return;
-  }
-  applyExplorerSelection(win, entry, event);
-  state.selectedEntry = entry;
-  focusWindow(win);
-  updateSelectedRows();
-  updatePropertiesWindows();
-  restoreExplorerScroll(win, scrollBody);
-}
-
-function applyExplorerSelection(win, entry, event = null) {
-  const entries = win.data.entries || [];
-  const current = selectedPathSet(win);
-  const toggle = Boolean(event?.ctrlKey || event?.metaKey);
-  const range = Boolean(event?.shiftKey && win.data.selectionAnchorPath);
-
-  if (range) {
-    const anchorIndex = entries.findIndex((item) => item.path === win.data.selectionAnchorPath);
-    const entryIndex = entries.findIndex((item) => item.path === entry.path);
-    if (anchorIndex >= 0 && entryIndex >= 0) {
-      const [start, end] = anchorIndex < entryIndex ? [anchorIndex, entryIndex] : [entryIndex, anchorIndex];
-      const paths = entries.slice(start, end + 1).map((item) => item.path);
-      win.data.selectedPaths = toggle ? [...new Set([...current, ...paths])] : paths;
-    } else {
-      win.data.selectedPaths = [entry.path];
-      win.data.selectionAnchorPath = entry.path;
-    }
-  } else if (toggle) {
-    if (current.has(entry.path)) {
-      current.delete(entry.path);
-    } else {
-      current.add(entry.path);
-    }
-    win.data.selectedPaths = [...current];
-    win.data.selectionAnchorPath = entry.path;
-  } else {
-    win.data.selectedPaths = [entry.path];
-    win.data.selectionAnchorPath = entry.path;
-  }
-
-  win.data.selectedPath = entry.path;
-  if (!win.data.selectedPaths.length) {
-    win.data.selectedPath = null;
-    win.data.selectionAnchorPath = null;
-  }
-}
-
-function reconcileExplorerSelection(win) {
-  const available = new Set((win.data.entries || []).map((entry) => entry.path));
-  win.data.selectedPaths = (win.data.selectedPaths || []).filter((path) => available.has(path));
-  if (!available.has(win.data.selectedPath)) {
-    win.data.selectedPath = win.data.selectedPaths[0] || null;
-  }
-  if (!available.has(win.data.selectionAnchorPath)) {
-    win.data.selectionAnchorPath = win.data.selectedPath;
-  }
-  if (state.selectedEntry && !available.has(state.selectedEntry.path) && state.focusedId === win.id) {
-    state.selectedEntry = null;
-  }
-}
-
-function selectedPathSet(win) {
-  return new Set(win?.data?.selectedPaths || (win?.data?.selectedPath ? [win.data.selectedPath] : []));
-}
-
-function selectedEntries(win) {
-  const paths = selectedPathSet(win);
-  return (win?.data?.entries || []).filter((entry) => paths.has(entry.path));
-}
-
-function shouldSuppressItemActivation() {
-  if (Date.now() <= state.suppressItemActivationUntil) {
-    recordDebug('item.activation.suppressed', { until: state.suppressItemActivationUntil });
-    return true;
-  }
-  return false;
-}
-
-function focusWindow(win) {
-  state.focusedId = win.id;
-  win.zIndex = ++state.zIndex;
-  for (const windowEl of workspace.querySelectorAll('.window')) {
-    windowEl.classList.toggle('focused', windowEl.dataset.windowId === win.id);
-  }
-  const current = workspace.querySelector(`.window[data-window-id="${win.id}"]`);
-  if (current) {
-    current.style.zIndex = win.zIndex;
-  }
-}
-
-function updateSelectedRows() {
-  for (const win of state.windows.filter((item) => item.kind === 'explorer')) {
-    const selected = selectedPathSet(win);
-    for (const row of workspace.querySelectorAll(`.window[data-window-id="${win.id}"] .file-row`)) {
-      row.classList.toggle('selected', selected.has(row.dataset.path));
-    }
-  }
-}
-
-function handleTypeAheadKey(event) {
-  if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
-  if (state.contextMenu || state.settingsPanelVisible) return;
-  if (isTypingTarget(document.activeElement)) return;
-  if (event.key.length !== 1) return;
-
-  const key = event.key.toLocaleLowerCase();
-  if (!/^[\p{L}\p{N}]$/u.test(key)) return;
-
-  const win = state.windows.find((item) => item.id === state.focusedId && item.kind === 'explorer');
-  if (!win || !win.data.entries?.length) return;
-
-  const now = Date.now();
-  const repeated = state.typeAhead.windowId === win.id && state.typeAhead.key === key && now - state.typeAhead.at < 1000;
-  const entries = win.data.entries;
-  const selectedIndex = entries.findIndex((entry) => entry.path === win.data.selectedPath);
-  const startIndex = repeated ? selectedIndex + 1 : Math.max(0, selectedIndex + 1);
-  const match = findTypeAheadMatch(entries, key, startIndex);
-  if (!match) return;
-
-  event.preventDefault();
-  state.typeAhead = { key, windowId: win.id, at: now };
-  win.data.selectedPath = match.path;
-  win.data.selectedPaths = [match.path];
-  win.data.selectionAnchorPath = match.path;
-  state.selectedEntry = match;
-  focusWindow(win);
-  updateSelectedRows();
-  updatePropertiesWindows();
-  scrollEntryIntoView(win, match.path);
-  recordDebug('typeahead.match', { key, path: match.path });
-}
-
-function findTypeAheadMatch(entries, key, startIndex) {
-  for (let offset = 0; offset < entries.length; offset += 1) {
-    const index = (startIndex + offset) % entries.length;
-    const entry = entries[index];
-    if (entry.name?.toLocaleLowerCase().startsWith(key)) {
-      return entry;
-    }
-  }
-  return null;
-}
-
-function scrollEntryIntoView(win, path) {
-  const row = workspace.querySelector(`.window[data-window-id="${win.id}"] .file-row[data-path="${cssEscape(path)}"]`);
-  row?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-}
-
-function isTypingTarget(element) {
-  if (!element) return false;
-  const tag = element.tagName;
-  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || element.isContentEditable;
-}
-
-function updatePropertiesWindows() {
-  for (const win of state.windows.filter((item) => item.kind === 'properties')) {
-    const body = workspace.querySelector(`.window[data-window-id="${win.id}"] .window-body`);
-    if (body) {
-      renderProperties(body);
-    }
-  }
-}
-
-function startItemPointerDrag(event, win, entry) {
-  if (event.button !== 0 || !entry) return;
-
-  const items = dragItemsForEntry(win, entry);
-  recordDebug('pointer.start', {
-    windowId: win.id,
-    path: entry.path,
-    type: entry.type,
-    count: items.length,
-    x: event.clientX,
-    y: event.clientY
-  });
-  state.pointerDrag = {
-    sourceWindowId: win.id,
-    path: entry.path,
-    name: entry.name,
-    type: entry.type,
-    items,
-    paths: items.map((item) => item.path),
-    startX: event.clientX,
-    startY: event.clientY,
-    active: false,
-    targetWindowId: null,
-    targetPath: null
-  };
-
-  const move = (moveEvent) => updateItemPointerDrag(moveEvent);
-  const up = (upEvent) => finishItemPointerDrag(upEvent, move, up);
-  document.addEventListener('pointermove', move);
-  document.addEventListener('pointerup', up, { once: true });
-  try {
-    event.currentTarget.setPointerCapture(event.pointerId);
-  } catch {}
-}
-
-function updateItemPointerDrag(event) {
-  const drag = state.pointerDrag;
-  if (!drag) return;
-
-  const distance = Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY);
-  if (!drag.active && distance < 6) {
-    return;
-  }
-
-  drag.active = true;
-  event.preventDefault();
-  document.body.classList.add('u-nav-dragging');
-  markDraggingRows(drag.paths, true);
-  markDropCandidates(drag.paths, true);
-  updatePointerDropTarget(event);
-}
-
-async function finishItemPointerDrag(event, move, up) {
-  document.removeEventListener('pointermove', move);
-  document.removeEventListener('pointerup', up);
-
-  const drag = state.pointerDrag;
-  clearPointerDropTarget();
-  document.body.classList.remove('u-nav-dragging');
-  if (!drag) return;
-
-  markDraggingRows(drag.paths, false);
-  markDropCandidates(drag.paths, false);
-  state.pointerDrag = null;
-
-  if (!drag.active) {
-    return;
-  }
-
-  event.preventDefault();
-  state.suppressClickPath = drag.path;
-  state.suppressItemActivationUntil = Date.now() + 450;
-  const target = findPointerDropTarget(event);
-  recordDebug('pointer.finish', {
-    source: drag.path,
-    sources: drag.paths,
-    target: target ? { windowId: target.windowId, path: target.path, rowPath: target.row?.dataset?.path || null } : null,
-    copy: event.altKey,
-    x: event.clientX,
-    y: event.clientY
-  });
-  if (!target) {
-    return;
-  }
-
-  try {
-    const jobs = drag.items.map((item) => ({
-      item,
-      destination: joinPath(target.path, item.name)
-    }));
-    recordDebug('pointer.destination', {
-      source: drag.path,
-      sources: drag.paths,
-      targetPath: target.path,
-      destinations: jobs.map((job) => job.destination),
-      targetIsRow: Boolean(target.row),
-      copy: event.altKey
-    });
-    validatePointerDropJobs(jobs, target.path);
-    for (const job of jobs) {
-      await createJob(event.altKey ? 'copy' : 'move', job.item.path, job.destination, [drag.sourceWindowId, target.windowId]);
-    }
-  } catch (error) {
-    showError(error);
-  }
-}
-
-function dragItemsForEntry(win, entry) {
-  const selected = selectedPathSet(win);
-  if (selected.has(entry.path)) {
-    const entries = selectedEntries(win);
-    if (entries.length) return entries;
-  }
-  return [entry];
-}
-
-function validatePointerDropJobs(jobs, targetPath) {
-  const destinations = new Set();
-  for (const { item, destination } of jobs) {
-    if (destinations.has(destination)) {
-      throw new Error('Mehrere Quellen würden am Ziel denselben Namen verwenden.');
-    }
-    destinations.add(destination);
-    if (destination === item.path || targetPath === item.path) {
-      throw new Error('Quelle und Ziel sind identisch.');
-    }
-    if (item.type === 'directory' && isPathInside(targetPath, item.path)) {
-      throw new Error('Ein Ordner kann nicht in sich selbst verschoben werden.');
-    }
-  }
-}
-
-function updatePointerDropTarget(event) {
-  clearPointerDropTarget();
-  const target = findPointerDropTarget(event);
-  if (!target) return;
-
-  state.pointerDrag.targetWindowId = target.windowId;
-  state.pointerDrag.targetPath = target.path;
-  const windowEl = workspace.querySelector(`.window[data-window-id="${target.windowId}"]`);
-  windowEl?.querySelector('.drop-zone')?.classList.add('drag-over');
-  if (target.row) {
-    target.row.classList.add('drop-target');
-  }
-}
-
-function clearPointerDropTarget() {
-  for (const item of workspace.querySelectorAll('.drop-zone.drag-over')) {
-    item.classList.remove('drag-over');
-  }
-  for (const item of workspace.querySelectorAll('.file-row.drop-target')) {
-    item.classList.remove('drop-target');
-  }
-}
-
-function findPointerDropTarget(event) {
-  let element;
-  let elements = [];
-  try {
-    element = document.elementFromPoint(event.clientX, event.clientY);
-    elements = document.elementsFromPoint ? document.elementsFromPoint(event.clientX, event.clientY) : [element];
-  } catch (error) {
-    recordDebug('elementFromPoint.error', {
-      x: event.clientX,
-      y: event.clientY,
-      error: serializeError(error)
-    });
-    return null;
-  }
-  let windowEl;
-  try {
-    windowEl = element?.closest?.('.window');
-  } catch (error) {
-    recordDebug('closest.window.error', { error: serializeError(error), element: element?.tagName });
-    return null;
-  }
-  if (!windowEl) return null;
-
-  const win = state.windows.find((item) => item.id === windowEl.dataset.windowId);
-  if (!win || win.kind !== 'explorer') return null;
-
-  const drag = state.pointerDrag;
-  let row = null;
-  for (const candidate of elements) {
-    try {
-      const candidateRow = candidate.closest?.('.file-row');
-      if (!candidateRow || candidateRow.dataset.type !== 'directory') {
-        continue;
-      }
-      if (drag?.paths?.includes(candidateRow.dataset.path)) {
-        continue;
-      }
-      if (!isValidPointerTargetPath(candidateRow.dataset.path, drag)) {
-        continue;
-      }
-      if (candidateRow.closest?.('.window') !== windowEl) {
-        continue;
-      }
-      row = candidateRow;
-      break;
-    } catch (error) {
-      recordDebug('closest.row.error', { error: serializeError(error), element: candidate?.tagName });
-    }
-  }
-  if (row) {
-    return { windowId: win.id, path: row.dataset.path, row };
-  }
-
-  return { windowId: win.id, path: win.data.path, row: null };
-}
-
-function markDraggingRows(paths, dragging) {
-  const pathSet = new Set(paths || []);
-  for (const row of workspace.querySelectorAll('.file-row')) {
-    if (pathSet.has(row.dataset.path)) {
-      row.classList.toggle('dragging', dragging);
-    }
-  }
-}
-
-function markDropCandidates(sourcePaths, active) {
-  const source = state.pointerDrag;
-  for (const row of workspace.querySelectorAll('.file-row[data-type="directory"]')) {
-    const path = row.dataset.path || '';
-    const valid = !sourcePaths.includes(path) && isValidPointerTargetPath(path, source);
-    row.classList.toggle('drop-candidate', active && valid);
-  }
-}
-
-function isValidPointerTargetPath(path, drag = state.pointerDrag) {
-  if (!drag) return false;
-  return (drag.items || []).every((item) => {
-    if (path === item.path) return false;
-    return !(item.type === 'directory' && isPathInside(path, item.path));
-  });
-}
-
-function lockExplorerScroll(win, body) {
-  win.data.lockScroll = true;
-  win.data.lockScrollTop = body.scrollTop;
-  win.data.lockScrollLeft = body.scrollLeft;
-}
-
-function restoreExplorerScroll(win, body) {
-  if (!body) {
-    body = workspace.querySelector(`.window[data-window-id="${win.id}"] .window-body`);
-  }
-  if (!body) return;
-
-  const top = win.data.lockScrollTop ?? win.data.scrollTop ?? 0;
-  const left = win.data.lockScrollLeft ?? win.data.scrollLeft ?? 0;
-  const restore = () => {
-    body.scrollTop = top;
-    body.scrollLeft = left;
-  };
-
-  restore();
-  requestAnimationFrame(restore);
-  setTimeout(restore, 0);
-  setTimeout(() => {
-    restore();
-    win.data.lockScroll = false;
-    win.data.scrollTop = body.scrollTop;
-    win.data.scrollLeft = body.scrollLeft;
-  }, 120);
-}
-
-function startDragWindow(event, win) {
-  if (event.target.closest('button') || win.maximized) return;
-  event.preventDefault();
-  const startX = event.clientX;
-  const startY = event.clientY;
-  const originX = win.x;
-  const originY = win.y;
-  const pointerId = event.pointerId;
-  event.currentTarget.setPointerCapture(pointerId);
-
-  const move = (moveEvent) => {
-    win.x = clamp(originX + moveEvent.clientX - startX, 0, Math.max(0, workspace.clientWidth - 120));
-    win.y = clamp(originY + moveEvent.clientY - startY, 0, Math.max(0, workspace.clientHeight - 80));
-    render();
-  };
-  const up = () => {
-    window.removeEventListener('pointermove', move);
-    window.removeEventListener('pointerup', up);
-  };
-  window.addEventListener('pointermove', move);
-  window.addEventListener('pointerup', up);
-}
-
-function startResizeWindow(event, win) {
+function showContext(event, path) {
   event.preventDefault();
   event.stopPropagation();
-  const startX = event.clientX;
-  const startY = event.clientY;
-  const originWidth = win.width;
-  const originHeight = win.height;
-
-  const move = (moveEvent) => {
-    win.width = Math.max(320, originWidth + moveEvent.clientX - startX);
-    win.height = Math.max(280, originHeight + moveEvent.clientY - startY);
-    render();
-  };
-  const up = () => {
-    window.removeEventListener('pointermove', move);
-    window.removeEventListener('pointerup', up);
-  };
-  window.addEventListener('pointermove', move);
-  window.addEventListener('pointerup', up);
+  if (!state.selected.has(path)) { state.selected.clear(); state.selected.add(path); selectionChanged(); }
+  const host = root.querySelector('#contextHost');
+  const entry = findEntry(path);
+  host.innerHTML = `<div class="context-menu" style="left:${Math.min(event.clientX, window.innerWidth - 240)}px;top:${Math.min(event.clientY, window.innerHeight - 310)}px">
+    <button type="button" data-action="open" data-path="${escapeAttr(path)}">${icon(entry?.type === 'directory' ? 'folder' : 'image')}<span>Öffnen</span></button>
+    <span class="context-separator"></span>
+    <button type="button" data-action="download">${icon('download')}<span>Herunterladen</span></button>
+    <button type="button" data-action="rename" ${isReadOnly() ? 'disabled' : ''}>${icon('edit')}<span>Umbenennen</span></button>
+    <button type="button" data-action="copy" ${isReadOnly() ? 'disabled' : ''}>${icon('copy')}<span>Kopieren nach …</span></button>
+    <button type="button" data-action="move" ${isReadOnly() ? 'disabled' : ''}>${icon('move')}<span>Verschieben nach …</span></button>
+    <span class="context-separator"></span>
+    <button type="button" class="danger" data-action="delete" ${isReadOnly() ? 'disabled' : ''}>${icon('trash')}<span>Löschen</span></button>
+  </div>`;
 }
 
-async function api(url, options) {
-  const response = await fetchChecked(url, options);
-  const text = await response.text();
-  try {
-    return JSON.parse(text);
-  } catch (error) {
-    recordDebug('api.json.error', {
-      url,
-      status: response.status,
-      contentType: response.headers.get('content-type'),
-      body: text.slice(0, 2000),
-      error: serializeError(error)
-    });
-    throw error;
-  }
+function closeContext(event) {
+  if (event?.target.closest('.context-menu, .row-more')) return;
+  const host = root.querySelector('#contextHost');
+  if (host) host.innerHTML = '';
 }
 
-async function fetchChecked(url, options) {
-  recordDebug('fetch.request', { url, method: options?.method || 'GET' });
-  const response = await fetch(url, options);
-  recordDebug('fetch.response', {
-    url,
-    status: response.status,
-    ok: response.ok,
-    contentType: response.headers.get('content-type')
+function showToast(message, type = 'success') {
+  const toast = document.createElement('div');
+  toast.className = `toast ${type}`;
+  toast.innerHTML = `${icon(type === 'error' ? 'info' : 'check')}<span>${escapeHtml(message)}</span>`;
+  root.appendChild(toast);
+  requestAnimationFrame(() => toast.classList.add('visible'));
+  setTimeout(() => { toast.classList.remove('visible'); setTimeout(() => toast.remove(), 250); }, 3200);
+}
+
+function confirmDialog(title, message) {
+  return dialog({ title, message, confirm: 'Löschen', danger: true });
+}
+
+function promptDialog(title, label, value) {
+  return dialog({ title, message: label, value, prompt: true, confirm: 'Übernehmen' });
+}
+
+function dialog(options) {
+  return new Promise((resolve) => {
+    const host = root.querySelector('#dialogHost');
+    host.innerHTML = `<div class="modal-scrim"><form class="modal"><header><span class="modal-icon ${options.danger ? 'danger' : ''}">${icon(options.danger ? 'trash' : 'edit')}</span><div><strong>${escapeHtml(options.title)}</strong><small>${escapeHtml(options.message)}</small></div></header>${options.prompt ? `<input name="value" value="${escapeAttr(options.value || '')}" aria-label="${escapeAttr(options.message)}">` : ''}<footer><button type="button" class="action" data-cancel>Abbrechen</button><button type="submit" class="action primary ${options.danger ? 'danger-button' : ''}">${escapeHtml(options.confirm)}</button></footer></form></div>`;
+    const form = host.querySelector('form');
+    const close = (value) => { host.innerHTML = ''; resolve(value); };
+    form.addEventListener('submit', (event) => { event.preventDefault(); close(options.prompt ? form.elements.value.value.trim() : true); });
+    host.querySelector('[data-cancel]').addEventListener('click', () => close(options.prompt ? null : false));
+    host.querySelector('.modal-scrim').addEventListener('click', (event) => { if (event.target === event.currentTarget) close(options.prompt ? null : false); });
+    setTimeout(() => { const input = form.elements.value; if (input) { input.focus(); input.select(); } }, 0);
   });
-  if (!response.ok) {
-    let message = `${response.status} ${response.statusText}`;
-    const text = await response.text();
-    try {
-      message = JSON.parse(text).error || message;
-    } catch {}
-    recordDebug('fetch.error.body', { url, status: response.status, body: text.slice(0, 2000) });
-    throw new Error(message);
-  }
-  return response;
 }
 
-function windowTitle(win) {
-  if (win.kind === 'explorer') {
-    return `Explorer · ${win.data.path || ''}`;
-  }
-  if (win.kind === 'preview') {
-    return `Vorschau · ${win.data.entry?.name || ''}`;
-  }
-  return win.title;
+function visibleEntries() {
+  const needle = state.query.trim().toLocaleLowerCase('de');
+  const result = needle ? state.entries.filter((entry) => entry.name.toLocaleLowerCase('de').includes(needle)) : [...state.entries];
+  const { key, direction } = state.sort;
+  result.sort((a, b) => {
+    if (key === 'name' && a.type === 'directory' !== (b.type === 'directory')) return a.type === 'directory' ? -1 : 1;
+    let left = a[key] ?? '';
+    let right = b[key] ?? '';
+    if (key === 'size') { left = Number(left); right = Number(right); }
+    const compared = typeof left === 'number' ? left - right : String(left).localeCompare(String(right), 'de', { numeric: true, sensitivity: 'base' });
+    return direction === 'asc' ? compared : -compared;
+  });
+  return result;
 }
 
-function parentPath(value) {
-  const parts = String(value || '').split('/').filter(Boolean);
-  if (parts.length <= 1) return value;
-  return `/${parts.slice(0, -1).join('/')}`;
+function columnHeader(key, label) {
+  const active = state.sort.key === key;
+  return `<button type="button" class="column-title ${active ? 'active' : ''}" data-sort="${key}">${escapeHtml(label)}${active ? `<span>${state.sort.direction === 'asc' ? '↑' : '↓'}</span>` : ''}</button>`;
 }
 
-function dirname(value) {
-  const parts = String(value || '').split('/').filter(Boolean);
-  if (parts.length <= 1) return '/';
-  return `/${parts.slice(0, -1).join('/')}`;
+root.addEventListener('click', (event) => {
+  const button = event.target.closest('[data-sort]');
+  if (!button) return;
+  const key = button.dataset.sort;
+  state.sort = { key, direction: state.sort.key === key && state.sort.direction === 'asc' ? 'desc' : 'asc' };
+  renderFiles();
+});
+
+function selectedEntries() { return state.entries.filter((entry) => state.selected.has(entry.path)); }
+function findEntry(path) { return state.entries.find((entry) => entry.path === path); }
+function isReadOnly() { return Boolean(state.config?.readOnly); }
+function isPreviewable(entry) { return entry?.type === 'file' && previewable.has(extension(entry.name)); }
+function activeRoot() { return (state.config?.roots || []).find((item) => isInside(state.path, item.path)) || null; }
+
+function quickPlaces() {
+  const rootEntry = (state.config?.roots || []).find((item) => isInside(state.path, item.path));
+  if (!rootEntry || state.path === rootEntry.path) return [];
+  const pieces = state.path.slice(rootEntry.path.length).split('/').filter(Boolean);
+  let current = rootEntry.path;
+  return pieces.slice(0, -1).map((name) => ({ name, path: current = joinPath(current, name) })).slice(-4).reverse();
 }
 
-function basename(value) {
-  const parts = String(value || '').split('/').filter(Boolean);
-  return parts[parts.length - 1] || '';
+function fileIcon(entry) {
+  if (entry.type === 'directory') return 'folder';
+  if (entry.type === 'symlink') return 'link';
+  const ext = extension(entry.name);
+  if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) return 'image';
+  if (['mp4', 'mkv', 'webm', 'mov'].includes(ext)) return 'video';
+  if (['mp3', 'flac', 'm4a', 'ogg', 'wav'].includes(ext)) return 'music';
+  if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(ext)) return 'archive';
+  if (['js', 'ts', 'css', 'html', 'php', 'py', 'go', 'rs', 'java', 'c', 'cpp', 'h', 'json', 'xml', 'yaml', 'yml', 'sh'].includes(ext)) return 'code';
+  return 'file';
 }
 
-function extensionOf(name) {
-  const value = String(name || '');
-  const index = value.lastIndexOf('.');
-  return index >= 0 ? value.slice(index + 1).toLowerCase() : '';
-}
-
-function isPreviewable(entry) {
-  if (entry?.type !== 'file') return false;
-  const name = String(entry.name || entry.path || '').toLowerCase();
-  return previewFilenames.has(name) || previewExtensions.has(extensionOf(name));
-}
-
-function joinPath(parent, name) {
-  return `${String(parent || '').replace(/\/+$/, '')}/${String(name || '').replace(/^\/+/, '')}`;
-}
-
-function normalizePath(value) {
-  const parts = String(value || '').split('/').filter(Boolean);
-  return `/${parts.join('/')}`;
-}
-
-function isPathInside(path, parent) {
-  const normalizedPath = normalizePath(path);
-  const normalizedParent = normalizePath(parent);
-  return normalizedPath.startsWith(`${normalizedParent.replace(/\/$/, '')}/`);
+function fileTone(entry) { return `file-${fileIcon(entry)}`; }
+function typeLabel(entry) {
+  if (entry.type === 'directory') return 'Ordner';
+  if (entry.type === 'symlink') return 'Verknüpfung';
+  if (entry.type === 'copy') return 'Kopieren';
+  if (entry.type === 'move') return 'Verschieben';
+  if (entry.type === 'delete') return 'Löschen';
+  return extensionLabel(entry);
 }
+function extensionLabel(entry) { const ext = extension(entry.name); return ext ? `${ext.toUpperCase()}-Datei` : 'Datei'; }
+function extension(name) { const index = String(name).lastIndexOf('.'); return index > 0 ? String(name).slice(index + 1).toLowerCase() : ''; }
+function rootName(item) { return item.label && item.label !== item.path ? item.label : basename(item.path) || 'Dateien'; }
+function basename(path) { return String(path || '').split('/').filter(Boolean).at(-1) || '/'; }
+function parentPath(path) { const parts = String(path || '').split('/').filter(Boolean); return parts.length <= 1 ? '/' : `/${parts.slice(0, -1).join('/')}`; }
+function joinPath(parent, name) { return `${String(parent).replace(/\/+$/, '')}/${String(name).replace(/^\/+/, '')}`; }
+function isInside(path, parent) { return path === parent || String(path || '').startsWith(`${String(parent || '').replace(/\/$/, '')}/`); }
 
 function formatBytes(bytes) {
   const value = Number(bytes || 0);
-  if (value < 1024) return `${value} B`;
-  if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
-  if (value < 1024 * 1024 * 1024) return `${(value / 1024 / 1024).toFixed(1)} MB`;
-  return `${(value / 1024 / 1024 / 1024).toFixed(1)} GB`;
+  if (!value) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const index = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1);
+  return `${new Intl.NumberFormat('de-DE', { maximumFractionDigits: index ? 1 : 0 }).format(value / (1024 ** index))} ${units[index]}`;
 }
 
-function directorySizeLabel(entry) {
-  const result = state.sizeResults.get(entry.path);
-  if (!result) {
-    return state.sizeJobs.has(entry.path) ? 'Berechne...' : 'Noch nicht berechnet';
-  }
-  const files = Number(result.files || 0);
-  const directories = Math.max(0, Number(result.directories || 0) - 1);
-  return `${formatBytes(result.size)} · ${files} Dateien · ${directories} Ordner`;
+function formatDate(value, full = false) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '—';
+  return new Intl.DateTimeFormat('de-DE', full ? { dateStyle: 'medium', timeStyle: 'short' } : { day: '2-digit', month: 'short', year: date.getFullYear() !== new Date().getFullYear() ? 'numeric' : undefined, hour: '2-digit', minute: '2-digit' }).format(date);
 }
 
-function formatPrincipal(name, id) {
-  if (name == null && id == null) return '-';
-  if (name == null || String(name) === String(id)) return String(id);
-  if (id == null) return String(name);
-  return `${name} (${id})`;
+function icon(name) { return `<svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">${iconPaths[name] || iconPaths.file}</svg>`; }
+function iconButton(name, label, action, extra = '') { return `<button type="button" class="icon-button" title="${escapeAttr(label)}" aria-label="${escapeAttr(label)}" data-action="${escapeAttr(action)}">${icon(name)}${extra}</button>`; }
+function highlight(value, query) { const safe = escapeHtml(value); if (!query.trim()) return safe; const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); return safe.replace(new RegExp(`(${escaped})`, 'ig'), '<mark>$1</mark>'); }
+function escapeHtml(value) { return String(value ?? '').replace(/[&<>"']/g, (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[char]); }
+function escapeAttr(value) { return escapeHtml(value); }
+function isTypingTarget(element) { return ['INPUT', 'TEXTAREA', 'SELECT'].includes(element?.tagName) || element?.isContentEditable; }
+
+function endpoint(name, params = {}) {
+  const query = new URLSearchParams(params).toString();
+  let path;
+  if (PHP_API) path = `${name}.php`;
+  else if (name === 'config') path = 'config';
+  else if (name === 'list') path = 'list';
+  else if (name === 'upload') path = 'upload';
+  else if (name === 'job' && params.action) return `${API_BASE}/jobs/${encodeURIComponent(params.action)}`;
+  else if (name === 'job' && params.id) return `${API_BASE}/jobs/${encodeURIComponent(params.id)}`;
+  else path = name;
+  return `${API_BASE.replace(/\/$/, '')}/${path}${query ? `?${query}` : ''}`;
 }
 
-function iconSvg(name) {
-  const paths = uiIcons[name] || uiIcons.close;
-  return `<svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">${paths}</svg>`;
-}
+function endpointRaw(rawUrl) { return PHP_API ? `${API_BASE.replace(/\/$/, '')}/${String(rawUrl).replace(/^\//, '')}` : rawUrl; }
+function formHeaders() { return { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }; }
+function appendCsrf(body) { const token = getCsrfToken(); if (token) body.append('csrf_token', token); }
+function getCsrfToken() { return window.csrf_token || document.querySelector('input[name="csrf_token"]')?.value || document.querySelector('meta[name="csrf_token"]')?.content || ''; }
 
-function escapeHtml(value) {
-  return String(value ?? '').replace(/[&<>"']/g, (char) => ({
-    '&': '&amp;',
-    '<': '&lt;',
-    '>': '&gt;',
-    '"': '&quot;',
-    "'": '&#39;'
-  })[char]);
-}
-
-function escapeAttr(value) {
-  return escapeHtml(value);
-}
-
-function cssEscape(value) {
-  if (window.CSS?.escape) {
-    return window.CSS.escape(String(value));
-  }
-  return String(value).replace(/["\\]/g, '\\$&');
-}
-
-function clamp(value, min, max) {
-  return Math.max(min, Math.min(max, value));
-}
-
-function apiUrl(path) {
-  return `${API_BASE.replace(/\/$/, '')}/${path.replace(/^\//, '')}`;
-}
-
-function appendCsrf(body) {
-  const token = getCsrfToken();
-  if (!token) {
-    recordDebug('csrf.missing', {});
-    return;
-  }
-  body.append('csrf_token', token);
-  recordDebug('csrf.attached', { length: token.length });
-}
-
-function getCsrfToken() {
-  return window.csrf_token
-    || document.querySelector('input[name="csrf_token"]')?.value
-    || document.querySelector('meta[name="csrf_token"]')?.content
-    || document.querySelector('meta[name="csrf-token"]')?.content
-    || '';
-}
-
-function recordDebug(label, data = {}) {
-  if (!state.config?.debug) {
-    return null;
-  }
-  const item = {
-    id: state.nextDebugId++,
-    time: new Date().toLocaleTimeString(),
-    label,
-    data
-  };
-  state.debug.push(item);
-  if (state.debug.length > 80) {
-    state.debug.splice(0, state.debug.length - 80);
-  }
-  updateTransferPanel();
-  return item;
-}
-
-function updateTransferPanel() {
-  renderTransferPanel();
-}
-
-function serializeError(error) {
-  if (!error) return null;
-  if (error instanceof Error || typeof error === 'object') {
-    return {
-      name: error.name,
-      message: error.message || String(error),
-      stack: error.stack
-    };
-  }
-  return { message: String(error) };
+async function api(url, options) {
+  const response = await fetch(url, options);
+  const text = await response.text();
+  let payload;
+  try { payload = JSON.parse(text); } catch { payload = null; }
+  if (!response.ok) throw new Error(payload?.error || text || `${response.status} ${response.statusText}`);
+  if (!payload) throw new Error('Der Server hat keine gültige JSON-Antwort geliefert.');
+  return payload;
 }
diff --git a/server/public/index.html b/server/public/index.html
index 2ee1b18..2dcc990 100644
--- a/server/public/index.html
+++ b/server/public/index.html
@@ -6,21 +6,8 @@
     <title>U-Navigator</title>
     <link rel="stylesheet" href="/styles.css">
   </head>
-  <body>
-    <div class="app-shell">
-      <header class="topbar">
-        <div>
-          <h1>U-Navigator</h1>
-          <p id="statusText">Initialisiere...</p>
-        </div>
-        <nav class="toolbar" aria-label="Workspace actions">
-          <button id="newExplorerButton" title="Explorer öffnen">Explorer</button>
-          <button id="newPropertiesButton" title="Eigenschaften öffnen">Eigenschaften</button>
-          <button id="newQueueButton" title="Transfer-Queue öffnen">Transfers</button>
-        </nav>
-      </header>
-      <main id="workspace" class="workspace" aria-label="U-Navigator Workspace"></main>
-    </div>
+  <body style="margin:0">
+    <div class="u-nav app-shell"></div>
     <script src="/app.js" type="module"></script>
   </body>
 </html>
diff --git a/server/public/styles.css b/server/public/styles.css
index fa35f33..948ad27 100644
--- a/server/public/styles.css
+++ b/server/public/styles.css
@@ -1,1110 +1,188 @@
 .u-nav {
-  --bg: #f4f6f8;
+  --accent: #ff8a3d;
+  --accent-deep: #e96820;
+  --accent-soft: #fff1e7;
+  --bg: #eef1f5;
   --surface: #ffffff;
-  --surface-2: #eef2f5;
-  --text: #18222d;
-  --muted: #617182;
-  --line: #cfd8e1;
-  --accent: #e86f2d;
-  --accent-2: #287a65;
-  --shadow: 0 18px 55px rgba(24, 34, 45, 0.22);
+  --surface-raised: #ffffff;
+  --surface-soft: #f6f7f9;
+  --surface-hover: #f0f3f7;
+  --text: #16202b;
+  --text-soft: #425466;
+  --muted: #7b8997;
+  --line: #e2e7ec;
+  --line-strong: #d3dae2;
+  --danger: #db4b4b;
+  --success: #218f68;
+  --shadow-sm: 0 1px 2px rgba(18, 32, 47, .05), 0 2px 8px rgba(18, 32, 47, .04);
+  --shadow-lg: 0 24px 70px rgba(21, 34, 50, .18);
   background: var(--bg);
   color: var(--text);
-  display: grid;
-  font: 12.5px/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  grid-template-rows: auto 1fr;
-  min-height: calc(100vh - 170px);
+  font: 14px/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  min-height: calc(100vh - 150px);
   overflow: hidden;
   position: relative;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
 }
 
 @media (prefers-color-scheme: dark) {
   .u-nav {
-    --bg: #101418;
-    --surface: #1b2229;
-    --surface-2: #242e37;
-    --text: #eef3f7;
-    --muted: #a3b0bd;
-    --line: #36434f;
-    --shadow: 0 18px 55px rgba(0, 0, 0, 0.44);
+    --accent-soft: #38271d;
+    --bg: #0f1419;
+    --surface: #171d23;
+    --surface-raised: #1c232b;
+    --surface-soft: #202830;
+    --surface-hover: #252f39;
+    --text: #f2f5f7;
+    --text-soft: #c2ccd5;
+    --muted: #8795a3;
+    --line: #2a343e;
+    --line-strong: #394552;
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .22);
+    --shadow-lg: 0 24px 70px rgba(0, 0, 0, .5);
   }
 }
 
-.u-nav *,
-.u-nav *::before,
-.u-nav *::after {
-  box-sizing: border-box;
-}
-
-.u-nav button {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  color: var(--text);
-  cursor: pointer;
-  font: inherit;
-  min-height: 28px;
-  padding: 0 8px;
-}
-
-.u-nav button:hover {
-  border-color: var(--accent);
-}
-
-.u-nav button.primary {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: #ffffff;
-}
-
-.u-nav button.danger {
-  color: #c4382d;
-}
-
-.u-nav button.danger:hover {
-  border-color: #c4382d;
-}
-
-.u-nav button.icon {
-  align-items: center;
-  display: inline-flex;
-  flex: 0 0 26px;
-  height: 26px;
-  justify-content: center;
-  line-height: 1;
-  max-width: 26px;
-  min-height: 26px;
-  min-width: 26px;
-  padding: 0;
-  width: 26px;
-}
-
-.u-nav button.icon::before,
-.u-nav button.icon::after {
-  content: none !important;
-}
-
-.u-nav .ui-icon {
-  display: block;
-  fill: none;
-  height: 16px;
-  pointer-events: none;
-  stroke: currentColor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 2.1;
-  width: 16px;
-}
-
-.u-nav .topbar {
-  align-items: center;
-  background: var(--surface);
-  border-bottom: 1px solid var(--line);
-  display: flex;
-  gap: 12px;
-  justify-content: space-between;
-  padding: 9px 12px;
-}
-
-.u-nav .topbar h1 {
-  color: var(--text);
-  font-size: 16px;
-  line-height: 1;
-  margin: 0 0 4px;
-}
-
-.u-nav .topbar p,
-.u-nav .muted {
-  color: var(--muted);
-  margin: 0;
-}
-
-.u-nav .toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.u-nav .toolbar button.active {
-  background: var(--surface-2);
-  border-color: var(--accent);
-}
-
-.u-nav .workspace {
-  min-height: 0;
-  overflow: hidden;
-  position: relative;
-}
-
-.u-nav .window {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  box-shadow: var(--shadow);
-  display: grid;
-  grid-template-rows: auto 1fr;
-  min-height: 240px;
-  min-width: 280px;
-  overflow: hidden;
-  position: absolute;
-}
-
-.u-nav .window.focused {
-  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
-}
-
-.u-nav .window.maximized {
-  border-radius: 0;
-}
-
-.u-nav .titlebar {
-  align-items: center;
-  background: var(--surface-2);
-  border-bottom: 1px solid var(--line);
-  cursor: move;
-  display: grid;
-  gap: 6px;
-  grid-template-columns: 1fr auto;
-  min-height: 34px;
-  padding: 4px 6px 4px 10px;
-  user-select: none;
-}
-
-.u-nav .titlebar strong {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.u-nav .window-actions {
-  display: flex;
-  gap: 5px;
-}
-
-.u-nav .window-body {
-  min-height: 0;
-  overflow: auto;
-  padding: 8px;
-}
-
-.u-nav .resize-handle {
-  bottom: 0;
-  cursor: nwse-resize;
-  height: 18px;
-  position: absolute;
-  right: 0;
-  width: 18px;
-}
-
-.u-nav .resize-handle::after {
-  border-bottom: 2px solid var(--muted);
-  border-right: 2px solid var(--muted);
-  bottom: 5px;
-  content: "";
-  height: 8px;
-  position: absolute;
-  right: 5px;
-  width: 8px;
-}
-
-.u-nav .pathbar {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-bottom: 8px;
-}
-
-.u-nav .pathbar input:not(.upload-input) {
-  background: var(--surface-2);
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  color: var(--text);
-  font: inherit;
-  min-height: 28px;
-  min-width: 180px;
-  padding: 0 8px;
-  flex: 1 1 220px;
-}
-
-.u-nav .pathbar .up-button {
-  flex: 0 0 24px;
-  font-size: 15px;
-  line-height: 1;
-}
-
-.u-nav .pathbar > button.icon,
-.u-nav .pathbar .view-toggle {
-  flex: 0 0 auto;
-}
-
-.u-nav .pathbar > button.icon {
-  max-width: 32px;
-  min-width: 32px;
-  width: 32px;
-}
-
-.u-nav .upload-input {
-  display: none;
-}
-
-.u-nav .drop-zone {
-  border: 1px dashed transparent;
-  border-radius: 8px;
-  min-height: 150px;
-}
-
-.u-nav .drop-zone.drag-over {
-  background: color-mix(in srgb, var(--accent) 18%, transparent);
-  border-color: var(--accent);
-  border-style: solid;
-  box-shadow: inset 0 0 0 2px var(--accent);
-}
-
-.u-nav .view-toggle {
-  display: inline-flex;
-  gap: 0;
-  white-space: nowrap;
-}
-
-.u-nav .view-toggle button {
-  border-radius: 0;
-  flex: 0 0 auto;
-  min-width: 24px;
-  overflow: visible;
-}
-
-.u-nav .view-toggle button:first-child {
-  border-radius: 6px 0 0 6px;
-}
-
-.u-nav .view-toggle button:last-child {
-  border-radius: 0 6px 6px 0;
-  margin-left: -1px;
-}
-
-.u-nav .view-toggle button.active {
-  background: var(--surface-2);
-  border-color: var(--accent);
-  position: relative;
-  z-index: 1;
-}
-
-.u-nav .file-table {
-  border-collapse: collapse;
-  background: var(--surface);
-  color: var(--text);
-  width: 100%;
-}
-
-.u-nav .file-table th,
-.u-nav .file-table td {
-  background: var(--surface) !important;
-  border-bottom: 1px solid var(--line);
-  color: var(--text) !important;
-  padding: 6px 6px;
-  text-align: left;
-  vertical-align: middle;
-}
-
-.u-nav .file-table th {
-  background: var(--surface-2) !important;
-  color: var(--muted);
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.u-nav .file-row {
-  background: var(--surface);
-  color: var(--text);
-  cursor: default;
-  -webkit-user-drag: none;
-}
-
-.u-nav .file-row:hover,
-.u-nav .file-row.selected,
-.u-nav .file-row.dragging,
-.u-nav .file-row.drop-candidate,
-.u-nav .file-row.drop-target {
-  background: var(--surface-2);
-}
-
-.u-nav .file-row:hover td,
-.u-nav .file-row.selected td,
-.u-nav .file-row.dragging td,
-.u-nav .file-row.drop-candidate td,
-.u-nav .file-row.drop-target td {
-  background: var(--surface-2) !important;
-}
-
-.u-nav .file-row.drop-candidate td:first-child {
-  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 72%, transparent);
-}
-
-.u-nav .file-row {
-  -webkit-user-drag: none;
-  user-select: none;
-}
-
-.u-nav .file-row.dragging {
-  opacity: 0.55;
-}
-
-.u-nav-dragging {
-  cursor: grabbing;
-}
-
-.u-nav .name-cell {
-  align-items: center;
-  display: flex;
-  gap: 6px;
-  -webkit-user-drag: none;
-  min-width: 130px;
-  user-select: none;
-}
-
-.u-nav .badge {
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  color: var(--muted);
-  display: inline-flex;
-  font-size: 11px;
-  justify-content: center;
-  min-width: 50px;
-  padding: 1px 7px;
-  -webkit-user-drag: none;
-  user-select: none;
-}
-
-.u-nav .icon-grid {
-  display: grid;
-  gap: 8px;
-  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
-  padding: 2px;
-}
-
-.u-nav .icon-item {
-  align-items: center;
-  background: var(--surface);
-  border: 1px solid transparent;
-  border-radius: 8px;
-  color: var(--text);
-  display: grid;
-  gap: 5px;
-  grid-template-rows: auto minmax(28px, auto) auto;
-  justify-items: center;
-  min-height: 108px;
-  padding: 8px 6px;
-  text-align: center;
-  width: 100%;
-}
-
-.u-nav .icon-item:hover,
-.u-nav .icon-item.selected,
-.u-nav .icon-item.dragging,
-.u-nav .icon-item.drop-candidate,
-.u-nav .icon-item.drop-target {
-  background: var(--surface-2);
-  border-color: var(--line);
-}
-
-.u-nav .icon-item.selected,
-.u-nav .icon-item.drop-candidate,
-.u-nav .icon-item.drop-target {
-  border-color: var(--accent);
-}
-
-.u-nav .icon-item.drop-candidate {
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
-}
-
-.u-nav .file-icon {
-  display: block;
-  height: 46px;
-  position: relative;
-  width: 56px;
-}
-
-.u-nav .file-icon.directory {
-  background: linear-gradient(180deg, #ff9b4f 0%, var(--accent) 100%);
-  border: 1px solid color-mix(in srgb, var(--accent) 78%, #5b2b12);
-  border-radius: 7px 7px 6px 6px;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 5px 12px rgba(24, 34, 45, 0.14);
-  height: 34px;
-  margin-top: 8px;
-}
-
-.u-nav .file-icon.directory::before {
-  background: linear-gradient(180deg, #ffb16e 0%, #f58a3a 100%);
-  border: 1px solid color-mix(in srgb, var(--accent) 72%, #5b2b12);
-  border-bottom: 0;
-  border-radius: 6px 6px 0 0;
-  content: "";
-  height: 10px;
-  left: 5px;
-  position: absolute;
-  top: -8px;
-  width: 24px;
-}
-
-.u-nav .file-icon.directory::after {
-  background: rgba(255, 255, 255, 0.18);
-  border-radius: 999px;
-  content: "";
-  height: 3px;
-  left: 8px;
-  position: absolute;
-  right: 8px;
-  top: 8px;
-}
-
-.u-nav .file-icon.file,
-.u-nav .file-icon.symlink,
-.u-nav .file-icon.other {
-  background: linear-gradient(180deg, #ffffff 0%, #eef3f7 100%);
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  box-shadow: 0 5px 12px rgba(24, 34, 45, 0.12);
-  height: 44px;
-  width: 36px;
-}
-
-.u-nav .file-icon.file::before,
-.u-nav .file-icon.symlink::before,
-.u-nav .file-icon.other::before {
-  background: linear-gradient(135deg, #dce5ee 0%, #ffffff 48%, #cfd8e1 49%, #cfd8e1 100%);
-  border-left: 1px solid var(--line);
-  border-bottom: 1px solid var(--line);
-  border-radius: 0 5px 0 4px;
-  content: "";
-  height: 11px;
-  position: absolute;
-  right: -1px;
-  top: -1px;
-  width: 11px;
-}
-
-.u-nav .file-icon.file::after,
-.u-nav .file-icon.symlink::after,
-.u-nav .file-icon.other::after {
-  background:
-    linear-gradient(var(--muted), var(--muted)) 0 0 / 18px 2px no-repeat,
-    linear-gradient(var(--muted), var(--muted)) 0 8px / 22px 2px no-repeat,
-    linear-gradient(var(--muted), var(--muted)) 0 16px / 15px 2px no-repeat;
-  content: "";
-  height: 20px;
-  left: 7px;
-  opacity: 0.58;
-  position: absolute;
-  top: 16px;
-  width: 22px;
-}
-
-.u-nav .icon-name {
-  color: var(--text);
-  display: -webkit-box;
-  font-size: 12px;
-  line-height: 1.25;
-  max-width: 100%;
-  overflow: hidden;
-  overflow-wrap: anywhere;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-.u-nav .icon-meta {
-  color: var(--muted);
-  font-size: 11px;
-}
-
-.u-nav .context-menu {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  box-shadow: var(--shadow);
-  display: grid;
-  min-width: 170px;
-  padding: 5px;
-  position: absolute;
-  z-index: 100000;
-}
-
-.u-nav .context-menu button {
-  border-color: transparent;
-  justify-content: flex-start;
-  text-align: left;
-  width: 100%;
-}
-
-.u-nav .context-menu button:hover {
-  background: var(--surface-2);
-  border-color: var(--line);
-}
-
-.u-nav .modal-overlay {
-  align-items: center;
-  background: rgba(10, 14, 18, 0.42);
-  display: flex;
-  inset: 0;
-  justify-content: center;
-  padding: 14px;
-  position: absolute;
-  z-index: 100020;
-}
-
-.u-nav .permissions-modal {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  box-shadow: var(--shadow);
-  color: var(--text);
-  display: grid;
-  max-height: min(580px, 100%);
-  max-width: 100%;
-  min-width: min(380px, 100%);
-  overflow: hidden;
-  width: 420px;
-}
-
-.u-nav .permissions-modal header,
-.u-nav .permissions-modal footer {
-  align-items: center;
-  background: var(--surface-2);
-  display: flex;
-  gap: 6px;
-  justify-content: space-between;
-  padding: 6px 8px 6px 10px;
-}
-
-.u-nav .permissions-modal header {
-  border-bottom: 1px solid var(--line);
-}
-
-.u-nav .permissions-modal footer {
-  border-top: 1px solid var(--line);
-  justify-content: flex-end;
-}
-
-.u-nav .permissions-modal header .icon {
-  flex: 0 0 26px;
-  min-width: 26px;
-  width: 26px;
-}
-
-.u-nav .modal-body {
-  display: grid;
-  gap: 7px;
-  overflow: auto;
-  padding: 10px;
-}
-
-.u-nav .permissions-modal input[type="text"],
-.u-nav .permissions-modal input:not([type]) {
-  background: var(--surface-2);
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  color: var(--text);
-  font: inherit;
-  min-height: 28px;
-  padding: 0 8px;
-  width: 100%;
-}
-
-.u-nav .permissions-modal input:disabled {
-  opacity: 0.48;
-}
-
-.u-nav .conflict-modal {
-  width: min(560px, calc(100vw - 28px));
-}
-
-.u-nav .conflict-modal footer {
-  display: grid;
-  gap: 8px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  justify-content: stretch;
-}
-
-.u-nav .conflict-modal footer button {
-  line-height: 1.15;
-  min-width: 0;
-  overflow-wrap: anywhere;
-  padding: 0 7px;
-  white-space: normal;
-  width: 100%;
-}
-
-.u-nav .ui-modal {
-  width: min(460px, calc(100vw - 28px));
-}
-
-.u-nav .ui-modal .modal-body p {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-.u-nav .ui-modal footer {
-  gap: 8px;
-}
-
-.u-nav .ui-modal .danger-action {
-  background: #c4382d;
-  border-color: #c4382d;
-}
-
-.u-nav .conflict-details {
-  background: var(--surface-2);
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  display: grid;
-  gap: 6px 10px;
-  grid-template-columns: auto minmax(0, 1fr);
-  margin: 0;
-  padding: 8px;
-}
-
-.u-nav .conflict-details dt {
-  color: var(--muted);
-  font-weight: 700;
-}
-
-.u-nav .conflict-details dd {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-.u-nav .check-row {
-  align-items: center;
-  display: flex;
-  gap: 7px;
-}
-
-.u-nav .check-row input {
-  accent-color: var(--accent);
-  height: 16px;
-  margin: 0;
-  width: 16px;
-}
-
-.u-nav .check-row.disabled {
-  opacity: 0.5;
-}
-
-.u-nav .permission-scope {
-  background: var(--surface-2);
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  display: grid;
-  gap: 6px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  margin: 0;
-  padding: 8px;
-}
-
-.u-nav .permission-scope legend {
-  color: var(--text);
-  font-size: 12px;
-  font-weight: 600;
-  padding: 0 4px;
-}
-
-.u-nav .permission-scope label {
-  align-items: center;
-  display: flex;
-  gap: 5px;
-  white-space: nowrap;
-}
-
-.u-nav .permission-scope input {
-  accent-color: var(--accent);
-  height: 15px;
-  margin: 0;
-  width: 15px;
-}
-
-.u-nav .field-row {
-  align-items: center;
-  display: grid;
-  gap: 6px;
-  grid-template-columns: max-content minmax(0, 1fr);
-}
-
-.u-nav .mode-input {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
-}
-
-.u-nav .transfer-panel {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  box-shadow: var(--shadow);
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-  max-height: min(480px, calc(100% - 68px));
-  min-height: 190px;
-  min-width: 280px;
-  overflow: hidden;
-  position: absolute;
-  transform-origin: top right;
-  z-index: 10000;
-}
-
-.u-nav .transfer-panel.open {
-  animation: transfer-slide-down 180ms ease-out both;
-}
-
-.u-nav .transfer-panel.closing {
-  animation: transfer-slide-up 180ms ease-in both;
-  pointer-events: none;
-}
-
-.u-nav .transfer-panel-header {
-  align-items: center;
-  background: var(--surface-2);
-  border-bottom: 1px solid var(--line);
-  display: flex;
-  justify-content: space-between;
-  min-height: 34px;
-  padding: 4px 6px 4px 10px;
-}
-
-.u-nav .transfer-panel-body {
-  min-height: 0;
-  overflow: auto;
-  padding: 8px;
-}
-
-.u-nav .settings-panel {
-  animation: transfer-slide-down 160ms ease-out both;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  box-shadow: var(--shadow);
-  min-width: 280px;
-  overflow: hidden;
-  position: absolute;
-  transform-origin: top right;
-  width: min(340px, calc(100% - 32px));
-  z-index: 10010;
-}
-
-.u-nav .settings-panel-header {
-  align-items: center;
-  background: var(--surface-2);
-  border-bottom: 1px solid var(--line);
-  display: flex;
-  justify-content: space-between;
-  min-height: 34px;
-  padding: 4px 6px 4px 10px;
-}
-
-.u-nav .settings-panel-body {
-  display: grid;
-  gap: 2px;
-  padding: 6px;
-}
-
-.u-nav .setting-row {
-  align-items: center;
-  border-radius: 6px;
-  display: grid;
-  gap: 8px;
-  grid-template-columns: 1fr auto;
-  padding: 8px;
-}
-
-.u-nav .setting-row:hover {
-  background: var(--surface-2);
-}
-
-.u-nav .setting-row small {
-  color: var(--muted);
-  display: block;
-  margin-top: 2px;
-}
-
-.u-nav .setting-row input {
-  accent-color: var(--accent);
-  height: 16px;
-  width: 16px;
-}
-
-@keyframes transfer-slide-down {
-  from {
-    opacity: 0;
-    transform: translateY(-18px) scaleY(0.96);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0) scaleY(1);
-  }
-}
-
-@keyframes transfer-slide-up {
-  from {
-    opacity: 1;
-    transform: translateY(0) scaleY(1);
-  }
-
-  to {
-    opacity: 0;
-    transform: translateY(-18px) scaleY(0.96);
-  }
-}
-
-.u-nav .queue-list {
-  display: grid;
-  gap: 10px;
-}
-
-.u-nav .debug-log {
-  border-top: 1px solid var(--line);
-  display: grid;
-  gap: 6px;
-  margin-top: 10px;
-  padding-top: 10px;
-}
-
-.u-nav .debug-log header {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-}
-
-.u-nav .debug-entry {
-  background: var(--surface-2);
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  padding: 7px;
-}
-
-.u-nav .debug-entry time {
-  color: var(--muted);
-  display: block;
-  font-size: 11px;
-}
-
-.u-nav .debug-entry pre {
-  color: var(--text);
-  font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  margin: 5px 0 0;
-  max-height: 120px;
-  overflow: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.u-nav .job {
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 8px;
-}
-
-.u-nav .job .muted {
-  overflow-wrap: anywhere;
-}
-
-.u-nav .upload-job {
-  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line));
-}
-
-.u-nav .progress {
-  background: var(--surface-2);
-  border-radius: 999px;
-  height: 6px;
-  margin-top: 6px;
-  overflow: hidden;
-}
-
-.u-nav .progress div {
-  background: var(--accent-2);
-  height: 100%;
-  width: 0;
-}
-
-.u-nav .properties dl {
-  display: grid;
-  gap: 6px 12px;
-  grid-template-columns: max-content 1fr;
-  margin: 0;
-}
-
-.u-nav .properties dt {
-  color: var(--muted);
-}
-
-.u-nav .properties dd {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-.u-nav .preview-body {
-  display: grid;
-  gap: 8px;
-  grid-template-rows: auto minmax(0, 1fr);
-}
-
-.u-nav .preview-meta {
-  align-items: center;
-  border-bottom: 1px solid var(--line);
-  color: var(--muted);
-  display: grid;
-  gap: 8px;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  padding-bottom: 6px;
-}
-
-.u-nav .preview-nav {
-  display: inline-flex;
-  gap: 4px;
-}
-
-.u-nav .preview-nav button:disabled {
-  cursor: default;
-  opacity: 0.42;
-}
-
-.u-nav .preview-meta strong {
-  color: var(--text);
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.u-nav .preview-text {
-  background: var(--surface-2);
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  color: var(--text);
-  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  margin: 0;
-  min-height: 0;
-  overflow: auto;
-  padding: 8px;
-  white-space: pre;
-}
-
-.u-nav .preview-rendered,
-.u-nav .preview-table-wrap,
-.u-nav .preview-media,
-.u-nav .preview-frame {
-  min-height: 0;
-}
-
-.u-nav .preview-rendered {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  overflow: auto;
-  padding: 10px;
-}
-
-.u-nav .preview-rendered h1,
-.u-nav .preview-rendered h2,
-.u-nav .preview-rendered h3,
-.u-nav .preview-rendered p,
-.u-nav .preview-rendered ul {
-  margin-top: 0;
-}
-
-.u-nav .preview-rendered code {
-  background: var(--surface-2);
-  border-radius: 4px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  padding: 1px 3px;
-}
-
-.u-nav .preview-table-wrap {
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  overflow: auto;
-}
-
-.u-nav .preview-table {
-  border-collapse: collapse;
-  min-width: 100%;
-}
-
-.u-nav .preview-table td {
-  border-bottom: 1px solid var(--line);
-  border-right: 1px solid var(--line);
-  padding: 5px 7px;
-  white-space: nowrap;
-}
-
-.u-nav .preview-media {
-  align-items: center;
-  background: var(--surface-2);
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  display: flex;
-  justify-content: center;
-  overflow: auto;
-  padding: 8px;
-}
-
-.u-nav .preview-media img,
-.u-nav .preview-media video {
-  max-height: 100%;
-  max-width: 100%;
-}
-
-.u-nav .preview-media audio {
-  width: min(100%, 560px);
-}
-
-.u-nav .preview-frame {
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  height: 100%;
-  width: 100%;
-}
-
-@media (max-width: 720px) {
-  .u-nav .topbar {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .u-nav .workspace {
-    overflow: auto;
-  }
-
-  .u-nav .window,
-  .u-nav .window.maximized {
-    border-left: 0;
-    border-radius: 0;
-    border-right: 0;
-    height: calc(100vh - 120px) !important;
-    left: 0 !important;
-    min-width: 0;
-    position: relative;
-    top: 0 !important;
-    width: 100% !important;
-  }
-
-  .u-nav .window:not(.focused) {
-    display: none;
-  }
-
-  .u-nav .resize-handle {
-    display: none;
-  }
-
-  .u-nav .transfer-panel {
-    left: 10px !important;
-    max-height: min(70vh, 520px);
-    min-width: 0;
-    right: 10px !important;
-    width: auto !important;
-  }
-
-  .u-nav .settings-panel {
-    left: 10px !important;
-    min-width: 0;
-    right: 10px !important;
-    width: auto !important;
-  }
+.u-nav *, .u-nav *::before, .u-nav *::after { box-sizing: border-box; }
+.u-nav button, .u-nav input { font: inherit; }
+.u-nav button { color: inherit; }
+.u-nav button:focus-visible, .u-nav input:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }
+.u-nav .ui-icon { display: block; fill: none; height: 20px; pointer-events: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 20px; }
+
+.unav-frame { background: var(--surface); display: grid; grid-template-rows: 66px minmax(0, 1fr); height: calc(100vh - 150px); min-height: 660px; overflow: hidden; }
+.app-header { align-items: center; background: var(--surface); border-bottom: 1px solid var(--line); display: grid; gap: 28px; grid-template-columns: 230px minmax(260px, 620px) 1fr; padding: 0 20px; position: relative; z-index: 20; }
+.brand { align-items: center; background: none; border: 0; cursor: pointer; display: flex; gap: 11px; padding: 0; text-align: left; }
+.brand-mark { align-items: center; background: linear-gradient(145deg, #ff9c58, #ee6f26); border-radius: 12px; box-shadow: 0 6px 16px rgba(232, 105, 32, .25); color: #fff; display: flex; height: 38px; justify-content: center; width: 38px; }
+.brand-mark .ui-icon { height: 22px; stroke-width: 2; width: 22px; }
+.brand strong, .brand small { display: block; }
+.brand strong { font-size: 16px; letter-spacing: -.02em; }
+.brand small { color: var(--muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
+.header-search { align-items: center; background: var(--surface-soft); border: 1px solid transparent; border-radius: 12px; color: var(--muted); display: grid; gap: 10px; grid-template-columns: auto 1fr auto; height: 40px; padding: 0 12px; transition: .18s ease; }
+.header-search:focus-within { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); }
+.header-search .ui-icon { height: 18px; width: 18px; }
+.header-search input { background: transparent; border: 0; color: var(--text); min-width: 0; outline: 0; }
+.header-search input::placeholder { color: var(--muted); }
+.header-search kbd { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 1px 0 var(--line-strong); color: var(--muted); font: 11px/1 system-ui; padding: 4px 6px; }
+.header-actions { display: flex; gap: 7px; justify-content: flex-end; }
+
+.icon-button { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 9px; cursor: pointer; display: inline-flex; height: 36px; justify-content: center; padding: 0; position: relative; transition: .15s ease; width: 36px; }
+.icon-button:hover, .icon-button.active { background: var(--surface-hover); border-color: var(--line); }
+.icon-button:disabled { cursor: default; opacity: .3; }
+.action-badge { align-items: center; background: var(--accent); border: 2px solid var(--surface); border-radius: 10px; color: #fff; display: flex; font-size: 9px; height: 17px; justify-content: center; min-width: 17px; padding: 0 3px; position: absolute; right: -3px; top: -3px; }
+
+.browser-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 0; }
+.sidebar { background: var(--surface-soft); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 22px 13px 14px; }
+.sidebar-section + .sidebar-section { margin-top: 28px; }
+.sidebar-label { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .1em; margin: 0 10px 8px; text-transform: uppercase; }
+.place { align-items: center; background: transparent; border: 0; border-radius: 10px; cursor: pointer; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 8px 9px; text-align: left; transition: .15s ease; width: 100%; }
+.place:hover { background: var(--surface-hover); }
+.place.active { background: var(--surface); box-shadow: var(--shadow-sm); }
+.place > span:nth-child(2) { min-width: 0; }
+.place strong, .place small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.place strong { font-size: 13px; }
+.place small { color: var(--muted); font-size: 10px; margin-top: 2px; }
+.place > .ui-icon { color: var(--muted); height: 15px; width: 15px; }
+.place-icon { align-items: center; border-radius: 9px; display: flex; height: 34px; justify-content: center; width: 34px; }
+.place-icon .ui-icon { height: 18px; width: 18px; }
+.tone-1 { background: #fff0e7; color: #ee762d; }.tone-2 { background: #e8f4ff; color: #3486cc; }.tone-3 { background: #e9f7f1; color: #248961; }.tone-4 { background: #f3ebff; color: #8453c8; }
+.place.compact { grid-template-columns: auto minmax(0, 1fr); padding: 7px 11px; }
+.place.compact > .ui-icon { height: 17px; width: 17px; }
+.sidebar-empty { color: var(--muted); font-size: 11px; margin: 8px 11px; }
+.sidebar-foot { align-items: center; border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: 11px; gap: 8px; margin-top: auto; padding: 16px 10px 2px; }
+.mode-dot { background: var(--muted); border-radius: 50%; height: 7px; width: 7px; }.mode-dot.writable { background: var(--success); }.mode-dot.readonly { background: #e3a232; }
+
+.content-shell { display: grid; grid-template-rows: 52px 52px minmax(0, 1fr) 30px; min-width: 0; min-height: 0; }
+.nav-bar { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 16px; }
+.history-actions { display: flex; gap: 2px; }
+.breadcrumbs { align-items: center; display: flex; min-width: 0; overflow: hidden; padding-left: 4px; }
+.breadcrumbs button { background: none; border: 0; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 550; max-width: 180px; overflow: hidden; padding: 6px 8px; text-overflow: ellipsis; white-space: nowrap; }
+.breadcrumbs button:hover { background: var(--surface-hover); }
+.breadcrumbs button[aria-current="page"] { color: var(--text); font-weight: 700; }
+.crumb-separator { color: var(--muted); font-size: 18px; }
+.command-bar { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 12px; justify-content: space-between; padding: 0 16px; }
+.primary-actions, .view-actions { align-items: center; display: flex; gap: 4px; }
+.action { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 7px; height: 34px; justify-content: center; padding: 0 10px; transition: .15s ease; }
+.action:hover { background: var(--surface-hover); border-color: var(--line); }
+.action:disabled { cursor: default; opacity: .32; }
+.action .ui-icon { height: 17px; width: 17px; }
+.action.primary { background: var(--accent); border-color: var(--accent); box-shadow: 0 5px 14px rgba(232, 105, 32, .18); color: #fff; }
+.action.primary:hover { background: var(--accent-deep); }
+.action.danger { color: var(--danger); }
+.action.full { width: 100%; }
+.command-separator { background: var(--line); height: 22px; margin: 0 4px; width: 1px; }
+.view-actions .icon-button { height: 32px; width: 32px; }
+.item-count { color: var(--muted); font-size: 11px; margin-right: 8px; }
+
+.explorer-stage { display: grid; grid-template-columns: minmax(0, 1fr) 310px; min-height: 0; }
+.file-pane { min-width: 0; overflow: auto; position: relative; }
+.file-pane.drag-over::after { align-items: center; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 2px dashed var(--accent); border-radius: 14px; color: var(--accent-deep); content: "Hier ablegen zum Hochladen"; display: flex; font-size: 16px; font-weight: 700; inset: 12px; justify-content: center; pointer-events: none; position: absolute; z-index: 4; }
+.details-pane { background: var(--surface-soft); border-left: 1px solid var(--line); min-width: 0; overflow: auto; padding: 18px; transition: .2s ease; }
+.explorer-stage:has(.details-pane.closed) { grid-template-columns: minmax(0, 1fr) 0; }
+.details-pane.closed { border: 0; padding: 0; }
+.status-bar { align-items: center; background: var(--surface-soft); border-top: 1px solid var(--line); color: var(--muted); display: grid; font-size: 10px; grid-template-columns: 1fr auto auto; gap: 18px; padding: 0 16px; }
+.version { font-variant-numeric: tabular-nums; }
+
+.file-table { min-width: 760px; }
+.file-head, .file-row { align-items: center; display: grid; grid-template-columns: 42px minmax(250px, 1fr) 110px 130px 160px 40px; }
+.file-head { background: color-mix(in srgb, var(--surface) 92%, var(--surface-soft)); border-bottom: 1px solid var(--line); color: var(--muted); height: 38px; position: sticky; top: 0; z-index: 3; }
+.select-all, .row-check { align-items: center; background: transparent; border: 1px solid var(--line-strong); border-radius: 5px; cursor: pointer; display: flex; height: 16px; justify-content: center; margin: auto; padding: 0; width: 16px; }
+.select-all .ui-icon, .row-check .ui-icon { color: #fff; height: 12px; stroke-width: 2.5; width: 12px; }
+.file-row.selected .row-check, .file-head .select-all:not(:empty) { background: var(--accent); border-color: var(--accent); }
+.column-title { align-items: center; align-self: stretch; background: transparent; border: 0; color: inherit; cursor: pointer; display: flex; font-size: 10px; font-weight: 700; gap: 5px; letter-spacing: .04em; padding: 0 9px; text-align: left; text-transform: uppercase; }
+.column-title:hover, .column-title.active { color: var(--text-soft); }
+.file-row { border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); min-height: 56px; padding-right: 6px; transition: background .12s ease; }
+.file-row:hover { background: var(--surface-hover); }
+.file-row.selected { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
+.name-cell { align-items: center; display: flex; gap: 11px; min-width: 0; padding: 7px 9px; }
+.name-cell > span:last-child { min-width: 0; }
+.name-cell strong, .name-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.name-cell strong { font-size: 13px; font-weight: 620; }
+.name-cell small { color: var(--muted); font-size: 10px; margin-top: 2px; }
+.file-type-icon { align-items: center; border-radius: 9px; display: flex; flex: 0 0 34px; height: 34px; justify-content: center; width: 34px; }
+.file-type-icon .ui-icon { height: 19px; width: 19px; }
+.file-folder { background: #fff0e2; color: #ef8b31; }.file-file { background: #edf1f5; color: #6f8193; }.file-image { background: #e8f5ee; color: #278a62; }.file-video { background: #f1eafd; color: #8052bc; }.file-music { background: #e8f2ff; color: #3c80c4; }.file-archive { background: #fff5d9; color: #a87918; }.file-code { background: #e8f5f6; color: #287f87; }.file-link { background: #edf0ff; color: #5d70ca; }
+.meta-cell { color: var(--text-soft); font-size: 12px; padding: 0 9px; }
+.row-more { align-items: center; background: transparent; border: 0; border-radius: 7px; cursor: pointer; display: flex; height: 30px; justify-content: center; opacity: 0; padding: 0; width: 30px; }
+.file-row:hover .row-more, .row-more:focus { opacity: 1; }.row-more:hover { background: var(--surface); }.row-more .ui-icon { height: 17px; width: 17px; }
+mark { background: color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 2px; color: inherit; }
+
+.file-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding: 18px; }
+.file-card { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; cursor: pointer; display: flex; flex-direction: column; height: 154px; justify-content: center; min-width: 0; padding: 16px 10px 12px; position: relative; transition: .16s ease; }
+.file-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
+.file-card.selected { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
+.card-icon { align-items: center; background: transparent; display: flex; height: 62px; justify-content: center; margin-bottom: 5px; width: 68px; }
+.card-icon .ui-icon { height: 46px; stroke-width: 1.35; width: 46px; }
+.file-card strong { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.file-card small { color: var(--muted); font-size: 10px; margin-top: 3px; }
+.card-check { align-items: center; background: var(--accent); border-radius: 50%; color: #fff; display: flex; height: 18px; justify-content: center; opacity: 0; position: absolute; right: 9px; top: 9px; width: 18px; }.file-card.selected .card-check { opacity: 1; }.card-check .ui-icon { height: 12px; stroke-width: 2.7; width: 12px; }
+
+.state-view { align-items: center; color: var(--muted); display: flex; flex-direction: column; height: 100%; justify-content: center; min-height: 300px; padding: 30px; text-align: center; }
+.state-view > .ui-icon { color: var(--line-strong); height: 54px; margin-bottom: 15px; stroke-width: 1.2; width: 54px; }.state-view strong { color: var(--text); font-size: 15px; margin-bottom: 4px; }.state-view span { font-size: 12px; }.state-view .action { margin-top: 16px; }
+.spinner { animation: spin .8s linear infinite; border: 2px solid var(--line); border-radius: 50%; border-top-color: var(--accent); display: block; height: 28px; margin-bottom: 14px; width: 28px; } @keyframes spin { to { transform: rotate(360deg); } }
+
+.details-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 16px; }.details-header > strong { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }.details-header .icon-button { height: 30px; width: 30px; }
+.preview-box { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; display: flex; height: 190px; justify-content: center; margin-bottom: 16px; overflow: hidden; }
+.preview-box img, .preview-box video, .preview-box iframe { border: 0; height: 100%; object-fit: contain; width: 100%; }.preview-box audio { max-width: 90%; }.preview-box pre { font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; height: 100%; margin: 0; overflow: auto; padding: 12px; white-space: pre-wrap; width: 100%; }.preview-placeholder .ui-icon { height: 58px; stroke-width: 1.2; width: 58px; }.preview-error { color: var(--danger); font-size: 11px; padding: 18px; text-align: center; }
+.detail-title { align-items: center; display: flex; gap: 12px; margin-bottom: 20px; min-width: 0; }.file-type-icon.large { flex-basis: 42px; height: 42px; width: 42px; }.detail-title > div { min-width: 0; }.detail-title strong, .detail-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.detail-title strong { font-size: 14px; }.detail-title span { color: var(--muted); font-size: 11px; }
+.detail-list { border-top: 1px solid var(--line); display: grid; font-size: 11px; gap: 12px 8px; grid-template-columns: 74px minmax(0, 1fr); margin: 0 0 18px; padding-top: 16px; }.detail-list dt { color: var(--muted); }.detail-list dd { color: var(--text-soft); margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }.detail-path { overflow-wrap: anywhere !important; white-space: normal; }.detail-list code { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; }
+.details-empty { align-items: center; color: var(--muted); display: flex; flex-direction: column; height: 100%; justify-content: center; padding: 20px; text-align: center; }.details-empty .ui-icon { height: 38px; margin-bottom: 12px; stroke-width: 1.3; width: 38px; }.details-empty strong { color: var(--text); }.details-empty span { font-size: 11px; margin-top: 3px; }.multi-selection-mark { align-items: center; background: var(--accent-soft); border-radius: 16px; color: var(--accent-deep); display: flex; font-size: 32px; font-weight: 750; height: 150px; justify-content: center; margin-bottom: 18px; }
+
+.drawer-scrim, .modal-scrim { background: rgba(20, 29, 39, .25); inset: 0; position: absolute; z-index: 80; }.drawer { animation: drawer-in .2s ease; background: var(--surface-raised); box-shadow: var(--shadow-lg); display: grid; grid-template-rows: 72px minmax(0, 1fr); height: 100%; max-width: calc(100% - 30px); position: absolute; right: 0; top: 0; width: 390px; z-index: 81; } @keyframes drawer-in { from { transform: translateX(30px); opacity: .5; } }
+.drawer header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 0 18px 0 22px; }.drawer header small, .drawer header strong { display: block; }.drawer header small { color: var(--accent); font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }.drawer header strong { font-size: 17px; }.drawer-body { overflow: auto; padding: 18px; }.drawer-empty { color: var(--muted); font-size: 12px; padding: 50px 20px; text-align: center; }
+.transfer-item { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 11px; margin-bottom: 10px; padding: 12px; }.transfer-item > div:first-child { align-items: center; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; }.transfer-icon { align-items: center; background: var(--accent-soft); border-radius: 8px; color: var(--accent-deep); display: flex; height: 34px; justify-content: center; width: 34px; }.transfer-icon .ui-icon { height: 17px; width: 17px; }.transfer-item strong, .transfer-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.transfer-item strong { font-size: 12px; }.transfer-item small { color: var(--muted); font-size: 10px; }.transfer-item b { color: var(--muted); font-size: 10px; }.progress { background: var(--line); border-radius: 4px; height: 4px; margin-top: 10px; overflow: hidden; }.progress span { background: var(--accent); display: block; height: 100%; transition: width .3s ease; }
+.settings-form label { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 15px; justify-content: space-between; padding: 15px 2px; }.settings-form label span { min-width: 0; }.settings-form strong, .settings-form small { display: block; }.settings-form strong { font-size: 13px; }.settings-form small { color: var(--muted); font-size: 10px; margin-top: 2px; }.settings-form input[type="checkbox"] { accent-color: var(--accent); height: 18px; width: 18px; }.settings-form .action { margin-top: 22px; }
+
+.context-menu { animation: menu-in .12s ease; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-lg); padding: 6px; position: fixed; width: 220px; z-index: 100; } @keyframes menu-in { from { opacity: 0; transform: scale(.97); } }
+.context-menu button { align-items: center; background: transparent; border: 0; border-radius: 7px; cursor: pointer; display: flex; gap: 10px; padding: 8px 9px; text-align: left; width: 100%; }.context-menu button:hover { background: var(--surface-hover); }.context-menu button:disabled { opacity: .35; }.context-menu button.danger { color: var(--danger); }.context-menu .ui-icon { height: 17px; width: 17px; }.context-separator { background: var(--line); display: block; height: 1px; margin: 5px; }
+
+.modal-scrim { align-items: center; display: flex; justify-content: center; z-index: 120; }.modal { animation: modal-in .16s ease; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); max-width: calc(100% - 32px); padding: 22px; width: 420px; } @keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
+.modal header { align-items: center; display: flex; gap: 13px; }.modal header > div { min-width: 0; }.modal header strong, .modal header small { display: block; }.modal header strong { font-size: 16px; }.modal header small { color: var(--muted); font-size: 11px; margin-top: 2px; }.modal-icon { align-items: center; background: var(--accent-soft); border-radius: 10px; color: var(--accent-deep); display: flex; flex: 0 0 40px; height: 40px; justify-content: center; }.modal-icon.danger { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); }.modal input { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 9px; color: var(--text); margin-top: 20px; outline: 0; padding: 10px 12px; width: 100%; }.modal input:focus { border-color: var(--accent); }.modal footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; }.danger-button { background: var(--danger) !important; border-color: var(--danger) !important; }
+.toast { align-items: center; background: #1d2b37; border-radius: 10px; bottom: 44px; box-shadow: var(--shadow-lg); color: #fff; display: flex; gap: 9px; left: 50%; max-width: min(460px, calc(100% - 32px)); opacity: 0; padding: 10px 14px; position: absolute; transform: translate(-50%, 8px); transition: .22s ease; z-index: 150; }.toast.visible { opacity: 1; transform: translate(-50%, 0); }.toast.error { background: #9d3535; }.toast .ui-icon { height: 17px; width: 17px; }.toast span { font-size: 12px; }
+.hidden-input { display: none; }
+
+@media (max-width: 1120px) {
+  .app-header { grid-template-columns: 200px minmax(220px, 1fr) auto; }.browser-shell { grid-template-columns: 200px minmax(0, 1fr); }.explorer-stage { grid-template-columns: minmax(0, 1fr) 270px; }.primary-actions .action span { display: none; }.action { padding: 0 8px; }.type-column { display: none; }.file-head, .file-row { grid-template-columns: 42px minmax(230px, 1fr) 100px 0 150px 40px; }
+}
+@media (max-width: 820px) {
+  .unav-frame { min-height: 600px; }.app-header { gap: 10px; grid-template-columns: auto minmax(140px, 1fr) auto; padding: 0 12px; }.brand > span:last-child { display: none; }.header-search kbd { display: none; }.browser-shell { grid-template-columns: 64px minmax(0, 1fr); }.sidebar { padding: 14px 8px; }.sidebar-label, .place > span:nth-child(2), .place > .ui-icon, .sidebar-shortcuts, .sidebar-foot span:last-child { display: none; }.place { display: flex; justify-content: center; padding: 7px; }.explorer-stage { grid-template-columns: minmax(0, 1fr); }.details-pane { bottom: 30px; box-shadow: var(--shadow-lg); max-width: 88%; position: absolute; right: 0; top: 171px; width: 310px; z-index: 10; }.details-pane.closed { display: none; }.command-bar { padding: 0 8px; }.selection-action { display: none; }.item-count { display: none; }.date-column { display: none; }.file-head, .file-row { grid-template-columns: 36px minmax(190px, 1fr) 85px 0 0 36px; }.file-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); padding: 10px; }.breadcrumbs button { max-width: 110px; }.status-bar { grid-template-columns: 1fr auto; }.status-bar .version { display: none; }
 }
diff --git a/u-navigator.plg b/u-navigator.plg
index 29ce5b3..031721d 100644
--- a/u-navigator.plg
+++ b/u-navigator.plg
@@ -1,7 +1,7 @@
 <!DOCTYPE PLUGIN [
 <!ENTITY name "u-navigator">
 <!ENTITY author "Michael Roll">
-<!ENTITY version "2026.07.04.r007">
+<!ENTITY version "2026.07.14.r008">
 <!ENTITY package "&name;-&version;.tgz">
 <!ENTITY pluginURL "https://git.casaderoll.de/michael/Unraid-Navigator/raw/branch/main/u-navigator.plg">
 <!ENTITY support "https://git.casaderoll.de/michael/Unraid-Navigator">
@@ -18,13 +18,14 @@
 &description;
 
 ### &version;
-- Native Dynamix-embedded U-Navigator page.
-- Adds PHP API endpoints for listing, upload, move and copy without a separate web server.
+- Replaces the floating window manager with a modern full-screen file browser.
+- Adds responsive sidebar navigation, breadcrumbs, search, list and grid views, a detail preview and transfer drawer.
+- Keeps native Dynamix integration and the existing PHP file APIs.
 </CHANGES>
 
 <FILE Name="/boot/config/plugins/&name;/&package;">
 <URL>https://git.casaderoll.de/michael/Unraid-Navigator/raw/branch/main/packages/&package;</URL>
-<MD5>6b8acde65433cdcd383f647a85dab3d9</MD5>
+<MD5>568dd0b4ad993c41bd68d663c875805e</MD5>
 </FILE>
 
 <FILE Run="/bin/bash">
diff --git a/u-navigator.plg.in b/u-navigator.plg.in
index 901ca63..9375ed3 100644
--- a/u-navigator.plg.in
+++ b/u-navigator.plg.in
@@ -18,8 +18,9 @@
 &description;
 
 ### &version;
-- Native Dynamix-embedded U-Navigator page.
-- Adds PHP API endpoints for listing, upload, move and copy without a separate web server.
+- Replaces the floating window manager with a modern full-screen file browser.
+- Adds responsive sidebar navigation, breadcrumbs, search, list and grid views, a detail preview and transfer drawer.
+- Keeps native Dynamix integration and the existing PHP file APIs.
 </CHANGES>
 
 <FILE Name="/boot/config/plugins/&name;/&package;">