diff --git a/copy_from.sh b/docker_release.sh
similarity index 100%
rename from copy_from.sh
rename to docker_release.sh
diff --git a/klang/App.jsx b/klang/App.jsx
deleted file mode 100644
index 8c13188..0000000
--- a/klang/App.jsx
+++ /dev/null
@@ -1,3381 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  ArrowRight,
-  ArrowUp,
-  CaretDown,
-  CaretRight,
-  Cube,
-  ContactlessPayment,
-  FileAudio,
-  FloppyDisk,
-  Folder,
-  FolderOpen,
-  GearSix,
-  House,
-  PencilSimple,
-  Plus,
-  Trash,
-  UploadSimple,
-  Wrench,
-} from '@phosphor-icons/react';
-import { Avatar } from 'primereact/avatar';
-import { Badge } from 'primereact/badge';
-import { Button } from 'primereact/button';
-import { Card } from 'primereact/card';
-import { Divider } from 'primereact/divider';
-import { Dropdown } from 'primereact/dropdown';
-import { FileUpload } from 'primereact/fileupload';
-import { InputText } from 'primereact/inputtext';
-import { Message } from 'primereact/message';
-import { MeterGroup } from 'primereact/metergroup';
-import { Messages } from 'primereact/messages';
-import { ProgressBar } from 'primereact/progressbar';
-import { Slider } from 'primereact/slider';
-import { Stepper } from 'primereact/stepper';
-import { StepperPanel } from 'primereact/stepperpanel';
-import { Tag } from 'primereact/tag';
-import { Toast } from 'primereact/toast';
-import {
-  assignTag,
-  claimTag,
-  createMediaFolder,
-  deleteMedia,
-  deleteTag,
-  getBoxes,
-  getBoxLocalTags,
-  getBoxTags,
-  getBoxStorage,
-  getMediaTree,
-  getStatus,
-  getTagBlocks,
-  getTags,
-  markTagWritten,
-  moveMedia,
-  pairBox,
-  pullTagFromBox,
-  renameMedia,
-  sendCommand,
-  setBoxAlias,
-  setTagAlias,
-  setTagBlock,
-  setTagMedia,
-  unassignTag,
-  unpairBox,
-  uploadMedia,
-} from './api.js';
-
-const BOX_POLL_MS = 1500;
-const STATUS_POLL_MS = 1000;
-const STORAGE_POLL_MS = 5000;
-const ONLINE_THRESHOLD_SEC = 60;
-
-const NAV_ITEMS = [
-  { id: 'dashboard', label: 'Dashboard', icon: House },
-  { id: 'boxes', label: 'Boxen', icon: Cube },
-  { id: 'media', label: 'Medien', icon: FolderOpen },
-  { id: 'tags', label: 'Tags', icon: ContactlessPayment },
-  { id: 'settings', label: 'Einstellungen', icon: GearSix },
-];
-
-function formatTime(ts) {
-  if (!ts) return '-';
-  return new Date(ts * 1000).toLocaleString();
-}
-
-function getAvailability(lastSeen) {
-  if (!lastSeen) {
-    return { label: 'Offline', severity: 'danger' };
-  }
-  const nowSec = Date.now() / 1000;
-  const isOnline = nowSec - lastSeen <= ONLINE_THRESHOLD_SEC;
-  return { label: isOnline ? 'Online' : 'Offline', severity: isOnline ? 'success' : 'danger' };
-}
-
-function parseCapabilities(raw) {
-  if (!raw) return '-';
-  try {
-    const data = JSON.parse(raw);
-    return Object.entries(data)
-      .map(([key, value]) => `${key}:${value ? '1' : '0'}`)
-      .join(' ');
-  } catch (error) {
-    return '-';
-  }
-}
-
-function formatSize(bytes) {
-  if (bytes === 0) return '0 B';
-  if (bytes === null || bytes === undefined || Number.isNaN(bytes)) return '-';
-  const units = ['B', 'KB', 'MB', 'GB'];
-  let size = bytes;
-  let idx = 0;
-  while (size >= 1024 && idx < units.length - 1) {
-    size /= 1024;
-    idx += 1;
-  }
-  return `${size.toFixed(idx === 0 ? 0 : 1)} ${units[idx]}`;
-}
-
-function formatDuration(seconds) {
-  if (seconds === null || seconds === undefined || Number.isNaN(seconds)) return '-';
-  const total = Math.max(0, Math.floor(seconds));
-  const mins = Math.floor(total / 60);
-  const secs = total % 60;
-  return `${mins}:${secs.toString().padStart(2, '0')}`;
-}
-
-function formatClock(seconds) {
-  if (seconds === null || seconds === undefined || Number.isNaN(seconds)) return '-';
-  const total = Math.max(0, Math.floor(seconds));
-  const hrs = Math.floor(total / 3600);
-  const mins = Math.floor((total % 3600) / 60);
-  const secs = total % 60;
-  if (hrs > 0) {
-    return `${hrs}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-  }
-  return `${mins}:${secs.toString().padStart(2, '0')}`;
-}
-
-function capacityScale(percent) {
-  const p = Math.max(0, Math.min(100, percent || 0));
-  if (p === 0) return 1;
-  return 100 / p;
-}
-
-function getNfcKey(nfc) {
-  if (!nfc) return '';
-  const at = nfc.at || '';
-  const uid = nfc.uid || '';
-  const hardware = nfc.hardwareUid || nfc.hardware_uid || '';
-  return `${at}:${uid}:${hardware}`;
-}
-
-function generateTagId() {
-  const alphabet = 'abcdefghijklmnopqrstuvwxyz0123456789';
-  let generated = '';
-  for (let i = 0; i < 10; i += 1) {
-    generated += alphabet[Math.floor(Math.random() * alphabet.length)];
-  }
-  return generated;
-}
-
-function generateHardwareUid() {
-  const bytes = [];
-  for (let i = 0; i < 7; i += 1) {
-    bytes.push(Math.floor(Math.random() * 256));
-  }
-  return bytes
-    .map((value) => value.toString(16).padStart(2, '0').toUpperCase())
-    .join(':');
-}
-
-function isValidTagUid(uid) {
-  return /^(?:[a-z0-9]{10}|TAG_[a-z0-9]{8})$/.test(uid);
-}
-
-function SectionHeader({ title, subtitle, actions }) {
-  return (
-    <div className="section-header">
-      <div>
-        <h1>{title}</h1>
-        <p>{subtitle}</p>
-      </div>
-      <div className="section-actions">{actions}</div>
-    </div>
-  );
-}
-
-function StatGrid({ items }) {
-  return (
-    <div className="stat-grid">
-      {items.map((card) => (
-        <Card key={card.label} className="stat-card">
-          <p className="stat-label">{card.label}</p>
-          <div className="stat-value">{card.value}</div>
-          <span className="stat-helper">{card.helper}</span>
-        </Card>
-      ))}
-    </div>
-  );
-}
-
-export default function App() {
-  const [activeSection, setActiveSection] = useState('dashboard');
-  const [searchValue, setSearchValue] = useState('');
-  const [boxes, setBoxes] = useState([]);
-  const [boxStorage, setBoxStorage] = useState({});
-  const [selectedId, setSelectedId] = useState('');
-  const [status, setStatus] = useState(null);
-  const [error, setError] = useState('');
-  const [nfcUid, setNfcUid] = useState('UID_1');
-  const [mediaTree, setMediaTree] = useState(null);
-  const [mediaError, setMediaError] = useState('');
-  const [currentPath, setCurrentPath] = useState('');
-  const [selectedPaths, setSelectedPaths] = useState([]);
-  const [newFolderName, setNewFolderName] = useState('');
-  const [renameName, setRenameName] = useState('');
-  const [moveTarget, setMoveTarget] = useState('');
-  const [activeModal, setActiveModal] = useState('');
-  const [tagDeleteTarget, setTagDeleteTarget] = useState('');
-  const [expandedFolders, setExpandedFolders] = useState(() => new Set(['__root__']));
-  const [sidebarQuery, setSidebarQuery] = useState('');
-  const [uploadAfterCreate, setUploadAfterCreate] = useState(false);
-  const [pendingUploadFiles, setPendingUploadFiles] = useState([]);
-  const [uploadProgress, setUploadProgress] = useState(0);
-  const [uploadInProgress, setUploadInProgress] = useState(false);
-  const [activeUploadLabel, setActiveUploadLabel] = useState('');
-  const [uploadSize, setUploadSize] = useState(0);
-  const [uploadNameError, setUploadNameError] = useState('');
-  const transferTimerRef = useRef(null);
-  const explorerRef = useRef(null);
-  const modalRef = useRef(null);
-  const toastRef = useRef(null);
-  const fileUploadRef = useRef(null);
-  const dragSelectRef = useRef(false);
-  const lastDblClickRef = useRef(0);
-  const lastAnchorRef = useRef('');
-  const explorerInitRef = useRef(false);
-  const expandedInitRef = useRef(false);
-  const volumeRef = useRef(null);
-  const [tags, setTags] = useState([]);
-  const [boxTags, setBoxTags] = useState([]);
-  const [blockedByBox, setBlockedByBox] = useState({});
-  const [dbTagMedia, setDbTagMedia] = useState({});
-  const [localBoxTags, setLocalBoxTags] = useState([]);
-  const [localBoxError, setLocalBoxError] = useState('');
-  const [importTargetFolder, setImportTargetFolder] = useState('');
-  const [importTargetUid, setImportTargetUid] = useState('');
-  const [scanTagUid, setScanTagUid] = useState('');
-  const [tagUidMode, setTagUidMode] = useState('keep');
-  const [tagUidError, setTagUidError] = useState('');
-  const [tagStep, setTagStep] = useState(0);
-  const [tagStepOneDone, setTagStepOneDone] = useState(false);
-  const [tagStepTwoDone, setTagStepTwoDone] = useState(false);
-  const [tagStepMax, setTagStepMax] = useState(0);
-  const tagStepperRef = useRef(null);
-  const tagWizardRestoredRef = useRef('');
-  const tagUidMsgRef = useRef(null);
-  const mediaMsgRef = useRef(null);
-  const autoReplaceMsg = 'Ungueltige ID erkannt – wird automatisch ersetzt.';
-  const [dismissedNfcKey, setDismissedNfcKey] = useState('');
-  const [scanTagLabel, setScanTagLabel] = useState('');
-  const [scanMediaPath, setScanMediaPath] = useState('');
-  const [reuseTagUid, setReuseTagUid] = useState('');
-  const lastNfcKeyRef = useRef('');
-  const [tagAliasDrafts, setTagAliasDrafts] = useState({});
-  const [boxAliasDrafts, setBoxAliasDrafts] = useState({});
-  const [showSessionSheet, setShowSessionSheet] = useState(false);
-  const [drawerTab, setDrawerTab] = useState('boxes');
-  const [boxDeleteTarget, setBoxDeleteTarget] = useState('');
-  const [lastHardwareUid, setLastHardwareUid] = useState({ uid: '', hardwareUid: '' });
-  const [simulatedNfc, setSimulatedNfc] = useState(null);
-  const [showVolume, setShowVolume] = useState(false);
-  const [volumeDraft, setVolumeDraft] = useState(50);
-  const [seekPercent, setSeekPercent] = useState(0);
-  const [isSeeking, setIsSeeking] = useState(false);
-
-  function addToast(type, message) {
-    toastRef.current?.show({
-      severity: type,
-      summary: type === 'error' ? 'Fehler' : 'Info',
-      detail: message,
-      life: 4000,
-    });
-  }
-
-  useEffect(() => {
-    let active = true;
-
-    async function refreshBoxes() {
-      const response = await getBoxes();
-      if (!active) return;
-      if (!response.ok) {
-        setError(response.data.detail || 'Fehler beim Laden der Boxen.');
-        return;
-      }
-      setBoxes(response.data.boxes || []);
-      setError('');
-    }
-
-    refreshBoxes();
-    const handle = setInterval(refreshBoxes, BOX_POLL_MS);
-    return () => {
-      active = false;
-      clearInterval(handle);
-    };
-  }, []);
-
-  useEffect(() => {
-    let active = true;
-
-    async function refreshStorage() {
-      if (!boxes.length) {
-        if (active) setBoxStorage({});
-        return;
-      }
-      const results = await Promise.all(
-        boxes.map(async (box) => {
-          const response = await getBoxStorage(box.box_id);
-          if (!response.ok) {
-            return { boxId: box.box_id, storage: null };
-          }
-          return { boxId: box.box_id, storage: response.data.storage || null };
-        })
-      );
-      if (!active) return;
-      const next = {};
-      results.forEach(({ boxId, storage }) => {
-        if (!storage) {
-          next[boxId] = null;
-          return;
-        }
-        const total = storage.total_bytes ?? null;
-        const free = storage.free_bytes ?? null;
-        const used =
-          storage.used_bytes ?? (total !== null && free !== null ? total - free : null);
-        next[boxId] = { total, free, used };
-      });
-      setBoxStorage(next);
-    }
-
-    refreshStorage();
-    const handle = setInterval(refreshStorage, STORAGE_POLL_MS);
-    return () => {
-      active = false;
-      clearInterval(handle);
-    };
-  }, [boxes]);
-
-  useEffect(() => {
-    function handleOutside(event) {
-      if (activeModal) return;
-      if (!explorerRef.current) return;
-      if (modalRef.current && modalRef.current.contains(event.target)) return;
-      if (!explorerRef.current.contains(event.target)) {
-        setSelectedPaths([]);
-        setRenameName('');
-      }
-    }
-    function handleMouseUp() {
-      dragSelectRef.current = false;
-    }
-    window.addEventListener('mousedown', handleOutside);
-    window.addEventListener('mouseup', handleMouseUp);
-    return () => {
-      window.removeEventListener('mousedown', handleOutside);
-      window.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [activeModal]);
-
-  useEffect(() => {
-    if (!selectedId) {
-      setStatus(null);
-      setMediaTree(null);
-      setMediaError('');
-      setSelectedPaths([]);
-      setNewFolderName('');
-      setRenameName('');
-      setActiveModal('');
-      setBoxTags([]);
-      setDbTagMedia({});
-      setScanTagUid('');
-      setScanTagLabel('');
-      setScanMediaPath('');
-      setReuseTagUid('');
-      setLocalBoxTags([]);
-      setLocalBoxError('');
-      return;
-    }
-
-    let active = true;
-
-    async function refreshStatus() {
-      const response = await getStatus(selectedId);
-      if (!active) return;
-      if (!response.ok) {
-        setStatus({ error: response.data.detail || 'Status nicht verfuegbar.' });
-        return;
-      }
-      setStatus(response.data);
-    }
-
-    refreshStatus();
-    const handle = setInterval(refreshStatus, STATUS_POLL_MS);
-    return () => {
-      active = false;
-      clearInterval(handle);
-    };
-  }, [selectedId]);
-
-  useEffect(() => {
-    let active = true;
-
-    async function refreshMedia() {
-      const response = await getMediaTree();
-      if (!active) return;
-      if (!response.ok) {
-        setMediaError(response.data.detail || 'Medien nicht verfuegbar.');
-        setMediaTree(null);
-        return;
-      }
-      setMediaTree(response.data);
-      setMediaError('');
-    }
-
-    refreshMedia();
-    return () => {
-      active = false;
-    };
-  }, []);
-
-  function findPathChain(node, target, chain = []) {
-    if (!node) return null;
-    const currentPath = node.path || '';
-    const nextChain = [...chain, currentPath];
-    if (currentPath === target) {
-      return nextChain;
-    }
-    if (!Array.isArray(node.children)) return null;
-    for (const child of node.children) {
-      if (child.type !== 'folder') continue;
-      const result = findPathChain(child, target, nextChain);
-      if (result) return result;
-    }
-    return null;
-  }
-
-  useEffect(() => {
-    if (!mediaTree) return;
-    const saved = localStorage.getItem('klangkiste_explorer_path');
-    if (saved === null) return;
-    const chain = findPathChain(mediaTree, saved);
-    if (!chain) return;
-    setCurrentPath(saved);
-    if (!expandedInitRef.current) {
-      const savedExpandedRaw = localStorage.getItem('klangkiste_explorer_expanded');
-      let savedExpanded = [];
-      if (savedExpandedRaw) {
-        try {
-          const parsed = JSON.parse(savedExpandedRaw);
-          if (Array.isArray(parsed)) {
-            savedExpanded = parsed;
-          }
-        } catch (error) {
-          savedExpanded = [];
-        }
-      }
-      const merged = new Set([
-        ...savedExpanded,
-        ...chain.map((p) => (p ? p : '__root__')),
-      ]);
-      setExpandedFolders(merged);
-      expandedInitRef.current = true;
-    }
-    explorerInitRef.current = true;
-  }, [mediaTree]);
-
-  useEffect(() => {
-    if (!explorerInitRef.current) return;
-    localStorage.setItem('klangkiste_explorer_path', currentPath || '');
-  }, [currentPath]);
-
-  useEffect(() => {
-    if (!expandedInitRef.current) return;
-    localStorage.setItem(
-      'klangkiste_explorer_expanded',
-      JSON.stringify(Array.from(expandedFolders))
-    );
-  }, [expandedFolders]);
-
-  useEffect(() => {
-    const lastNfc = status?.last_nfc;
-    if (!lastNfc || !lastNfc.uid) {
-      return;
-    }
-    if (!lastNfc.known) {
-      const key = `${status?.last_nfc_at ?? ''}:${lastNfc.uid ?? ''}`;
-      if (lastNfcKeyRef.current === key) {
-        return;
-      }
-      lastNfcKeyRef.current = key;
-      setScanTagLabel('');
-      setScanMediaPath('');
-      if (isValidTagUid(lastNfc.uid)) {
-        setScanTagUid(lastNfc.uid);
-        setTagUidMode('keep');
-        setTagUidError('');
-      } else {
-        setScanTagUid(generateTagId());
-        setTagUidMode('new');
-        setTagUidError(autoReplaceMsg);
-      }
-      setDismissedNfcKey('');
-      setTagStep(0);
-      setTagStepOneDone(false);
-      setTagStepTwoDone(false);
-      setTagStepMax(0);
-    }
-  }, [status, tags]);
-
-  useEffect(() => {
-    tagStepperRef.current?.setActiveStep(tagStep);
-  }, [tagStep]);
-
-  useEffect(() => {
-    const ref = tagUidMsgRef.current;
-    if (!ref) return;
-    ref.clear();
-    if (tagStep === 0 && tagUidError) {
-      const showMessage = () => {
-        if (!tagUidMsgRef.current) return false;
-        tagUidMsgRef.current.clear();
-        tagUidMsgRef.current.show({
-          severity: 'warn',
-          summary: 'Ungueltige ID',
-          detail: tagUidError,
-          sticky: true,
-          closable: false,
-        });
-        return true;
-      };
-      if (!showMessage()) {
-        const timer = setTimeout(() => {
-          showMessage();
-        }, 0);
-        return () => clearTimeout(timer);
-      }
-    }
-  }, [tagUidError, tagStep]);
-
-  useEffect(() => {
-    const ref = mediaMsgRef.current;
-    if (!ref) return;
-    ref.clear();
-    if (tagStep === 1 && !scanMediaPath) {
-      const showMessage = () => {
-        if (!mediaMsgRef.current) return false;
-        mediaMsgRef.current.clear();
-        mediaMsgRef.current.show({
-          severity: 'info',
-          summary: 'Keine Medienzuordnung',
-          detail: 'Ohne Medienauswahl wird der Tag ohne Zuordnung gespeichert.',
-          sticky: true,
-          closable: false,
-        });
-        return true;
-      };
-      if (!showMessage()) {
-        const timer = setTimeout(() => {
-          showMessage();
-        }, 0);
-        return () => clearTimeout(timer);
-      }
-    }
-  }, [scanMediaPath, tagStep]);
-
-  useEffect(() => {
-    let active = true;
-
-    async function refreshTags() {
-      const response = await getTags();
-      if (!active) return;
-      if (!response.ok) {
-        setError(response.data.detail || 'Tags nicht verfuegbar.');
-        return;
-      }
-      setTags(response.data.tags || []);
-    }
-
-    refreshTags();
-    return () => {
-      active = false;
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!selectedId) return;
-    let active = true;
-
-    async function refreshBoxTags() {
-      const response = await getBoxTags(selectedId);
-      if (!active) return;
-      if (!response.ok) {
-        setError(response.data.detail || 'Box-Tags nicht verfuegbar.');
-        return;
-      }
-      setBoxTags(response.data.tags || []);
-    }
-
-    refreshBoxTags();
-    return () => {
-      active = false;
-    };
-  }, [selectedId]);
-
-  useEffect(() => {
-    if (!selectedId) return;
-    let active = true;
-
-    async function refreshLocalTags() {
-      const response = await getBoxLocalTags(selectedId);
-      if (!active) return;
-      if (!response.ok) {
-        setLocalBoxError(response.data.detail || 'Lokale Box-Tags nicht verfuegbar.');
-        return;
-      }
-      setLocalBoxTags(response.data.tags || []);
-      setLocalBoxError('');
-    }
-
-    refreshLocalTags();
-    return () => {
-      active = false;
-    };
-  }, [selectedId]);
-
-  useEffect(() => {
-    let active = true;
-
-    async function refreshBlocked() {
-      if (!boxes.length) {
-        setBlockedByBox({});
-        return;
-      }
-      const results = await Promise.all(
-        boxes.map(async (box) => {
-          const response = await getTagBlocks(box.box_id);
-          return { boxId: box.box_id, response };
-        })
-      );
-      if (!active) return;
-      const next = {};
-      results.forEach(({ boxId, response }) => {
-        if (response.ok) {
-          next[boxId] = response.data.blocked || [];
-        }
-      });
-      setBlockedByBox(next);
-    }
-
-    refreshBlocked();
-    return () => {
-      active = false;
-    };
-  }, [boxes]);
-
-  const unpaired = useMemo(
-    () => boxes.filter((box) => box.state === 'UNPAIRED'),
-    [boxes]
-  );
-  const paired = useMemo(
-    () => boxes.filter((box) => box.state === 'PAIRED'),
-    [boxes]
-  );
-
-  const mediaTagCounts = useMemo(() => {
-    const counts = {};
-    tags.forEach((tag) => {
-      const mediaPath = tag.media_path || '';
-      if (!mediaPath) return;
-      counts[mediaPath] = (counts[mediaPath] || 0) + 1;
-    });
-    return counts;
-  }, [tags]);
-
-  const topLevelFolders = useMemo(() => {
-    if (!mediaTree || !Array.isArray(mediaTree.children)) return [];
-    const folders = mediaTree.children.filter((child) => child.type === 'folder');
-    const query = sidebarQuery.trim().toLowerCase();
-    if (!query) return folders;
-    return folders.filter((folder) => (folder.name || '').toLowerCase().includes(query));
-  }, [mediaTree, sidebarQuery]);
-
-  const filteredTree = useMemo(() => {
-    if (!mediaTree) return null;
-    return {
-      ...mediaTree,
-      children: topLevelFolders,
-    };
-  }, [mediaTree, topLevelFolders]);
-
-  const dashboardStats = useMemo(() => {
-    const sizeLabel = mediaTree ? formatSize(mediaTree.size) : '-';
-    const freeLabel = mediaTree ? formatSize(mediaTree.free_bytes) : '-';
-    return [
-      {
-        label: 'Gepairte Boxen',
-        value: paired.length,
-        helper: `${unpaired.length} neu`,
-      },
-      {
-        label: 'Tags gesamt',
-        value: tags.length,
-        helper: `${boxTags.length} auf Box`,
-      },
-      {
-        label: 'Medien gesamt',
-        value: sizeLabel,
-        helper: `frei ${freeLabel}`,
-      },
-      {
-        label: 'Letzter NFC',
-        value: status?.last_nfc?.uid || '-',
-        helper: status?.last_nfc_at ? formatTime(status.last_nfc_at) : '-',
-      },
-    ];
-  }, [paired.length, unpaired.length, tags.length, boxTags.length, mediaTree, status]);
-
-  async function handlePair(boxId) {
-    const response = await pairBox(boxId);
-    if (!response.ok) {
-      setError(response.data.detail || 'Box pairing fehlgeschlagen.');
-      addToast('error', response.data.detail || 'Box pairing fehlgeschlagen.');
-      return;
-    }
-    addToast('success', 'Box gepairt.');
-    const updated = await getBoxes();
-    if (updated.ok) {
-      setBoxes(updated.data.boxes || []);
-    }
-  }
-
-  async function handleCommand(command, payload = {}) {
-    if (!selectedId) {
-      setError('Bitte zuerst eine Box auswaehlen.');
-      addToast('error', 'Bitte zuerst eine Box auswaehlen.');
-      return;
-    }
-    let nextPayload = payload;
-    if (command === 'nfc_on' || command === 'nfc_off') {
-      const rawUid = typeof payload?.uid === 'string' ? payload.uid.trim() : '';
-      let uid = rawUid;
-      if (!uid) {
-        if (command === 'nfc_on') {
-          setSimulatedNfc({
-            uid: '',
-            known: false,
-            hardwareUid: generateHardwareUid(),
-            at: Date.now(),
-          });
-          setScanTagLabel('');
-          setScanMediaPath('');
-          if (!scanTagUid) {
-            setScanTagUid(generateTagId());
-          }
-          setTagUidMode('new');
-          setTagStep(0);
-          setTagStepOneDone(false);
-          setTagStepTwoDone(false);
-          return;
-        }
-        setError('Bitte eine UID angeben.');
-        addToast('error', 'Bitte eine UID angeben.');
-        return;
-      }
-      nextPayload = { ...payload, uid };
-      if (command === 'nfc_on') {
-        setLastHardwareUid({ uid, hardwareUid: generateHardwareUid() });
-        setSimulatedNfc(null);
-      }
-    }
-    const response = await sendCommand(selectedId, command, nextPayload);
-    if (!response.ok) {
-      setError(response.data.detail || 'Command fehlgeschlagen.');
-      addToast('error', response.data.detail || 'Command fehlgeschlagen.');
-      return;
-    }
-    setError('');
-    addToast('success', 'Command gesendet.');
-  }
-
-  async function handlePlayerCommand(command, payload = {}) {
-    if (!selectedId) {
-      return;
-    }
-    let nextPayload = payload;
-    if (command === 'nfc_on' || command === 'nfc_off') {
-      const rawUid = typeof payload?.uid === 'string' ? payload.uid.trim() : '';
-      const uid = rawUid;
-      if (!uid) {
-        if (command === 'nfc_on') {
-          setSimulatedNfc({
-            uid: '',
-            known: false,
-            hardwareUid: generateHardwareUid(),
-            at: Date.now(),
-          });
-          setScanTagLabel('');
-          setScanMediaPath('');
-          if (!scanTagUid) {
-            setScanTagUid(generateTagId());
-          }
-          setTagUidMode('new');
-          setTagStep(0);
-          setTagStepOneDone(false);
-          setTagStepTwoDone(false);
-          setTagStepMax(0);
-        } else if (command === 'nfc_off') {
-          setSimulatedNfc(null);
-          setScanTagUid('');
-          setScanTagLabel('');
-          setScanMediaPath('');
-          setLastHardwareUid({ uid: '', hardwareUid: '' });
-          setTagUidMode('keep');
-          setTagStep(0);
-          setTagStepOneDone(false);
-          setTagStepTwoDone(false);
-          setTagStepMax(0);
-        }
-        return;
-      }
-      if (command === 'nfc_on') {
-        setLastHardwareUid({ uid, hardwareUid: generateHardwareUid() });
-        setSimulatedNfc(null);
-      }
-      nextPayload = { ...payload, uid };
-    }
-    await sendCommand(selectedId, command, nextPayload);
-  }
-
-  async function handleUnpair(boxId) {
-    const response = await unpairBox(boxId);
-    if (!response.ok) {
-      setError(response.data.detail || 'Unpair fehlgeschlagen.');
-      addToast('error', response.data.detail || 'Unpair fehlgeschlagen.');
-      return;
-    }
-    addToast('success', 'Box unpaired.');
-    const updated = await getBoxes();
-    if (updated.ok) {
-      setBoxes(updated.data.boxes || []);
-    }
-  }
-
-  async function handleMediaRefresh() {
-    const response = await getMediaTree();
-    if (!response.ok) {
-      setMediaError(response.data.detail || 'Medien nicht verfuegbar.');
-      setMediaTree(null);
-      return;
-    }
-    setMediaTree(response.data);
-    setMediaError('');
-  }
-
-  function getNodeByPath(node, targetPath) {
-    if (!node) return null;
-    if ((node.path || '') === targetPath) return node;
-    if (!Array.isArray(node.children)) return null;
-    for (const child of node.children) {
-      const found = getNodeByPath(child, targetPath);
-      if (found) return found;
-    }
-    return null;
-  }
-
-  function listChildren(node) {
-    if (!node) return [];
-    if (!Array.isArray(node.children)) return [];
-    return node.children;
-  }
-
-  function buildBreadcrumb(pathValue) {
-    if (!pathValue) return [];
-    const parts = pathValue.split('/').filter(Boolean);
-    return parts.map((part, index) => ({
-      name: part,
-      path: parts.slice(0, index + 1).join('/'),
-    }));
-  }
-
-  function collectTopLevelFolders(node) {
-    if (!node || !Array.isArray(node.children)) return [];
-    return node.children
-      .filter((child) => child.type === 'folder')
-      .map((child) => child.path);
-  }
-
-  function collectFolderPaths(node) {
-    if (!node || node.type !== 'folder') return [];
-    const entries = [node.path || ''];
-    if (!Array.isArray(node.children)) return entries;
-    node.children.forEach((child) => {
-      if (child.type !== 'folder') return;
-      entries.push(...collectFolderPaths(child));
-    });
-    return entries;
-  }
-
-  function isSelected(pathValue) {
-    return selectedPaths.includes(pathValue || '');
-  }
-
-  async function handleCreateFolder() {
-    const trimmedName = newFolderName.trim();
-    if (uploadAfterCreate && pendingUploadFiles.length > 0) {
-      if (!trimmedName && !currentPath) {
-        addToast('error', 'Im Medien-Hauptordner ist ein Ordnername erforderlich.');
-        setUploadNameError('Im Medien-Hauptordner ist ein Ordnername erforderlich.');
-        return;
-      }
-      const targetPath = trimmedName ? `${currentPath}/${trimmedName}` : currentPath;
-      setUploadInProgress(true);
-      setActiveUploadLabel(
-        pendingUploadFiles.length ? `Upload: ${pendingUploadFiles.length} Datei(en)` : ''
-      );
-      const uploadResponse = await uploadMedia(
-        targetPath,
-        pendingUploadFiles,
-        (percent) => setUploadProgress(percent)
-      );
-      setUploadInProgress(false);
-      setUploadProgress(0);
-      if (!uploadResponse.ok) {
-        setMediaError(uploadResponse.data.detail || 'Upload fehlgeschlagen.');
-        addToast('error', uploadResponse.data.detail || 'Upload fehlgeschlagen.');
-        return;
-      }
-      addToast('success', 'Upload abgeschlossen.');
-      await handleMediaRefresh();
-      setActiveModal('');
-      setUploadAfterCreate(false);
-      setPendingUploadFiles([]);
-      setNewFolderName('');
-      return;
-    }
-
-    if (!trimmedName && !uploadAfterCreate) {
-      setMediaError('Bitte einen Ordnernamen angeben.');
-      return;
-    }
-
-    const response = await createMediaFolder(currentPath, trimmedName);
-    if (!response.ok) {
-      setMediaError(response.data.detail || 'Ordner anlegen fehlgeschlagen.');
-      addToast('error', response.data.detail || 'Ordner anlegen fehlgeschlagen.');
-      return;
-    }
-    addToast('success', 'Ordner angelegt.');
-    setNewFolderName('');
-    setActiveModal('');
-    await handleMediaRefresh();
-  }
-
-  async function handleRename() {
-    if (!selectedPaths.length) return;
-    const response = await renameMedia(selectedPaths[0], renameName.trim());
-    if (!response.ok) {
-      setMediaError(response.data.detail || 'Umbenennen fehlgeschlagen.');
-      addToast('error', response.data.detail || 'Umbenennen fehlgeschlagen.');
-      return;
-    }
-    addToast('success', 'Eintrag umbenannt.');
-    setRenameName('');
-    setActiveModal('');
-    await handleMediaRefresh();
-  }
-
-  async function handleDeleteSelected() {
-    if (!selectedPaths.length) return;
-    for (const pathValue of selectedPaths) {
-      const response = await deleteMedia(pathValue);
-      if (!response.ok) {
-        setMediaError(response.data.detail || 'Loeschen fehlgeschlagen.');
-        addToast('error', response.data.detail || 'Loeschen fehlgeschlagen.');
-        return;
-      }
-    }
-    addToast('success', 'Eintraege geloescht.');
-    setSelectedPaths([]);
-    setActiveModal('');
-    await handleMediaRefresh();
-  }
-
-  async function handleMoveSelected() {
-    if (!selectedPaths.length) return;
-    const pathValue = selectedPaths[0];
-    const isRootTarget = moveTarget === '__root__' || moveTarget === '';
-    const response = await moveMedia(pathValue, isRootTarget ? '' : moveTarget);
-    if (!response.ok) {
-      setMediaError(response.data.detail || 'Verschieben fehlgeschlagen.');
-      addToast('error', response.data.detail || 'Verschieben fehlgeschlagen.');
-      return;
-    }
-    addToast('success', 'Eintrag verschoben.');
-    setMoveTarget('');
-    setSelectedPaths([]);
-    setActiveModal('');
-    await handleMediaRefresh();
-  }
-
-  async function handleUpload(event) {
-    const files = Array.from(event.target.files || []);
-    const audioFiles = files.filter((file) => file.type.startsWith('audio/'));
-    if (!audioFiles.length) return;
-    if (!currentPath) {
-      addToast('error', 'Im Medien-Hauptordner ist ein Ordnername erforderlich.');
-      setUploadNameError('Im Medien-Hauptordner ist ein Ordnername erforderlich.');
-      return;
-    }
-    setUploadInProgress(true);
-    setActiveUploadLabel(
-      audioFiles.length ? `Upload: ${audioFiles.length} Datei(en)` : ''
-    );
-    const response = await uploadMedia(currentPath, audioFiles, (percent) =>
-      setUploadProgress(percent)
-    );
-    setUploadInProgress(false);
-    setUploadProgress(0);
-    if (!response.ok) {
-      setMediaError(response.data.detail || 'Upload fehlgeschlagen.');
-      addToast('error', response.data.detail || 'Upload fehlgeschlagen.');
-      return;
-    }
-    addToast('success', 'Upload abgeschlossen.');
-    await handleMediaRefresh();
-  }
-
-  const fileHeaderTemplate = (options) => {
-    const { className, chooseButton, cancelButton } = options;
-    return (
-      <div className={className} style={{ backgroundColor: 'transparent', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-        {chooseButton}
-        {cancelButton}
-      </div>
-    );
-  };
-
-  const fileItemTemplate = (file, props) => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', width: '100%', padding: '0.5rem 0', borderBottom: '1px solid rgba(255, 255, 255, 0.08)' }}>
-      <Button
-        icon="pi pi-times"
-        severity="danger"
-        text
-        rounded
-        aria-label="Entfernen"
-        onClick={() => {
-          setUploadSize((prev) => Math.max(0, prev - file.size));
-          setPendingUploadFiles((prev) =>
-            prev.filter((entry) => entry.name !== file.name)
-          );
-          props.onRemove(file);
-        }}
-      />
-      <div className="upload-item-meta">
-        <strong className="upload-item-name">{file.name}</strong>
-        <small className="upload-item-size">{formatSize(file.size)}</small>
-      </div>
-    </div>
-  );
-
-  const fileEmptyTemplate = () => (
-    <div className="upload-item-footer">
-      <span className="upload-item-total">Gesamt: {formatSize(uploadSize)}</span>
-    </div>
-  );
-
-  function handleSelect(item, event) {
-    const itemPath = item.path || '';
-    if (event.shiftKey && lastAnchorRef.current) {
-      const items = listChildren(getNodeByPath(mediaTree, currentPath));
-      const anchorIndex = items.findIndex((entry) => entry.path === lastAnchorRef.current);
-      const currentIndex = items.findIndex((entry) => entry.path === itemPath);
-      if (anchorIndex !== -1 && currentIndex !== -1) {
-        const [start, end] = anchorIndex < currentIndex
-          ? [anchorIndex, currentIndex]
-          : [currentIndex, anchorIndex];
-        const range = items.slice(start, end + 1).map((entry) => entry.path || '');
-        setSelectedPaths(Array.from(new Set([...selectedPaths, ...range])));
-        return;
-      }
-    }
-    if (event.metaKey || event.ctrlKey) {
-      setSelectedPaths((prev) =>
-        prev.includes(itemPath)
-          ? prev.filter((pathValue) => pathValue !== itemPath)
-          : [...prev, itemPath]
-      );
-      lastAnchorRef.current = itemPath;
-      return;
-    }
-    const now = Date.now();
-    const isDoubleClick = now - lastDblClickRef.current < 250;
-    if (!isDoubleClick) {
-      setSelectedPaths([itemPath]);
-      lastAnchorRef.current = itemPath;
-    }
-  }
-
-  function handleDragSelect(item) {
-    if (!dragSelectRef.current) return;
-    const itemPath = item.path || '';
-    setSelectedPaths((prev) =>
-      prev.includes(itemPath) ? prev : [...prev, itemPath]
-    );
-  }
-
-  function handleOpen(item) {
-    if (item.type !== 'folder') return;
-    setCurrentPath(item.path || '');
-    setSelectedPaths([]);
-    setRenameName('');
-    const key = item.path || '__root__';
-    setExpandedFolders((prev) => new Set(prev).add(key));
-  }
-
-  function handleGoUp() {
-    if (!currentPath) return;
-    const parts = currentPath.split('/').filter(Boolean);
-    parts.pop();
-    const next = parts.join('/');
-    setCurrentPath(next);
-    setSelectedPaths([]);
-    setRenameName('');
-  }
-
-  function toggleFolder(pathValue) {
-    const key = pathValue || '__root__';
-    setExpandedFolders((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) {
-        next.delete(key);
-      } else {
-        next.add(key);
-      }
-      return next;
-    });
-  }
-
-  function renderFolderTree(node, depth = 0) {
-    if (!node || node.type !== 'folder') return null;
-    const isActive = (node.path || '') === currentPath;
-    const key = node.path || '__root__';
-    const isExpanded = expandedFolders.has(key);
-    const childFolders =
-      Array.isArray(node.children) && node.children.filter((child) => child.type === 'folder');
-    const hasChildren = childFolders && childFolders.length > 0;
-    const tagCount = mediaTagCounts[node.path || ''] || 0;
-    return (
-      <div key={node.path || 'root'} className={`tree-node depth-${depth}`}>
-        <div
-          className={`tree-row folder ${isActive ? 'active' : ''}`}
-          onClick={() => handleOpen(node)}
-          role="button"
-          tabIndex={0}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') handleOpen(node);
-          }}
-        >
-          {hasChildren ? (
-            <div
-              className="tree-caret"
-              role="button"
-              tabIndex={0}
-              onClick={(event) => {
-                event.stopPropagation();
-                toggleFolder(node.path || '');
-              }}
-              onKeyDown={(event) => {
-                if (event.key === 'Enter') {
-                  event.stopPropagation();
-                  toggleFolder(node.path || '');
-                }
-              }}
-              aria-label="Toggle"
-            >
-              {isExpanded ? <CaretDown size={14} /> : <CaretRight size={14} />}
-            </div>
-          ) : (
-            <span className="tree-caret disabled" aria-hidden="true" />
-          )}
-          <span className="tree-icon folder">
-            <Folder size={16} weight="fill" />
-          </span>
-          <span className="tree-label">{node.name}</span>
-          {tagCount > 0 && (
-            <span className="tree-tag-count" aria-label={`Zugewiesene Tags: ${tagCount}`}>
-              {tagCount}
-            </span>
-          )}
-        </div>
-        {isExpanded &&
-          hasChildren &&
-          childFolders.map((child) => renderFolderTree(child, depth + 1))}
-      </div>
-    );
-  }
-
-  async function handleClaimTagForScan() {
-    setTagUidError('');
-    const currentUid = scanTagUid.trim();
-    const existing = tags.find((tag) => tag.uid === currentUid);
-    if (existing) {
-      if (existing.status === 'NEW') {
-        const written = await markTagWritten(currentUid);
-        if (!written.ok) {
-          if (written.data.detail === 'invalid uid') {
-            setTagUidError(
-              'UID ungueltig. Bitte 10 Zeichen (a-z, 0-9) oder TAG_ + 8 Zeichen verwenden.'
-            );
-            return;
-          }
-          setError(written.data.detail || 'Tag schreiben fehlgeschlagen.');
-          addToast('error', written.data.detail || 'Tag schreiben fehlgeschlagen.');
-          return;
-        }
-      }
-    } else {
-      const response = await claimTag(currentUid, scanTagLabel.trim());
-      if (!response.ok) {
-        if (response.data.detail === 'invalid uid') {
-          setTagUidError(
-            'UID ungueltig. Bitte 10 Zeichen (a-z, 0-9) oder TAG_ + 8 Zeichen verwenden.'
-          );
-          return;
-        }
-        setError(response.data.detail || 'Tag schreiben fehlgeschlagen.');
-        addToast('error', response.data.detail || 'Tag schreiben fehlgeschlagen.');
-        return;
-      }
-      setScanTagUid(response.data.uid || '');
-    }
-    setError('');
-    addToast('success', 'Tag geschrieben.');
-    if (activeNfc) {
-      setDismissedNfcKey(getNfcKey(activeNfc));
-    }
-    const shouldAssign =
-      selectedId && status?.last_nfc?.known === false && scanMediaPath;
-    if (shouldAssign) {
-      const mediaSet = await setTagMedia(currentUid, scanMediaPath);
-      if (!mediaSet.ok) {
-        setError(mediaSet.data.detail || 'Medium setzen fehlgeschlagen.');
-        addToast('error', mediaSet.data.detail || 'Medium setzen fehlgeschlagen.');
-        return;
-      }
-      const assigned = await assignTag(currentUid, selectedId);
-      if (!assigned.ok) {
-        setError(assigned.data.detail || 'Zuordnung fehlgeschlagen.');
-        addToast('error', assigned.data.detail || 'Zuordnung fehlgeschlagen.');
-        return;
-      }
-      addToast('success', 'Tag zugeordnet.');
-      if (activeNfc?.known === false) {
-        await handlePlayerCommand('nfc_on', { uid: currentUid });
-      }
-      setScanTagUid('');
-      setScanTagLabel('');
-      setScanMediaPath('');
-      setSimulatedNfc(null);
-      setLastHardwareUid({ uid: '', hardwareUid: '' });
-    } else if (selectedId && status?.last_nfc?.known === false) {
-      addToast('success', 'Tag gespeichert. Medium fehlt noch.');
-      setSimulatedNfc(null);
-      setLastHardwareUid({ uid: '', hardwareUid: '' });
-    }
-    const updated = await getTags();
-    if (updated.ok) {
-      setTags(updated.data.tags || []);
-    }
-    if (selectedId) {
-      const updatedBoxTags = await getBoxTags(selectedId);
-      if (updatedBoxTags.ok) {
-        setBoxTags(updatedBoxTags.data.tags || []);
-      }
-    }
-  }
-
-  async function handleReuseImportedTag() {
-    if (!reuseTagUid) {
-      setError('Bitte eine gespeicherte Tag-ID waehlen.');
-      addToast('error', 'Bitte eine gespeicherte Tag-ID waehlen.');
-      return;
-    }
-    if (!selectedId) {
-      setError('Bitte zuerst eine Box auswaehlen.');
-      addToast('error', 'Bitte zuerst eine Box auswaehlen.');
-      return;
-    }
-    const tag = tags.find((entry) => entry.uid === reuseTagUid);
-    if (!tag || !tag.media_path) {
-      setError('Tag hat keine Medienzuordnung.');
-      addToast('error', 'Tag hat keine Medienzuordnung.');
-      return;
-    }
-    const response = await markTagWritten(reuseTagUid);
-    if (!response.ok) {
-      setError(response.data.detail || 'Tag schreiben fehlgeschlagen.');
-      addToast('error', response.data.detail || 'Tag schreiben fehlgeschlagen.');
-      return;
-    }
-    const assigned = await assignTag(reuseTagUid, selectedId);
-    if (!assigned.ok) {
-      setError(assigned.data.detail || 'Zuordnung fehlgeschlagen.');
-      addToast('error', assigned.data.detail || 'Zuordnung fehlgeschlagen.');
-      return;
-    }
-    addToast('success', 'Tag geschrieben und zugeordnet.');
-    const updated = await getTags();
-    if (updated.ok) {
-      setTags(updated.data.tags || []);
-    }
-    const updatedBoxTags = await getBoxTags(selectedId);
-    if (updatedBoxTags.ok) {
-      setBoxTags(updatedBoxTags.data.tags || []);
-    }
-    setScanTagUid(reuseTagUid);
-    setReuseTagUid('');
-  }
-
-  async function handleWriteTag(uid) {
-    const response = await markTagWritten(uid);
-    if (!response.ok) {
-      setError(response.data.detail || 'Tag schreiben fehlgeschlagen.');
-      addToast('error', response.data.detail || 'Tag schreiben fehlgeschlagen.');
-      return;
-    }
-    addToast('success', 'Tag geschrieben.');
-    const updated = await getTags();
-    if (updated.ok) {
-      setTags(updated.data.tags || []);
-    }
-  }
-
-  async function handleStoreTagOnly() {
-    if (!activeNfc?.uid) {
-      setError('Keine UID erkannt.');
-      addToast('error', 'Keine UID erkannt.');
-      return;
-    }
-    const existing = tags.find((tag) => tag.uid === activeNfc.uid);
-    if (existing) {
-      addToast('success', 'Tag ist bereits in der Datenbank.');
-      if (activeNfc) {
-        setDismissedNfcKey(getNfcKey(activeNfc));
-      }
-      return;
-    }
-    const response = await claimTag(activeNfc.uid, '');
-    if (!response.ok) {
-      setError(response.data.detail || 'Tag speichern fehlgeschlagen.');
-      addToast('error', response.data.detail || 'Tag speichern fehlgeschlagen.');
-      return;
-    }
-    addToast('success', 'Tag in der Datenbank gespeichert.');
-    if (activeNfc) {
-      setDismissedNfcKey(getNfcKey(activeNfc));
-    }
-    setSimulatedNfc(null);
-    setLastHardwareUid({ uid: '', hardwareUid: '' });
-    const updated = await getTags();
-    if (updated.ok) {
-      setTags(updated.data.tags || []);
-    }
-  }
-
-  async function handleAssignFromScan() {
-    if (!scanMediaPath) {
-      setError('Bitte zuerst einen Medienordner waehlen.');
-      addToast('error', 'Bitte zuerst einen Medienordner waehlen.');
-      return;
-    }
-    const uid = scanTagUid.trim();
-    if (!uid) {
-      setError('Bitte zuerst eine Tag-ID schreiben.');
-      addToast('error', 'Bitte zuerst eine Tag-ID schreiben.');
-      return;
-    }
-    const matching = tags.find((tag) => tag.uid === uid);
-    if (!matching) {
-      setError('Tag-ID existiert nicht. Bitte zuerst schreiben.');
-      addToast('error', 'Tag-ID existiert nicht. Bitte zuerst schreiben.');
-      return;
-    }
-    const mediaSet = await setTagMedia(uid, scanMediaPath);
-    if (!mediaSet.ok) {
-      setError(mediaSet.data.detail || 'Medium setzen fehlgeschlagen.');
-      addToast('error', mediaSet.data.detail || 'Medium setzen fehlgeschlagen.');
-      return;
-    }
-    const assigned = await assignTag(uid, selectedId);
-    if (!assigned.ok) {
-      setError(assigned.data.detail || 'Zuordnung fehlgeschlagen.');
-      addToast('error', assigned.data.detail || 'Zuordnung fehlgeschlagen.');
-      return;
-    }
-    addToast('success', 'Tag zugeordnet.');
-    if (activeNfc?.known === false) {
-      await handlePlayerCommand('nfc_on', { uid });
-    }
-    if (activeNfc) {
-      setDismissedNfcKey(getNfcKey(activeNfc));
-    }
-    setScanTagUid('');
-    setScanTagLabel('');
-    setScanMediaPath('');
-    setSimulatedNfc(null);
-    setLastHardwareUid({ uid: '', hardwareUid: '' });
-    const updatedTags = await getTags();
-    if (updatedTags.ok) {
-      setTags(updatedTags.data.tags || []);
-    }
-    const updatedBoxTags = await getBoxTags(selectedId);
-    if (updatedBoxTags.ok) {
-      setBoxTags(updatedBoxTags.data.tags || []);
-    }
-  }
-
-  async function handlePullTagFromBox() {
-    if (!selectedId) {
-      setError('Bitte zuerst eine Box auswaehlen.');
-      addToast('error', 'Bitte zuerst eine Box auswaehlen.');
-      return;
-    }
-    if (!importTargetUid) {
-      setError('Kein Tag ausgewaehlt.');
-      addToast('error', 'Kein Tag ausgewaehlt.');
-      return;
-    }
-    const response = await pullTagFromBox(
-      selectedId,
-      importTargetUid,
-      importTargetFolder.trim()
-    );
-    if (!response.ok) {
-      setError(response.data.detail || 'Import fehlgeschlagen.');
-      addToast('error', response.data.detail || 'Import fehlgeschlagen.');
-      return;
-    }
-    addToast('success', 'Medien vom Box-Tag uebertragen.');
-    setImportTargetUid('');
-    setImportTargetFolder('');
-    setActiveModal('');
-    const updated = await getTags();
-    if (updated.ok) {
-      setTags(updated.data.tags || []);
-    }
-    const updatedLocal = await getBoxLocalTags(selectedId);
-    if (updatedLocal.ok) {
-      setLocalBoxTags(updatedLocal.data.tags || []);
-    }
-    await handleMediaRefresh();
-  }
-
-  async function handleUnassignTag(uid) {
-    const response = await unassignTag(uid, selectedId);
-    if (!response.ok) {
-      setError(response.data.detail || 'Tag loesen fehlgeschlagen.');
-      addToast('error', response.data.detail || 'Tag loesen fehlgeschlagen.');
-      return;
-    }
-    addToast('success', 'Tag getrennt.');
-    const updated = await getBoxTags(selectedId);
-    if (updated.ok) {
-      setBoxTags(updated.data.tags || []);
-    }
-  }
-
-  async function handleDeleteTag(uid) {
-    const response = await deleteTag(uid);
-    if (!response.ok) {
-      setError(response.data.detail || 'Tag loeschen fehlgeschlagen.');
-      addToast('error', response.data.detail || 'Tag loeschen fehlgeschlagen.');
-      return;
-    }
-    addToast('success', 'Tag geloescht.');
-    const updatedTags = await getTags();
-    if (updatedTags.ok) {
-      setTags(updatedTags.data.tags || []);
-    }
-    if (selectedId) {
-      const updatedBoxTags = await getBoxTags(selectedId);
-      if (updatedBoxTags.ok) {
-        setBoxTags(updatedBoxTags.data.tags || []);
-      }
-    }
-    if (boxes.length) {
-      const results = await Promise.all(
-        boxes.map(async (box) => ({
-          boxId: box.box_id,
-          response: await getTagBlocks(box.box_id),
-        }))
-      );
-      const next = {};
-      results.forEach(({ boxId, response }) => {
-        if (response.ok) {
-          next[boxId] = response.data.blocked || [];
-        }
-      });
-      setBlockedByBox(next);
-    }
-  }
-
-  async function handleSetTagMedia(uid) {
-    const mediaPath = dbTagMedia[uid] || '';
-    const response = await setTagMedia(uid, mediaPath);
-    if (!response.ok) {
-      setError(response.data.detail || 'Medium setzen fehlgeschlagen.');
-      addToast('error', response.data.detail || 'Medium setzen fehlgeschlagen.');
-      return;
-    }
-    const lastNfcUid = status?.last_nfc?.uid || '';
-    const shouldAssign =
-      selectedId &&
-      status?.last_nfc?.known === false &&
-      (lastNfcUid === uid || (!lastNfcUid && scanTagUid && scanTagUid === uid));
-    if (shouldAssign) {
-      const assigned = await assignTag(uid, selectedId);
-      if (!assigned.ok) {
-        setError(assigned.data.detail || 'Zuordnung fehlgeschlagen.');
-        addToast('error', assigned.data.detail || 'Zuordnung fehlgeschlagen.');
-        return;
-      }
-      addToast('success', 'Medium gespeichert und Tag zugeordnet.');
-    } else {
-      addToast('success', 'Medium gespeichert.');
-    }
-    const updatedTags = await getTags();
-    if (updatedTags.ok) {
-      setTags(updatedTags.data.tags || []);
-    }
-    if (selectedId) {
-      const updatedBoxTags = await getBoxTags(selectedId);
-      if (updatedBoxTags.ok) {
-        setBoxTags(updatedBoxTags.data.tags || []);
-      }
-    }
-    if (boxes.length) {
-      const results = await Promise.all(
-        boxes.map(async (box) => ({
-          boxId: box.box_id,
-          response: await getTagBlocks(box.box_id),
-        }))
-      );
-      const next = {};
-      results.forEach(({ boxId, response }) => {
-        if (response.ok) {
-          next[boxId] = response.data.blocked || [];
-        }
-      });
-      setBlockedByBox(next);
-    }
-  }
-
-  async function handleClearTagMedia(uid) {
-    const response = await setTagMedia(uid, '');
-    if (!response.ok) {
-      setError(response.data.detail || 'Medium entfernen fehlgeschlagen.');
-      addToast('error', response.data.detail || 'Medium entfernen fehlgeschlagen.');
-      return;
-    }
-    setError('');
-    addToast('success', 'Medienzuweisung entfernt.');
-    setDbTagMedia((prev) => ({ ...prev, [uid]: '' }));
-    const updatedTags = await getTags();
-    if (updatedTags.ok) {
-      setTags(updatedTags.data.tags || []);
-    }
-    if (selectedId) {
-      const updatedBoxTags = await getBoxTags(selectedId);
-      if (updatedBoxTags.ok) {
-        setBoxTags(updatedBoxTags.data.tags || []);
-      }
-    }
-    if (boxes.length) {
-      const results = await Promise.all(
-        boxes.map(async (box) => ({
-          boxId: box.box_id,
-          response: await getTagBlocks(box.box_id),
-        }))
-      );
-      const next = {};
-      results.forEach(({ boxId, response }) => {
-        if (response.ok) {
-          next[boxId] = response.data.blocked || [];
-        }
-      });
-      setBlockedByBox(next);
-    }
-  }
-
-  async function handleToggleTagBlock(boxId, uid, nextBlocked) {
-    const response = await setTagBlock(boxId, uid, nextBlocked);
-    if (!response.ok) {
-      addToast('error', response.data.detail || 'Tag-Sperre fehlgeschlagen.');
-      return;
-    }
-    setBlockedByBox((prev) => {
-      const current = new Set(prev[boxId] || []);
-      if (nextBlocked) {
-        current.add(uid);
-      } else {
-        current.delete(uid);
-      }
-      return { ...prev, [boxId]: Array.from(current) };
-    });
-    addToast(
-      'success',
-      nextBlocked ? 'Tag gesperrt.' : 'Tag freigegeben.'
-    );
-  }
-
-  async function handleSaveTagAlias(uid) {
-    const value = (tagAliasDrafts[uid] ?? '').trim();
-    const response = await setTagAlias(uid, value || null);
-    if (!response.ok) {
-      addToast('error', response.data.detail || 'Tag-Alias speichern fehlgeschlagen.');
-      return;
-    }
-    const updated = await getTags();
-    if (updated.ok) {
-      setTags(updated.data.tags || []);
-    }
-    addToast('success', 'Tag-Alias gespeichert.');
-  }
-
-  async function handleSaveBoxAlias(boxId) {
-    const value = (boxAliasDrafts[boxId] ?? '').trim();
-    const response = await setBoxAlias(boxId, value || null);
-    if (!response.ok) {
-      addToast('error', response.data.detail || 'Box-Alias speichern fehlgeschlagen.');
-      return;
-    }
-    const updated = await getBoxes();
-    if (updated.ok) {
-      setBoxes(updated.data.boxes || []);
-    }
-    addToast('success', 'Box-Alias gespeichert.');
-  }
-
-  const currentItems = mediaTree
-    ? listChildren(getNodeByPath(mediaTree, currentPath)).filter(
-      (item) => !(item.name || '').startsWith('.')
-    )
-    : [];
-  const showMeta = currentItems.some((item) => item.type === 'file');
-  const mediaBytes = mediaTree?.size ?? null;
-  const freeBytes = mediaTree?.free_bytes ?? null;
-  const systemStorage = useMemo(() => {
-    if (!mediaTree || mediaTree.size === undefined || mediaTree.free_bytes === undefined) {
-      return null;
-    }
-    const used = Math.max(0, mediaTree.size || 0);
-    const free = Math.max(0, mediaTree.free_bytes || 0);
-    const total = used + free;
-    const percent = total > 0 ? Math.min(100, Math.round((used / total) * 100)) : 0;
-    return { used, free, total, percent, scale: capacityScale(percent) };
-  }, [mediaTree]);
-
-  const activeMeta = useMemo(
-    () => NAV_ITEMS.find((item) => item.id === activeSection),
-    [activeSection]
-  );
-  const activeBoxLabel = useMemo(() => {
-    const activeBox = boxes.find((box) => box.box_id === selectedId);
-    return activeBox?.alias || activeBox?.box_id || '';
-  }, [boxes, selectedId]);
-  const activeNfc = useMemo(() => {
-    if (status?.last_nfc && status.last_nfc.known === false) {
-      return { ...status.last_nfc, at: status.last_nfc_at };
-    }
-    return simulatedNfc;
-  }, [status, simulatedNfc]);
-
-  const activeNfcKey = useMemo(
-    () => (activeNfc ? getNfcKey(activeNfc) : ''),
-    [activeNfc]
-  );
-
-  useEffect(() => {
-    if (!activeNfcKey) return;
-    if (tagWizardRestoredRef.current === activeNfcKey) return;
-    try {
-      const raw = sessionStorage.getItem('klangkiste_tag_wizard');
-      if (!raw) return;
-      const parsed = JSON.parse(raw);
-      if (!parsed || parsed.key !== activeNfcKey) return;
-      const data = parsed.data || {};
-      if (typeof data.scanTagUid === 'string') setScanTagUid(data.scanTagUid);
-      if (typeof data.scanTagLabel === 'string') setScanTagLabel(data.scanTagLabel);
-      if (typeof data.scanMediaPath === 'string') setScanMediaPath(data.scanMediaPath);
-      if (typeof data.tagUidMode === 'string') setTagUidMode(data.tagUidMode);
-      if (typeof data.tagStep === 'number') setTagStep(data.tagStep);
-      setTagStepOneDone(Boolean(data.tagStepOneDone));
-      setTagStepTwoDone(Boolean(data.tagStepTwoDone));
-      if (typeof data.tagStepMax === 'number') setTagStepMax(data.tagStepMax);
-      if (typeof data.tagUidError === 'string') setTagUidError(data.tagUidError);
-      if (data.lastHardwareUid?.uid || data.lastHardwareUid?.hardwareUid) {
-        setLastHardwareUid(data.lastHardwareUid);
-      }
-      if (!status?.last_nfc && data.simulatedNfc) {
-        setSimulatedNfc(data.simulatedNfc);
-      }
-      if (typeof data.dismissedNfcKey === 'string') {
-        setDismissedNfcKey(data.dismissedNfcKey);
-      }
-      tagWizardRestoredRef.current = activeNfcKey;
-    } catch (error) {
-      // ignore storage restore errors
-    }
-  }, [activeNfcKey, status?.last_nfc]);
-
-  useEffect(() => {
-    if (!activeNfcKey) return;
-    try {
-      const payload = {
-        key: activeNfcKey,
-        data: {
-          scanTagUid,
-          scanTagLabel,
-          scanMediaPath,
-          tagUidMode,
-          tagStep,
-          tagStepOneDone,
-          tagStepTwoDone,
-          tagStepMax,
-          tagUidError,
-          lastHardwareUid,
-          simulatedNfc,
-          dismissedNfcKey,
-        },
-      };
-      sessionStorage.setItem('klangkiste_tag_wizard', JSON.stringify(payload));
-    } catch (error) {
-      // ignore storage write errors
-    }
-  }, [
-    activeNfcKey,
-    scanTagUid,
-    scanTagLabel,
-    scanMediaPath,
-    tagUidMode,
-    tagStep,
-    tagStepOneDone,
-    tagStepTwoDone,
-    tagStepMax,
-    tagUidError,
-    lastHardwareUid,
-    simulatedNfc,
-    dismissedNfcKey,
-  ]);
-  const statusWithHardware = useMemo(() => {
-    if (!status) return null;
-    const hardwareUid =
-      lastHardwareUid.uid === status?.last_nfc?.uid && lastHardwareUid.hardwareUid
-        ? lastHardwareUid.hardwareUid
-        : activeNfc?.hardwareUid || null;
-    if (!status.last_nfc) return status;
-    return {
-      ...status,
-      last_nfc: {
-        ...status.last_nfc,
-        hardware_uid: hardwareUid,
-      },
-    };
-  }, [status, lastHardwareUid, activeNfc]);
-  const activeTag = useMemo(() => {
-    const uid = status?.last_nfc?.uid || activeNfc?.uid || '';
-    if (!uid) return null;
-    return tags.find((tag) => tag.uid === uid) || null;
-  }, [status, activeNfc, tags]);
-  const playlistRoot = activeTag?.media_path || '';
-  const playlistTitle = playlistRoot ? playlistRoot.split('/').filter(Boolean).pop() : '';
-  const playlistItems = useMemo(() => {
-    if (!mediaTree || !playlistRoot) return [];
-    const node = getNodeByPath(mediaTree, playlistRoot);
-    if (!node) return [];
-    const stack = [node];
-    const collected = [];
-    while (stack.length) {
-      const current = stack.pop();
-      if (!current) continue;
-      if (current.type === 'file') {
-        collected.push(current);
-        continue;
-      }
-      if (Array.isArray(current.children)) {
-        for (let i = current.children.length - 1; i >= 0; i -= 1) {
-          stack.push(current.children[i]);
-        }
-      }
-    }
-    return collected;
-  }, [mediaTree, playlistRoot]);
-  const playlistDuration = useMemo(() => {
-    if (!playlistItems.length) return 0;
-    return playlistItems.reduce((sum, item) => sum + (item.duration || 0), 0);
-  }, [playlistItems]);
-  const playbackState = status?.playback_state || {};
-  const currentIndex =
-    typeof playbackState.file_index === 'number' ? playbackState.file_index : null;
-  const currentTrack =
-    currentIndex !== null && playlistItems[currentIndex]
-      ? playlistItems[currentIndex]
-      : null;
-  const currentTitle =
-    currentTrack?.title ||
-    currentTrack?.name ||
-    (playbackState.current_file
-      ? playbackState.current_file.split('/').pop()
-      : '');
-  const currentArtist = currentTrack?.artist || '';
-  const playbackPosition =
-    typeof playbackState.position === 'number' ? playbackState.position : 0;
-  const playbackDuration =
-    typeof playbackState.duration === 'number' ? playbackState.duration : 0;
-  const playbackProgress =
-    playbackDuration > 0
-      ? Math.min(100, Math.round((playbackPosition / playbackDuration) * 100))
-      : 0;
-  const isPlaying = playbackState.state === 'PLAYING';
-  const volumeValue =
-    typeof playbackState.volume === 'number' ? playbackState.volume : null;
-
-  function handleSeekCommit(percent) {
-    if (!playbackDuration) return;
-    const targetSeconds = Math.round((percent / 100) * playbackDuration);
-    handlePlayerCommand('seek', { position: targetSeconds });
-  }
-
-  function handleVolumeCommit(nextValue) {
-    handlePlayerCommand('set_volume', { volume: nextValue });
-  }
-
-  useEffect(() => {
-    if (isSeeking) return;
-    setSeekPercent(playbackProgress);
-  }, [playbackProgress, isSeeking]);
-
-  useEffect(() => {
-    setIsSeeking(false);
-    setSeekPercent(playbackProgress);
-  }, [currentIndex, playbackProgress]);
-
-  useEffect(() => {
-    setVolumeDraft(volumeValue ?? 50);
-  }, [volumeValue]);
-
-  useEffect(() => {
-    if (!showVolume) return;
-    function handleOutside(event) {
-      if (!volumeRef.current) return;
-      if (volumeRef.current.contains(event.target)) return;
-      setShowVolume(false);
-    }
-    document.addEventListener('mousedown', handleOutside);
-    document.addEventListener('touchstart', handleOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleOutside);
-      document.removeEventListener('touchstart', handleOutside);
-    };
-  }, [showVolume]);
-
-  function renderSection() {
-    if (activeSection === 'dashboard') {
-      return (
-        <div className="section-stack">
-          <StatGrid items={dashboardStats} />
-          <div className="split-grid">
-            <Card className="wide-card">
-              <h3>Live-Status</h3>
-              {!selectedId && <p className="muted">Waehle eine gepairte Box aus.</p>}
-              {selectedId && !status && <p className="muted">Status wird geladen...</p>}
-              {status && status.error && <p className="error">{status.error}</p>}
-              {status && !status.error && (
-                <pre className="status">{JSON.stringify(statusWithHardware, null, 2)}</pre>
-              )}
-            </Card>
-            <Card className="wide-card">
-              <div className="player-shell">
-                <div className="player-header">
-                  <div className="player-cover" />
-                  <div className="player-meta">
-                    <h3>{currentTitle || playlistTitle || 'Playlist'}</h3>
-                    <p>{currentArtist || playlistRoot || 'Kein Medium zugeordnet'}</p>
-                    <div className="player-sub">
-                      <span>{playlistItems.length} Tracks</span>
-                      <span>{formatClock(playlistDuration)}</span>
-                    </div>
-                  </div>
-                  <div className="player-controls">
-                    <Button
-                      className="player-btn"
-                      icon="pi pi-step-backward"
-                      onClick={() => handlePlayerCommand('prev')}
-                      aria-label="Zurueck"
-                    />
-                    <Button
-                      className="player-btn primary"
-                      icon={isPlaying ? 'pi pi-pause' : 'pi pi-play'}
-                      onClick={() => handlePlayerCommand('play_pause')}
-                      aria-label={isPlaying ? 'Pause' : 'Play'}
-                    />
-                    <Button
-                      className="player-btn"
-                      icon="pi pi-step-forward"
-                      onClick={() => handlePlayerCommand('next')}
-                      aria-label="Weiter"
-                    />
-                    <Button
-                      className="player-btn"
-                      icon="pi pi-stop"
-                      onClick={() => handlePlayerCommand('stop')}
-                      aria-label="Stopp"
-                    />
-                    <div className="volume-wrap" ref={volumeRef}>
-                      <Button
-                        className="player-btn"
-                        icon="pi pi-volume-up"
-                        onClick={() => setShowVolume((prev) => !prev)}
-                        aria-label="Lautstaerke"
-                      />
-                      {showVolume && (
-                        <div className="volume-popover">
-                          <Slider
-                            orientation="vertical"
-                            min={0}
-                            max={100}
-                            step={1}
-                            value={volumeDraft}
-                            onChange={(event) => {
-                              setVolumeDraft(event.value ?? 0);
-                            }}
-                            onSlideEnd={(event) => {
-                              handleVolumeCommit(event.value ?? 0);
-                            }}
-                          />
-                          <span className="volume-label">{volumeDraft}</span>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                </div>
-                <div className="player-progress">
-                  <span>{formatClock(playbackPosition)}</span>
-                  <Slider
-                    value={seekPercent}
-                    min={0}
-                    max={100}
-                    step={1}
-                    onChange={(event) => {
-                      setSeekPercent(event.value ?? 0);
-                      setIsSeeking(true);
-                    }}
-                    onSlideEnd={(event) => {
-                      setIsSeeking(false);
-                      handleSeekCommit(event.value ?? 0);
-                    }}
-                  />
-                  <span>{formatClock(playbackDuration)}</span>
-                </div>
-                <div className="player-nfc">
-                  <InputText
-                    value={nfcUid}
-                    onChange={(event) => setNfcUid(event.target.value)}
-                    placeholder="UID_1"
-                    className="p-inputtext-sm"
-                  />
-                  <Button label="NFC on" onClick={() => handlePlayerCommand('nfc_on', { uid: nfcUid })} />
-                  <Button label="NFC off" onClick={() => handlePlayerCommand('nfc_off', { uid: nfcUid })} />
-                </div>
-                <div className="player-list">
-                  <div className="player-row header">
-                    <span>#</span>
-                    <span>Titel</span>
-                    <span>Interpret</span>
-                    <span>Dauer</span>
-                  </div>
-                  {playlistItems.length === 0 && (
-                    <div className="player-row empty">
-                      <span />
-                      <span>Keine Playlist gefunden.</span>
-                      <span />
-                      <span />
-                    </div>
-                  )}
-                  {playlistItems.map((track, index) => (
-                    <div
-                      key={track.path || track.name || index}
-                      className={`player-row${currentIndex === index ? ' active' : ''}`}
-                      onDoubleClick={(event) => {
-                        event.preventDefault();
-                        handlePlayerCommand('jump_to_index', { index });
-                      }}
-                      role="button"
-                      tabIndex={0}
-                      onKeyDown={(event) => {
-                        if (event.key === 'Enter') {
-                          handlePlayerCommand('jump_to_index', { index });
-                        }
-                      }}
-                    >
-                      <span>{index + 1}</span>
-                      <span>{track.title || track.name}</span>
-                      <span>{track.artist || '-'}</span>
-                      <span>{formatClock(track.duration)}</span>
-                    </div>
-                  ))}
-                </div>
-                <p className="muted">
-                  Steuerung ist nur moeglich, wenn die Box gepairt ist.
-                </p>
-              </div>
-            </Card>
-          </div>
-        </div>
-      );
-    }
-
-    if (activeSection === 'boxes') {
-      return (
-        <div className="section-stack legacy">
-          {unpaired.length > 0 && (
-            <Card className="panel-card">
-              <h3>Neue Boxen</h3>
-              {unpaired.map((box) => (
-                <div key={box.box_id} className="card">
-                  <div>
-                    <strong>{box.alias || box.box_id}</strong>
-                    <div className="meta">Zuletzt gesehen: {formatTime(box.last_seen)}</div>
-                    <div className="meta">Firmware: {box.firmware_version}</div>
-                    <div className="meta">ID: {box.box_id}</div>
-                  </div>
-                  <Button label="Pairen" onClick={() => handlePair(box.box_id)} />
-                </div>
-              ))}
-            </Card>
-          )}
-          <Card className="panel-card">
-            <h3>Gepairte Boxen</h3>
-            {paired.length === 0 && <p className="muted">Noch keine gepairten Boxen.</p>}
-            {paired.length > 0 && (
-              <div className="boxes-grid">
-                {paired.map((box) => (
-                  <div
-                    key={box.box_id}
-                    className={`card ${selectedId === box.box_id ? 'selected' : ''}`}
-                    onClick={() => setSelectedId(box.box_id)}
-                    role="button"
-                    tabIndex={0}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter') setSelectedId(box.box_id);
-                    }}
-                  >
-                    <div>
-                <div className="box-title">
-                  <strong>{box.alias || box.box_id}</strong>
-                  <span className="pill">{getAvailability(box.last_seen).label}</span>
-                </div>
-                      <div className="meta">Zuletzt gesehen: {formatTime(box.last_seen)}</div>
-                      <div className="meta">Capabilities: {parseCapabilities(box.capabilities_json)}</div>
-                      <div className="meta">ID: {box.box_id}</div>
-                    </div>
-                    <div className="stack box-actions">
-                      <div className="box-actions-row">
-                        <InputText
-                          className="alias-input p-inputtext-sm"
-                          placeholder="Alias"
-                          value={
-                            boxAliasDrafts[box.box_id] !== undefined
-                              ? boxAliasDrafts[box.box_id]
-                              : box.alias || ''
-                          }
-                          onClick={(event) => event.stopPropagation()}
-                          onChange={(event) => {
-                            event.stopPropagation();
-                            setBoxAliasDrafts((prev) => ({
-                              ...prev,
-                              [box.box_id]: event.target.value,
-                            }));
-                          }}
-                        />
-                        <Button
-                          className="icon-button"
-                          icon={<FloppyDisk size={16} />}
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            handleSaveBoxAlias(box.box_id);
-                          }}
-                          title="Alias speichern"
-                          aria-label="Alias speichern"
-                        />
-                        <Button
-                          className="icon-button danger"
-                          icon={<Trash size={16} />}
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            setBoxDeleteTarget(box.box_id);
-                          }}
-                          title="Unpair"
-                          aria-label="Unpair"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </Card>
-        </div>
-      );
-    }
-
-    if (activeSection === 'media') {
-      return (
-        <div className="section-stack legacy">
-          <Card className="panel-card">
-            <div className="panel-header">
-              <h3>Medien Explorer</h3>
-              <Button className="button-ghost" label="Refresh" onClick={handleMediaRefresh} />
-            </div>
-            {uploadInProgress && (
-              <div className="upload-status">
-                <span>{activeUploadLabel || 'Upload laeuft...'}</span>
-                <div className="upload-progress">
-                  <div style={{ width: `${uploadProgress}%` }} />
-                </div>
-              </div>
-            )}
-            <p className="muted">Ordnerverwaltung, Upload und Datei-Listen im Server-Medienordner.</p>
-            {mediaError && <p className="error">{mediaError}</p>}
-            {!mediaError && !mediaTree && <p className="muted">Medienliste wird geladen...</p>}
-            {!mediaError && mediaTree && (
-              <div className="explorer" ref={explorerRef}>
-                <div className="explorer-sidebar">
-                  <div className="explorer-toolbar sidebar-toolbar">
-                      <InputText
-                        className="sidebar-search p-inputtext-sm"
-                        type="search"
-                        placeholder="Suchen..."
-                        value={sidebarQuery}
-                        onChange={(event) => setSidebarQuery(event.target.value)}
-                        aria-label="Ordner suchen"
-                      />
-                  </div>
-                  <div className="sidebar-tree">
-                    {topLevelFolders.length === 0 && (
-                      <div className="muted">Keine Ordner gefunden.</div>
-                    )}
-                    {filteredTree && renderFolderTree(filteredTree, 0)}
-                  </div>
-                </div>
-                <div className="explorer-main">
-                  <div className="explorer-toolbar">
-                    <Button
-                      className="icon-button"
-                      icon={<ArrowUp size={16} />}
-                      onClick={handleGoUp}
-                      title="Hoch"
-                      aria-label="Hoch"
-                    />
-                    <div className="explorer-path">
-                      <span
-                        className="breadcrumb-root path-link"
-                        onClick={() => setCurrentPath('')}
-                        role="button"
-                        tabIndex={0}
-                        onKeyDown={(event) => {
-                          if (event.key === 'Enter') setCurrentPath('');
-                        }}
-                      >
-                        media
-                      </span>
-                      {buildBreadcrumb(currentPath).map((crumb) => (
-                        <span
-                          key={crumb.path}
-                          className="path-link"
-                          onClick={() => setCurrentPath(crumb.path)}
-                          role="button"
-                          tabIndex={0}
-                          onKeyDown={(event) => {
-                            if (event.key === 'Enter') setCurrentPath(crumb.path);
-                          }}
-                        >
-                          / {crumb.name}
-                        </span>
-                      ))}
-                    </div>
-                    <div className="toolbar-actions">
-                      <Button
-                        className="icon-button"
-                        icon={<Plus size={16} />}
-                        onClick={() => setActiveModal('new-folder')}
-                        title="Neuer Ordner"
-                        aria-label="Neuer Ordner"
-                      />
-                      <Button
-                        className="icon-button"
-                        icon={<PencilSimple size={16} />}
-                        onClick={() => setActiveModal('rename')}
-                        title="Umbenennen"
-                        disabled={selectedPaths.length !== 1}
-                        aria-label="Umbenennen"
-                      />
-                      <Button
-                        className="icon-button danger"
-                        icon={<Trash size={16} />}
-                        onClick={() => setActiveModal('delete')}
-                        title="Loeschen"
-                        disabled={selectedPaths.length === 0}
-                        aria-label="Loeschen"
-                      />
-                      <Button
-                        className="icon-button"
-                        icon={<ArrowRight size={16} />}
-                        onClick={() => {
-                          setMoveTarget('');
-                          setActiveModal('move');
-                        }}
-                        title="Verschieben"
-                        disabled={selectedPaths.length === 0}
-                        aria-label="Verschieben"
-                      />
-                      <Button
-                        className="icon-button upload"
-                        icon={<UploadSimple size={16} />}
-                        title="Upload"
-                        onClick={(event) => {
-                          event.preventDefault();
-                          event.stopPropagation();
-                          setUploadAfterCreate(true);
-                          setPendingUploadFiles([]);
-                          setNewFolderName('');
-                          setActiveModal('new-folder');
-                        }}
-                        aria-label="Upload"
-                      />
-                    </div>
-                  </div>
-                  <div className={`explorer-list ${showMeta ? 'has-meta' : ''}`}>
-                    <div className="explorer-row header">
-                      <span>Name</span>
-                      {showMeta ? (
-                        <>
-                          <span>Interpret</span>
-                          <span>Titel</span>
-                          <span>Laenge</span>
-                          <span>Groesse</span>
-                        </>
-                      ) : (
-                        <>
-                          <span>Typ</span>
-                          <span>Groesse</span>
-                        </>
-                      )}
-                    </div>
-                    {currentItems.map((item) => (
-                      <div
-                        key={item.path || item.name}
-                        className={`explorer-row ${
-                          isSelected(item.path) ? 'selected' : ''
-                        }`}
-                        onMouseDown={(event) => {
-                          if (event.button !== 0) return;
-                          if (event.metaKey || event.ctrlKey || event.shiftKey) {
-                            return;
-                          }
-                          dragSelectRef.current = true;
-                          handleSelect(item, event);
-                        }}
-                        onMouseEnter={() => handleDragSelect(item)}
-                        onClick={(event) => handleSelect(item, event)}
-                        onDoubleClick={(event) => {
-                          event.preventDefault();
-                          event.stopPropagation();
-                          lastDblClickRef.current = Date.now();
-                          handleOpen(item);
-                        }}
-                        role="button"
-                        tabIndex={0}
-                        onKeyDown={(event) => {
-                          if (event.key === 'Enter') handleOpen(item);
-                        }}
-                      >
-                        <span className="row-name">
-                          <span className="row-icon">
-                            {item.type === 'folder' ? (
-                              <Folder size={16} weight="fill" />
-                            ) : (
-                              <FileAudio size={16} />
-                            )}
-                          </span>
-                          {item.name}
-                        </span>
-                        {showMeta ? (
-                          <>
-                            <span>{item.type === 'folder' ? '-' : item.artist || '-'}</span>
-                            <span>{item.type === 'folder' ? '-' : item.title || '-'}</span>
-                            <span>
-                              {item.type === 'folder' ? '-' : formatDuration(item.duration)}
-                            </span>
-                            <span>{formatSize(item.size)}</span>
-                          </>
-                        ) : (
-                          <>
-                            <span>{item.type === 'folder' ? 'Ordner' : 'Datei'}</span>
-                            <span>{formatSize(item.size)}</span>
-                          </>
-                        )}
-                      </div>
-                    ))}
-                    {selectedPaths.length > 0 && (
-                      <div className="explorer-row footer">
-                        <span />
-                        {showMeta ? (
-                          <>
-                            <span />
-                            <span />
-                            <span />
-                            <span className="footer-count">
-                              {selectedPaths.length} ausgewaehlt
-                            </span>
-                          </>
-                        ) : (
-                          <>
-                            <span />
-                            <span className="footer-count">
-                              {selectedPaths.length} ausgewaehlt
-                            </span>
-                          </>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                </div>
-                <div className="explorer-footer">
-                  <span>
-                    Medienordner: {formatSize(mediaBytes)} · Verfuegbar:{' '}
-                    {formatSize(freeBytes)}
-                  </span>
-                </div>
-              </div>
-            )}
-          </Card>
-        </div>
-      );
-    }
-
-    if (activeSection === 'tags') {
-      return (
-        <div className="section-stack legacy">
-          {(localBoxError || localBoxTags.length > 0) && (
-            <Card className="panel-card">
-              <div className="panel-header">
-                <h3>Tags nur auf dieser Box</h3>
-              </div>
-              {localBoxError && <p className="error">{localBoxError}</p>}
-              {localBoxTags.map((tag) => (
-                <div key={tag.uid} className="box-tag-row">
-                  <div>
-                    <strong>{tag.uid}</strong>
-                    <div className="muted">
-                      Dateien: {tag.file_count} · {formatSize(tag.total_size)}
-                    </div>
-                    {tag.media_exists && tag.files?.length > 0 && (
-                      <ul className="file-list">
-                        {tag.files.map((file) => (
-                          <li key={file}>{file}</li>
-                        ))}
-                      </ul>
-                    )}
-                    {!tag.media_exists && (
-                      <p className="muted">Keine Dateien im Box-Ordner gefunden.</p>
-                    )}
-                  </div>
-                  <div className="box-tag-actions">
-                    <Button
-                      label="Auf Server uebertragen"
-                      onClick={() => {
-                        setImportTargetUid(tag.uid);
-                        setActiveModal('import-tag');
-                      }}
-                      disabled={!tag.media_exists}
-                    />
-                  </div>
-                </div>
-              ))}
-            </Card>
-          )}
-
-          <Card className="panel-card">
-            <h3>Tags (Datenbank)</h3>
-            {tags.length === 0 && <p className="muted">Keine Tags vorhanden.</p>}
-            {tags.length > 0 && (
-              <div className="tags-grid">
-                {tags.map((tag) => (
-                  <div key={tag.uid} className="card compact">
-                    <div className="tag-row">
-                      <div className="tag-info">
-                        <strong>
-                          {tag.alias ? `${tag.alias} (${tag.uid})` : tag.uid}
-                        </strong>
-                        <div className="meta">Status: {tag.status}</div>
-                        <div className="meta">Medium: {tag.media_path || '-'}</div>
-                        {tag.label ? <div className="meta">Label: {tag.label}</div> : null}
-                      </div>
-                      <div className="stack stack-inline tag-actions">
-                        <div className="tag-actions-row">
-                          <InputText
-                            className="alias-input p-inputtext-sm"
-                            placeholder="Alias"
-                            value={
-                              tagAliasDrafts[tag.uid] !== undefined
-                                ? tagAliasDrafts[tag.uid]
-                                : tag.alias || ''
-                            }
-                            onChange={(event) =>
-                              setTagAliasDrafts((prev) => ({
-                                ...prev,
-                                [tag.uid]: event.target.value,
-                              }))
-                            }
-                          />
-                          <Button
-                            className="icon-button"
-                            icon={<FloppyDisk size={16} />}
-                            onClick={() => handleSaveTagAlias(tag.uid)}
-                            title="Alias speichern"
-                            aria-label="Alias speichern"
-                          />
-                        </div>
-                        <div className="tag-actions-row">
-                          <Dropdown
-                            value={dbTagMedia[tag.uid] ?? tag.media_path ?? null}
-                            onChange={(event) =>
-                              setDbTagMedia((prev) => ({
-                                ...prev,
-                                [tag.uid]: event.value,
-                              }))
-                            }
-                            options={collectTopLevelFolders(mediaTree).map((folderPath) => ({
-                              label: folderPath,
-                              value: folderPath,
-                            }))}
-                            placeholder="Medienordner waehlen"
-                            filter
-                            className="p-inputtext-sm"
-                          />
-                          <Button
-                            className="icon-button danger"
-                            icon={<Trash size={16} />}
-                            onClick={() => {
-                              setTagDeleteTarget(tag.uid);
-                              setActiveModal('tag-delete');
-                            }}
-                            title="Loeschen"
-                            aria-label="Loeschen"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </Card>
-
-          <Card className="panel-card">
-            <h3>Tag-Matrix (Sperren)</h3>
-            {paired.length === 0 && (
-              <p className="muted">Keine gepairten Boxen vorhanden.</p>
-            )}
-            {tags.length === 0 && <p className="muted">Keine Tags vorhanden.</p>}
-            {paired.length > 0 && tags.length > 0 && (
-              <div className="tag-matrix">
-                <div className="matrix-row header">
-                  <span className="matrix-cell label">Tag</span>
-                  {paired.map((box) => (
-                    <span key={box.box_id} className="matrix-cell">
-                      {box.alias || box.box_id}
-                    </span>
-                  ))}
-                </div>
-                {tags.map((tag) => (
-                  <div key={tag.uid} className="matrix-row">
-                    <span className="matrix-cell label">{tag.alias || tag.uid}</span>
-                    {paired.map((box) => {
-                      const blocked = (blockedByBox[box.box_id] || []).includes(tag.uid);
-                      return (
-                        <Message
-                          key={box.box_id}
-                          className={`matrix-cell toggle${blocked ? ' is-blocked' : ''}`}
-                          severity={blocked ? 'error' : 'success'}
-                          text={blocked ? 'Gesperrt' : 'OK'}
-                          role="button"
-                          tabIndex={0}
-                          onClick={() =>
-                            handleToggleTagBlock(box.box_id, tag.uid, !blocked)
-                          }
-                          onKeyDown={(event) => {
-                            if (event.key === 'Enter' || event.key === ' ') {
-                              event.preventDefault();
-                              handleToggleTagBlock(box.box_id, tag.uid, !blocked);
-                            }
-                          }}
-                        />
-                      );
-                    })}
-                  </div>
-                ))}
-              </div>
-            )}
-          </Card>
-        </div>
-      );
-    }
-
-    return (
-      <div className="section-stack">
-        <Card className="wide-card">
-          <h3>System</h3>
-          <p>Backend: {import.meta.env.VITE_BACKEND_URL || 'http://127.0.0.1:5001'}</p>
-          <div className="settings-row">
-            <span>Gepairte Boxen</span>
-            <span>{paired.length}</span>
-          </div>
-          <div className="settings-row">
-            <span>Tags</span>
-            <span>{tags.length}</span>
-          </div>
-        </Card>
-      </div>
-    );
-  }
-
-  const systemPanels = (
-    <>
-      <Card className="panel-card">
-        <div className="card-title-row">
-          <h3>Live Status</h3>
-          <Tag value="Stable" severity="success" />
-        </div>
-        <p>System Health und wichtige Events.</p>
-        <div className="status-row">
-          <span>API</span>
-          <Tag value="OK" severity="success" />
-        </div>
-        <div className="status-row">
-          <span>Speicher</span>
-          <Tag value={mediaTree ? formatSize(mediaTree.free_bytes) : '-'} severity="warning" />
-        </div>
-        <div className="status-row">
-          <span>Letzter Sync</span>
-          <span>{status?.last_sync_at ? formatTime(status.last_sync_at) : '-'}</span>
-        </div>
-        <div className="status-row">
-          <span>Hardware-UID</span>
-          <span>
-            {lastHardwareUid.uid === status?.last_nfc?.uid && lastHardwareUid.hardwareUid
-              ? lastHardwareUid.hardwareUid
-              : activeNfc?.hardwareUid || '-'}
-          </span>
-        </div>
-      </Card>
-      <Card className="panel-card">
-        <h3>Speicherkapazitaet</h3>
-        <div className="capacity-row">
-          <div className="capacity-header">
-            <strong>System</strong>
-            <span>
-              {systemStorage
-                ? `${formatSize(systemStorage.used)} / ${formatSize(systemStorage.total)}`
-                : '-'}
-            </span>
-          </div>
-          <MeterGroup
-            className="capacity-bar"
-            values={[{ label: '', value: systemStorage?.percent || 0 }]}
-            style={{ '--capacity-scale': systemStorage?.scale || 1 }}
-          />
-          <div className="capacity-meta">
-            Frei: {systemStorage ? formatSize(systemStorage.free) : '-'}
-          </div>
-        </div>
-        <Divider />
-        {boxes.length === 0 && <p className="muted">Keine Boxen verbunden.</p>}
-        {boxes.map((box) => {
-          const storage = boxStorage[box.box_id] || null;
-          const used = storage?.used ?? null;
-          const free = storage?.free ?? null;
-          const total = storage?.total ?? null;
-          const totalValue =
-            total !== null ? total : used !== null && free !== null ? used + free : null;
-          const usedValue =
-            used !== null ? used : totalValue !== null && free !== null ? totalValue - free : null;
-          const percent =
-            totalValue && usedValue !== null
-              ? Math.min(100, Math.round((usedValue / totalValue) * 100))
-              : 0;
-          const scale = capacityScale(percent);
-          return (
-            <div key={box.box_id} className="capacity-row">
-              <div className="capacity-header">
-                <strong>{box.alias || box.box_id}</strong>
-                <span>
-                  {totalValue !== null && usedValue !== null
-                    ? `${formatSize(usedValue)} / ${formatSize(totalValue)}`
-                    : '-'}
-                </span>
-              </div>
-              <MeterGroup
-                className="capacity-bar"
-                values={[{ label: '', value: percent }]}
-                style={{ '--capacity-scale': scale }}
-              />
-              <div className="capacity-meta">
-                {free !== null ? `Frei: ${formatSize(free)}` : 'Keine Kapazitaet gemeldet'}
-              </div>
-            </div>
-          );
-        })}
-      </Card>
-    </>
-  );
-
-  return (
-    <div className="app-shell">
-      <header className="topbar">
-        <div className="brand">
-          <div className="brand-mark">K</div>
-          <div>
-            <strong>Klangkiste</strong>
-            <span>PrimeReact GUI</span>
-          </div>
-        </div>
-        {selectedId && (
-          <div className="header-box-indicator">
-            <i className="pi pi-check-circle" />
-            <span>{activeBoxLabel || selectedId}</span>
-          </div>
-        )}
-        <div className="topbar-actions">
-          <Button icon="pi pi-bell" text rounded aria-label="Benachrichtigungen" />
-          <Avatar label="MK" shape="circle" className="user-avatar" />
-        </div>
-      </header>
-
-      <Toast ref={toastRef} position="top-right" />
-
-      <div className="layout">
-        <aside className="sidebar">
-          <div className="sidebar-section">
-            <p className="sidebar-title">Navigation</p>
-            <div className="nav-list">
-              {NAV_ITEMS.map((item) => {
-                const Icon = item.icon;
-                const iconProp = typeof Icon === 'string' ? Icon : <Icon size={16} />;
-                return (
-                  <Button
-                    key={item.id}
-                    label={item.label}
-                    icon={iconProp}
-                    text
-                    className={`nav-button${activeSection === item.id ? ' active' : ''}`}
-                    onClick={() => setActiveSection(item.id)}
-                  />
-                );
-              })}
-            </div>
-          </div>
-          <Divider />
-          {/* <div className="sidebar-section">
-            <p className="sidebar-title">Quick Actions</p>
-            <div className="button-stack">
-              <Button label="NFC Tag erstellen" icon="pi pi-plus" className="p-button-sm" />
-              <Button label="Upload starten" icon="pi pi-upload" outlined className="p-button-sm" />
-              <Button label="Box koppeln" icon="pi pi-link" text className="p-button-sm" />
-            </div>
-          </div>
-          <Divider /> */}
-          <div className="sidebar-section">
-            <p className="sidebar-title">Aktive Sessions</p>
-            {paired.length === 0 && (
-              <p className="muted">Keine gepairten Boxen.</p>
-            )}
-            <div className="session-list">
-              {paired.map((box) => {
-                const isActive = selectedId === box.box_id;
-                const label = (box.alias || box.box_id || '').slice(0, 2).toUpperCase();
-                const availability = getAvailability(box.last_seen);
-                return (
-                  <Button
-                    key={box.box_id}
-                    className={`session-card${isActive ? ' active' : ''}`}
-                    onClick={() => setSelectedId(box.box_id)}
-                    title={`Aktiv setzen: ${box.alias || box.box_id}`}
-                  >
-                    <Avatar label={label || 'BX'} shape="circle" />
-                    <div>
-                      <strong>{box.alias || box.box_id}</strong>
-                      {isActive && <span className="meta">Aktiv</span>}
-                    </div>
-                    <Tag value={availability.label} severity={availability.severity} rounded />
-                  </Button>
-                );
-              })}
-            </div>
-          </div>
-        </aside>
-
-        <main className="content">
-          <SectionHeader
-            title={activeMeta?.label || 'Bereich'}
-            subtitle="Live Daten und Steuerung der Klangkiste."
-          />
-          {error && <div className="error">{error}</div>}
-          {activeNfc && dismissedNfcKey !== getNfcKey(activeNfc) && (
-            <div className="legacy">
-              <Card className="panel-card">
-                <h3>
-                  {activeNfc.uid &&
-                  tags.find((tag) => tag.uid === activeNfc.uid && !tag.media_path)
-                    ? 'Leerer Tag erkannt'
-                    : 'Neuer Tag erkannt'}
-                </h3>
-                <p className="muted">
-                  {activeNfc.uid ? (
-                    <>
-                      UID erkannt: <strong>{activeNfc.uid}</strong>
-                    </>
-                  ) : (
-                    <>keine UID erkannt</>
-                  )}
-                </p>
-                {activeNfc.uid &&
-                lastHardwareUid.uid === activeNfc.uid &&
-                lastHardwareUid.hardwareUid && (
-                  <p className="muted">
-                    Hardware-UID erkannt: <strong>{lastHardwareUid.hardwareUid}</strong>
-                  </p>
-                )}
-                {!activeNfc.uid && activeNfc.hardwareUid && (
-                  <p className="muted">
-                    Hardware-UID erkannt: <strong>{activeNfc.hardwareUid}</strong>
-                  </p>
-                )}
-                {activeNfc.uid && tags.find((tag) => tag.uid === activeNfc.uid) && (
-                  <p className="muted">
-                    Dieser Tag ist bekannt, aber noch nicht zugewiesen.
-                  </p>
-                )}
-                <div className="step-messages">
-                  <Messages ref={tagUidMsgRef} />
-                  <Messages ref={mediaMsgRef} />
-                </div>
-                <Stepper
-                  linear={false}
-                  ref={tagStepperRef}
-                  onChangeStep={(event) => {
-                    if (event.index <= tagStepMax) {
-                      setTagStep(event.index);
-                      return;
-                    }
-                    tagStepperRef.current?.setActiveStep(tagStep);
-                  }}
-                >
-                  <StepperPanel header="IDs">
-                    <div className="controls">
-                      <div className="step-row">
-                        <InputText
-                          value={scanTagUid}
-                          onChange={(event) => setScanTagUid(event.target.value)}
-                          readOnly={tagUidMode === 'keep'}
-                          placeholder="Tag-ID (10 Zeichen)"
-                          className="p-inputtext-sm"
-                        />
-                        <Button
-                          label="Neue UID vergeben"
-                          size="small"
-                          outlined={tagUidMode !== 'new'}
-                          onClick={() => {
-                            setTagUidMode('new');
-                            setScanTagUid(generateTagId());
-                          }}
-                        />
-                        <span className="step-row-spacer" />
-                        <Button
-                          label="Weiter zu Medien"
-                          size="small"
-                          onClick={() => {
-                            const uid = scanTagUid.trim();
-                            if (!isValidTagUid(uid)) {
-                              setTagUidError(
-                                'UID ungueltig. Bitte 10 Zeichen (a-z, 0-9) oder TAG_ + 8 Zeichen verwenden.'
-                              );
-                              return;
-                            }
-                          if (tagUidError && tagUidError !== autoReplaceMsg) {
-                            setTagUidError('');
-                          }
-                            setTagStepOneDone(true);
-                            setTagStepMax(1);
-                            setTagStep(1);
-                          }}
-                        />
-                      </div>
-                      <InputText
-                        value={scanTagLabel}
-                        onChange={(event) => setScanTagLabel(event.target.value)}
-                        placeholder="Label (optional)"
-                        className="p-inputtext-sm is-hidden"
-                      />
-                    </div>
-                  </StepperPanel>
-                  <StepperPanel header="Medienzuordnung">
-                    <div className="controls">
-                      <div className="step-row">
-                        <Dropdown
-                          value={scanMediaPath}
-                          onChange={(event) => setScanMediaPath(event.value)}
-                          options={collectTopLevelFolders(mediaTree).map((folderPath) => ({
-                            label: folderPath,
-                            value: folderPath,
-                          }))}
-                          placeholder="Medienordner waehlen"
-                          filter
-                          className="p-inputtext-sm"
-                          disabled={!tagStepOneDone}
-                        />
-                        <span className="step-row-spacer" />
-                        <Button
-                          label="Weiter zur Anlage"
-                          size="small"
-                          disabled={!tagStepOneDone}
-                          onClick={() => {
-                            setTagStepTwoDone(true);
-                            setTagStepMax(2);
-                            setTagStep(2);
-                          }}
-                        />
-                      </div>
-                    </div>
-                  </StepperPanel>
-                  <StepperPanel header="Anlage">
-                    <div className="controls">
-                      <div className="summary">
-                        <p className="summary-title">Zusammenfassung</p>
-                        <div className="summary-grid">
-                          <span>System-UID</span>
-                          <strong>{scanTagUid || '-'}</strong>
-                          <span>UID-Modus</span>
-                          <strong>{tagUidMode === 'keep' ? 'Beibehalten' : 'Neu vergeben'}</strong>
-                          <span>Label</span>
-                          <strong>{scanTagLabel?.trim() || '-'}</strong>
-                          <span>Medienordner</span>
-                          <strong>{scanMediaPath || 'Spaeter zuordnen'}</strong>
-                          <span>Hardware-UID</span>
-                          <strong>
-                            {lastHardwareUid.uid === activeNfc?.uid && lastHardwareUid.hardwareUid
-                              ? lastHardwareUid.hardwareUid
-                              : activeNfc?.hardwareUid || '-'}
-                          </strong>
-                        </div>
-                      </div>
-                      <div className="step-actions">
-                        <Button
-                          label="Daten zum Tag speichern"
-                          size="small"
-                          disabled={!tagStepOneDone || !tagStepTwoDone}
-                          onClick={handleClaimTagForScan}
-                        />
-                      </div>
-                    </div>
-                  </StepperPanel>
-                </Stepper>
-                {tags.some((tag) => tag.status === 'IMPORTED') && (
-                  <div className="controls">
-                    <select className="p-inputtext-sm"
-                      value={reuseTagUid}
-                      onChange={(event) => setReuseTagUid(event.target.value)}
-                    >
-                      <option value="" disabled>
-                        Gespeicherte Tag-ID waehlen
-                      </option>
-                      {tags
-                        .filter((tag) => tag.status === 'IMPORTED')
-                        .map((tag) => (
-                          <option key={tag.uid} value={tag.uid}>
-                            {tag.alias ? `${tag.alias} (${tag.uid})` : tag.uid}
-                          </option>
-                        ))}
-                    </select>
-                    <Button
-                      label="Vorhandene ID schreiben"
-                      size="small"
-                      onClick={handleReuseImportedTag}
-                    />
-                  </div>
-                )}
-            </Card>
-          </div>
-          )}
-          {renderSection()}
-        </main>
-
-        <aside className="right-panel">{systemPanels}</aside>
-      </div>
-
-      <nav className="bottom-nav">
-        {NAV_ITEMS.map((item) => {
-          const Icon = item.icon;
-          return (
-            <Button
-              key={item.id}
-              className={activeSection === item.id ? 'active' : ''}
-              onClick={() => setActiveSection(item.id)}
-            >
-              {typeof Icon === 'string' ? (
-                <i className={Icon} />
-              ) : (
-                <span className="nav-icon">
-                  <Icon size={18} />
-                </span>
-              )}
-              <span>{item.label}</span>
-            </Button>
-          );
-        })}
-        <Button
-          className="bottom-action"
-          onClick={() => setShowSessionSheet(true)}
-        >
-          <span className="nav-icon">
-            <Wrench size={18} />
-          </span>
-          <span>ToolHub</span>
-        </Button>
-      </nav>
-
-      {activeModal === 'new-folder' && (
-        <div
-          className="modal-backdrop"
-          onClick={() => {
-            setActiveModal('');
-            setUploadAfterCreate(false);
-            setPendingUploadFiles([]);
-            setUploadSize(0);
-            setUploadNameError('');
-            setTagDeleteTarget('');
-          }}
-        >
-          <div
-            className="modal-card modal-upload"
-            onClick={(event) => event.stopPropagation()}
-            ref={modalRef}
-          >
-            <h3>{uploadAfterCreate ? 'Upload vorbereiten' : 'Neuen Ordner anlegen'}</h3>
-            <InputText
-              value={newFolderName}
-              onChange={(event) => {
-                setNewFolderName(event.target.value);
-                if (uploadNameError) setUploadNameError('');
-              }}
-              placeholder={
-                uploadAfterCreate && !currentPath
-                  ? 'Ordnername'
-                  : uploadAfterCreate
-                    ? 'Optionaler Ordnername (leer = aktueller Ordner)'
-                    : 'Ordnername'
-              }
-              className="p-inputtext-sm"
-            />
-            {uploadAfterCreate && uploadNameError && (
-              <p className="error">{uploadNameError}</p>
-            )}
-            {uploadAfterCreate && (
-              <>
-                <FileUpload
-                  ref={fileUploadRef}
-                  name="files[]"
-                  multiple
-                  accept="audio/*"
-                  customUpload
-                  auto={false}
-                  disabled={uploadInProgress}
-                  chooseOptions={{ icon: 'pi pi-file-arrow-up', iconOnly: true, className: 'p-button-rounded p-button-outlined' }}
-                  uploadOptions={{ icon: 'pi pi-cloud-upload', iconOnly: true, className: 'p-button-success p-button-rounded p-button-outlined' }}
-                  cancelOptions={{ icon: 'pi pi-times', iconOnly: true, className: 'p-button-danger p-button-rounded p-button-outlined' }}
-                  headerTemplate={fileHeaderTemplate}
-                  itemTemplate={fileItemTemplate}
-                  onSelect={(event) => {
-                    const audioFiles = (event.files || []).filter((file) =>
-                      file.type.startsWith('audio/')
-                    );
-                    setPendingUploadFiles(audioFiles);
-                    const nextSize = audioFiles.reduce((sum, file) => sum + file.size, 0);
-                    setUploadSize(nextSize);
-                    setActiveUploadLabel(
-                      audioFiles.length
-                        ? `Upload: ${audioFiles.length} Datei(en)`
-                        : ''
-                    );
-                  }}
-                  uploadHandler={(event) => {
-                    const audioFiles = (event.files || []).filter((file) =>
-                      file.type.startsWith('audio/')
-                    );
-                    setPendingUploadFiles(audioFiles);
-                    const nextSize = audioFiles.reduce((sum, file) => sum + file.size, 0);
-                    setUploadSize(nextSize);
-                    setActiveUploadLabel(
-                      audioFiles.length
-                        ? `Upload: ${audioFiles.length} Datei(en)`
-                        : ''
-                    );
-                    handleCreateFolder(audioFiles);
-                  }}
-                  onClear={() => {
-                    setPendingUploadFiles([]);
-                    setUploadSize(0);
-                  }}
-                  emptyTemplate={
-                    <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column', gap: '0.75rem' }}>
-                      <i className="pi pi-file-arrow-up" style={{ fontSize: '5em' }} />
-                      <span style={{ fontSize: '1.2em', color: 'var(--text-color-secondary)' }}>
-                        Drag and Drop Audio Here
-                      </span>
-                      <div className="upload-item-footer">
-                        <span className="upload-item-total">Gesamt: {formatSize(uploadSize)}</span>
-                      </div>
-                    </div>
-                  }
-                />
-                {pendingUploadFiles.length > 0 && (
-                  <div className="upload-item-footer">
-                    <span className="upload-item-total">Gesamt: {formatSize(uploadSize)}</span>
-                    <span className="upload-item-count">
-                      {pendingUploadFiles.length} Datei(en)
-                    </span>
-                  </div>
-                )}
-              </>
-            )}
-            <div className="modal-actions">
-              <Button
-                className="button-ghost"
-                label="Abbrechen"
-                onClick={() => {
-                  setActiveModal('');
-                  setUploadAfterCreate(false);
-                  setPendingUploadFiles([]);
-                  setUploadSize(0);
-                  setUploadNameError('');
-                  setTagDeleteTarget('');
-                }}
-              />
-              <Button
-                label={uploadAfterCreate ? 'Upload starten' : 'Ordner anlegen'}
-                onClick={() => {
-                  if (uploadAfterCreate) {
-                    setActiveModal('');
-                  }
-                  handleCreateFolder();
-                }}
-              />
-            </div>
-          </div>
-        </div>
-      )}
-
-      {activeModal === 'rename' && (
-        <div
-          className="modal-backdrop"
-          onClick={() => {
-            setActiveModal('');
-            setRenameName('');
-          }}
-        >
-          <div
-            className="modal-card modal-tag-delete"
-            onClick={(event) => event.stopPropagation()}
-            ref={modalRef}
-          >
-            <h3>Umbenennen</h3>
-            <InputText
-              value={renameName}
-              onChange={(event) => setRenameName(event.target.value)}
-              placeholder="Neuer Name"
-              className="p-inputtext-sm"
-            />
-            <div className="modal-actions">
-              <Button
-                className="button-ghost"
-                label="Abbrechen"
-                onClick={() => {
-                  setActiveModal('');
-                  setRenameName('');
-                }}
-              />
-              <Button label="Speichern" onClick={handleRename} />
-            </div>
-          </div>
-        </div>
-      )}
-
-      {activeModal === 'delete' && (
-        <div
-          className="modal-backdrop"
-          onClick={() => {
-            setActiveModal('');
-          }}
-        >
-          <div
-            className="modal-card"
-            onClick={(event) => event.stopPropagation()}
-            ref={modalRef}
-          >
-            <h3>Eintraege loeschen</h3>
-            <p className="muted">{selectedPaths.length} Eintraege werden geloescht.</p>
-            <div className="modal-actions">
-              <Button className="button-ghost" label="Abbrechen" onClick={() => setActiveModal('')} />
-              <Button severity="danger" onClick={handleDeleteSelected} label="Loeschen" />
-            </div>
-          </div>
-        </div>
-      )}
-
-      {activeModal === 'move' && (
-        <div
-          className="modal-backdrop"
-          onClick={() => {
-            setActiveModal('');
-            setMoveTarget('');
-          }}
-        >
-          <div
-            className="modal-card"
-            onClick={(event) => event.stopPropagation()}
-            ref={modalRef}
-          >
-            <h3>Verschieben</h3>
-            <Dropdown
-              value={moveTarget || null}
-              onChange={(event) => setMoveTarget(event.value)}
-              options={[
-                { label: 'media/', value: '__root__' },
-                ...collectFolderPaths(mediaTree).map((folder) => ({
-                  label: folder,
-                  value: folder,
-                })),
-              ]}
-              placeholder="Zielordner waehlen"
-              filter
-              className="p-inputtext-sm"
-            />
-            <div className="modal-actions">
-              <Button
-                className="button-ghost"
-                label="Abbrechen"
-                onClick={() => {
-                  setActiveModal('');
-                  setMoveTarget('');
-                }}
-              />
-              <Button label="Verschieben" onClick={handleMoveSelected} />
-            </div>
-          </div>
-        </div>
-      )}
-
-      {activeModal === 'tag-delete' && (
-        <div
-          className="modal-backdrop"
-          onClick={() => {
-            setActiveModal('');
-            setTagDeleteTarget('');
-          }}
-        >
-          <div
-            className="modal-card"
-            onClick={(event) => event.stopPropagation()}
-            ref={modalRef}
-          >
-            <h3>Tag entfernen</h3>
-            <p className="muted">
-              Soll der Tag komplett geloescht werden oder nur die Medienzuweisung?
-            </p>
-            <div className="modal-actions">
-              <Button
-                className="button-ghost"
-                label="Abbrechen"
-                onClick={() => {
-                  setActiveModal('');
-                  setTagDeleteTarget('');
-                }}
-              />
-              <Button
-                label="Nur Medienzuordnung entfernen"
-                className="modal-long-button"
-                onClick={async () => {
-                  if (!tagDeleteTarget) return;
-                  await handleClearTagMedia(tagDeleteTarget);
-                  setTagDeleteTarget('');
-                  setActiveModal('');
-                }}
-              />
-              <Button
-                severity="danger"
-                label="Tag loeschen"
-                className="modal-long-button"
-                onClick={async () => {
-                  if (!tagDeleteTarget) return;
-                  await handleClearTagMedia(tagDeleteTarget);
-                  await handleDeleteTag(tagDeleteTarget);
-                  setTagDeleteTarget('');
-                  setActiveModal('');
-                }}
-              />
-            </div>
-          </div>
-        </div>
-      )}
-
-      {boxDeleteTarget && (
-        <div
-          className="modal-backdrop"
-          onClick={() => setBoxDeleteTarget('')}
-        >
-          <div
-            className="modal-card"
-            onClick={(event) => event.stopPropagation()}
-            ref={modalRef}
-          >
-            <h3>Box entfernen</h3>
-            <p className="muted">Soll die Box wirklich entkoppelt werden?</p>
-            <div className="modal-actions">
-              <Button
-                className="button-ghost"
-                label="Abbrechen"
-                onClick={() => setBoxDeleteTarget('')}
-              />
-              <Button
-                severity="danger"
-                label="Box entfernen"
-                onClick={async () => {
-                  if (!boxDeleteTarget) return;
-                  await handleUnpair(boxDeleteTarget);
-                  setBoxDeleteTarget('');
-                }}
-              />
-            </div>
-          </div>
-        </div>
-      )}
-
-      {activeModal === 'import-tag' && (
-        <div className="modal-backdrop" role="presentation">
-          <div className="modal-card" ref={modalRef}>
-            <div className="modal-header">
-              <h3>Tag vom Box-Speicher uebertragen</h3>
-            </div>
-            <div className="modal-body">
-              <label className="modal-label" htmlFor="import-folder">
-                Neuer Ordnername auf dem Server
-              </label>
-              <InputText
-                id="import-folder"
-                value={importTargetFolder}
-                onChange={(event) => setImportTargetFolder(event.target.value)}
-                placeholder="z. B. grimm_volume_3"
-                className="p-inputtext-sm"
-              />
-              {uploadInProgress && (
-                <div className="upload-progress">
-                  <div style={{ width: `${uploadProgress}%` }} />
-                </div>
-              )}
-            </div>
-            <div className="modal-actions">
-              <Button
-                className="button-ghost"
-                label="Abbrechen"
-                onClick={() => {
-                  setActiveModal('');
-                  setImportTargetFolder('');
-                  setImportTargetUid('');
-                }}
-              />
-              <Button label="Uebertragen" onClick={handlePullTagFromBox} />
-            </div>
-          </div>
-        </div>
-      )}
-
-      {showSessionSheet && (
-        <div
-          className="sheet-backdrop"
-          onClick={() => setShowSessionSheet(false)}
-        >
-          <div
-            className="sheet-card"
-            onClick={(event) => event.stopPropagation()}
-          >
-            <div className="sheet-header">
-              <strong>ToolHub</strong>
-              <Button
-                className="icon-button"
-                icon="pi pi-times"
-                onClick={() => setShowSessionSheet(false)}
-                aria-label="Schliessen"
-              />
-            </div>
-            {drawerTab === 'boxes' && (
-              <>
-                {paired.length === 0 && (
-                  <p className="muted">Keine gepairten Boxen.</p>
-                )}
-                <div className="session-list">
-                  {paired.map((box) => {
-                    const isActive = selectedId === box.box_id;
-                    const label = (box.alias || box.box_id || '').slice(0, 2).toUpperCase();
-                    const availability = getAvailability(box.last_seen);
-                    return (
-                      <Button
-                        key={box.box_id}
-                        className={`session-card${isActive ? ' active' : ''}`}
-                        onClick={() => {
-                          setSelectedId(box.box_id);
-                          setShowSessionSheet(false);
-                        }}
-                      >
-                        <Avatar label={label || 'BX'} shape="circle" />
-                        <div>
-                          <strong>{box.alias || box.box_id}</strong>
-                          {isActive && <span className="meta">Aktiv</span>}
-                        </div>
-                        <Tag value={availability.label} severity={availability.severity} rounded />
-                      </Button>
-                    );
-                  })}
-                </div>
-              </>
-            )}
-            {drawerTab === 'system' && (
-              <div className="drawer-system">{systemPanels}</div>
-            )}
-            <div className="drawer-tabs">
-              <Button
-                className={`drawer-tab${drawerTab === 'boxes' ? ' active' : ''}`}
-                onClick={() => setDrawerTab('boxes')}
-              >
-                <span className="nav-icon">
-                  <Cube size={18} />
-                </span>
-                <span>Boxen</span>
-              </Button>
-              <Button
-                className={`drawer-tab${drawerTab === 'system' ? ' active' : ''}`}
-                onClick={() => setDrawerTab('system')}
-              >
-                <span className="nav-icon">
-                  <GearSix size={18} />
-                </span>
-                <span>System</span>
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/klang/api.js b/klang/api.js
deleted file mode 100644
index 6fc0a95..0000000
--- a/klang/api.js
+++ /dev/null
@@ -1,244 +0,0 @@
-const defaultHost =
-  typeof window !== 'undefined' && window.location ? window.location.hostname : '127.0.0.1';
-const API_BASE = '/api';
-
-async function readJson(response) {
-  const text = await response.text();
-  try {
-    return { ok: response.ok, status: response.status, data: JSON.parse(text) };
-  } catch (error) {
-    return { ok: response.ok, status: response.status, data: { detail: text } };
-  }
-}
-
-export async function getBoxes() {
-  const response = await fetch(`${API_BASE}/boxes`);
-  return readJson(response);
-}
-
-export async function pairBox(boxId) {
-  const response = await fetch(`${API_BASE}/boxes/pair`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ box_id: boxId }),
-  });
-  return readJson(response);
-}
-
-export async function getStatus(boxId) {
-  const response = await fetch(`${API_BASE}/boxes/${boxId}/status`);
-  return readJson(response);
-}
-
-export async function getMediaTree() {
-  const response = await fetch(`${API_BASE}/media-tree`);
-  return readJson(response);
-}
-
-export async function createMediaFolder(parentPath, name) {
-  const response = await fetch(`${API_BASE}/media/folder`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ parent_path: parentPath, name }),
-  });
-  return readJson(response);
-}
-
-export async function renameMedia(path, name) {
-  const response = await fetch(`${API_BASE}/media/rename`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ path, name }),
-  });
-  return readJson(response);
-}
-
-export async function moveMedia(path, targetParent) {
-  const response = await fetch(`${API_BASE}/media/move`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ path, target_parent: targetParent }),
-  });
-  return readJson(response);
-}
-
-export async function deleteMedia(path) {
-  const response = await fetch(`${API_BASE}/media/delete`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ path }),
-  });
-  return readJson(response);
-}
-
-export function uploadMedia(targetPath, files, onProgress) {
-  const formData = new FormData();
-  formData.append('target_path', targetPath);
-  files.forEach((file) => {
-    formData.append('files', file);
-  });
-
-  return new Promise((resolve) => {
-    const request = new XMLHttpRequest();
-    request.open('POST', `${API_BASE}/media/upload`);
-    request.upload.onprogress = (event) => {
-      if (!event.lengthComputable || !onProgress) return;
-      const percent = Math.round((event.loaded / event.total) * 100);
-      onProgress(percent);
-    };
-    request.onload = () => {
-      try {
-        const data = JSON.parse(request.responseText || '{}');
-        resolve({ ok: request.status >= 200 && request.status < 300, status: request.status, data });
-      } catch (error) {
-        resolve({
-          ok: request.status >= 200 && request.status < 300,
-          status: request.status,
-          data: { detail: request.responseText || '' },
-        });
-      }
-    };
-    request.onerror = () => {
-      resolve({ ok: false, status: 0, data: { detail: 'network error' } });
-    };
-    request.send(formData);
-  });
-}
-
-export async function getTags() {
-  const response = await fetch(`${API_BASE}/tags`);
-  return readJson(response);
-}
-
-export async function generateTag(label) {
-  const response = await fetch(`${API_BASE}/tags/generate`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ label }),
-  });
-  return readJson(response);
-}
-
-export async function claimTag(uid, label) {
-  const response = await fetch(`${API_BASE}/tags/claim`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ uid, label }),
-  });
-  return readJson(response);
-}
-
-export async function markTagWritten(uid) {
-  const response = await fetch(`${API_BASE}/tags/${uid}/write`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-  });
-  return readJson(response);
-}
-
-export async function getBoxTags(boxId) {
-  const response = await fetch(`${API_BASE}/boxes/${boxId}/tags`);
-  return readJson(response);
-}
-
-export async function getBoxLocalTags(boxId) {
-  const response = await fetch(`${API_BASE}/boxes/${boxId}/local-tags`);
-  return readJson(response);
-}
-
-export async function getBoxStorage(boxId) {
-  const response = await fetch(`${API_BASE}/boxes/${boxId}/storage`);
-  return readJson(response);
-}
-
-export async function getTagBlocks(boxId) {
-  const response = await fetch(`${API_BASE}/boxes/${boxId}/tag-blocks`);
-  return readJson(response);
-}
-
-export async function setTagBlock(boxId, uid, blocked) {
-  const response = await fetch(`${API_BASE}/boxes/${boxId}/tag-blocks`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ uid, blocked }),
-  });
-  return readJson(response);
-}
-
-export async function setBoxAlias(boxId, alias) {
-  const response = await fetch(`${API_BASE}/boxes/${boxId}/alias`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ alias }),
-  });
-  return readJson(response);
-}
-
-export async function setTagAlias(uid, alias) {
-  const response = await fetch(`${API_BASE}/tags/${uid}/alias`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ alias }),
-  });
-  return readJson(response);
-}
-
-export async function assignTag(uid, boxId) {
-  const response = await fetch(`${API_BASE}/tags/${uid}/assign`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ box_id: boxId }),
-  });
-  return readJson(response);
-}
-
-export async function unassignTag(uid, boxId) {
-  const response = await fetch(`${API_BASE}/tags/${uid}/unassign`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ box_id: boxId }),
-  });
-  return readJson(response);
-}
-
-export async function deleteTag(uid) {
-  const response = await fetch(`${API_BASE}/tags/${uid}`, {
-    method: 'DELETE',
-  });
-  return readJson(response);
-}
-
-export async function setTagMedia(uid, mediaPath) {
-  const response = await fetch(`${API_BASE}/tags/${uid}/media`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ media_path: mediaPath }),
-  });
-  return readJson(response);
-}
-
-export async function pullTagFromBox(boxId, uid, targetFolder) {
-  const response = await fetch(`${API_BASE}/boxes/${boxId}/pull-tag`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ uid, target_folder: targetFolder }),
-  });
-  return readJson(response);
-}
-
-export async function sendCommand(boxId, command, payload = {}) {
-  const response = await fetch(`${API_BASE}/boxes/${boxId}/command`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ command, payload }),
-  });
-  return readJson(response);
-}
-
-export async function unpairBox(boxId) {
-  const response = await fetch(`${API_BASE}/boxes/${boxId}/unpair`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-  });
-  return readJson(response);
-}
diff --git a/klang/main.jsx b/klang/main.jsx
deleted file mode 100644
index 7057e78..0000000
--- a/klang/main.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { PrimeReactProvider } from 'primereact/api';
-import 'primereact/resources/themes/lara-dark-teal/theme.css';
-import 'primereact/resources/primereact.min.css';
-import 'primeicons/primeicons.css';
-import App from './App.jsx';
-import './styles.css';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <PrimeReactProvider>
-      <App />
-    </PrimeReactProvider>
-  </React.StrictMode>
-);
diff --git a/klang/styles.css b/klang/styles.css
deleted file mode 100644
index 98f8b8f..0000000
--- a/klang/styles.css
+++ /dev/null
@@ -1,1929 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
-
-:root {
-  color-scheme: dark;
-  font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
-  background-color: #0b0f14;
-  color: #e6edf6;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  min-height: 100vh;
-  background:
-    radial-gradient(circle at 20% 10%, rgba(50, 112, 124, 0.35), transparent 45%),
-    radial-gradient(circle at 80% 0%, rgba(24, 45, 67, 0.6), transparent 40%),
-    linear-gradient(130deg, #0b0f14 0%, #111826 45%, #0d1220 100%);
-}
-
-#root {
-  min-height: 100vh;
-}
-
-.app-shell {
-  min-height: 100vh;
-  padding-bottom: 80px;
-}
-
-.topbar {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  padding: 18px 24px;
-  background: rgba(11, 15, 20, 0.92);
-  backdrop-filter: blur(14px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.brand {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-size: 12px;
-  color: rgba(230, 237, 246, 0.7);
-}
-
-.brand strong {
-  display: block;
-  font-size: 14px;
-  color: #e6edf6;
-}
-
-.brand span {
-  display: block;
-  margin-top: 2px;
-}
-
-.brand-mark {
-  width: 36px;
-  height: 36px;
-  border-radius: 12px;
-  display: grid;
-  place-items: center;
-  background: linear-gradient(130deg, #19a4a1, #0b6f84);
-  color: #061018;
-  font-weight: 700;
-}
-
-
-.topbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-left: auto;
-}
-
-.header-box-indicator {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  border-radius: 999px;
-  background: rgba(25, 164, 161, 0.18);
-  border: 1px solid rgba(25, 164, 161, 0.4);
-  color: rgba(230, 237, 246, 0.9);
-  font-size: 13px;
-  margin-left: auto;
-}
-
-.user-avatar {
-  background: #1c2735;
-  color: #e6edf6;
-}
-
-.layout {
-  display: grid;
-  grid-template-columns: 240px minmax(0, 1fr) 280px;
-  gap: 24px;
-  padding: 24px;
-}
-
-.sidebar,
-.right-panel {
-  position: sticky;
-  top: 96px;
-  align-self: start;
-  height: fit-content;
-}
-
-.sidebar {
-  padding: 16px;
-  border-radius: 20px;
-  background: rgba(10, 17, 26, 0.85);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.sidebar-title {
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-size: 11px;
-  color: rgba(230, 237, 246, 0.55);
-  margin: 0 0 12px;
-}
-
-.sidebar-section {
-  margin-bottom: 16px;
-}
-
-.nav-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.nav-button {
-  justify-content: flex-start;
-  color: rgba(230, 237, 246, 0.7);
-}
-
-.nav-button.active {
-  background: rgba(25, 164, 161, 0.15);
-  color: #e6edf6;
-  border-radius: 12px;
-}
-
-.button-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.session-card {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 12px;
-  align-items: center;
-  padding: 12px;
-  border-radius: 14px;
-  background: rgba(10, 17, 26, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  text-align: left;
-}
-
-.sheet-card .session-card {
-  width: 100%;
-  height: 72px;
-}
-
-.session-card strong {
-  color: #2dd4bf;
-}
-
-.session-card .meta {
-  display: block;
-  font-size: 12px;
-  color: rgba(230, 237, 246, 0.6);
-}
-
-.session-list {
-  display: grid;
-  gap: 8px;
-}
-
-.sheet-card .session-list {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  align-items: stretch;
-}
-
-.session-card.active {
-  border-color: rgba(25, 164, 161, 0.6);
-  box-shadow: 0 0 0 2px rgba(25, 164, 161, 0.15);
-}
-
-.session-card:focus-visible {
-  outline: 2px solid rgba(25, 164, 161, 0.6);
-  outline-offset: 2px;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.section-header h1 {
-  margin: 0 0 4px;
-  font-size: 28px;
-}
-
-.section-header p {
-  margin: 0;
-  color: rgba(230, 237, 246, 0.6);
-}
-
-.section-actions {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.section-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.stat-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 16px;
-}
-
-.stat-card {
-  background: rgba(14, 24, 35, 0.9);
-  border: 1px solid rgba(255, 255, 255, 0.04);
-}
-
-.stat-label {
-  margin: 0;
-  font-size: 12px;
-  color: rgba(230, 237, 246, 0.6);
-}
-
-.stat-value {
-  font-size: 24px;
-  font-weight: 600;
-  margin: 8px 0;
-}
-
-.stat-helper {
-  font-size: 12px;
-  color: rgba(25, 164, 161, 0.9);
-}
-
-.split-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 16px;
-}
-
-.wide-card,
-.content-card,
-.panel-card {
-  background: rgba(14, 24, 35, 0.92);
-  border: 1px solid rgba(255, 255, 255, 0.04);
-}
-
-.card-title-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.progress-row {
-  display: grid;
-  grid-template-columns: 120px 1fr;
-  gap: 12px;
-  align-items: center;
-  margin-top: 12px;
-  font-size: 12px;
-  color: rgba(230, 237, 246, 0.7);
-}
-
-.activity-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-top: 12px;
-}
-
-.activity-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 12px;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.03);
-  font-size: 13px;
-}
-
-.activity-item span {
-  display: block;
-  font-size: 11px;
-  color: rgba(230, 237, 246, 0.55);
-}
-
-.content-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 16px;
-}
-
-.content-card h3 {
-  margin-top: 0;
-}
-
-.placeholder-block {
-  height: 120px;
-  border-radius: 14px;
-  background: linear-gradient(130deg, rgba(25, 164, 161, 0.2), rgba(23, 45, 64, 0.9));
-}
-
-.placeholder-table {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.table-row {
-  display: grid;
-  grid-template-columns: 1fr auto auto;
-  gap: 12px;
-  align-items: center;
-  padding: 8px 12px;
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.03);
-  font-size: 13px;
-}
-
-.table-row.header {
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: rgba(230, 237, 246, 0.5);
-}
-
-.placeholder-tree {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 12px;
-  font-size: 13px;
-  color: rgba(230, 237, 246, 0.75);
-}
-
-.placeholder-tree .nested {
-  margin-left: 16px;
-}
-
-.queue-item {
-  display: grid;
-  gap: 8px;
-  margin-top: 12px;
-  padding: 10px 12px;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.03);
-  font-size: 13px;
-}
-
-.queue-item span {
-  display: block;
-  font-size: 11px;
-  color: rgba(230, 237, 246, 0.5);
-}
-
-.tab-shell .p-tabview-nav {
-  background: transparent;
-  border-color: rgba(255, 255, 255, 0.08);
-}
-
-.tag-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
-  margin-top: 12px;
-}
-
-.tag-card {
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.tag-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.settings-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 12px;
-}
-
-.token-chip {
-  display: inline-flex;
-  align-items: center;
-  padding: 6px 12px;
-  border-radius: 999px;
-  margin-right: 8px;
-  margin-top: 8px;
-  background: rgba(25, 164, 161, 0.18);
-  font-size: 12px;
-}
-
-.right-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.panel-card h3 {
-  margin-top: 0;
-}
-
-.status-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 8px;
-  font-size: 13px;
-}
-
-.summary {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1 1 100%;
-}
-
-.summary-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: rgba(230, 237, 246, 0.95);
-  margin: 0;
-}
-
-.summary-grid {
-  display: grid;
-  grid-template-columns: 140px 1fr;
-  column-gap: 12px;
-  row-gap: 6px;
-  font-size: 13px;
-}
-
-.summary-grid span {
-  color: var(--text-color-secondary);
-  font-size: 11px;
-}
-
-.step-actions {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.step-row {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.step-row .p-inputtext,
-.step-row .p-dropdown {
-  flex: 1 1 220px;
-  min-width: 0;
-}
-
-.step-row-spacer {
-  flex: 1 1 auto;
-}
-
-.step-messages {
-  display: grid;
-  gap: 6px;
-  margin-top: 6px;
-}
-
-.p-messages {
-  margin: 5px 0;
-}
-
-.p-message {
-  min-height: 30px;
-  max-height: 30px;
-  padding: 4px 8px;
-  font-size: 12px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-}
-
-.p-message-summary {
-  font-size: 12px;
-  line-height: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inline-flex;
-  align-items: center;
-}
-
-.p-message-detail {
-  font-size: 11px;
-  line-height: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inline-flex;
-  align-items: center;
-}
-
-.p-message-wrapper {
-  gap: 6px;
-  align-items: center;
-  flex-wrap: nowrap;
-  overflow: hidden;
-  min-width: 0;
-  flex: 1 1 auto;
-}
-
-.p-message-text {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-.is-hidden {
-  display: none;
-}
-
-.panel-pill {
-  padding: 10px 12px;
-  border-radius: 12px;
-  margin-top: 8px;
-  background: rgba(255, 255, 255, 0.04);
-  font-size: 13px;
-}
-
-.capacity-row {
-  display: grid;
-  gap: 8px;
-  margin-top: 10px;
-}
-
-.capacity-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  font-size: 13px;
-  color: rgba(230, 237, 246, 0.9);
-}
-
-.capacity-meta {
-  font-size: 12px;
-  color: rgba(230, 237, 246, 0.6);
-}
-
-.capacity-bar .p-metergroup-meter {
-  background: linear-gradient(
-    90deg,
-    #39d98a 0%,
-    #e8d45a 45%,
-    #f2a94f 65%,
-    #b68bff 100%
-  );
-  background-size: calc(var(--capacity-scale, 1) * 100%) 100%;
-  background-position: left center;
-}
-
-.capacity-bar .p-metergroup-labels,
-.capacity-bar .p-metergroup-label,
-.capacity-bar .p-metergroup-label-type {
-  display: none;
-}
-
-.bottom-nav {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: none;
-  gap: 6px;
-  padding: 10px 12px 16px;
-  background: rgba(11, 15, 20, 0.95);
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-  z-index: 20;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-
-.bottom-nav .p-button {
-  width: 100%;
-  min-width: 0;
-  display: grid;
-  place-items: center;        /* bleibt */
-  gap: 4px;
-  background: transparent;
-  border: none;
-  color: rgba(230, 237, 246, 0.6);
-  font-size: 11px;
-}
-
-.bottom-nav .p-button > span {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-
-
-.bottom-nav .p-button.active {
-  color: #19a4a1;
-}
-
-@media (max-width: 550px) {
-  /* ❌ nur Text ausblenden */
-  .bottom-nav .p-button > span:not(.nav-icon) {
-    display: none;
-  }
-
-  /* ✅ Icon bleibt exakt zentriert */
-  .bottom-nav .nav-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-
-
-@media (max-width: 1100px) {
-  .layout {
-    grid-template-columns: 220px minmax(0, 1fr);
-  }
-
-  .right-panel {
-    display: none;
-  }
-}
-
-@media (max-width: 1300px) {
-  .legacy .boxes-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 980px) {
-  .legacy .boxes-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 1200px) {
-  .split-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .legacy .boxes-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 900px) {
-  .topbar-actions {
-    display: none;
-  }
-
-  .legacy .boxes-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .legacy .boxes-grid .card {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .legacy .boxes-grid .box-actions-row {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 8px;
-    width: 100%;
-  }
-
-  .legacy .boxes-grid .box-actions-row > * {
-    width: 100%;
-  }
-
-  .sheet-card .session-list {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 760px) {
-  .layout {
-    grid-template-columns: minmax(0, 1fr);
-    padding: 16px;
-  }
-
-  .sidebar {
-    display: none;
-  }
-
-
-  .section-header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .bottom-nav {
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-  }
-}
-
-@media (max-width: 720px) {
-  .sheet-card .session-list {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 520px) {
-  .sheet-card .session-list {
-    grid-template-columns: 1fr;
-  }
-}
-
-.sheet-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(5, 8, 12, 0.6);
-  display: grid;
-  align-items: end;
-  z-index: 50;
-}
-
-.sheet-card {
-  background: #0f1622;
-  border-radius: 20px 20px 0 0;
-  padding: 20px 18px 28px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  max-height: 80vh;
-  overflow-y: auto;
-}
-
-.drawer-system {
-  display: grid;
-  gap: 12px;
-}
-
-.drawer-tabs {
-  margin: 12px -18px -28px;
-  padding: 10px 12px 16px;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(11, 15, 20, 0.95);
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 6px;
-}
-
-.drawer-tab {
-  background: transparent;
-  border: none;
-  border-radius: 12px;
-  color: rgba(230, 237, 246, 0.6);
-  padding: 8px 10px;
-  font-size: 11px;
-  display: grid;
-  place-items: center;
-  gap: 4px;
-  width: 100%;
-  min-width: 0;
-  cursor: pointer;
-}
-
-.drawer-tab .nav-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-}
-
-.drawer-tab.active {
-  color: #19a4a1;
-}
-
-.drawer-system {
-  display: grid;
-  gap: 12px;
-}
-
-.sheet-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-
-.error {
-  background: rgba(80, 24, 32, 0.6);
-  color: #f4a7a7;
-  border: 1px solid rgba(242, 201, 201, 0.4);
-  border-radius: 10px;
-  padding: 10px 12px;
-  margin-bottom: 16px;
-}
-
-.muted {
-  color: rgba(230, 237, 246, 0.6);
-}
-
-.status {
-  background: #0f1520;
-  color: #e6edf6;
-  padding: 12px;
-  border-radius: 12px;
-  font-size: 12px;
-  overflow: auto;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  max-width: 100%;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.legacy .card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 12px;
-  padding: 12px;
-  margin-top: 12px;
-  cursor: pointer;
-  background: rgba(10, 17, 26, 0.7);
-}
-
-.legacy .card.selected {
-  border-color: rgba(25, 164, 161, 0.6);
-  box-shadow: 0 0 0 2px rgba(25, 164, 161, 0.15);
-}
-
-.legacy .card.compact {
-  padding: 10px;
-  margin-top: 10px;
-}
-
-.legacy .tags-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-
-@media (max-width: 1800px) {
-  .legacy .tags-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 1500px) {
-  .legacy .tags-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.legacy .boxes-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.legacy .boxes-grid .card {
-  margin-top: 0;
-}
-
-@media (max-width: 1300px) {
-  .legacy .tags-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 1200px) {
-  .legacy .tags-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .legacy .boxes-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 900px) {
-  .legacy .tags-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .legacy .boxes-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.legacy .stack {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: flex-end;
-}
-
-.legacy .stack-inline {
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  flex-wrap: nowrap;
-  gap: 6px;
-}
-
-.legacy .tag-actions {
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 6px;
-}
-
-.legacy .tag-actions-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: nowrap;
-  justify-content: flex-end;
-}
-
-.legacy .box-actions {
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 6px;
-}
-
-.legacy .box-actions-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: nowrap;
-  justify-content: flex-end;
-}
-
-.legacy .box-actions .alias-input {
-  width: 100%;
-  max-width: none;
-}
-
-@media (max-width: 1800px) {
-  .legacy .boxes-grid .card {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .legacy .boxes-grid .box-actions-row {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
-    gap: 8px;
-    width: 100%;
-  }
-
-  .legacy .boxes-grid .box-actions-row > * {
-    width: 100%;
-  }
-
-  .legacy .tags-grid .card {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .legacy .tags-grid .tag-actions-row {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
-    gap: 8px;
-    width: 100%;
-  }
-
-  .legacy .tags-grid .tag-actions-row > * {
-    width: 100%;
-  }
-}
-
-.legacy .tag-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  width: 100%;
-  flex-wrap: nowrap;
-}
-
-.legacy .tags-grid .tag-row {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  align-items: center;
-  gap: 12px;
-}
-
-.legacy .tags-grid .tag-actions {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 8px;
-}
-
-.legacy .tags-grid .tag-actions-row {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  align-items: center;
-  gap: 8px;
-}
-
-.legacy .tags-grid .tag-actions-row .alias-input,
-.legacy .tags-grid .tag-actions-row .p-dropdown {
-  width: 100%;
-  min-width: 0;
-}
-
-.legacy .tags-grid .tag-actions-row .icon-button {
-  width: 100%;
-}
-
-.upload-item-meta {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-}
-
-.upload-item-name {
-  text-align: left;
-  justify-self: start;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-}
-
-.upload-item-size {
-  text-align: right;
-  white-space: nowrap;
-}
-
-.upload-item-footer {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding-top: 8px;
-  color: rgba(230, 237, 246, 0.7);
-  font-size: 12px;
-}
-
-.upload-item-total {
-  text-align: right;
-}
-
-.upload-item-count {
-  text-align: right;
-}
-
-@media (max-width: 600px) {
-  .legacy .tags-grid .tag-row {
-    grid-template-columns: 1fr;
-  }
-
-  .legacy .boxes-grid .card {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .legacy .tags-grid .tag-actions-row {
-    grid-template-columns: 2fr 1fr;
-  }
-
-  .legacy .boxes-grid .box-actions-row {
-    grid-template-columns: 2fr 1fr 1fr;
-  }
-}
-
-.legacy .box-tag-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 12px;
-  margin-top: 12px;
-  background: rgba(10, 17, 26, 0.7);
-}
-
-.legacy .box-tag-actions {
-  display: flex;
-  align-items: flex-start;
-}
-
-.legacy .file-list {
-  margin: 8px 0 0;
-  padding-left: 18px;
-  color: rgba(230, 237, 246, 0.7);
-  font-size: 13px;
-}
-
-.legacy .file-list li {
-  margin-bottom: 4px;
-}
-
-.legacy .tag-info {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.legacy .box-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.legacy .alias-input:not(.p-inputtext),
-.legacy input:not(.p-inputtext),
-.modal-card input:not(.p-inputtext) {
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 8px;
-  padding: 6px 8px;
-  font-size: 12px;
-  min-width: 140px;
-  background: rgba(255, 255, 255, 0.04);
-  color: #e6edf6;
-}
-
-.legacy select,
-.modal-card select {
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  padding: 8px 10px;
-  min-width: 180px;
-  background: rgba(255, 255, 255, 0.04);
-  color: #e6edf6;
-}
-
-.legacy .tag-matrix {
-  display: grid;
-  gap: 8px;
-  overflow-x: auto;
-}
-
-.legacy .matrix-row {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(120px, 1fr);
-  gap: 8px;
-  align-items: center;
-}
-
-.legacy .matrix-row.header {
-  font-weight: 600;
-  color: rgba(230, 237, 246, 0.8);
-}
-
-.legacy .matrix-cell {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.03);
-  font-size: 12px;
-}
-
-.legacy .matrix-cell.toggle {
-  justify-content: center;
-  cursor: pointer;
-  width: 100%;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.02);
-  transition: background 0.2s ease, border-color 0.2s ease;
-}
-
-.legacy .matrix-cell.toggle.is-blocked {
-  border-color: rgba(239, 68, 68, 0.45);
-  background: rgba(239, 68, 68, 0.08);
-}
-
-.legacy .matrix-cell.toggle.p-message {
-  width: 100%;
-  justify-content: center;
-  background: transparent;
-  border: 0;
-  padding: 0;
-}
-
-.legacy .matrix-cell.toggle.p-message .p-message-text {
-  justify-content: center;
-  width: 100%;
-}
-
-.legacy .matrix-cell.label {
-  font-weight: 600;
-  background: rgba(10, 17, 26, 0.8);
-}
-
-.legacy .meta {
-  font-size: 12px;
-  color: rgba(230, 237, 246, 0.55);
-}
-
-.legacy .pill {
-  background: rgba(25, 164, 161, 0.2);
-  color: #8fe3df;
-  padding: 4px 10px;
-  border-radius: 999px;
-  font-size: 12px;
-}
-
-.legacy .controls {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.legacy .controls-inline {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
-
-.legacy button:not(.p-button),
-.modal-card button:not(.p-button) {
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: #1b2736;
-  color: #e6edf6;
-  padding: 8px 12px;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.legacy button:not(.p-button):hover,
-.modal-card button:not(.p-button):hover {
-  background: #233144;
-}
-
-.legacy .button-ghost,
-.modal-card .button-ghost {
-  background: transparent;
-  color: rgba(230, 237, 246, 0.9);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.legacy .button-ghost:hover,
-.modal-card .button-ghost:hover {
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.icon-button {
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(10, 17, 26, 0.7);
-  color: #e6edf6;
-  padding: 6px 8px;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 14px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-}
-
-.icon-button:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-
-.icon-button.danger {
-  border-color: rgba(239, 68, 68, 0.55);
-  color: rgba(248, 113, 113, 0.95);
-  background: rgba(239, 68, 68, 0.12);
-}
-
-.icon-button.danger:hover {
-  background: rgba(239, 68, 68, 0.18);
-}
-
-.icon-button.upload {
-  position: relative;
-  overflow: hidden;
-}
-
-.icon-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-.modal-card .danger {
-  border: 1px solid rgba(239, 68, 68, 0.55);
-  background: rgba(239, 68, 68, 0.12);
-  color: rgba(248, 113, 113, 0.95);
-}
-
-.modal-card .danger:hover {
-  background: rgba(239, 68, 68, 0.18);
-}
-
-.icon-button.upload input {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-
-
-.panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-.explorer {
-  display: grid;
-  grid-template-columns: 260px 1fr;
-  grid-template-rows: 1fr auto;
-  gap: 0;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 12px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  background: rgba(8, 12, 18, 0.7);
-  min-height: 200px;
-  align-items: stretch;
-  font-size: 13px;
-}
-
-.explorer-sidebar {
-  grid-row: 1;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  background: rgba(10, 17, 26, 0.85);
-  height: 100%;
-}
-
-.sidebar-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
-  padding: 0 10px;
-  min-height: 40px;
-  gap: 10px;
-}
-
-.sidebar-tree {
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  background: rgba(10, 17, 26, 0.8);
-  padding: 8px;
-  overflow: auto;
-}
-
-.sidebar-search {
-  flex: 1;
-  width: 100%;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: 8px;
-  padding: 0 10px;
-  font-size: 13px;
-  color: #e6edf6;
-  min-width: 0;
-  height: 28px;
-  line-height: 28px;
-}
-
-.sidebar-search:focus {
-  outline: none;
-  border-color: rgba(25, 164, 161, 0.6);
-  box-shadow: 0 0 0 2px rgba(25, 164, 161, 0.2);
-}
-
-.explorer-toolbar,
-.sidebar-toolbar {
-  height: 40px;
-  min-height: 40px;
-  box-shadow: 0 1px 2px rgba(16, 18, 22, 0.2);
-  align-items: center;
-}
-
-.explorer-actions.footer {
-  padding-top: 6px;
-}
-
-.explorer-main {
-  grid-row: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 12px 14px 14px;
-  background: rgba(10, 17, 26, 0.7);
-  height: 100%;
-}
-
-.explorer-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-  padding: 0 10px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.explorer-toolbar .icon-button,
-.explorer-toolbar label.icon-button {
-  width: 30px;
-  height: 30px;
-  padding: 0;
-}
-
-.explorer-toolbar .icon-button svg,
-.explorer-toolbar label.icon-button svg {
-  display: block;
-}
-
-.explorer-path {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  font-size: 13px;
-  color: rgba(230, 237, 246, 0.7);
-  align-items: center;
-  line-height: 1;
-}
-
-.breadcrumb-root {
-  font-weight: 600;
-  color: #e6edf6;
-}
-
-.path-link {
-  background: transparent;
-  border: none;
-  color: #e6edf6;
-  cursor: pointer;
-  padding: 0;
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.path-link:hover,
-.path-link:focus {
-  background: transparent;
-  color: #e6edf6;
-  outline: none;
-}
-
-.toolbar-actions {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.explorer-list {
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  background: rgba(10, 17, 26, 0.8);
-  overflow: hidden;
-}
-
-.explorer-row {
-  display: grid;
-  grid-template-columns: 2fr repeat(2, minmax(80px, 1fr));
-  gap: 12px;
-  align-items: center;
-  padding: 10px 12px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  font-size: 13px;
-}
-
-.explorer-row.has-meta,
-.explorer-list.has-meta .explorer-row {
-  grid-template-columns: 2fr repeat(4, minmax(100px, 1fr));
-}
-
-.explorer-row.header {
-  font-size: 13px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: rgba(230, 237, 246, 0.5);
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.explorer-row.footer {
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.explorer-row.selected {
-  background: rgba(25, 164, 161, 0.15);
-}
-
-.row-name {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.row-icon {
-  display: inline-flex;
-  align-items: center;
-}
-
-.footer-count {
-  font-weight: 600;
-  color: rgba(230, 237, 246, 0.9);
-}
-
-.explorer-footer {
-  grid-column: 1 / -1;
-  padding: 8px 12px;
-  font-size: 13px;
-  color: rgba(230, 237, 246, 0.6);
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(10, 17, 26, 0.8);
-}
-
-.tree-node {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.tree-label {
-  display: inline-block;
-  user-select: none;
-  cursor: pointer;
-}
-
-.depth-1 .tree-row {
-  margin-left: 16px;
-}
-
-.depth-2 .tree-row {
-  margin-left: 32px;
-}
-
-.depth-3 .tree-row {
-  margin-left: 48px;
-}
-
-.depth-4 .tree-row {
-  margin-left: 64px;
-}
-
-.depth-5 .tree-row {
-  margin-left: 80px;
-}
-
-.tree-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 8px;
-  border-radius: 8px;
-  cursor: pointer;
-  color: rgba(230, 237, 246, 0.75);
-}
-
-.tree-row.active {
-  background: rgba(25, 164, 161, 0.18);
-  color: #e6edf6;
-}
-
-.tree-caret {
-  border: none;
-  background: transparent;
-  color: rgba(230, 237, 246, 0.7);
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  flex: 0 0 18px;
-  cursor: pointer;
-}
-
-.tree-caret.disabled {
-  width: 18px;
-  flex: 0 0 18px;
-}
-
-.tree-icon.folder {
-  color: rgba(25, 164, 161, 0.9);
-}
-
-.tree-label {
-  flex: 1;
-}
-
-.tree-tag-count {
-  background: rgba(25, 164, 161, 0.2);
-  padding: 2px 6px;
-  border-radius: 999px;
-  font-size: 11px;
-}
-
-.upload-status {
-  display: grid;
-  gap: 8px;
-  padding: 10px 12px;
-  margin-bottom: 12px;
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.04);
-}
-
-.upload-progress {
-  width: 100%;
-  height: 6px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 999px;
-  overflow: hidden;
-}
-
-.upload-progress div {
-  height: 100%;
-  background: linear-gradient(120deg, #19a4a1, #11709c);
-}
-
-
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(5, 8, 12, 0.7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 90;
-  backdrop-filter: blur(6px);
-}
-
-.modal-card {
-  background: #0f1622;
-  color: #e6edf6;
-  border-radius: 14px;
-  padding: 20px;
-  width: min(520px, 92vw);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  display: grid;
-  gap: 12px;
-  position: relative;
-  z-index: 91;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
-  max-height: 90vh;
-  overflow: auto;
-  visibility: visible;
-  opacity: 1;
-}
-
-.modal-card.modal-upload {
-  width: min(1040px, 96vw);
-}
-
-.modal-card.modal-tag-delete {
-  width: min(760px, 96vw);
-  overflow: visible;
-}
-
-
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 6px;
-  flex-wrap: nowrap;
-}
-
-.modal-header h3 {
-  margin: 0;
-}
-
-.modal-body {
-  display: grid;
-  gap: 10px;
-}
-
-.modal-label {
-  font-size: 12px;
-  color: rgba(230, 237, 246, 0.6);
-}
-
-@media (max-width: 960px) {
-  .explorer {
-    grid-template-columns: 1fr;
-  }
-
-  .explorer-sidebar {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  }
-}
-
-.player-shell {
-  display: grid;
-  gap: 16px;
-}
-
-.player-header {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 16px;
-  align-items: center;
-  padding: 14px;
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.04);
-}
-
-.player-cover {
-  width: 86px;
-  height: 86px;
-  border-radius: 16px;
-  background: linear-gradient(135deg, #ff7a18, #af002d 60%, #319197);
-  box-shadow: 0 10px 20px rgba(5, 8, 12, 0.4);
-}
-
-.player-meta h3 {
-  margin: 0 0 6px;
-  font-size: 20px;
-}
-
-.player-meta p {
-  margin: 0 0 6px;
-  color: rgba(230, 237, 246, 0.6);
-  font-size: 12px;
-}
-
-.player-sub {
-  display: flex;
-  gap: 12px;
-  font-size: 12px;
-  color: rgba(230, 237, 246, 0.6);
-}
-
-.player-controls {
-  display: grid;
-  grid-auto-flow: column;
-  gap: 8px;
-  align-items: center;
-  justify-content: end;
-  background: rgba(255, 255, 255, 0.06);
-  padding: 10px;
-  border-radius: 14px;
-}
-
-.player-btn {
-  border: none;
-  background: transparent;
-  color: rgba(230, 237, 246, 0.8);
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-}
-
-.player-btn.primary {
-  background: rgba(230, 237, 246, 0.12);
-  color: #e6edf6;
-  width: 42px;
-  height: 42px;
-}
-
-.player-btn:hover {
-  background: rgba(255, 255, 255, 0.12);
-}
-
-.volume-wrap {
-  position: relative;
-}
-
-.volume-popover {
-  position: absolute;
-  right: 0;
-  bottom: 46px;
-  background: rgba(10, 17, 26, 0.95);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 12px;
-  padding: 10px 12px;
-  display: grid;
-  gap: 8px;
-  align-items: center;
-  justify-items: center;
-  z-index: 5;
-}
-
-.volume-label {
-  font-size: 11px;
-  color: rgba(230, 237, 246, 0.7);
-  min-width: 2ch;
-  text-align: center;
-}
-
-.player-progress {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 12px;
-  align-items: center;
-  font-size: 12px;
-  color: rgba(230, 237, 246, 0.6);
-}
-
-.player-nfc {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.player-nfc input {
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 8px;
-  padding: 8px 10px;
-  background: rgba(255, 255, 255, 0.04);
-  color: #e6edf6;
-}
-
-.player-nfc button {
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(10, 17, 26, 0.7);
-  color: #e6edf6;
-  padding: 8px 12px;
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-.player-list {
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  overflow: hidden;
-}
-
-.player-row {
-  display: grid;
-  grid-template-columns: 40px 2fr 1fr 80px;
-  gap: 12px;
-  align-items: center;
-  padding: 10px 12px;
-  font-size: 13px;
-  background: rgba(10, 17, 26, 0.65);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  cursor: pointer;
-  user-select: none;
-}
-
-.player-row.header {
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-size: 11px;
-  color: rgba(230, 237, 246, 0.5);
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.player-row.empty {
-  color: rgba(230, 237, 246, 0.6);
-}
-
-.player-row.active {
-  background: rgb(45 212 191 / 12%);
-  color: #f6d08c;
-}
-
-.player-row.active span {
-  color: inherit;
-}
-
-@media (max-width: 900px) {
-  .player-header {
-    grid-template-columns: 1fr;
-    justify-items: start;
-  }
-
-  .player-controls {
-    width: 100%;
-    justify-content: start;
-  }
-}
-.modal-long-button .p-button-label {
-  white-space: nowrap;
-}