/* ════════════════════════════════════════════════════════════════════════════
   AiMuse - Theme Override Stylesheet
   /client/css/aimuse.css
   Created: 2026-02-22 | Last Edit: 2026-02-22

   Applied only when body has class "platform-aimuse".
   Overrides Analog's purple theme with AiMuse's electric cyan/neon theme.
   ════════════════════════════════════════════════════════════════════════════ */

/* ----------------------------------------------------------------------------
   AiMuse Color Palette Override
---------------------------------------------------------------------------- */
body.platform-aimuse {
    --accent-primary: #00d4ff;       /* Electric Cyan */
    --accent-secondary: #ff006e;     /* Hot Pink accent */
    --accent-primary-rgb: 0, 212, 255;
    
    --bg-primary: #050510;           /* Deeper dark, slightly blue */
    --bg-secondary: #0a0a1a;
    --bg-card: #0f0f22;
    --bg-elevated: #16163a;
    
    --border-color: rgba(0, 212, 255, 0.08);
    --border-light: rgba(0, 212, 255, 0.15);
    
    --glass-bg: rgba(5, 5, 16, 0.85);
    --glass-border: rgba(0, 212, 255, 0.08);
}

/* ----------------------------------------------------------------------------
   Header & Navigation
---------------------------------------------------------------------------- */
body.platform-aimuse .app-header {
    background: rgba(5, 5, 16, 0.92);
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
}

body.platform-aimuse .brand-logo {
    background: linear-gradient(135deg, #00d4ff, #00ff88);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

body.platform-aimuse .brand-logo-playing {
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
    animation: aimuse-pulse 2s ease-in-out infinite;
}

@keyframes aimuse-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

body.platform-aimuse .brand-logo-icon {
    filter: hue-rotate(200deg) saturate(1.5);
}

body.platform-aimuse .bottom-nav {
    background: rgba(5, 5, 16, 0.95);
    border-top: 1px solid rgba(0, 212, 255, 0.1);
}

body.platform-aimuse .nav-item.active {
    color: #00d4ff;
}

body.platform-aimuse .nav-item.active .nav-icon {
    color: #00d4ff;
}

/* ----------------------------------------------------------------------------
   Buttons & Interactive
---------------------------------------------------------------------------- */
body.platform-aimuse .btn-primary {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    color: #000;
    font-weight: 600;
}

body.platform-aimuse .btn-primary:hover {
    background: linear-gradient(135deg, #33ddff, #00bbee);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

body.platform-aimuse .btn-secondary {
    border-color: rgba(0, 212, 255, 0.3);
    color: #00d4ff;
}

body.platform-aimuse .btn-secondary:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.5);
}

/* ----------------------------------------------------------------------------
   Cards & Content
---------------------------------------------------------------------------- */
body.platform-aimuse .card,
body.platform-aimuse .song-card,
body.platform-aimuse .artist-card {
    background: var(--bg-card);
    border: 1px solid rgba(0, 212, 255, 0.06);
}

body.platform-aimuse .card:hover,
body.platform-aimuse .song-card:hover,
body.platform-aimuse .artist-card:hover {
    border-color: rgba(0, 212, 255, 0.15);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.05);
}

body.platform-aimuse .section-title {
    color: #00d4ff;
}

/* ----------------------------------------------------------------------------
   Audio Player
---------------------------------------------------------------------------- */
body.platform-aimuse .audio-player {
    background: rgba(5, 5, 16, 0.95);
    border-top: 1px solid rgba(0, 212, 255, 0.1);
}

body.platform-aimuse .progress-fill {
    background: linear-gradient(90deg, #00d4ff, #00ff88);
}

body.platform-aimuse .control-btn-main {
    color: #00d4ff;
}

body.platform-aimuse .control-btn-tip {
    color: #00ff88;
}

/* Scrub bar / range input */
body.platform-aimuse input[type="range"]::-webkit-slider-thumb {
    background: #00d4ff;
}

/* ----------------------------------------------------------------------------
   Tags, Badges, Indicators
---------------------------------------------------------------------------- */
body.platform-aimuse .badge,
body.platform-aimuse .tag {
    background: rgba(0, 212, 255, 0.12);
    color: #00d4ff;
    border: 1px solid rgba(0, 212, 255, 0.2);
}

body.platform-aimuse .verified-badge {
    color: #00d4ff;
}

/* ----------------------------------------------------------------------------
   Links & Accents
---------------------------------------------------------------------------- */
body.platform-aimuse a:not(.btn) {
    color: #00d4ff;
}

body.platform-aimuse ::selection {
    background: rgba(0, 212, 255, 0.3);
}

/* ----------------------------------------------------------------------------
   Spinner / Loading
---------------------------------------------------------------------------- */
body.platform-aimuse .spinner {
    border-top-color: #00d4ff;
}

/* ----------------------------------------------------------------------------
   Toast Notifications
---------------------------------------------------------------------------- */
body.platform-aimuse .toast-success {
    border-left-color: #00d4ff;
}

/* ----------------------------------------------------------------------------
   Scrollbar
---------------------------------------------------------------------------- */
body.platform-aimuse ::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.2);
}

body.platform-aimuse ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.4);
}

/* ----------------------------------------------------------------------------
   Explainer Overlay (What is AiMuse?)
---------------------------------------------------------------------------- */
body.platform-aimuse .analog-explainer-card {
    background: rgba(10, 10, 30, 0.97);
    border: 1px solid rgba(0, 212, 255, 0.15);
}

body.platform-aimuse .analog-explainer-logo {
    background: linear-gradient(135deg, #00d4ff, #00ff88);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.platform-aimuse .analog-explainer-stat-number {
    color: #00d4ff;
}

/* ----------------------------------------------------------------------------
   Form Inputs
---------------------------------------------------------------------------- */
body.platform-aimuse input:focus,
body.platform-aimuse textarea:focus,
body.platform-aimuse select:focus {
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.1);
}

/* ----------------------------------------------------------------------------
   Credit Module / Tip
---------------------------------------------------------------------------- */
body.platform-aimuse .credit-btn,
body.platform-aimuse .tip-btn-primary {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    color: #000;
}