/* TCG Keeper — gemeinsames Stylesheet, Teil 6 von 8: Kartendecks, Seitenanpassung, Exemplare, Kartenscanner, EAN-Scanner.
   Bis 09.10.2026 eine einzige Datei app.css; aufgeteilt ohne inhaltliche Änderung.
   Alle Teile werden in includes/layout_top.php in dieser Reihenfolge eingebunden —
   die Reihenfolge bestimmt die Kaskade, Regeln nicht zwischen Teilen verschieben. */
/* ---------------------------------------------------------------------
   "Kartendecks" (Mario, 16.09.2026) — Übersichtskacheln, Detailseite,
   Fotogalerie und die geteilte "Zu Deck hinzufügen"-Lightbox.
   --------------------------------------------------------------------- */
.deck-tile-noimg{ font-size:40px; display:flex; align-items:center; justify-content:center; width:100%; height:100%; opacity:.5; }

/* .deck-add-btn's eigentliches Aussehen sitzt seit dem 19.09.2026-Umbau
   weiter oben zusammen mit .print-toggle-btn/.tile-zoom-btn (gemeinsame
   Kapsel-Icon-Regel, .tile-actions) — hier stand vorher die alte,
   frei-absolut-positionierte Einzelknopf-Variante, die durch die Kapsel
   ersetzt wurde. */

/* Deck-Detailseite: mehrere eigene Fotos unter dem großen Hauptbild. */
.deck-thumb-row{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.deck-thumb{ width:52px; height:52px; object-fit:cover; border-radius:8px; border:1px solid var(--line); cursor:pointer; }
.deck-thumb:hover{ border-color:var(--accent); }
#deckHeroImg{ cursor:zoom-in; }

/* deck_edit.php: Fotogalerie-Verwaltung (Titelbild wählen/löschen). */
.deck-gallery-edit{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
.deck-gallery-item{ position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper-sunken); }
.deck-gallery-item img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.deck-gallery-item.is-cover{ border-color:var(--gold); }
.deck-gallery-cover-badge{ position:absolute; top:6px; left:6px; }
.deck-gallery-item-actions{ display:flex; gap:6px; padding:8px; flex-wrap:wrap; }

/* deck.php: eingebautes Karten-Suchfeld + Trefferliste. */
.deck-search-results{ margin-top:8px; display:flex; flex-direction:column; gap:6px; max-height:340px; overflow-y:auto; }
.deck-search-row, .deck-add-row{ display:flex; align-items:center; gap:10px; padding:7px 8px; border:1px solid var(--line); border-radius:9px; }
.deck-search-row img{ width:32px; height:44px; object-fit:contain; flex:none; background:var(--paper-sunken); border-radius:4px; }
.deck-search-row-body{ display:flex; flex-direction:column; flex:1; min-width:0; }
.deck-search-row-name{ font-size:13px; font-weight:600; }

/* deck.php: optionaler Karteninhalt. */
.deck-card-list{ display:flex; flex-direction:column; gap:8px; }
.deck-card-row{ display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
.deck-card-row:last-child{ border-bottom:none; }
.deck-card-row-thumb{ width:38px; aspect-ratio:245/337; background:var(--paper-sunken); border-radius:5px; overflow:hidden; flex:none; }
.deck-card-row-thumb img{ width:100%; height:100%; object-fit:contain; }
.deck-card-row-body{ display:flex; flex-direction:column; flex:1; min-width:0; }
.deck-card-row-name{ font-size:13px; font-weight:600; color:var(--ink); text-decoration:none; }
.deck-card-row-name:hover{ color:var(--accent); }

/* Geteilte "Zu Deck hinzufügen"-Lightbox (cards.php/card.php). */
.deck-add-list{ display:flex; flex-direction:column; gap:8px; }
.deck-add-row-name{ font-weight:600; font-size:13.5px; flex:1; }

/* ---------- Seitenanpassung — Oberfläche aufräumen (Mario, 19.09.2026
   Folgerunde: "UI der Seitenanpassung müsste aufgeräumt und strukturiert
   werden, da ist alles sehr unübersichtlich") ----------
   Vorher: jede Gruppe eine immer offene, gleich aussehende .card-box direkt
   untereinander, dazu am Ende eine einzige, sehr lange Farben-Liste — bei
   inzwischen 7 "shared"-Gruppen und 22 Farbvariablen kaum noch überschaubar.
   Jetzt: (1) eine Sprungnavigation ganz oben zu jedem Abschnitt, (2) jede
   Gruppe (auch die Farben, jetzt nach Themenbereich sortiert statt einer
   einzigen Liste, siehe DESIGN_VARIABLE_THEME_GROUPS) ist ein eigenes,
   einklappbares <details>-Element statt einer starren <div>, (3) eine Gruppe
   mit mindestens einer tatsächlich gespeicherten Abweichung öffnet sich
   automatisch und bekommt ein kleines "angepasst"-Abzeichen — so sieht Mario
   auf einen Blick, wo er bereits etwas geändert hat, ohne jede Gruppe einzeln
   aufklappen zu müssen, alles andere bleibt kompakt eingeklappt. */
.sa-toc{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 22px; padding:14px 16px;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:12px;
}
.sa-toc-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); display:flex; align-items:center; margin-right:4px; }
.sa-toc a{
  display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
  font-size:12.5px; font-weight:500; text-decoration:none;
}
.sa-toc a:hover{ border-color:var(--accent); color:var(--accent); }
.sa-toc a.sa-toc-changed{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

details.sa-group{ padding:0; overflow:hidden; }
details.sa-group > summary.sa-group-summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:20px 24px; margin:0;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint);
}
details.sa-group > summary.sa-group-summary::-webkit-details-marker{ display:none; }
.sa-group-summary-left{ display:flex; align-items:center; gap:10px; }
.sa-group-chevron{ display:inline-block; transition:transform .16s ease; color:var(--ink-faint); font-size:10px; }
details.sa-group[open] > summary .sa-group-chevron{ transform:rotate(90deg); }
.sa-group-badge{
  font-size:10px; font-weight:700; text-transform:none; letter-spacing:0;
  background:var(--accent); color:var(--accent-ink); padding:2px 8px; border-radius:999px;
}
.sa-group-body{ padding:0 24px 24px; }
.sa-theme-intro{ margin:0 0 18px; }

/* =============================================================================
   Exemplar-Umbau (Mario, 03.10.2026, „Merkzettel: Scanner" Punkt 3):
   Button „Meine Exemplare" unter dem Kartenbild, Lightbox-Liste der
   Exemplare mit Foto-Großansicht (card.php) und die Bearbeitungsseite
   copy_edit.php. Mobile zuerst: auf schmalen Bildschirmen füllt die Liste
   den ganzen Bildschirm, Formularfelder stehen untereinander.
   ============================================================================= */
.copies-open-btn{ width:100%; justify-content:center; margin-top:12px; font-weight:600; }
.copies-open-photos{ font-weight:400; color:var(--ink-faint); }
html.copies-noscroll, html.copies-noscroll body{ overflow:hidden; }

.copies-scrim{ align-items:flex-start; padding:4vh 0; overflow-y:auto; }
.lightbox-panel.copies-panel{ width:min(94vw,720px); max-width:none; max-height:none; overflow:visible; padding:18px 20px 20px; }
.copies-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.copies-head h3{ margin:0; }
.copies-head-count{ color:var(--ink-faint); font-weight:400; }
.copies-x{ background:none; border:1px solid var(--line); border-radius:999px; width:36px; height:36px; font-size:22px; line-height:1; color:var(--ink-soft); cursor:pointer; flex:none; }
.copies-x:hover{ color:var(--accent); border-color:var(--accent); }
.copies-sub{ margin:6px 0 12px; }
.copies-actions-top{ margin-bottom:14px; }
.copies-empty{ padding:20px; }
.copies-list{ display:flex; flex-direction:column; gap:12px; }
.copy-item{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--paper); transition:box-shadow .3s; }
.copy-item.copy-missing{ border-color:var(--danger); }
.copy-item.copy-highlight{ box-shadow:0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent); }
.copy-item-head{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.copy-num{ color:var(--ink-faint); font-size:12px; }
.copy-label{ font-weight:600; font-size:14px; }
.copy-src{ display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--paper-sunken); color:var(--ink-soft); white-space:nowrap; }
.copy-src-scanner{ background:var(--accent-soft); color:var(--accent); }
.copy-src-binder{ background:var(--gold-soft); color:var(--gold); }
.copy-src-manual{ background:var(--good-soft); color:var(--good); }
.copy-src-pocket{ background:var(--paper-sunken); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent-soft); } /* Aus Pocket-App (11.10.2026) */
.copy-meta{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; font-size:12.5px; color:var(--ink-faint); }
.copy-warn{ margin-top:8px; font-size:12.5px; color:var(--danger); background:var(--danger-soft); border-radius:8px; padding:6px 10px; }
.copy-note{ margin-top:8px; font-size:13.5px; color:var(--ink-soft); white-space:normal; overflow-wrap:anywhere; }
.copy-thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.copy-thumb{ position:relative; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--paper-sunken); cursor:zoom-in; overflow:hidden; width:84px; height:112px; flex:none; }
.copy-thumb:hover, .copy-thumb:focus-visible{ border-color:var(--accent); outline:none; box-shadow:0 0 0 2px var(--accent-soft); }
.copies-scrim .copy-thumb img{ width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; border-radius:0; box-shadow:none; display:block; }
.copy-thumb-side{ position:absolute; left:0; right:0; bottom:0; font-size:10px; font-weight:600; padding:2px 4px; background:rgba(10,10,16,.62); color:#fff; text-align:center; }
.copy-thumb-note{ position:absolute; top:3px; right:3px; font-size:11px; background:rgba(10,10,16,.62); color:#fff; border-radius:999px; width:18px; height:18px; display:flex; align-items:center; justify-content:center; }
.copy-item-actions{ margin-top:10px; }

/* Foto-Großansicht innerhalb der Lightbox */
.copy-viewer{ position:fixed; inset:0; z-index:110; background:rgba(6,6,10,.94); display:flex; align-items:center; justify-content:center; padding:16px 56px; }
.copy-viewer[hidden]{ display:none !important; }
.copy-viewer-fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; max-width:100%; }
.copies-scrim .copy-viewer-fig img{ max-width:min(92vw,900px); max-height:76vh; width:auto; height:auto; object-fit:contain; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.copy-viewer-fig figcaption{ color:#eee; text-align:center; max-width:min(92vw,720px); }
.copy-viewer-caption{ font-size:13px; color:#cfcfe0; }
.copy-viewer-note{ margin-top:4px; font-size:14px; color:#fff; white-space:pre-wrap; overflow-wrap:anywhere; }
.copy-viewer-close{ position:fixed; top:12px; right:14px; width:44px; height:44px; background:rgba(255,255,255,.12); border:none; border-radius:999px; color:#fff; font-size:26px; cursor:pointer; }
.copy-viewer-nav{ position:fixed; top:50%; transform:translateY(-50%); width:44px; height:64px; background:rgba(255,255,255,.12); border:none; border-radius:10px; color:#fff; font-size:32px; cursor:pointer; }
.copy-viewer-nav.prev{ left:8px; }
.copy-viewer-nav.next{ right:8px; }
.copy-viewer.single .copy-viewer-nav{ display:none; }

/* copy_edit.php */
.copy-edit-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:16px; }
.copy-edit-cardimg{ width:72px; border-radius:6px; flex:none; box-shadow:var(--shadow); }
.copy-edit-form, .copy-photos-box, .copy-merge-box, .copy-delete-box{ margin-bottom:18px; }
.copy-form-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:0 14px; }
.copy-form-grid .form-field{ min-width:0; }
.copy-locked-hint{ background:var(--gold-soft); color:var(--gold); border-radius:8px; padding:8px 10px; margin:0 0 12px; }
.copy-edit-form select:disabled, .copy-edit-form input:disabled{ opacity:.7; cursor:not-allowed; }
.copy-edit-buttons{ margin-top:4px; }
.copy-photo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; margin-bottom:8px; }
.copy-photo-card{ border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--paper); display:flex; flex-direction:column; gap:10px; scroll-margin-top:80px; }
.copy-photo-img{ display:block; border-radius:8px; overflow:hidden; background:var(--paper-sunken); aspect-ratio:3 / 4; }
.copy-photo-img img{ width:100%; height:100%; object-fit:contain; display:block; }
.copy-photo-fields .form-field{ margin-bottom:10px; }
.copy-photo-actions{ gap:6px; }
.copy-photo-actions .btn{ min-height:36px; }
.copy-photo-add{ border-top:1px solid var(--line); margin-top:12px; padding-top:4px; }
.copy-upload-preview{ display:flex; flex-wrap:wrap; gap:6px; }
.copy-upload-preview img{ width:64px; height:86px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
#fotos{ scroll-margin-top:80px; }

@media (max-width:640px){
  .copies-scrim{ padding:0; }
  .lightbox-panel.copies-panel{ width:100vw; min-height:100%; border-radius:0; padding:14px 14px 28px; box-shadow:none; }
  .copy-thumb{ width:76px; height:101px; }
  .copy-viewer{ padding:12px 8px 64px; }
  .copy-viewer-nav{ top:auto; bottom:10px; transform:none; height:48px; }
  .copies-scrim .copy-viewer-fig img{ max-height:70vh; max-width:96vw; }
  .copy-photo-grid{ grid-template-columns:1fr; }
  .copy-form-grid{ grid-template-columns:1fr; }
  .copy-edit-buttons .btn, .copy-photo-add .btn.primary{ flex:1 1 auto; justify-content:center; min-height:44px; }
}

/* Herkunfts-Kachel auf der Sammlungsseite */
.stat-tile .origin-split{ display:flex; flex-wrap:wrap; gap:2px 10px; font-size:11.5px; color:var(--ink-soft); margin-top:4px; }

/* ---- Kartenscanner (scanner.php, assets/scanner.js) ------------------------ */
.scan-layout{ display:flex; flex-direction:column; gap:16px; max-width:760px; }
.scan-layout > [hidden], .scan-layout [hidden].card-box{ display:none; }
.scan-stage{ position:relative; width:100%; max-width:480px; margin:0 auto; aspect-ratio:3 / 4; max-height:72vh; background:#000; border-radius:12px; overflow:hidden; }
.scan-stage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scan-guide{ position:absolute; top:6%; height:88%; aspect-ratio:63 / 88; left:50%; transform:translateX(-50%); border-radius:4.5% / 3.2%; box-shadow:0 0 0 9999px rgba(0,0,0,.38); pointer-events:none; }
.scan-corner{ position:absolute; width:26px; height:26px; border:3px solid #fff; filter:drop-shadow(0 0 2px rgba(0,0,0,.6)); }
.scan-corner.tl{ top:-2px; left:-2px; border-right:0; border-bottom:0; border-top-left-radius:10px; }
.scan-corner.tr{ top:-2px; right:-2px; border-left:0; border-bottom:0; border-top-right-radius:10px; }
.scan-corner.bl{ bottom:-2px; left:-2px; border-right:0; border-top:0; border-bottom-left-radius:10px; }
.scan-corner.br{ bottom:-2px; right:-2px; border-left:0; border-top:0; border-bottom-right-radius:10px; }
.scan-guide-hint{ position:absolute; left:0; right:0; top:42%; text-align:center; color:rgba(255,255,255,.75); font-size:13px; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.scan-stage-msg{ position:absolute; inset:auto 12px 12px 12px; background:rgba(0,0,0,.72); color:#fff; padding:10px 12px; border-radius:8px; font-size:13.5px; text-align:center; }
.scan-stage-msg[hidden]{ display:none; }
.scan-controls{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px; }
.scan-controls .btn{ min-height:44px; justify-content:center; }
.scan-controls .scan-shoot{ flex:1 1 100%; max-width:480px; font-size:16px; }
.scan-controls .btn[hidden]{ display:none; }
.scan-file-btn{ cursor:pointer; }
.scan-status{ min-height:1.4em; margin-top:10px; text-align:center; font-size:14px; color:var(--ink-soft); }
.scan-status.is-ok{ color:var(--good); }
.scan-status.is-warn{ color:var(--gold); }
.scan-status.is-error{ color:var(--danger); }
.scan-result-head, .scan-confirm-head{ display:flex; gap:14px; align-items:flex-start; }
.scan-shot{ width:120px; aspect-ratio:63 / 88; object-fit:cover; border-radius:8px; border:1px solid var(--line); flex:0 0 auto; background:var(--paper-sunken); }
.scan-ocr{ flex:1 1 auto; min-width:0; }
.scan-ocr-fields{ display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
.scan-cands{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px; }
.scan-cand{ display:flex; gap:10px; align-items:flex-start; text-align:left; width:100%; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--paper-raised); color:var(--ink); cursor:pointer; font:inherit; }
.scan-cand:hover, .scan-cand:focus-visible{ border-color:var(--accent); }
.scan-cand.is-top{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.scan-cand img, .scan-cand-noimg{ width:64px; aspect-ratio:63 / 88; object-fit:cover; border-radius:5px; flex:0 0 auto; background:var(--paper-sunken); }
.scan-cand-noimg{ display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:22px; }
.scan-cand-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.scan-cand-name{ font-weight:600; }
.scan-badges{ display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.scan-badge{ font-size:11px; padding:2px 7px; border-radius:999px; background:var(--paper-sunken); color:var(--ink-soft); }
.scan-badge.ok{ background:var(--good-soft); color:var(--good); }
.scan-badge.own{ background:var(--accent-soft); color:var(--accent); }
.scan-badge.muted{ opacity:.7; }
.scan-more{ grid-column:1 / -1; justify-self:start; }
.scan-search{ margin-top:14px; }
.scan-search-row{ display:flex; gap:8px; margin-top:4px; }
.scan-search-row .form-input{ flex:1 1 auto; min-width:0; }
.scan-confirm-head > div{ flex:1 1 auto; min-width:0; }
.scan-confirm-img, .scan-confirm-shot{ width:110px; aspect-ratio:63 / 88; object-fit:cover; border-radius:8px; border:1px solid var(--line); flex:0 0 auto; background:var(--paper-sunken); }
.scan-confirm-name{ font-size:18px; font-weight:600; margin-bottom:2px; }
.scan-assign{ margin:14px 0 6px; }
.scan-assign-opt{ display:flex; gap:8px; align-items:flex-start; padding:8px 10px; border:1px solid var(--line); border-radius:8px; margin-bottom:6px; cursor:pointer; }
.scan-assign-opt input{ margin-top:3px; }
.scan-newfields[hidden]{ display:none; }
.scan-confirm-actions{ margin-top:8px; }
.scan-confirm-actions .btn{ min-height:44px; }
.scan-session-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.scan-session-list li{ display:flex; gap:10px; align-items:center; }
.scan-session-list img{ width:36px; height:50px; object-fit:cover; border-radius:4px; border:1px solid var(--line); }
.scan-prepare-box summary{ cursor:pointer; font-weight:600; }
.scan-prepare-progress{ height:8px; background:var(--paper-sunken); border-radius:4px; overflow:hidden; margin:10px 0 4px; }
.scan-prepare-bar{ height:100%; width:0; background:var(--accent); transition:width .2s; }
@media (max-width:640px){
  .scan-stage{ max-height:64vh; border-radius:10px; }
  .scan-ocr-fields{ grid-template-columns:1fr; }
  .scan-cands{ grid-template-columns:1fr; }
  .scan-shot{ width:84px; }
  .scan-confirm-head{ flex-wrap:wrap; }
  .scan-confirm-img, .scan-confirm-shot{ width:84px; }
  .scan-confirm-head > div{ flex-basis:100%; order:3; }
  .scan-confirm-actions .btn{ flex:1 1 auto; justify-content:center; }
}
/* Kartenscanner: Live-Prüfung (grüner Rahmen), Auslöser im Bild, Tippen zum Fokussieren */
.scan-stage{ touch-action:manipulation; -webkit-user-select:none; user-select:none; }
.scan-corner{ transition:border-color .2s, filter .2s; }
.scan-guide{ transition:box-shadow .2s; }
.scan-guide.is-warn .scan-corner{ border-color:#F5C542; }
.scan-guide.is-ok .scan-corner{ border-color:#3DDC84; filter:drop-shadow(0 0 6px rgba(61,220,132,.9)); }
.scan-guide.is-ok{ box-shadow:0 0 0 9999px rgba(0,0,0,.38), inset 0 0 0 2px rgba(61,220,132,.85), 0 0 18px rgba(61,220,132,.55); }
.scan-guide-hint{ top:auto; bottom:16%; }
.scan-guide.is-ok .scan-guide-hint{ display:none; }
.scan-quality{ position:absolute; top:10px; left:10px; max-width:calc(100% - 70px); display:flex; align-items:center; gap:7px; padding:5px 11px 5px 9px; border-radius:999px; background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.35); color:#fff; font-size:12.5px; line-height:1.25; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.scan-quality[hidden]{ display:none; }
.scan-quality-dot{ width:9px; height:9px; border-radius:50%; background:#fff; flex:0 0 auto; }
.scan-quality-pct{ font-weight:600; font-variant-numeric:tabular-nums; flex:0 0 auto; }
.scan-quality-msg{ min-width:0; }
.scan-quality.is-ok{ border-color:#3DDC84; color:#B9F5D2; }
.scan-quality.is-ok .scan-quality-dot{ background:#3DDC84; box-shadow:0 0 6px #3DDC84; }
.scan-quality.is-warn{ border-color:#F5C542; color:#FBE3A0; }
.scan-quality.is-warn .scan-quality-dot{ background:#F5C542; }
.scan-quality.is-bad{ border-color:#FF6B5A; color:#FFC2B9; }
.scan-quality.is-bad .scan-quality-dot{ background:#FF6B5A; }
.scan-stage-tools{ position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:8px; }
.scan-icon-btn{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.3); cursor:pointer; font:600 13px/1 var(--font-base); padding:0; }
.scan-icon-btn[hidden]{ display:none; }
.scan-icon-btn[aria-pressed="true"]{ background:#F5C542; color:#1C2233; border-color:#F5C542; }
.scan-shutter{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); width:68px; height:68px; border-radius:50%; background:#fff; color:#1C2233; border:4px solid rgba(255,255,255,.45); background-clip:padding-box; box-shadow:0 2px 10px rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:box-shadow .2s, transform .1s; }
.scan-shutter:active{ transform:translateX(-50%) scale(.94); }
.scan-shutter:disabled{ opacity:.55; cursor:default; }
.scan-guide.is-ok ~ .scan-shutter{ box-shadow:0 0 0 4px #3DDC84, 0 0 16px rgba(61,220,132,.8); }
.scan-focus-ring{ position:absolute; width:72px; height:72px; margin:-36px 0 0 -36px; border:2px solid #F5C542; border-radius:50%; opacity:0; pointer-events:none; }
.scan-focus-ring.is-on{ animation:scanFocus .9s ease-out; }
@keyframes scanFocus{ 0%{ opacity:1; transform:scale(1.5); } 40%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(1); } }
.scan-toast{ position:absolute; left:50%; bottom:92px; transform:translateX(-50%); max-width:88%; background:rgba(0,0,0,.78); color:#fff; padding:8px 12px; border-radius:10px; font-size:13px; text-align:center; opacity:0; transition:opacity .2s; pointer-events:none; }
.scan-toast.is-on{ opacity:1; }
.scan-toast[hidden]{ display:none; }
.scan-stage-msg{ inset:auto 12px 92px 12px; }
.scan-auto-btn[aria-pressed="true"]{ background:var(--good-soft); color:var(--good); border-color:var(--good); }
.scan-tip{ text-align:center; margin:8px auto 0; max-width:480px; }
@media (prefers-reduced-motion: reduce){ .scan-focus-ring.is-on{ animation:none; opacity:0; } }

/* ---- EAN-Strichcode-Scanner (Kartendecks, includes/barcode_scanner.php, assets/barcode.js) ---- */
html.ean-open, html.ean-open body{ overflow:hidden; }
.ean-scrim{ position:fixed; inset:0; z-index:1200; background:rgba(10,10,18,.72); display:flex; align-items:center; justify-content:center; padding:16px; }
.ean-scrim[hidden]{ display:none; }
.ean-panel{ background:var(--paper-raised); color:var(--ink); border-radius:16px; box-shadow:var(--shadow); width:min(560px, 100%); max-height:100%; overflow:auto; padding:14px 16px 16px; }
.ean-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.ean-head h3{ margin:0; font-size:18px; }
.ean-x{ background:none; border:0; font-size:28px; line-height:1; color:var(--ink-soft); cursor:pointer; padding:0 4px; }
.ean-stage{ position:relative; width:100%; aspect-ratio:4 / 3; max-height:56vh; background:#000; border-radius:12px; overflow:hidden; }
.ean-stage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ean-window{ position:absolute; left:8%; right:8%; top:31%; height:38%; border-radius:10px; border:2px solid rgba(255,255,255,.9); box-shadow:0 0 0 9999px rgba(0,0,0,.42); pointer-events:none; transition:border-color .2s, box-shadow .2s; }
.ean-laser{ position:absolute; left:4%; right:4%; top:50%; height:2px; background:#FF5A4E; box-shadow:0 0 8px #FF5A4E; animation:eanLaser 1.6s ease-in-out infinite; }
@keyframes eanLaser{ 0%,100%{ transform:translateY(-28px); } 50%{ transform:translateY(28px); } }
.ean-scrim.is-found .ean-window{ border-color:#3DDC84; box-shadow:0 0 0 9999px rgba(0,0,0,.42), 0 0 18px rgba(61,220,132,.8); }
.ean-scrim.is-found .ean-laser{ background:#3DDC84; box-shadow:0 0 8px #3DDC84; animation:none; }
.ean-stage-msg{ position:absolute; inset:auto 12px 12px 12px; background:rgba(0,0,0,.72); color:#fff; padding:10px 12px; border-radius:8px; font-size:13.5px; text-align:center; }
.ean-stage-msg[hidden]{ display:none; }
.ean-status{ margin:10px 0 0; font-size:14px; color:var(--ink-soft); text-align:center; min-height:1.4em; }
.ean-status.is-ok{ color:var(--good); font-weight:600; }
.ean-status.is-error{ color:var(--danger); }
.ean-result{ margin-top:10px; }
.ean-result[hidden]{ display:none; }
.ean-matches{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ean-matches li{ display:flex; gap:10px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:8px; }
.ean-matches img, .ean-match-noimg{ width:48px; height:48px; object-fit:cover; border-radius:6px; flex:0 0 auto; background:var(--paper-sunken); display:flex; align-items:center; justify-content:center; font-size:22px; }
.ean-match-body{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.ean-match-actions{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.ean-result-actions{ margin-top:10px; }
.ean-manual{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; margin-top:12px; }
.ean-manual-form{ display:flex; gap:6px; flex:1 1 220px; max-width:320px; }
.ean-manual-form .form-input{ flex:1 1 auto; min-width:0; }
.ean-input-row{ display:flex; gap:8px; }
.ean-input-row .form-input{ flex:1 1 auto; min-width:0; font-variant-numeric:tabular-nums; }
.form-input.is-valid{ border-color:var(--good); }
.form-input.is-invalid{ border-color:var(--gold); }
.decks-top-actions{ margin:4px 0 6px; }
.decks-ean-hint{ margin:0 0 16px; }
@media (max-width:640px){
  .ean-scrim{ padding:0; align-items:stretch; }
  .ean-panel{ width:100%; border-radius:0; min-height:100%; }
  .ean-stage{ max-height:52vh; }
  .ean-matches li{ flex-wrap:wrap; }
  .ean-match-actions{ width:100%; justify-content:flex-start; }
  .decks-top-actions .btn{ flex:1 1 auto; justify-content:center; min-height:44px; }
}
@media (prefers-reduced-motion: reduce){ .ean-laser{ animation:none; } }
.ean-input-row .btn{ white-space:nowrap; flex:0 0 auto; }