/* JukeBox 2.0 — shared visual layer */
:root {
  --bg: #090b10 !important;
  --surface: #11141b !important;
  --surface2: #171b24 !important;
  --surface3: #1d222d !important;
  --border: #292f3d !important;
  --border-strong: #3a4354 !important;
  --accent: #dfff5f !important;
  --accent-rgb: 223,255,95 !important;
  --accent-ink: #11140b !important;
  --accent2: #ff6b8b !important;
  --text: #f3f5f8 !important;
  --muted: #929bad !important;
  --green: #58e7a6 !important;
  --radius: 14px !important;
  --shadow: 0 18px 60px rgba(0, 0, 0, .26);
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, .18);
}

html { color-scheme: dark; }
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
}
body {
  background-image:
    radial-gradient(circle at 12% -8%, rgba(var(--accent-rgb),.08), transparent 31rem),
    radial-gradient(circle at 90% 8%, rgba(111,126,255,.06), transparent 28rem) !important;
  background-attachment: fixed !important;
}
body::before { display: none !important; }

::selection { background: rgba(var(--accent-rgb),.26); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #343b4b transparent; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { outline: none; }
:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }

.app {
  max-width: 1040px !important;
  padding: 1.5rem 1.4rem 4rem !important;
}
.page-wrap {
  max-width: 760px !important;
  padding-top: 1rem;
}

header {
  gap: 1rem;
  margin-bottom: 1.5rem !important;
  padding: .95rem 0 1.2rem !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}
.logo {
  color: var(--text) !important;
  font-family: 'Figtree', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.045em !important;
  text-decoration: none !important;
}
.logo span { color: var(--accent) !important; }
.header-right, .nav-links { gap: .45rem !important; }
.header-username {
  color: var(--muted) !important;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  padding: .45rem .7rem !important;
}

.nav-link, .back-btn {
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--muted) !important;
  border-radius: 10px !important;
  padding: .5rem .68rem !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease !important;
}
.nav-link:hover, .back-btn:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.07) !important;
}
.nav-link.active {
  color: #101308 !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.nav-link.logout:hover { color: #ffd3dd !important; background: rgba(255,107,139,.10) !important; }

.status-dot {
  font-family: 'Figtree', sans-serif !important;
  font-size: .76rem !important;
  font-weight: 700;
  color: var(--muted) !important;
}
.status-dot::before { width: 8px !important; height: 8px !important; }
.status-dot.live::before { box-shadow: 0 0 0 4px rgba(88,231,166,.11) !important; }

.now-playing,
.section,
.card,
.box,
.add-section,
.user-card,
.history-sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)), var(--surface) !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-soft) !important;
}

.now-playing { padding: 1.2rem !important; margin-bottom: 1.2rem !important; }
.np-thumb, .item-thumb, .history-thumb {
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.08);
  background: var(--surface2);
}
.np-label, .add-label, .queue-title, .section h2, .section-title,
h1, h2, label {
  font-family: 'Figtree', sans-serif !important;
  letter-spacing: 0 !important;
}
.np-label, .add-label, .queue-title, .section h2, .section-title {
  text-transform: none !important;
  color: var(--muted) !important;
  font-weight: 700 !important;
}
.np-title, .item-title, .history-title { color: var(--text) !important; }
.np-author, .item-meta, .history-meta, .item-dur { color: var(--muted) !important; }
.item-by { color: inherit; }

.add-section { padding: 1rem !important; }
.add-row { gap: .55rem !important; }
.url-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], select, textarea {
  background: #0d1016 !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 11px !important;
  min-height: 42px;
  padding: .68rem .82rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}
textarea { min-height: 100px; resize: vertical; }
.url-input:hover, input:hover, select:hover, textarea:hover { border-color: var(--border-strong) !important; }
.url-input:focus, input:focus, select:focus, textarea:focus {
  border-color: rgba(var(--accent-rgb),.72) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08) !important;
  background: #10131a !important;
}

.add-btn, .btn, .btn-save, .paste-btn, .clear-btn, .hf-btn, .history-close,
.remove-btn, .history-readd, .history-star, .history-blacklist, .copy-btn {
  border-radius: 10px !important;
  min-height: 38px;
  font-family: 'Figtree', sans-serif !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease, opacity .14s ease !important;
}
.add-btn, .btn:not(.btn-ghost):not(.btn-danger), .btn-save {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: 1px solid var(--accent) !important;
}
.add-btn:hover, .btn:not(.btn-ghost):not(.btn-danger):hover, .btn-save:hover:hover {
  background: color-mix(in srgb, var(--accent) 86%, white 14%) !important;
  transform: translateY(-1px);
}
.btn-ghost, .paste-btn, .clear-btn, .hf-btn, .history-close, .copy-btn {
  background: rgba(255,255,255,.045) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.btn-ghost:hover, .paste-btn:hover, .clear-btn:hover, .hf-btn:hover, .history-close:hover, .copy-btn:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.btn-danger {
  background: rgba(255,107,139,.08) !important;
  color: #ff9db2 !important;
  border: 1px solid rgba(255,107,139,.24) !important;
}
.btn-danger:hover { background: rgba(255,107,139,.15) !important; }

.queue-header { margin-top: 1.5rem !important; margin-bottom: .7rem !important; }
.queue-count, .badge, .status-badge {
  border-radius: 999px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--muted) !important;
  padding: .22rem .55rem !important;
}
.queue-list, .history-list { gap: .55rem !important; }
.queue-item, .history-item {
  background: rgba(17,20,27,.78) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease, transform .15s ease !important;
}
.queue-item:hover, .history-item:hover {
  background: var(--surface2) !important;
  border-color: rgba(255,255,255,.13) !important;
}
.drag-handle { color: #5f6879 !important; }
.item-pos { color: #596274 !important; }
.remove-btn { background: transparent !important; border: 1px solid transparent !important; color: var(--muted) !important; }
.remove-btn:hover { color: #ff9db2 !important; background: rgba(255,107,139,.09) !important; }

.history-sidebar {
  border-radius: 18px 0 0 18px !important;
  box-shadow: -20px 0 70px rgba(0,0,0,.42) !important;
}
.sidebar-overlay { background: rgba(3,5,8,.65) !important; backdrop-filter: blur(5px); }
.history-header { border-bottom-color: rgba(255,255,255,.08) !important; }
.history-filters { gap: .55rem !important; }
.hf-row { gap: .45rem !important; }
.hf-search, .hf-select { min-height: 38px !important; }
.hf-btn.active { background: rgba(var(--accent-rgb),.11) !important; color: var(--accent) !important; border-color: rgba(var(--accent-rgb),.28) !important; }
.history-action-box { background: rgba(255,255,255,.025) !important; border-color: rgba(255,255,255,.07) !important; border-radius: 10px !important; }

.section { padding: 1.25rem !important; margin-bottom: 1rem !important; }
.section > h2:first-child, .section h2 { font-size: .9rem !important; color: var(--text) !important; }
.row, .row3 { gap: .8rem !important; }
.user-cards { gap: .7rem !important; }
.user-card { padding: 1rem !important; }
.user-card-header { gap: .75rem !important; }
.user-card-name { color: var(--text) !important; }
.user-card-email { color: var(--muted) !important; }
.user-card-actions { gap: .42rem !important; }

.msg, .error, .reg-success, .add-error {
  border-radius: 11px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  padding: .75rem .85rem !important;
}
.error, .add-error { background: rgba(255,107,139,.08) !important; color: #ffb4c4 !important; border-color: rgba(255,107,139,.18) !important; }
.add-error:empty { display: none !important; }
.reg-success { background: rgba(88,231,166,.08) !important; color: #9cf3c8 !important; border-color: rgba(88,231,166,.18) !important; }

/* Login / account / legal pages */
.page-wrap > .logo { margin-bottom: 1.3rem !important; font-size: 1.75rem !important; }
.page-wrap > .card, .page-wrap > .box {
  padding: 1.7rem !important;
  width: 100%;
}
.card h1, .box h1 {
  color: var(--text) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: -.025em !important;
}
.card h2, .box h2 {
  color: var(--muted) !important;
  font-size: .78rem !important;
  font-weight: 750 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.subtitle, .box-subtitle { color: var(--muted) !important; }
.tab-bar {
  padding: 4px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 12px !important;
}
.tab-bar button {
  border-radius: 9px !important;
  font-family: 'Figtree', sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.tab-bar button.active { background: var(--surface3) !important; color: var(--text) !important; }
.checkbox-label { color: var(--muted) !important; }
.tfa-digits input { text-align: center; font-size: 1.15rem !important; }

/* Modal / toast */
#discord-modal { background: rgba(2,4,7,.72) !important; backdrop-filter: blur(10px) !important; }
.discord-modal-box {
  background: var(--surface) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
}
.discord-modal-box h3 { color: var(--text) !important; }
.discord-modal-box p { color: var(--muted) !important; font-family: 'Figtree', sans-serif !important; }
.discord-modal-btns .btn-cancel {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
}
.discord-modal-btns .btn-discord { border-radius: 10px !important; }
.toast {
  background: #151922 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
}

.site-footer {
  color: #70798a !important;
  border-top: 0 !important;
  padding-top: 2rem !important;
}
.site-footer .footer-links, .site-footer .copy, .site-footer .ver,
.site-footer .footer-links a { color: #70798a !important; }
.site-footer .footer-links a:hover { color: var(--text) !important; }

@media (max-width: 760px) {
  .app { padding: .9rem .8rem 3rem !important; }
  header { align-items: stretch !important; gap: .7rem !important; }
  .header-right, .nav-links { gap: .3rem !important; }
  .nav-link { padding: .44rem .55rem !important; font-size: .73rem !important; }
  .now-playing, .section, .add-section { border-radius: 14px !important; }
  .add-row { align-items: stretch !important; }
  .page-wrap { padding: .7rem .8rem 2rem !important; }
  .page-wrap > .card, .page-wrap > .box { padding: 1.25rem !important; }
  .history-sidebar { width: min(92vw, 430px) !important; }
}

@media (max-width: 520px) {
  .header-right { flex-wrap: wrap !important; }
  .nav-link { flex: 0 0 auto; }
  .add-row { display: grid !important; grid-template-columns: auto 1fr auto !important; }
  .user-card-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .discord-modal-btns { flex-direction: column; }
}

/* Drag & Drop: aktuell anvisierte Zielposition deutlich hervorheben */
.queue-item.drag-over,
.queue-item.drag-over:hover {
  background: rgba(var(--accent-rgb),.16) !important;
  border-color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.28), 0 0 0 2px rgba(var(--accent-rgb),.08) !important;
}

/* Queue- / Now-Playing-Lesbarkeit: insgesamt etwas groesser, passend zum Layout */
.np-label, .add-label, .queue-title {
  font-size: .88rem !important;
  letter-spacing: .04em !important;
}
.np-title {
  font-size: 1.12rem !important;
  line-height: 1.3 !important;
}
.np-author, .item-meta, .item-by, .item-dur {
  font-size: .86rem !important;
}
.item-title {
  font-size: 1.03rem !important;
  line-height: 1.32 !important;
}
.queue-count, .badge, .status-badge {
  font-size: .80rem !important;
  padding: .26rem .62rem !important;
}
.url-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], select, textarea {
  font-size: .97rem !important;
}
.add-btn {
  font-size: .96rem !important;
  padding: .72rem 1.1rem !important;
}
.clear-btn {
  font-size: .86rem !important;
  padding: .42rem .92rem !important;
}
.item-pos {
  font-size: .90rem !important;
  width: 24px !important;
}
.drag-handle {
  font-size: .95rem !important;
}

/* History-Sidebar: auf Desktop immer exakt die halbe Viewportbreite */
@media (min-width: 521px) {
  .history-sidebar {
    width: 50vw !important;
    max-width: 50vw !important;
    right: -50vw !important;
  }
  .history-sidebar.open {
    right: 0 !important;
  }
}

/* History-Kopf: bessere Lesbarkeit und wirklich runder Close-Button */
.history-header h3 {
  font-size: .84rem !important;
  letter-spacing: .13em !important;
  line-height: 1.2 !important;
}
.history-close {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  line-height: 1 !important;
  font-size: 1rem !important;
}

/* History-Filter: Selects nehmen nur die fuer ihren Inhalt benoetigte Breite */
.history-filters .hf-select {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  field-sizing: content;
}

.site-footer .footer-version { color: #70798a !important; }

/* Einfuegen-Icon: groesser und optisch besser ausbalanciert */
.paste-btn svg { width:26px !important; height:26px !important; }

/* Multi-Bot reservation */
.bot-reservation {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.055), rgba(255,255,255,.01)), var(--surface) !important;
  border: 1px solid rgba(var(--accent-rgb),.20) !important;
  border-radius: 16px !important;
  padding: 1rem 1.15rem !important;
  margin-bottom: 1rem !important;
}
.bot-reservation-main { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.bot-reservation-label { font-size:.75rem; font-weight:800; color:var(--accent); margin-bottom:.2rem; }
.bot-reservation-title { font-size:1rem; font-weight:800; color:var(--text); }
.bot-reservation-sub { margin-top:.2rem; font-size:.80rem; color:var(--muted); }
.bot-reservation-sub a { color:var(--accent); text-decoration:none; }
@media (max-width: 620px) { .bot-reservation-main { align-items:stretch; flex-direction:column; } }


/* UI polish: readable privacy text and right-aligned form actions */
.privacy-card {
  max-width: 820px;
}
.privacy-copy {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  margin-top: 1.15rem;
}
.privacy-copy p {
  margin: 0 !important;
  color: var(--text) !important;
  font-size: .96rem;
  line-height: 1.72;
}
.privacy-note {
  color: var(--muted) !important;
  font-weight: 650;
}
.form-actions-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-top: .85rem;
}
.form-actions-right.compact {
  margin-top: .55rem;
}
.account-top-action {
  display: flex !important;
  width: fit-content;
  margin-left: auto;
}
.admin-user-actions {
  justify-content: flex-end !important;
}
@media (max-width: 760px) {
  .form-actions-right {
    justify-content: stretch;
  }
  .form-actions-right > .btn {
    width: 100%;
  }
  .account-top-action {
    width: 100%;
    justify-content: center;
  }
  .admin-user-actions {
    justify-content: flex-start !important;
  }
}