body{margin:0;background:#0b0f16;color:#e8ecf1;font:14px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,Inter}
  .wrap{max-width:1100px;margin:24px auto;padding:0 16px}
  .top{display:flex;align-items:center;gap:12px}
  a.btn, button.btn{display:inline-block;border:1px solid #2a3550;background:#121929;color:#e8ecf1;padding:8px 12px;border-radius:10px;text-decoration:none}
  a.btn:hover, .btn:hover{border-color:#6c5ce7}
  .card{background:#0e1422;border:1px solid #22304a;border-radius:14px;padding:14px;margin-top:14px}
  input, select{background:#0b1220;border:1px solid #243044;color:#e8ecf1;padding:8px 10px;border-radius:10px}
  table{width:100%;border-collapse:collapse;margin-top:10px}
  th,td{border-bottom:1px dashed #22304a;padding:8px 6px;text-align:left;vertical-align:top}
  .muted{color:#8b93a1}
  .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .small{font-size:12px}
  details.coupon-targets{border:1px solid #22304a;border-radius:10px;padding:10px;background:#0e1422}
  details.coupon-targets > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;outline:none}
  details.coupon-targets > summary::-webkit-details-marker{display:none}
  .chev{display:inline-block;transition:transform .2s ease;font-weight:700}
  details.coupon-targets[open] .chev{transform:rotate(90deg)}
  .btn.danger{background:#1a0f12;border-color:#4d1d20;color:#ffb4b4}
  .btn.danger:hover{border-color:#bd1414}
  .btn.green{background:#0f1a10;border-color:#1d4d1f;color:#c1ffb4}
  .btn.green:hover{border-color:#22bd14}
  .btn.yellow{background:#1a1a0f;border-color:#4c4d1d;color:#faffb4}
  .btn.yellow:hover{border-color:#babd14}
    footer { text-align:center; margin-top:18px; opacity:.8; }

.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 99999;
  background: #252a36;
  color: #fff;
  border: 1px solid #2f3a54;
  border-radius: 10px;
  padding: 12px 14px 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  font-size: 14px;
}
.toast .title { font-weight: 800; letter-spacing:.02em; margin-bottom: 2px; }
.toast .msg { opacity: .95; }
.toast .bar {
  height: 4px; border-radius: 3px; margin-top: 10px;
  background: #6ee787; /* green default */
}
.toast.err .bar { background: #ff6b6b; }
.toast.show { opacity: 1; transform: translateY(0); }

/* Einheitliche, schlanke Scrollbar – nur Thumb sichtbar */
body, #options, .list, .drawer__panel, .drawer__col--left .list, .drawer__col--right #coupons {
  /* Firefox */
  scrollbar-width: thin;                 /* dünn */
  scrollbar-color: var(--primary) transparent; /* Thumb / Track */
}

/* Chrome/Edge/Safari */
body::-webkit-scrollbar,
#options::-webkit-scrollbar,
.list::-webkit-scrollbar,
.drawer__panel::-webkit-scrollbar,
.drawer__col--left .list::-webkit-scrollbar,
.drawer__col--right #coupons::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent;               /* Track unsichtbar */
}

body::-webkit-scrollbar-track,
#options::-webkit-scrollbar-track,
.list::-webkit-scrollbar-track,
.drawer__panel::-webkit-scrollbar-track,
.drawer__col--left .list::-webkit-scrollbar-track,
.drawer__col--right #coupons::-webkit-scrollbar-track {
  background: transparent;               /* Track ausblenden */
}

body::-webkit-scrollbar-thumb,
#options::-webkit-scrollbar-thumb,
.list::-webkit-scrollbar-thumb,
.drawer__panel::-webkit-scrollbar-thumb,
.drawer__col--left .list::-webkit-scrollbar-thumb,
.drawer__col--right #coupons::-webkit-scrollbar-thumb {
  background: var(--primary);            /* nur der “graue” Balken → primär */
  border-radius: 999px;
  border: 2px solid transparent;         /* etwas Abstand zum Rand */
  background-clip: padding-box;
}

/* Ecken/Buttons aus */
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-button  { display: none; width: 0; height: 0; }


.header-logo{
  width: 28px;
  height: 28px;
  object-fit: contain;
  margin-right: 8px;
}
.top, .toolbar{
  display: flex;
  align-items: center;
  gap: 10px;
}

.chip{
  display:inline-flex; flex-direction:column; gap:2px;
  min-width:140px; padding:10px 14px; border-radius:14px;
  background:#151b25; border:1px solid rgba(255,255,255,.08);
  color:#cccccc;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 8px 20px rgba(0,0,0,.35);
  transition:transform .06s ease, border-color .2s ease, box-shadow .2s ease;
}
.chip:hover{ transform:translateY(-1px); border-color:rgba(88,160,255,.5); box-shadow:0 0 0 1px rgba(88,160,255,.15), 0 12px 26px rgba(0,0,0,.45); }
.chip.strong{ background:#0f1622; border-color:rgba(255,255,255,.12); }
.chip .num{ font-size:18px; font-weight:700; letter-spacing:.2px; }
.chip .hint{ font-size:12px; opacity:.7; }

.chip.pill{ flex-direction:row; align-items:center; gap:10px; border-radius:999px; padding:10px 14px; }
.chip.pill .num{ font-weight:800; }

.chip-col{ display:flex; flex-direction:column; gap:8px; max-width:220px; }
@media (max-width:760px){ .chip-col{ max-width:none; } }

.modal .card{ border:1px solid rgba(255,255,255,.1); }