:root{
  --red:#d81f26;
  --red-dark:#9c1319;
  --gold:#ffc738;
  --gold-dark:#e0a300;
  --ink:#1a1a1a;
  --grey:#6f6259;
  --paper:#ffffff;
  --bg:#f2ede4;
  --line:#e7dfd2;
  --panel:#1c1a19;
  --panel2:#272321;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:#0f0d0c;
  color:#f2ede4;
  display:flex;
  min-height:100vh;
}

/* ── Linkes Panel ─────────────────────────────────────────────────────────── */
#panel{
  width:420px;
  min-width:420px;
  background:var(--panel);
  padding:24px 22px;
  overflow-y:auto;
  max-height:100vh;
}
#panel h1{ font-size:19px; margin:0 0 4px; color:#fff; }
#panel .sub{ font-size:12.5px; color:#b8a99b; margin-bottom:16px; }
#panel h2{
  font-size:12.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--gold); margin:20px 0 10px; border-bottom:1px solid #4a3d35; padding-bottom:6px;
  display:flex; align-items:center; justify-content:space-between;
}
label{ display:block; font-size:13px; color:#d8cabc; margin:9px 0 4px; }
input[type=text], input[type=number], textarea, select{
  width:100%; padding:8px 10px; border-radius:8px; border:1px solid #4a3d35;
  background:#141110; color:#fff; font-size:13.5px; font-family:inherit;
}
textarea{ resize:vertical; min-height:50px; }
input[type=file]{ width:100%; font-size:12px; color:#d8cabc; }
.row2{ display:flex; gap:10px; }
.row2 > div{ flex:1; }
button{ font-family:inherit; cursor:pointer; border:none; border-radius:9px; font-weight:bold; font-size:13.5px; }

/* Hintergrund-Entfernen Vorschau */
#cutoutPreviewWrap{
  display:none; margin-top:10px; background:var(--panel2); border-radius:10px; padding:10px;
  align-items:center; gap:10px;
}
#cutoutPreviewWrap.show{ display:flex; }
#cutoutPreviewWrap img{ width:56px;height:56px;object-fit:contain;border-radius:6px; background:#3a3230; }
#cutoutBtn{
  flex:1; padding:9px; background:var(--gold); color:var(--ink);
}
#cutoutBtn:disabled{ opacity:.5; }
#cutoutStatus{ font-size:11.5px; color:#c9b8a8; margin-top:4px; min-height:14px; }

/* Hinzufügen-Button */
#addBtn{
  margin-top:12px; width:100%; padding:11px; background:var(--gold); color:var(--ink);
  box-shadow:0 3px 0 var(--gold-dark);
}
#addBtn:active{ transform:translateY(2px); box-shadow:none; }
#addBtn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:0 3px 0 var(--gold-dark); }

.smallbtn{
  background:#3a322d; color:#e9dfd3; padding:5px 9px; font-size:11.5px; border-radius:7px;
}

/* Bibliotheks-Grid */
#libraryGrid{
  margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.lib-card{
  background:var(--panel2); border-radius:10px; padding:8px; position:relative;
  border:2px solid transparent; cursor:pointer; transition: border-color .15s;
}
.lib-card:hover{ border-color:#5a4d45; }
.lib-card.selected{ border-color:var(--gold); }
.lib-card img{
  width:100%; height:70px; object-fit:cover; border-radius:6px; background:#111;
}
.lib-card.is-cutout img{ object-fit:contain; background:#3a3230; }
.lib-card .lname{ font-size:12px; margin-top:5px; color:#fff; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lib-card .lprice{ font-size:11.5px; color:var(--gold); }
.lib-card .badgeNum{
  position:absolute; top:4px; left:4px; background:var(--gold); color:var(--ink);
  font-size:11px; font-weight:900; width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.lib-card .delX{
  position:absolute; top:4px; right:4px; background:rgba(0,0,0,.6); color:#e88;
  width:20px;height:20px;border-radius:50%; font-size:12px; display:flex;align-items:center;justify-content:center;
  transition: background .15s;
}
.lib-card .delX:hover{ background:rgba(200,50,50,.7); }
.lib-empty{ font-size:12.5px; color:#8a7c6f; padding:10px 0; }

/* Lade-Spinner */
.lib-loading{ font-size:12.5px; color:#8a7c6f; padding:10px 0; display:flex; align-items:center; gap:8px; }
.spinner{
  width:16px; height:16px; border:2px solid #4a3d35; border-top-color:var(--gold);
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Format-Auswahl */
#formatSelect{ margin-top:4px; }
#selCount{ font-size:12px; color:#b8a99b; margin-top:6px; }

/* Download-Button */
#downloadBtn{
  margin-top:18px; width:100%; padding:15px; background:var(--red); color:#fff;
  font-size:15.5px; box-shadow:0 4px 0 var(--red-dark);
}
#downloadBtn:active{ transform:translateY(3px); box-shadow:none; }
.hint{ font-size:11.5px; color:#9a8b7d; margin-top:8px; line-height:1.5; }

/* ── Canvas-Bereich ───────────────────────────────────────────────────────── */
#previewWrap{
  flex:1; display:flex; align-items:center; justify-content:center; padding:30px; overflow:auto;
}
#canvasHolder{ box-shadow:0 20px 50px rgba(0,0,0,.5); border-radius:6px; overflow:hidden; line-height:0; }
canvas{ display:block; width:100%; height:auto; max-width:1400px; }

/* Upload-Fortschritt */
#uploadProgress{
  display:none; margin-top:8px; font-size:12px; color:var(--gold);
  align-items:center; gap:8px;
}
#uploadProgress.show{ display:flex; }