/* =====================================================================
   Norynex v1.76.1
   – Code-Eingabe (E-Mail bestätigen) neu
   – Standard-Profilbild
   – Kanal-Aktionsleiste, Schenken-Fenster, Live-Geschenke, Glücksrad
   – Werbeblock-Anzeige (Spot 1 von 2)
   – Passwort-Stärke
   ===================================================================== */

/* ---------- Code-Eingabe ---------- */
.nx-otp-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(6, 4, 12, .72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .2s ease;
}
.nx-otp-overlay.is-open { opacity: 1; }
.nx-otp {
  position: relative; width: 100%; max-width: 420px;
  padding: 36px 32px 26px; text-align: center; color: #fff;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(168, 59, 255, .22), transparent 60%),
    linear-gradient(180deg, #17131f, #0f0d14);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
  transform: translateY(10px) scale(.98); transition: transform .25s cubic-bezier(.2, .9, .3, 1.2);
}
.nx-otp-overlay.is-open .nx-otp { transform: none; }
.nx-otp.is-shake { animation: nx-otp-shake .4s ease; }
@keyframes nx-otp-shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.nx-otp-x {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  border-radius: 10px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .55);
  display: grid; place-items: center; font-size: 15px; transition: background .15s, color .15s;
}
.nx-otp-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nx-otp-icon {
  position: relative; width: 68px; height: 68px; margin: 0 auto 18px;
  display: grid; place-items: center; font-size: 28px; color: #fff;
  border-radius: 20px;
  background: linear-gradient(140deg, #c26bff, #8b2cf0 55%, #6d1fd1);
  box-shadow: 0 12px 34px rgba(168, 59, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.nx-otp-icon-badge {
  position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px;
  display: grid; place-items: center; font-size: 12px;
  border-radius: 50%; background: #17131f; color: #34d399;
  border: 2px solid #17131f; box-shadow: 0 0 0 2px rgba(52, 211, 153, .35);
}
.nx-otp-icon--ok { background: linear-gradient(140deg, #34d399, #10b981); box-shadow: 0 12px 34px rgba(16, 185, 129, .4); animation: nx-otp-pop .4s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes nx-otp-pop { from { transform: scale(.5); opacity: 0; } }
.nx-otp h2 { margin: 0 0 8px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.nx-otp-sub { margin: 0 0 26px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .55); }
.nx-otp-sub strong { color: #fff; font-weight: 700; word-break: break-all; }
.nx-otp-inputs { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.nx-otp-inputs .nx-otp-digit:nth-child(3) { margin-right: 10px; }
.nx-otp-digit {
  width: 50px; height: 60px; padding: 0;
  text-align: center; font-size: 26px; font-weight: 800; font-family: inherit; color: #fff;
  background: rgba(255, 255, 255, .04);
  border: 1.5px solid rgba(255, 255, 255, .1); border-radius: 13px;
  outline: none; caret-color: #a83bff;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.nx-otp-digit:hover { border-color: rgba(255, 255, 255, .2); }
.nx-otp-digit:focus { border-color: #a83bff; background: rgba(168, 59, 255, .08); box-shadow: 0 0 0 4px rgba(168, 59, 255, .18); transform: translateY(-1px); }
.nx-otp-digit.is-filled { border-color: rgba(168, 59, 255, .55); background: rgba(168, 59, 255, .1); }
.nx-otp-digit.is-error { border-color: #ef4444; background: rgba(239, 68, 68, .08); box-shadow: none; }
.nx-otp-err { min-height: 22px; margin: 6px 0 12px; color: #f87171; font-size: 13px; font-weight: 600; }
.nx-otp-btn {
  width: 100%; height: 50px; border: 0; border-radius: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #b14dff, #8b2cf0);
  box-shadow: 0 8px 24px rgba(168, 59, 255, .3);
  opacity: .6; transition: opacity .2s, transform .15s, box-shadow .2s;
}
.nx-otp-btn i { font-size: 13px; transition: transform .2s; }
.nx-otp-btn.is-ready { opacity: 1; }
.nx-otp-btn.is-ready:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(168, 59, 255, .45); }
.nx-otp-btn.is-ready:hover i { transform: translateX(3px); }
.nx-otp-btn.is-loading { pointer-events: none; }
.nx-otp-btn.is-loading span, .nx-otp-btn.is-loading i { opacity: 0; }
.nx-otp-btn.is-loading { position: relative; }
.nx-otp-btn.is-loading::after {
  content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: nx-spin .7s linear infinite;
}
@keyframes nx-spin { to { transform: rotate(360deg); } }
.nx-otp-foot { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .45); display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.nx-otp-foot button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; color: #c77dff; }
.nx-otp-foot button:hover:not(:disabled) { text-decoration: underline; }
.nx-otp-foot button:disabled { color: rgba(255, 255, 255, .35); cursor: default; font-variant-numeric: tabular-nums; }
.nx-otp-hint {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 12px; color: rgba(255, 255, 255, .38); line-height: 1.5;
}
.nx-otp-hint i { margin-right: 4px; }
@media (max-width: 420px) {
  .nx-otp { padding: 32px 18px 22px; }
  .nx-otp-inputs { gap: 6px; }
  .nx-otp-inputs .nx-otp-digit:nth-child(3) { margin-right: 6px; }
  .nx-otp-digit { width: 42px; height: 52px; font-size: 22px; border-radius: 11px; }
}
html.light .nx-otp, [data-theme="light"] .nx-otp { color: #fff; }

/* ---------- Standard-Profilbild ---------- */
.nx-dav-wrap { background: none !important; padding: 0 !important; overflow: hidden; }
.nx-dav {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: #fff; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 -6px 14px rgba(0, 0, 0, .18);
  user-select: none;
}
.nx-dav::before { /* sanfter Glanz oben links */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(80% 60% at 28% 18%, rgba(255, 255, 255, .28), transparent 60%);
  pointer-events: none;
}
.nx-dav > b { position: relative; font-weight: inherit; display: flex; }

/* ---------- Video-Werbung (auch Werbeblöcke: "Werbung 1 von 2") ---------- */
.nx-ad { position: absolute; inset: 0; z-index: 200; background: #000; display: flex; flex-direction: column; color: #fff; font-family: inherit; }
.nx-ad video { flex: 1; width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #000; }
.nx-ad-click { position: absolute; inset: 0 0 64px 0; cursor: pointer; }
.nx-ad-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; }
.nx-ad-top > * { pointer-events: auto; }
.nx-ad-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px;
  background: rgba(0, 0, 0, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.nx-ad-badge i { color: #facc15; }
.nx-ad-premium {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 800; color: #1a1205;
  background: linear-gradient(135deg, #fde047, #f59e0b); box-shadow: 0 4px 14px rgba(245, 158, 11, .35);
}
.nx-ad-premium:hover { filter: brightness(1.05); }
.nx-ad-bottom {
  position: absolute; left: 0; right: 0; bottom: 4px; padding: 30px 14px 12px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .82)); pointer-events: none;
}
.nx-ad-bottom > * { pointer-events: auto; }
.nx-ad-info { min-width: 0; flex: 1; }
.nx-ad-kicker { font-size: 11.5px; color: rgba(255, 255, 255, .62); font-weight: 600; margin-bottom: 2px; }
.nx-ad-title { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-ad-visit {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
}
.nx-ad-visit i { font-size: 9px; }
.nx-ad-visit:hover { background: rgba(255, 255, 255, .24); }
.nx-ad-ctrl { flex-shrink: 0; }
.nx-ad-count {
  display: inline-block; min-width: 96px; padding: 7px 12px; border-radius: 8px; text-align: center;
  background: rgba(0, 0, 0, .7); font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .88); font-variant-numeric: tabular-nums;
}
.nx-ad-count:empty { display: none; }
.nx-ad-skip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 800; color: #fff;
  background: rgba(0, 0, 0, .72); border: 1px solid rgba(255, 255, 255, .45);
  transition: background .15s, border-color .15s;
}
.nx-ad-skip:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.nx-ad-skip[hidden], .nx-ad-count[hidden] { display: none; }
.nx-ad-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; display: flex; gap: 3px; }
.nx-ad-progress > span { position: relative; background: rgba(255, 255, 255, .22); overflow: hidden; }
.nx-ad-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #facc15; transition: width .25s linear; }
@media (max-width: 600px) {
  .nx-ad-title { font-size: 13px; }
  .nx-ad-count { min-width: 0; font-size: 11.5px; }
  .nx-ad-skip { padding: 7px 12px; font-size: 13px; }
}

/* ---------- Werbepause im Livestream ---------- */
.lv-ad-tag { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 12px; padding: 4px 9px; border-radius: 7px; }
.lv-ad-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; font-weight: 600; }
.lv-ad-left { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, .5); padding: 4px 9px; border-radius: 7px; }
.lv-ad-bar a { margin-left: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lv-ad-bar a i { font-size: 10px; }
.lv-ad-segs { position: absolute; left: 12px; right: 12px; bottom: 40px; display: flex; gap: 4px; height: 3px; }
.lv-ad-segs span { flex: 1; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.lv-ad-segs span.is-done { background: #facc15; }
.lv-ad-segs span.is-cur { background: linear-gradient(90deg, #facc15 0 50%, rgba(255, 255, 255, .25) 50%); background-size: 200% 100%; animation: lv-ad-seg 30s linear forwards; }
@keyframes lv-ad-seg { from { background-position: 100% 0; } to { background-position: 0 0; } }
.lv-ad-note i { color: #facc15; margin-right: 4px; }

/* ---------- Passwort-Stärke ---------- */
.nx-pwm { margin-top: 10px; }
.nx-pwm-bars { display: flex; align-items: center; gap: 4px; }
.nx-pwm-bars .pw-bar { flex: 1; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .12); opacity: .2; transition: background .25s, opacity .25s; }
.nx-pwm-bars .pw-label { margin-left: 8px; font-size: 11.5px; font-weight: 800; min-width: 72px; text-align: right; }
.pw-rules { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.pw-rules li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted, rgba(255, 255, 255, .5)); transition: color .2s; }
.pw-rules li i { font-size: 11px; opacity: .45; }
.pw-rules li.is-ok { color: #22c55e; }
.pw-rules li.is-ok i { opacity: 1; }
[data-theme="light"] .nx-pwm-bars .pw-bar { background: rgba(0, 0, 0, .12); }

/* ---------- Chat: Symbole statt Emojis ---------- */
.lv-sys-ico { margin-right: 6px; font-size: 11px; opacity: .75; font-style: normal; }
.lv-alert-ico { display: inline-flex; line-height: 0; }
.lv-ev-gift { flex-shrink: 0; display: inline-flex; }

/* =====================================================================
   Kanal-/Stream-Aktionsleiste
   ===================================================================== */
.lv-actions { gap: 10px; align-items: center; }
.lv-actions .lv-btn {
  height: 40px; padding: 0 16px; gap: 9px; border-radius: 12px;
  font-size: 14px; font-weight: 800; letter-spacing: -.005em;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09);
  color: var(--text-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: background .15s, border-color .15s, transform .12s, box-shadow .2s, color .15s;
}
.lv-actions .lv-btn:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .16); }
.lv-actions .lv-btn:active { transform: scale(.97); }
.lv-actions .lv-btn > i { font-size: 14px; }
.lv-actions .lv-btn.lv-icon { width: 40px; padding: 0; color: var(--text-secondary); }
.lv-actions .lv-btn.lv-icon:hover { color: var(--text-primary); }

/* Primär: Abonnieren / Stream verwalten */
.lv-actions .lv-btn--primary, .lv-actions .lv-follow:not(.is-on) {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #b14dff 0%, #8b2cf0 100%);
  box-shadow: 0 6px 18px rgba(168, 59, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.lv-actions .lv-btn--primary:hover, .lv-actions .lv-follow:not(.is-on):hover {
  background: linear-gradient(135deg, #bd63ff 0%, #9533f5 100%);
  box-shadow: 0 8px 24px rgba(168, 59, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.lv-actions .lv-follow:not(.is-on) i { animation: lvb-beat 2.6s ease-in-out infinite; }
@keyframes lvb-beat { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.22); } 86% { transform: scale(.96); } }
.lv-actions .lv-follow.is-on i { color: #f472b6; }
.lv-actions .lv-follow:disabled { opacity: .7; cursor: default; }

/* kleine Symbol-Kachel in Live-Abo / Schenken / Steuerung */
.lv-btn-ico {
  width: 24px; height: 24px; margin-left: -6px; border-radius: 7px; flex-shrink: 0;
  display: inline-grid; place-items: center; font-size: 11.5px; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 8px rgba(0, 0, 0, .25);
}
.lv-btn-ico i { font-size: 11.5px; }
.lv-btn-ico--sub { background: linear-gradient(140deg, #c084fc, #7c3aed); }
.lv-btn-ico--gift { background: linear-gradient(140deg, #fb923c, #db2777); }
.lv-btn-ico--live { background: linear-gradient(140deg, #4b4560, #2a2635); }
.lv-btn--ctrl.is-live .lv-btn-ico--live { background: linear-gradient(140deg, #f87171, #dc2626); box-shadow: 0 0 0 3px rgba(239, 68, 68, .18), inset 0 1px 0 rgba(255, 255, 255, .3); }
.lv-actions .lv-sub:hover { border-color: rgba(192, 132, 252, .45); background: rgba(168, 85, 247, .1); }
.lv-actions .lv-gift:hover { border-color: rgba(251, 146, 60, .45); background: rgba(249, 115, 22, .08); }
.lv-actions .lv-sub.is-on { border-color: rgba(192, 132, 252, .5); background: linear-gradient(135deg, rgba(168, 85, 247, .2), rgba(124, 58, 237, .12)); }
.lv-actions .lv-sub.is-on .lv-btn-ico--sub { background: linear-gradient(140deg, #fde047, #f59e0b); }
.lv-actions .lv-bell.is-on, .lv-actions .lv-icon.is-on { color: #facc15; border-color: rgba(250, 204, 21, .35); background: rgba(250, 204, 21, .08); }
[data-theme="light"] .lv-actions .lv-btn:not(.lv-btn--primary):not(.lv-follow) { background: #fff; border-color: rgba(20, 20, 30, .12); }
[data-theme="light"] .lv-actions .lv-follow.is-on { background: #fff; border-color: rgba(20, 20, 30, .12); }
@media (max-width: 640px) {
  .lv-actions { gap: 8px; }
  .lv-actions .lv-btn { height: 38px; padding: 0 13px; font-size: 13.5px; }
  .lv-actions .lv-btn.lv-icon { width: 38px; }
}

/* =====================================================================
   Schenken-Fenster (Live-Abos & Live-Geschenke)
   ===================================================================== */
.lvg-head { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.lvg-head-ico { background: linear-gradient(140deg, #fb923c, #db2777) !important; color: #fff !important; box-shadow: 0 8px 22px rgba(219, 39, 119, .35), inset 0 1px 0 rgba(255, 255, 255, .3); }
.lvg-head-ico i { font-size: 17px; }
.lvg { gap: 16px !important; }
.lvg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
.lvg-tabs button {
  height: 40px; border: 0; border-radius: 10px; cursor: pointer; background: transparent;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 13.5px; font-weight: 800; color: var(--text-muted);
  transition: background .15s, color .15s, box-shadow .15s;
}
.lvg-tabs button i { font-size: 12.5px; }
.lvg-tabs button:hover { color: var(--text-primary); }
.lvg-tabs button.is-on { color: #fff; background: linear-gradient(135deg, rgba(177, 77, 255, .9), rgba(139, 44, 240, .9)); box-shadow: 0 4px 14px rgba(139, 44, 240, .35); }
.lvg-tabs button.is-on i { color: #fff; }
.lvg-sec { display: flex; flex-direction: column; gap: 9px; }
.lvg-label { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.lvg-label i { font-size: 11px; opacity: .8; }
.lvg-tiers, .lvg-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lvg-seg { grid-template-columns: 1fr 1fr; }
.lvg-tier, .lvg-seg button, .lvg-counts button, .lvg-gift {
  position: relative; cursor: pointer; font: inherit; color: var(--text-primary);
  border-radius: 13px; border: 1.5px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .035);
  transition: border-color .15s, background .15s, transform .12s, box-shadow .2s;
}
.lvg-tier:hover, .lvg-seg button:hover, .lvg-counts button:hover, .lvg-gift:hover { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); }
.lvg-tier { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px 11px; }
.lvg-tier b { font-size: 14px; font-weight: 800; }
.lvg-tier > span:last-child { font-size: 12.5px; color: var(--text-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.lvg-stars { display: inline-flex; gap: 2px; font-size: 10px; margin-bottom: 3px; }
.lvg-tier--1 .lvg-stars { color: #c084fc; } .lvg-tier--2 .lvg-stars { color: #60a5fa; } .lvg-tier--3 .lvg-stars { color: #fbbf24; }
.lvg-tier--1.is-on { border-color: #a855f7; background: rgba(168, 85, 247, .12); box-shadow: 0 0 0 3px rgba(168, 85, 247, .16); }
.lvg-tier--2.is-on { border-color: #3b82f6; background: rgba(59, 130, 246, .12); box-shadow: 0 0 0 3px rgba(59, 130, 246, .16); }
.lvg-tier--3.is-on { border-color: #f59e0b; background: rgba(245, 158, 11, .12); box-shadow: 0 0 0 3px rgba(245, 158, 11, .16); }
.lvg-seg button { height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 800; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvg-seg button i { font-size: 12px; color: var(--text-muted); }
.lvg-seg button.is-on { border-color: #a855f7; background: rgba(168, 85, 247, .12); }
.lvg-seg button.is-on i { color: #c084fc; }
.lvg-counts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lvg-counts button { display: flex; flex-direction: column; align-items: center; padding: 14px 4px 10px; }
.lvg-counts b { font-size: 22px; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.lvg-counts small { font-size: 11px; color: var(--text-muted); font-weight: 700; margin-top: 2px; }
.lvg-counts span { margin-top: 7px; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--text-secondary); background: rgba(255, 255, 255, .06); font-variant-numeric: tabular-nums; }
.lvg-counts em { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 9.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #f472b6, #a855f7); white-space: nowrap; }
.lvg-counts button.is-on { border-color: #a855f7; background: rgba(168, 85, 247, .12); box-shadow: 0 0 0 3px rgba(168, 85, 247, .16); }
.lvg-counts button.is-on span { background: rgba(168, 85, 247, .3); color: #fff; }
.lvg-gifts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lvg-gift { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 6px 12px; }
.lvg-gift:hover { transform: translateY(-2px); }
.lvg-gift-ico { transition: transform .2s cubic-bezier(.2, .9, .3, 1.4); }
.lvg-gift:hover .lvg-gift-ico, .lvg-gift.is-on .lvg-gift-ico { transform: scale(1.08) rotate(-4deg); }
.lvg-gift b { font-size: 13.5px; font-weight: 800; }
.lvg-price { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); background: rgba(255, 255, 255, .06); font-variant-numeric: tabular-nums; }
.lvg-gift.is-on { border-color: var(--g, #a855f7); background: color-mix(in srgb, var(--g, #a855f7) 13%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g, #a855f7) 18%, transparent); }
.lvg-gift.is-on .lvg-price { color: #fff; background: color-mix(in srgb, var(--g, #a855f7) 45%, transparent); }
.lvg-gift--rose { --g: #f43f5e; } .lvg-gift--heart { --g: #a855f7; } .lvg-gift--fire { --g: #f97316; } .lvg-gift--party { --g: #14b8a6; }
.lvg-gift--diamond { --g: #3b82f6; } .lvg-gift--rocket { --g: #6366f1; } .lvg-gift--crown { --g: #f59e0b; } .lvg-gift--galaxy { --g: #9333ea; }
.lvg-row { display: flex; align-items: center; gap: 12px; }
.lvg-qty { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 14px; border-radius: 13px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; font-weight: 800; }
.lvg-stepper { display: flex; align-items: center; gap: 4px; }
.lvg-stepper b { min-width: 34px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.lvg-stepper button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .06); color: var(--text-primary); cursor: pointer; font-size: 12px; transition: background .15s; }
.lvg-stepper button:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.lvg-stepper button:disabled { opacity: .35; cursor: default; }
.lvg-msg { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px; border-radius: 13px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); cursor: text; transition: border-color .15s, box-shadow .15s; }
.lvg-msg:focus-within { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168, 85, 247, .16); }
.lvg-msg i { color: var(--text-muted); font-size: 13px; }
.lvg-msg input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 14px; padding: 0; }
.lvg-fine { display: flex; gap: 9px; margin: 0; padding: 10px 12px; border-radius: 11px; background: rgba(255, 255, 255, .03); font-size: 12px; line-height: 1.55; color: var(--text-muted); }
.lvg-fine i { margin-top: 2px; font-size: 12px; opacity: .7; }
.lvg-foot { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.lvg-total { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 13px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.lvg-total > span { display: flex; flex-direction: column; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.lvg-total small { font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-top: 1px; }
.lvg-total b { font-size: 24px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lvg-cta {
  position: relative; height: 52px; border: 0; border-radius: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #b14dff, #8b2cf0); box-shadow: 0 8px 24px rgba(139, 44, 240, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .12s, box-shadow .2s, filter .15s;
}
.lvg-cta:hover { filter: brightness(1.06); box-shadow: 0 10px 30px rgba(139, 44, 240, .5), inset 0 1px 0 rgba(255, 255, 255, .25); }
.lvg-cta:active { transform: scale(.985); }
.lvg-cta i { font-size: 13px; opacity: .85; }
.lvg-cta span { margin-left: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .2); font-size: 13.5px; font-variant-numeric: tabular-nums; }
[data-theme="light"] .lvg-tier, [data-theme="light"] .lvg-seg button, [data-theme="light"] .lvg-counts button, [data-theme="light"] .lvg-gift,
[data-theme="light"] .lvg-qty, [data-theme="light"] .lvg-msg, [data-theme="light"] .lvg-total, [data-theme="light"] .lvg-tabs, [data-theme="light"] .lvg-fine { background: rgba(20, 20, 30, .03); border-color: rgba(20, 20, 30, .1); }
@media (max-width: 560px) {
  .lvg-gifts { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .lvg-gift { padding: 12px 2px 9px; }
  .lvg-gift b { font-size: 12px; }
  .lvg-counts { gap: 5px; }
  .lvg-counts button { padding: 12px 2px 8px; }
  .lvg-counts b { font-size: 18px; }
  .lvg-counts span { font-size: 10px; padding: 2px 5px; }
  .lvg-tabs button { font-size: 12.5px; }
  .lvg-seg button { font-size: 12.5px; }
}

/* =====================================================================
   Glücksrad
   ===================================================================== */
.wh-spin-overlay {
  background:
    radial-gradient(600px 420px at 50% 52%, rgba(168, 85, 247, .28), transparent 70%),
    rgba(7, 5, 12, .9) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.wh-spin-kicker {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  color: #e9d5ff !important; background: rgba(168, 85, 247, .18); border: 1px solid rgba(192, 132, 252, .3);
}
.wh-spin-head h3 { font-size: 26px !important; letter-spacing: -.01em; margin-top: 10px !important; }
.wh-stage { width: min(400px, 82vw) !important; }
.wh-disc {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 80px rgba(0, 0, 0, .65), 0 0 90px rgba(168, 85, 247, .25) !important;
  overflow: visible !important;
}
.wh-disc svg { display: block; border-radius: 50%; }
.wh-pointer {
  top: -20px !important; width: 40px !important; height: 52px !important;
  background: none !important; clip-path: none !important;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)) !important; transform-origin: 50% 30%;
}
.wh-spin-overlay:not(.is-done) .wh-pointer { animation: wh-ptr .16s ease-in-out infinite alternate; }
@keyframes wh-ptr { from { transform: translateX(-50%) rotate(-5deg); } to { transform: translateX(-50%) rotate(5deg); } }
.wh-spin-overlay.is-done .wh-pointer { transform: translateX(-50%); }
.wh-hub {
  width: 64px !important; height: 64px !important; padding: 9px; box-sizing: border-box;
  background: radial-gradient(circle at 35% 30%, #2f2840, #120e1a) !important;
  border: 3px solid #fff !important; box-shadow: 0 6px 20px rgba(0, 0, 0, .5), 0 0 0 6px rgba(168, 85, 247, .25);
  display: grid !important; place-items: center;
}
.wh-hub img { width: 100%; height: 100%; object-fit: contain; }
.wh-spin-overlay.is-done .wh-hub { width: 40px !important; height: 40px !important; padding: 6px; }
.wh-bulb { fill: #fde68a; }
.wh-bulb.a { animation: wh-bulb 1s steps(1) infinite; }
.wh-bulb.b { animation: wh-bulb 1s steps(1) infinite .5s; }
@keyframes wh-bulb { 0% { fill: #fff7d6; filter: drop-shadow(0 0 3px #fde047); } 50% { fill: #6b5a86; filter: none; } }
.wh-spin-overlay.is-done .wh-bulb { animation-duration: .35s; }
.wh-pool { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .65) !important; font-weight: 600; }
.wh-result {
  max-width: 380px !important; padding: 14px !important; border-radius: 18px !important;
  background: linear-gradient(180deg, #1c1726, #141019) !important; border: 1px solid rgba(255, 255, 255, .1) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.wh-result-thumb { border-radius: 12px !important; }
.wh-result-thumb span { background: linear-gradient(135deg, #b14dff, #8b2cf0) !important; }
.wh-result-actions .st-btn-primary { background: linear-gradient(135deg, #b14dff, #8b2cf0); border: 0; box-shadow: 0 6px 18px rgba(139, 44, 240, .35); }
html.nx-reduce-motion .wh-bulb, html.nx-reduce-motion .wh-pointer { animation: none !important; }
.wh-spin-overlay.is-done .wh-stage { width: min(220px, 50vw) !important; }
.wh-spin-overlay.is-done .wh-pointer { top: -14px !important; width: 28px !important; height: 36px !important; }
.wh-pointer svg { width: 100%; height: 100%; }