/* ==========================================================================
 Aura Music - Base Styles & Design System
 ========================================================================== */
:root {
 --bg-base: #0a0a0f;
 --bg-surface: #12121b;
 --bg-card: #181824;
 --bg-card-hover: #202030;
 --accent: #1db954;
 --accent-glow: rgba(29, 185, 84, 0.4);
 --heart: #ff3b5c;
 --heart-glow: rgba(255, 59, 92, 0.35);
 --text-primary: #ffffff;
 --text-secondary: #9696ab;
 --text-muted: #5e5e73;
 --border: rgba(255, 255, 255, 0.08);
 --nav-height: 64px;
 --mini-player-height: 64px;
 --safe-bottom: env(safe-area-inset-bottom, 0px);
 --safe-top: env(safe-area-inset-top, 0px);
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
 -webkit-tap-highlight-color: transparent;
 user-select: none;
}

body {
 background: #050508;
 color: var(--text-primary);
 min-height: 100vh;
 display: flex;
 justify-content: center;
 overflow: hidden;
}

/* Mobile Shell Frame */
.app-shell {
 width: 100%;
 max-width: 480px;
 height: 100vh;
 height: 100dvh;
 background: var(--bg-base);
 display: flex;
 flex-direction: column;
 position: relative;
 overflow: hidden;
 box-shadow: 0 0 60px rgba(0, 0, 0, 0.85);
}

@media (min-width: 768px) {
 .app-shell {
 border-left: 1px solid var(--border);
 border-right: 1px solid var(--border);
 }
}

/* Toast Notification */
.toast {
 position: absolute;
 top: 76px;
 left: 50%;
 transform: translateX(-50%) translateY(-20px);
 background: rgba(24, 24, 36, 0.95);
 border: 1px solid var(--border);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 padding: 10px 18px;
 border-radius: 999px;
 font-size: 13px;
 font-weight: 600;
 color: var(--text-primary);
 display: flex;
 align-items: center;
 gap: 8px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
 z-index: 100;
 opacity: 0;
 pointer-events: none;
 transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show {
 opacity: 1;
 transform: translateX(-50%) translateY(0);
}

.toast i {
 color: var(--accent);
}

/* Offline Badge */
.offline-badge {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 font-size: 10px;
 font-weight: 700;
 color: var(--accent);
 background: rgba(29, 185, 84, 0.12);
 border: 1px solid rgba(29, 185, 84, 0.25);
 padding: 2px 7px;
 border-radius: 6px;
 letter-spacing: 0.3px;
 text-transform: uppercase;
}