jukebox-vibe/web/src/styles.css

/* ═══════════════════════════════════════════════════════════════
   JUKEBOX — Discord Soundboard
   Design: Discord-style dark theme with Blurple accent
   Font: DM Sans (display + body)
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ────────────────────────────────────────────
   Theme Variables — Default (Discord Blurple)
   ──────────────────────────────────────────── */
:root {
  --bg-deep: #1a1b1e;
  --bg-primary: #1e1f22;
  --bg-secondary: #2b2d31;
  --bg-tertiary: #313338;
  --bg-modifier-hover: rgba(79, 84, 92, .16);
  --bg-modifier-active: rgba(79, 84, 92, .24);
  --bg-modifier-selected: rgba(79, 84, 92, .32);

  --text-normal: #dbdee1;
  --text-muted: #949ba4;
  --text-faint: #6d6f78;

  --accent: #5865f2;
  --accent-rgb: 88, 101, 242;
  --accent-hover: #4752c4;
  --accent-glow: rgba(88, 101, 242, .45);

  --green: #23a55a;
  --red: #f23f42;
  --yellow: #f0b232;
  --white: #ffffff;

  --font: 'DM Sans', 'Outfit', 'gg sans', 'Noto Sans', Whitney, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-low: 0 1px 3px rgba(0, 0, 0, .24);
  --shadow-med: 0 4px 12px rgba(0, 0, 0, .32);
  --shadow-high: 0 8px 24px rgba(0, 0, 0, .4);
  --transition: 150ms cubic-bezier(.4, 0, .2, 1);

  --card-size: 110px;
  --card-emoji: 28px;
  --card-font: 11px;

  color-scheme: dark;
}

/* ── Theme: Midnight Purple ── */
[data-theme="purple"] {
  --bg-deep: #13111c;
  --bg-primary: #1a1726;
  --bg-secondary: #241f35;
  --bg-tertiary: #2e2845;
  --accent: #9b59b6;
  --accent-rgb: 155, 89, 182;
  --accent-hover: #8e44ad;
  --accent-glow: rgba(155, 89, 182, .45);
}

/* ── Theme: Forest ── */
[data-theme="forest"] {
  --bg-deep: #0f1a14;
  --bg-primary: #142119;
  --bg-secondary: #1c2e22;
  --bg-tertiary: #253a2c;
  --accent: #2ecc71;
  --accent-rgb: 46, 204, 113;
  --accent-hover: #27ae60;
  --accent-glow: rgba(46, 204, 113, .4);
}

/* ── Theme: Sunset ── */
[data-theme="sunset"] {
  --bg-deep: #1a1210;
  --bg-primary: #231815;
  --bg-secondary: #2f201c;
  --bg-tertiary: #3d2a24;
  --accent: #e67e22;
  --accent-rgb: 230, 126, 34;
  --accent-hover: #d35400;
  --accent-glow: rgba(230, 126, 34, .4);
}

/* ── Theme: Ocean ── */
[data-theme="ocean"] {
  --bg-deep: #0a1628;
  --bg-primary: #0f1e33;
  --bg-secondary: #162a42;
  --bg-tertiary: #1e3652;
  --accent: #3498db;
  --accent-rgb: 52, 152, 219;
  --accent-hover: #2980b9;
  --accent-glow: rgba(52, 152, 219, .4);
}

/* ────────────────────────────────────────────
   Reset & Base
   ──────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: var(--bg-deep);
  color: var(--text-normal);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .4s ease, color .4s ease;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, select {
  font-family: inherit;
  color: inherit;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3f4147; }

::selection {
  background: var(--accent);
  color: white;
}

/* ────────────────────────────────────────────
   App Layout
   ──────────────────────────────────────────── */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}

/* ────────────────────────────────────────────
   Top Bar
   ──────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 52px;
  background: var(--bg-secondary);
  border-bottom: 1px solid rgba(0, 0, 0, .24);
  z-index: 10;
  flex-shrink: 0;
  gap: 16px;
  transition: background .4s ease;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.app-logo {
  width: 28px;
  height: 28px;
  background: var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .4s ease;
}

.app-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.02em;
}

/* ── Clock ── */
.clock-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
}

.clock {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-normal);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  opacity: .9;
}

.clock-seconds {
  font-size: 14px;
  color: var(--text-faint);
  font-weight: 500;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Channel Dropdown ── */
.channel-dropdown {
  position: relative;
  flex-shrink: 0;
}

.channel-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  background: var(--bg-tertiary);
  color: var(--text-normal);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.channel-btn:hover {
  background: var(--bg-modifier-selected);
  border-color: rgba(255, 255, 255, .12);
}

.channel-btn.open {
  border-color: var(--accent);
}

.channel-btn .cb-icon {
  font-size: 16px;
  color: var(--text-muted);
}

.channel-btn .chevron {
  font-size: 12px;
  color: var(--text-faint);
  transition: transform var(--transition);
  margin-left: 2px;
}

.channel-btn.open .chevron {
  transform: rotate(180deg);
}

.channel-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

.channel-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--bg-deep);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-high);
  padding: 6px;
  z-index: 100;
  animation: ctx-in 100ms ease-out;
}

.channel-menu-header {
  padding: 6px 8px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
}

.channel-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}

.channel-option:hover {
  background: var(--bg-modifier-hover);
  color: var(--text-normal);
}

.channel-option.active {
  background: var(--accent);
  color: var(--white);
}

.channel-option .co-icon {
  font-size: 16px;
  opacity: .7;
}

/* ── Connection Indicator ── */
.connection {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(35, 165, 90, .12);
  font-size: 12px;
  color: var(--green);
  font-weight: 600;
}

.conn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(35, 165, 90, .6);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 6px rgba(35, 165, 90, .5); }
  50% { box-shadow: 0 0 12px rgba(35, 165, 90, .8); }
}

.conn-ping {
  font-size: 10px;
  opacity: .7;
  margin-left: 2px;
}

/* ── Connection Details Modal ── */
.conn-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  animation: fadeIn .15s ease;
}
.conn-modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 340px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  animation: slideUp .2s ease;
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.conn-modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 14px;
}
.conn-modal-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  transition: all .15s;
}
.conn-modal-close:hover {
  background: rgba(255,255,255,.08);
  color: var(--fg);
}
.conn-modal-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.conn-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.conn-stat-label {
  color: var(--muted);
  font-size: 13px;
}
.conn-stat-value {
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.conn-ping-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Admin Icon Button ── */
.admin-btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  transition: all var(--transition);
  font-size: 18px;
}

.admin-btn-icon:hover {
  background: var(--bg-modifier-hover);
  color: var(--text-normal);
}

.admin-btn-icon.active {
  color: var(--accent);
}

/* ────────────────────────────────────────────
   Toolbar
   ──────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--bg-primary);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  flex-shrink: 0;
  flex-wrap: wrap;
  transition: background .4s ease;
}

/* ── Category Tabs ── */
.cat-tabs {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.cat-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.cat-tab:hover {
  background: var(--bg-modifier-selected);
  color: var(--text-normal);
}

.cat-tab.active {
  background: var(--accent);
  color: var(--white);
}

.tab-count {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, .15);
  padding: 0 6px;
  border-radius: 8px;
  line-height: 1.6;
}

/* ── Search ── */
.search-wrap {
  position: relative;
  flex: 1;
  max-width: 280px;
  min-width: 140px;
}

.search-wrap .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--text-faint);
  pointer-events: none;
}

.search-input {
  width: 100%;
  height: 32px;
  padding: 0 28px 0 32px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 20px;
  background: var(--bg-secondary);
  color: var(--text-normal);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  transition: all var(--transition);
}

.search-input::placeholder {
  color: var(--text-faint);
}

.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  transition: all var(--transition);
}

.search-clear:hover {
  background: var(--bg-tertiary);
  color: var(--text-normal);
}

.toolbar-spacer {
  flex: 1;
}

/* ── URL Import ── */
.url-import-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 240px;
  max-width: 460px;
  flex: 1;
  padding: 4px 6px 4px 8px;
  border-radius: 20px;
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, .08);
}

.url-import-icon {
  font-size: 15px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.url-import-input {
  flex: 1;
  min-width: 0;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-normal);
  font-size: 12px;
  font-family: var(--font);
  outline: none;
}

.url-import-input::placeholder {
  color: var(--text-faint);
}

.url-import-btn {
  height: 24px;
  padding: 0 10px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb, 88, 101, 242), .45);
  background: rgba(var(--accent-rgb, 88, 101, 242), .12);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: all var(--transition);
}

.url-import-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.url-import-btn:disabled {
  opacity: .5;
  pointer-events: none;
}

/* ── Toolbar Buttons ── */
.tb-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.tb-btn:hover {
  background: var(--bg-modifier-selected);
  color: var(--text-normal);
  border-color: rgba(255, 255, 255, .12);
}

.tb-btn .tb-icon {
  font-size: 15px;
}

.tb-btn.random {
  border-color: rgba(88, 101, 242, .3);
  color: var(--accent);
}

.tb-btn.random:hover {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

.tb-btn.party {
  border-color: rgba(240, 178, 50, .3);
  color: var(--yellow);
}

.tb-btn.party:hover {
  background: var(--yellow);
  color: #1a1b1e;
  border-color: var(--yellow);
}

.tb-btn.party.active {
  background: var(--yellow);
  color: #1a1b1e;
  border-color: var(--yellow);
  animation: party-btn 600ms ease-in-out infinite alternate;
}

@keyframes party-btn {
  from { box-shadow: 0 0 8px rgba(240, 178, 50, .4); }
  to { box-shadow: 0 0 20px rgba(240, 178, 50, .7); }
}

.tb-btn.stop {
  border-color: rgba(242, 63, 66, .3);
  color: var(--red);
}

.tb-btn.stop:hover {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

/* ── Size Slider ── */
.size-control {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--bg-tertiary);
  border: 1px solid rgba(255, 255, 255, .06);
}

.size-control .sc-icon {
  font-size: 14px;
  color: var(--text-faint);
}

.size-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 3px;
  border-radius: 2px;
  background: var(--bg-modifier-selected);
  outline: none;
  cursor: pointer;
}

.size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  transition: transform var(--transition);
}

.size-slider::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

.size-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

/* ── Theme Selector ── */
.theme-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 20px;
  background: var(--bg-tertiary);
  border: 1px solid rgba(255, 255, 255, .06);
}

.theme-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
}

.theme-dot:hover {
  transform: scale(1.2);
}

.theme-dot.active {
  border-color: var(--white);
  box-shadow: 0 0 6px rgba(255, 255, 255, .3);
}

/* ── Analytics Strip ── */
.analytics-strip {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px 20px;
  background: var(--bg-primary);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  flex-shrink: 0;
}

.analytics-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, .08);
}

.analytics-card.analytics-wide {
  flex: 1;
  min-width: 0;
}

.analytics-icon {
  font-size: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

.analytics-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.analytics-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.analytics-value {
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  color: var(--text-normal);
}

.analytics-top-list {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.analytics-top-list::-webkit-scrollbar {
  display: none;
}

.analytics-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb, 88, 101, 242), .15);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.analytics-muted {
  color: var(--text-muted);
  font-size: 12px;
}

/* ────────────────────────────────────────────
   Category / Folder Strip
   ──────────────────────────────────────────── */
.category-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: var(--bg-primary);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
  transition: background .4s ease;
}

.category-strip::-webkit-scrollbar {
  display: none;
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, .06);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}

.cat-chip:hover {
  border-color: rgba(255, 255, 255, .12);
  color: var(--text-normal);
  background: var(--bg-tertiary);
}

.cat-chip.active {
  background: rgba(88, 101, 242, .1);
}

.cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cat-count {
  font-size: 10px;
  font-weight: 700;
  opacity: .5;
}

/* ────────────────────────────────────────────
   Main Grid Area
   ──────────────────────────────────────────── */
.main {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  background: var(--bg-primary);
  transition: background .4s ease;
}

.sound-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-size), 1fr));
  gap: 8px;
}

/* ────────────────────────────────────────────
   Sound Card
   ──────────────────────────────────────────── */
.sound-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 12px 6px 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
  user-select: none;
  aspect-ratio: 1;
  opacity: 0;
  animation: card-enter 350ms ease-out forwards;
}

.sound-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--transition);
  background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
}

.sound-card:hover {
  background: var(--bg-tertiary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-med), 0 0 20px var(--accent-glow);
  border-color: rgba(88, 101, 242, .2);
}

.sound-card:hover::before {
  opacity: 1;
}

.sound-card:active {
  transform: translateY(0);
  transition-duration: 50ms;
}

.sound-card.playing {
  border-color: var(--accent);
  animation: card-enter 350ms ease-out forwards, playing-glow 1.2s ease-in-out infinite alternate;
}

@keyframes playing-glow {
  from { box-shadow: 0 0 4px var(--accent-glow); }
  to { box-shadow: 0 0 16px var(--accent-glow); }
}

@keyframes card-enter {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Ripple Effect ── */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(88, 101, 242, .3);
  transform: scale(0);
  animation: ripple-expand 500ms ease-out forwards;
  pointer-events: none;
}

@keyframes ripple-expand {
  to { transform: scale(3); opacity: 0; }
}

/* ── Sound Card Content ── */
.sound-emoji {
  font-size: var(--card-emoji);
  font-weight: 800;
  line-height: 1;
  z-index: 1;
  transition: transform var(--transition);
  opacity: .7;
  font-family: 'Syne', 'DM Sans', sans-serif;
}

.sound-card:hover .sound-emoji {
  transform: scale(1.15);
  opacity: 1;
}

.sound-card.playing .sound-emoji {
  animation: emoji-bounce 400ms ease;
  opacity: 1;
}

@keyframes emoji-bounce {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.3); }
  70% { transform: scale(.95); }
}

.sound-name {
  font-size: var(--card-font);
  font-weight: 600;
  text-align: center;
  color: var(--text-normal);
  z-index: 1;
  max-width: 100%;
  white-space: nowrap;
  padding: 0 4px;
}

.sound-duration {
  font-size: 9px;
  color: var(--text-faint);
  z-index: 1;
  font-weight: 500;
}

/* ── Favorite Star ── */
.fav-star {
  position: absolute;
  top: 4px;
  right: 4px;
  opacity: 0;
  transition: all var(--transition);
  cursor: pointer;
  z-index: 2;
  color: var(--text-faint);
  padding: 2px;
  line-height: 1;
}

.fav-star .fav-icon {
  font-size: 14px;
}

.sound-card:hover .fav-star {
  opacity: .6;
}

.fav-star:hover {
  opacity: 1 !important;
  color: var(--yellow);
  transform: scale(1.2);
}

.fav-star.active {
  opacity: 1 !important;
  color: var(--yellow);
}

/* ── "New" Badge ── */
.new-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 8px;
  font-weight: 700;
  background: var(--green);
  color: white;
  padding: 1px 5px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .03em;
  z-index: 2;
}

/* ── Playing Wave Indicator ── */
.playing-indicator {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 2px;
  align-items: flex-end;
  height: 10px;
}

.sound-card.playing .playing-indicator {
  display: flex;
}

.wave-bar {
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
  animation: wave 600ms ease-in-out infinite alternate;
}

.wave-bar:nth-child(1) { height: 3px; animation-delay: 0ms; }
.wave-bar:nth-child(2) { height: 7px; animation-delay: 150ms; }
.wave-bar:nth-child(3) { height: 5px; animation-delay: 300ms; }
.wave-bar:nth-child(4) { height: 9px; animation-delay: 100ms; }

@keyframes wave {
  from { height: 2px; }
  to { height: 10px; }
}

/* ────────────────────────────────────────────
   Empty State
   ──────────────────────────────────────────── */
.empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  text-align: center;
}

.empty-state.visible {
  display: flex;
}

.empty-emoji {
  font-size: 42px;
}

.empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-normal);
}

.empty-desc {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 260px;
}

/* ── Now Playing (Topbar) ── */
.now-playing {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(var(--accent-rgb, 88, 101, 242), .12);
  border: 1px solid rgba(var(--accent-rgb, 88, 101, 242), .2);
  font-size: 12px;
  color: var(--text-muted);
  max-width: none;
  min-width: 0;
  animation: np-fade-in 300ms ease;
}

@keyframes np-fade-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.np-name {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.np-waves {
  display: none;
  gap: 1.5px;
  align-items: flex-end;
  height: 12px;
  flex-shrink: 0;
}

.np-waves.active {
  display: flex;
}

.np-wave-bar {
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
  animation: wave 500ms ease-in-out infinite alternate;
}

.np-wave-bar:nth-child(1) { height: 3px; animation-delay: 0ms; }
.np-wave-bar:nth-child(2) { height: 8px; animation-delay: 120ms; }
.np-wave-bar:nth-child(3) { height: 5px; animation-delay: 240ms; }
.np-wave-bar:nth-child(4) { height: 10px; animation-delay: 80ms; }

/* ── Volume Control (Toolbar) ── */
.volume-control {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--bg-tertiary);
  border: 1px solid rgba(255, 255, 255, .06);
}

.vol-icon {
  font-size: 16px;
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--transition);
  user-select: none;
}

.vol-icon:hover {
  color: var(--text-normal);
}

.vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--vol, 80%), var(--bg-modifier-selected) var(--vol, 80%));
  outline: none;
  cursor: pointer;
}

.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  transition: transform var(--transition);
}

.vol-slider::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

.vol-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

.vol-pct {
  font-size: 11px;
  color: var(--text-faint);
  min-width: 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────────
   Party Mode Overlay
   ──────────────────────────────────────────── */
.party-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity .3s ease;
}

.party-overlay.active {
  opacity: 1;
  animation: party-hue 2s linear infinite;
}

.party-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg,
    rgba(255, 0, 0, .04),
    rgba(0, 255, 0, .04),
    rgba(0, 0, 255, .04),
    rgba(255, 255, 0, .04)
  );
  background-size: 400% 400%;
  animation: party-grad 3s ease infinite;
}

@keyframes party-grad {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes party-hue {
  to { filter: hue-rotate(360deg); }
}

/* ────────────────────────────────────────────
   Context Menu
   ──────────────────────────────────────────── */
.ctx-menu {
  position: fixed;
  min-width: 160px;
  background: var(--bg-deep);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--radius);
  box-shadow: var(--shadow-high);
  padding: 4px;
  z-index: 1000;
  animation: ctx-in 100ms ease-out;
}

@keyframes ctx-in {
  from { opacity: 0; transform: scale(.96) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-normal);
  cursor: pointer;
  transition: all var(--transition);
}

.ctx-item:hover {
  background: var(--accent);
  color: var(--white);
}

.ctx-item.danger {
  color: var(--red);
}

.ctx-item.danger:hover {
  background: var(--red);
  color: var(--white);
}

.ctx-item .ctx-icon {
  font-size: 15px;
}

.ctx-sep {
  height: 1px;
  background: rgba(255, 255, 255, .06);
  margin: 3px 8px;
}

/* ────────────────────────────────────────────
   Toast Notification
   ──────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-high);
  animation: toast-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
}

.toast .toast-icon {
  font-size: 16px;
}

.toast.error {
  background: var(--red);
  color: white;
}

.toast.info {
  background: var(--green);
  color: white;
}

@keyframes toast-in {
  from { transform: translate(-50%, 16px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* ────────────────────────────────────────────
   Admin Panel Overlay
   ──────────────────────────────────────────── */
.admin-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in 200ms ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.admin-panel {
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 92%;
  max-width: 920px;
  max-height: min(88vh, 860px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-high);
}

.admin-panel h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.admin-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all var(--transition);
}

.admin-close:hover {
  background: var(--bg-tertiary);
  color: var(--text-normal);
}

.admin-field {
  margin-bottom: 16px;
}

.admin-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.admin-field input {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text-normal);
  font-family: var(--font);
  transition: all var(--transition);
}

.admin-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.admin-btn-action {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1;
}

.admin-btn-action.primary {
  background: var(--accent);
  color: white;
  border: none;
}

.admin-btn-action.primary:hover {
  background: var(--accent-hover);
}

.admin-btn-action.outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-muted);
}

.admin-btn-action.outline:hover {
  border-color: rgba(255, 255, 255, .12);
  color: var(--text-normal);
}

.admin-btn-action.danger {
  background: var(--red);
  color: var(--white);
  border: 1px solid var(--red);
}

.admin-btn-action.danger:hover {
  filter: brightness(1.06);
}

.admin-btn-action.danger.ghost {
  background: transparent;
  color: var(--red);
  border: 1px solid rgba(242, 63, 66, .5);
}

.admin-btn-action.danger.ghost:hover {
  background: rgba(242, 63, 66, .14);
}

.admin-btn-action:disabled {
  opacity: .5;
  pointer-events: none;
}

.admin-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.admin-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-status {
  font-size: 13px;
  color: var(--text-muted);
}

.admin-actions-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-search-field {
  margin-bottom: 0;
}

.admin-bulk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  border: 1px solid rgba(255, 255, 255, .08);
  flex-wrap: wrap;
}

.admin-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.admin-select-all input,
.admin-item-check input {
  accent-color: var(--accent);
}

.admin-list-wrap {
  min-height: 260px;
  max-height: 52vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: var(--bg-primary);
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
}

.admin-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.admin-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, .06);
}

.admin-item-main {
  min-width: 0;
}

.admin-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-normal);
  white-space: nowrap;
}

.admin-item-meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}

.admin-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-item-actions .admin-btn-action,
.admin-rename-row .admin-btn-action {
  padding: 8px 12px;
  font-size: 12px;
}

.admin-rename-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.admin-rename-row input {
  flex: 1;
  min-width: 120px;
  background: var(--bg-tertiary);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-normal);
  font-family: var(--font);
  transition: all var(--transition);
}

.admin-rename-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

/* ────────────────────────────────────────────
   Responsive
   ──────────────────────────────────────────── */
@media (max-width: 700px) {
  .toolbar {
    gap: 6px;
    padding: 8px 12px;
  }

  .cat-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cat-tabs::-webkit-scrollbar {
    display: none;
  }

  .search-wrap {
    max-width: 100%;
    min-width: 100%;
    order: -1;
  }

  .url-import-wrap {
    max-width: 100%;
    min-width: 100%;
    order: -1;
  }

  .size-control,
  .theme-selector {
    display: none;
  }

  .main {
    padding: 12px;
  }

  .topbar {
    padding: 0 12px;
    gap: 8px;
  }

  .channel-label {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .clock {
    font-size: 16px;
  }

  .clock-seconds {
    font-size: 11px;
  }

  .tb-btn span:not(.tb-icon) {
    display: none;
  }

  .analytics-strip {
    padding: 8px 12px;
    flex-direction: column;
    gap: 6px;
  }

  .analytics-card.analytics-wide {
    width: 100%;
  }

  .admin-panel {
    width: 96%;
    padding: 16px;
    max-height: 92vh;
  }

  .admin-item {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .admin-item-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .admin-rename-row {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .connection {
    display: none;
  }

  .app-title {
    display: none;
  }

  .now-playing {
    max-width: none;
  }

  .toolbar .tb-btn {
    padding: 6px 8px;
  }

  .url-import-btn {
    padding: 0 8px;
  }
}

/* ────────────────────────────────────────────
   Drag & Drop Overlay
   ──────────────────────────────────────────── */
.drop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in 120ms ease;
  pointer-events: none;
}

.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 64px 72px;
  border-radius: 24px;
  border: 2.5px dashed rgba(var(--accent-rgb), .55);
  background: rgba(var(--accent-rgb), .07);
  animation: drop-pulse 2.2s ease-in-out infinite;
}

@keyframes drop-pulse {
  0%, 100% {
    border-color: rgba(var(--accent-rgb), .45);
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
  }
  50% {
    border-color: rgba(var(--accent-rgb), .9);
    box-shadow: 0 0 60px 12px rgba(var(--accent-rgb), .12);
  }
}

.drop-icon {
  font-size: 64px;
  color: var(--accent);
  animation: drop-bounce 1.8s ease-in-out infinite;
}

@keyframes drop-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.drop-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-normal);
  letter-spacing: -.3px;
}

.drop-sub {
  font-size: 13px;
  color: var(--text-muted);
}

/* ────────────────────────────────────────────
   Upload Queue (floating card)
   ──────────────────────────────────────────── */
.upload-queue {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 340px;
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .45);
  z-index: 200;
  animation: slide-up 200ms cubic-bezier(.16,1,.3,1);
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.uq-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(var(--accent-rgb), .12);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-normal);
}

.uq-header .material-icons { color: var(--accent); }

.uq-close {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.06);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.uq-close:hover { background: rgba(255,255,255,.14); color: var(--text-normal); }

.uq-list {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px 0;
}

.uq-item {
  display: grid;
  grid-template-columns: 20px 1fr auto 18px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  position: relative;
}

.uq-item + .uq-item {
  border-top: 1px solid rgba(255, 255, 255, .04);
}

.uq-file-icon {
  font-size: 18px;
  color: var(--text-faint);
}

.uq-info {
  min-width: 0;
}

.uq-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-normal);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.uq-size {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 1px;
}

.uq-progress-wrap {
  grid-column: 1 / -1;
  height: 3px;
  background: rgba(255, 255, 255, .07);
  border-radius: 2px;
  margin-top: 4px;
}

/* Vertikaler layout-Trick: progress bar als extra row nach den anderen */
.uq-item {
  flex-wrap: wrap;
}

.uq-progress-wrap {
  width: 100%;
  order: 10;
}

.uq-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 120ms ease;
}

.uq-status-icon { font-size: 16px; }
.uq-status-waiting  .uq-status-icon { color: var(--text-faint); }
.uq-status-uploading .uq-status-icon {
  color: var(--accent);
  animation: spin 1s linear infinite;
}
.uq-status-done  .uq-status-icon { color: var(--green); }
.uq-status-error .uq-status-icon { color: var(--red); }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.uq-error {
  grid-column: 2 / -1;
  font-size: 10px;
  color: var(--red);
  margin-top: 2px;
}

/* ────────────────────────────────────────────
   Utility
   ──────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}