/* ---------- Scan view ---------- */
  .scan-layout{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:28px;
    align-items:start;
  }
  @media (max-width: 950px){
    .scan-layout{ grid-template-columns:1fr; }
  }

  .scan-label{
    display:block;
    font-weight:700;
    font-size:var(--text-lg);
    margin-bottom:10px;
  }
  /* Eingabefeld und Button stehen bewusst UNTEREINANDER statt nebeneinander
     zu quetschen - so bleibt bei jeder Fensterbreite genug Platz für den
     Platzhaltertext, und der Button bleibt eine große, eindeutige
     Klickfläche über die volle Breite. */
  .scan-input-row{ display:flex; flex-direction:column; gap:12px; }
  .scan-input-row input{
    width:100%;
    background:var(--surface);
    border:2px solid var(--border-strong);
    color:var(--text);
    font-family:var(--font-mono);
    font-size:var(--text-md);
    padding:14px 16px;
    border-radius:var(--radius-md);
  }
  .scan-input-row input::placeholder{
    font-family:var(--font-body);
    font-size:var(--text-17);
    color:var(--text-muted);
  }
  .scan-input-row input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-bg);
  }
  .scan-input-row button{
    width:100%;
    background:var(--accent);
    color:var(--surface);
    border:none;
    font-weight:700;
    font-size:var(--text-lg);
    padding:16px 26px;
    border-radius:var(--radius-md);
    cursor:pointer;
  }
  .scan-input-row button:hover{ background:var(--accent-dark); }
  .scan-input-row button:active{ background:var(--accent-dark); transform:translateY(1px); }
  .scan-input-row button:disabled{ background:var(--border-strong); cursor:progress; }
  .scan-input-row input:disabled{ background:var(--surface-2); color:var(--text-muted); }
  .scan-hint{
    margin-top:14px;
    font-size:var(--text-sm);
    color:var(--text-muted);
  }

  /* Ladebalken statt kleinem Fließtext, solange die drei Anbieter
     abgefragt werden - deutlich sichtbarer Hinweis "es tut sich was". */
  .scan-progress{
    margin-top:16px;
    height:18px;
    border-radius:9px;
    background:var(--track-bg);
    border:2px solid var(--border-strong);
    overflow:hidden;
    display:none;
  }
  .scan-progress.active{ display:block; }
  .scan-progress .bar{
    height:100%;
    width:40%;
    border-radius:7px;
    background:var(--accent);
    animation:scan-loading 1.1s ease-in-out infinite;
  }
  @keyframes scan-loading{
    0%{ transform:translateX(-100%); }
    100%{ transform:translateX(350%); }
  }
  @media (prefers-reduced-motion: reduce){
    .scan-progress .bar{ animation:none; width:100%; }
  }

  .scan-status{
    margin-top:12px;
    font-size:var(--text-17);
    font-weight:700;
    min-height:24px;
  }
  .scan-status.error{ color:var(--red); }
  .scan-status.busy{ color:var(--accent-dark); }
  .provider-status-card.pending{
    border-color:var(--accent);
    animation:pending-pulse 1.5s ease-in-out infinite;
  }
  .provider-status-value.pending{ color:var(--accent-dark); }
  @keyframes pending-pulse{ 50%{ box-shadow:0 0 0 4px var(--accent-bg); } }
  #scan-toast-container{
    position:fixed; right:22px; bottom:22px; z-index:20;
    display:flex; flex-direction:column; gap:10px;
    max-width:min(480px, calc(100vw - 32px));
    pointer-events:none;
  }
  .scan-toast{
    position:relative;
    padding:18px 44px 16px 20px; border:3px solid var(--accent);
    border-radius:var(--radius-md); background:var(--surface); color:var(--text);
    box-shadow:0 5px 20px rgba(0,0,0,.18); font-weight:700; cursor:pointer;
    pointer-events:auto;
  }
  @keyframes scan-toast-pulse{
    0%{ box-shadow:0 0 0 4px var(--accent); }
    100%{ box-shadow:0 5px 20px rgba(0,0,0,.18); }
  }
  .scan-toast-pulse{ animation:scan-toast-pulse .6s ease-out; }
  .scan-toast-close{
    position:absolute; top:10px; right:12px;
    background:none; border:none; font-size:var(--text-xl); line-height:1;
    color:var(--text); opacity:.7; cursor:pointer; padding:2px 6px;
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  }
  .scan-toast-close:hover{ opacity:1; }
  .scan-toast-title{
    font-weight:700; font-size:var(--text-17); line-height:1.35; margin-bottom:10px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .scan-toast-price-row{
    display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:6px;
  }
  .scan-toast-source{
    font-size:var(--text-xs); font-weight:600; color:var(--text-muted); text-transform:uppercase;
    letter-spacing:.02em;
  }
  .scan-toast-price{ font-size:var(--text-28); font-weight:800; color:var(--accent); }
  .scan-toast-previous{
    font-size:var(--text-xs); font-weight:400; color:var(--text-muted); text-decoration:line-through;
  }
  .scan-toast-hint{ font-size:var(--text-xs); font-weight:400; color:var(--text-muted); }

  /* ---------- Aktuelle-Kiste Einstellung (Scan-Seite) ---------- */
  .box-setting{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
    margin-top:16px;
    padding:14px 16px;
    border-radius:var(--radius-md);
    border:3px solid var(--accent);
    background:var(--accent-bg);
  }
  .box-setting-info{ display:flex; align-items:center; gap:12px; min-width:0; }
  .box-setting-icon{ font-size:var(--text-xl); flex-shrink:0; }
  .box-setting-label{
    font-size:var(--text-2xs);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--text-muted);
  }
  .box-setting-value{ font-size:var(--text-17); font-weight:700; color:var(--accent-dark); }
  .box-setting-edit{ display:flex; gap:8px; flex-shrink:0; }
  .box-setting-edit input{
    width:210px;
    background:var(--surface);
    border:2px solid var(--border-strong);
    border-radius:var(--radius);
    padding:10px 12px;
    font-family:var(--font-mono);
    font-size:var(--text-md);
    min-height:56px;
    color:var(--text);
  }
  .box-setting-edit input::placeholder{ font-family:var(--font-body); color:var(--text-muted); }
  .box-setting-edit input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-bg);
  }
  .box-setting-edit button{
    background:var(--accent);
    color:var(--surface);
    border:none;
    border-radius:var(--radius);
    padding:0 18px;
    font-weight:700;
    font-size:var(--text-sm);
    cursor:pointer;
  }
  .box-setting-edit button:hover{ background:var(--accent-dark); }
  @media (max-width:560px){
    .box-setting{ flex-direction:column; align-items:stretch; }
    .box-setting-edit{ width:100%; }
    .box-setting-edit input{ flex:1; width:auto; }
  }

  /* ---------- Kisten-Zuordnung (Bestand je Kiste, mit -1/Alle-entfernen) ---------- */
  .box-current{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:var(--accent-bg);
    color:var(--accent-dark);
    border-radius:var(--radius);
    padding:10px 14px;
    font-weight:700;
    margin-bottom:10px;
    flex-wrap:wrap;
  }
  .box-current-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .box-current-actions .box-btn{
    background:none;
    border:2px solid var(--accent-dark);
    color:var(--accent-dark);
    font-size:var(--text-13);
    font-weight:700;
    padding:5px 10px;
    border-radius:var(--radius-sm);
    cursor:pointer;
  }
  .box-current-actions .box-btn:hover{ background:var(--accent-dark); color:var(--surface); }
  .box-current-actions .box-btn-outline{
    border-color:var(--border-strong);
    color:var(--text-muted);
  }
  .box-current-actions .box-btn-outline:hover{ background:var(--border-strong); color:var(--surface); }

  .roll-title{
    font-size:var(--text-md);
    font-weight:700;
    margin:28px 0 14px;
  }
  .roll{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:68vh;
    overflow-y:auto;
    padding-right:6px;
  }
  .roll-empty{
    color:var(--text-muted);
    font-size:var(--text-17);
    padding:10px 2px;
  }
  .result-card-clickable{
    cursor:pointer;
    transition:box-shadow .15s ease, border-color .15s ease;
  }
  .result-card-clickable:hover{ box-shadow:0 2px 10px rgba(0,0,0,.10); }
  .result-card.active{
    border-color:var(--accent);
    box-shadow:0 0 0 2px var(--accent);
  }

  /* Ergebnis-Karte (Scan-Verlauf) */
  .result-card{
    background:var(--surface);
    border:2px solid var(--border);
    border-left:8px solid var(--border-strong);
    border-radius:var(--radius-md);
    padding:13px 14px;
  }
  .result-card.has-offer{ border-left-color:var(--green); }
  .result-card.no-offer{ border-left-color:var(--red); }

  .result-title{
    font-size:var(--text-md);
    font-weight:700;
    margin:0 0 4px;
  }
  .result-isbn{
    font-family:var(--font-mono);
    font-size:var(--text-13);
    color:var(--text-muted);
    margin-bottom:10px;
  }
  .result-summary{
    padding:8px 10px;
    border-radius:var(--radius);
    font-size:var(--text-xs);
    font-weight:700;
  }
  .result-summary.has-offer{
    background:var(--green-bg);
    color:var(--green);
  }
  .result-summary.no-offer{
    background:var(--red-bg);
    color:var(--red);
  }
  .result-storage{
    margin-top:7px;
    color:var(--text-muted);
    font-size:var(--text-13);
  }

  /* Detailansicht neben der Eingabe */
  .detail-header{ display:flex; gap:20px; align-items:flex-start; }
  .detail-book-info{ flex:1; min-width:0; }
  .detail-new-price{
    margin-left:auto;
    padding:10px 14px;
    border:2px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface-2);
    text-align:right;
    flex-shrink:0;
  }
  .detail-new-price .label{
    display:block;
    color:var(--text-muted);
    font-size:var(--text-xs);
    font-weight:700;
    margin-bottom:2px;
  }
  .detail-new-price .amount{
    display:block;
    font-family:var(--font-mono);
    font-size:var(--text-lg);
    font-weight:700;
    color:var(--accent-dark);
  }
  .cover-thumb{
    width:110px; height:156px;
    object-fit:cover;
    border-radius:var(--radius-sm);
    border:2px solid var(--border);
    background:var(--surface-2);
    flex-shrink:0;
  }
  .cover-placeholder{
    width:110px; height:156px;
    border-radius:var(--radius-sm);
    border:2px solid var(--border);
    background:var(--surface-2);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:var(--text-xs);
    color:var(--text-muted);
    text-align:center;
    flex-shrink:0;
    padding:8px;
  }
  .detail-title{ font-weight:700; margin:0 0 4px; }
  .detail-subtitle{ color:var(--text-muted); font-size:var(--text-sm); margin-bottom:8px; }
  .detail-authors{ font-size:var(--text-sm); margin-bottom:8px; }
  .detail-ean{ font-family:var(--font-mono); color:var(--text-muted); font-size:var(--text-sm); }

  @media (max-width:700px){
    .detail-header{ flex-wrap:wrap; }
    .detail-new-price{ margin-left:130px; }
  }

  .scan-no-sale{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin-top:20px;
    padding:14px 16px;
    border:1px solid var(--red);
    border-radius:var(--radius);
    background:var(--red-bg);
    color:var(--red);
  }

  .provider-status{
    margin-top:20px;
    padding:18px;
    border:2px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface);
  }
  .provider-status-title{
    margin-bottom:12px;
    color:var(--accent-dark);
    font-size:var(--text-md);
    font-weight:700;
  }
  .provider-status-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:10px;
  }
  .provider-status-card{
    position:relative;
    display:flex;
    min-height:96px;
    min-width:0;
    padding:16px 10px 13px;
    border:2px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface-2);
    flex-direction:column;
    justify-content:center;
    text-align:center;
  }
  .provider-status-card.best-offer{
    border:3px solid var(--accent);
    background:var(--accent-bg);
    box-shadow:0 3px 0 var(--accent-dark);
  }
  .provider-best-label{
    position:absolute;
    top:-11px;
    left:50%;
    padding:3px 9px;
    border-radius:999px;
    background:var(--accent);
    color:var(--surface);
    font-size:var(--text-2xs);
    font-weight:700;
    line-height:1.2;
    white-space:nowrap;
    transform:translateX(-50%);
  }
  .provider-status-name{
    display:block;
    margin-bottom:8px;
    overflow:hidden;
    color:var(--text);
    font-size:var(--text-sm);
    font-weight:700;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .provider-status-value{
    display:block;
    font-family:var(--font-mono);
    font-size:var(--text-17);
    line-height:1.25;
  }
  .provider-status-value.offer{ color:var(--green); }
  /* kein Ankauf ist kein Fehler, sondern eine normale Anbieter-Antwort -
     --red bleibt für echte Fehler reserviert (siehe books.css, gleiches
     Prinzip). Die grünen "Angebot"-Kacheln heben sich weiterhin klar von
     dieser neutralen Farbe ab, "Bester Preis" bleibt durch das eigene
     Badge markiert. */
  .provider-status-value.no_offer{ color:var(--text-muted); }
  .provider-status-value.other{ color:var(--amber); }
  .provider-status-value.timeout{ color:var(--orange); }
  .provider-status-value.disabled{ color:var(--text-muted); }

  @media (max-width:760px){
    .provider-status-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  }

  /* ---------- Verkaufszuordnung ---------- */
  .sale-box{
    margin-top:14px;
    padding:22px;
    border-radius:var(--radius-md);
    border:3px solid var(--accent);
    background:var(--accent-bg);
    box-shadow:var(--shadow-md);
  }
  .sale-box .sale-title{ font-weight:700; font-size:var(--text-lg); margin-bottom:14px; color:var(--accent-dark); }
  .sale-current{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:var(--green-bg);
    color:var(--green);
    border-radius:var(--radius);
    padding:10px 14px;
    font-weight:700;
    margin-bottom:12px;
    flex-wrap:wrap;
  }
  .sale-current .clear-sale{
    background:none;
    border:2px solid var(--green);
    color:var(--green);
    font-size:var(--text-13);
    font-weight:700;
    padding:5px 10px;
    border-radius:var(--radius-sm);
    cursor:pointer;
  }
  .sale-options{ display:flex; gap:10px; flex-wrap:wrap; }
  .sale-option-btn{
    background:var(--surface);
    border:2px solid var(--border-strong);
    color:var(--text);
    font-size:var(--text-18);
    font-weight:700;
    min-height:52px;
    padding:12px 18px;
    border-radius:var(--radius);
    cursor:pointer;
    font-family:var(--font-mono);
  }
  .sale-option-btn:hover{ border-color:var(--accent); color:var(--accent-dark); }
  .sale-option-btn.chosen{ background:var(--accent); color:var(--surface); border-color:var(--accent-dark); box-shadow:0 3px 0 var(--accent-dark); }
  .sale-hint{ font-size:var(--text-xs); color:var(--text-muted); margin-top:8px; }
  .duplicate-sale-warning{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin:0 0 16px;
    padding:14px 16px;
    border:3px solid var(--amber);
    border-radius:var(--radius-md);
    background:var(--amber-bg);
    color:var(--amber);
    font-size:var(--text-sm);
  }
  .duplicate-sale-warning strong{ font-size:var(--text-18); }
  .duplicate-sale-confirm{
    align-self:flex-start;
    margin-top:4px;
    padding:10px 14px;
    border:0;
    border-radius:var(--radius);
    background:var(--amber);
    color:var(--surface);
    font-weight:700;
    cursor:pointer;
  }
  .scan-copy-note{
    margin:0 0 16px;
    padding:10px 14px;
    border-radius:var(--radius);
    background:var(--green-bg);
    color:var(--green);
    font-weight:700;
  }
  .box-conflict{
    border:3px solid var(--amber);
    background:var(--amber-bg);
    color:var(--amber);
    border-radius:var(--radius-md);
    padding:16px;
    margin:0 0 16px;
  }
  .box-conflict-title{
    font-size:var(--text-18);
    font-weight:700;
    margin-bottom:6px;
  }
  .box-conflict-text{
    font-size:var(--text-15);
    margin-bottom:12px;
  }
  .box-conflict-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .box-conflict-btn{
    background:var(--amber);
    border:2px solid var(--amber);
    color:var(--surface);
    font-size:var(--text-sm);
    font-weight:700;
    padding:10px 14px;
    border-radius:var(--radius);
    cursor:pointer;
  }
  .box-conflict-btn:hover{ filter:brightness(.95); }

  .empty-state{
    text-align:center;
    color:var(--text-muted);
    font-size:var(--text-18);
    padding:70px 20px;
  }