/* Red Music Admin - Soft 3D Style */
:root {
  --background: #18181d;
  --surface: #222228;
  --dark-shadow: #0d0d10;
  --light-shadow: #34343c;
  --red: #ef3d57;
  --text: #f5f5f7;
  --muted: #96969f;
}

html { scroll-behavior: smooth; }
.auth-checking body { visibility: hidden; }
body { min-height: 100vh; color: var(--text); background-color: var(--background); font-family: Arial, sans-serif; }
.main-content { min-height: 100vh; background: radial-gradient(circle at top right, rgba(239, 61, 87, 0.08), transparent 30%), var(--background); }
.page-label, .menu-title { color: #ff667c; font-size: 12px; font-weight: bold; letter-spacing: 1.5px; }
.text-secondary { color: var(--muted) !important; }

/* Sidebar */
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 10; min-height: 100vh; background-color: var(--surface); box-shadow: 10px 0 25px var(--dark-shadow); }
.mobile-nav { background-color: var(--surface); box-shadow: 0 8px 18px var(--dark-shadow); }
.logo { color: white; font-size: 20px; font-weight: bold; }
.logo:hover { color: white; }
.sidebar .logo { display: flex; justify-content: center; width: 100%; }
.brand-logo { display: block; width: min(100%, 155px); height: auto; margin: -12px auto 0; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.45)); }
.mobile-nav .brand-logo { width: 64px; height: 52px; margin: 0; object-fit: contain; object-position: left center; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.45)); }
.logo-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: 7px; color: white; background: linear-gradient(145deg, #ff4964, #ca293f); border-radius: 12px; box-shadow: 5px 5px 10px #151519, -3px -3px 8px #34343c; font-size: 14px; }
.nav-link { margin-bottom: 5px; padding: 13px 15px; color: #aaaab3; border-radius: 13px; transition: 0.2s; }
.nav-link span { margin-left: 8px; }
.nav-link:hover { color: white; background-color: #292930; box-shadow: inset 3px 3px 7px #17171b, inset -3px -3px 7px #383840; }
.nav-link.active { color: white; background: linear-gradient(145deg, #fa425d, #c5263d); box-shadow: 6px 6px 12px #141418, -3px -3px 8px #34343c; }
.admin-profile { padding: 16px; background-color: var(--surface); border-radius: 15px; box-shadow: inset 4px 4px 8px #17171b, inset -4px -4px 8px #303038; }
.admin-profile small { color: var(--muted); }
.logout-link { margin-top: 3px; color: #ff7185; font-size: 12px; text-decoration: none; }
.logout-link:hover { color: #ffffff; }
.avatar { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: linear-gradient(145deg, #ff4964, #c92740); border-radius: 14px; box-shadow: 4px 4px 9px #141418, -3px -3px 7px #373740; font-weight: bold; }

/* Soft 3D cards */
.stat-card, .content-card, .music-player { background: linear-gradient(145deg, #25252b, #1f1f24); border: 1px solid rgba(255, 255, 255, 0.025); border-radius: 22px; box-shadow: 10px 10px 22px var(--dark-shadow), -8px -8px 18px var(--light-shadow); }
.stat-card { transition: transform 0.2s, box-shadow 0.2s; }
.stat-card:hover { transform: translateY(-5px); box-shadow: 14px 14px 25px #0c0c0f, -9px -9px 20px #36363e; }
.stat-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: #ff7185; background: linear-gradient(145deg, #2d2d34, #202025); border-radius: 15px; box-shadow: 5px 5px 10px #131317, -4px -4px 9px #393941; font-size: 21px; }
.status-dot { width: 10px; height: 10px; background-color: #43dc93; border-radius: 50%; box-shadow: 0 0 10px #43dc93; }

/* Quick actions */
.quick-link, .workflow-step { background: linear-gradient(145deg, #292930, #202025); border: 1px solid rgba(255, 255, 255, 0.03); border-radius: 18px; box-shadow: 6px 6px 13px #121216, -5px -5px 12px #34343c; transition: 0.2s; }
.quick-link:hover { transform: translateY(-4px); box-shadow: 10px 10px 18px #101013, -7px -7px 15px #373740; }
.workflow-step span { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: white; background: linear-gradient(145deg, #ff4964, #c92740); border-radius: 12px; box-shadow: 4px 4px 8px #131317, -3px -3px 7px #3a3a42; font-weight: bold; }

/* Search form */
.form-control { color: white; background-color: #1d1d22; border: 0; border-radius: 14px; box-shadow: inset 5px 5px 10px #101013, inset -5px -5px 10px #303038; }
.form-control:focus { color: white; background-color: #1d1d22; box-shadow: inset 5px 5px 10px #101013, inset -5px -5px 10px #303038, 0 0 0 3px rgba(239, 61, 87, 0.18); }
.form-control::placeholder { color: #777780; }
.btn-danger { background: linear-gradient(145deg, #ff4964, #c92740); border: 0; border-radius: 13px; box-shadow: 6px 6px 12px #111115, -4px -4px 10px #383841; }
.btn-danger:hover { background: linear-gradient(145deg, #d72f48, #ff4964); transform: translateY(-2px); }
.btn-outline-light, .btn-outline-danger { border-radius: 12px; }
.search-result { height: 100%; padding: 16px; background: linear-gradient(145deg, #292930, #202025); border: 1px solid rgba(255, 255, 255, 0.025); border-radius: 18px; box-shadow: 6px 6px 13px #121216, -5px -5px 12px #34343c; }
.search-result .song-cover { width: 56px; height: 56px; }
.youtube-thumbnail { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; box-shadow: 5px 5px 12px #111115, -3px -3px 8px #373740; }
.empty-message { background-color: #202025; border: 0; border-radius: 18px; box-shadow: inset 6px 6px 12px #121216, inset -6px -6px 12px #303038; }

/* Library table */
.table { --bs-table-bg: transparent; --bs-table-color: #fff; --bs-table-border-color: #35353c; }
.table th { padding-top: 15px; padding-bottom: 15px; color: var(--muted); font-size: 12px; font-weight: normal; text-transform: uppercase; }
.table td { padding-top: 14px; padding-bottom: 14px; }
.table small { color: var(--muted); }
.song-cover, .player-cover { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; box-shadow: 4px 4px 9px #111115, -3px -3px 8px #383840; font-size: 20px; }
.song-cover-image { width: 58px; height: 42px; flex-shrink: 0; object-fit: cover; border-radius: 10px; box-shadow: 4px 4px 9px #111115, -3px -3px 8px #383840; }
.cover-one { background: linear-gradient(145deg, #f14a65, #9d2236); }
.cover-two { background: linear-gradient(145deg, #9165dc, #442778); }
.cover-three { background: linear-gradient(145deg, #17a8c8, #0c5367); }
.source-badge, .feature-badge { display: inline-block; margin: 3px; padding: 6px 10px; color: #ff8b9b; background-color: #2a2024; border-radius: 20px; box-shadow: inset 3px 3px 6px #171216, inset -3px -3px 6px #3d2d32; font-size: 11px; }
.play-btn, .control-btn { color: white; background: linear-gradient(145deg, #303037, #222227); border: 0; border-radius: 50%; box-shadow: 4px 4px 8px #111115, -3px -3px 7px #393941; }
.play-btn:hover, .control-btn:hover { color: white; background: linear-gradient(145deg, #ff4964, #c92740); }

/* Custom YouTube player */
.custom-player {
  background: linear-gradient(145deg, #25252b, #1f1f24);
  border: 1px solid rgba(255, 255, 255, 0.025);
  border-radius: 22px;
  box-shadow: 10px 10px 22px var(--dark-shadow), -8px -8px 18px var(--light-shadow);
}

.video-screen {
  overflow: hidden;
  background-color: #09090b;
  border-radius: 18px;
  box-shadow: inset 7px 7px 15px #050506, inset -4px -4px 12px #292930;
}

.video-screen iframe {
  border: 0;
}

.player-placeholder {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: radial-gradient(circle, #2c2025 0%, #121216 70%);
  pointer-events: none;
}

.placeholder-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  padding-left: 5px;
  color: white;
  background: linear-gradient(145deg, #ff4964, #c92740);
  border-radius: 50%;
  box-shadow: 8px 8px 17px #08080a, -5px -5px 14px #383840;
  font-size: 25px;
}

.player-progress {
  padding: 10px 14px;
  background-color: #1d1d22;
  border-radius: 14px;
  box-shadow: inset 4px 4px 9px #101013, inset -4px -4px 9px #303038;
}

.player-progress .form-range {
  accent-color: var(--red);
}

.volume-range {
  width: 95px;
  accent-color: var(--red);
}

.control-btn {
  width: 42px;
  height: 42px;
  padding: 0;
}

.player-info {
  padding: 22px;
  background: linear-gradient(145deg, #292930, #202025);
  border-radius: 18px;
  box-shadow: 6px 6px 13px #121216, -5px -5px 12px #34343c;
}

.video-screen:fullscreen {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}

/* Old compact music player */
.music-player { position: sticky; bottom: 18px; z-index: 5; }
.player-cover { width: 58px; height: 58px; background: linear-gradient(145deg, #f24b65, #9f2136); }
.main-play-btn { width: 48px; height: 48px; color: white; background: linear-gradient(145deg, #ff4964, #c92740); border: 0; border-radius: 50%; box-shadow: 5px 5px 10px #111115, -4px -4px 9px #3b3b43; }
.main-play-btn:hover { color: white; transform: scale(1.05); }

/* Mobile */
@media (max-width: 767px) {
  .main-content { padding-bottom: 30px !important; }
  .music-player { position: static; }
  .stat-card, .content-card, .music-player { border-radius: 18px; box-shadow: 7px 7px 15px #0d0d10, -5px -5px 12px #303038; }
}