/* ══════════════════════════════════════════════════════════════
   Mediathek — "gespannte Leine"
   Near-black room, two warm metals, hairlines under tension.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Surfaces — cool near-black, viewed in a dark room */
  --ink:      #0A0A0C;
  --ink-2:    #0E0F13;
  --panel:    #121319;
  --panel-2:  #171922;
  --line:     #24262F;
  --line-hi:  #33363F;

  /* Text — warm off-white, paper under a lamp, never clinical blue-white */
  --text:     #E8E6E3;
  --dim:      #8A8794;
  --dimmer:   #5D5B66;

  /* Two warm metals. Sienna acts, brass marks. */
  --cord:     #C2603F;
  --cord-hi:  #DC7A57;
  --cord-dim: #7A3D28;
  --brass:    #D9A441;
  --brass-dim:#8A6A2B;
  --steel:    #6E9BC4;
  --garnet:   #C4607F;

  --danger:   #B4453C;

  /* Type */
  --display: Bahnschrift, "DIN Condensed", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;

  --rail: 76px;
  --r: 3px;          /* hairline geometry: almost square, never pill */
  --r-lg: 6px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
code{ font-family:var(--mono); font-size:.92em; color:var(--cord-hi); }
::selection{ background:var(--cord-dim); color:#fff; }

:focus-visible{ outline:1.5px solid var(--cord-hi); outline-offset:2px; }

/* Alle Overlays werden über das hidden-Attribut geschaltet. Die eigenen
   display-Regeln unten würden die Browser-Regel für [hidden] sonst
   überstimmen — Lightbox, Modal und Blackout blieben sichtbar. */
[hidden]{ display:none !important; }

/* Scrollbars */
*{ scrollbar-width:thin; scrollbar-color:var(--line-hi) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--line); border:3px solid var(--ink); border-radius:6px; }
*::-webkit-scrollbar-thumb:hover{ background:var(--line-hi); }

/* ─────────── Type primitives ─────────── */
.eyebrow{
  font-family:var(--display); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dimmer);
  margin:0;
}
.view-title{
  font-family:var(--display); font-size:30px; font-weight:600;
  letter-spacing:.01em; margin:2px 0 0;
}

/* ══════════════ Gate ══════════════ */
.gate{
  position:fixed; inset:0; display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% -10%, #16131a 0%, transparent 60%),
    var(--ink);
  padding:32px; z-index:50;
}
.gate-inner{ max-width:520px; text-align:left; }
.gate-title{
  font-family:var(--display); font-size:44px; font-weight:600;
  margin:8px 0 14px; letter-spacing:.005em;
}
.gate-lead{ color:var(--dim); margin:0 0 28px; max-width:44ch; }
.gate-status{
  margin-top:22px; padding:12px 14px; border:1px solid var(--line);
  border-left:2px solid var(--cord); background:var(--panel);
  border-radius:var(--r); font-size:13px; color:var(--dim);
}
.gate-status.is-bad{ border-left-color:var(--danger); }
.gate-diag{ margin-top:32px; border-top:1px solid var(--line); padding-top:14px; }
.gate-diag summary{
  cursor:pointer; font-family:var(--display); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dimmer);
}
.gate-diag pre{
  font-family:var(--mono); font-size:11.5px; color:var(--dim);
  white-space:pre-wrap; margin:12px 0 0; line-height:1.7;
}

/* ══════════════ Shell ══════════════ */
.app{ display:grid; grid-template-columns:var(--rail) 1fr; height:100%; }

.rail{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:14px 0 12px; background:var(--ink-2);
  border-right:1px solid var(--line);
}
.rail-mark{ width:26px; height:26px; color:var(--cord); opacity:.85; margin-bottom:18px; }

.rail-item{
  width:60px; padding:9px 0 7px; border-radius:var(--r);
  display:grid; justify-items:center; gap:5px; color:var(--dimmer);
  transition:color .15s var(--ease), background .15s var(--ease);
}
.rail-item svg{ width:21px; height:21px; }
.rail-item span{
  font-family:var(--display); font-size:9.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
}
.rail-item:hover{ color:var(--dim); background:#ffffff06; }
.rail-item.is-active{ color:var(--text); background:#ffffff09; }
.rail-item.is-active::before{
  content:""; position:absolute; left:0; width:2px; height:30px;
  background:var(--cord); border-radius:0 2px 2px 0;
  transform:translateX(-8px);
}
.rail-item{ position:relative; }
.rail-mini svg{ width:18px; height:18px; }
.rail-spacer{ flex:1; }
.rail-save{
  width:6px; height:6px; border-radius:50%; margin-top:12px;
  background:var(--line-hi); transition:background .2s;
}
.rail-save.is-dirty{ background:var(--cord); animation:pulse 1s infinite; }
.rail-save.is-error{ background:var(--danger); }
@keyframes pulse{ 50%{ opacity:.25; } }

.main{ overflow-y:auto; overflow-x:hidden; position:relative; scroll-behavior:auto; }
.view{ padding:26px 30px 80px; max-width:2000px; }

.viewhead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:26px;
}

/* ══════════════ Signature: the taut cord (breadcrumb) ══════════════ */
.cord{ display:flex; align-items:center; min-height:34px; flex-wrap:wrap; }
.cord-node{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  padding-right:9px; color:var(--dim);
  font-family:var(--display); font-size:15px; font-weight:500;
  letter-spacing:.03em; transition:color .15s var(--ease);
}
.cord-node .knot{
  width:7px; height:7px; border-radius:50%;
  border:1.5px solid var(--line-hi); background:var(--ink);
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
  flex:none;
}
.cord-node + .cord-node::before{
  content:""; width:26px; height:1px; background:var(--line-hi);
  margin-right:9px; transition:background .18s var(--ease), width .18s var(--ease);
}
.cord-node:not(.is-last){ cursor:pointer; }
.cord-node:not(.is-last):hover{ color:var(--text); }
.cord-node:not(.is-last):hover .knot{ border-color:var(--cord); transform:scale(1.25); }
/* hovering a node slackens everything after it */
.cord-node:not(.is-last):hover ~ .cord-node{ color:var(--dimmer); opacity:.45; }
.cord-node:not(.is-last):hover ~ .cord-node::before{ background:var(--line); }
.cord-node.is-last{ color:var(--text); font-weight:600; }
.cord-node.is-last .knot{ border-color:var(--brass); background:var(--brass); }

/* ══════════════ Filter bar ══════════════ */
.fbar{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.fgroup{ display:flex; align-items:center; gap:9px; }
.fgroup > .eyebrow{ font-size:10px; }

.seg{ display:flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.seg button{
  padding:6px 13px; color:var(--dim); font-size:12.5px;
  font-family:var(--display); font-weight:500; letter-spacing:.05em;
  transition:color .13s, background .13s;
}
.seg button + button{ border-left:1px solid var(--line); }
.seg button:hover{ color:var(--text); background:#ffffff06; }
.seg button.is-on{ color:var(--ink); background:var(--text); }

.check{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; color:var(--dim); font-size:13px; user-select:none; }
.check input{ position:absolute; opacity:0; pointer-events:none; }
.check .box{
  width:15px; height:15px; border:1px solid var(--line-hi); border-radius:2px;
  display:grid; place-items:center; transition:all .15s var(--ease); flex:none;
}
.check .box svg{ width:10px; height:10px; stroke-width:2.4; opacity:0; color:var(--ink); }
.check input:checked + .box{ background:var(--brass); border-color:var(--brass); }
.check input:checked + .box svg{ opacity:1; }
.check:hover{ color:var(--text); }
.check input:focus-visible + .box{ outline:1.5px solid var(--cord-hi); outline-offset:2px; }

/* Tag multiselect */
.tagsel{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  min-width:250px; padding:4px 6px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--panel); position:relative;
}
.tagsel:focus-within{ border-color:var(--line-hi); }
.tagsel input{
  flex:1; min-width:110px; border:0; background:none; outline:none;
  padding:3px 2px; font-size:13px;
}
.tagsel input::placeholder{ color:var(--dimmer); }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 5px 3px 9px; border-radius:2px;
  background:var(--cord-dim); color:#F3DED4;
  font-size:12px; line-height:1.4; white-space:nowrap;
}
.chip-static{ background:var(--panel-2); color:var(--dim); padding:4px 10px; }
.chip-static b{ color:var(--text); font-weight:600; }
.chip button{ width:13px; height:13px; color:#F3DED4; opacity:.6; flex:none; }
.chip button:hover{ opacity:1; }
.chip button svg{ stroke-width:2.2; }

/* Am body verankert und per Skript positioniert: die Zeilen der Konfiguration
   kappen mit overflow:hidden alles, was aus ihnen herausragt. */
.ac{
  position:fixed; z-index:90; min-width:190px; max-width:340px;
  background:var(--panel-2); border:1px solid var(--line-hi);
  border-radius:var(--r); max-height:270px; overflow-y:auto;
  box-shadow:0 18px 44px #000a;
}
.ac button{
  display:flex; justify-content:space-between; gap:12px; width:100%;
  padding:7px 11px; text-align:left; font-size:13px; color:var(--dim);
}
.ac button:hover,.ac button.is-cursor{ background:#ffffff0a; color:var(--text); }
.ac button i{ font-style:normal; font-family:var(--mono); font-size:11px; color:var(--dimmer); }

/* ══════════════ Word cloud ══════════════ */
.cloud-wrap{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg,#101117,var(--ink-2));
  padding:34px 40px; margin-bottom:26px; min-height:190px;
  display:grid; place-items:center;
}
.cloud{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:6px 20px; max-width:1150px;
}
.word{
  font-family:var(--display); color:var(--dim);
  line-height:1.18; letter-spacing:.005em; position:relative;
  padding:1px 0 3px; transition:color .14s var(--ease);
  animation:wordin .34s var(--ease) both;
}
@keyframes wordin{ from{ opacity:0; transform:translateY(5px); } }
.word::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--cord); transition:right .26s var(--ease);
}
.word:hover{ color:var(--text); }
.word:hover::after{ right:0; }
.word.is-hot{ color:#BFB9B2; }
.cloud-empty{ color:var(--dimmer); font-size:13px; margin:0; }

/* ══════════════ Media browser ══════════════ */
.browser-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-bottom:11px; margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.browser-tools{ display:flex; gap:16px; }
.sel{ display:inline-flex; align-items:center; gap:8px; }
.sel > span{
  font-family:var(--display); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dimmer);
}
select{
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  border-radius:var(--r); padding:5px 8px; font-size:12.5px; cursor:pointer;
}
select:hover{ border-color:var(--line-hi); }

.grid{ position:relative; }
.grid-spacer{ width:100%; }
.grid-empty{ color:var(--dimmer); padding:44px 0; text-align:center; }

/* Platzhalter für ein Element, das sich nicht darstellen liess. Sichtbar
   statt still, damit der Ausfall nicht als "keine Treffer" durchgeht. */
.v-error{
  position:absolute; left:0; display:flex; align-items:center; padding:0 12px;
  border:1px solid var(--danger); border-radius:var(--r); background:#1C1211;
  color:#E8968E; font-family:var(--mono); font-size:11px; overflow:hidden;
}
.v-error bdi{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.tile{
  position:absolute; top:0; left:0;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column;
  transition:border-color .14s var(--ease), transform .14s var(--ease);
  contain:layout paint style;
}
.tile:hover{ border-color:var(--line-hi); transform:translateY(-2px); }
.tile-art{ position:relative; flex:1; background:#08080A; overflow:hidden; }
.tile-art img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .25s var(--ease);
}
.tile-art img.is-in{ opacity:1; }
.tile.is-blur .tile-art img{ filter:blur(16px); }
.tile.is-blur:hover .tile-art img{ filter:none; }
.tile-ph{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--line-hi); font-family:var(--mono); font-size:10px;
}

.tile-dur{
  position:absolute; right:6px; bottom:6px;
  padding:2px 5px; border-radius:2px; background:#000000BF;
  font-family:var(--mono); font-size:10.5px; color:#D8D5D1;
  letter-spacing:.02em;
}
.tile-kind{
  position:absolute; left:6px; bottom:6px; width:15px; height:15px;
  color:#fff; opacity:.72; filter:drop-shadow(0 1px 2px #000);
}
/* ─── Marker ───
   Messing für Favoriten, Stahlblau für Neu, Granat für Wünsche.
   Drei klar trennbare Töne, alle gedämpft genug für einen dunklen Raum. */
.mark{
  width:26px; height:26px; padding:5px; color:#fff; opacity:.4;
  filter:drop-shadow(0 1px 3px #000); flex:none;
  transition:opacity .13s, color .13s, transform .13s var(--ease);
}
.mark:hover{ opacity:1; transform:scale(1.16); }
.mark.is-on{ opacity:1; }
.mark-fav.is-on { color:var(--brass);  } .mark-fav.is-on svg  { fill:var(--brass);  }
.mark-neu.is-on { color:var(--steel);  } .mark-neu.is-on svg  { fill:var(--steel);  }
.mark-wish.is-on{ color:var(--garnet); } .mark-wish.is-on svg { fill:var(--garnet); }

.marks{ display:flex; align-items:center; gap:1px; }
.marks-tile{ position:absolute; left:4px; top:4px; }
.marks-row,.marks-lb{ flex:none; }
.marks-row .mark{ width:23px; height:23px; padding:4px; filter:none; }

/* Im Raster nur zeigen, was gesetzt ist — der Rest erscheint beim
   Überfahren. Sonst steht über jeder Kachel eine Symbolleiste. */
.marks-tile .mark{ opacity:0; }
.tile:hover .marks-tile .mark{ opacity:.5; }
.marks-tile .mark.is-on{ opacity:1; }
.marks-tile .mark:hover{ opacity:1; }

/* Marker-Symbol in Checkboxen und Sammel-Schaltern */
.mark-ico{ width:14px; height:14px; display:inline-block; flex:none; }
.check-fav  .mark-ico{ color:var(--brass);  }
.check-neu  .mark-ico{ color:var(--steel);  }
.check-wish .mark-ico{ color:var(--garnet); }
.check input:checked ~ .mark-ico svg{ fill:currentColor; }

.btn-mark{ display:inline-flex; align-items:center; gap:6px; }
.btn-mark-fav  .mark-ico{ color:var(--brass);  }
.btn-mark-neu  .mark-ico{ color:var(--steel);  }
.btn-mark-wish .mark-ico{ color:var(--garnet); }
.cfg-bulk-marks{ display:inline-flex; gap:6px; }

.tile-info{ padding:7px 8px 8px; border-top:1px solid var(--line); background:var(--panel); }
.tile-name{
  font-family:var(--mono); font-size:11px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  direction:rtl; text-align:left;
}
.tile-tags{
  display:flex; gap:4px; margin-top:5px; overflow:hidden;
  height:16px; flex-wrap:wrap;
}
.ttag{
  font-size:10px; padding:1px 5px; border-radius:2px;
  background:#ffffff0d; color:var(--dim); white-space:nowrap;
  line-height:1.4;
}
.ttag.more{ color:var(--dimmer); background:none; padding-left:1px; }

/* ══════════════ Wheels landing ══════════════ */
.tools{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; max-width:1100px; }
.tool{
  text-align:left; padding:24px 22px 20px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--panel),var(--ink-2));
  transition:border-color .16s var(--ease), transform .16s var(--ease);
}
.tool:hover{ border-color:var(--line-hi); transform:translateY(-3px); }
.tool-art{ width:56px; height:56px; color:var(--dim); margin-bottom:18px; transition:color .16s; }
.tool:hover .tool-art{ color:var(--cord); }
.tool h2{ font-family:var(--display); font-size:21px; font-weight:600; margin:0 0 6px; }
.tool p{ color:var(--dim); font-size:13px; margin:0 0 14px; min-height:38px; }
.tool-meta{
  font-family:var(--mono); font-size:11px; color:var(--dimmer);
  display:block; padding-top:12px; border-top:1px solid var(--line);
}
.tool-accent .tool-art{ color:var(--cord-dim); }

/* ══════════════ Wheel ══════════════ */
.wheel-wrap{ display:grid; gap:20px; justify-items:center; }
.wheel-stage{ position:relative; }
.wheel-stage canvas{ display:block; max-width:100%; height:auto; }
.wheel-hint{ color:var(--dimmer); font-size:12px; text-align:center; margin:0; }

.entry-list{ display:flex; flex-direction:column; gap:5px; max-height:260px; overflow-y:auto; padding-right:4px; }
.entry{
  display:flex; align-items:center; gap:10px; padding:6px 8px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
}
.entry .sw{ width:4px; align-self:stretch; border-radius:2px; flex:none; }
.entry .lbl{ flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.entry .lbl.mono{ font-family:var(--mono); font-size:11.5px; direction:rtl; text-align:left; }
.entry .icon-btn{ flex:none; }

/* ══════════════ Config list ══════════════ */
.cfg-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.cfg-bulk{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cfg-list{ position:relative; }

/* top/left zwingend: der Virtualisierer verschiebt per transform von 0/0 aus.
   Ohne top landet die Zeile an ihrer statischen Position hinter dem Spacer. */
.row{
  position:absolute; top:0; left:0;
  display:grid; grid-template-columns:26px 96px 1fr; gap:14px; align-items:center;
  padding:8px 10px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); contain:layout paint style; overflow:hidden;
}
.row:hover{ border-color:var(--line-hi); }
.row.is-sel{ border-color:var(--cord-dim); background:#17131A; }
.row-art{
  position:relative; width:96px; height:62px; border-radius:2px;
  overflow:hidden; background:#08080A; cursor:pointer; flex:none;
}
.row-art img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .22s; }
.row-art img.is-in{ opacity:1; }
.row-main{ min-width:0; display:grid; gap:6px; }
.row-head{ display:flex; align-items:center; gap:10px; min-width:0; }
.row-name{
  font-family:var(--mono); font-size:11.5px; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:rtl; text-align:left; flex:1;
}
.row-meta{ font-family:var(--mono); font-size:10.5px; color:var(--dimmer); white-space:nowrap; }
/* Eine Zeile mit Querlauf statt Umbruch — hält die Zeilenhöhe konstant,
   was Voraussetzung für die Virtualisierung ist. */
.row-tags{ display:flex; align-items:center; gap:5px; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; padding-bottom:2px; }
.row-tags::-webkit-scrollbar{ height:4px; }
.row-tags::-webkit-scrollbar-thumb{ border:0; background:var(--line); }
.row-tags .chip{ flex:none; }
.row-tags .chip{ font-size:11.5px; padding:2px 4px 2px 8px; }
.tagadd{
  border:1px dashed var(--line-hi); background:none; border-radius:2px;
  padding:2px 8px; font-size:11.5px; color:var(--dimmer); min-width:74px;
  outline:none; transition:border-color .14s, color .14s;
}
.tagadd:focus{ border-style:solid; border-color:var(--cord); color:var(--text); }
.tagadd::placeholder{ color:var(--dimmer); }

/* ══════════════ Buttons & inputs ══════════════ */
.btn{
  padding:7px 15px; border:1px solid var(--line-hi); border-radius:var(--r);
  background:var(--panel-2); color:var(--text); font-size:13px;
  font-family:var(--display); font-weight:500; letter-spacing:.04em;
  transition:background .14s, border-color .14s, color .14s;
}
.btn:hover{ background:#20232C; border-color:#3E424C; }
.btn-primary{ background:var(--cord); border-color:var(--cord); color:#150B06; font-weight:600; }
.btn-primary:hover{ background:var(--cord-hi); border-color:var(--cord-hi); }
.btn-ghost{ background:none; border-color:var(--line); color:var(--dim); }
.btn-ghost:hover{ background:#ffffff06; color:var(--text); border-color:var(--line-hi); }
.btn-danger:hover{ background:#2A1512; border-color:var(--danger); color:#E8968E; }
.btn-lg{ padding:11px 24px; font-size:15px; }
.btn-sm{ padding:5px 11px; font-size:12px; }
.btn:disabled{ opacity:.35; cursor:not-allowed; }
.btn-spin{
  min-width:180px; padding:13px 30px; font-size:18px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:600;
}

.icon-btn{
  width:26px; height:26px; padding:5px; border-radius:var(--r);
  color:var(--dimmer); transition:color .13s, background .13s;
}
.icon-btn:hover{ color:var(--text); background:#ffffff0d; }
.icon-btn.danger:hover{ color:#E8968E; background:#2A1512; }

.input{
  padding:7px 11px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); color:var(--text); font-size:13px; outline:none;
  transition:border-color .14s;
}
.input:focus{ border-color:var(--line-hi); }
.input::placeholder{ color:var(--dimmer); }
.input-sm{ padding:5px 9px; font-size:12px; width:150px; }
input[type=search]{ min-width:230px; }

/* ══════════════ Lightbox ══════════════ */
/* Stapelreihenfolge: Modal 70 < Lightbox 80 < Ergebnis 85 < Blackout 200
   < Toasts 300. Räder laufen im Modal, ihre Treffer müssen darüber landen. */
.lb{ position:fixed; inset:0; z-index:80; background:#000000F2; display:grid; place-items:center; animation:fade .16s var(--ease); }
@keyframes fade{ from{ opacity:0; } }
.lb-stage{ max-width:100vw; max-height:100vh; display:grid; place-items:center; }
.lb-stage img,.lb-stage video{ max-width:98vw; max-height:94vh; display:block; object-fit:contain; }
.lb-close{
  position:absolute; top:14px; right:16px; width:42px; height:42px; padding:11px;
  color:#fff; background:#ffffff0f; border-radius:var(--r); backdrop-filter:blur(6px);
  transition:background .14s;
}
.lb-close:hover{ background:#ffffff26; }
.lb-close svg{ stroke-width:1.8; }
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:76px; padding:22px 14px; color:#fff; opacity:.28;
  transition:opacity .14s, background .14s;
}
.lb-nav:hover{ opacity:.95; background:#ffffff0f; }
.lb-prev{ left:8px; } .lb-next{ right:8px; }
.lb-foot{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(0deg,#000000E6,transparent);
  font-family:var(--mono); font-size:12px; color:#C9C6C2;
}
.lb-foot .ttag{ font-family:var(--body); }

/* ══════════════ Modal ══════════════ */
.modal{ position:fixed; inset:0; z-index:70; background:#000000D9; display:grid; place-items:center; padding:24px; animation:fade .16s var(--ease); }
.modal-box{
  background:var(--ink-2); border:1px solid var(--line-hi); border-radius:var(--r-lg);
  width:min(880px,100%); max-height:92vh; display:flex; flex-direction:column;
  box-shadow:0 30px 90px #000C;
}
.modal-box.wide{ width:min(1180px,100%); }
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 18px; border-bottom:1px solid var(--line); flex:none;
}
.modal-head h2{ font-family:var(--display); font-size:19px; font-weight:600; margin:0; letter-spacing:.02em; }
.modal-body{ padding:20px 18px; overflow-y:auto; }
.modal-cols{ display:grid; grid-template-columns:1fr 300px; gap:26px; align-items:start; }
@media (max-width:820px){ .modal-cols{ grid-template-columns:1fr; } }
.modal-foot{ display:flex; gap:10px; justify-content:center; padding-top:18px; }
.panel-title{
  font-family:var(--display); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dimmer); margin:0 0 10px;
}
.form-row{ display:flex; gap:8px; margin-bottom:12px; }
.form-row .input{ flex:1; }

/* picker grid inside modal */
.pick{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; max-height:56vh; overflow-y:auto; }
.pick-item{ position:absolute; top:0; left:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#08080A; }
.pick-item img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .22s; }
.pick-item img.is-in{ opacity:1; }
.pick-item.is-on{ border-color:var(--cord); }
.pick-item.is-on::after{
  content:""; position:absolute; inset:0; border:2px solid var(--cord); border-radius:var(--r);
  box-shadow:inset 0 0 0 1px #000;
}
.pick-name{
  position:absolute; left:0; right:0; bottom:0; padding:3px 5px;
  background:#000000CC; font-family:var(--mono); font-size:9.5px;
  color:#D0CDC9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  direction:rtl; text-align:left;
}

/* tag manager */
.tagmgr{ display:flex; flex-direction:column; gap:4px; max-height:60vh; overflow-y:auto; }
.tagmgr-row{ display:grid; grid-template-columns:1fr 62px auto; gap:10px; align-items:center; padding:6px 8px; border-radius:var(--r); }
.tagmgr-row:hover{ background:#ffffff07; }
.tagmgr-row .n{ font-family:var(--mono); font-size:11px; color:var(--dimmer); text-align:right; }

/* ══════════════ Duplikate ══════════════ */
.dupe-bar-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.dupe-status{ color:var(--dim); font-size:13px; }
.dupe-bar{ height:2px; background:var(--line); border-radius:1px; overflow:hidden; margin-bottom:16px; }
.dupe-bar i{ display:block; height:100%; width:0; background:var(--cord); transition:width .2s linear; }

.dupe-list{ display:flex; flex-direction:column; gap:14px; }
.dupe-group{ border:1px solid var(--line); border-radius:var(--r); background:var(--panel); overflow:hidden; }
.dupe-ghead{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:8px 12px; border-bottom:1px solid var(--line); background:var(--ink-2);
}
.dupe-waste{ font-family:var(--mono); font-size:11px; color:var(--cord); }

.dupe-row{
  display:grid; grid-template-columns:18px 62px 84px 1fr; gap:12px; align-items:center;
  padding:8px 12px; cursor:pointer; border-left:2px solid transparent;
}
.dupe-row + .dupe-row{ border-top:1px solid var(--line); }
.dupe-row:hover{ background:#ffffff06; }
/* Die behaltene Datei ist die Ausnahme, nicht die Regel — deshalb markiert. */
.dupe-row.is-keep{ border-left-color:var(--brass); background:#ffffff05; }
.dupe-row input{ accent-color:var(--brass); width:15px; height:15px; }
.dupe-pick{
  font-family:var(--display); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dimmer);
}
.dupe-row.is-keep .dupe-pick{ color:var(--brass); }
.dupe-art{ width:84px; height:56px; border-radius:2px; overflow:hidden; background:#08080A; }
.dupe-art img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .22s; }
.dupe-art img.is-in{ opacity:1; }
.dupe-info{ min-width:0; display:grid; gap:3px; }
.dupe-name{
  font-family:var(--mono); font-size:11.5px; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:rtl; text-align:left;
}
.dupe-meta{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; color:var(--dimmer); }
.dupe-mark{ width:13px; height:13px; flex:none; }
.dupe-mark svg{ fill:currentColor; }
.dupe-mark.mark-fav{ color:var(--brass); }
.dupe-mark.mark-neu{ color:var(--steel); }
.dupe-mark.mark-wish{ color:var(--garnet); }

.dupe-foot{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
}
.dupe-fail{ border:1px solid var(--danger); border-radius:var(--r); padding:12px 14px; }
.dupe-fail p{ margin:0 0 4px; font-family:var(--mono); font-size:11.5px; color:#E8968E; }

/* ══════════════ Result box ══════════════ */
.result{
  position:fixed; inset:0; z-index:85; display:grid; place-items:center;
  background:#000000EE; padding:40px; cursor:pointer; animation:fade .2s var(--ease);
}
.result-text{
  font-family:var(--display); font-size:clamp(34px,8vw,104px); font-weight:600;
  text-align:center; line-height:1.06; letter-spacing:.01em; max-width:16ch;
  color:var(--text); padding:36px 48px;
  border-top:1.5px solid var(--cord); border-bottom:1.5px solid var(--cord);
  animation:pop .42s var(--ease) both;
}
@keyframes pop{ from{ opacity:0; transform:scale(.9); letter-spacing:.14em; } }

/* ══════════════ Blackout ══════════════ */
.blackout{ position:fixed; inset:0; z-index:200; background:#000; display:grid; place-items:end center; padding-bottom:24px; }
.blackout p{ color:#111; font-family:var(--mono); font-size:11px; margin:0; }

/* ══════════════ Toasts ══════════════ */
.toasts{ position:fixed; right:18px; bottom:18px; z-index:300; display:flex; flex-direction:column; gap:8px; align-items:flex-end; pointer-events:none; }
.toast{
  padding:9px 14px; border:1px solid var(--line-hi); border-left:2px solid var(--cord);
  border-radius:var(--r); background:var(--panel-2); font-size:13px;
  box-shadow:0 12px 32px #000A; animation:slidein .22s var(--ease);
  max-width:380px;
}
.toast.bad{ border-left-color:var(--danger); }
@keyframes slidein{ from{ opacity:0; transform:translateX(14px); } }

/* ══════════════ Reduced motion ══════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ══════════════ Narrow ══════════════ */
@media (max-width:720px){
  :root{ --rail:60px; }
  .view{ padding:18px 14px 70px; }
  .cloud-wrap{ padding:22px 16px; }
  .rail-item{ width:52px; }
  .rail-item span{ display:none; }
}