/* ===== Startseite =====
   EIN Block für alle Design-Schichten (klassisch / modern / Design 3.0) — nur
   Farb-Tokens kommen aus der jeweiligen Schicht. Leistungsregeln wie
   modern.css: kein :has, kein blur, Hover-Bewegung nur auf Zeigegeräten. */
.home {
  --hm-line: var(--line-soft, var(--line));
  --hm-r: 14px;
  max-width: 1040px; margin: 0 auto; padding: 40px 32px 80px;
}
.hm-head { margin-bottom: 18px; }
.home-title { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin: 0; }
.hm-date { color: var(--muted); font-size: 14px; margin-top: 4px; }

/* Suche */
.hm-searchbar { display: flex; gap: 8px; margin-bottom: 6px; }
.hm-search {
  flex: 1; min-width: 0; height: 48px; display: flex; align-items: center; gap: 10px;
  padding: 0 14px; border-radius: var(--hm-r); cursor: text; text-align: left;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  font: inherit; font-size: 15px; box-shadow: var(--shadow-sm, none);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.hm-search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-search svg.ico { width: 18px; height: 18px; flex: none; }
.hm-search kbd {
  font-family: inherit; font-size: 11.5px; font-weight: 500; line-height: 1; color: var(--muted); padding: 5px 7px; border-radius: 7px;
  background: var(--panel2); border: 1px solid var(--hm-line);
}
.hm-super {
  flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--hm-r); cursor: pointer; color: var(--accent);
  background: var(--accent-soft, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.hm-super svg.ico { width: 20px; height: 20px; }
@media (hover: hover) {
  .hm-search:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .hm-super:hover { border-color: var(--accent); }
}

/* Abschnitte */
.home-sec h2 {
  display: flex; align-items: center; gap: 7px; margin: 30px 0 12px;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--text);
}
.home-sec h2 svg.ico { width: 16px; height: 16px; color: var(--muted); }
.hm-link {
  margin-left: auto; border: 0; background: none; color: var(--accent); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; padding: 4px 2px;
}

/* Zeile: Symbol/Vorschaubild · Name + Ort · Stern · ⋯ */
.hm-row {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 8px 6px 8px 8px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease, border-color .12s ease;
}
.hm-row:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, transparent); }
.hm-row:active { background: var(--panel2); }
.hm-ico {
  position: relative; flex: none; width: 42px; height: 42px; border-radius: 11px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel2); border: 1px solid var(--hm-line);
}
.hm-ico svg.ico { width: 21px; height: 21px; }
.hm-ico img.ico-web-favicon { width: 20px; height: 20px; }
.hm-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--panel2); }
.hm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-name, .hm-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.hm-sub { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hm-star, .hm-more {
  flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; opacity: 0;
  transition: opacity .12s ease, background-color .12s ease;
}
.hm-star svg.ico, .hm-more svg.ico { width: 17px; height: 17px; }
.hm-star.on { color: #f5b301; }
@media (hover: hover) {
  .hm-row:hover { background: var(--panel2); }
  .hm-row:hover .hm-star, .hm-row:hover .hm-more, .hm-row:focus-visible .hm-more { opacity: 1; }
  .hm-star:hover, .hm-more:hover { background: var(--panel); color: var(--text); }
  .hm-star.on:hover { color: #f5b301; }
}
/* Touch: Stern weg (Menü/Langdruck reicht), ⋯ immer dezent sichtbar. */
@media (hover: none) {
  .hm-star { display: none; }
  .hm-more { opacity: .55; }
}

/* Favoriten: kompakte Karten im Raster */
.hm-pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.hm-pins .hm-row { background: var(--panel); border-color: var(--hm-line); box-shadow: var(--shadow-sm, none); }
/* Stern/⋯ schweben über dem Text statt dauerhaft Platz zu belegen — die
   Kacheln sind schmal, der Name braucht die Breite. */
.hm-pins .hm-star, .hm-pins .hm-more {
  position: absolute; top: 50%; transform: translateY(-50%); right: 6px; background: var(--panel2);
}
.hm-pins .hm-star { right: 40px; }
@media (hover: none) { .hm-pins .hm-more { display: none; } }   /* Touch: Langdruck = Menü */
@media (hover: hover) {
  .hm-pins .hm-row:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--panel); }
}

/* Schnell erstellen: Kacheln */
.hm-create { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.hm-tile {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 16px 8px 13px; border-radius: var(--hm-r); cursor: pointer;
  background: var(--panel); border: 1px solid var(--hm-line); box-shadow: var(--shadow-sm, none);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.hm-tile-ico {
  width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--panel2);
}
.hm-tile-ico svg.ico { width: 21px; height: 21px; }
.hm-tile:active { transform: scale(.97); }
@media (hover: hover) {
  .hm-tile:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .5);
  }
  body[data-theme="light"] .hm-tile:hover { box-shadow: 0 12px 28px -18px rgba(24, 24, 40, .3); }
}

/* Zuletzt geöffnet: Filter + gruppierte Liste (breit: zwei Spalten) */
.hm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 8px; }
.hm-chips:empty { display: none; }
.hm-chip {
  height: 30px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 500;
}
.hm-chip.on {
  color: var(--accent); background: var(--accent-soft, var(--panel2));
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
@media (hover: hover) { .hm-chip:not(.on):hover { color: var(--text); border-color: var(--muted); } }
.hm-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); column-gap: 12px; row-gap: 2px; }
.hm-group {
  grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--muted);
  margin: 12px 8px 4px;
}
.hm-group:first-child { margin-top: 4px; }
.hm-showmore {
  display: block; margin: 10px auto 0; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 500;
}
.home-empty { grid-column: 1 / -1; color: var(--muted); font-size: 13.5px; padding: 10px 8px; }
/* Platzhalter, solange „Zuletzt geöffnet" beim allerersten Besuch noch lädt —
   ohne ihn springt der Abschnitt beim Eintreffen der Daten auf. */
.home-skel { height: 58px; border-radius: 12px; background: var(--panel2); opacity: .5; margin-bottom: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .home-skel { animation: home-skel-pulse 1.4s ease-in-out infinite; }
}
@keyframes home-skel-pulse { 0%, 100% { opacity: .35 } 50% { opacity: .6 } }

/* Zeigegeräte mit Platz: Kacheln flach (Symbol links) — „Zuletzt" rückt höher. */
@media (min-width: 769px) {
  .hm-create { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
  .hm-tile { flex-direction: row; gap: 10px; padding: 9px 12px 9px 9px; font-size: 13.5px; }
  .hm-tile-ico { width: 34px; height: 34px; border-radius: 10px; }
  .hm-tile-ico svg.ico { width: 18px; height: 18px; }
}

/* Handy: alles sichtbar, dicht gepackt — Rahmen/Flächen bleiben, damit jedes
   Ziel klar als antippbar erkennbar ist. */
@media (max-width: 768px) {
  .home { padding: 16px 14px 72px; }
  .hm-head { margin-bottom: 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .home-title { font-size: 24px; }
  .hm-date { font-size: 13px; margin-top: 0; }
  .hm-search { height: 44px; font-size: 16px; }
  .hm-search kbd { display: none; }
  .hm-super { width: 44px; height: 44px; }
  .home-sec h2 { font-size: 14.5px; margin: 20px 0 8px; }
  /* Favoriten: ALLE, zweispaltig und dicht */
  .hm-pins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .hm-pins .hm-row { padding: 6px 8px 6px 6px; gap: 9px; border-radius: 11px; }
  .hm-pins .hm-ico { width: 32px; height: 32px; border-radius: 9px; }
  .hm-pins .hm-ico svg.ico { width: 17px; height: 17px; }
  .hm-pins .hm-name { font-size: 14px; }
  .hm-pins .hm-sub { font-size: 11.5px; }
  /* Schnell erstellen: alle sechs in EINER Reihe, nichts versteckt */
  .hm-create { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .hm-tile { padding: 9px 2px 8px; gap: 5px; font-size: 11.5px; border-radius: 12px; }
  .hm-tile-ico { width: 34px; height: 34px; border-radius: 10px; }
  .hm-tile-ico svg.ico { width: 18px; height: 18px; }
  /* Filter in einer wischbaren Reihe statt Umbruch */
  .hm-chips {
    flex-wrap: nowrap; overflow-x: auto; margin: -2px -14px 8px; padding: 0 14px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hm-chips::-webkit-scrollbar { display: none; }
  .hm-chip { flex: none; height: 32px; font-size: 13.5px; }
  /* Zuletzt: gerahmte Liste mit Trennlinien */
  .hm-recent {
    grid-template-columns: minmax(0, 1fr); row-gap: 0;
    background: var(--panel); border: 1px solid var(--hm-line); border-radius: var(--hm-r); overflow: hidden;
  }
  .hm-recent .hm-row { border-radius: 0; padding: 7px 2px 7px 10px; border: 0; border-top: 1px solid var(--hm-line); }
  .hm-recent .hm-group + .hm-row, .hm-recent .hm-row:first-child { border-top: 0; }
  .hm-recent .hm-ico { width: 38px; height: 38px; border-radius: 10px; }
  .hm-group, .hm-group:first-child { margin: 0; padding: 8px 12px 5px; background: var(--panel2); font-size: 12px; }
  .home-skel { margin: 0; border-radius: 0; }
  .home-empty { padding: 12px; }
  .hm-name { font-size: 15px; }
  .hm-sub { font-size: 12.5px; }
}

/* ===== Ordner-Ansicht (Dateimanager, features/folder-view.js) =====
   Spaltenbreiten stehen EINMAL als Variablen: Kopfzeile und Datenzeilen der
   Liste müssen zwingend dieselben benutzen. */
.fv {
  --fv-size: 86px; --fv-date: 140px; --fv-menu: 30px;
  display: flex; flex-direction: column; height: 100%; min-height: 0;
}
.fv-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px;
  padding: 9px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
  flex: 0 0 auto;
}
.fv-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fv-title { font-weight: 650; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-title-ico { display: inline-flex; align-items: center; }
.fv-title-ico svg.ico { width: 18px; height: 18px; }
.fv-count { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.fv-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fv-controls .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; }
.fv-sep { width: 1px; align-self: stretch; margin: 2px 2px; background: var(--line); }
/* Filterfeld — bewusst mit EIGENEN Regeln statt .bs-search: base.css wird
   verzögert geladen, die Ordner-Ansicht darf darauf nicht warten. */
.fv-search {
  display: inline-flex; align-items: center; gap: 4px; height: 32px;
  padding: 0 4px 0 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel2);
}
.fv-search.on { border-color: var(--accent); }
.fv-search-ico { display: inline-flex; color: var(--muted); flex-shrink: 0; }
.fv-search-ico svg.ico { width: 14px; height: 14px; }
.fv-search.on .fv-search-ico { color: var(--accent); }
.fv-filter {
  border: 0; background: none; color: var(--text); font: inherit; font-size: 13px;
  padding: 3px 2px; width: 150px; min-width: 80px; outline: none;
}
.fv-filter::placeholder { color: var(--muted); }
.fv-filter::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.fv-filter-x {
  display: inline-flex; padding: 2px; border: 0; background: none;
  color: var(--muted); cursor: pointer; flex-shrink: 0; line-height: 0;
}
.fv-filter-x svg.ico { width: 14px; height: 14px; }
.fv-filter-x:hover { color: var(--text); }
.fv-filter-x.hidden { display: none; }
.fv-modes { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.fv-modes .icon-btn.on { background: var(--accent-dim); color: var(--text); }
.fv-modes .icon-btn svg.ico, .fv-sortbtn svg.ico, .fv-db svg.ico { width: 15px; height: 15px; }

/* Auswahl-Leiste — erscheint nur, solange etwas markiert ist. */
.fv-selbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 16px; border-bottom: 1px solid var(--line);
  background: var(--accent-dim); flex: 0 0 auto;
}
.fv-selbar.hidden { display: none; }
.fv-selcount { font-size: 13px; font-weight: 600; white-space: nowrap; }
.fv-selacts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; }
.fv-selacts .btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: 12.5px; }
.fv-act-del:hover { border-color: var(--err); color: var(--err); }
.fv-selclear svg.ico { width: 15px; height: 15px; }

.fv-body { flex: 1; min-height: 0; overflow: auto; padding: 0 16px 48px; outline: none; }
.fv-body.drop-here { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ---- Auswahl-Kästchen (Zeile wie Karte) ---- */
.fv-check {
  width: 16px; height: 16px; flex: 0 0 auto; border-radius: 5px;
  border: 1.5px solid var(--muted); cursor: pointer; opacity: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity .12s ease, background-color .12s ease;
}
.fv-check::after {
  content: ''; width: 8px; height: 4px; margin-top: -2px;
  border: 2px solid #fff; border-top: 0; border-right: 0;
  transform: rotate(-45deg); opacity: 0;
}
.fv-row:hover .fv-check, .fv-card:hover .fv-check, .fv-lhead:hover .fv-check { opacity: .75; }
.fv-row.selected .fv-check, .fv-card.selected .fv-check,
.fv-check.on, .fv-check.some { opacity: 1; background: var(--accent); border-color: var(--accent); }
.fv-row.selected .fv-check::after, .fv-card.selected .fv-check::after, .fv-check.on::after { opacity: 1; }
.fv-check.some::after { content: ''; width: 8px; height: 0; margin: 0; border: 1px solid #fff; transform: none; opacity: 1; }
/* Ohne Hover (Touch) sind die Kästchen dauerhaft sichtbar. */
@media (hover: none) { .fv-check { opacity: .55; } }

/* ---- ⋯-Knopf je Eintrag (alle Aktionen ohne Rechtsklick) ---- */
.fv-menu-btn {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  border-radius: 6px; padding: 2px 4px; opacity: 0; line-height: 0;
}
.fv-menu-btn svg.ico { width: 15px; height: 15px; }
.fv-row:hover .fv-menu-btn, .fv-card:hover .fv-menu-btn { opacity: 1; }
.fv-menu-btn:hover { background: var(--panel2); color: var(--text); }
@media (hover: none) { .fv-menu-btn { opacity: .7; } }

/* ---- Liste ---- */
.fv-list { display: flex; flex-direction: column; }
.fv-lhead, .fv-row { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.fv-lhead {
  position: sticky; top: 0; z-index: 2; background: var(--bg);
  padding-top: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  user-select: none;
}
.fv-lh { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
/* Namensspalte deckt Icon + Name der Zeilen ab (Icon 17px + Abstand 10px). */
.fv-lh-name { flex: 1; min-width: 0; padding-left: 27px; }
.fv-lhead .fv-c-size, .fv-lhead .fv-c-date { justify-content: flex-end; }
.fv-lh:hover { color: var(--text); }
.fv-sarrow { display: inline-flex; }
.fv-sarrow svg.ico { width: 12px; height: 12px; }
/* Bewusst OHNE Trennlinie je Zeile: die Kopfzeile ist die einzige Linie, den
   Rest gliedern Hover und Auswahl (ruhiger, s. Finder/Drive). */
.fv-row { padding-top: 7px; padding-bottom: 7px; border-radius: 8px; cursor: pointer; }
.fv-row:hover { background: var(--panel); }
.fv-row-ico { display: inline-flex; align-items: center; flex: 0 0 auto; }
.fv-row-ico svg.ico { width: 17px; height: 17px; }
.fv-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-c-size { width: var(--fv-size, 86px); flex: 0 0 auto; color: var(--muted); font-size: 12px; text-align: right; }
.fv-c-date { width: var(--fv-date, 140px); flex: 0 0 auto; color: var(--muted); font-size: 12px; text-align: right; }
.fv-lhead .fv-c-menu { width: var(--fv-menu); flex: 0 0 auto; }
.fv-row .fv-c-menu { width: var(--fv-menu); flex: 0 0 auto; text-align: center; }

/* ---- Raster ---- */
.fv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fv-tile, 168px)), 1fr)); gap: 12px; padding-top: 12px; }
/* Pinch (zwei Finger) gehört dem Raster-Zoom, nicht dem Seiten-Zoom. */
.fv[data-mode="grid"] .fv-body { touch-action: pan-x pan-y; }
.fv-card {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; cursor: pointer;
}
.fv-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.fv-card .fv-check, .fv-card .fv-menu-btn {
  position: absolute; top: 6px; z-index: 2; background: var(--panel);
  box-shadow: 0 0 0 3px var(--panel);
}
.fv-card .fv-check { left: 8px; }
.fv-card .fv-menu-btn { right: 6px; border-radius: 6px; }
/* Höher spezifiziert als .bs-gcover (base.css lädt NACH features.css und setzt
   dort 120px) — die Cover-Maschine selbst (base/covers.js) wird geteilt. */
.fv-card .fv-cover {
  height: calc(var(--fv-tile, 168px) * .667); background: var(--bg); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.fv-card .fv-cover svg.ico { width: 38px; height: 38px; }
/* Was base/covers.js einhängt (Bild/Video/Canvas/Text-Anriss) — die feineren
   Regeln stehen in base.css, diese hier müssen aber auch ohne sie sitzen. */
.fv-card .fv-cover img, .fv-card .fv-cover video { width: 100%; height: 100%; object-fit: cover; }
.fv-card .fv-cover canvas { width: 100%; height: 100%; object-fit: contain; background: var(--bg); }
.fv-card .fv-cover .bs-gsnippet { width: 100%; height: 100%; overflow: hidden; }
.fv-card-dir .fv-cover { height: 66px; background: var(--panel2); }
.fv-card-dir .fv-cover svg.ico { width: 30px; height: 30px; }
.fv-card-foot {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px;
  border-top: 1px solid var(--line); min-width: 0;
}
.fv-card-ico { display: inline-flex; flex: 0 0 auto; }
.fv-card-ico svg.ico { width: 15px; height: 15px; }
.fv-card-name { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Zustände (Auswahl, Ausschneiden, Tastatur-Fokus, versteckt) ---- */
.fv-row.selected, .fv-card.selected { background: var(--accent-dim); }
.fv-card.selected { border-color: var(--accent); }
.fv-row.focused, .fv-card.focused { outline: 2px solid var(--accent); outline-offset: -2px; }
.fv-row.cut, .fv-card.cut { opacity: .45; }
.fv-dim { opacity: .55; }
.fv-badge { color: var(--muted); font-size: 11px; display: inline-flex; align-items: center; flex: 0 0 auto; }
.fv-badge svg.ico { width: 12px; height: 12px; }
.fv-badge-pin { color: var(--warn); }

/* ---- Drag & Drop ---- */
.fv-row.drop-target, .fv-card.drop-target {
  background: var(--accent-dim); outline: 2px dashed var(--accent); outline-offset: -2px;
}
.fv-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.fv-row.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.fv-card.drop-before { box-shadow: inset 2px 0 0 var(--accent); }
.fv-card.drop-after { box-shadow: inset -2px 0 0 var(--accent); }

/* ---- Leerer Ordner / kein Treffer ---- */
.fv-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 20px; text-align: center; }
.fv-empty-ico { display: inline-flex; opacity: .5; }
.fv-empty-ico svg.ico { width: 46px; height: 46px; }
.fv-empty-title { font-size: 15px; font-weight: 600; }
.fv-empty-hint { color: var(--muted); font-size: 13px; }
.fv-empty-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.fv-empty-acts .btn { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Schmale Fenster: Datum weg, Beschriftungen weg ---- */
@media (max-width: 720px) {
  .fv { --fv-date: 0px; }
  .fv-c-date { display: none; }
  .fv-bar { padding: 8px 12px; }
  .fv-body { padding: 0 12px 48px; }   /* 0 oben: sonst scrollt es unter der klebenden Kopfzeile durch */
  .fv-controls .fv-lbl, .fv-selacts .fv-lbl { display: none; }
  .fv-controls .btn, .fv-selacts .btn { padding: 6px 9px; }
  .fv-search { flex: 1 1 120px; max-width: 220px; }
  .fv-filter { width: 100%; min-width: 60px; }
}

/* ===== Versionen ===== */
.versions-list { display: flex; flex-direction: column; gap: 2px; }
.version-row {
  display: flex; align-items: center; gap: 12px; padding: 7px 10px;
  border-radius: 8px; border-bottom: 1px solid var(--line);
}
.vr-date { flex: 1; font-weight: 600; font-size: 13px; }
.vr-size { color: var(--muted); font-size: 12px; }
.vr-badge {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.vr-actions { display: flex; gap: 6px; }
.vr-actions .btn { padding: 4px 10px; font-size: 12px; }
.version-preview { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.vp-head { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.vp-pre {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px; max-height: 320px; overflow: auto; font-size: 12px; white-space: pre-wrap;
}

/* ===== Papierkorb ===== */
.trash-hint { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.trash-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 6px;
  border-bottom: 1px solid var(--line);
}
.trash-name { flex: 1; overflow: hidden; }
.trash-origin { display: block; color: var(--muted); font-size: 11px; }
.trash-date, .trash-size { color: var(--muted); font-size: 12px; white-space: nowrap; }
.trash-row .btn { padding: 4px 10px; font-size: 12px; flex-shrink: 0; }

/* ===== Aktivität ===== */
.act-row {
  display: flex; align-items: center; gap: 12px; padding: 7px 6px;
  border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 6px;
}
.act-row:hover { background: var(--panel2); }
.act-ico { font-size: 15px; width: 22px; text-align: center; }
.act-main { flex: 1; min-width: 0; }
.act-name { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-detail { display: block; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-date { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.act-more { margin-top: 10px; width: 100%; }

/* ===== Eigenschaften / Tags / Teilen / Pickup ===== */
/* Alles passt in den Modal-Body OHNE Horizontal-Scroll: feste Tabellen-Breite,
   Werte brechen um (v. a. der lange Pfad). */
.props { width: 100%; max-width: 100%; }
.props-sec { margin-bottom: 4px; }
.props-own { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.props-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13.5px; }
.props-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; }
.props-table tr:last-child td { border-bottom: 0; }
.props-table .pt-key { color: var(--muted); width: 126px; }
.props-table .pt-val { word-break: break-word; }
.props-table .pt-pathtext { user-select: text; word-break: break-all; }
.pt-copy {
  border: 0; background: var(--panel2); color: var(--muted); cursor: pointer;
  border-radius: 6px; padding: 2px 5px; margin-left: 8px; vertical-align: middle;
}
.pt-copy:hover { color: var(--text); }
.pt-copy svg.ico { width: 13px; height: 13px; display: block; }
.props-disk { margin-top: 14px; color: var(--muted); font-size: 12.5px; }

.props-h {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
/* Ja/Nein-Schalter (Favorit/Verstecken/Vorlage) */
.pt-toggle { accent-color: var(--accent); width: 17px; height: 17px; cursor: pointer; margin: 0; }
/* Freie Attribute: Name | Wert (+ Entfernen) */
.pt-attr .pt-val { display: flex; align-items: center; gap: 6px; }
.props-own-table .input, .pt-attr .input { font-size: 13px; padding: 5px 8px; }
.pt-attr-val { flex: 1; min-width: 0; }
.pt-attr-key { width: 100%; }
.pt-attr-x { color: var(--muted); flex-shrink: 0; }
.pt-attr-x:hover { color: var(--danger, #e35a5a); }
.pt-attr-x svg.ico { width: 15px; height: 15px; display: block; }
.pt-add-attr { margin-top: 10px; font-size: 13px; }
.pt-add-attr svg.ico { width: 14px; height: 14px; }
.ps-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-swatch {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0;
}
.ps-swatch.on { border-color: var(--text); }
.ps-swatch-none {
  background: var(--panel2); color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.ps-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 22px; }
.ps-tag-input { width: 100%; }

.tag-edit-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; min-height: 24px; }
.tag-edit-empty { color: var(--muted); font-size: 12.5px; }
.search-tag-pill {
  background: var(--accent-dim); border-radius: 12px; padding: 2px 10px;
  font-size: 12px; display: inline-block;
}

.sh-url-row { display: flex; gap: 6px; }
.sh-sysshare { width: 100%; margin-top: 8px; }
.sh-result { margin-top: 6px; }
.pickup-list { margin: 6px 0 4px; padding-left: 20px; font-size: 13px; }
.pickup-size { color: var(--muted); font-size: 11.5px; }

/* ===== Split-View / Pane-Modus ===== */
#split-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.split-pane { border: 0; width: 100%; height: 100%; background: var(--bg); }
body.pane-mode #sidebar, body.pane-mode #sidebar-backdrop, body.pane-mode #tab-strip,
body.pane-mode #btn-split, body.pane-mode #btn-hamburger { display: none !important; }
/* Base-Vorschau-Pane (preview=1): ganze App-Topbar raus — nur die Datei. */
body.pane-preview #topbar { display: none !important; }

.act-ico svg.ico { width: 14px; height: 14px; }

/* ===== Share-Inbox: Ordner-Picker (Favoriten-Chips + Baum) ===== */
.sp-picker { display: flex; flex-direction: column; gap: 8px; }
.sp-current {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
  font-weight: 600; color: var(--accent);
}
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-head .sp-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-newdir {
  flex: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); padding: 5px 10px; font-size: 12.5px;
}
.sp-newdir:hover { border-color: var(--accent); }
.sp-newdir svg.ico { width: 14px; height: 14px; }
.sp-newform { display: flex; gap: 6px; }
.sp-newform.hidden { display: none; }
.sp-newname {
  flex: 1; min-width: 0; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 8px; color: var(--text); padding: 7px 10px; font-size: 14px;
}
.sp-newok {
  flex: none; background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.sp-pins { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); padding: 4px 11px; font-size: 12.5px; cursor: pointer;
}
.sp-chip:hover { border-color: var(--accent); }
.sp-chip svg.ico { width: 12px; height: 12px; color: var(--warn); }
.sp-tree {
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 8px; padding: 4px;
}
.sp-row {
  display: flex; align-items: center; gap: 6px; padding: 5px 6px;
  border-radius: 6px; cursor: pointer; font-size: 13px; user-select: none;
}
.sp-row:hover { background: var(--panel2); }
.sp-row.selected { background: var(--accent-dim); }
.sp-twist { width: 16px; display: inline-flex; justify-content: center; color: var(--muted); }
.sp-twist svg.ico { width: 12px; height: 12px; }
.sp-ico svg.ico { width: 14px; height: 14px; }
.pickup-size { color: var(--muted); font-size: 11.5px; }
@media (pointer: coarse) { .sp-row { padding: 9px 6px; } }

/* ===== Audio-Notiz (Aufnahme-Modal) ===== */
.audio-rec-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.audio-rec-dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--err);
  animation: audio-pulse 1.1s ease-in-out infinite;
}
@keyframes audio-pulse { 50% { opacity: .35; } }
.audio-rec-time { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.audio-rec-hint { color: var(--muted); font-size: 12.5px; }

/* ===== Diktat-Knopf (view-controls) ===== */
/* Aufnahme aktiv: rot. Sprechen = pulsierender Glow, Stille = ruhig/gedimmt. */
#btn-dictate.dictating { color: var(--err); }
#btn-dictate.rec-speaking {
  color: var(--err);
  animation: dictate-pulse 1.1s ease-in-out infinite;
}
#btn-dictate.rec-silent { color: var(--err); opacity: .6; }
/* Transkription läuft (nach dem Stoppen): ruhiges Pulsieren in Akzentfarbe. */
#btn-dictate.processing { color: var(--accent); animation: dictate-pulse 1.4s ease-in-out infinite; }
@keyframes dictate-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.9); }
}

/* ===== Schnelldiktat (features/quick-dictation.js) ===== */
/* Schwebende Pille unten mittig: läuft, bis Esc kommt (oder ein Klick darauf).
   Unter den Toasts (z-index 1000), über dem Mobile-FAB (90). */
.qd-hud {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); z-index: 990;
  display: flex; align-items: center; gap: var(--sp-2);
  max-width: min(560px, 92vw); padding: var(--sp-2) var(--sp-3);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow); font-size: var(--fs-sm); cursor: pointer;
}
.qd-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--err); opacity: .5;
}
.qd-hud.speaking .qd-dot { opacity: 1; animation: audio-pulse 1.1s ease-in-out infinite; }
.qd-label { flex: none; font-weight: 600; }
.qd-text { min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qd-hint {
  flex: none; color: var(--muted); font-size: var(--fs-xs);
  border-left: 1px solid var(--line); padding-left: var(--sp-2);
}

/* ===== Bild → PDF (features/img2pdf.js) ===== */
.i2p .field-label { display: block; margin-top: 12px; }
.i2p .field-label:first-child { margin-top: 0; }
.i2p-src {
  font-size: 13px; color: var(--muted);
  border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.i2p-hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.i2p-target { display: flex; gap: 6px; }
.i2p-target .input { flex: 1; min-width: 0; }
.i2p-dir { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ---- Terminal-Zustand (features/term-status.js) --------------------------
   Vier Farben, überall gleich (Baum, Tab, Knopf, Liste, „Zuletzt"):
     arbeitet = GELB (pulsiert) · fertig & ungesehen = GRÜN ·
     aktiv (Claude offen, angesehen) = BLAU · inaktiv (beendet/ohne Claude) = GRAU
   Dazu „wartet auf dich" = ROT (fünfter Zustand, pulsiert schneller).
   Nur Blau läuft nach 12 h ab (lib/shell-term.js reapIdle). */
:root {
  --term-busy: #f2c230;
  --term-done: var(--ok, #3fcf8e);
  --term-idle: #4f8ef7;
  --term-off: var(--muted);
  --term-ask: #ff3b3b;   /* rot: Claude wartet auf eine Auswahl */
}
body[data-theme="light"] { --term-busy: #c99500; --term-idle: #2f6fde; --term-ask: #d92020; }
@keyframes term-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.term-mark {
  display: inline-flex; align-items: center; flex-shrink: 0; cursor: pointer;
  color: var(--term-off); padding: 2px; border-radius: 4px;
}
.term-mark svg.ico { width: 13px; height: 13px; }
.term-mark:hover { background: var(--panel2); }
.term-mark.dim { opacity: .55; }
.term-mark.tm-busy { color: var(--term-busy); animation: term-pulse 1.4s ease-in-out infinite; }
.term-mark.tm-done { color: var(--term-done); opacity: 1; }
.term-mark.tm-idle { color: var(--term-idle); }
.term-mark.tm-ask { color: var(--term-ask); opacity: 1; animation: term-pulse 1s ease-in-out infinite; }
.term-mark.dim.tm-busy { opacity: .6; }

/* Tab eines Terminals: Punkt am Symbol. */
.tab.tab-term-busy .tab-icon, .tab.tab-term-done .tab-icon, .tab.tab-term-ask .tab-icon, .tab.tab-term-idle .tab-icon, .tab.tab-term-off .tab-icon { position: relative; }
.tab.tab-term-busy .tab-icon::after, .tab.tab-term-done .tab-icon::after, .tab.tab-term-ask .tab-icon::after, .tab.tab-term-idle .tab-icon::after, .tab.tab-term-off .tab-icon::after,
#btn-terminals.term-btn-busy::after, #btn-terminals.term-btn-done::after, #btn-terminals.term-btn-ask::after {
  content: ''; position: absolute; top: -2px; right: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--term-idle); box-shadow: 0 0 0 2px var(--panel);
}
#btn-terminals { position: relative; }
#btn-terminals.term-btn-busy::after { top: 3px; right: 3px; }
#btn-terminals.term-btn-done::after, #btn-terminals.term-btn-ask::after { top: 3px; right: 3px; }
.tab.tab-term-busy .tab-icon::after, #btn-terminals.term-btn-busy::after { background: var(--term-busy); animation: term-pulse 1.4s ease-in-out infinite; }
.tab.tab-term-done .tab-icon::after, #btn-terminals.term-btn-done::after { background: var(--term-done); }
.tab.tab-term-ask .tab-icon::after, #btn-terminals.term-btn-ask::after { background: var(--term-ask); }
#btn-terminals.term-btn-done { color: var(--term-done); }
.tab.tab-term-off .tab-icon::after { background: var(--term-off); }

/* Symbole in der Sprungliste „Zuletzt". */
.ctx-item svg.ico.term-ico-done { color: var(--term-done); }
.ctx-item svg.ico.term-ico-ask { color: var(--term-ask); }
.ctx-item svg.ico.term-ico-busy { color: var(--term-busy); }
.ctx-item svg.ico.term-ico-idle { color: var(--term-idle); }
.ctx-item svg.ico.term-ico-off { color: var(--term-off); }
.ctx-item svg.ico.term-ico-busy { animation: term-pulse 1.4s ease-in-out infinite; }
.ctx-item svg.ico.term-ico-ask { animation: term-pulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .term-mark, .tab .tab-icon::after, #btn-terminals::after, .ctx-item svg.ico.term-ico-busy, .ctx-item svg.ico.term-ico-ask { animation: none !important; }
}

/* Eigenständige Terminal-Seite (terminal.html): „Ordner öffnen" führt ins
   Office — das gibt es dort nicht. */
html.term-app .sh-open-folder, html.term-app .tm-open-folder { display: none !important; }

/* ---- Ordner aus allen Einstiegen (ui/root-folder-picker.js) ------------ */
.ftp-picker .ftp-tree { max-height: min(60vh, 520px); overflow-y: auto; }
.rfp-top .sp-label { font-weight: 600; }
.rfp-group { cursor: default; }
.rfp-load { opacity: .6; font-size: 12.5px; }
.rfp-path {
  margin-top: 8px; font-size: 12px; opacity: .75; min-height: 1.3em;
  font-family: var(--mono, ui-monospace, monospace); overflow-wrap: anywhere;
}
/* Suchzeile (find: true) */
.rfp-find {
  width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 9px 11px;
  font-size: 15px; border: 1px solid var(--border, #ccc); border-radius: 8px;
  background: var(--bg, #fff); color: inherit;
}
.rfp-find:focus { outline: 2px solid var(--accent, #3b82f6); outline-offset: -1px; }
.rfp-hit { padding-left: 10px; gap: 6px; }
.rfp-hit .sp-label { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfp-where { margin-left: auto; padding-left: 10px; font-size: 11.5px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rfp-col { display: flex; flex-direction: column; min-width: 0; flex: 0 1 auto; }
.rfp-why { font-size: 11.5px; opacity: .7; white-space: normal; line-height: 1.3; }
.rfp-ai { align-items: flex-start; padding-top: 5px; padding-bottom: 5px; height: auto; }
.rfp-aibtn .sp-label { color: var(--accent, #3b82f6); }
.rfp-aibox:not(:empty) { border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); margin-bottom: 4px; padding-bottom: 4px; }
.rfp-aiwait, .rfp-aisay { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12.5px; }
.rfp-aisay { opacity: .85; }
.rfp-aiwait svg { animation: term-pulse 1.2s ease-in-out infinite; }
.rfp-newapp { border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); margin-top: 4px; }
.rfp-newapp .sp-label { font-weight: 600; }
/* „Neuer Ordner" links, Abbrechen/Hier starten rechts */
.rfp-modal .modal-foot .btn:first-child { margin-right: auto; }
.sh-send { margin-bottom: 14px; }
.sh-send-btn { width: 100%; }
.sh-or { margin-top: 12px; font-size: 12px; color: var(--muted, #888); text-align: center; border-top: 1px solid var(--border, #ddd); padding-top: 8px; }

/* ── Bildschirmausschnitt → Claude (features/snap-ask.js) ───────────────── */
.snap-overlay {
  position: fixed; inset: 0; z-index: 10080; cursor: crosshair;
  background: rgba(0, 0, 0, .28); touch-action: none; user-select: none;
}
.snap-bar {
  position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  padding: 4px; box-shadow: var(--shadow); font-size: 13px; cursor: default;
  max-width: calc(100vw - 24px);
}
.snap-bar-hint, .snap-bar button { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 7px; white-space: nowrap; }
.snap-bar-hint { color: var(--muted); }
.snap-bar button { background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; }
.snap-bar button:hover { background: var(--panel2); }
.snap-bar button:focus-visible { outline: 2px solid var(--accent); }
.snap-bar svg { width: 15px; height: 15px; }
.snap-box {
  position: absolute; border: 2px solid var(--accent); border-radius: 2px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .25); background: transparent; pointer-events: none;
}
.snap-backdrop {
  position: fixed; inset: 0; z-index: 10080; background: rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.snap-pop {
  width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.snap-img {
  background: var(--panel2); border-radius: 8px; display: flex; justify-content: center;
  max-height: 38vh; overflow: auto;
}
.snap-img img { max-width: 100%; max-height: 38vh; object-fit: contain; display: block; }
.snap-img-none, .snap-img-wait { min-height: 64px; align-items: center; color: var(--muted); font-size: 13px; padding: 12px; text-align: center; }
.snap-img-wait { min-height: 120px; }
.snap-spin {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent);
  animation: snap-spin .8s linear infinite;
}
@keyframes snap-spin { to { transform: rotate(360deg); } }
.snap-modes { display: flex; gap: 4px; background: var(--panel2); border-radius: 9px; padding: 3px; }
.snap-modes button {
  flex: 1; display: inline-flex; gap: 6px; align-items: center; justify-content: center; min-width: 0;
  background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 7px; cursor: pointer;
}
.snap-modes button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-modes button svg { width: 15px; height: 15px; flex: none; }
.snap-modes button[aria-checked="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.snap-modes button:focus-visible { outline: 2px solid var(--accent); }
.snap-where i { font-style: normal; }
.snap-where, .snap-dest { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); min-width: 0; }
.snap-where span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-where b, .snap-dest b { color: var(--text); font-weight: 600; }
.snap-where svg, .snap-dest svg { width: 14px; height: 14px; flex: none; }
.snap-note { font-size: 12px; color: var(--warn, #d08a1c); }
.snap-pop textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px; font: inherit; font-size: 15px;
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.snap-pop textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.snap-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.snap-actions .snap-dest { flex: 1 1 160px; }
.snap-send { display: inline-flex; gap: 6px; align-items: center; }
.snap-send svg { width: 15px; height: 15px; }

.snap-jobs {
  /* über der Sync-Pille unten rechts */
  position: fixed; right: 12px; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); z-index: 9000;
  display: flex; flex-direction: column; gap: 6px; width: min(320px, calc(100vw - 24px));
}
.snap-job {
  display: flex; gap: 10px; align-items: center; cursor: pointer;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 8px 8px 12px; box-shadow: var(--shadow); font-size: 13px;
}
.snap-job:hover { background: var(--panel2); }
.snap-job:focus-visible { outline: 2px solid var(--accent); }
.snap-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--term-off, #888); }
.snap-busy .snap-dot { background: var(--term-busy, var(--accent)); animation: term-pulse 1.4s ease-in-out infinite; }
.snap-ask .snap-dot { background: var(--term-ask, #e5484d); }
.snap-done .snap-dot { background: var(--term-done, #3fcf8e); }
.snap-done { border-color: var(--term-done, #3fcf8e); }
.snap-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.snap-txt b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-txt small { color: var(--muted); font-size: 12px; }
.snap-x { background: none; border: 0; color: var(--muted); padding: 4px; cursor: pointer; border-radius: 6px; display: flex; }
.snap-x:hover { color: var(--text); background: var(--panel2); }
.snap-x svg { width: 14px; height: 14px; }
@media (max-width: 560px) {
  .snap-actions .snap-dest { flex-basis: 100%; }
  .snap-actions .btn { flex: 1; justify-content: center; padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) { .snap-busy .snap-dot, .snap-spin { animation: none; } }

/* Link-Vorschau-Fenster (ui/link-preview.js) */
.modal.lpv-modal { width: min(920px, calc(100vw - 24px)); max-width: none; }
.lpv-buehne { min-height: 160px; display: flex; flex-direction: column; gap: 10px; }
.lpv-laedt { margin: auto; color: var(--muted); font-size: 13px; padding: 40px 0; }
.lpv-bild { display: flex; justify-content: center; background: var(--bg); border-radius: 8px; overflow: hidden; }
.lpv-bild img { max-width: 100%; max-height: min(70vh, 900px); object-fit: contain; display: block; }
.lpv-titel { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.35; }
.lpv-desc { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 4px; }
.lpv-site { font-size: 12px; color: var(--muted); margin-top: 6px; }
.lpv-nav {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); flex: none;
  background: var(--panel); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lpv-nav:hover { border-color: var(--accent); }
.lpv-nav[hidden] { display: none; }
.lpv-nav .ico { width: 18px; height: 18px; }
.lpv-fuss { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 12px; color: var(--muted); min-width: 0; }
.lpv-zahl:empty { display: none; }
.lpv-url { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ===== Kamera-Studio (features/camera.js) — wie MemoryHub ===== */
.socam {
  position: fixed; inset: 0; z-index: 10050; background: #000; color: #fff;
  touch-action: none; user-select: none; -webkit-user-select: none;
  font-family: inherit;
}
.socam [hidden] { display: none !important; }
.socam button { font: inherit; cursor: pointer; border: 0; }
.socam .ico { width: 22px; height: 22px; }
.socam-stage { position: absolute; inset: 0; overflow: hidden; }
.socam-v, .socam-view, .socam-viewv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.socam-view, .socam-viewv { background: #000; z-index: 3; }
.socam-grid { position: absolute; inset: 0; pointer-events: none; }
.socam-grid::before, .socam-grid::after, .socam-grid i { content: ""; position: absolute; background: rgba(255,255,255,.35); }
.socam-grid::before { left: 33.33%; top: 0; bottom: 0; width: 1px; }
.socam-grid::after { left: 66.66%; top: 0; bottom: 0; width: 1px; }
.socam-grid i:first-child { top: 33.33%; left: 0; right: 0; height: 1px; }
.socam-grid i:last-child { top: 66.66%; left: 0; right: 0; height: 1px; }
.socam-focus { position: absolute; width: 72px; height: 72px; margin: -36px 0 0 -36px; border: 2px solid #ffd60a; border-radius: 14px; pointer-events: none; }
.socam-focus.go { animation: socamFocus .35s ease-out; }
@keyframes socamFocus { from { transform: scale(1.5); opacity: 0; } }
.socam-zlbl { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.5); padding: 6px 14px; border-radius: 99px; font-weight: 600; font-variant-numeric: tabular-nums; }
.socam-count { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 120px; font-weight: 700; text-shadow: 0 4px 24px rgba(0,0,0,.5); font-variant-numeric: tabular-nums; pointer-events: none; }
.socam-fx { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.socam-fx.go { animation: socamFx .25s ease-out; }
@keyframes socamFx { 0% { opacity: .85; } 100% { opacity: 0; } }
.socam-sflash { position: absolute; inset: 0; background: #fff; z-index: 2; }
.socam-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.socam-msg p { margin: 0; color: rgba(255,255,255,.8); }

.socam-top { position: absolute; left: 0; right: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 8px; padding: max(14px, env(safe-area-inset-top)) 14px 24px; background: linear-gradient(rgba(0,0,0,.5), transparent); }
.socam-sp { flex: 1; }
.socam-g { width: 44px; height: 44px; border-radius: 50%; padding: 0; position: relative; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.socam-g.sm { width: 38px; height: 38px; }
.socam-g small { position: absolute; right: 5px; bottom: 4px; font-size: 10px; font-weight: 700; line-height: 1; }
.socam-g.on { background: #ffd60a; color: #000; }
.socam-timer { background: #ff3b30; padding: 4px 14px; border-radius: 99px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.socam.recording .socam-top { background: none; }
.socam-hint, .socam-target { position: absolute; left: 50%; transform: translateX(-50%); z-index: 4; background: rgba(0,0,0,.55); padding: 6px 14px; border-radius: 99px; font-size: 14px; font-weight: 500; backdrop-filter: blur(10px); white-space: nowrap; pointer-events: none; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.socam-hint { top: calc(max(14px, env(safe-area-inset-top)) + 58px); }
.socam-target { top: calc(max(14px, env(safe-area-inset-top)) + 58px); font-size: 12.5px; opacity: .85; }
.socam-hint:not([hidden]) ~ .socam-target { top: calc(max(14px, env(safe-area-inset-top)) + 96px); }
.socam.sharp .socam-hint { background: rgba(48,209,88,.85); color: #000; }
.socam-menu { position: absolute; z-index: 6; right: 14px; top: calc(max(14px, env(safe-area-inset-top)) + 52px); min-width: 240px; background: rgba(28,28,30,.96); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.socam-menu button { background: none; color: #fff; text-align: left; padding: 11px 12px; border-radius: 9px; font-size: 14.5px; }
.socam-menu button:hover, .socam-menu button:active { background: rgba(255,255,255,.1); }

.socam-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 30px; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.socam-zoom { display: flex; gap: 6px; background: rgba(0,0,0,.35); border-radius: 99px; padding: 4px; }
.socam-zoom:empty, .socam.viewing .socam-zoom, .socam.viewing .socam-modes { display: none; }
.socam-zoom button { min-width: 38px; height: 34px; padding: 0 8px; border-radius: 99px; background: transparent; color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.socam-zoom button.on { background: rgba(255,255,255,.2); color: #ffd60a; }
.socam-modes { display: flex; gap: 4px; }
.socam-modes button { background: transparent; color: rgba(255,255,255,.7); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; }
.socam-modes button.on { color: #ffd60a; background: rgba(0,0,0,.3); }
.socam-bar { position: relative; width: 100%; max-width: 520px; display: flex; justify-content: space-between; align-items: center; padding: 6px 28px max(26px, env(safe-area-inset-bottom)); }
.socam-left { position: relative; width: 52px; height: 52px; }
.socam-thumb { width: 52px; height: 52px; border-radius: 12px; padding: 0; overflow: hidden; position: relative; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.6) !important; }
.socam-thumb:empty { visibility: hidden; }
.socam-thumb img { width: 100%; height: 100%; object-fit: cover; }
.socam-thumb .ico { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; fill: #fff; filter: drop-shadow(0 1px 3px #000); }
.socam-badge { position: absolute; left: 40px; top: -6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent, #0a84ff); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.socam-badge:empty { display: none; }
.socam-side { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 52px; }
.socam-shoot { width: 76px; height: 76px; border-radius: 50%; padding: 0; background: #fff; border: 4px solid rgba(255,255,255,.35) !important; background-clip: padding-box; transition: transform .15s, border-radius .15s, background .15s; }
.socam-shoot.video { background: #ff3b30; background-clip: padding-box; }
.socam-shoot.rec { border-radius: 16px; transform: scale(.62); }
.socam.sharp[data-mode="photo"] .socam-shoot { border-color: #30d158 !important; box-shadow: 0 0 0 3px rgba(48,209,88,.35); }
.socam-viewbar { display: flex; gap: 10px; justify-content: center; padding: 6px 16px max(26px, env(safe-area-inset-bottom)); }
.socam-pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 99px; background: rgba(255,255,255,.16); color: #fff; font-weight: 600; font-size: 14px; }
.socam-pill .ico { width: 18px; height: 18px; }
.socam-danger { background: #ff3b30; }
.socam-use { position: absolute; right: 16px; bottom: calc(max(26px, env(safe-area-inset-bottom)) + 96px); background: var(--accent, #0a84ff); }
.socam-strip { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 4px 16px; scrollbar-width: none; }
.socam-th { position: relative; flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; }
.socam-th.on { border-color: #ffd60a; }
.socam-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.socam-th-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; padding: 0; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; }
.socam-th-x .ico { width: 12px; height: 12px; }
.socam-ask { position: absolute; z-index: 7; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(0,0,0,.7); }
.socam-ask p { margin: 0; font-size: 17px; font-weight: 600; }
.socam-ask div { display: flex; gap: 10px; }
@media (orientation: landscape) and (max-height: 520px) {
  .socam-bottom { left: auto; top: 0; width: auto; flex-direction: row-reverse; padding: 0 max(14px, env(safe-area-inset-right)) 0 30px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.6)); }
  .socam-bar { flex-direction: column-reverse; height: 100%; padding: 16px 0; width: auto; }
  .socam-modes, .socam-zoom { flex-direction: column; }
  .socam-strip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .socam-fx.go, .socam-focus.go { animation: none; } }
/* APK: Camera2-Bild liegt HINTER dem durchsichtigen WebView → alles andere unsichtbar */
html.so-nativecam, html.so-nativecam body { background: transparent !important; }
html.so-nativecam body > :not(.socam):not(#toast-wrap) { visibility: hidden !important; }
html.so-nativecam .socam { background: transparent; }
html.so-nativecam .socam-v { display: none; }
/* Kamera-Knopf in der Topbar: nur am Handy/Tablet */
#btn-camera { display: none; }
@media (pointer: coarse) { #btn-camera { display: inline-flex; } }