:root {
  --bg: #1b1d21;
  --surface: #24272d;
  --surface-2: #2d3138;
  --line: #3a3f48;
  --text: #e6e8eb;
  --muted: #9aa1ac;
  --accent: #6cb2ff;
  --good: #7bd88f;
  --warn: #f0b45a;
  --tile: 170px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.4 system-ui, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  display: grid;
  grid-template: 42px 1fr / 290px 1fr 350px;
  overflow: hidden;
}
header {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.spacer { flex: 1; }
#path { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
#status { color: var(--muted); font-size: 12px; }
.slider { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }

/* Ordnerbaum */
#tree { overflow: auto; border-right: 1px solid var(--line); padding: 6px 0; }
#tree ul { list-style: none; margin: 0; padding-left: 14px; }
#tree > ul { padding-left: 2px; }
.node { display: flex; align-items: center; gap: 2px; padding: 2px 6px 2px 0; border-radius: 4px; cursor: pointer; }
.node:hover { background: var(--surface-2); }
.node.selected { background: #2f4763; }
.node .arrow { width: 18px; text-align: center; color: var(--muted); flex: none; user-select: none; }
.node .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node .count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.node .status-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin: 0 5px; }
.node .status-dot.partial { background: var(--warn); }
.node .status-dot.done { background: var(--good); }

/* Mitte: Leiste und Raster */
#center { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 0; overflow: hidden; }
#toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; background: var(--surface); border-bottom: 1px solid var(--line);
}
#toolbar #search { flex: 1 1 220px; max-width: 420px; }
#selection-info, #status-field { color: var(--muted); font-size: 12px; }
#status-field { display: flex; align-items: center; gap: 6px; }
#toolbar input, #toolbar select, .editor input:not([type=checkbox]), .editor textarea {
  font: inherit; font-size: 13px; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px;
}
#toolbar input:focus, #toolbar select:focus, .editor input:focus, .editor textarea:focus { outline: none; border-color: var(--accent); }

/* Raster */
#grid {
  min-height: 0;
  overflow: auto; padding: 10px; outline: none;
  display: grid; align-content: start; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr));
}
#grid .empty { grid-column: 1 / -1; color: var(--muted); padding: 30px; text-align: center; }
.tile {
  background: var(--surface); border: 2px solid transparent; border-radius: 6px;
  padding: 5px; cursor: pointer; min-width: 0;
  content-visibility: auto; contain-intrinsic-size: var(--tile) calc(var(--tile) + 44px);
}
.tile.selected { border-color: #3d5f86; background: #26313f; }
.tile.focus { border-color: var(--accent); background: #2a3a4d; }
.stars-small { color: var(--warn); letter-spacing: -1px; }
.tile.rejected { opacity: .4; }
.tile .thumb {
  aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  background: #111316; border-radius: 4px; position: relative;
}
/* Fest in das Quadrat gesetzt: Sonst dehnt ein sehr hohes Bild (Filmstreifen) die Zeile, es ist nur sein
   oberes Drittel zu sehen, und gedreht verschwindet es ganz. */
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-orientation: none; }
.tile .video { color: var(--muted); font-size: 12px; text-align: center; }
.tile .video b { display: block; font-size: 30px; line-height: 1.2; }
/* Video im Raster: Standbild mit ▶ und Dauer */
.tile .play {
  position: absolute; right: 4px; bottom: 4px; font-size: 11px; padding: 1px 6px; border-radius: 3px;
  background: rgba(0, 0, 0, .7); color: #fff; font-variant-numeric: tabular-nums;
}
.poster-tools { margin-top: 6px; }
/* Datum verschieben (Dialog) */
.shift-link { margin: -4px 0 8px; }
.shift-link a { cursor: pointer; color: var(--accent); }
.box.shift-box { width: min(560px, calc(100vw - 32px)); display: grid; gap: 10px; }
.shift-box input[type="number"] { width: 72px; }
.shift-box .field > span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 12px; }
.shift-box #shift-to { width: 100%; }
#shift-preview { min-height: 96px; }
#shift-preview ul { margin: 4px 0; padding-left: 18px; }
#shift-preview .error { color: var(--warn, #e0805a); }
.tile .badge {
  position: absolute; left: 4px; top: 4px; font-size: 10px; padding: 1px 5px; border-radius: 3px;
  background: rgba(0, 0, 0, .65); color: var(--text); text-transform: uppercase; letter-spacing: .03em;
}
.tile .badge.right { left: auto; right: 4px; }
.tile .name { margin-top: 4px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .line { font-size: 11px; color: var(--muted); display: flex; gap: 8px; overflow: hidden; white-space: nowrap; min-height: 16px; }
.tile .line .guessed { font-style: italic; }
.tile .line .open { color: var(--warn); }
.tile .line .suggest { color: var(--accent); }

/* Eigenschaften */
#details, #viewer-details { overflow: auto; padding: 12px 14px; border-left: 1px solid var(--line); background: var(--surface); }
#details h2, #viewer-details h2 { font-size: 14px; margin: 0 0 2px; overflow-wrap: anywhere; }
.sub { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
dl { margin: 12px 0 0; display: grid; grid-template-columns: 96px 1fr; gap: 5px 10px; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
dd.missing { color: #5d646f; }
.source { color: var(--muted); font-size: 11px; margin-left: 6px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 1px 0; }
h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 4px; }
a { color: var(--accent); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }

/* Großansicht */
#viewer { position: fixed; inset: 0; z-index: 10; background: #0d0e10; display: grid; grid-template: 42px 1fr / 1fr 350px; }
#viewer[hidden] { display: none; }
#viewer-head { grid-area: 1 / 1 / 2 / 3; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
#viewer-head .hint { color: var(--muted); font-size: 12px; }
#stage { grid-area: 2 / 1; position: relative; overflow: hidden; cursor: grab; user-select: none; }
#stage.dragging { cursor: grabbing; }
#viewer-details { grid-area: 2 / 2; }
#sheet { position: absolute; left: 50%; top: 50%; transform-origin: center; }
#sheet img { width: 100%; height: 100%; display: block; image-orientation: none; -webkit-user-drag: none; }
#sheet .frame { position: absolute; border: calc(2px / var(--s, 1)) solid var(--good); }
#sheet .frame.open { border-style: dashed; border-color: var(--warn); }
#sheet .frame.suggested { border-style: dashed; border-color: var(--accent); }
#sheet .frame.rejected { display: none; }
/* Rahmen-Editor: gewählt, neu aufgezogen, beim Darüberfahren über einen Namen, Ziel beim Ziehen */
#sheet .frame.selected { border-style: solid; border-color: #fff; box-shadow: 0 0 0 calc(1px / var(--s, 1)) #000; }
#sheet .frame.pending { border: calc(2px / var(--s, 1)) dashed #fff; box-shadow: 0 0 0 calc(1px / var(--s, 1)) #000; }
#sheet .frame.hl, #sheet .frame.drop { border-style: solid; border-color: var(--accent); }
#stage.assign { cursor: crosshair; }
#stage .label {
  position: absolute; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-size: 13px; padding: 1px 6px; background: rgba(0, 0, 0, .7); color: #fff; border-radius: 3px;
}
#stage .label.suggested { color: var(--accent); font-style: italic; }
#stage .label.best { background: var(--accent); color: #0d0e10; font-weight: 600; font-style: normal; }
#stage.no-frames .frame, #stage.no-frames .label, #stage.no-frames #frame-pop { display: none; }
#frame-pop {
  position: absolute; transform: translateX(-50%); z-index: 2; display: grid; gap: 4px; width: 250px;
  padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5); cursor: default; user-select: text;
}
#frame-pop input {
  font: inherit; font-size: 13px; color: var(--text); background: var(--bg);
  border: 1px solid var(--accent); border-radius: 5px; padding: 4px 8px; outline: none;
}
#frame-pop .pop-hint { color: var(--muted); font-size: 11px; }
#frame-pop .pop-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; }
#frame-pop .pop-list li { padding: 3px 8px; border-radius: 4px; cursor: pointer; font-size: 13px; overflow-wrap: anywhere; }
#frame-pop .pop-list li:hover { background: var(--surface-2); }
#frame-pop .pop-list li.hl { background: var(--accent); color: #0d0e10; }
.frames { margin-top: 8px; }
.frames .quick { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; }
.frames .quick button { padding: 2px 8px; font-size: 12px; }
.frames .quick button.active { background: var(--accent); border-color: var(--accent); color: #0d0e10; }
.frames .frames-hint { margin-top: 4px; font-size: 11px; }
.chip[draggable="true"] { cursor: grab; }
/* Videoplayer der Großansicht (player.js): Bild oben, Bedienleiste unten. Das Video bleibt ungedreht,
   die Lage kommt als transform; deshalb setzt player.js Breite und Höhe selbst. */
#stage .player { position: absolute; inset: 0; display: flex; flex-direction: column; cursor: default; background: #000; }
#stage .player .screen { flex: 1; position: relative; overflow: hidden; min-height: 0; }
#stage .player video { position: absolute; left: 50%; top: 50%; background: #000; object-fit: contain; }
#stage .player .overlay { position: absolute; inset: 0; display: grid; place-items: end center; pointer-events: none; }
#stage .player .overlay .note {
  margin-bottom: 28px; padding: 10px 16px; border-radius: 6px; background: rgba(0, 0, 0, .75); color: var(--text);
  text-align: center; max-width: 80%; pointer-events: auto;
}
#stage .player .overlay progress { display: block; width: 260px; max-width: 100%; margin: 8px auto 4px; }
#stage .player .overlay small { color: var(--muted); }
#stage .player .overlay button { margin-left: 8px; }
#stage .player .bar {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--surface);
  border-top: 1px solid var(--line); font-size: 13px;
}
#stage .player .bar button { padding: 2px 9px; min-width: 34px; }
#stage .player .bar button:disabled { opacity: .4; cursor: default; }
#stage .player .bar .time { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
#stage .player .bar .seek { flex: 1; min-width: 60px; accent-color: var(--accent); }
#stage .player .bar .volume { width: 80px; accent-color: var(--accent); }
#stage .player .bar .download { color: var(--muted); text-decoration: none; white-space: nowrap; }
#stage .player .bar .download:hover { color: var(--text); }
#stage .player:fullscreen .bar { opacity: 0; transition: opacity .2s; }
#stage .player:fullscreen:hover .bar, #stage .player:fullscreen:not(.playing) .bar { opacity: 1; }
#stage .stage-message { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 40px; }
#loading { position: absolute; right: 14px; bottom: 12px; color: var(--muted); font-size: 12px; background: rgba(0, 0, 0, .6); padding: 3px 8px; border-radius: 4px; }
button { font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 4px 12px; cursor: pointer; }
button:hover { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
#user { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; }
#user button { font-size: 12px; padding: 2px 8px; }
#user a { font-size: 12px; }
#status .error { color: var(--warn); }

/* Anmeldeseite und Formulare in Dialogen */
body.login { display: grid; place-items: center; grid-template: 1fr / 1fr; }
.login-box {
  width: min(340px, calc(100vw - 32px)); display: grid; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 24px;
}
.login-box h1 { font-size: 18px; margin: 0 0 4px; }
.login-box label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.login-box input {
  font: inherit; font-size: 14px; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 5px; padding: 7px 9px;
}
.login-box input:focus { outline: none; border-color: var(--accent); }
.login-box button { padding: 7px 12px; }
.message { margin: 0; min-height: 1.4em; color: var(--warn); font-size: 13px; }
.message.ok { color: var(--good); }
.muted { color: var(--muted); font-size: 12px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
dialog { padding: 0; border: none; background: transparent; color: var(--text); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }

/* Eigenschaften-Editor */
.editor { display: grid; gap: 9px; margin-top: 12px; }
.editor .field { display: grid; gap: 3px; }
.editor .field > span:first-child { color: var(--muted); font-size: 12px; }
.editor input:not([type=checkbox]), .editor textarea { width: 100%; }
.editor textarea { resize: vertical; min-height: 2.6em; }
.editor input:disabled, .editor textarea:disabled { opacity: .75; }
.editor h3 { margin: 6px 0 0; }
.parsed { font-size: 11px; color: var(--muted); min-height: 1em; }
.parsed.ok { color: var(--good); }
.parsed.error { color: var(--warn); }
.rights-hint { color: var(--warn); }
.stars { display: inline-flex; }
.star { background: none; border: none; padding: 0 1px; font-size: 18px; line-height: 1; color: #4b515b; }
.star.on { color: var(--warn); }
.star:hover:not(:disabled) { color: #f7cf8c; border: none; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 3px; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 1px 3px 1px 9px;
}
.chip.partial { border-style: dashed; }
.chip a { color: var(--text); }
.chip small { color: var(--muted); }
.chip button { border: none; background: none; padding: 0 4px; font-size: 12px; color: var(--muted); }
.chip button:hover { color: var(--text); border: none; }
.row.tight { gap: 6px; flex-wrap: nowrap; }
.row.tight input { flex: 1; min-width: 0; }
.row.tight button { flex: none; font-size: 12px; padding: 4px 9px; }

/* Karte */
.box.map-box { width: min(1200px, calc(100vw - 32px)); max-height: 94vh; display: grid; gap: 10px; overflow: visible; }
#map { height: min(66vh, 680px); border: 1px solid var(--line); border-radius: 6px; }
.searchbox { position: relative; flex: 1; }
#map-search {
  width: 100%; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 5px; padding: 6px 10px;
}
#map-search:focus { outline: none; border-color: var(--accent); }
#map-suggestions {
  position: absolute; z-index: 2000; left: 0; right: 0; top: calc(100% + 2px);   /* über den Leaflet-Knöpfen (1000) */
  list-style: none; margin: 0; padding: 4px 0; max-height: 340px; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
#map-suggestions li { padding: 5px 12px; cursor: pointer; }
#map-suggestions li small { display: block; color: var(--muted); font-size: 11px; }
#map-suggestions li.active, #map-suggestions li:hover { background: #2f4763; }
#map-text { font-size: 13px; }

/* Meldungen unten in der Mitte */
#toasts { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); display: grid; gap: 6px; z-index: 30; }
.toast {
  display: flex; align-items: center; gap: 12px; padding: 7px 12px; font-size: 13px;
  background: #30353d; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
}
.toast.error { border-color: var(--warn); color: #ffd9a0; }
.toast button { font-size: 12px; padding: 2px 8px; }

/* Live: Änderungen anderer, etwa der KI über MCP */
#live-banner {
  position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 10px; max-width: min(820px, calc(100vw - 32px));
  padding: 8px 10px 8px 14px; font-size: 13px; border-radius: 6px;
  background: #1f3a5c; border: 1px solid var(--accent); box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
#live-banner[hidden] { display: none; }
#live-banner.show { animation: live-in .25s ease-out; }
#live-banner button { font-size: 12px; padding: 2px 8px; }
@keyframes live-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.flash { animation: flash 2.4s ease-out; border-radius: 4px; }
@keyframes flash { 0%, 30% { background: rgba(108, 178, 255, .28); } 100% { background: transparent; } }

/* Verlauf */
.box {
  width: min(760px, calc(100vw - 32px)); max-height: 80vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px;
}
.box h1 { font-size: 16px; margin: 0; }
#history-list { list-style: none; margin: 12px 0 0; padding: 0; }
#history-list li {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--line);
}
#history-list .time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
#history-list li.undone .text { text-decoration: line-through; color: var(--muted); }
#history-list button { font-size: 12px; padding: 2px 8px; }

/* KI: Sitzungscode und Verbindungen */
#ai-code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--muted); }
#ai-button.active { border-color: #4caf7a; }
#ai-button.active::before { content: "●"; color: #4caf7a; margin-right: 4px; }
.ai-box { display: grid; gap: 10px; }
.ai-box h3 { margin: 6px 0 0; font-size: 13px; }
.ai-box p { margin: 0; line-height: 1.45; }
.session-code { font-family: ui-monospace, Consolas, monospace; font-size: 20px; letter-spacing: 2px; }
#ai-url, #ai-key-new code { font-family: ui-monospace, Consolas, monospace; user-select: all; word-break: break-all; }
#ai-list { list-style: none; margin: 0; padding: 0; }
#ai-list li { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
#ai-list .text { flex: 1; }
#ai-list button { font-size: 12px; padding: 2px 8px; }
#ai-key-name { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; }

/* Verwaltung */
body.admin { display: block; overflow: auto; }
body.admin header { height: 42px; position: sticky; top: 0; z-index: 1; }
body.admin main { max-width: 980px; margin: 0 auto; padding: 16px; display: grid; gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: grid; gap: 10px; }
.card h2 { font-size: 15px; margin: 0; }
.card.off { opacity: .6; }
.card.help ul { margin: 0; padding-left: 18px; color: var(--muted); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; align-items: end; }
.fields label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.fields .message { grid-column: 1 / -1; }
body.admin input:not([type=checkbox]), body.admin select {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 5px; padding: 5px 8px; width: 100%;
}
body.admin input:focus, body.admin select:focus { outline: none; border-color: var(--accent); }
.check { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; white-space: nowrap; }
.divider { width: 1px; align-self: stretch; background: var(--line); }
.areas { width: 100%; border-collapse: collapse; }
.areas th { text-align: left; font-weight: normal; color: var(--muted); font-size: 12px; padding: 0 6px 4px 0; }
.areas td { padding: 3px 6px 3px 0; vertical-align: middle; }
.areas td:first-child { width: 45%; }
.areas .remove { padding: 2px 8px; }

/* Verwaltung, Abschnitt KI (admin_ai.js) */
.stack { display: grid; gap: 14px; }
.ai-models td.nowrap { white-space: nowrap; width: 1%; }
.ai-models td:first-child { width: 26%; }
.ai-models td.efforts { font-size: 12px; }
.ai-models td.efforts .check { margin-right: 6px; }
.ai-models .test-model { padding: 2px 8px; font-size: 12px; }
#ai-month { width: auto; }
.ai-usage { width: 100%; border-collapse: collapse; font-size: 13px; }
.ai-usage th { text-align: left; font-weight: normal; color: var(--muted); font-size: 12px; padding: 0 8px 4px 0; }
.ai-usage td { padding: 3px 8px 3px 0; border-top: 1px solid var(--line); }
.ai-usage tfoot td { font-weight: 600; }
.ai-usage .num { text-align: right; white-space: nowrap; }
.card.help code { color: var(--text); }

/* Bildbearbeitung (Etappe 8 und 9): Drehen, Editor für Ausschnitt, Korrektur und Streifen */
#viewer-head .hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#viewer-tools { display: flex; gap: 4px; flex: none; }
#viewer-tools[hidden] { display: none; }
#viewer-tools button { padding: 2px 9px; font-size: 13px; }
.editor .tools { flex-wrap: wrap; gap: 4px; }
.editor .tools button { padding: 2px 8px; font-size: 13px; flex: none; }
.tile .badge.low { top: auto; bottom: 4px; text-transform: none; letter-spacing: 0; }
.tile .badge.warn { color: var(--warn); }
.render-note { color: var(--accent); }
#stage.editing { cursor: default; }
#edit-area { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
#edit-box { position: absolute; overflow: hidden; background: #000; }
#edit-box img { width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
#edit-box .crop { position: absolute; box-sizing: border-box; border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .75); cursor: move; }
#edit-box.single .crop { box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), 0 0 0 9999px rgba(0, 0, 0, .6); }
#edit-box .crop:not(.active) { border: 1px dashed var(--warn); cursor: pointer; }
#edit-box .crop .tag {
  position: absolute; left: 4px; top: 3px; padding: 0 6px; border-radius: 3px; font-size: 12px; font-weight: 600;
  background: rgba(0, 0, 0, .7); color: var(--warn); pointer-events: none;
}
#edit-box .crop.active .tag { color: #fff; }
#edit-box .crop .h { position: absolute; width: 11px; height: 11px; margin: -6px; background: #fff; border: 1px solid #000; display: none; }
#edit-box .crop.active .h { display: block; }
#edit-box.ratio .crop .h.n, #edit-box.ratio .crop .h.s, #edit-box.ratio .crop .h.e, #edit-box.ratio .crop .h.w { display: none; }
#edit-box .h.nw { left: 0; top: 0; cursor: nwse-resize; }
#edit-box .h.n { left: 50%; top: 0; cursor: ns-resize; }
#edit-box .h.ne { left: 100%; top: 0; cursor: nesw-resize; }
#edit-box .h.e { left: 100%; top: 50%; cursor: ew-resize; }
#edit-box .h.se { left: 100%; top: 100%; cursor: nwse-resize; }
#edit-box .h.s { left: 50%; top: 100%; cursor: ns-resize; }
#edit-box .h.sw { left: 0; top: 100%; cursor: nesw-resize; }
#edit-box .h.w { left: 0; top: 50%; cursor: ew-resize; }
#edit-box.grid::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background-size: 10% 10%;
  background-image: linear-gradient(rgba(255, 255, 255, .4) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .4) 1px, transparent 1px);
}
#edit-wait { position: absolute; right: 14px; bottom: 12px; color: var(--muted); font-size: 12px; background: rgba(0, 0, 0, .6); padding: 3px 8px; border-radius: 4px; }
.editpanel { display: grid; gap: 7px; }
.editpanel h3 { margin: 10px 0 0; }
.editpanel .row.tight { flex-wrap: wrap; }
.editpanel .row.tight button { padding: 3px 9px; }
.editpanel button.on { background: var(--accent); border-color: var(--accent); color: #0d0e10; }
.editpanel select, .editpanel input[type=number] {
  font: inherit; font-size: 13px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px;
}
.editpanel input[type=number] { width: 56px; }
.editpanel .slide { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; font-size: 12px; color: var(--muted); }
.editpanel .slide output { color: var(--text); font-variant-numeric: tabular-nums; }
.editpanel .slide input { grid-column: 1 / -1; width: 100%; margin: 2px 0 0; accent-color: var(--accent); }
.editpanel .framelist { margin: 0; padding: 0; list-style: none; }
.editpanel .framelist li { padding: 2px 6px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.editpanel .framelist li.active { background: var(--surface-2); }
.editpanel .framelist li b { display: inline-block; width: 16px; color: var(--warn); }
.editpanel .framelist small { color: var(--muted); margin-left: 6px; }
.editpanel .save { margin-top: 10px; gap: 6px; }
.editpanel .hint { font-size: 11px; margin-top: 4px; }
button.primary { background: var(--accent); border-color: var(--accent); color: #0d0e10; font-weight: 600; }

/* Verwaltung: Liste der übersprungenen Dateien */
table.skipped { width: 100%; border-collapse: collapse; font-size: 13px; }
table.skipped th { text-align: left; color: var(--muted); font-weight: normal; padding: 4px 8px; border-bottom: 1px solid var(--line, #333); }
table.skipped td { padding: 4px 8px; vertical-align: top; border-bottom: 1px solid var(--line, #2a2d33); }
table.skipped td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.skipped tr.unknown td:first-child, table.skipped tr.unknown td:nth-child(2) { color: var(--warn); }
table.skipped td.muted { font-size: 12px; word-break: break-all; }