* { box-sizing: border-box; }
body { font-family: "Segoe UI", system-ui, sans-serif; margin: 0; background: #0f1419; color: #e7e9ea; }
.hidden { display: none !important; }
.muted { color: #8b98a5; }
.small { font-size: 0.85rem; }
.error { color: #f4212e; }
.hint { color: #8b98a5; font-size: 0.9rem; }
.screen { min-height: 100vh; }
.login-card { max-width: 380px; margin: 10vh auto; padding: 24px; }
.card { background: #1a2332; border: 1px solid #2f3b4a; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: #1a2332; border-bottom: 1px solid #2f3b4a; flex-wrap: wrap; gap: 8px; }
nav { display: flex; gap: 6px; padding: 10px 20px; background: #15202b; flex-wrap: wrap; }
nav .nav { background: transparent; border: 1px solid #2f3b4a; color: #e7e9ea; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
nav .nav.active { background: #1d9bf0; border-color: #1d9bf0; }
main { padding: 16px 20px 40px; max-width: 1100px; margin: 0 auto; }
label { display: block; margin-bottom: 12px; font-size: 0.9rem; }
input, textarea, select, button { font: inherit; }
input, textarea, select { width: 100%; background: #0f1419; border: 1px solid #2f3b4a; color: #fff; border-radius: 8px; padding: 8px 10px; margin-top: 4px; }
button { border: none; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
button.primary { background: #1d9bf0; color: #fff; }
button.secondary { background: #2f3b4a; color: #fff; }
button.danger { background: #f4212e; color: #fff; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.inline { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.inline select { width: auto; min-width: 140px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.stat { background: #1a2332; border: 1px solid #2f3b4a; border-radius: 10px; padding: 14px; }
.stat b { font-size: 1.4rem; display: block; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #2f3b4a; }
.verdict-gruen { color: #00ba7c; }
.verdict-gelb { color: #ffd400; }
.verdict-rot { color: #f4212e; }
.tele-script { font-size: 1.35rem; line-height: 1.5; padding: 20px; background: #0b0f14; border-radius: 10px; min-height: 120px; white-space: pre-wrap; }
.tpl-body { background: #0b0f14; padding: 10px; border-radius: 8px; white-space: pre-wrap; margin: 8px 0; font-size: 0.9rem; }
#toast { position: fixed; bottom: 20px; right: 20px; background: #1d9bf0; color: #fff; padding: 10px 16px; border-radius: 8px; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 99; }
#toast.show { opacity: 1; }
button.big { padding: 14px 18px; font-size: 1rem; width: 100%; max-width: 360px; }
.quick-actions { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.quick-card { border-color: #1d9bf0; }
.partner-card { border-color: #00ba7c; }
.ext-badge { font-size: 0.8rem; padding: 4px 8px; border-radius: 6px; border: 1px solid #2f3b4a; }
.ext-badge.on { color: #00ba7c; border-color: #00ba7c; }
.ext-badge.off { color: #f4212e; border-color: #f4212e; }
.ext-hint code { font-size: 0.8rem; }
#qs-preview { margin-top: 12px; min-height: 100px; }
#qs-tele { margin-top: 10px; font-size: 1rem; }
.lead-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.lead-avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid #2f3b4a; flex-shrink: 0; }
.lead-avatar-placeholder { width: 96px; height: 96px; border-radius: 50%; background: #2f3b4a; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #8b98a5; flex-shrink: 0; }
.lead-profile-header { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.lead-profile-meta h3 { margin: 0 0 4px; }
.lead-display-name { color: #8b98a5; margin: 0 0 8px; }
.lead-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.lead-section { margin-bottom: 14px; }
.lead-section h4 { margin: 0 0 8px; font-size: 0.95rem; }
.lead-bio { white-space: pre-wrap; min-height: 48px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip { background: #2f3b4a; padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; }
.badge-verified { color: #1d9bf0; }
.badge-private { color: #ffd400; font-size: 0.85rem; }
#lead-detail { border-color: #1d9bf0; }
.profile-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.profile-gallery img { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid #2f3b4a; }
.profile-gallery a:hover img { border-color: #1d9bf0; }
.team-ig-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.team-ig-chip { background: #0f1419; border: 1px solid #2f3b4a; border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; }
.team-ig-chip.linked { border-color: #00ba7c; }
.team-ig-chip.offline { opacity: 0.65; }
.badge-contacted { color: #00ba7c; font-weight: 600; }
.badge-known { color: #1d9bf0; font-weight: 600; }
.badge-new { color: #8b98a5; }
.act-user { color: #1d9bf0; }
.act-ig { color: #8b98a5; font-size: 0.8rem; }

/* Leads – Mobile & Detail-Overlay */
.leads-hint { margin-top: 8px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.link-btn { background: none; border: none; color: #1d9bf0; padding: 0; cursor: pointer; font-weight: 600; }
.lead-actions { white-space: nowrap; }
.lead-actions button { padding: 6px 10px; margin-left: 4px; }
tr.lead-row-selected { background: rgba(29, 155, 240, 0.12); }
tr[data-lead-id] { cursor: pointer; }

.lead-cards { display: flex; flex-direction: column; gap: 10px; }
.lead-card {
  display: block; width: 100%; text-align: left;
  background: #1a2332; border: 1px solid #2f3b4a; border-radius: 12px;
  padding: 14px; color: #e7e9ea; cursor: pointer;
}
.lead-card.selected { border-color: #1d9bf0; box-shadow: 0 0 0 1px #1d9bf0; }
.lead-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.lead-card-user { font-weight: 700; font-size: 1rem; }
.lead-card-score { font-weight: 700; }
.lead-card-meta { font-size: 0.85rem; line-height: 1.4; }

.lead-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
}
.lead-overlay:not(.hidden) { pointer-events: auto; }
.lead-overlay-backdrop {
  position: absolute; inset: 0; border: none; background: rgba(0, 0, 0, 0.55);
  cursor: pointer; padding: 0;
}
.lead-detail-sheet {
  position: relative; z-index: 1;
  margin: 0; max-height: 88vh; overflow-y: auto;
  border-radius: 16px 16px 0 0; border-bottom: none;
  -webkit-overflow-scrolling: touch;
}
.lead-detail-toolbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: flex-end;
  padding-bottom: 8px; margin: -4px 0 8px;
  background: linear-gradient(#1a2332 70%, transparent);
}
.lead-close-btn { min-width: 110px; padding: 10px 14px; font-weight: 600; }
.lead-action-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lead-action-row button { width: 100%; padding: 12px 10px; font-size: 0.9rem; }
.lead-history { padding-left: 18px; margin: 0; font-size: 0.85rem; }
.lead-history li { margin-bottom: 8px; }
body.lead-detail-open { overflow: hidden; }

.manual-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; cursor: pointer; }
.manual-toggle input { width: auto; margin: 0; }
.copy-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.copy-row button { flex: 1; min-width: 140px; }
.copy-inline { margin-top: 8px; }
.ok-text { color: #00ba7c; }
.ext-download-card { border-color: #1d9bf0; }
.ext-dl-btn { display: inline-block; text-align: center; text-decoration: none; margin: 12px 0; }
.ext-steps { margin: 12px 0 0; padding-left: 20px; line-height: 1.6; font-size: 0.9rem; }
.ext-steps code { font-size: 0.85rem; }
#qs-preview, .tpl-body, .tele-script, textarea, input, select {
  -webkit-user-select: text; user-select: text;
}
.login-card input { font-size: 16px; }

@media (min-width: 900px) {
  .lead-overlay {
    position: static; display: block; pointer-events: auto;
  }
  .lead-overlay.hidden { display: none; }
  .lead-overlay-backdrop { display: none; }
  .lead-detail-sheet {
    max-height: none; overflow: visible;
    border-radius: 12px; border: 1px solid #1d9bf0;
    margin-top: 16px;
  }
  body.lead-detail-open { overflow: auto; }
  .lead-action-row { display: flex; flex-wrap: wrap; }
  .lead-action-row button { width: auto; }
}

@media (max-width: 768px) {
  header { padding: 10px 12px; }
  .header-actions { width: 100%; justify-content: space-between; }
  .header-actions .inline { display: none; }
  nav { padding: 8px 10px; gap: 4px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  nav .nav { flex: 0 0 auto; padding: 10px 12px; font-size: 0.85rem; min-height: 44px; }
  main { padding: 12px 12px calc(32px + env(safe-area-inset-bottom)); }
  .lead-stats { grid-template-columns: 1fr; }
  .lead-profile-header { flex-direction: column; align-items: center; text-align: center; }
  .profile-gallery img { width: calc(33% - 6px); height: auto; aspect-ratio: 1; }
  button.big { max-width: none; min-height: 48px; }
  .login-card { margin: 6vh 12px; max-width: none; }
  #toast { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); text-align: center; }
  .copy-row button { min-height: 44px; }
  .ext-dl-btn { width: 100%; }
}