index.html

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FujiRecipeVault</title>
<link rel="icon" type="image/png" href="/ICON.png?v=2">
<link rel="apple-touch-icon" href="/ICON.png?v=2">

<!--
  Komplette Oberfläche in einer Datei.
  Oben: Kamera-Auswahl. Es werden nur Rezepte, Filmsimulationen, Parameter und
  Plätze der gewählten Kamera gezeigt. Rezepte können mehreren Kameras zugeordnet sein.
  Design: Schwarz/Grau, weiße Schrift, Rot als Akzent.
-->

<style>
  :root{
    --bg:#0c0c0e; --panel:#151517; --panel-2:#1d1d21; --ink:#f4f4f5; --muted:#9a9aa2;
    --line:#2a2a30; --field:#111114; --field-line:#33333b;
    --accent:#ff453a; --accent-hover:#ff6058; --radius:11px;
  }
  *{ box-sizing:border-box; }
  html,body{ height:100%; margin:0; }
  [hidden]{ display:none !important; }
  /* Rote Häkchen/Regler statt System-Blau (App-Akzent) */
  input[type=checkbox], input[type=radio]{ accent-color:var(--accent); }
  body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--ink); line-height:1.45; height:100vh; overflow:hidden; display:flex; flex-direction:column; }

  .app-header{ flex:none; background:#000; border-bottom:1px solid var(--line); padding:14px 22px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .app-mark{ width:26px; height:26px; flex:none; display:block; }
  .app-header .divider{ width:1px; height:22px; background:#3a3a42; }
  .app-header h1{ margin:0; font-size:22px; font-weight:700; color:#fff; letter-spacing:.2px; line-height:1; }
  .cam-picker{ display:flex; align-items:center; gap:8px; margin-left:6px; }
  .cam-select{ background:var(--field); border:1px solid var(--field-line); color:var(--ink); border-radius:9px; padding:8px 11px; font:inherit; font-weight:600; }
  .cam-select:focus{ outline:none; border-color:var(--accent); }
  .btn-quit{ margin-left:auto; background:transparent; border:1px solid var(--field-line); color:var(--muted); border-radius:9px; padding:8px 14px; font:inherit; font-weight:600; font-size:13px; cursor:pointer; }
  .btn-quit:hover{ color:var(--accent); border-color:var(--accent); }

  .layout{ flex:1; min-height:0; display:grid; grid-template-columns:340px 1fr; }

  /* LINKS */
  .sidebar{ min-height:0; display:flex; flex-direction:column; border-right:1px solid var(--line); background:var(--panel); }
  .sidebar-top{ padding:13px; display:flex; flex-direction:column; gap:9px; border-bottom:1px solid var(--line); }
  .control{ width:100%; background:var(--field); border:1px solid var(--field-line); color:var(--ink); border-radius:9px; padding:9px 11px; font:inherit; }
  .control::placeholder{ color:#6b6b73; }
  .control:focus{ outline:none; border-color:var(--accent); }
  .btn-new{ width:100%; background:var(--accent); color:#fff; border:none; border-radius:var(--radius); padding:11px 14px; font:inherit; font-weight:650; cursor:pointer; }
  .btn-new:hover{ background:var(--accent-hover); }
  .row{ display:flex; gap:9px; }
  .row .control{ flex:1; }
  .toggle{ background:var(--field); border:1px solid var(--field-line); color:var(--muted); border-radius:9px; padding:0 13px; cursor:pointer; font-weight:600; font-size:14px; }
  .toggle.on{ color:#fff; border-color:var(--accent); background:rgba(255,69,58,.16); }
  .seg{ display:flex; border:1px solid var(--field-line); border-radius:9px; overflow:hidden; }
  .seg button{ flex:1; background:var(--field); color:var(--muted); border:none; padding:8px 6px; font:inherit; font-weight:600; font-size:12.5px; cursor:pointer; border-left:1px solid var(--field-line); }
  .seg button:first-child{ border-left:none; }
  .seg button.on{ background:rgba(255,69,58,.16); color:#fff; }
  .count{ font-size:12px; color:var(--muted); padding-left:2px; }

  .recipe-list{ flex:1; min-height:0; overflow:auto; padding:8px; }
  .item{ display:flex; align-items:center; gap:8px; padding:10px 10px 10px 12px; border-radius:10px; cursor:pointer; border:1px solid transparent; margin-bottom:4px; }
  .item:hover{ background:var(--panel-2); }
  .item.active{ background:var(--panel-2); border-color:var(--line); box-shadow:inset 3px 0 0 var(--accent); }
  .item.dragging{ opacity:.5; }
  .item-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .item .nm{ font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .item.active .nm{ color:var(--accent); }
  .item .fs{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .heart{ flex:none; background:none; border:none; color:#6b6b73; font-size:17px; cursor:pointer; padding:4px; line-height:1; }
  /* Phase 5 – Sterne (Rating) + Tags */
  .item-stars{ font-size:11px; letter-spacing:1px; color:var(--accent); line-height:1; margin-top:1px; }
  .editor-stars{ display:inline-flex; gap:1px; }
  .editor-stars .star{ background:none; border:0; color:#4a4a52; font-size:18px; line-height:1; cursor:pointer; padding:0 1px; }
  .editor-stars .star.on{ color:var(--accent); }
  .editor-stars .star:hover{ color:var(--accent); }
  .tag-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .tag-chips:not(:empty){ margin-bottom:8px; }
  .tag-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--panel-2); border:1px solid var(--field-line); border-radius:20px; padding:3px 7px 3px 11px; font-size:12.5px; color:var(--ink); }
  .tag-chip button{ background:none; border:0; color:var(--muted); font:inherit; font-size:13px; line-height:1; cursor:pointer; padding:0; }
  .tag-chip button:hover{ color:var(--accent); }
  #tag-filter{ display:flex; flex-wrap:wrap; gap:6px; }
  #tag-filter .tagf{ background:var(--field); border:1px solid var(--field-line); border-radius:20px; padding:3px 11px; font:inherit; font-size:12px; color:var(--muted); cursor:pointer; }
  #tag-filter .tagf.on{ background:rgba(255,69,58,.16); border-color:var(--accent); color:#fff; }
  .heart:hover,.heart.on{ color:var(--accent); }
  .list-empty{ color:var(--muted); font-size:13px; text-align:center; padding:26px 14px; line-height:1.5; }
  .list-empty b{ color:var(--ink); font-weight:650; }
  .empty-actions{ margin-top:16px; }
  .empty-hint{ margin-top:14px; font-size:12px; color:var(--muted); }

  /* RECHTS */
  .editor-wrap{ min-height:0; overflow:auto; }
  .editor-empty{ min-height:100%; display:flex; align-items:flex-start; justify-content:center; padding:36px 22px; }
  .empty-inner{ width:min(620px, 100%); }
  .empty-title{ font-size:18px; font-weight:700; margin:0 0 4px; }
  .empty-sub{ color:var(--muted); font-size:13px; margin:0 0 22px; line-height:1.6; }
  .camera-slots{ display:flex; flex-direction:column; gap:10px; }
  .cslot{ display:flex; align-items:center; gap:14px; border:1px solid var(--field-line); border-radius:12px; padding:14px 16px; background:var(--field); transition:border-color .15s, background .15s; }
  .cslot.drop{ border-color:var(--accent); background:rgba(255,69,58,.14); }
  .cslot-n{ font-family:ui-monospace,Menlo,monospace; font-weight:700; color:var(--accent); font-size:15px; width:28px; flex:none; }
  .cslot-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cslot.filled .cslot-name{ cursor:pointer; }
  .cslot.filled .cslot-name:hover{ color:var(--accent); }
  .cslot.empty .cslot-name{ color:#6b6b73; }
  .cslot-clear{ flex:none; background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:14px; padding:4px 7px; border-radius:6px; }
  .cslot-clear:hover{ color:var(--accent); background:rgba(255,69,58,.12); }

  .editor-head{ position:sticky; top:0; z-index:2; background:var(--panel); border-bottom:1px solid var(--line); padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
  .editor-headline{ display:flex; align-items:center; gap:18px; min-width:0; }
  .editor-title{ font-size:16px; font-weight:650; }
  .editor-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
  .code-field{ display:flex; flex-direction:column; gap:3px; }
  .code-field label{ font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:700; }
  .code-field input{ width:135px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; letter-spacing:.5px; color:var(--accent); text-transform:uppercase; background:var(--field); border:1px solid #4a2b2c; border-radius:8px; padding:7px 10px; }
  .code-field input::placeholder{ color:#7c5b58; }
  .code-field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,69,58,.2); }
  .editor-actions{ display:flex; gap:8px; flex:none; align-items:center; }

  .btn{ border:none; border-radius:9px; padding:9px 15px; font:inherit; font-weight:650; cursor:pointer; }
  .btn-primary{ background:var(--accent); color:#fff; }
  .btn-primary:hover{ background:var(--accent-hover); }
  .btn-ghost{ background:var(--panel-2); color:var(--ink); border:1px solid var(--field-line); }
  .btn-ghost:hover{ border-color:#4b4b55; }
  .btn-danger{ background:transparent; color:var(--accent); border:1px solid #4a2b2c; }
  .btn-danger:hover{ background:rgba(255,69,58,.12); }
  .icon-btn{ background:transparent; border:1px solid var(--field-line); color:var(--muted); border-radius:8px; padding:7px 11px; cursor:pointer; font-size:16px; line-height:1; }
  .icon-btn:hover,.icon-btn.on{ color:var(--accent); border-color:#4a2b2c; }

  .editor-body{ padding:18px 22px 46px; max-width:940px; }
  .group{ margin-bottom:22px; }
  .group-title,.band-title{ font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); font-weight:700; margin:0 0 12px; }
  .fields{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; }
  .field{ display:flex; flex-direction:column; gap:5px; }
  .field.wide{ grid-column:1 / -1; }
  label{ font-size:12.5px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:6px; }
  label .req{ color:var(--accent); }
  input,select,textarea{ font:inherit; color:var(--ink); background:var(--field); border:1px solid var(--field-line); border-radius:9px; padding:9px 11px; width:100%; }
  input::placeholder,textarea::placeholder{ color:#6b6b73; }
  input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,69,58,.20); }
  /* Phase 9 – numerische Stepper (−/+ um ein Zahlenfeld; freie Eingabe bleibt möglich) */
  .stepper{ display:flex; align-items:stretch; }
  .stepper input{ flex:1 1 auto; width:auto; min-width:0; text-align:center; border-radius:0; border-left:0; border-right:0; }
  .step-btn{ flex:0 0 34px; background:var(--field); border:1px solid var(--field-line); color:var(--muted); font-size:17px; line-height:1; cursor:pointer; -webkit-user-select:none; user-select:none; }
  .step-btn:first-child{ border-radius:9px 0 0 9px; }
  .step-btn:last-child{ border-radius:0 9px 9px 0; }
  .step-btn:hover{ color:var(--accent); border-color:var(--accent); }
  .step-btn:active{ background:var(--panel-2); }
  .stepper:focus-within input{ border-color:var(--accent); }
  .stepper:focus-within .step-btn{ border-color:var(--accent); }
  select option{ background:#151517; color:var(--ink); }
  textarea{ resize:vertical; min-height:70px; }

  .help{ flex:none; width:17px; height:17px; border-radius:50%; border:1px solid var(--field-line); background:transparent; color:var(--muted); font-size:11px; font-weight:700; line-height:1; cursor:pointer; padding:0; }
  .help:hover{ color:var(--accent); border-color:var(--accent); }
  .help-pop{ position:fixed; z-index:50; background:#1d1d21; color:var(--ink); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; padding:11px 13px; font-size:12.5px; line-height:1.5; box-shadow:0 8px 30px rgba(0,0,0,.5); }

  /* Kamera-Zugehörigkeit (Chips) */
  .cam-chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .cam-chip{ display:flex; align-items:center; gap:7px; border:1px solid var(--field-line); border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--muted); background:var(--field); cursor:pointer; }
  .cam-chip.on{ color:#fff; border-color:var(--accent); background:rgba(255,69,58,.16); }
  .cam-chip.locked{ cursor:default; opacity:.9; }
  .cam-chip.disabled{ opacity:.4; cursor:not-allowed; }
  /* Phase 7 – Kompatibilitäts-Warnung: dezentes Amber-Zeichen mit Tooltip (blockiert nichts). */
  .cam-warn{ position:relative; color:#e0a13a; cursor:help; font-size:12.5px; line-height:1; }
  .cam-warn::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
    background:var(--panel-2); color:var(--ink); border:1px solid var(--line); font-size:12px; font-weight:500; line-height:1.45;
    padding:7px 10px; border-radius:8px; white-space:normal; width:max-content; max-width:230px; text-align:left;
    box-shadow:0 6px 20px rgba(0,0,0,.45); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s; z-index:90; }
  .cam-warn:hover::after, .cam-warn:focus::after{ opacity:1; visibility:visible; }

  /* Bilder */
  .image-band{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 8px; }
  .thumb{ flex:none; height:5cm; width:auto; display:block; background:#000; cursor:zoom-in; }
  .add-thumb{ flex:none; height:5cm; width:110px; border:1px dashed var(--field-line); background:var(--field); color:var(--muted); cursor:pointer; font:inherit; font-weight:600; font-size:13px; display:flex; align-items:center; justify-content:center; }
  .add-thumb:hover{ border-color:var(--accent); color:var(--accent); }
  .ctx-menu{ position:fixed; z-index:70; background:#1d1d21; border:1px solid var(--line); border-radius:8px; padding:4px; box-shadow:0 8px 30px rgba(0,0,0,.5); }
  .ctx-menu button{ display:block; width:100%; background:transparent; border:none; color:var(--ink); font:inherit; padding:8px 16px; text-align:left; cursor:pointer; border-radius:6px; white-space:nowrap; }
  .ctx-menu button:hover{ background:var(--accent); color:#fff; }
  .lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; padding:24px; z-index:60; cursor:zoom-out; }
  .lightbox img{ max-width:100%; max-height:100%; }

  .modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:20px; z-index:55; }
  #ask-modal{ z-index:80; }   /* Bestätigungs-/Hinweis-Dialog immer über anderen Fenstern */
  .modal-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; width:min(600px,100%); max-height:82vh; display:flex; flex-direction:column; }
  .modal-head{ padding:14px 18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-weight:650; font-size:15px; }
  .modal-body{ padding:14px 18px; overflow:auto; }
  .modal-foot{ padding:13px 18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  /* Phase 8 – eigener Dialog */
  #ask-text{ margin:0; color:var(--ink); font-size:14px; line-height:1.55; white-space:pre-line; }
  .ask-actions{ display:flex; gap:8px; }
  .modal-foot .left{ display:flex; gap:10px; flex-wrap:wrap; }
  .diff-head,.diff{ display:grid; grid-template-columns:1.1fr 1fr 16px 1fr; gap:10px; align-items:baseline; font-size:13px; padding:8px 0; border-bottom:1px solid var(--line); }
  .diff-head{ color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; }
  .diff-k{ color:var(--ink); font-weight:600; } .diff-old{ color:var(--muted); text-decoration:line-through; word-break:break-word; }
  .diff-arrow{ color:var(--accent); text-align:center; } .diff-new{ color:var(--ink); font-weight:600; word-break:break-word; }
  .modal-empty{ color:var(--muted); text-align:center; padding:26px 10px; }

  /* Kamera-Verwaltung */
  .cam-add{ display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; align-items:center; }
  .cam-add input[type=text]{ flex:1; min-width:140px; } .cam-add select{ width:auto; }
  .cam-edit-top{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
  .cam-edit-top .control{ flex:1; }
  .cam-edit-form .field{ margin-bottom:12px; }
  .cam-edit-form label{ margin-bottom:4px; }
  .cam-edit-form textarea{ min-height:58px; font-size:12.5px; }
  .cam-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  @media (max-width:560px){ .cam-grid2{ grid-template-columns:1fr; } }
  .feature-row{ display:flex; gap:18px; flex-wrap:wrap; margin:2px 0 6px; }
  .feature-row label{ display:flex; align-items:center; gap:7px; color:var(--ink); font-weight:500; cursor:pointer; }
  .feature-row input{ width:auto; }
  .cparam-row{ display:flex; gap:8px; align-items:center; margin-bottom:6px; }
  .cparam-row .tag{ flex:1; font-size:12.5px; }
  .cparam-row .tag b{ color:var(--ink); } .cparam-row .tag span{ color:var(--muted); }

  .toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(18px); background:#1d1d21; color:#fff; border:1px solid var(--line); border-left:3px solid var(--accent); padding:11px 18px; border-radius:10px; font-size:14px; font-weight:600; opacity:0; pointer-events:none; transition:.24s; z-index:65; }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  /* Klickbare Aktion im Toast (z. B. „Undo" nach dem Löschen). */
  .toast-action{ background:none; border:0; color:var(--accent); font:inherit; font-weight:700; cursor:pointer; padding:0; margin-left:8px; pointer-events:auto; }
  .toast-action:hover{ text-decoration:underline; }

  /* Export / Import (Rezepte teilen) */
  .io-row{ display:flex; gap:9px; }
  .io-btn{ flex:1; background:var(--field); border:1px solid var(--field-line); color:var(--muted); border-radius:9px; padding:8px 10px; font:inherit; font-weight:600; font-size:13px; cursor:pointer; }
  .io-btn:hover{ color:var(--accent); border-color:var(--accent); }
  /* Phase 6 – Mehrfachauswahl */
  .count-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .linkbtn{ flex:none; background:none; border:0; color:var(--accent); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; padding:2px 0; }
  .linkbtn:hover{ text-decoration:underline; }
  .item-cb{ flex:none; width:17px; height:17px; border:1.6px solid var(--field-line); border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1; color:transparent; }
  .item.checked .item-cb{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .item.sel{ cursor:pointer; }
  .item.hl{ box-shadow: inset 0 0 0 2px var(--accent); }   /* Phase 8: Tastatur-Highlight (↑/↓) */
  .bulkbar{ flex:none; border-top:1px solid var(--line); background:var(--panel); padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
  .bulkbar-count{ font-size:12px; color:var(--muted); font-weight:600; }
  .bulkbar-actions{ display:flex; flex-wrap:wrap; gap:6px; }
  .bulk-act{ background:var(--field); color:var(--ink); border:1px solid var(--field-line); border-radius:8px; padding:6px 10px; font:inherit; font-size:12.5px; cursor:pointer; }
  .bulk-act:hover:not(:disabled){ border-color:var(--muted); }
  .bulk-act.danger{ color:var(--accent); }
  .bulk-act:disabled{ opacity:.45; cursor:default; }
  .export-intro{ color:var(--muted); font-size:13px; margin-bottom:14px; line-height:1.55; }
  .export-intro b{ color:var(--ink); font-weight:650; }
  .export-tools{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .export-selall{ display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:600; font-size:13px; cursor:pointer; }
  .export-selall input{ width:auto; }
  .export-list{ max-height:44vh; overflow:auto; border:1px solid var(--line); border-radius:10px; }
  .export-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
  .export-item:last-child{ border-bottom:none; }
  .export-item:hover{ background:var(--panel-2); }
  .export-item input{ width:auto; flex:none; }
  .export-item .ei-nm{ font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .export-item .ei-fs{ color:var(--muted); font-size:12.5px; margin-left:auto; white-space:nowrap; flex:none; padding-left:10px; }
  .export-images{ display:flex; align-items:center; gap:9px; color:var(--ink); font-weight:500; font-size:13.5px; cursor:pointer; margin-top:14px; }
  .export-images input{ width:auto; }
  .export-hint{ color:var(--muted); font-weight:400; font-size:12px; }
  .btn:disabled{ opacity:.45; cursor:not-allowed; }

  /* Import-Modal (Datei oder Screenshot per KI) */
  .import-seg{ margin-bottom:16px; }
  .import-help{ color:var(--muted); font-size:13px; line-height:1.55; margin:0 0 14px; }
  .import-help b{ color:var(--ink); font-weight:650; }
  .import-step{ display:flex; gap:12px; margin-bottom:16px; }
  .import-step .step-n{ flex:none; width:24px; height:24px; border-radius:50%; background:rgba(255,69,58,.16); color:var(--accent); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
  .import-step .step-body{ flex:1; min-width:0; font-size:13.5px; line-height:1.5; }
  .import-step .step-body b{ color:var(--ink); }
  #ai-prompt{ width:100%; min-height:168px; margin:8px 0; font-family:ui-monospace,Menlo,monospace; font-size:12px; line-height:1.5; color:var(--muted); resize:vertical; }
  #ai-answer{ width:100%; min-height:92px; margin:8px 0; font-family:ui-monospace,Menlo,monospace; font-size:12px; resize:vertical; }
  /* Dezenter Voll-Backup/Restore-Abschnitt (unten im Import-Modal). */
  .import-backup{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
  .import-backup-row{ display:flex; align-items:center; gap:14px; justify-content:space-between; }
  .import-backup-row + .import-backup-row{ margin-top:12px; }
  .import-backup-row .bk-text{ min-width:0; }
  .import-backup-row .bk-text b{ display:block; color:var(--ink); font-size:13.5px; font-weight:650; }
  .import-backup-row .bk-text span{ color:var(--muted); font-size:12px; line-height:1.45; }
  .import-backup-row .btn{ flex:none; }
  #restore-pick{ color:var(--accent); }

  @media (max-width:820px){
    body{ height:auto; overflow:auto; }
    .layout{ display:block; }                 /* natürlicher Fluss statt fester Grid-Höhe */
    .editor-wrap{ overflow:visible; }         /* mit der Seite scrollen, nicht intern */
    .editor-empty{ min-height:0; }
    .sidebar{ border-right:none; border-bottom:1px solid var(--line); }
    .recipe-list{ max-height:44vh; }
    /* Phase 9 – Mobil-Politur: kompaktere Ränder, sauberer Umbruch, größere Touch-Flächen */
    .app-header{ padding:12px 16px; gap:10px; }
    .app-header h1{ font-size:18px; }
    .cam-picker{ margin-left:0; }
    .editor-head{ padding:12px 16px; }
    .editor-body{ padding:16px 16px 40px; }
    .editor-headline{ gap:12px 18px; width:100%; flex-wrap:wrap; }
    .editor-actions{ flex-wrap:wrap; width:100%; }   /* volle Zeile -> Knöpfe brechen sauber um */
    .editor-actions .btn{ flex:1 1 auto; justify-content:center; }   /* Knöpfe teilen sich die Breite */
    .image-band{ overscroll-behavior-x:contain; }   /* horizontales Scrollen zieht die Seite nicht mit */
    .btn, .io-btn, .icon-btn, .bulk-act, .step-btn, .cam-chip{ min-height:42px; }   /* bequemer per Finger */
    .step-btn{ flex-basis:44px; }
    .cslot{ padding:14px; }
    /* Master-Detail: ist ein Rezept gewählt, nur dieses (als Zurück-Anker) + den Editor zeigen */
    body.detail .sidebar-top{ display:none; }
    body.detail .sidebar{ border-bottom:none; }
    body.detail .recipe-list .item:not(.active){ display:none; }
    body.detail .recipe-list{ max-height:none; padding:8px 8px 0; }
    body.detail .recipe-list .item.active{ border:1px solid var(--line); }
    body.detail .recipe-list .item.active .nm::before{ content:"‹ "; color:var(--accent); font-weight:700; }
  }

  /* Phase 10 – Druck: Bildschirm-Teile (Ausgabebereich versteckt, Dialog-Thumbnails) */
  #print-root{ display:none; }
  .oncam-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 4px; }
  .oncam-head .empty-title{ margin:0; }
  .print-thumbs{ display:flex; flex-wrap:wrap; gap:10px; }
  .print-thumb{ width:84px; height:84px; border-radius:10px; overflow:hidden; border:2px solid var(--field-line); cursor:pointer; background:var(--field); flex:none; padding:0; }
  .print-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .print-thumb.sel{ border-color:var(--accent); }
  .print-thumb.none{ display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:11px; text-align:center; line-height:1.3; }

  /* Batch 2b – Druck: A5-Rezeptkarte (Hell/Dunkel) + A4-Spickzettel.
     Die Karte ist exakt 559×794px = A5 bei 96dpi und füllt die Seite (@page margin:0).
     Dieselben Styles rendern die Live-Vorschau im Dialog UND den Ausdruck.
     Schriften: System-Stacks (App ist 100 % offline – kein Google-Fonts-Import). */
  :root{
    --pc-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
    --pc-mono:ui-monospace,'SF Mono','SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
  }
  .print-card{
    width:100%; height:100%; box-sizing:border-box;
    --u:0.178891cqw;                 /* 1 Referenz-px (Karte 559px breit) als Anteil der Seitenbreite */
    padding:calc(40*var(--u)) calc(42*var(--u)) calc(34*var(--u));
    display:flex; flex-direction:column; gap:calc(21*var(--u)); overflow:hidden;
    font-family:var(--pc-sans); background:var(--c-bg); color:var(--c-v);
  }
  /* Farb-Themes der Karte – nur die Variablen wechseln, die Element-Regeln bleiben gleich. */
  .print-card.dark{ --c-bg:#0d0d0f; --c-name:#fff; --c-sub:#9b98a0; --c-code:#cbc8ce; --c-accent:#ff453a; --c-gt:#77747c; --c-line:#26262b; --c-k:#b4b1b8; --c-v:#fff; --c-notes:#cbc8ce; --c-foot:#5c5960; }
  .print-card.light{ --c-bg:#fff; --c-name:#111214; --c-sub:#6f6b68; --c-code:#45423f; --c-accent:#d8342b; --c-gt:#9c968f; --c-line:#e7e2dd; --c-k:#56524e; --c-v:#111; --c-notes:#45423f; --c-foot:#b0aaa4; }
  .pc-head{ display:flex; flex-direction:column; gap:calc(8*var(--u)); }
  .pc-name{ font-weight:800; font-size:calc(33*var(--u)); line-height:1.04; letter-spacing:-.022em; color:var(--c-name); word-break:break-word; }
  .pc-sub{ font-size:calc(13*var(--u)); color:var(--c-sub); letter-spacing:.02em; }
  .pc-code{ font-family:var(--pc-mono); color:var(--c-code); }
  .pc-rule{ width:calc(46*var(--u)); height:calc(3*var(--u)); background:var(--c-accent); border-radius:calc(2*var(--u)); margin-top:calc(6*var(--u)); }
  .pc-photo{ width:100%; height:calc(196*var(--u)); border-radius:calc(11*var(--u)); overflow:hidden; position:relative; flex:none; background:var(--c-line); }
  .pc-photo-img{ width:100%; height:100%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none; }
  .pc-groups{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(19*var(--u)) calc(28*var(--u)); flex-grow:1; align-content:start; }
  .pc-group{ display:flex; flex-direction:column; gap:calc(7*var(--u)); }
  .pc-group-title{ font-size:calc(9*var(--u)); text-transform:uppercase; letter-spacing:.14em; color:var(--c-gt); font-weight:600; padding-bottom:calc(6*var(--u)); border-bottom:1px solid var(--c-line); }
  .pc-rows{ display:flex; flex-direction:column; gap:calc(6*var(--u)); font-size:calc(12.5*var(--u)); }
  .pc-row{ display:flex; justify-content:space-between; gap:calc(12*var(--u)); }
  .pc-row .k{ color:var(--c-k); }
  .pc-row .v{ font-family:var(--pc-mono); color:var(--c-v); text-align:right; }
  .pc-notes{ border-top:1px solid var(--c-line); padding-top:calc(13*var(--u)); }
  .pc-notes .lbl{ display:block; font-size:calc(9*var(--u)); text-transform:uppercase; letter-spacing:.14em; color:var(--c-gt); font-weight:600; margin-bottom:calc(6*var(--u)); }
  .pc-notes .txt{ font-size:calc(12*var(--u)); color:var(--c-notes); line-height:1.5; }
  .pc-foot{ display:flex; justify-content:space-between; align-items:center; font-family:var(--pc-mono); font-size:calc(9.5*var(--u)); letter-spacing:.04em; color:var(--c-foot); }

  /* Kamera-Spickzettel – A4 (794×1123px @96dpi), zentrierte Spalte, druckfreundlich hell */
  /* Höhe = Inhalt (kein erzwungenes A4), sonst läuft der Zettel auf eine 2. Seite über. */
  .print-sheet{ width:794px; box-sizing:border-box; padding:40px 58px 30px; background:#fff; color:#1a1a1c; font-family:var(--pc-sans); --c-accent:#d8342b; --c-line:#e7e2dd; }
  .ps-inner{ max-width:640px; margin:0 auto; }
  .ps-head{ font-weight:800; font-size:26px; letter-spacing:-.02em; color:#111214; }
  .ps-rule{ width:42px; height:3px; background:var(--c-accent); border-radius:2px; margin:8px 0 9px; }
  .ps-sub{ font-size:11.5px; color:#6f6b68; letter-spacing:.02em; margin-bottom:14px; }
  .ps-slot{ display:flex; gap:14px; padding:11px 0; border-top:1px solid var(--c-line); break-inside:avoid; }
  .ps-cn{ flex:none; width:38px; height:38px; border-radius:9px; background:#faf3f2; color:var(--c-accent); font-family:var(--pc-mono); font-weight:500; font-size:14px; display:flex; align-items:center; justify-content:center; }
  .ps-body{ flex:1; min-width:0; }
  .ps-nm{ font-size:14px; font-weight:600; color:#1a1a1c; }
  .ps-meta{ font-size:11px; color:#6f6b68; margin-top:1px; }
  .ps-meta .code{ font-family:var(--pc-mono); color:#45423f; }
  .ps-settings{ font-size:10.5px; color:#56524e; line-height:1.55; margin-top:5px; }
  .ps-settings .v{ font-family:var(--pc-mono); color:#1a1a1c; }
  .ps-empty{ color:#b0aaa4; font-style:italic; font-size:11.5px; padding-top:8px; }
  .ps-foot{ display:flex; justify-content:space-between; font-family:var(--pc-mono); font-size:9px; letter-spacing:.04em; color:#b0aaa4; margin-top:16px; border-top:1px solid var(--c-line); padding-top:10px; }

  /* Druck-Dialog: Live-Vorschau (herunterskaliert) + Foto-Positionierung (Ziehen/Zoom) */
  .print-modal-grid{ display:flex; gap:22px; align-items:flex-start; }
  .print-controls{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:16px; }
  .print-preview-col{ flex:none; }
  .print-preview{ overflow:hidden; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.45); }
  #print-preview-scaler{ width:559px; height:794px; container-type:size; transform-origin:top left; }
  #print-preview-scaler .pc-photo{ cursor:grab; touch-action:none; }
  #print-preview-scaler .pc-photo.grabbing{ cursor:grabbing; }
  .pf-field{ display:flex; flex-direction:column; gap:8px; }
  .pf-label{ font-size:12px; color:var(--muted); font-weight:600; }
  .pf-hint-inline{ color:var(--muted); font-weight:400; }
  .pf-range{ width:100%; accent-color:var(--accent); }
  @media(max-width:660px){ .print-modal-grid{ flex-direction:column-reverse; } .print-preview-col{ align-self:center; } }

  @media print {
    body > *:not(#print-root){ display:none !important; }
    #print-root{ display:block !important; }
    html, body{ margin:0; background:#fff; overflow:visible; }
    *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }

    /* Rezeptkarte: füllt exakt EINE Seite über die height:100%-Kette (adaptiv A4/A5,
       zuverlässiger als position:fixed). #print-root wird zum Größen-Container für cqw. */
    html:has(#print-root.mode-card), body:has(#print-root.mode-card){ height:100%; }
    #print-root.mode-card{ width:100%; height:100%; overflow:hidden; container-type:size; }
    #print-root.mode-card .print-card{ width:100%; height:100%; }
    /* Ganze Seite in Kartenfarbe -> kein weißer Streifen/Rand, auch am Rand nicht. */
    body:has(#print-root.mode-card.theme-dark){ background:#0d0d0f; }

    #print-root .print-card, #print-root .print-sheet{ box-shadow:none; }
  }
</style>

<header class="app-header">
  <!-- Logo: Mount-Fuji-Kachel (dein Logo, ICON.png) – transparente Ecken auf schwarzem Header -->
  <img class="app-mark" src="/ICON.png" alt="FujiRecipeVault logo">
  <h1>FujiRecipeVault</h1>
  <div class="cam-picker">
    <select id="camera-select" class="cam-select"></select>
    <button type="button" id="btn-cameras" class="icon-btn" title="Manage cameras">⚙</button>
    <button type="button" id="btn-backup" class="icon-btn" title="Back up or restore your whole library">⤓</button>
  </div>
  <button type="button" id="btn-quit" class="btn-quit" title="Shut down server">⏻ Quit</button>
</header>

<main class="layout">
  <aside class="sidebar">
    <div class="sidebar-top">
      <button id="btn-new" class="btn-new">+ New recipe</button>
      <input id="search" class="control" type="search" placeholder="Search (name, code, creator …)">
      <select id="filter-sim" class="control"><option value="">All film simulations</option></select>
      <div class="seg" id="filter-cbw">
        <button type="button" data-v="" class="on">All</button>
        <button type="button" data-v="color">Color</button>
        <button type="button" data-v="bw">B&amp;W</button>
      </div>
      <div class="row">
        <select id="sort" class="control">
          <option value="new">Newest first</option>
          <option value="old">Oldest first</option>
          <option value="name">Name A–Z</option>
          <option value="name_desc">Name Z–A</option>
          <option value="fav">Favorites first</option>
          <option value="rating">Rating</option>
          <option value="sim">Film simulation</option>
        </select>
        <button id="filter-fav" class="toggle" title="Favorites only">♥</button>
      </div>
      <div id="tag-filter" hidden></div>
      <div class="count-row">
        <div id="count" class="count"></div>
        <button type="button" id="btn-select" class="linkbtn" hidden>Select</button>
      </div>
      <div class="io-row">
        <button type="button" id="btn-export" class="io-btn" title="Export recipes to a file you can share">↑ Export</button>
        <button type="button" id="btn-import" class="io-btn" title="Import recipes from a shared file">↓ Import</button>
      </div>
    </div>
    <div id="recipe-list" class="recipe-list"></div>
    <div id="bulkbar" class="bulkbar" hidden>
      <div class="bulkbar-count"><span id="bulk-n">0</span> selected</div>
      <div class="bulkbar-actions">
        <button type="button" id="bulk-export" class="bulk-act">Export</button>
        <select id="bulk-assign" class="bulk-act" title="Assign the selected recipes to a camera"><option value="">Assign camera…</option></select>
        <button type="button" id="bulk-tag" class="bulk-act">Tag…</button>
        <button type="button" id="bulk-delete" class="bulk-act danger">Delete</button>
      </div>
    </div>
  </aside>

  <section class="editor-wrap">
    <div id="editor-empty" class="editor-empty">
      <div class="empty-inner">
        <div class="oncam-head">
          <h2 id="empty-title" class="empty-title">On the camera</h2>
          <button type="button" id="btn-print-sheet" class="btn btn-ghost" title="Print a camera cheat sheet" hidden>⎙ Print</button>
        </div>
        <div id="camera-slots" class="camera-slots"></div>
      </div>
    </div>

    <form id="editor" hidden>
      <div class="editor-head">
        <div class="editor-headline">
          <div>
            <div id="editor-title" class="editor-title">New recipe</div>
            <div id="editor-sub" class="editor-sub"></div>
          </div>
          <div class="code-field">
            <label for="short_code">Short code <button type="button" class="help" data-key="short_code">?</button></label>
            <input id="short_code" name="short_code" type="text" maxlength="14" placeholder="e.g. KG+4-5" autocomplete="off">
          </div>
        </div>
        <div class="editor-actions">
          <div id="editor-stars" class="editor-stars" title="Rating"></div>
          <button type="button" id="btn-heart" class="icon-btn" title="Mark as favorite" hidden>♡</button>
          <button type="button" id="btn-changes" class="btn btn-ghost" title="Changes vs. the original" hidden>Changes</button>
          <button type="button" id="btn-dup" class="btn btn-ghost" title="Duplicate this recipe" hidden>⧉ Duplicate</button>
          <button type="button" id="btn-print-card" class="btn btn-ghost" title="Print this recipe (A5 card)" hidden>⎙ Print</button>
          <button type="button" id="btn-delete" class="btn btn-danger">Delete</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </div>

      <div class="editor-body">
        <div id="image-section" class="group">
          <p class="band-title">Sample photos</p>
          <div id="image-band" class="image-band"></div>
          <input id="image-input" type="file" accept="image/*" multiple hidden>
        </div>

        <div class="group">
          <p class="group-title">Basics</p>
          <div class="fields">
            <div class="field wide">
              <label for="name">Name <span class="req">*</span> <button type="button" class="help" data-key="name">?</button></label>
              <input id="name" name="name" type="text" placeholder="e.g. Kodak Portra Warm">
            </div>
            <div class="field wide">
              <label for="film_simulation">Film simulation <button type="button" class="help" data-key="film_simulation">?</button></label>
              <select id="film_simulation" name="film_simulation"></select>
            </div>
            <div class="field">
              <label for="dynamic_range">Dynamic range <button type="button" class="help" data-key="dynamic_range">?</button></label>
              <select id="dynamic_range" name="dynamic_range"><option value="">–</option><option>AUTO</option><option>DR100</option><option>DR200</option><option>DR400</option></select>
            </div>
            <div class="field">
              <label for="d_range_priority">D-Range priority <button type="button" class="help" data-key="d_range_priority">?</button></label>
              <select id="d_range_priority" name="d_range_priority"><option value="">–</option><option>OFF</option><option>WEAK</option><option>STRONG</option><option>AUTO</option></select>
            </div>
            <div class="field">
              <label for="editor-slot">Slot on this camera <button type="button" class="help" data-key="camera_slot">?</button></label>
              <select id="editor-slot"></select>
            </div>
          </div>
        </div>

        <div class="group">
          <p class="group-title">Tone &amp; color</p>
          <div class="fields">
            <div class="field"><label for="highlight_tone">Highlight <button type="button" class="help" data-key="highlight_tone">?</button></label><input id="highlight_tone" name="highlight_tone" type="text" placeholder="0"></div>
            <div class="field"><label for="shadow_tone">Shadow <button type="button" class="help" data-key="shadow_tone">?</button></label><input id="shadow_tone" name="shadow_tone" type="text" placeholder="0"></div>
            <div class="field"><label for="color">Color <button type="button" class="help" data-key="color">?</button></label><input id="color" name="color" type="text" placeholder="0"></div>
            <div class="field"><label for="sharpness">Sharpness <button type="button" class="help" data-key="sharpness">?</button></label><input id="sharpness" name="sharpness" type="text" placeholder="0"></div>
            <div class="field"><label for="noise_reduction">Noise reduction <button type="button" class="help" data-key="noise_reduction">?</button></label><input id="noise_reduction" name="noise_reduction" type="text" placeholder="0"></div>
            <div class="field" id="field-clarity"><label for="clarity">Clarity <button type="button" class="help" data-key="clarity">?</button></label><input id="clarity" name="clarity" type="text" placeholder="0"></div>
          </div>
        </div>

        <div class="group">
          <p class="group-title">Effects</p>
          <div class="fields">
            <div class="field"><label for="grain_effect">Grain effect <button type="button" class="help" data-key="grain_effect">?</button></label><select id="grain_effect" name="grain_effect"><option value="">–</option><option>OFF</option><option>WEAK</option><option>STRONG</option></select></div>
            <div class="field" id="field-grainsize"><label for="grain_size">Grain size <button type="button" class="help" data-key="grain_size">?</button></label><select id="grain_size" name="grain_size"><option value="">–</option><option>SMALL</option><option>LARGE</option></select></div>
            <div class="field"><label for="color_chrome_effect">Color Chrome Effect <button type="button" class="help" data-key="color_chrome_effect">?</button></label><select id="color_chrome_effect" name="color_chrome_effect"><option value="">–</option><option>OFF</option><option>WEAK</option><option>STRONG</option></select></div>
            <div class="field" id="field-ccfxblue"><label for="color_chrome_effect_blue">Color Chrome FX Blue <button type="button" class="help" data-key="color_chrome_effect_blue">?</button></label><select id="color_chrome_effect_blue" name="color_chrome_effect_blue"><option value="">–</option><option>OFF</option><option>WEAK</option><option>STRONG</option></select></div>
            <div class="field"><label for="bw_adj_warm_cool">B&amp;W warm–cool <button type="button" class="help" data-key="bw_adj_warm_cool">?</button></label><input id="bw_adj_warm_cool" name="bw_adj_warm_cool" type="text" placeholder="0"></div>
          </div>
        </div>

        <div class="group">
          <p class="group-title">White balance</p>
          <div class="fields">
            <div class="field wide">
              <label for="white_balance">White balance <button type="button" class="help" data-key="white_balance">?</button></label>
              <input id="white_balance" name="white_balance" type="text" list="wb-list" placeholder="e.g. AUTO, DAYLIGHT / FINE, COLOR TEMPERATURE (Kelvin) …">
              <datalist id="wb-list"><option>AUTO</option><option>DAYLIGHT / FINE</option><option>SHADE</option><option>FLUORESCENT 1</option><option>FLUORESCENT 2</option><option>FLUORESCENT 3</option><option>INCANDESCENT</option><option>UNDERWATER</option><option>COLOR TEMPERATURE (Kelvin)</option><option>CUSTOM 1</option><option>CUSTOM 2</option><option>CUSTOM 3</option></datalist>
            </div>
            <div class="field"><label for="wb_kelvin">Color temperature (Kelvin) <button type="button" class="help" data-key="wb_kelvin">?</button></label><input id="wb_kelvin" name="wb_kelvin" type="text" placeholder="e.g. 5500"></div>
            <div class="field"><label for="wb_shift_red">WB shift red <button type="button" class="help" data-key="wb_shift_red">?</button></label><input id="wb_shift_red" name="wb_shift_red" type="text" placeholder="0"></div>
            <div class="field"><label for="wb_shift_blue">WB shift blue <button type="button" class="help" data-key="wb_shift_blue">?</button></label><input id="wb_shift_blue" name="wb_shift_blue" type="text" placeholder="0"></div>
          </div>
        </div>

        <div class="group">
          <p class="group-title">Exposure &amp; extras</p>
          <div class="fields">
            <div class="field"><label for="iso">ISO (recommended) <button type="button" class="help" data-key="iso">?</button></label><input id="iso" name="iso" type="text" placeholder="e.g. Auto (max 6400)"></div>
            <div class="field"><label for="exposure_compensation">Exposure compensation <button type="button" class="help" data-key="exposure_compensation">?</button></label><input id="exposure_compensation" name="exposure_compensation" type="text" placeholder="e.g. +1/3 to +1"></div>
            <div class="field"><label for="creator">Creator <button type="button" class="help" data-key="creator">?</button></label><input id="creator" name="creator" type="text" placeholder="optional – source / author"></div>
            <div class="field wide"><label for="notes">Notes <button type="button" class="help" data-key="notes">?</button></label><textarea id="notes" name="notes" placeholder="Your own notes …"></textarea></div>
            <div class="field wide">
              <label for="tag-input">Tags</label>
              <div id="tag-chips" class="tag-chips"></div>
              <input id="tag-input" class="tag-input" type="text" placeholder="Add a tag, then Enter or comma" autocomplete="off">
            </div>
          </div>
        </div>

        <div class="group" id="custom-group" hidden>
          <p class="group-title">More parameters</p>
          <div id="custom-params" class="fields"></div>
        </div>

        <div class="group">
          <p class="group-title">Which cameras? <button type="button" class="help" data-key="cameras">?</button></p>
          <div id="cam-memberships" class="cam-chips"></div>
        </div>
      </div>
    </form>
  </section>
</main>

<div id="modal" class="modal" hidden>
  <div class="modal-card">
    <div class="modal-head"><span>Changes vs. the original</span><button type="button" id="modal-close" class="icon-btn">✕</button></div>
    <div id="modal-body" class="modal-body"></div>
    <div class="modal-foot">
      <div class="left">
        <button type="button" id="btn-reset" class="btn btn-ghost">Reset to original</button>
        <button type="button" id="btn-set-original" class="btn btn-ghost">Set current as new original</button>
      </div>
      <button type="button" id="modal-ok" class="btn btn-primary">Close</button>
    </div>
  </div>
</div>

<!-- Phase 8: eigener Bestätigungs-/Hinweis-Dialog im App-Stil (ersetzt native confirm/alert). -->
<div id="ask-modal" class="modal" hidden>
  <div class="modal-card" style="width:min(420px,100%)">
    <div class="modal-head"><span id="ask-title">Please confirm</span></div>
    <div class="modal-body"><p id="ask-text"></p></div>
    <div class="modal-foot"><span></span>
      <span class="ask-actions">
        <button type="button" id="ask-cancel" class="btn btn-ghost">Cancel</button>
        <button type="button" id="ask-ok" class="btn btn-primary">OK</button>
      </span>
    </div>
  </div>
</div>

<div id="cam-modal" class="modal" hidden>
  <div class="modal-card" style="width:min(760px,100%)">
    <div class="modal-head"><span>Manage cameras</span><button type="button" id="cam-modal-close" class="icon-btn">✕</button></div>
    <div class="modal-body">
      <div class="cam-edit-top">
        <select id="cam-edit-select" class="control"></select>
        <button type="button" id="cam-del-btn" class="btn btn-danger">Delete</button>
      </div>
      <div id="cam-edit-form" class="cam-edit-form"></div>
      <hr style="border:none;border-top:1px solid var(--line);margin:20px 0 14px">
      <p class="group-title">Add a new camera</p>
      <div class="cam-add">
        <input id="cam-new-name" type="text" placeholder="Name (e.g. My X-T4)">
        <select id="cam-new-preset"></select>
        <input id="cam-new-slots" type="number" min="1" max="14" value="7" title="Number of custom slots" style="width:80px">
        <button type="button" id="cam-add-btn" class="btn btn-primary">Add</button>
      </div>
    </div>
    <div class="modal-foot"><span></span><button type="button" id="cam-modal-ok" class="btn btn-primary">Done</button></div>
  </div>
</div>

<div id="export-modal" class="modal" hidden>
  <div class="modal-card">
    <div class="modal-head"><span>Export recipes</span><button type="button" id="export-close" class="icon-btn">✕</button></div>
    <div class="modal-body">
      <div id="export-intro" class="export-intro"></div>
      <div class="export-tools">
        <label class="export-selall"><input type="checkbox" id="export-selall"> Select all</label>
        <span id="export-count" class="count"></span>
      </div>
      <div id="export-list" class="export-list"></div>
      <label class="export-images"><input type="checkbox" id="export-with-images" checked> Include sample photos <span class="export-hint">(bigger file)</span></label>
    </div>
    <div class="modal-foot">
      <span></span>
      <div class="left">
        <button type="button" id="export-cancel" class="btn btn-ghost">Cancel</button>
        <button type="button" id="export-do" class="btn btn-primary">Export</button>
      </div>
    </div>
  </div>
</div>
<div id="import-modal" class="modal" hidden>
  <div class="modal-card">
    <div class="modal-head"><span>Import recipes</span><button type="button" id="import-close" class="icon-btn">✕</button></div>
    <div class="modal-body">
      <div class="seg import-seg" id="import-seg">
        <button type="button" data-mode="file" class="on">From a file</button>
        <button type="button" data-mode="photo">From a photo</button>
        <button type="button" data-mode="ai">From a screenshot</button>
      </div>

      <div id="import-file" class="import-pane">
        <p class="import-help">Choose a <b>.zip</b> file that was exported from FujiRecipeVault. Its recipes are added to <b class="import-cam"></b> — nothing is overwritten.</p>
        <button type="button" id="import-pick" class="btn btn-primary">Choose file…</button>
      </div>

      <div id="import-photo" class="import-pane" hidden>
        <p class="import-help">Choose an <b>unedited JPEG straight from your Fujifilm camera</b> — its film-simulation settings are read from the photo and a new recipe is created on <b class="import-cam"></b>. Edited or exported photos usually no longer carry these details.</p>
        <button type="button" id="import-photo-pick" class="btn btn-primary">Choose photo…</button>
      </div>

      <div id="import-ai" class="import-pane" hidden>
        <p class="import-help">No export file? Turn a <b>screenshot</b> of a recipe into a library entry with any AI assistant (Gemini, ChatGPT, Claude …). The new recipe is added to <b class="import-cam"></b>.</p>
        <div class="import-step"><span class="step-n">1</span><div class="step-body">Copy this prompt.
          <textarea id="ai-prompt" readonly></textarea>
          <button type="button" id="ai-copy" class="btn btn-ghost">⧉ Copy prompt</button>
        </div></div>
        <div class="import-step"><span class="step-n">2</span><div class="step-body">Paste it <b>together with your screenshot</b> into the assistant and send.</div></div>
        <div class="import-step"><span class="step-n">3</span><div class="step-body">Paste the assistant's answer here:
          <textarea id="ai-answer" placeholder="Paste the assistant's JSON answer here …"></textarea>
          <button type="button" id="ai-add" class="btn btn-primary">Add to library</button>
        </div></div>
      </div>

    </div>
    <div class="modal-foot"><span></span><button type="button" id="import-done" class="btn btn-ghost">Close</button></div>
  </div>
</div>
<input id="import-input" type="file" accept=".zip,application/zip" hidden>
<input id="import-photo-input" type="file" accept="image/*" hidden>
<input id="restore-input" type="file" accept=".frvbackup,.zip,application/zip" hidden>

<!-- Batch 2: eigenes Backup-&-Restore-Fenster (aus dem Import herausgelöst) -->
<div id="backup-modal" class="modal" hidden>
  <div class="modal-card" style="width:min(470px,100%)">
    <div class="modal-head"><span>Backup &amp; restore</span><button type="button" id="backup-close" class="icon-btn">✕</button></div>
    <div class="modal-body">
      <div class="import-backup-row">
        <div class="bk-text"><b>Full backup</b><span>Save your whole library — recipes, cameras and photos — as one file.</span></div>
        <button type="button" id="backup-download" class="btn btn-primary">↓ Download</button>
      </div>
      <div class="import-backup-row" style="margin-top:16px">
        <div class="bk-text"><b>Restore everything</b><span>Replace the whole library from a backup file. A safety copy is saved first.</span></div>
        <button type="button" id="restore-pick" class="btn btn-ghost">↺ Restore…</button>
      </div>
    </div>
    <div class="modal-foot"><span></span><button type="button" id="backup-done" class="btn btn-ghost">Close</button></div>
  </div>
</div>

<div id="lightbox" class="lightbox" hidden><img id="lightbox-img" src="" alt="Sample photo"></div>
<div id="img-menu" class="ctx-menu" hidden><button type="button" id="img-menu-remove">Remove image</button></div>
<div id="help-pop" class="help-pop" hidden></div>
<!-- Phase 10: Druck. Seitengröße wird per JS auf A5 (Karte) bzw. A4 (Spickzettel) gesetzt. -->
<style id="page-size">@page { size: A5; margin: 12mm; }</style>
<div id="print-root"></div>

<!-- Druckdialog: Theme-Wahl, Fotoauswahl, Foto-Positionierung + Live-Vorschau -->
<div id="print-modal" class="modal" hidden>
  <div class="modal-card" style="width:min(760px,100%)">
    <div class="modal-head"><span>Print recipe card</span><button type="button" id="print-close" class="icon-btn">✕</button></div>
    <div class="modal-body">
      <div class="print-modal-grid">
        <div class="print-controls">
          <div class="pf-field">
            <label class="pf-label">Theme</label>
            <div class="seg" id="print-theme">
              <button type="button" data-v="dark" class="on">Dark</button>
              <button type="button" data-v="light">Light</button>
            </div>
          </div>
          <div class="pf-field" id="print-photo-field">
            <label class="pf-label">Photo</label>
            <div id="print-thumbs" class="print-thumbs"></div>
          </div>
          <div class="pf-field" id="print-zoom-field">
            <label class="pf-label">Zoom <span id="print-zoom-val" class="pf-hint-inline">100%</span></label>
            <input type="range" id="print-zoom" class="pf-range" min="100" max="300" step="5" value="100">
            <p class="import-help" id="print-pos-hint" style="margin:0">Drag the photo in the preview to reposition it.</p>
            <button type="button" id="print-reset" class="linkbtn" style="align-self:flex-start">Reset photo</button>
          </div>
        </div>
        <div class="print-preview-col">
          <div id="print-preview" class="print-preview"><div id="print-preview-scaler"></div></div>
        </div>
      </div>
    </div>
    <div class="modal-foot"><span class="import-help" style="margin:0">Fills the page · print or save as PDF</span>
      <button type="button" id="print-go" class="btn btn-primary">⎙ Print / Save as PDF</button>
    </div>
  </div>
</div>

<div id="toast" class="toast"></div>

<script>
  const $ = id => document.getElementById(id);
  const listEl=$('recipe-list'), countEl=$('count'), searchEl=$('search'), simEl=$('filter-sim'),
        cbwEl=$('filter-cbw'), sortEl=$('sort'), favEl=$('filter-fav'), form=$('editor'),
        emptyEl=$('editor-empty'), titleEl=$('editor-title'), subEl=$('editor-sub'),
        heartBtn=$('btn-heart'), btnChng=$('btn-changes'), btnDel=$('btn-delete'), btnNew=$('btn-new'), btnDup=$('btn-dup'),
        starsEl=$('editor-stars'), tagChipsEl=$('tag-chips'), tagInputEl=$('tag-input'), tagFilterEl=$('tag-filter'),
        btnSelect=$('btn-select'), bulkbar=$('bulkbar'), bulkN=$('bulk-n'), bulkAssign=$('bulk-assign'),
        modal=$('modal'), modalBody=$('modal-body'), imageSection=$('image-section'), imageBand=$('image-band'),
        imageInput=$('image-input'), lightbox=$('lightbox'), lightboxImg=$('lightbox-img'), imgMenu=$('img-menu'),
        helpPop=$('help-pop'), toast=$('toast'), camSelect=$('camera-select'), cameraSlotsEl=$('camera-slots'),
        editorSlot=$('editor-slot'), camMemberships=$('cam-memberships'), camModal=$('cam-modal');

  const LABELS = {
    name:'Name', short_code:'Short code', film_simulation:'Film simulation', dynamic_range:'Dynamic range',
    d_range_priority:'D-Range priority', grain_effect:'Grain effect', grain_size:'Grain size',
    color_chrome_effect:'Color Chrome', color_chrome_effect_blue:'Color Chrome FX Blue', white_balance:'White balance',
    wb_kelvin:'Kelvin', wb_shift_red:'WB red', wb_shift_blue:'WB blue', bw_adj_warm_cool:'B&W warm–cool',
    highlight_tone:'Highlight', shadow_tone:'Shadow', color:'Color', sharpness:'Sharpness',
    noise_reduction:'Noise reduction', clarity:'Clarity', iso:'ISO', exposure_compensation:'Exposure compensation',
    creator:'Creator', notes:'Notes'
  };
  const EDITABLE_KEYS = Object.keys(LABELS);
  const DIFF_KEYS = EDITABLE_KEYS.filter(k => !['short_code','creator','notes'].includes(k));
  const PRESETS = [
    {id:'xt3',name:'X-T3'},{id:'xt30',name:'X-T30'},
    {id:'xt4',name:'X-T4'},{id:'xpro3',name:'X-Pro3'},{id:'x100v',name:'X100V'},
    {id:'xt30ii',name:'X-T30 II'},{id:'xe4',name:'X-E4'},{id:'xs10',name:'X-S10'},
    {id:'xt5',name:'X-T5'},{id:'xh2',name:'X-H2'},{id:'xh2s',name:'X-H2S'},{id:'xs20',name:'X-S20'},
    {id:'x100vi',name:'X100VI'}
  ];
  const DEFAULT_DD = { dynamic_range:['AUTO','DR100','DR200','DR400'], d_range_priority:['OFF','WEAK','STRONG','AUTO'], grain_effect:['OFF','WEAK','STRONG'], grain_size:['SMALL','LARGE'], color_chrome_effect:['OFF','WEAK','STRONG'], color_chrome_effect_blue:['OFF','WEAK','STRONG'] };
  const HELP = {
    short_code:'Short code for the camera (2–4 letters + ±R±B). It records the white-balance shift, which the camera does not store per custom bank.',
    name:'A free-form name used in this app. On the camera itself a custom name is limited to 12 characters.',
    film_simulation:'The base picture profile. Only the film simulations of the selected camera are offered.',
    dynamic_range:'Protects the highlights. DR200 needs ISO 320+, DR400 needs ISO 640+.',
    d_range_priority:'Automatic contrast/dynamic-range control. WEAK/STRONG overrides Highlight, Shadow & DR.',
    grain_effect:'Film-grain strength (OFF/WEAK/STRONG).',
    grain_size:'Grain size (small/large) – only on cameras from the X-T4 onwards.',
    color_chrome_effect:'Adds tonal depth to strong, saturated colors.',
    color_chrome_effect_blue:'Like Color Chrome, but for blue tones – only on cameras from the X-T4 onwards.',
    white_balance:'White-balance mode. Enter the red/blue shift in the fields and in the short code.',
    wb_kelvin:'Fixed color temperature in Kelvin (about 2500–10000 K).',
    wb_shift_red:'WB fine-tuning red (+)/cyan (−), −9 to +9.',
    wb_shift_blue:'WB fine-tuning blue (+)/yellow (−), −9 to +9.',
    bw_adj_warm_cool:'Toning warm (+)/cool (−). Only for ACROS/Monochrome.',
    highlight_tone:'Contrast in the highlights. Usually −2 to +4.',
    shadow_tone:'Contrast in the shadows. Usually −2 to +4.',
    color:'Color saturation. Usually −4 to +4.',
    sharpness:'Sharpening. Usually −4 to +4.',
    noise_reduction:'Noise reduction. Usually −4 to +4.',
    clarity:'Micro-contrast/structure – only on cameras from the X-T4 onwards.',
    iso:'Recommended ISO or upper limit.',
    exposure_compensation:'Recommended exposure compensation in EV.',
    creator:'Who created the recipe, or the source. Optional.',
    notes:'Space for your own notes.',
    camera_slot:'Which custom bank this recipe sits in on THIS camera. For overview only – nothing is written to the camera.',
    cameras:'Which cameras this recipe belongs to. The current camera is fixed. You can add others whose film simulation matches.'
  };

  let allRecipes = [], cameras = [], currentCameraId = null, currentId = undefined, favOnly = false, cbw = '', imgMenuTarget = null, camEditId = null;
  let tagFilter = '', editRating = 0, editTags = [];   // Phase 5: aktiver Tag-Filter + Editor-Zustand
  const parseTags = s => String(s || '').split(',').map(t => t.trim()).filter(Boolean);
  let selectMode = false; const selected = new Set();  // Phase 6: Auswahl-Modus + markierte IDs
  let dirty = false, hlId = null;                      // Phase 8: ungespeicherte Änderungen + Tastatur-Highlight

  // --- Phase 8: eigene Dialoge (Promise-basiert, im App-Modal-Stil) --------
  const askModal = $('ask-modal');
  let askResolve = null;
  function openAsk(opts){
    return new Promise(resolve => {
      askResolve = resolve;
      $('ask-title').textContent = opts.title || 'Please confirm';
      $('ask-text').textContent = opts.text || '';
      const okBtn = $('ask-ok'); okBtn.textContent = opts.ok || 'OK';
      okBtn.className = 'btn ' + (opts.danger ? 'btn-danger' : 'btn-primary');
      const cancelBtn = $('ask-cancel');
      cancelBtn.textContent = opts.cancel || 'Cancel';
      cancelBtn.hidden = (opts.cancel === null);       // alert() zeigt kein „Cancel"
      askModal.hidden = false;
      okBtn.focus();
    });
  }
  function closeAsk(result){
    if(askModal.hidden) return;
    askModal.hidden = true;
    const r = askResolve; askResolve = null;
    if(r) r(result);
  }
  $('ask-ok').addEventListener('click', () => closeAsk(true));
  $('ask-cancel').addEventListener('click', () => closeAsk(false));
  askModal.addEventListener('click', e => { if(e.target === askModal) closeAsk(false); });
  // confirmDialog -> Promise<boolean> ; alertDialog -> Promise (nur OK)
  function confirmDialog(text, opts){ return openAsk(Object.assign({ text, ok:'OK', cancel:'Cancel' }, opts)); }
  function alertDialog(text, opts){ return openAsk(Object.assign({ title:'Heads up', text, cancel:null }, opts)); }
  // Wächter vor dem Verwerfen ungespeicherter Änderungen.
  async function maybeDiscard(){
    if(!dirty) return true;
    return await confirmDialog('Discard unsaved changes?', { ok:'Discard', danger:true });
  }

  const esc = s => String(s ?? '').replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
  const camById = id => cameras.find(c => c.id === id);
  const currentCamera = () => camById(currentCameraId) || cameras[0] || {id:'',name:'',slots:7,features:{},film_sims:[],slotmap:{}};
  const recipeCameras = r => (r.cameras || '').split(',').filter(Boolean);
  const isBW = r => { const f=(r.film_simulation||'').toUpperCase(); return f.startsWith('ACROS')||f.startsWith('MONOCHROME')||f.startsWith('SEPIA'); };
  function isModified(r){
    if(!r.original_json) return false;
    let o; try{ o=JSON.parse(r.original_json); }catch(e){ return false; }
    return DIFF_KEYS.some(k => String(r[k] ?? '') !== String(o[k] ?? ''));
  }

  // Kleiner Wrapper um fetch für schreibende Aktionen: fängt „Server nicht
  // erreichbar" (Netzwerkfehler, z. B. App beendet/abgestürzt) ab und zeigt einen
  // dezenten Hinweis, statt die Aktion still verpuffen zu lassen. Gibt die Antwort
  // zurück (bestehende res.ok-Prüfungen laufen weiter); bei Abbruch wird der Fehler
  // weitergereicht, damit optimistisch geänderte UI nicht fälschlich als gespeichert gilt.
  async function api(url, opts){
    try{
      return await fetch(url, opts);
    }catch(err){
      showToast('Couldn’t reach the app — is it still running?', { duration: 5000 });
      throw err;
    }
  }

  async function loadAll(){
    cameras = await (await fetch('/api/cameras')).json();
    if(!camById(currentCameraId)){
      currentCameraId = localStorage.getItem('currentCamera');
      if(!camById(currentCameraId)) currentCameraId = cameras[0] ? cameras[0].id : null;
    }
    allRecipes = await (await fetch('/api/recipes')).json();
    renderCamSelect(); refreshSimFilter(); renderList(); renderCamera();
  }
  const loadRecipes = loadAll;   // Slot/Recipe-Änderungen laden beides neu

  // Mitgelieferte Beispiel-Rezepte in die aktuelle Kamera laden (Knopf im leeren Zustand).
  async function loadExamples(){
    const btn = document.getElementById('btn-load-examples');
    if(btn){ btn.disabled = true; btn.textContent = 'Loading…'; }
    try{
      await fetch('/api/examples?camera=' + encodeURIComponent(currentCameraId), { method:'POST' });
      await loadAll();
    }catch(e){
      if(btn){ btn.disabled = false; btn.textContent = 'Load example recipes'; }
    }
  }

  function renderCamSelect(){
    camSelect.innerHTML = cameras.map(c => `<option value="${c.id}"${c.id===currentCameraId?' selected':''}>${esc(c.name)}</option>`).join('');
  }
  function refreshSimFilter(){
    const cam = currentCamera();
    const used = new Set(allRecipes.filter(r => recipeCameras(r).includes(currentCameraId)).map(r => r.film_simulation).filter(Boolean));
    const sims = (cam.film_sims||[]).filter(s => used.has(s)).concat([...used].filter(s => !(cam.film_sims||[]).includes(s)));
    const cur = simEl.value;
    simEl.innerHTML = '<option value="">All film simulations</option>' + [...new Set(sims)].map(s => `<option${s===cur?' selected':''}>${esc(s)}</option>`).join('');
  }

  function renderList(){
    renderTagFilter();   // Phase 5: Tag-Chips in der Sidebar aktuell halten
    const q = searchEl.value.trim().toLowerCase(), sim = simEl.value;
    let items = allRecipes.filter(r => {
      if(!recipeCameras(r).includes(currentCameraId)) return false;
      if(favOnly && r.liked !== '1') return false;
      if(sim && r.film_simulation !== sim) return false;
      if(cbw === 'color' && isBW(r)) return false;
      if(cbw === 'bw' && !isBW(r)) return false;
      if(tagFilter && !parseTags(r.tags).includes(tagFilter)) return false;
      if(q && !((r.name+' '+r.film_simulation+' '+r.notes+' '+r.short_code+' '+r.creator+' '+(r.tags||'')).toLowerCase().includes(q))) return false;
      return true;
    });
    const s = sortEl.value;
    items.sort((a,b) => {
      if(s==='name') return (a.name||'').localeCompare(b.name||'');
      if(s==='name_desc') return (b.name||'').localeCompare(a.name||'');
      if(s==='old') return (a.id||'').localeCompare(b.id||'');
      if(s==='fav') return (b.liked==='1')-(a.liked==='1') || (a.name||'').localeCompare(b.name||'');
      if(s==='rating') return ((parseInt(b.rating)||0)-(parseInt(a.rating)||0)) || (a.name||'').localeCompare(b.name||'');
      if(s==='sim') return (a.film_simulation||'').localeCompare(b.film_simulation||'') || (a.name||'').localeCompare(b.name||'');
      return (b.id||'').localeCompare(a.id||'');
    });
    if(!selectMode) countEl.textContent = items.length + ' recipe' + (items.length===1?'':'s') + ' · ' + esc(currentCamera().name);
    btnSelect.hidden = (items.length === 0 && !selectMode);   // „Select" nur zeigen, wenn es Rezepte gibt
    if(items.length===0){
      const noneAtAll = allRecipes.length === 0;   // wirklich leere Bibliothek (frischer Start)?
      listEl.innerHTML = '<div class="list-empty">'
        + 'No recipes for <b>' + esc(currentCamera().name) + '</b> yet.'
        + (noneAtAll
            ? '<div class="empty-actions"><button id="btn-load-examples" class="btn btn-ghost">Load example recipes</button></div>'
              + '<div class="empty-hint">New here? Load a few examples to see how it works — '
              + 'or click <b>+ New recipe</b> above to add your own.</div>'
            : '<div class="empty-hint">Click <b>+ New recipe</b> above to add one.</div>')
        + '</div>';
      const be = document.getElementById('btn-load-examples');
      if(be) be.addEventListener('click', loadExamples);
      return;
    }
    listEl.innerHTML = items.map(r => {
      const liked = r.liked === '1';
      const stars = (parseInt(r.rating)||0) ? `<span class="item-stars">${'★'.repeat(parseInt(r.rating)||0)}</span>` : '';
      const main = `<div class="item-main"><span class="nm">${esc(r.name||'Untitled')}</span><span class="fs">${esc(r.film_simulation||'—')}</span>${stars}</div>`;
      if(selectMode){   // Auswahl-Modus: Checkbox statt Herz, Klick markiert/entmarkiert
        return `<div class="item sel${selected.has(r.id)?' checked':''}" data-id="${r.id}" onclick="toggleSelect('${r.id}')">
          <span class="item-cb">✓</span>${main}</div>`;
      }
      return `<div class="item${r.id===currentId?' active':''}" draggable="true" data-id="${r.id}" onclick="clickRecipe('${r.id}')">
        ${main}
        <button class="heart${liked?' on':''}" title="Mark as favorite" onclick="toggleLike(event,'${r.id}')">${liked?'♥':'♡'}</button>
      </div>`;
    }).join('');
  }

  function renderCamera(){
    const cam = currentCamera();
    $('empty-title').textContent = 'On the camera · ' + cam.name;
    const n = cam.slots || 7, sm = cam.slotmap || {};
    let html = '', filled = 0;
    for(let i=1;i<=n;i++){
      const s = 'C'+i, r = allRecipes.find(x => x.id === sm[s]);
      if(r) filled++;
      html += `<div class="cslot ${r?'filled':'empty'}" data-slot="${s}">
        <span class="cslot-n">${s}</span>
        <span class="cslot-name"${r?` onclick="pickRecipe('${r.id}')"`:''}>${r?esc(r.name):'— empty — (drag a recipe here)'}</span>
        ${r?`<button type="button" class="cslot-clear" title="Clear slot" onclick="clearSlot('${s}')">✕</button>`:''}
      </div>`;
    }
    cameraSlotsEl.innerHTML = html;
    $('btn-print-sheet').hidden = filled === 0;   // Phase 10: Spickzettel nur bei belegten Slots
  }
  async function assignSlot(slot, recipeId){
    await api('/api/cameras/slot?camera='+encodeURIComponent(currentCameraId)+'&slot='+encodeURIComponent(slot)+'&recipe='+encodeURIComponent(recipeId||''), { method:'PUT' });
    await loadAll();
  }
  async function clearSlot(slot){ await assignSlot(slot, ''); }

  function setSelectValue(sel, value){
    sel.querySelectorAll('option[data-adhoc]').forEach(o => o.remove());
    if(value && ![...sel.options].some(o => o.value === value)){
      const opt=document.createElement('option'); opt.value=value; opt.textContent=value; opt.setAttribute('data-adhoc','1'); sel.appendChild(opt);
    }
    sel.value = value || '';
  }
  function applyCameraToEditor(r){
    const cam = currentCamera();
    // Filmsimulationen der Kamera
    $('film_simulation').innerHTML = '<option value="">– please choose –</option>' + (cam.film_sims||[]).map(s=>`<option>${esc(s)}</option>`).join('');
    // eingebaute Dropdown-Werte aus der Kamera
    const po = cam.param_options || {};
    ['dynamic_range','d_range_priority','grain_effect','grain_size','color_chrome_effect','color_chrome_effect_blue'].forEach(key => {
      const sel = $(key); if(!sel) return;
      const opts = po[key] || DEFAULT_DD[key] || [];
      sel.innerHTML = '<option value="">–</option>' + opts.map(o=>`<option>${esc(o)}</option>`).join('');
    });
    // Sichtbarkeit der optionalen Parameter
    const f = cam.features || {};
    $('field-clarity').hidden = !f.clarity;
    $('field-ccfxblue').hidden = !f.color_chrome_effect_blue;
    $('field-grainsize').hidden = !f.grain_size;
    // Platz-Dropdown für DIESE Kamera
    const n = cam.slots || 7, sm = cam.slotmap || {};
    let cur = ''; for(let i=1;i<=n;i++){ if(sm['C'+i] === currentId) cur='C'+i; }
    let so = '<option value="">— not on the camera —</option>';
    for(let i=1;i<=n;i++) so += `<option value="C${i}">C${i}</option>`;
    editorSlot.innerHTML = so; editorSlot.value = cur;
    renderCustomParams(cam, r);
    renderMemberships(r);
  }
  function renderCustomParams(cam, r){
    const cps = cam.custom_params || [];
    $('custom-group').hidden = cps.length === 0;
    let cust = {}; try{ cust = JSON.parse((r && r.custom) || '{}'); }catch(e){}
    $('custom-params').innerHTML = cps.map(p => {
      const val = cust[p.key] != null ? cust[p.key] : '';
      if(p.type === 'select'){
        const opts = '<option value="">–</option>' + (p.options||[]).map(o=>`<option${o===val?' selected':''}>${esc(o)}</option>`).join('');
        return `<div class="field"><label>${esc(p.label||p.key)}</label><select data-custom="${esc(p.key)}">${opts}</select></div>`;
      }
      return `<div class="field"><label>${esc(p.label||p.key)}</label><input type="text" data-custom="${esc(p.key)}" value="${esc(val)}"></div>`;
    }).join('');
  }
  // --- Phase 7: Kompatibilitäts-Warnung -----------------------------------
  // Ist ein Parameter tatsächlich „genutzt"? Leere / neutrale Werte zählen nicht.
  function paramUsed(key, v){
    v = String(v == null ? '' : v).trim();
    if(!v) return false;
    if(key === 'clarity') return parseInt(v, 10) !== 0;             // 0 = neutral
    if(key === 'color_chrome_effect_blue') return v.toUpperCase() !== 'OFF';
    return true;                                                    // grain_size: jeder gesetzte Wert zählt
  }
  // Liste von Warnungen, wenn Rezept r Funktionen nutzt, die Kamera c nicht kann (leer = passt).
  function cameraWarnings(r, c){
    if(!r || !c) return [];
    const f = c.features || {}, w = [];
    if(r.film_simulation && !(c.film_sims||[]).includes(r.film_simulation))
      w.push('Film simulation “' + r.film_simulation + '” is not available on ' + c.name);
    if(paramUsed('clarity', r.clarity) && !f.clarity)
      w.push('Uses Clarity — not available on ' + c.name);
    if(paramUsed('grain_size', r.grain_size) && !f.grain_size)
      w.push('Uses Grain size — not available on ' + c.name);
    if(paramUsed('color_chrome_effect_blue', r.color_chrome_effect_blue) && !f.color_chrome_effect_blue)
      w.push('Uses Color Chrome FX Blue — not available on ' + c.name);
    return w;
  }

  function renderMemberships(r){
    const mine = r ? recipeCameras(r) : [currentCameraId];
    camMemberships.innerHTML = cameras.map(c => {
      const on = mine.includes(c.id);
      const compatible = !r || !r.film_simulation || (c.film_sims||[]).includes(r.film_simulation) || c.id===currentCameraId;
      const locked = c.id === currentCameraId;
      const cls = 'cam-chip' + (on?' on':'') + (locked?' locked':'') + (!compatible && !on ?' disabled':'');
      // ⚠ nur an ZUGEORDNETEN Kameras, deren Fähigkeiten das Rezept übersteigt – nur Hinweis, blockiert nichts.
      const warns = on ? cameraWarnings(r, c) : [];
      const warn = warns.length ? ` <span class="cam-warn" tabindex="0" data-tip="${esc(warns.join(' · '))}">⚠</span>` : '';
      return `<span class="${cls}" ${locked||(!compatible&&!on)?'':`onclick="toggleMembership('${c.id}')"`}>${on?'✓ ':''}${esc(c.name)}${warn}</span>`;
    }).join('');
  }
  async function toggleMembership(camId){
    if(!currentId) return;
    const r = allRecipes.find(x => x.id === currentId); if(!r) return;
    let mine = recipeCameras(r);
    const adding = !mine.includes(camId);
    mine = mine.includes(camId) ? mine.filter(x => x !== camId) : mine.concat([camId]);
    if(!mine.includes(currentCameraId)) mine.push(currentCameraId);
    await api('/api/recipes?id='+encodeURIComponent(currentId), { method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify({ cameras: mine.join(',') }) });
    await loadAll();
    const rr = allRecipes.find(x => x.id === currentId); if(rr) renderMemberships(rr);
    // Dezenter Hinweis, falls die eben zugewiesene Kamera etwas nicht kann (blockiert nicht).
    if(adding){
      const cam = camById(camId), warns = cameraWarnings(rr, cam);
      if(warns.length) showToast('⚠ ' + cam.name + ' can’t do everything in this recipe');
    }
  }

  function fillForm(r){
    for(const key of EDITABLE_KEYS){
      const field = form.elements[key];
      if(!field) continue;
      const val = (r && r[key] != null) ? r[key] : '';
      if(field.tagName === 'SELECT') setSelectValue(field, val);
      else field.value = val;
    }
  }

  async function clickRecipe(id){ if(!(await maybeDiscard())) return; if(currentId === id) deselectRecipe(); else selectRecipe(id); }
  async function pickRecipe(id){ if(!(await maybeDiscard())) return; selectRecipe(id); }   // aus Kamera-Slot
  function selectRecipe(id){
    const r = allRecipes.find(x => x.id === id); if(!r) return;
    currentId = id; applyCameraToEditor(r); fillForm(r);
    titleEl.textContent = r.name || 'Untitled';
    subEl.textContent = 'Saved: ' + (r.created_at || '—') + (isModified(r) ? ' · edited' : '');
    heartBtn.hidden=false; btnChng.hidden=false; btnDel.hidden=false; btnDup.hidden=false; $('btn-print-card').hidden=false;
    editRating = parseInt(r.rating) || 0; renderStars();          // Phase 5: Rating + Tags laden
    editTags = parseTags(r.tags); renderTags(); tagInputEl.value = '';
    updateHeart(); renderImages();
    emptyEl.hidden=true; form.hidden=false; renderList();
    document.body.classList.add('detail');   // Mobil: nur das gewählte Rezept zeigen
    dirty = false;   // Phase 8: frisch geladen -> als sauber markieren
  }
  function deselectRecipe(){ currentId=undefined; form.hidden=true; emptyEl.hidden=false; dirty=false; document.body.classList.remove('detail'); renderCamera(); renderList(); }
  async function newRecipe(){
    if(!(await maybeDiscard())) return;
    if(selectMode) exitSelect();
    currentId=null; applyCameraToEditor(null); fillForm(null);
    titleEl.textContent='New recipe'; subEl.textContent='For: '+currentCamera().name;
    heartBtn.hidden=true; btnChng.hidden=true; btnDel.hidden=true; btnDup.hidden=true; $('btn-print-card').hidden=true;
    editRating = 0; renderStars(); editTags = []; renderTags(); tagInputEl.value = '';   // Phase 5: leer starten
    renderImages(); emptyEl.hidden=true; form.hidden=false; renderList(); form.elements['name'].focus();
    document.body.classList.remove('detail');   // neues Rezept: Liste bleibt sichtbar
    dirty = false;
  }

  // Phase 8: ungespeicherte Änderungen erkennen + vor Tab-Schließen warnen.
  function markDirty(e){ if(e && e.target && e.target.id === 'editor-slot') return; dirty = true; }   // Slot speichert sofort
  form.addEventListener('input', markDirty);
  form.addEventListener('change', markDirty);
  window.addEventListener('beforeunload', e => { if(dirty){ e.preventDefault(); e.returnValue = ''; } });

  // --- Phase 8: Tastenkürzel ----------------------------------------------
  function moveHighlight(delta){
    const items = [...listEl.querySelectorAll('.item')];
    if(!items.length) return;
    let idx = items.findIndex(el => el.dataset.id === hlId);
    if(idx < 0) idx = items.findIndex(el => el.classList.contains('active'));
    idx = (idx < 0) ? (delta > 0 ? 0 : items.length - 1) : Math.max(0, Math.min(items.length - 1, idx + delta));
    items.forEach(el => el.classList.remove('hl'));
    const el = items[idx]; el.classList.add('hl'); el.scrollIntoView({ block:'nearest' });
    hlId = el.dataset.id;
  }
  async function closeEditor(){ if(!(await maybeDiscard())) return; deselectRecipe(); }

  document.addEventListener('keydown', e => {
    // ⌘/Ctrl+S: speichern, wenn der Editor offen ist (auch aus einem Feld heraus).
    if((e.metaKey || e.ctrlKey) && (e.key === 's' || e.key === 'S')){
      if(!form.hidden){ e.preventDefault(); form.requestSubmit(); }
      return;
    }
    // Esc: offenen Dialog / Modal / Lightbox / Editor schließen (in dieser Reihenfolge).
    if(e.key === 'Escape'){
      if(!askModal.hidden){ e.preventDefault(); closeAsk(false); return; }
      const m = ['cam-modal','export-modal','import-modal','modal','print-modal'].map($).find(x => x && !x.hidden);
      if(m){ e.preventDefault(); m.hidden = true; return; }
      if(!lightbox.hidden){ e.preventDefault(); lightbox.hidden = true; lightboxImg.src = ''; return; }
      if(!form.hidden){ e.preventDefault(); closeEditor(); return; }
      return;
    }
    // Ab hier: nur außerhalb von Eingabefeldern und ohne offene Overlays.
    const tag = (document.activeElement && document.activeElement.tagName) || '';
    const inField = /^(INPUT|TEXTAREA|SELECT)$/.test(tag) || (document.activeElement && document.activeElement.isContentEditable);
    const anyOverlay = [askModal, $('cam-modal'), $('export-modal'), $('import-modal'), $('modal'), $('print-modal')].some(x => x && !x.hidden) || !lightbox.hidden;
    if(inField || anyOverlay) return;
    if(e.key === '/'){ e.preventDefault(); searchEl.focus(); }
    else if(e.key === 'n' || e.key === 'N'){ e.preventDefault(); newRecipe(); }
    else if(!selectMode && e.key === 'ArrowDown'){ e.preventDefault(); moveHighlight(1); }
    else if(!selectMode && e.key === 'ArrowUp'){ e.preventDefault(); moveHighlight(-1); }
    else if(!selectMode && e.key === 'Enter' && hlId){ e.preventDefault(); pickRecipe(hlId); }
  });

  form.addEventListener('submit', async e => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(form).entries());
    if(!data.name || !data.name.trim()){ await alertDialog('Please give the recipe a name.'); return; }
    const custom = {}; document.querySelectorAll('#custom-params [data-custom]').forEach(el => { custom[el.dataset.custom] = el.value; });
    data.custom = JSON.stringify(custom);
    // Phase 5: offenes Tag-Feld übernehmen, dann Rating + Tags anhängen (Meta-Felder, nicht im Formular).
    if(tagInputEl.value.trim()){ addTags(tagInputEl.value); tagInputEl.value = ''; }
    data.rating = editRating ? String(editRating) : '';
    data.tags = editTags.join(',');
    const isUpdate = !!currentId;
    if(!isUpdate) data.cameras = currentCameraId;   // neues Rezept gehört zur aktuellen Kamera
    const res = isUpdate
      ? await fetch('/api/recipes?id='+encodeURIComponent(currentId), { method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify(data) })
      : await fetch('/api/recipes', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(data) });
    if(!res.ok){ await alertDialog('Saving failed.'); return; }
    const saved = await res.json();
    await loadAll(); selectRecipe(saved.id);
    showToast(isUpdate ? 'Changes saved ✓' : 'Recipe saved ✓');
  });

  btnDel.addEventListener('click', async () => {
    if(!currentId) return;
    const r = allRecipes.find(x => x.id === currentId);
    const id = currentId, name = r ? (r.name || 'Recipe') : 'Recipe';
    await fetch('/api/recipes?id='+encodeURIComponent(id), { method:'DELETE' });
    currentId=undefined; form.hidden=true; emptyEl.hidden=false; await loadAll();
    // Kein „Really delete?" mehr – das Löschen ist per Undo im Toast rückholbar.
    showToast('“'+name+'” deleted', { actionLabel:'Undo', duration:7000, onAction: async () => {
      const res = await fetch('/api/recipes/restore?id='+encodeURIComponent(id), { method:'POST' });
      if(res.ok){ const rec = await res.json().catch(()=>null); await loadAll(); if(rec && rec.id) selectRecipe(rec.id); showToast('Recipe restored ✓'); }
      else showToast('Could not restore.');
    }});
  });

  async function toggleLike(ev, id){
    ev.stopPropagation();
    const r = allRecipes.find(x => x.id === id); if(!r) return;
    r.liked = (r.liked==='1') ? '' : '1'; renderList(); if(currentId===id) updateHeart();
    await api('/api/recipes?id='+encodeURIComponent(id), { method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify({ liked:r.liked }) });
  }
  function updateHeart(){ const r=allRecipes.find(x=>x.id===currentId); const l=r&&r.liked==='1'; heartBtn.textContent=l?'♥':'♡'; heartBtn.classList.toggle('on',!!l); }
  heartBtn.addEventListener('click', () => { if(currentId) toggleLike({stopPropagation(){}}, currentId); });

  // --- Sterne-Bewertung (Rating) ------------------------------------------
  function renderStars(){
    starsEl.innerHTML = [1,2,3,4,5].map(i =>
      `<button type="button" class="star${i<=editRating?' on':''}" data-n="${i}" title="${i} star${i>1?'s':''}">★</button>`
    ).join('');
  }
  async function setRating(n){
    editRating = (editRating === n) ? 0 : n;   // nochmal auf denselben Stern -> Bewertung löschen
    renderStars();
    if(currentId){                             // bestehendes Rezept: sofort speichern (wie der Favorit)
      const val = editRating ? String(editRating) : '';
      const r = allRecipes.find(x => x.id === currentId); if(r) r.rating = val;
      await api('/api/recipes?id='+encodeURIComponent(currentId), { method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify({ rating: val }) });
      renderList();
    }
  }
  starsEl.addEventListener('click', e => { const b = e.target.closest('button'); if(b) setRating(+b.dataset.n); });

  // --- Tags im Editor ------------------------------------------------------
  function renderTags(){
    tagChipsEl.innerHTML = editTags.map((t, i) =>
      `<span class="tag-chip">${esc(t)}<button type="button" data-i="${i}" title="Remove tag">✕</button></span>`
    ).join('');
  }
  function addTags(raw){
    parseTags(raw).forEach(t => { if(!editTags.includes(t)) editTags.push(t); });
    renderTags(); dirty = true;   // Phase 8: Tag-Änderung ist eine ungespeicherte Änderung
  }
  tagChipsEl.addEventListener('click', e => { const b = e.target.closest('button'); if(!b) return; editTags.splice(+b.dataset.i, 1); renderTags(); dirty = true; });
  tagInputEl.addEventListener('keydown', e => {
    if(e.key === 'Enter' || e.key === ','){ e.preventDefault(); addTags(tagInputEl.value); tagInputEl.value = ''; }
    else if(e.key === 'Backspace' && !tagInputEl.value && editTags.length){ editTags.pop(); renderTags(); dirty = true; }
  });
  tagInputEl.addEventListener('blur', () => { if(tagInputEl.value.trim()){ addTags(tagInputEl.value); tagInputEl.value = ''; } });

  // --- Tag-Filter in der Sidebar (nur sichtbar, wenn Tags existieren) -------
  function collectTags(){
    const set = new Set();
    allRecipes.filter(r => recipeCameras(r).includes(currentCameraId)).forEach(r => parseTags(r.tags).forEach(t => set.add(t)));
    return [...set].sort((a, b) => a.localeCompare(b));
  }
  function renderTagFilter(){
    const tags = collectTags();
    if(tagFilter && !tags.includes(tagFilter)) tagFilter = '';   // verschwundenen Filter lösen
    if(!tags.length){ tagFilterEl.hidden = true; tagFilterEl.innerHTML = ''; return; }
    tagFilterEl.hidden = false;
    tagFilterEl.innerHTML = tags.map(t => `<button type="button" class="tagf${t===tagFilter?' on':''}" data-tag="${esc(t)}">${esc(t)}</button>`).join('');
  }
  tagFilterEl.addEventListener('click', e => { const b = e.target.closest('button'); if(!b) return; tagFilter = (tagFilter === b.dataset.tag) ? '' : b.dataset.tag; renderList(); });

  // --- Duplizieren ---------------------------------------------------------
  async function duplicateRecipe(){
    if(!currentId) return;
    const r = allRecipes.find(x => x.id === currentId); if(!r) return;
    const data = {};
    for(const k of EDITABLE_KEYS) data[k] = (r[k] != null) ? String(r[k]) : '';   // alle Inhaltsfelder
    data.name = (r.name || 'Recipe') + ' (copy)';
    data.rating = r.rating || '';
    data.tags = r.tags || '';
    data.custom = r.custom || '';                   // kamera-spezifische Custom-Werte mitkopieren
    data.cameras = r.cameras || currentCameraId;    // gleiche Kamera(s)
    // Bewusst NICHT übernommen: id/created_at/original_json/images/liked – der Server
    // vergibt frische id + frischen Original-Snapshot, die Kopie gilt als „unverändert".
    const res = await fetch('/api/recipes', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(data) });
    if(!res.ok){ showToast('Could not duplicate.'); return; }
    const saved = await res.json();
    await loadAll(); selectRecipe(saved.id); showToast('Duplicated ✓');
  }
  btnDup.addEventListener('click', duplicateRecipe);

  // --- Phase 6: Mehrfachauswahl + Sammelaktionen --------------------------
  function updateBulk(){
    const n = selected.size;
    bulkN.textContent = n;
    if(selectMode) countEl.textContent = n + ' selected';
    bulkbar.querySelectorAll('.bulk-act').forEach(el => { el.disabled = (n === 0); });   // ohne Auswahl inaktiv
  }
  function fillBulkCameras(){
    bulkAssign.innerHTML = '<option value="">Assign camera…</option>'
      + cameras.map(c => `<option value="${esc(c.id)}">${esc(c.name)}</option>`).join('');
  }
  function enterSelect(){
    if(currentId !== undefined) deselectRecipe();   // offenen Editor schließen
    selectMode = true; selected.clear();
    fillBulkCameras();
    btnSelect.textContent = 'Cancel'; bulkbar.hidden = false;
    renderList(); updateBulk();
  }
  function exitSelect(){
    selectMode = false; selected.clear();
    btnSelect.textContent = 'Select'; bulkbar.hidden = true;
    renderList();
  }
  function toggleSelect(id){
    if(selected.has(id)) selected.delete(id); else selected.add(id);
    const el = listEl.querySelector('.item[data-id="'+id+'"]');
    if(el) el.classList.toggle('checked', selected.has(id));
    updateBulk();
  }
  btnSelect.addEventListener('click', () => { if(selectMode) exitSelect(); else enterSelect(); });

  async function bulkExport(){
    const ids = [...selected]; if(!ids.length) return;
    const ok = await downloadExport(ids, true);
    if(ok){ showToast(ids.length + ' recipe' + (ids.length===1?'':'s') + ' exported ✓'); exitSelect(); }
    else showToast('Export failed.');
  }
  async function bulkAssignCamera(camId){
    const ids = [...selected]; if(!ids.length || !camId) return;
    await Promise.all(ids.map(id => {
      const r = allRecipes.find(x => x.id === id); if(!r) return null;
      const cams = recipeCameras(r);
      if(cams.includes(camId)) return null;                      // schon zugeordnet -> überspringen
      return fetch('/api/recipes?id='+encodeURIComponent(id), { method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify({ cameras: cams.concat([camId]).join(',') }) });
    }));
    const cam = camById(camId);
    await loadAll();
    showToast(ids.length + ' recipe' + (ids.length===1?'':'s') + ' → ' + (cam ? cam.name : camId) + ' ✓');
    exitSelect();
  }
  async function bulkAddTag(){
    const raw = prompt('Add tag(s) to the selected recipes (comma-separated):');
    if(raw === null) return;
    const add = parseTags(raw); if(!add.length) return;
    const ids = [...selected];
    await Promise.all(ids.map(id => {
      const r = allRecipes.find(x => x.id === id); if(!r) return null;
      const merged = parseTags(r.tags);
      add.forEach(t => { if(!merged.includes(t)) merged.push(t); });
      return fetch('/api/recipes?id='+encodeURIComponent(id), { method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify({ tags: merged.join(', ') }) });
    }));
    await loadAll();
    showToast('Tagged ' + ids.length + ' recipe' + (ids.length===1?'':'s') + ' ✓');
    exitSelect();
  }
  async function bulkDelete(){
    const ids = [...selected]; if(!ids.length) return;
    await Promise.all(ids.map(id => fetch('/api/recipes?id='+encodeURIComponent(id), { method:'DELETE' })));
    await loadAll(); exitSelect();
    showToast(ids.length + ' recipe' + (ids.length===1?'':'s') + ' deleted', { actionLabel:'Undo', duration:8000, onAction: async () => {
      await Promise.all(ids.map(id => fetch('/api/recipes/restore?id='+encodeURIComponent(id), { method:'POST' })));
      await loadAll();
      showToast('Restored ✓');
    }});
  }
  $('bulk-export').addEventListener('click', bulkExport);
  $('bulk-tag').addEventListener('click', bulkAddTag);
  $('bulk-delete').addEventListener('click', bulkDelete);
  bulkAssign.addEventListener('change', () => { const v = bulkAssign.value; bulkAssign.value = ''; if(v) bulkAssignCamera(v); });

  // --- Phase 10: Druck (A5-Rezeptkarte + Kamera-Spickzettel) ---------------
  // Kein serverseitiges PDF: eine dedizierte Druckansicht (weiß/schwarz) wird per
  // window.print() ausgegeben; der Nutzer wählt im Dialog „Als PDF sichern".
  const PRINT_GROUPS = [
    ['Film & dynamic range', ['dynamic_range','d_range_priority','grain_effect','grain_size','color_chrome_effect','color_chrome_effect_blue']],
    ['Tone & color',         ['highlight_tone','shadow_tone','color','sharpness','noise_reduction','clarity']],
    ['White balance',        ['white_balance','wb_kelvin','wb_shift_red','wb_shift_blue','bw_adj_warm_cool']],
    ['Exposure',             ['iso','exposure_compensation']]
  ];
  const setPageSize = spec => { $('page-size').textContent = '@page { size: ' + spec + '; }'; };
  const fieldVal = (r, k) => String(r[k] == null ? '' : r[k]).trim();
  const pClamp = (v, a, b) => Math.max(a, Math.min(b, v));

  // Foto-Block mit frei wählbarem Ausschnitt: object-position = Verschiebung,
  // transform:scale = Zoom, transform-origin folgt der Position (gleicher Fokuspunkt).
  function buildPhoto(r, cfg){
    if(!cfg.image) return '';
    const url = `/images/${encodeURIComponent(r.id)}/${encodeURIComponent(cfg.image)}`;
    const st = `object-position:${cfg.posX}% ${cfg.posY}%;transform:scale(${cfg.zoom});transform-origin:${cfg.posX}% ${cfg.posY}%;`;
    return `<div class="pc-photo"><img class="pc-photo-img" src="${url}" alt="" draggable="false" style="${st}"></div>`;
  }

  function buildRecipeCard(r, cfg){
    const simTxt  = fieldVal(r,'film_simulation') ? esc(fieldVal(r,'film_simulation')) : '';
    const codeTxt = fieldVal(r,'short_code') ? `<span class="pc-code">${esc(fieldVal(r,'short_code'))}</span>` : '';
    const sub = [simTxt, codeTxt].filter(Boolean).join('&nbsp;&nbsp;·&nbsp;&nbsp;');
    const groups = PRINT_GROUPS.map(([title, keys]) => {
      const rows = keys.filter(k => fieldVal(r, k) !== '').map(k =>
        `<div class="pc-row"><span class="k">${esc(LABELS[k]||k)}</span><span class="v">${esc(fieldVal(r,k))}</span></div>`);
      return rows.length ? `<div class="pc-group"><div class="pc-group-title">${esc(title)}</div><div class="pc-rows">${rows.join('')}</div></div>` : '';
    }).join('');
    const notes = fieldVal(r,'notes') ? `<div class="pc-notes"><span class="lbl">Notes</span><span class="txt">${esc(fieldVal(r,'notes'))}</span></div>` : '';
    // Fußzeile rechts: Ersteller, sonst die kompatiblen Kameras dieses Rezepts.
    const compat = String(r.cameras||'').split(',').map(s=>s.trim()).filter(Boolean)
      .map(id => { const c = camById(id); return c ? c.name : null; }).filter(Boolean);
    const footRight = fieldVal(r,'creator') ? esc('by ' + fieldVal(r,'creator')) : esc(compat.slice(0,3).join(' · '));
    const theme = cfg.theme === 'light' ? 'light' : 'dark';
    return `<div class="print-card ${theme}">
      <div class="pc-head">
        <div class="pc-name">${esc(r.name||'Untitled')}</div>
        ${sub ? `<div class="pc-sub">${sub}</div>` : ''}
        <div class="pc-rule"></div>
      </div>
      ${buildPhoto(r, cfg)}
      <div class="pc-groups">${groups}</div>
      ${notes}
      <div class="pc-foot"><span>FUJIRECIPEVAULT</span><span>${footRight}</span></div>
    </div>`;
  }

  function buildCheatSheet(cam){
    const n = cam.slots || 7, sm = cam.slotmap || {};
    const core = ['dynamic_range','highlight_tone','shadow_tone','color','sharpness','noise_reduction','grain_effect','clarity','white_balance','wb_shift_red','wb_shift_blue'];
    let rows = '';
    for(let i=1;i<=n;i++){
      const slot = 'C'+i, r = allRecipes.find(x => x.id === sm[slot]);
      if(r){
        const sim = fieldVal(r,'film_simulation') ? esc(fieldVal(r,'film_simulation')) : '';
        const code = fieldVal(r,'short_code') ? `<span class="code">${esc(fieldVal(r,'short_code'))}</span>` : '';
        const meta = [sim, code].filter(Boolean).join('&nbsp;&nbsp;·&nbsp;&nbsp;');
        const settings = core.filter(k => fieldVal(r,k) !== '')
          .map(k => `${esc(LABELS[k]||k)}&nbsp;<span class="v">${esc(fieldVal(r,k))}</span>`).join('&nbsp;&nbsp;·&nbsp;&nbsp;');
        rows += `<div class="ps-slot"><div class="ps-cn">${slot}</div><div class="ps-body">
          <div class="ps-nm">${esc(r.name||'Untitled')}</div>
          ${meta ? `<div class="ps-meta">${meta}</div>` : ''}
          ${settings ? `<div class="ps-settings">${settings}</div>` : ''}
        </div></div>`;
      } else {
        rows += `<div class="ps-slot"><div class="ps-cn">${slot}</div><div class="ps-body"><div class="ps-empty">— empty —</div></div></div>`;
      }
    }
    return `<div class="print-sheet"><div class="ps-inner">
      <div class="ps-head">${esc(cam.name)}</div>
      <div class="ps-rule"></div>
      <div class="ps-sub">Camera slots C1–C${n} · type these into the camera's custom settings</div>
      ${rows}
      <div class="ps-foot"><span>FUJIRECIPEVAULT</span><span>Camera cheat sheet</span></div>
    </div></div>`;
  }

  function _safeImages(r){ try{ const a = JSON.parse(r.images||'[]'); return Array.isArray(a) ? a : []; }catch(e){ return []; } }

  // Zustand des Druckdialogs: Foto, Theme und Foto-Ausschnitt (Position + Zoom).
  let printCfg = { image:null, theme:'dark', posX:50, posY:50, zoom:1 };
  const currentPrintRecipe = () => allRecipes.find(x => x.id === currentId);

  // Nur das Foto-Element live nachziehen (kein Neuaufbau der Karte beim Ziehen/Zoomen).
  function applyPhotoTransform(){
    const img = $('print-preview').querySelector('.pc-photo-img'); if(!img) return;
    img.style.objectPosition = printCfg.posX + '% ' + printCfg.posY + '%';
    img.style.transform = 'scale(' + printCfg.zoom + ')';
    img.style.transformOrigin = printCfg.posX + '% ' + printCfg.posY + '%';
  }

  // Vorschau-Karte bauen und so skalieren, dass sie in die Dialogspalte passt.
  function renderPrintPreview(){
    const r = currentPrintRecipe(); if(!r) return;
    $('print-preview-scaler').innerHTML = buildRecipeCard(r, printCfg);
    const target = window.innerWidth < 660 ? (window.innerWidth - 96) : 340;
    const scale = pClamp(target / 559, 0.3, 0.62);
    $('print-preview-scaler').style.transform = 'scale(' + scale + ')';
    $('print-preview').style.width  = Math.round(559 * scale) + 'px';
    $('print-preview').style.height = Math.round(794 * scale) + 'px';
  }

  function openPrintCard(){
    if(!currentId) return;
    const r = currentPrintRecipe(); if(!r) return;
    const imgs = _safeImages(r);
    printCfg = { image: imgs[0] || null, theme: printCfg.theme || 'dark', posX:50, posY:50, zoom:1 };
    [...$('print-theme').children].forEach(c => c.classList.toggle('on', c.dataset.v === printCfg.theme));
    $('print-zoom').value = 100; $('print-zoom-val').textContent = '100%';
    if(imgs.length){                                   // Fotoauswahl nur bei vorhandenen Bildern
      $('print-photo-field').hidden = false;
      $('print-thumbs').innerHTML =
        `<button type="button" class="print-thumb none${printCfg.image?'':' sel'}" data-img="">No photo</button>` +
        imgs.map(nm => `<button type="button" class="print-thumb${nm===printCfg.image?' sel':''}" data-img="${esc(nm)}"><img src="/images/${encodeURIComponent(r.id)}/${encodeURIComponent(nm)}" alt=""></button>`).join('');
    } else {
      $('print-photo-field').hidden = true;
    }
    $('print-zoom-field').hidden = !printCfg.image;
    $('print-modal').hidden = false;
    renderPrintPreview();
  }

  // Foto per Ziehen positionieren (Pointer-Events → Maus und Touch).
  let pvDrag = null;
  $('print-preview').addEventListener('pointerdown', e => {
    const ph = e.target.closest('.pc-photo'); if(!ph) return;
    const rect = ph.getBoundingClientRect();
    pvDrag = { x:e.clientX, y:e.clientY, px:printCfg.posX, py:printCfg.posY, w:rect.width||1, h:rect.height||1 };
    ph.classList.add('grabbing');
    try{ ph.setPointerCapture(e.pointerId); }catch(_){}
    e.preventDefault();
  });
  $('print-preview').addEventListener('pointermove', e => {
    if(!pvDrag) return;
    const dx = e.clientX - pvDrag.x, dy = e.clientY - pvDrag.y;
    printCfg.posX = pClamp(pvDrag.px - dx / pvDrag.w * 100 / printCfg.zoom, 0, 100);
    printCfg.posY = pClamp(pvDrag.py - dy / pvDrag.h * 100 / printCfg.zoom, 0, 100);
    applyPhotoTransform();
  });
  const endPvDrag = () => { if(pvDrag){ pvDrag = null; const ph = $('print-preview').querySelector('.pc-photo'); if(ph) ph.classList.remove('grabbing'); } };
  $('print-preview').addEventListener('pointerup', endPvDrag);
  $('print-preview').addEventListener('pointercancel', endPvDrag);

  $('print-theme').addEventListener('click', e => {
    const b = e.target.closest('button'); if(!b) return;
    printCfg.theme = b.dataset.v;
    [...$('print-theme').children].forEach(c => c.classList.toggle('on', c === b));
    renderPrintPreview();
  });
  $('print-thumbs').addEventListener('click', e => {
    const b = e.target.closest('.print-thumb'); if(!b) return;
    printCfg.image = b.dataset.img || null;
    printCfg.posX = 50; printCfg.posY = 50; printCfg.zoom = 1;   // neuer Ausschnitt = zentriert
    $('print-zoom').value = 100; $('print-zoom-val').textContent = '100%';
    [...$('print-thumbs').children].forEach(c => c.classList.toggle('sel', c === b));
    $('print-zoom-field').hidden = !printCfg.image;
    renderPrintPreview();
  });
  $('print-zoom').addEventListener('input', e => {
    printCfg.zoom = (+e.target.value) / 100;
    $('print-zoom-val').textContent = e.target.value + '%';
    applyPhotoTransform();
  });
  $('print-reset').addEventListener('click', () => {
    printCfg.posX = 50; printCfg.posY = 50; printCfg.zoom = 1;
    $('print-zoom').value = 100; $('print-zoom-val').textContent = '100%';
    applyPhotoTransform();
  });
  $('print-go').addEventListener('click', () => {
    const r = currentPrintRecipe(); if(!r) return;
    $('print-modal').hidden = true;
    $('print-root').className = 'mode-card theme-' + (printCfg.theme === 'light' ? 'light' : 'dark');
    $('print-root').innerHTML = buildRecipeCard(r, printCfg);
    setPageSize('A4; margin: 0');   // an das reale Papier angleichen (kein A5/A4-Versatz -> kein Rand)
    const img = $('print-root').querySelector('.pc-photo-img');
    if(img && !img.complete){   // erst drucken, wenn das Bild geladen ist
      img.addEventListener('load', () => window.print(), { once:true });
      img.addEventListener('error', () => window.print(), { once:true });
    } else {
      window.print();
    }
  });
  $('print-close').addEventListener('click', () => $('print-modal').hidden = true);
  $('print-modal').addEventListener('click', e => { if(e.target === $('print-modal')) $('print-modal').hidden = true; });
  $('btn-print-card').addEventListener('click', openPrintCard);
  $('btn-print-sheet').addEventListener('click', () => {
    $('print-root').className = 'mode-sheet';      // normaler Fluss (kann paginieren)
    $('print-root').innerHTML = buildCheatSheet(currentCamera());
    setPageSize('A4; margin: 0');
    window.print();
  });

  editorSlot.addEventListener('change', async () => {
    if(!currentId) return;
    const slot = editorSlot.value;
    if(slot) await assignSlot(slot, currentId);
    else { // aus aktuellem Platz entfernen
      const sm = currentCamera().slotmap || {};
      for(const [s,rid] of Object.entries(sm)) if(rid===currentId) { await assignSlot(s, ''); break; }
    }
    showToast(slot ? ('Placed on '+slot) : 'Removed from the camera');
  });

  btnChng.addEventListener('click', () => {
    const r = allRecipes.find(x => x.id === currentId); if(!r) return;
    let o={}; try{ o=JSON.parse(r.original_json||'{}'); }catch(e){}
    const rows = DIFF_KEYS.filter(k => String(r[k]??'')!==String(o[k]??'')).map(k =>
      `<div class="diff"><div class="diff-k">${esc(LABELS[k])}</div><div class="diff-old">${esc(o[k]||'—')}</div><div class="diff-arrow">→</div><div class="diff-new">${esc(r[k]||'—')}</div></div>`);
    modalBody.innerHTML = rows.length ? '<div class="diff-head"><span>Field</span><span>Original</span><span></span><span>Current</span></div>'+rows.join('') : '<div class="modal-empty">No changes to the camera settings.</div>';
    modal.hidden=false;
  });
  $('btn-reset').addEventListener('click', () => {
    const r = allRecipes.find(x => x.id === currentId); if(!r) return;
    let o={}; try{ o=JSON.parse(r.original_json||'{}'); }catch(e){}
    for(const k of DIFF_KEYS){ const f=form.elements[k]; if(!f) continue; const v=o[k]??''; if(f.tagName==='SELECT') setSelectValue(f,v); else f.value=v; }
    modal.hidden=true; showToast('Original loaded – click "Save" to apply');
  });
  $('btn-set-original').addEventListener('click', async () => {
    if(!currentId) return;
    const data = Object.fromEntries(new FormData(form).entries());
    await fetch('/api/recipes?id='+encodeURIComponent(currentId)+'&set_original=1', { method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify(data) });
    modal.hidden=true; await loadAll(); selectRecipe(currentId); showToast('Current state is now the original ✓');
  });
  $('modal-close').addEventListener('click', () => modal.hidden=true);
  $('modal-ok').addEventListener('click', () => modal.hidden=true);
  modal.addEventListener('click', e => { if(e.target===modal) modal.hidden=true; });

  // Bilder
  const parseImages = r => { try{ const a=JSON.parse(r.images||'[]'); return Array.isArray(a)?a:[]; }catch(e){ return []; } };
  function renderImages(){
    if(currentId===undefined){ imageSection.hidden=true; return; }
    imageSection.hidden=false;
    const r = allRecipes.find(x=>x.id===currentId), imgs = r?parseImages(r):[];
    imageBand.innerHTML = imgs.map(name => `<img class="thumb" src="/images/${encodeURIComponent(currentId)}/${encodeURIComponent(name)}" data-name="${esc(name)}" alt="Sample photo">`).join('') +
      `<button type="button" class="add-thumb" onclick="document.getElementById('image-input').click()">+ Photo</button>`;
  }
  imageBand.addEventListener('click', e => { const img=e.target.closest('img.thumb'); if(img) openLightbox(img.dataset.name); });
  imageBand.addEventListener('contextmenu', e => { const img=e.target.closest('img.thumb'); if(!img) return; e.preventDefault(); imgMenuTarget=img.dataset.name; imgMenu.style.left=Math.min(e.clientX,window.innerWidth-160)+'px'; imgMenu.style.top=e.clientY+'px'; imgMenu.hidden=false; });
  $('img-menu-remove').addEventListener('click', () => { imgMenu.hidden=true; if(imgMenuTarget) deleteImage(imgMenuTarget); });
  // Bilder VOR dem Upload im Browser verkleinern: lange Kante max. 2000 px, JPEG ~0.85.
  // Das hält das Foto-Band schnell und backt die EXIF-Drehung fest ein. Klappt die
  // Dekodierung nicht (z. B. HEIC in manchen Browsern), wird still das Original genommen.
  const MAX_EDGE = 2000, JPEG_QUALITY = 0.85;
  async function downscaleImage(file){
    if(!file || !(file.type || '').startsWith('image/')) return { blob:file, name:file.name };
    try{
      // imageOrientation:'from-image' dreht das Bild anhand seiner EXIF-Ausrichtung gerade.
      const bmp = await createImageBitmap(file, { imageOrientation:'from-image' });
      const scale = Math.min(1, MAX_EDGE / Math.max(bmp.width, bmp.height));   // nie vergrößern
      const w = Math.max(1, Math.round(bmp.width * scale));
      const h = Math.max(1, Math.round(bmp.height * scale));
      const canvas = document.createElement('canvas');
      canvas.width = w; canvas.height = h;
      canvas.getContext('2d').drawImage(bmp, 0, 0, w, h);
      if(bmp.close) bmp.close();
      const blob = await new Promise(res => canvas.toBlob(res, 'image/jpeg', JPEG_QUALITY));
      if(!blob) return { blob:file, name:file.name };
      // War das Bild ohnehin klein und wird der Reencode nicht kleiner: Original behalten.
      if(scale === 1 && blob.size >= file.size) return { blob:file, name:file.name };
      const base = file.name.replace(/\.[^.]+$/, '') || 'photo';   // Endung auf .jpg umstellen
      return { blob, name: base + '.jpg' };
    }catch(e){
      return { blob:file, name:file.name };   // Dekodierung fehlgeschlagen -> Original hochladen
    }
  }

  // Phase 11: Fuji-Einstellungen aus dem Original-Foto lesen und nur LEERE Felder vorfüllen.
  async function fillFromExif(file){
    if(!file || !(file.type || '').startsWith('image/')) return 0;
    let settings = {};
    try{
      // Nur den Dateianfang senden – das Exif/APP1-Segment liegt ganz vorne (spart Upload).
      const head = file.slice(0, 262144);
      const res = await fetch('/api/exif', { method:'POST', headers:{'Content-Type':'application/octet-stream'}, body:head });
      if(res.ok) settings = await res.json();
    }catch(e){ return 0; }
    let filled = 0;
    for(const [k, v] of Object.entries(settings)){
      const field = form.elements[k];
      if(!field || v === '' || v == null) continue;
      if(String(field.value).trim() !== '') continue;    // nie überschreiben – nur leere Felder
      if(field.tagName === 'SELECT'){
        if([...field.options].some(o => o.value === v || o.text === v)){ setSelectValue(field, v); filled++; }
      }else{
        field.value = v; filled++;
      }
    }
    if(filled) dirty = true;
    return filled;
  }

  imageInput.addEventListener('change', async () => {
    if(!imageInput.files.length) return;
    if(!currentId){ imageInput.value=''; showToast('Please save the recipe first.'); return; }
    const files = [...imageInput.files];
    imageInput.value='';
    const filled = await fillFromExif(files[0]);          // EXIF aus dem Original, VOR dem Verkleinern
    for(const file of files){
      const { blob, name } = await downscaleImage(file);   // im Browser verkleinern (Fallback: Original)
      await fetch('/api/images?id='+encodeURIComponent(currentId)+'&name='+encodeURIComponent(name),
        { method:'POST', headers:{'Content-Type':blob.type||'application/octet-stream'}, body:blob });
    }
    await loadAll(); renderImages();
    showToast(filled ? ('Photo added · ' + filled + ' field' + (filled===1?'':'s') + ' filled from EXIF ✓') : 'Photo(s) added ✓');
  });
  async function deleteImage(name){ if(!currentId) return; await fetch('/api/images?id='+encodeURIComponent(currentId)+'&name='+encodeURIComponent(name), { method:'DELETE' }); await loadAll(); renderImages(); showToast('Image removed'); }
  function openLightbox(name){ lightboxImg.src='/images/'+encodeURIComponent(currentId)+'/'+encodeURIComponent(name); lightbox.hidden=false; }
  lightbox.addEventListener('click', () => { lightbox.hidden=true; lightboxImg.src=''; });

  // Drag & Drop
  listEl.addEventListener('dragstart', e => { const it=e.target.closest('.item'); if(!it) return; e.dataTransfer.setData('text/plain', it.dataset.id); e.dataTransfer.effectAllowed='move'; it.classList.add('dragging'); });
  listEl.addEventListener('dragend', e => { const it=e.target.closest('.item'); if(it) it.classList.remove('dragging'); });
  cameraSlotsEl.addEventListener('dragover', e => { const s=e.target.closest('.cslot'); if(!s) return; e.preventDefault(); s.classList.add('drop'); });
  cameraSlotsEl.addEventListener('dragleave', e => { const s=e.target.closest('.cslot'); if(s) s.classList.remove('drop'); });
  cameraSlotsEl.addEventListener('drop', async e => {
    const s=e.target.closest('.cslot'); if(!s) return; e.preventDefault(); s.classList.remove('drop');
    const id=e.dataTransfer.getData('text/plain'); if(!id) return;
    const rr=allRecipes.find(x=>x.id===id);
    await assignSlot(s.dataset.slot, id);
    showToast((rr?rr.name:'Recipe')+' → '+s.dataset.slot);
  });

  // Kamera-Auswahl + Verwaltung
  camSelect.addEventListener('change', async () => {
    if(!(await maybeDiscard())){ camSelect.value = currentCameraId; return; }   // Abbruch -> Auswahl zurücksetzen
    if(selectMode) exitSelect(); currentCameraId=camSelect.value; localStorage.setItem('currentCamera',currentCameraId); deselectRecipe(); refreshSimFilter(); renderList(); renderCamera();
  });
  $('btn-cameras').addEventListener('click', openCamModal);
  $('cam-modal-close').addEventListener('click', () => camModal.hidden=true);
  $('cam-modal-ok').addEventListener('click', () => camModal.hidden=true);
  camModal.addEventListener('click', e => { if(e.target===camModal) camModal.hidden=true; });
  function openCamModal(){
    $('cam-new-preset').innerHTML = PRESETS.map(p => `<option value="${p.id}">${esc(p.name)} (template)</option>`).join('');
    $('cam-new-name').value=''; $('cam-new-slots').value=7;
    camEditId = camById(currentCameraId) ? currentCameraId : (cameras[0] && cameras[0].id);
    renderCamEditSelect(); renderCamEditForm(); camModal.hidden=false;
  }
  function renderCamEditSelect(){
    $('cam-edit-select').innerHTML = cameras.map(c => `<option value="${c.id}"${c.id===camEditId?' selected':''}>${esc(c.name)}</option>`).join('');
    $('cam-del-btn').disabled = cameras.length <= 1;
  }
  const DD_LABELS = { dynamic_range:'Dynamic range', d_range_priority:'D-Range priority', grain_effect:'Grain effect', grain_size:'Grain size', color_chrome_effect:'Color Chrome Effect', color_chrome_effect_blue:'Color Chrome FX Blue' };
  function renderCamEditForm(){
    const c = camById(camEditId); if(!c){ $('cam-edit-form').innerHTML=''; return; }
    const po=c.param_options||{}, cps=c.custom_params||[], ft=c.features||{};
    $('cam-edit-form').innerHTML = `
      <div class="cam-grid2">
        <div class="field"><label>Name</label><input id="ce-name" type="text" value="${esc(c.name)}"></div>
        <div class="field"><label>Number of custom slots</label><input id="ce-slots" type="number" min="1" max="14" value="${c.slots||7}"></div>
      </div>
      <div class="field"><label>Film simulations (one per line)</label><textarea id="ce-sims" style="min-height:130px">${esc((c.film_sims||[]).join('\n'))}</textarea></div>
      <div class="field"><label>Optional parameters enabled</label><div class="feature-row">
        <label><input type="checkbox" id="ce-clarity" ${ft.clarity?'checked':''}> Clarity</label>
        <label><input type="checkbox" id="ce-ccfxblue" ${ft.color_chrome_effect_blue?'checked':''}> Color Chrome FX Blue</label>
        <label><input type="checkbox" id="ce-grainsize" ${ft.grain_size?'checked':''}> Grain size</label>
      </div></div>
      <div class="field"><label>Allowed parameter values (one per line)</label>
        <div class="cam-grid2">${['dynamic_range','d_range_priority','grain_effect','grain_size','color_chrome_effect','color_chrome_effect_blue'].map(k => `<div class="field"><label style="font-weight:500">${DD_LABELS[k]}</label><textarea data-dd="${k}">${esc((po[k]||DEFAULT_DD[k]||[]).join('\n'))}</textarea></div>`).join('')}</div>
      </div>
      <div class="field"><label>Custom parameters</label>
        <div id="ce-custom">${cps.length ? cps.map((p,i)=>`<div class="cparam-row"><span class="tag"><b>${esc(p.label||p.key)}</b> <span>(${esc(p.key)} · ${p.type==='select'?'Options: '+esc((p.options||[]).join(', ')):'Text'})</span></span><button type="button" class="btn btn-danger" onclick="removeCustomParam(${i})">Remove</button></div>`).join('') : '<span class="tag" style="color:var(--muted)">none</span>'}</div>
        <div class="cam-add" style="margin-top:8px">
          <input id="cp-key" type="text" placeholder="Key (e.g. toning)" style="width:150px">
          <input id="cp-label" type="text" placeholder="Display name">
          <select id="cp-type"><option value="text">Text field</option><option value="select">Dropdown</option></select>
          <input id="cp-opts" type="text" placeholder="Options, comma-separated">
          <button type="button" id="cp-add" class="btn btn-ghost">+ Parameter</button>
        </div>
      </div>
      <div style="margin-top:12px"><button type="button" id="ce-save" class="btn btn-primary">Save camera</button></div>`;
    $('ce-save').addEventListener('click', saveCamEdit);
    $('cp-add').addEventListener('click', addCustomParam);
  }
  async function addCustomParam(){
    const key=$('cp-key').value.trim(), label=$('cp-label').value.trim(), type=$('cp-type').value, opts=$('cp-opts').value.split(',').map(s=>s.trim()).filter(Boolean);
    if(!key){ await alertDialog('Please enter a key.'); return; }
    const c=camById(camEditId); c.custom_params=c.custom_params||[]; c.custom_params.push({ key, label:label||key, type, options:opts }); renderCamEditForm();
  }
  function removeCustomParam(i){ const c=camById(camEditId); (c.custom_params||[]).splice(i,1); renderCamEditForm(); }
  async function saveCamEdit(){
    const c=camById(camEditId); if(!c) return;
    const po={}; document.querySelectorAll('#cam-edit-form [data-dd]').forEach(t => { po[t.dataset.dd]=t.value.split('\n').map(s=>s.trim()).filter(Boolean); });
    const body = { name:$('ce-name').value.trim()||c.name, slots:parseInt($('ce-slots').value)||7,
      film_sims:$('ce-sims').value.split('\n').map(s=>s.trim()).filter(Boolean),
      features:{ clarity:$('ce-clarity').checked, color_chrome_effect_blue:$('ce-ccfxblue').checked, grain_size:$('ce-grainsize').checked },
      param_options:po, custom_params:c.custom_params||[] };
    await fetch('/api/cameras?id='+encodeURIComponent(camEditId), { method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body) });
    await loadAll(); renderCamEditSelect(); renderCamEditForm(); showToast('Camera saved ✓');
  }
  $('cam-edit-select').addEventListener('change', () => { camEditId=$('cam-edit-select').value; renderCamEditForm(); });
  $('cam-del-btn').addEventListener('click', async () => {
    if(cameras.length<=1){ await alertDialog('At least one camera must remain.'); return; }
    const c=camById(camEditId);
    if(!(await confirmDialog('Delete camera “'+(c?c.name:'')+'”? Recipes are kept but lose this assignment.', { ok:'Delete', danger:true }))) return;
    await fetch('/api/cameras?id='+encodeURIComponent(camEditId), { method:'DELETE' });
    if(currentCameraId===camEditId) currentCameraId=null;
    await loadAll(); camEditId=currentCameraId||(cameras[0]&&cameras[0].id); renderCamEditSelect(); renderCamEditForm();
  });
  $('cam-add-btn').addEventListener('click', async () => {
    const name=$('cam-new-name').value.trim(), preset=$('cam-new-preset').value, slots=parseInt($('cam-new-slots').value)||7;
    if(!name){ await alertDialog('Please enter a name.'); return; }
    const res = await fetch('/api/cameras', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({ name, preset, slots }) });
    const cam = await res.json();
    currentCameraId = cam.id; localStorage.setItem('currentCamera', cam.id);
    $('cam-new-name').value=''; await loadAll(); camEditId=cam.id; renderCamEditSelect(); renderCamEditForm(); showToast('Camera "'+name+'" created');
  });

  // Hilfe + Menüs
  document.addEventListener('click', e => {
    const b=e.target.closest('.help');
    if(b){ e.preventDefault(); helpPop.textContent=HELP[b.dataset.key]||''; helpPop.hidden=false; const r=b.getBoundingClientRect(); const w=Math.min(300,window.innerWidth-24); helpPop.style.width=w+'px'; let left=r.left; if(left+w>window.innerWidth-12) left=window.innerWidth-w-12; helpPop.style.left=Math.max(12,left)+'px'; helpPop.style.top=(r.bottom+8)+'px'; return; }
    if(e.target!==helpPop) helpPop.hidden=true;
    if(!e.target.closest('#img-menu')) imgMenu.hidden=true;
  });

  let toastTimer;
  function showToast(msg, opts){
    opts = opts || {};
    clearTimeout(toastTimer);
    toast.textContent = msg;
    // Optional eine klickbare Aktion anhängen (z. B. „Undo" nach dem Löschen).
    if(opts.actionLabel && typeof opts.onAction === 'function'){
      const b = document.createElement('button');
      b.type = 'button'; b.className = 'toast-action'; b.textContent = opts.actionLabel;
      b.addEventListener('click', () => { clearTimeout(toastTimer); toast.classList.remove('show'); opts.onAction(); });
      toast.appendChild(b);
    }
    toast.classList.add('show');
    toastTimer = setTimeout(() => toast.classList.remove('show'), opts.duration || 2600);
  }

  btnNew.addEventListener('click', newRecipe);
  searchEl.addEventListener('input', renderList);
  simEl.addEventListener('change', renderList);
  sortEl.addEventListener('change', renderList);
  favEl.addEventListener('click', () => { favOnly=!favOnly; favEl.classList.toggle('on',favOnly); renderList(); });
  cbwEl.addEventListener('click', e => { const b=e.target.closest('button'); if(!b) return; cbw=b.dataset.v; [...cbwEl.children].forEach(c=>c.classList.toggle('on',c===b)); renderList(); });
  $('btn-quit').addEventListener('click', async () => {
    if(!(await confirmDialog('Shut down the server? The app will close afterwards — you can then close the window.', { ok:'Quit', danger:true }))) return;
    try{ await fetch('/api/shutdown', { method:'POST' }); }catch(e){}
    document.body.innerHTML = '<div style="height:100vh;display:flex;align-items:center;justify-content:center;color:#9a9aa2;text-align:center;font-family:-apple-system,sans-serif"><div><div style="font-size:44px;margin-bottom:14px">⏻</div><div style="font-size:16px;color:#f4f4f5">Server stopped</div><div style="margin-top:8px">You can close this window.</div></div></div>';
  });

  // --- Export / Import (Rezepte mit anderen teilen) ------------------------
  const exportModal = $('export-modal');
  const exportRecipes = () => allRecipes.filter(r => recipeCameras(r).includes(currentCameraId));

  function openExport(){
    const cam = currentCamera(), items = exportRecipes();
    $('export-intro').innerHTML = items.length
      ? 'Pick which recipes from <b>' + esc(cam.name) + '</b> to export. You get a single file to send to a friend, who adds them with <b>Import</b>. Everything is included except the camera slot.'
      : 'There are no recipes on <b>' + esc(cam.name) + '</b> to export yet.';
    $('export-list').innerHTML = items.length
      ? items.map(r => `<label class="export-item"><input type="checkbox" value="${esc(r.id)}" checked><span class="ei-nm">${esc(r.name||'Untitled')}</span><span class="ei-fs">${esc(r.film_simulation||'—')}</span></label>`).join('')
      : '<div class="modal-empty">Nothing to export.</div>';
    $('export-with-images').checked = true;
    updateExportCount();
    exportModal.hidden = false;
  }
  const exportBoxes = () => [...$('export-list').querySelectorAll('input[type=checkbox]')];
  function updateExportCount(){
    const boxes = exportBoxes(), n = boxes.filter(b => b.checked).length;
    $('export-count').textContent = n + ' selected';
    $('export-do').disabled = n === 0;
    $('export-selall').checked = n > 0 && n === boxes.length;
  }
  $('btn-export').addEventListener('click', openExport);
  $('export-close').addEventListener('click', () => exportModal.hidden = true);
  $('export-cancel').addEventListener('click', () => exportModal.hidden = true);
  exportModal.addEventListener('click', e => { if(e.target===exportModal) exportModal.hidden=true; });
  $('export-list').addEventListener('change', updateExportCount);
  $('export-selall').addEventListener('change', () => { const on=$('export-selall').checked; exportBoxes().forEach(b => b.checked=on); updateExportCount(); });

  // Baut die Export-ZIP für die gegebenen ids und startet den Browser-Download. true = ok.
  async function downloadExport(ids, withImages){
    if(!ids.length) return false;
    const camName = (currentCamera().name || 'recipes').replace(/[^A-Za-z0-9]+/g,'-').replace(/^-+|-+$/g,'') || 'recipes';
    const filename = 'FujiRecipeVault-' + camName + '-' + new Date().toISOString().slice(0,10) + '.zip';
    let res;
    try{ res = await fetch('/api/export', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({ ids, with_images:withImages, filename }) }); }
    catch(e){ return false; }
    if(!res.ok) return false;
    const blob = await res.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a'); a.href = url; a.download = filename;
    document.body.appendChild(a); a.click(); a.remove();
    setTimeout(() => URL.revokeObjectURL(url), 2000);
    return true;
  }

  $('export-do').addEventListener('click', async () => {
    const ids = exportBoxes().filter(b => b.checked).map(b => b.value);
    if(!ids.length) return;
    const btn = $('export-do'); btn.disabled = true; btn.textContent = 'Exporting…';
    const ok = await downloadExport(ids, $('export-with-images').checked);
    btn.disabled = false; btn.textContent = 'Export';
    if(ok){ exportModal.hidden = true; showToast(ids.length + ' recipe' + (ids.length===1?'':'s') + ' exported ✓'); }
    else showToast('Export failed.');
  });

  // Import: Modal mit zwei Wegen – aus Datei (.zip) oder aus einem Screenshot (per KI-Prompt).
  const importModal = $('import-modal');

  // Fertigen Prompt bauen – enthält die erlaubten Werte der aktuellen Kamera,
  // damit die KI passende Optionen zurückgibt.
  function buildAiPrompt(){
    const cam = currentCamera(), po = cam.param_options || {};
    const list = k => (po[k] || DEFAULT_DD[k] || []).join(', ');
    const sims = (cam.film_sims || []).join(', ');
    return [
      'You are reading a Fujifilm film-simulation "recipe" from the attached screenshot.',
      'Return ONLY a JSON object — no explanation, no markdown fences — with exactly these keys:',
      '',
      'name, short_code, film_simulation, dynamic_range, d_range_priority, grain_effect, grain_size, color_chrome_effect, color_chrome_effect_blue, white_balance, wb_kelvin, wb_shift_red, wb_shift_blue, bw_adj_warm_cool, highlight_tone, shadow_tone, color, sharpness, noise_reduction, clarity, iso, exposure_compensation, creator, notes',
      '',
      'Rules:',
      '- Use "" (empty string) for anything not shown. Do not invent values.',
      '- Keep the sign on numbers, e.g. "+2", "-4", "0".',
      '- "name": a short title for the recipe; if none is shown, write a short descriptive one.',
      '- "film_simulation" must be the closest of: ' + (sims || "(the recipe's film simulation)") + '.',
      '- "dynamic_range" one of: ' + list('dynamic_range') + '.',
      '- "d_range_priority" one of: ' + list('d_range_priority') + '.',
      '- "grain_effect" one of: ' + list('grain_effect') + '; "grain_size" one of: ' + list('grain_size') + '.',
      '- "color_chrome_effect" / "color_chrome_effect_blue" one of: ' + list('color_chrome_effect') + '.',
      '- "white_balance": e.g. AUTO, DAYLIGHT / FINE, or COLOR TEMPERATURE (Kelvin); put the Kelvin number in "wb_kelvin".',
      '- "wb_shift_red" / "wb_shift_blue": the red/blue white-balance shift, e.g. "+2" / "-5".',
      '',
      'Output valid JSON now.'
    ].join('\n');
  }

  function openImport(){
    document.querySelectorAll('.import-cam').forEach(el => el.textContent = currentCamera().name || 'this camera');
    $('ai-prompt').value = buildAiPrompt();
    $('ai-answer').value = '';
    [...$('import-seg').children].forEach((c, i) => c.classList.toggle('on', i === 0));
    $('import-file').hidden = false; $('import-photo').hidden = true; $('import-ai').hidden = true;
    importModal.hidden = false;
  }
  $('btn-import').addEventListener('click', openImport);
  $('import-close').addEventListener('click', () => importModal.hidden = true);
  $('import-done').addEventListener('click', () => importModal.hidden = true);
  importModal.addEventListener('click', e => { if(e.target===importModal) importModal.hidden=true; });

  // Voll-Backup herunterladen (GET liefert die komplette Bibliothek als ZIP).
  $('backup-download').addEventListener('click', () => { window.location.href = '/api/backup'; });
  // Alles wiederherstellen – destruktiv, daher klare Rückfrage; der Server legt vorher
  // automatisch ein Sicherheits-Backup der aktuellen Daten an.
  $('restore-pick').addEventListener('click', () => $('restore-input').click());
  $('restore-input').addEventListener('change', async () => {
    const file = $('restore-input').files[0];
    $('restore-input').value = '';
    if(!file) return;
    if(!(await confirmDialog('Restore everything from this backup?\n\nThis REPLACES your current library — recipes, cameras and photos. A safety copy of your current data is saved to the backups folder first.', { ok:'Restore', danger:true }))) return;
    showToast('Restoring…');
    try{
      const res = await fetch('/api/restore', { method:'POST', headers:{'Content-Type':'application/zip'}, body:file });
      const out = await res.json().catch(() => ({}));
      if(!res.ok){ showToast(out.error ? ('Restore failed — ' + out.error) : 'Restore failed.'); return; }
      location.reload();   // Kameras + Rezepte sind komplett ersetzt -> Seite frisch laden
    }catch(e){ showToast('Restore failed.'); }
  });

  $('import-seg').addEventListener('click', e => {
    const b = e.target.closest('button'); if(!b) return;
    [...$('import-seg').children].forEach(c => c.classList.toggle('on', c === b));
    const m = b.dataset.mode;
    $('import-file').hidden = m !== 'file';
    $('import-photo').hidden = m !== 'photo';
    $('import-ai').hidden = m !== 'ai';
  });

  // Import „From a photo": Fuji-EXIF lesen und daraus ein neues Rezept erstellen.
  $('import-photo-pick').addEventListener('click', () => $('import-photo-input').click());
  $('import-photo-input').addEventListener('change', async () => {
    const file = $('import-photo-input').files[0];
    $('import-photo-input').value = '';
    if(!file) return;
    showToast('Reading photo…');
    let settings = {};
    try{
      const res = await fetch('/api/exif', { method:'POST', headers:{'Content-Type':'application/octet-stream'}, body:file.slice(0, 262144) });
      if(res.ok) settings = await res.json();
    }catch(e){}
    const keys = Object.keys(settings);
    if(!keys.length){ await alertDialog('No Fujifilm settings found in this photo. It may be edited or exported — try an original JPEG straight from the camera.'); return; }
    const data = Object.assign({}, settings);
    data.cameras = currentCameraId;
    data.name = settings.film_simulation || 'Recipe from photo';
    const res2 = await fetch('/api/recipes', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(data) });
    if(!res2.ok){ showToast('Could not create recipe.'); return; }
    const saved = await res2.json();
    importModal.hidden = true;
    await loadAll(); selectRecipe(saved.id);
    showToast(keys.length + ' setting' + (keys.length===1?'':'s') + ' read from photo ✓');
  });

  // Backup & Restore – eigenes Fenster (aus dem Import herausgelöst).
  const backupModal = $('backup-modal');
  $('btn-backup').addEventListener('click', () => { backupModal.hidden = false; });
  $('backup-close').addEventListener('click', () => backupModal.hidden = true);
  $('backup-done').addEventListener('click', () => backupModal.hidden = true);
  backupModal.addEventListener('click', e => { if(e.target === backupModal) backupModal.hidden = true; });

  // Weg 1: Datei (.zip) wählen und hochladen.
  $('import-pick').addEventListener('click', () => $('import-input').click());
  $('import-input').addEventListener('change', async () => {
    const file = $('import-input').files[0];
    $('import-input').value = '';
    if(!file) return;
    showToast('Importing…');
    try{
      const res = await fetch('/api/import?camera=' + encodeURIComponent(currentCameraId), { method:'POST', headers:{'Content-Type':'application/zip'}, body:file });
      const out = await res.json().catch(() => ({}));
      if(!res.ok){ showToast(out.error ? ('Import failed — ' + out.error) : 'Import failed.'); return; }
      await loadAll();
      importModal.hidden = true;
      const n = out.imported || 0;
      showToast(n + ' recipe' + (n===1?'':'s') + ' imported into ' + (currentCamera().name || 'this camera') + ' ✓');
    }catch(e){
      showToast('Import failed.');
    }
  });

  // Weg 2: Antwort der KI (JSON) einlesen. Toleriert Code-Fences und umliegenden Text.
  function parseAiRecipes(text){
    if(!text) return null;
    let t = String(text).trim().replace(/^```(?:json)?/i, '').replace(/```$/, '').trim();
    const tryParse = s => { try{ return JSON.parse(s); }catch(e){ return undefined; } };
    let data = tryParse(t);
    if(data === undefined){
      const starts = ['{','['].map(c => t.indexOf(c)).filter(i => i >= 0);
      const first = starts.length ? Math.min(...starts) : -1;
      const last = Math.max(t.lastIndexOf('}'), t.lastIndexOf(']'));
      if(first >= 0 && last > first) data = tryParse(t.slice(first, last + 1));
    }
    if(data === undefined) return null;
    const arr = Array.isArray(data) ? data : [data];
    const clean = arr.filter(o => o && typeof o === 'object' && !Array.isArray(o));
    return clean.length ? clean : null;
  }
  $('ai-copy').addEventListener('click', async () => {
    const ta = $('ai-prompt');
    try{ await navigator.clipboard.writeText(ta.value); }
    catch(e){ ta.focus(); ta.select(); try{ document.execCommand('copy'); }catch(_){} }
    showToast('Prompt copied ✓');
  });
  $('ai-add').addEventListener('click', async () => {
    const parsed = parseAiRecipes($('ai-answer').value);
    if(!parsed){ showToast('Could not read the answer — expected JSON.'); return; }
    const btn = $('ai-add'); btn.disabled = true; btn.textContent = 'Adding…';
    let ok = 0;
    try{
      for(const o of parsed){
        const data = {};
        for(const k of EDITABLE_KEYS) data[k] = (o[k] != null) ? String(o[k]) : '';   // nur bekannte Felder übernehmen
        if(!data.name || !data.name.trim()) data.name = 'Imported recipe';
        data.cameras = currentCameraId;
        const res = await fetch('/api/recipes', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(data) });
        if(res.ok) ok++;
      }
      await loadAll();
      importModal.hidden = true;
      showToast(ok ? (ok + ' recipe' + (ok===1?'':'s') + ' added to ' + (currentCamera().name || 'this camera') + ' ✓') : 'Nothing was added.');
    }catch(e){
      showToast('Import failed.');
    }finally{
      btn.disabled = false; btn.textContent = 'Add to library';
    }
  });

  // --- Phase 9: numerische Stepper ----------------------------------------
  // Sanfte Wertebereiche je Feld; FREIE EINGABE bleibt möglich – nur die −/+-Tasten clampen,
  // damit importierte Sonderwerte beim Tippen nicht abgeschnitten werden.
  const STEP_RANGES = {
    highlight_tone:[-2,4], shadow_tone:[-2,4], color:[-4,4], sharpness:[-4,4],
    noise_reduction:[-4,4], clarity:[-5,5], bw_adj_warm_cool:[-9,9],
    wb_shift_red:[-9,9], wb_shift_blue:[-9,9]
  };
  const fmtStep = n => (n > 0 ? '+' + n : String(n));   // "+2" / "0" / "-4"
  function enhanceSteppers(){
    Object.keys(STEP_RANGES).forEach(key => {
      const input = $(key);
      if(!input || input.closest('.stepper')) return;   // nur einmal umbauen
      const [min, max] = STEP_RANGES[key];
      const wrap = document.createElement('div'); wrap.className = 'stepper';
      const mkBtn = d => { const b=document.createElement('button'); b.type='button'; b.className='step-btn'; b.tabIndex=-1; b.textContent = d<0?'−':'+'; return b; };
      const minus = mkBtn(-1), plus = mkBtn(1);
      input.parentNode.insertBefore(wrap, input);
      wrap.append(minus, input, plus);
      const step = d => {
        const cur = parseInt(input.value, 10);
        input.value = fmtStep(Math.max(min, Math.min(max, (isNaN(cur) ? 0 : cur) + d)));
        input.dispatchEvent(new Event('input', { bubbles:true }));   // dirty markieren
      };
      minus.addEventListener('click', () => step(-1));
      plus.addEventListener('click', () => step(1));
    });
  }
  enhanceSteppers();
  loadAll();
</script>