/* ═══════════════════════════════════════
   GB JUKEBOX — Dual Theme
   Classic Gold | Cyber Futurist
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400;500&family=Orbitron:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,600;1,300&display=swap');

/* ═══ THEME VARIABLES ═══ */
body[data-theme="classic"] {
  --bg:           #0a0602;
  --jk-bg:        #1a1008;
  --jk-border:    #c49e50;
  --jk-border2:   rgba(196,158,80,.3);
  --jk-inner:     #0f0904;
  --screen-bg:    #060400;
  --surface:      rgba(196,158,80,.08);
  --border:       rgba(196,158,80,.2);
  --border-hi:    rgba(196,158,80,.5);
  --text:         #f0d890;
  --muted:        rgba(240,216,144,.55);
  --faint:        rgba(240,216,144,.28);
  --accent1:      #e83030;
  --accent1-dim:  rgba(232,48,48,.15);
  --accent1-glow: rgba(232,48,48,.45);
  --accent2:      #c49e50;
  --accent2-dim:  rgba(196,158,80,.12);
  --accent2-glow: rgba(196,158,80,.5);
  --accent3:      #2fa8e8;
  --neon-top:     linear-gradient(90deg,#e83030,#ff6060,#e83030);
  --neon-bot:     linear-gradient(90deg,#2fa8e8,#60c8f8,#2fa8e8);
  --prog:         linear-gradient(90deg,#e83030,#c49e50);
  --play-bg:      #e83030;
  --play-color:   #fff;
  --play-shadow:  rgba(232,48,48,.6);
  --eq1:#e83030; --eq2:#c49e50; --eq3:#2fa8e8;
  --logo-font:    'Bebas Neue', sans-serif;
  --logo-color:   linear-gradient(180deg,#f0d080,#c49e50,#8a6a28);
  --now-font:     'Cormorant Garamond', serif;
  --body-font:    'DM Mono', monospace;
  --chip-on-bg:   rgba(232,48,48,.15);
  --chip-on-col:  #e83030;
  --track-on-bg:  rgba(232,48,48,.1);
  --track-on-col: #e83030;
  --scan-color:   rgba(196,158,80,.08);
}

body[data-theme="cyber"] {
  --bg:           #03030a;
  --jk-bg:        #050510;
  --jk-border:    #00c8ff;
  --jk-border2:   rgba(0,200,255,.25);
  --jk-inner:     #020208;
  --screen-bg:    #020210;
  --surface:      rgba(0,200,255,.06);
  --border:       rgba(0,200,255,.15);
  --border-hi:    rgba(0,200,255,.4);
  --text:         #e0f8ff;
  --muted:        rgba(224,248,255,.55);
  --faint:        rgba(224,248,255,.28);
  --accent1:      #00c8ff;
  --accent1-dim:  rgba(0,200,255,.12);
  --accent1-glow: rgba(0,200,255,.5);
  --accent2:      #00ff88;
  --accent2-dim:  rgba(0,255,136,.08);
  --accent2-glow: rgba(0,255,136,.4);
  --accent3:      #ff0080;
  --neon-top:     linear-gradient(90deg,#00c8ff,#00ff88,#00c8ff);
  --neon-bot:     linear-gradient(90deg,#ff0080,#00c8ff,#ff0080);
  --prog:         linear-gradient(90deg,#00c8ff,#00ff88);
  --play-bg:      rgba(0,200,255,.1);
  --play-color:   #00c8ff;
  --play-shadow:  rgba(0,200,255,.5);
  --eq1:#00c8ff; --eq2:#00ff88; --eq3:#ff0080;
  --logo-font:    'Orbitron', monospace;
  --logo-color:   linear-gradient(90deg,#00c8ff,#00ff88,#00c8ff);
  --now-font:     'Orbitron', monospace;
  --body-font:    'DM Mono', monospace;
  --chip-on-bg:   rgba(0,200,255,.12);
  --chip-on-col:  #00c8ff;
  --track-on-bg:  rgba(0,200,255,.08);
  --track-on-col: #00c8ff;
  --scan-color:   rgba(0,200,255,.04);
}

/* ═══ RESET ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }

body {
  font-family: var(--body-font);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ═══ BG BLUR ═══ */
.bg-cover {
  position: fixed; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(80px) saturate(1.4) brightness(.18);
  transform: scale(1.15);
  transition: background-image 1.2s ease;
}
.bg-overlay {
  position: fixed; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.93) 100%);
}
.noise {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .025;
}

/* ═══ INSTALL BUTTON (footer) ═══ */
.install-banner { display: none; } /* ascuns - nu mai folosim bannerul */

.install-footer-btn {
  display: none; align-items: center; gap: 8px;
  font-family: var(--body-font);
  font-size: 11px; letter-spacing: .18em;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--accent2-dim);
  border: 1px solid var(--accent2);
  color: var(--accent2);
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 0 12px var(--accent2-glow);
}
.install-footer-btn.show { display: flex; }
.install-footer-btn:hover {
  background: var(--accent2);
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 0 20px var(--accent2-glow);
}

/* ═══ APP LAYOUT ═══ */
.app-layout {
  position: relative; z-index: 3;
  display: flex; min-height: 100dvh;
  align-items: flex-start; justify-content: center;
  padding: 16px 8px 32px;
}

/* ═══ JUKEBOX FRAME ═══ */
.player-panel {
  width: 100%;
  max-width: 480px;
  background: var(--jk-bg);
  border: 2px solid var(--jk-border);
  border-radius: 28px 28px 20px 20px;
  box-shadow:
    0 0 0 4px var(--bg),
    0 0 0 7px var(--jk-border),
    0 0 60px var(--accent1-glow),
    0 40px 80px rgba(0,0,0,.8);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
}

/* Inner border decoration */
.player-panel::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--jk-border2);
  border-radius: 22px 22px 14px 14px;
  pointer-events: none;
  z-index: 0;
}

/* Inner border decoration */
.player-panel::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--jk-border2);
  border-radius: 22px 22px 14px 14px;
  pointer-events: none;
  z-index: 0;
}

/* Scanlines overlay */
.player-panel::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, var(--scan-color) 3px, var(--scan-color) 4px);
  pointer-events: none; z-index: 1;
  border-radius: 28px;
}

/* ═══ JUKEBOX HEADER ═══ */
.jk-arch {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 100%);
  padding: 20px 20px 14px;
  border-bottom: 2px solid var(--jk-border);
  text-align: center;
}

.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px;
}
.app-logo img {
  width: 32px; height: 32px;
  border-radius: 8px; opacity: .8;
  border: 1px solid var(--jk-border2);
}
.app-title-wrap { flex: 1; text-align: center; }
.app-label {
  font-family: var(--body-font);
  font-size: 9px; letter-spacing: .3em;
  color: var(--muted); line-height: 1;
  margin-bottom: 2px;
}
.app-title {
  font-family: var(--logo-font);
  font-size: 28px; letter-spacing: .12em; line-height: 1;
  background: var(--logo-color);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: logoShimmer 4s linear infinite;
}
body[data-theme="cyber"] .app-title { font-size: 22px; }
@keyframes logoShimmer { 0%{background-position:0%} 100%{background-position:200%} }

/* Theme + menu buttons in header */
.theme-toggle {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border-hi);
  color: var(--accent1);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: transform .2s, background .2s;
  flex-shrink: 0;
}
.theme-toggle:hover { transform: rotate(20deg); background: var(--accent1-dim); }
.theme-toggle-label { display: none; }

.menu-toggle {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
  flex-shrink: 0;
}
.menu-toggle:hover { background: var(--accent1-dim); }
.menu-toggle svg { width: 18px; height: 18px; }

/* ═══ NEON STRIPS ═══ */
.neon-strip-top {
  height: 3px;
  background: var(--neon-top);
  box-shadow: 0 0 8px var(--accent1-glow);
  position: relative; z-index: 2;
}
.neon-strip-bot {
  height: 2px;
  background: var(--neon-bot);
  box-shadow: 0 0 6px var(--accent2-glow);
  position: relative; z-index: 2;
}

/* ═══ SCREEN AREA ═══ */
.jk-screen-area {
  position: relative; z-index: 2;
  background: var(--screen-bg);
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--jk-border2);
  margin: 0 6px;
  border-radius: 0 0 12px 12px;
}

/* ═══ COVER ═══ */
.cover-wrap {
  position: relative;
  width: min(200px, 52vw);
  height: min(200px, 52vw);
  margin: 0 auto 12px;
  flex-shrink: 0;
}

/* Classic rings */
body[data-theme="classic"] .cover-ring-1 {
  position: absolute; inset: -10px;
  border: 1px solid rgba(232,48,48,.25);
  border-radius: 50%;
  animation: ringPulse 3s ease-in-out infinite;
}
body[data-theme="classic"] .cover-ring-2 {
  position: absolute; inset: -18px;
  border: 1px solid rgba(196,158,80,.12);
  border-radius: 50%;
  animation: ringPulse 3s ease-in-out infinite .7s;
}
@keyframes ringPulse {
  0%,100%{opacity:.4;transform:scale(1)}
  50%{opacity:1;transform:scale(1.02)}
}

/* Cyber halo */
body[data-theme="cyber"] .cover-ring-1 {
  position: absolute; inset: -8px;
  background: conic-gradient(from 0deg,#00c8ff,#00ff88,#ff0080,#00c8ff);
  border-radius: 50%; opacity: .3;
  animation: cyberHalo 4s linear infinite;
  filter: blur(5px);
}
body[data-theme="cyber"] .cover-ring-2 {
  position: absolute; inset: -1px;
  border: 1px solid rgba(0,200,255,.35);
  border-radius: 16px;
}
body[data-theme="cyber"] .cover-wrap::before {
  content: '';
  position: absolute; top: -3px; left: -3px;
  width: 14px; height: 14px;
  border-top: 2px solid #00c8ff;
  border-left: 2px solid #00c8ff;
  border-radius: 3px 0 0 0;
  opacity: .7; z-index: 3;
}
body[data-theme="cyber"] .cover-wrap::after {
  content: '';
  position: absolute; bottom: -3px; right: -3px;
  width: 14px; height: 14px;
  border-bottom: 2px solid #00c8ff;
  border-right: 2px solid #00c8ff;
  border-radius: 0 0 3px 0;
  opacity: .7; z-index: 3;
}
@keyframes cyberHalo { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.cover-img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 14px;
  position: relative; z-index: 1;
  box-shadow: 0 8px 30px rgba(0,0,0,.7), 0 0 20px var(--accent1-glow);
  transition: opacity .4s ease;
}
.cover-img.loading { opacity: .3; }
.cover-shine {
  position: absolute; inset: 0; z-index: 2;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events: none;
}

/* ═══ EQ ═══ */
.eq-wrap {
  display: flex; gap: 3px;
  align-items: flex-end; height: 32px;
  justify-content: center; margin-bottom: 8px;
  opacity: 0; transition: opacity .3s;
}
.eq-wrap.active { opacity: 1; }
.eq-bar {
  width: 4px; border-radius: 2px;
  background: var(--eq1);
  height: 4px;
}
.eq-bar:nth-child(3n+1) { background: var(--eq1); }
.eq-bar:nth-child(3n+2) { background: var(--eq2); }
.eq-bar:nth-child(3n)   { background: var(--eq3); }
.eq-wrap.active .eq-bar { animation: eqAnim .7s ease-in-out infinite; }
.eq-wrap.active .eq-bar:nth-child(2n)  { animation-delay: .12s; }
.eq-wrap.active .eq-bar:nth-child(3n)  { animation-delay: .22s; }
.eq-wrap.active .eq-bar:nth-child(4n)  { animation-delay: .06s; }
.eq-wrap.active .eq-bar:nth-child(5n)  { animation-delay: .18s; }
.eq-wrap.active .eq-bar:nth-child(7n)  { animation-delay: .09s; }
.eq-wrap.active .eq-bar:nth-child(11n) { animation-delay: .15s; }
@keyframes eqAnim {
  0%,100% { height: 3px; opacity: .4; }
  50%     { height: 28px; opacity: 1; }
}
  25%    { height: 35px; opacity: 1; }
  50%    { height: 18px; opacity: .7; }
  75%    { height: 42px; opacity: 1; }
}

/* ═══ NOW PLAYING ═══ */
.now-playing { text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; }
.np-album {
  font-size: 9px; letter-spacing: .22em;
  color: var(--accent1); text-transform: uppercase; margin-bottom: 4px;
  text-align: center; width: 100%;
}
.np-title {
  font-family: var(--now-font);
  font-size: clamp(15px, 4.5vw, 20px);
  font-weight: 300; font-style: italic;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 6px; margin-bottom: 3px;
  text-align: center; width: 100%;
}
body[data-theme="cyber"] .np-title {
  font-style: normal; font-weight: 700;
  font-size: clamp(12px, 3.5vw, 16px);
  text-shadow: 0 0 16px var(--accent1-glow);
}
.np-index {
  font-size: 11px; letter-spacing: .15em;
  color: var(--muted);
  text-align: center; width: 100%;
  margin-top: 2px;
}

/* ═══ PROGRESS ═══ */
.progress-wrap {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
}
.time-label { font-size: 9px; color: var(--muted); flex-shrink: 0; width: 28px; }
.time-label:last-child { text-align: right; }
.progress-track {
  flex: 1; height: 3px; background: var(--surface);
  border-radius: 2px; position: relative; cursor: pointer;
}
.progress-fill {
  height: 100%; width: 0%;
  background: var(--prog); border-radius: 2px;
  transition: width .1s linear;
  box-shadow: 0 0 5px var(--accent1-glow);
}
.progress-thumb {
  position: absolute; top: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text);
  transform: translate(-50%, -50%); left: 0%;
  box-shadow: 0 0 5px var(--accent1-glow);
  transition: left .1s linear; pointer-events: none;
}

/* ═══ CONTROLS ═══ */
.jk-controls-area {
  position: relative; z-index: 2;
  background: var(--jk-inner);
  padding: 14px 16px;
  border-top: 1px solid var(--jk-border2);
  border-bottom: 1px solid var(--jk-border2);
  margin: 0 6px;
}

.controls {
  display: flex; align-items: center;
  justify-content: center; gap: 10px;
}
.ctrl-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s;
}
.ctrl-btn svg { width: 19px; height: 19px; }
.ctrl-btn:hover { border-color: var(--border-hi); color: var(--text); background: var(--accent1-dim); }
.ctrl-btn:active { transform: scale(.92); }
.ctrl-btn.active { border-color: var(--accent2); color: var(--accent2); background: var(--accent2-dim); }
.ctrl-sm { width: 36px; height: 36px; }
.ctrl-sm svg { width: 16px; height: 16px; }

.ctrl-play {
  width: 60px; height: 60px;
  background: var(--play-bg);
  border: 1px solid var(--accent1);
  color: var(--play-color);
  box-shadow: 0 0 20px var(--play-shadow), inset 0 0 14px var(--accent1-dim);
}
body[data-theme="classic"] .ctrl-play { background: var(--accent1); }
.ctrl-play svg { width: 24px; height: 24px; }
.ctrl-play:hover { box-shadow: 0 0 36px var(--play-shadow); transform: scale(1.06); }

/* ═══ VOLUME ═══ */
.volume-row {
  display: flex; align-items: center; gap: 8px;
  color: var(--faint); margin-top: 10px;
}
.volume-row input[type="range"] {
  flex: 1; accent-color: var(--accent1); cursor: pointer;
}

/* ═══ SELECTOR AREA ═══ */
.jk-selector-area {
  position: relative; z-index: 2;
  background: var(--jk-inner);
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--jk-border2);
  margin: 0 6px;
}

.album-filter-wrap { margin-bottom: 0; }
.filter-label {
  font-size: 8px; letter-spacing: .22em;
  color: var(--faint); margin-bottom: 8px; text-transform: uppercase;
}
.album-chips { display: flex; flex-wrap: wrap; gap: 5px; max-height: 80px; overflow-y: auto; }
.album-chip {
  font-size: 11px; letter-spacing: .08em;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface); color: var(--muted);
  cursor: pointer; white-space: nowrap; transition: all .2s;
  text-transform: uppercase;
  font-weight: 500;
}
.album-chip:hover { border-color: var(--border-hi); color: var(--text); }
.album-chip.active {
  background: var(--chip-on-bg);
  border-color: var(--accent1);
  color: var(--chip-on-col);
}

/* ═══ TRACK LIST AREA ═══ */
.jk-list-area {
  position: relative; z-index: 2;
  background: var(--screen-bg);
  flex: 1; overflow: hidden;
  margin: 0 6px;
  display: flex; flex-direction: column;
}

.search-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--jk-border2);
  padding: 8px 12px;
  flex-shrink: 0;
}
.search-bar:focus-within { background: var(--accent1-dim); }
.search-bar svg { color: var(--faint); flex-shrink: 0; }
.search-bar input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-family: var(--body-font);
  font-size: 11px; letter-spacing: .06em;
}
.search-bar input::placeholder { color: var(--faint); }
.search-clear { background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; }

.track-list {
  flex: 1; overflow-y: auto; padding: 4px 8px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.track-list::-webkit-scrollbar { width: 2px; }
.track-list::-webkit-scrollbar-thumb { background: var(--border); }

.track-item {
  display: grid;
  grid-template-columns: 28px 32px 1fr 22px 22px;
  gap: 7px; align-items: center;
  padding: 8px 6px; border-radius: 8px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.03);
  transition: background .15s;
}
.track-item:hover { background: var(--surface); }
.track-item.active { background: var(--track-on-bg); }
.ti-num { font-size: 9px; color: var(--faint); text-align: center; }
.track-item.active .ti-num { color: var(--track-on-col); }
.ti-cover { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; border: 1px solid var(--border); }
.ti-info { min-width: 0; }
.ti-title { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); margin-bottom: 2px; }
.track-item.active .ti-title { color: var(--track-on-col); }
.ti-album { font-size: 10px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .06em; }
.ti-play {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.ti-play svg { width: 10px; height: 10px; }
.track-item:hover .ti-play { background: var(--accent1-dim); border-color: var(--accent1); color: var(--accent1); }
.track-item.active .ti-play { background: var(--accent1); border-color: var(--accent1); color: #000; }

/* ═══ FOOTER ═══ */
.jk-footer {
  position: relative; z-index: 2;
  background: var(--jk-bg);
  padding: 10px 16px;
  border-top: 1px solid var(--jk-border2);
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
}
.back-link {
  font-size: 9px; letter-spacing: .1em;
  color: var(--muted); text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  transition: all .2s;
  font-family: var(--body-font);
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.back-link:hover {
  color: var(--text);
  border-color: var(--border-hi);
  background: var(--accent1-dim);
}

/* ═══ PLAYLIST OPEN BUTTON ═══ */
.playlist-open-btn {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--body-font);
  font-size: 11px; letter-spacing: .18em;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--accent1-dim);
  border: 1px solid var(--accent1);
  color: var(--accent1);
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 0 12px var(--accent1-glow);
}
.playlist-open-btn:hover {
  background: var(--accent1);
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 0 20px var(--accent1-glow);
}
.playlist-open-btn svg { flex-shrink: 0; }
.loading-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 120px; gap: 12px; color: var(--faint);
  font-size: 11px; letter-spacing: .08em;
}
.loading-dots { display: flex; gap: 5px; }
.loading-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent1);
  animation: dotPulse 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay:.2s; background: var(--accent2); }
.loading-dots span:nth-child(3) { animation-delay:.4s; background: var(--accent3); }
@keyframes dotPulse {
  0%,100%{transform:scale(.5);opacity:.3}
  50%{transform:scale(1);opacity:1}
}

/* ═══ PLAYLIST PANEL (desktop) ═══ */
.playlist-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(400px, 100vw); z-index: 100;
  background: rgba(5,5,15,.97);
  backdrop-filter: blur(24px);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.playlist-panel.open { transform: translateX(0); }

.playlist-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.playlist-title {
  font-family: var(--logo-font);
  font-size: 20px; letter-spacing: .1em;
  background: var(--logo-color); background-size: 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.panel-close {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.panel-close:hover { background: var(--accent1-dim); color: var(--accent1); }

/* ═══ DESKTOP ═══ */
@media (min-width: 768px) {
  .app-layout {
    display: grid;
    grid-template-columns: 440px 1fr;
    align-items: start;
    padding: 24px;
    gap: 24px;
  }
  .player-panel {
    max-width: 440px; width: 100%;
    min-height: unset;
    border-radius: 28px 28px 20px 20px;
    box-shadow:
      0 0 0 4px var(--bg),
      0 0 0 6px var(--jk-border),
      0 0 60px var(--accent1-glow),
      0 40px 80px rgba(0,0,0,.8);
  }
  .player-panel::before { border-radius: 22px 22px 14px 14px; }
  .player-panel::after  { border-radius: 28px 28px 20px 20px; }
  .playlist-panel {
    position: relative; transform: none !important;
    border-left: none; width: auto;
    background: rgba(5,5,15,.6);
    border-radius: 20px;
    border: 1px solid var(--border);
    height: calc(100vh - 48px);
  }
  .menu-toggle { display: none; }
  .panel-close { display: none; }
}

@media (min-width: 1100px) {
  .app-layout { grid-template-columns: 460px 1fr; }
}

/* ═══ NOW PLAYING ACTIONS (Favorite + Share) ═══ */
.np-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 10px;
}

.np-btn-fav {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,80,80,.08);
  border: 1px solid rgba(255,80,80,.25);
  color: rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .25s;
}
.np-btn-fav svg { width: 22px; height: 22px; }
.np-btn-fav:hover { border-color: #ff4444; color: #ff4444; transform: scale(1.1); }
.np-btn-fav.active {
  background: rgba(255,60,60,.15);
  border-color: #ff4444;
  color: #ff4444;
  box-shadow: 0 0 16px rgba(255,60,60,.4);
}
.np-btn-fav.active .heart-empty { display: none; }
.np-btn-fav.active .heart-full  { display: block !important; }
.np-btn-fav.active { animation: heartBeat .3s ease; }
@keyframes heartBeat {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.np-btn-share {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .2s;
}
.np-btn-share svg { width: 20px; height: 20px; }
.np-btn-share:hover {
  border-color: var(--accent2);
  color: var(--accent2);
  background: var(--accent2-dim);
  transform: scale(1.1);
}

/* ═══ SHARE APP BUTTON ═══ */
.share-app-btn {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--body-font);
  font-size: 11px; letter-spacing: .15em;
  padding: 9px 14px; border-radius: 999px;
  background: var(--accent2-dim);
  border: 1px solid var(--accent2);
  color: var(--accent2);
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 0 10px var(--accent2-glow);
}
.share-app-btn:hover {
  background: var(--accent2);
  color: #000;
  transform: translateY(-1px);
}

/* ═══ FAVORITE IN TRACKLIST ═══ */
.ti-fav {
  width: 22px; height: 22px;
  background: none; border: none;
  color: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: color .2s, transform .2s;
  padding: 0;
}
.ti-fav svg { width: 14px; height: 14px; }
.ti-fav:hover { color: #ff4444; transform: scale(1.2); }
.ti-fav.active { color: #ff4444; }
.ti-fav.active .heart-empty { display: none; }
.ti-fav.active .heart-full  { display: block !important; }

/* ═══ TOAST NOTIFICATION ═══ */
.toast {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20,20,30,.95);
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--body-font);
  font-size: 12px; letter-spacing: .08em;
  color: var(--text);
  z-index: 9999;
  opacity: 0;
  transition: all .3s ease;
  backdrop-filter: blur(12px);
  white-space: nowrap;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══ SOCIAL BAR ═══ */
.social-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--jk-inner);
  border-top: 1px solid var(--jk-border2);
  position: relative; z-index: 2;
}

.social-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: all .2s;
  flex-shrink: 0;
}
.social-btn svg { width: 16px; height: 16px; }
.social-btn:hover {
  transform: translateY(-2px) scale(1.1);
  border-color: var(--border-hi);
  color: var(--text);
}

/* Culori specifice per rețea la hover */
.social-btn:nth-child(1):hover { border-color: #ff0000; color: #ff0000; background: rgba(255,0,0,.08); } /* YouTube */
.social-btn:nth-child(2):hover { border-color: #1db954; color: #1db954; background: rgba(29,185,84,.08); } /* Spotify */
.social-btn:nth-child(3):hover { border-color: #1877f2; color: #1877f2; background: rgba(24,119,242,.08); } /* Facebook */
.social-btn:nth-child(4):hover { border-color: #e1306c; color: #e1306c; background: rgba(225,48,108,.08); } /* Instagram */
.social-btn:nth-child(5):hover { border-color: #ffffff; color: #ffffff; background: rgba(255,255,255,.08); } /* TikTok */