/* Krupadhwani Styles - Mobile First Dark Theme */
:root {
  --bg-dark: #121416;
  --bg-darker: #0d0f10;
  --bg-card: #1e2226;
  --accent: #1db954; /* Spotify-like green accent */
  --accent-hover: #17a247;
  --text-primary: #f5f7f9;
  --text-secondary: #b5bcc2;
  --danger: #ff4d4f;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --transition: 0.25s cubic-bezier(.4,0,.2,1);
  --shadow-soft: 0 4px 12px rgba(0,0,0,0.4);
  --gradient-1: linear-gradient(90deg,#1db954,#9333EA,#F59E0B,#2563EB);
  --gradient-2: linear-gradient(90deg,#2563EB,#EC4899,#10B981,#F59E0B);
}

html, body { height:100%; }
body {
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: Arial;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

header.navbar-dark { background: #fff; box-shadow: var(--shadow-soft); position:relative; overflow:hidden; display:flex; justify-content:center; }
header.navbar-dark:before { content:''; position:absolute; inset:0; background: var(--gradient-1); opacity:0.15; animation: gradientShift 12s linear infinite; z-index:0; }
header.navbar-dark .navbar-brand { position:relative; z-index:1; }

/* Admin Header Layout */
.admin-header { position:relative; z-index:10; min-height:56px; align-items:center; justify-content:center; }
.admin-back-btn { position:absolute; left:8px; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.3); border:1px solid rgba(0,0,0,0.4); color:#333; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition); z-index:20; padding:0; }
.admin-back-btn:hover { background:rgba(0,0,0,0.5); border-color:var(--accent); }
.admin-title { margin:0 auto; z-index:15; white-space:nowrap; display:flex; align-items:center; justify-content:center; }
.admin-right-btns { position:absolute; right:8px; top:50%; transform:translateY(-50%); display:flex; gap:.4rem; z-index:20; }
.admin-right-btns .btn { padding:.35rem .5rem; font-size:.75rem; }
header.navbar-dark .navbar-brand { position:relative; z-index:15; }

@media (min-width: 576px) {
  .admin-back-btn { width:36px; height:36px; left:12px; }
  .admin-right-btns { right:12px; gap:.5rem; }
  .admin-right-btns .btn { padding:.4rem .7rem; font-size:.8rem; }
}
footer.site-footer { background: var(--bg-darker); margin-top:3rem; padding:2.2rem 0 2.6rem; position:relative; overflow:hidden; }
footer.site-footer:before { content:''; position:absolute; inset:0; background: var(--gradient-2); opacity:0.12; animation: gradientShift 18s linear infinite reverse; }
footer.site-footer .brand { font-weight:600; letter-spacing:.7px; }

/* Cards */
.song-card { background: var(--bg-card); border: none; border-radius: var(--radius-md); padding: 1rem; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.75rem; transition: var(--transition); }
.song-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.song-title { font-weight:600; font-size:1rem; margin:0; letter-spacing:.5px; }
.song-meta { font-size:.75rem; color: var(--text-secondary); }
.play-btn { display:inline-flex; align-items:center; gap:.5rem; background: var(--accent); color:#fff; border:none; padding:.5rem .9rem; border-radius: var(--radius-sm); font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; transition: var(--transition); }
.play-btn:hover { background: var(--accent-hover); }

/* Search Bar */
#searchBar { background: var(--bg-card); border:1px solid #2c3237; color: var(--text-primary); padding:.75rem 1rem; border-radius: var(--radius-lg); outline:none; width:100%; transition: var(--transition); }
#searchBar:focus { border-color: var(--accent); box-shadow:0 0 0 3px rgba(29,185,84,.2); }

/* Grid */
.songs-grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); margin-top:1rem; }

/* Tabular Listing */
.songs-table-wrap { margin-top:1.5rem; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); overflow:hidden; }
.songs-table { width:100%; border-collapse:collapse; }
.songs-table thead { background:rgba(255,255,255,0.04); }
.songs-table th, .songs-table td { padding:.85rem .9rem; font-size:.85rem; white-space:nowrap; }
.songs-table th { font-weight:600; letter-spacing:.5px; color: var(--text-secondary); text-transform:uppercase; font-size:.7rem; }
.songs-table tbody tr { transition: var(--transition); }
.songs-table tbody tr:hover { background: rgba(29,185,84,0.08); }
.songs-table tbody tr td.title-cell { font-weight:600; color: var(--text-primary); }
.songs-table .play-small { background: #fff; border:none; padding:.35rem .7rem; border-radius: var(--radius-sm); font-size:.65rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.songs-table .play-small:hover { background: #cccccc }
.songs-table tbody tr.song-row { cursor:pointer; }
.songs-table tbody tr.song-row:active { transform:scale(.995); }
.play-small svg { display:inline-block; vertical-align:middle; margin-right:4px; }
.scroll-x { overflow-x:auto; }
@media (max-width: 640px) { .songs-table th, .songs-table td { padding:.65rem .7rem; } }

/* Tabs */
.tabs { display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; justify-content:center; }
.tab-btn { background: var(--bg-card); border:1px solid #2c3237; color: var(--text-secondary); padding:.55rem .9rem; border-radius: var(--radius-md); font-size:.8rem; font-weight:600; cursor:pointer; transition: var(--transition); }
.tab-btn.active, .tab-btn:hover { color:#fff; border-color: var(--accent); background: var(--accent); }
.tab-panel { display:none; animation: fadeIn .3s ease; white-space:pre-wrap; line-height:1.55; font-size:.95rem; }
.tab-panel.active { display:block; }

@keyframes fadeIn { from { opacity:0; transform:translateY(6px);} to {opacity:1; transform:translateY(0);} }
@keyframes gradientShift { 0% { filter:hue-rotate(0deg); } 100% { filter:hue-rotate(360deg); } }

/* Audio Player Wrapper */
.player-wrap { background: var(--bg-card); padding:1rem; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
/* Modern Audio Player */
.modern-player { background: linear-gradient(135deg, rgba(29,185,84,0.15), rgba(147,51,234,0.15)); border:1px solid #2d3338; border-radius: var(--radius-lg); padding:1.25rem 1.4rem; box-shadow:0 12px 28px -8px rgba(0,0,0,.55); backdrop-filter: blur(6px); position:relative; overflow:hidden; }
.modern-player:before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.04), transparent 60%); pointer-events:none; }
.modern-player .player-controls { display:flex; align-items:center; gap:1rem; }
.modern-player .player-btn { width:58px; height:58px; border-radius:50%; border:none; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; cursor:pointer; box-shadow:0 6px 18px -6px rgba(0,0,0,.6); transition: var(--transition); position:relative; }
.modern-player .player-btn:hover { background:var(--accent-hover); transform: translateY(-2px); }
.modern-player .player-btn:active { transform:scale(.92); }
.modern-player .player-btn svg { width:28px; height:28px; }
.modern-player .track-info { flex:1; display:flex; align-items:center; justify-content:space-between; }
.song-title-display { font-size:1.05rem; font-weight:600; letter-spacing:.6px; margin:0; }
.modern-player .equalizer { display:inline-flex; gap:3px; height:20px; }
.modern-player .equalizer span { width:3px; background:var(--accent); display:block; border-radius:2px; animation: eqPulse 1.2s ease-in-out infinite; transform-origin:bottom; }
.modern-player .equalizer span:nth-child(2){ animation-delay:.15s; }
.modern-player .equalizer span:nth-child(3){ animation-delay:.3s; }
.modern-player .equalizer span:nth-child(4){ animation-delay:.45s; }
.modern-player.paused .equalizer span { animation-play-state:paused; opacity:.4; }
@keyframes eqPulse { 0%,100% { transform:scaleY(.3);} 50% { transform:scaleY(1);} }
.progress-wrap { display:flex; align-items:center; gap:.65rem; margin-top:.9rem; }
#seekBar { flex:1; appearance:none; height:6px; border-radius:3px; background:#2d3338; outline:none; cursor:pointer; }
#seekBar::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(29,185,84,0.25); border:none; transition: var(--transition); }
#seekBar::-webkit-slider-thumb:hover { background:var(--accent-hover); }
#volumeBar { width:110px; appearance:none; height:6px; border-radius:3px; background:#2d3338; outline:none; cursor:pointer; }
#volumeBar::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px var(--accent); border:none; }
.volume-wrap svg { width:18px; height:18px; color: var(--text-secondary); }
.time-label { font-size:.7rem; letter-spacing:.5px; font-weight:600; color: var(--text-secondary); min-width:40px; text-align:center; }

/* Lyrics / Chords Panels Centering */
.content-center { max-width:860px; margin:0 auto; }
.lyric-controls button { font-size:.7rem; letter-spacing:.5px; }
.text-panel { 
  background: #fff; 
  padding: 1rem 1.8rem; 
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-soft); 
  position:relative;
}
.text-panel pre { 
  font-family: Arial; 
  font-size: var(--lyric-font, 1rem); 
  line-height: 2; 
  color: #000;
  margin: 0;
  position: relative;
  white-space: pre-wrap;
  tab-size: 4;
}
.text-panel .resize-indicator { 
  position:absolute; 
  top:10px; 
  right:14px; 
  font-size:.65rem; 
  color: #999;
  background: rgba(255,255,255,0.9);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Chord letters (A-G) in blue */
#chordsPanel pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Skeletons */
.skeleton { background: linear-gradient(90deg,#1e2226 25%,#262c31 50%,#1e2226 75%); background-size:200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { from { background-position:200% 0;} to { background-position:-200% 0;} }
.skeleton.text { height:14px; width:100%; margin-bottom:6px; }
.skeleton.card { height:120px; }

/* Google Translate — hide top banner */
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0 !important; }

/* Forms */
.form-control, .form-select { background: var(--bg-card); border:1px solid #2c3237; color: var(--text-primary); }
.form-control:focus { background: var(--bg-card); color: var(--text-primary); border-color: var(--accent); box-shadow:0 0 0 3px rgba(29,185,84,.25); }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { filter: brightness(1.1); }

.table-dark { --bs-table-bg: var(--bg-card); --bs-table-striped-bg:#20262b; }

/* Responsive Helpers */
@media (min-width: 768px) {
  .song-title { font-size:1.05rem; }
  .player-wrap { padding:1.25rem 1.5rem; }
}

/* Scrollbar */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background: var(--bg-darker); }
::-webkit-scrollbar-thumb { background:#2a2f33; border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background:#383f44; }

/* Utility */
.fade { transition: opacity var(--transition); }

.logo-text { font-weight:700; font-size:1.05rem; letter-spacing:1px; }



/* Animated Accent Pulse for interactive elements */
.accent-pulse { position:relative; }
.accent-pulse:after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 var(--accent); opacity:.5; animation: pulseAccent 3s ease-in-out infinite; }
@keyframes pulseAccent { 0% { box-shadow:0 0 0 0 var(--accent); opacity:.6; } 70% { box-shadow:0 0 0 12px rgba(29,185,84,0); opacity:0; } 100% { box-shadow:0 0 0 0 rgba(29,185,84,0); opacity:0; } }

/* Theme Rotator Indicator */
.theme-indicator { width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(255,255,255,0.06); transition: var(--transition);display:none; }

/* Sticky Bottom Navigation */
/* Corner Navigation Buttons */
.corner-nav { position:fixed; bottom:16px; width:46px; height:46px; border-radius:50%; background:rgba(36,42,48,0.96); border:1px solid #3a4248; color:#e9eef3; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:120; backdrop-filter:blur(10px); transition: var(--transition); box-shadow:0 14px 28px -10px rgba(0,0,0,.7); }
.corner-nav.left { left:16px; }
.corner-nav.right { right:16px; }
.corner-nav:hover { color:#fff; border-color: var(--accent); box-shadow:0 14px 30px -8px rgba(29,185,84,.35); }
.corner-nav svg { width:22px; height:22px; }

/* Mini Player Floating Icon */
.mini-player-btn { position:fixed; bottom:76px; right:16px; width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff; border:none; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px -6px rgba(0,0,0,.6); cursor:pointer; z-index:110; transition: var(--transition); }
.mini-player-btn:hover { background: var(--accent-hover); transform:translateY(-3px); }
.mini-player-btn svg { width:26px; height:26px; }
.mini-player-btn.paused { background:#2d3338; color: var(--text-secondary); }
.mini-player-btn.paused:hover { background:#3a4248; }

.empty-state { text-align:center; padding:2rem 1rem; color: var(--text-secondary); }

.max-w-xl { max-width: 860px; }
.skiptranslate{
  display:none !important;
}