/**
 * BJ Musify - Main Stylesheet
 * Architecture: 
 * 1. Theme Variables
 * 2. Base & Resets
 * 3. Backgrounds & Orbs
 * 4. Splash Screen
 * 5. Layout (Nav, Footer)
 * 6. UI Components (Cards, Buttons, Inputs)
 * 7. Player (Mini, Full, Lyrics, EQ)
 * 8. Mascot
 * 9. Tailwind Utilities (Pre-compiled)
 */

/* ==========================================
   1. THEME VARIABLES
   ========================================== */
:root {
    /* Colors */
    --bg:  #13151a; 
    --bg1: #1a1d24; 
    --bg2: #1e222b; 
    --bg3: #252a35; 
    --bg4: #2d3340;
    
    /* Borders */
    --bd:  rgba(255, 255, 255, 0.06); 
    --bd2: rgba(255, 255, 255, 0.1); 
    --bd3: rgba(255, 255, 255, 0.16);
    
    /* Accents (Orange, Blue, Cyan, Green, Red) */
    --or:   #ff5d01; 
    --or2:  #ff7c33; 
    --or-d: rgba(255, 93, 1, 0.1); 
    --or-g: rgba(255, 93, 1, 0.3);
    --bl:   #3245ff; 
    --bl2:  #5a72ff; 
    --bl-d: rgba(50, 69, 255, 0.12);
    --cy:   #00d4e0; 
    --cy2:  #4de8f0; 
    --cy-d: rgba(0, 212, 224, 0.1);
    --gn:   #23d18b; 
    --gn2:  #4ade9e; 
    --gn-d: rgba(35, 209, 139, 0.1);
    --rs:   #f25f5c; 
    --rs-d: rgba(242, 95, 92, 0.1);
    
    /* Typography */
    --tx:  #f0f2f5; 
    --tx2: #9099a8; 
    --tx3: #555f70; 
    --tx4: #3a4252;
    --fd: 'Cabinet Grotesk', sans-serif;
    --fb: 'Instrument Sans', -apple-system, sans-serif;
    --fm: 'JetBrains Mono', 'Courier New', monospace;
    
    /* Radii */
    --r:   8px; 
    --rl:  12px; 
    --rxl: 18px;
    
    /* Mascot specific */
    --mascot-text: #f0f2f5;
    --mascot-bg: #13151a; 
    --mascot-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Standardized mappings */
    --bg-color: var(--bg);
    --text-primary: var(--tx);
    --text-secondary: var(--tx2);
    --border-color: var(--bd2);
}

/* ==========================================
   2. BASE & RESETS
   ========================================== */
* { 
    -webkit-tap-highlight-color: transparent; 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

html, body { 
    font-family: var(--fb); 
    background: var(--bg); 
    color: var(--tx); 
    transition: background 0.3s ease, color 0.3s ease; 
    overflow: hidden; 
    width: 100%; 
}

/* Base Texture overlay */
body::before {
    content: ''; 
    position: fixed; 
    inset: 0; 
    z-index: 0; 
    pointer-events: none; 
    opacity: 0.025;
    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");
    background-size: 200px 200px;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--tx3); }
.hide-scrollbar::-webkit-scrollbar { display: none; }

.pb-safe { padding-bottom: env(safe-area-inset-bottom, 20px); }

/* Dynamic Font Classes */
.font-family-\[var\(--fd\)\] { font-family: var(--fd) !important; }
.font-family-\[var\(--fb\)\] { font-family: var(--fb) !important; }
.font-family-\[var\(--fm\)\] { font-family: var(--fm) !important; }
.border-3 { border-width: 3px !important; }

/* ==========================================
   3. BACKGROUNDS & ORBS
   ========================================== */
.bgl {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden; 
    transition: background 0.3s ease;
}
.bg-orb1 {
    position: absolute; width: 800px; height: 500px; top: -200px; left: -300px;
    background: radial-gradient(ellipse, rgba(255, 93, 1, 0.06) 0%, transparent 70%);
    animation: orb1 20s ease-in-out infinite alternate;
}
.bg-orb2 {
    position: absolute; width: 600px; height: 600px; bottom: -200px; right: -200px;
    background: radial-gradient(ellipse, rgba(50, 69, 255, 0.07) 0%, transparent 70%);
    animation: orb2 25s ease-in-out infinite alternate;
}
.bg-orb3 {
    position: absolute; width: 400px; height: 400px; top: 40%; left: 40%;
    background: radial-gradient(ellipse, rgba(0, 212, 224, 0.04) 0%, transparent 70%);
    animation: orb3 18s ease-in-out infinite alternate;
}
.bg-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(var(--bd) 1px, transparent 1px), linear-gradient(90deg, var(--bd) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent);
}

@keyframes orb1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(80px, 40px) scale(1.1); } }
@keyframes orb2 { 0% { transform: translate(0, 0); } 100% { transform: translate(-60px, -40px); } }
@keyframes orb3 { 0% { transform: translate(-50%, -50%); } }

/* ==========================================
   4. SPLASH SCREEN
   ========================================== */
#splash-screen {
    position: fixed; inset: 0; z-index: 9999; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    background: var(--bg); transition: opacity .3s ease, visibility .3s ease;
}
#splash-screen.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-rings { position: relative; width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; }
.splash-rings span { 
    position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--or-g); 
    animation: splashWave 2.8s cubic-bezier(.4, 0, .2, 1) infinite; 
}
.splash-rings span:nth-child(2) { animation-delay: .7s; }
.splash-rings span:nth-child(3) { animation-delay: 1.4s; }
.splash-rings span:nth-child(4) { animation-delay: 2.1s; }
@keyframes splashWave { 0% { transform: scale(.3); opacity: 0; } 15% { opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }

.splash-disc {
    position: absolute; width: 200px; height: 200px; border-radius: 50%;
    background: repeating-radial-gradient(circle, var(--or-d) 0px, var(--or-d) 1px, transparent 2px, transparent 7px);
    box-shadow: 0 0 60px var(--or-d), inset 0 0 40px rgba(0,0,0,0.7);
    animation: splashSpin 7s linear infinite;
}
.splash-disc::before {
    content: ''; position: absolute; inset: -10px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, var(--or-g), var(--or), var(--or-g), transparent);
    animation: splashShimmer 3s linear infinite; filter: blur(15px); z-index: -1;
}
@keyframes splashSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes splashShimmer { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.splash-logo-wrap {
    position: relative; width: 170px; height: 170px; border-radius: 50%;
    background: var(--bg1); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 2px solid var(--or-g); display: flex; align-items: center; justify-content: center; overflow: hidden;
    animation: splashPulse 2.4s ease-in-out infinite; z-index: 2;
    font-family: var(--fd); font-size: 3rem; font-weight: 900; color: var(--or);
}
@keyframes splashPulse { 0%, 100% { box-shadow: 0 0 30px var(--or-d), inset 0 1px 0 var(--or-d); } 50% { box-shadow: 0 0 60px var(--or-g), inset 0 1px 0 var(--or-g); } }

.splash-title { margin-top: 30px; font-family: var(--fd); font-weight: 900; font-size: 1.5rem; letter-spacing: .02em; }
.splash-sub { margin-top: 6px; font-family: var(--fm); font-size: .7rem; color: var(--tx3); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.splash-bar { margin-top: 24px; width: 120px; height: 2px; border-radius: 2px; background: var(--or-d); overflow: hidden; }
.splash-bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--or), transparent); animation: splashBar 1.4s ease-in-out infinite; }
@keyframes splashBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* ==========================================
   5. LAYOUT (Nav & Footer)
   ========================================== */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(19, 21, 26, 0.85); backdrop-filter: blur(24px) saturate(140%); border-bottom: 1px solid var(--bd); }
.nav-in { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; height: 65px; gap: 2rem; }
.nav-logo { font-family: var(--fd); font-size: 1.1rem; font-weight: 800; color: var(--tx); text-decoration: none; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; margin-right: auto; }
.nav-mark { width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, var(--bl), var(--cy)); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 900; color: #fff; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; }
.nav-links button { font-family: var(--fb); font-size: 0.82rem; font-weight: 500; color: var(--tx3); text-decoration: none; padding: 0.4rem 0.8rem; border-radius: var(--r); transition: all 0.15s; background: transparent; border: 1px solid transparent; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4rem; }
.nav-links button:hover { color: var(--tx); background: var(--bg2); }

.hmbg { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 0.35rem; flex-shrink: 0; }
.hmbg span { display: block; width: 16px; height: 1.5px; background: var(--tx2); border-radius: 2px; transition: all 0.3s; }
.hmbg.on span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hmbg.on span:nth-child(2) { opacity: 0; }
.hmbg.on span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nav-dr { display: none; flex-direction: column; padding: 0.5rem 1.5rem 0.75rem; border-top: 1px solid var(--bd); background: rgba(19, 21, 26, 0.97); backdrop-filter: blur(24px); position: absolute; width: 100%; top: 65px; left: 0; z-index: 99; }
.nav-dr.on { display: flex; }
.nav-dr button { font-family: var(--fb); text-align: left; font-size: 0.875rem; color: var(--tx2); padding: 0.8rem 0; border-bottom: 1px solid var(--bd); transition: color 0.15s; background: none; border-top: none; border-left: none; border-right: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }
.nav-dr button:hover { color: var(--tx); }
@media(max-width: 900px) { .hmbg { display: flex; } .nav-links { display: none !important; } }

.footer { border-top: 1px solid var(--bd); padding: 2.5rem 0 2rem; position: relative; z-index: 1; background: var(--bg); margin-top: auto; }
.footer-in { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
.footer-brand { display: flex; align-items: center; gap: 0.5rem; }
.footer-mark { width: 24px; height: 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; }
.footer-nm { font-family: var(--fd); font-size: 0.95rem; font-weight: 800; color: var(--tx); letter-spacing: -0.02em; }
.footer-sub { font-size: 0.75rem; color: var(--tx3); margin-top: 0.2rem; }
.footer-cp { font-size: 0.7rem; color: var(--tx4); margin-top: 0.25rem; }
.footer-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.footer-nav a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 0.9rem; color: var(--tx3); text-decoration: none; border-radius: var(--r); transition: all 0.15s; background: var(--bg1); border: 1px solid var(--bd2); }
.footer-nav a:hover { color: var(--or); border-color: var(--or-d); background: var(--or-d); }

/* ==========================================
   6. UI COMPONENTS
   ========================================== */
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 0.45rem; font-family: var(--fd); font-size: 0.85rem; font-weight: 700; padding: 0.7rem 1.4rem; border-radius: var(--r); border: none; cursor: pointer; transition: all 0.2s; letter-spacing: -0.01em; white-space: nowrap; }
.btn-or { background: var(--or); color: #fff; }
.btn-or:hover { background: var(--or2); transform: translateY(-2px); box-shadow: 0 6px 24px var(--or-g); }
.btn-ghost { background: transparent; color: var(--tx); border: 1px solid var(--bd2); }
.btn-ghost:hover { color: var(--tx); border-color: var(--bd3); background: var(--bg2); }

.glass-panel { background: var(--bg1); border: 1px solid var(--bd2); border-radius: var(--rxl); padding: 1.5rem; position: relative; overflow: hidden; }
.cb { background: var(--bg1); padding: 1rem; position: relative; overflow: hidden; transition: background 0.25s, border-color 0.25s, transform 0.2s; border: 1px solid var(--bd2); border-radius: var(--rxl); display: flex; flex-direction: column; height: 100%; }
/* file-card: horizontal row layout override for .cb */
.file-card { flex-direction: row !important; height: auto !important; align-items: center; }

/* Group hover utility for scroll-strip download button */
.group:hover .group-hover\:opacity-100 { opacity: 1 !important; }
.cb:hover { background: var(--bg2); border-color: var(--bd3); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.cb-accent { position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0.5; transition: opacity 0.3s; }
.cb:hover .cb-accent { opacity: 1; }
.cba-or { background: linear-gradient(90deg, transparent, var(--or), transparent); }
.cba-cy { background: linear-gradient(90deg, transparent, var(--cy), transparent); }

.neo-input { width: 100%; background: var(--bg2); border: 1px solid var(--bd2); color: var(--tx); border-radius: var(--r); padding: 0.8rem 1rem; font-family: var(--fb); font-size: 0.85rem; outline: none; transition: all 0.2s; }
.neo-input:focus { border-color: var(--or); background: var(--bg3); box-shadow: 0 0 0 1px rgba(255, 93, 1, 0.2); }

.filter-tab { background: transparent; border: 1px solid var(--bd2); color: var(--tx2); }
.filter-tab.active { background: var(--or) !important; color: white !important; box-shadow: 0 4px 20px var(--or-g); border: none; }

.chrome-text { font-family: var(--fd); background: linear-gradient(90deg, var(--or), var(--rs)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ==========================================
   7. PLAYER & LYRICS
   ========================================== */
.artist-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bd2); box-shadow: 0 10px 30px rgba(0,0,0,0.5); background: var(--bg1); }

.lyric-line { transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: left center; border-left: 3px solid transparent; border-radius: 4px; font-family: var(--fb); }
.lyric-line.active-lyric { color: var(--or) !important; font-size: 1.15rem !important; font-weight: 800 !important; opacity: 1 !important; border-left-color: var(--or) !important; padding-left: 12px !important; text-shadow: 0 0 15px var(--or-g); background: var(--or-d); }

.eq-slider { -webkit-appearance: none; width: 8px; height: 150px; background: var(--bg2); box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5); border-radius: 4px; outline: none; writing-mode: bt-lr; -webkit-appearance: slider-vertical; border: 1px solid var(--bd2); }
.eq-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--or); box-shadow: 0 0 10px var(--or-g); border: 2px solid var(--bg); cursor: pointer; transition: transform 0.1s; }
.eq-slider::-webkit-slider-thumb:active { transform: scale(1.15); }
.eq-bar { width: 5px; height: 10px; background: linear-gradient(to top, var(--or2), var(--or)); border-radius: 2px; transition: height 0.1s ease-out; }

/* Modals & Overlays */
.ad-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.75); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; opacity: 1; transition: opacity .35s cubic-bezier(.4, 0, .2, 1); }
.ad-box { background: var(--bg1); border: 1px solid var(--bd2); border-radius: var(--rxl) var(--rxl) 0 0; width: 100%; max-width: 500px; max-height: 85vh; overflow: hidden; position: relative; box-shadow: 0 -10px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; animation: slideUp 0.3s ease-out forwards; }
.modal-header { padding: 1.5rem; border-bottom: 1px solid var(--bd); background: var(--bg2); display: flex; justify-content: space-between; align-items: center; }
.modal-body { padding: 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.ad-close { width: 32px; height: 32px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--bd2); color: var(--tx3); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: all 0.15s; }
.ad-close:hover { color: var(--rs); border-color: var(--rs); background: var(--rs-d); }

/* ==========================================
   8. MASCOT
   ========================================== */
#mascot-container { position: fixed; bottom: calc(65px + env(safe-area-inset-bottom) - 15px); right: 30px; width: 180px; z-index: 9999; pointer-events: none; color: var(--mascot-text); transition: color var(--mascot-transition), right 0.4s ease, width 0.4s ease; }
#mascot-container .stickman-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0px 15px 25px rgba(0,0,0,0.5)); }
@media (max-width: 1400px) { #mascot-container { right: 30px; } }
@media (max-width: 768px) { #mascot-container { width: 110px; right: 10px !important; bottom: calc(65px + env(safe-area-inset-bottom) - 10px) !important; opacity: 0.85; transition: none !important; } }

/* ==========================================
   9. TAILWIND CSS UTILITIES (Minified Output)
   ========================================== */
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:"Instrument Sans", -apple-system, sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"JetBrains Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0px}.inset-y-0{top:0px;bottom:0px}.-bottom-1{bottom:-0.25rem}.bottom-0{bottom:0px}.left-0{left:0px}.left-1\/2{left:50%}.left-3{left:0.75rem}.right-0{right:0px}.right-1{right:0.25rem}.right-2{right:0.5rem}.right-3{right:0.75rem}.top-0{top:0px}.top-1\/2{top:50%}.z-0{z-index:0}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.z-\[100\]{z-index:100}.z-\[150\]{z-index:150}.z-\[200\]{z-index:200}.z-20{z-index:20}.mx-\[-1rem\]{margin-left:-1rem;margin-right:-1rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:0.25rem}.mb-10{margin-bottom:2.5rem}.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:0.25rem}.mr-1{margin-right:0.25rem}.mr-2{margin-right:0.5rem}.mt-1{margin-top:0.25rem}.mt-12{margin-top:3rem}.mt-2{margin-top:0.5rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.h-\[100dvh\]{height:100dvh}.h-1\.5{height:0.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:0.5rem}.h-2\.5{height:0.625rem}.h-20{height:5rem}.h-3{height:0.75rem}.h-3\.5{height:0.875rem}.h-40{height:10rem}.h-8{height:2rem}.h-\[3px\]{height:3px}.h-\[65px\]{height:65px}.h-full{height:100%}.max-h-72{max-height:18rem}.min-h-full{min-height:100%}.w-full{width:100%}.w-1\.5{width:0.375rem}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:0.5rem}.w-20{width:5rem}.w-3{width:0.75rem}.w-3\/4{width:75%}.w-40{width:10rem}.w-6{width:1.5rem}.w-8{width:2rem}.max-w-\[200px\]{max-width:200px}.max-w-\[320px\]{max-width:320px}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-1{gap:0.25rem}.gap-1\.5{gap:0.375rem}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-8 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.\!rounded-2xl{border-radius:1rem !important}.\!rounded-xl{border-radius:0.75rem !important}.rounded{border-radius:0.25rem}.rounded-2xl{border-radius:1rem}.rounded-\[2rem\]{border-radius:2rem}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:0.75rem}.rounded-l-full{border-top-left-radius:9999px;border-bottom-left-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-\[var\(--bd\)\]{border-color:var(--bd)}.border-\[var\(--bd2\)\]{border-color:var(--bd2)}.border-\[var\(--or\)\]{border-color:var(--or)}.border-t-transparent{border-top-color:transparent}.bg-transparent{background-color:transparent}.bg-\[var\(--bd2\)\]{background-color:var(--bd2)}.bg-\[var\(--bg\)\]{background-color:var(--bg)}.bg-\[var\(--bg1\)\]{background-color:var(--bg1)}.bg-\[var\(--bg2\)\]{background-color:var(--bg2)}.bg-\[var\(--bg3\)\]{background-color:var(--bg3)}.bg-\[var\(--gn\)\]{background-color:var(--gn)}.bg-\[var\(--or\)\]{background-color:var(--or)}.bg-black\/40{background-color:rgb(0 0 0 / 0.4)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-\[var\(--bl\)\]{--tw-gradient-from:var(--bl) var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[var\(--or2\)\]{--tw-gradient-from:var(--or2) var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-black\/60{--tw-gradient-from:rgb(0 0 0 / 0.6) var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-\[var\(--bg\)\]{--tw-gradient-to:rgb(255 255 255 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--bg) var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-\[var\(--bg\)\]{--tw-gradient-to:var(--bg) var(--tw-gradient-to-position)}.to-\[var\(--cy\)\]{--tw-gradient-to:var(--cy) var(--tw-gradient-to-position)}.to-\[var\(--or\)\]{--tw-gradient-to:var(--or) var(--tw-gradient-to-position)}.object-cover{object-fit:cover}.\!p-3{padding:0.75rem !important}.\!p-6{padding:1.5rem !important}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.p-4{padding:1rem}.\!px-0{padding-left:0px !important;padding-right:0px !important}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.px-\[1rem\]{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-32{padding-bottom:8rem}.pb-2{padding-bottom:0.5rem}.pb-28{padding-bottom:7rem}.pb-3{padding-bottom:0.75rem}.pb-4{padding-bottom:1rem}.pb-8{padding-bottom:2rem}.pl-12{padding-left:3rem}.pl-4{padding-left:1rem}.pr-24{padding-right:6rem}.pt-10{padding-top:2.5rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:"Instrument Sans", -apple-system, sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-5xl{font-size:3rem;line-height:1}.text-\[0\.55rem\]{font-size:0.55rem}.text-\[10px\]{font-size:10px}.text-\[15px\]{font-size:15px}.text-\[22px\]{font-size:22px}.text-\[9px\]{font-size:9px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.leading-none{line-height:1}.tracking-tight{letter-spacing:-0.025em}.tracking-wide{letter-spacing:0.025em}.tracking-wider{letter-spacing:0.05em}.tracking-widest{letter-spacing:0.1em}.text-\[var\(--tx\)\]{color:var(--tx)}.text-\[var\(--or\)\]{color:var(--or)}.text-\[var\(--or2\)\]{color:var(--or2)}.text-\[var\(--tx2\)\]{color:var(--tx2)}.text-\[var\(--tx3\)\]{color:var(--tx3)}.text-\[var\(--tx4\)\]{color:var(--tx4)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.opacity-0{opacity:0}.opacity-20{opacity:0.2}.opacity-30{opacity:0.3}.shadow-\[0_-10px_30px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{--tw-shadow:0 -10px 30px rgba(0,0,0,0.5);--tw-shadow-colored:0 -10px 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_10px_var\(--or\)\]{--tw-shadow:0 0 10px var(--or);--tw-shadow-colored:0 0 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_30px_var\(--bl-d\)\]{--tw-shadow:0 0 30px var(--bl-d);--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_5px_var\(--gn\)\]{--tw-shadow:0 0 5px var(--gn);--tw-shadow-colored:0 0 5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_10px_30px_var\(--or-g\)\]{--tw-shadow:0 10px 30px var(--or-g);--tw-shadow-colored:0 10px 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_10px_40px_rgba\(0\2c 0\2c 0\2c 0\.7\)\]{--tw-shadow:0 10px 40px rgba(0,0,0,0.7);--tw-shadow-colored:0 10px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_20px_50px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{--tw-shadow:0 20px 50px rgba(0,0,0,0.5);--tw-shadow-colored:0 20px 50px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[var\(--or-g\)\]{--tw-shadow-color:var(--or-g);--tw-shadow:var(--tw-shadow-colored)}.blur-\[100px\]{--tw-blur:blur(100px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.placeholder\:text-\[var\(--tx3\)\]::placeholder{color:var(--tx3)}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-\[var\(--or\)\]:hover{border-color:var(--or)}.hover\:bg-\[var\(--or\)\]:hover{background-color:var(--or)}.hover\:text-\[var\(--or\)\]:hover{color:var(--or)}.hover\:text-\[var\(--rs\)\]:hover{color:var(--rs)}.hover\:text-\[var\(--tx\)\]:hover{color:var(--tx)}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.active\:scale-90:active{--tw-scale-x:.9;--tw-scale-y:.9;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:scale-\[0\.98\]:active{--tw-scale-x:0.98;--tw-scale-y:0.98;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (min-width: 1024px){.lg\:hidden{display:none}}


/* ==========================================
   10. SEEKBAR (Custom styled range)
   ========================================== */
.seekbar-wrap {
    position: relative;
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.seekbar-track {
    position: relative;
    width: 100%;
    height: 5px;
    background: var(--bg3);
    border-radius: 99px;
    overflow: visible;
}
.seekbar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--or2), var(--or));
    border-radius: 99px;
    pointer-events: none;
    transition: width 0.1s linear;
}
.seekbar-thumb {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px var(--or), 0 2px 8px rgba(0,0,0,0.5);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: transform 0.1s, box-shadow 0.1s;
    z-index: 2;
}
.seekbar-wrap:active .seekbar-thumb,
.seekbar-wrap.dragging .seekbar-thumb {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 0 0 5px var(--or-g), 0 2px 12px rgba(0,0,0,0.6);
}
.seekbar-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    margin: 0;
}

/* ==========================================
   11. VOLUME SLIDER
   ========================================== */
.vol-wrap {
    position: relative;
    height: 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.vol-track {
    position: relative;
    width: 100%;
    height: 4px;
    background: var(--bg3);
    border-radius: 99px;
    overflow: visible;
}
.vol-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--or2), var(--or));
    border-radius: 99px;
    pointer-events: none;
}
.vol-thumb {
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px var(--or);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
}
.vol-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    margin: 0;
}

/* ==========================================
   12. MODAL SYSTEM (Bottom Sheets)
   ========================================== */
.bj-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: bj-fade-in 0.2s ease;
}
@keyframes bj-fade-in { from { opacity: 0; } to { opacity: 1; } }

.bj-modal-box {
    width: 100%;
    max-width: 480px;
    background: var(--bg1);
    border: 1px solid var(--bd2);
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    animation: bj-slide-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.bj-modal-tall .bj-modal-body {
    max-height: 65vh;
}
@keyframes bj-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.bj-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--bd);
    background: var(--bg2);
}
.bj-modal-title {
    font-family: var(--fd);
    font-size: 1rem;
    font-weight: 800;
    color: var(--tx);
}
.bj-modal-sub {
    font-family: var(--fm);
    font-size: 0.7rem;
    color: var(--tx3);
    margin-top: 2px;
}
.bj-modal-close {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--bg3);
    border: 1px solid var(--bd2);
    color: var(--tx3);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s;
    flex-shrink: 0;
}
.bj-modal-close:hover { color: var(--rs); border-color: var(--rs); background: var(--rs-d); }
.bj-modal-body {
    padding: 1.25rem;
    overflow-y: auto;
}

/* ==========================================
   13. EQUALIZER MODAL
   ========================================== */
.eq-preset-btn {
    flex-shrink: 0;
    padding: 0.35rem 0.9rem;
    border-radius: 99px;
    border: 1px solid var(--bd2);
    background: var(--bg2);
    color: var(--tx3);
    font-family: var(--fm);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.eq-preset-btn:hover { color: var(--or); border-color: var(--or); }
.eq-preset-btn.active { background: var(--or); color: #fff; border-color: var(--or); }

.eq-sliders-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    gap: 4px;
    padding: 8px 0 4px;
}
.eq-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.eq-band-val {
    font-family: var(--fm);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--or);
    min-height: 1rem;
    line-height: 1;
}
.eq-band-unit {
    font-family: var(--fm);
    font-size: 0.6rem;
    color: var(--tx4);
    margin-top: -4px;
}
.eq-vslider {
    -webkit-appearance: slider-vertical;
    writing-mode: bt-lr;
    appearance: slider-vertical;
    width: 28px;
    height: 130px;
    cursor: pointer;
    background: transparent;
    outline: none;
}
/* Webkit track */
.eq-vslider::-webkit-slider-runnable-track {
    width: 4px;
    background: var(--bg3);
    border-radius: 99px;
}
.eq-vslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--or);
    box-shadow: 0 0 6px var(--or-g);
    border: 2px solid var(--bg);
    cursor: pointer;
    margin-left: -7px;
    transition: transform 0.1s;
}
.eq-vslider::-webkit-slider-thumb:active { transform: scale(1.2); }
/* Firefox track */
.eq-vslider::-moz-range-track {
    width: 4px;
    background: var(--bg3);
    border-radius: 99px;
}
.eq-vslider::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--or);
    border: 2px solid var(--bg);
    cursor: pointer;
}
.eq-band-label {
    font-family: var(--fm);
    font-size: 0.62rem;
    color: var(--tx3);
    text-align: center;
    line-height: 1.3;
}
.eq-band-freq { color: var(--tx4); font-size: 0.58rem; }

/* EQ enable toggle */
.eq-toggle {
    width: 44px; height: 24px;
    border-radius: 99px;
    background: var(--bg3);
    border: 1px solid var(--bd2);
    position: relative;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.eq-toggle.on { background: var(--or); border-color: var(--or); }
.eq-toggle-knob {
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    transition: left 0.2s;
}
.eq-toggle.on .eq-toggle-knob { left: calc(100% - 20px); }

/* ==========================================
   14. SPEED & TIMER CHIPS
   ========================================== */
.speed-chips, .timer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.speed-chip, .timer-chip {
    flex: 1 1 auto;
    min-width: calc(33% - 8px);
    padding: 0.65rem 0.5rem;
    border-radius: 12px;
    border: 1px solid var(--bd2);
    background: var(--bg2);
    color: var(--tx2);
    font-family: var(--fm);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}
.speed-chip:hover, .timer-chip:hover { border-color: var(--or); color: var(--or); }
.speed-chip.active, .timer-chip.active {
    background: var(--or);
    border-color: var(--or);
    color: #fff;
    box-shadow: 0 4px 16px var(--or-g);
}

/* ==========================================
   15. QUEUE LIST
   ========================================== */
.queue-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bd);
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
}
.queue-item:hover { background: var(--bg2); }
.queue-item.playing { background: var(--or-d); border-left: 3px solid var(--or); padding-left: 8px; }
.queue-item-idx {
    font-family: var(--fm);
    font-size: 0.7rem;
    color: var(--tx4);
    width: 20px;
    text-align: right;
    flex-shrink: 0;
}
.queue-item.playing .queue-item-idx { color: var(--or); }