/* ═══════════════════════════════════════════════════════════════════════════
   BlazeXM 360XL — App Stylesheet
   Design: Deep dark navy · Neon cyan accent · Inter/Roboto · Glassmorphism
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --bg:         #070d17;
    --surface:    rgba(255,255,255,0.04);
    --surface-2:  rgba(255,255,255,0.07);
    --border:     rgba(255,255,255,0.08);
    --border-2:   rgba(255,255,255,0.14);
    --accent:     #00c8ff;
    --accent-dim: rgba(0,200,255,0.15);
    --accent-glow:rgba(0,200,255,0.08);
    --text:       #eef4ff;
    --subtext:    rgba(238,244,255,0.45);
    --sidebar-w:  72px;
    --neon:       #00c8ff;
}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes viewSlideUp    { from { opacity:0; transform:translateY(24px) scale(0.987); } to { opacity:1; transform:none; } }
@keyframes viewSlideDown  { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }
@keyframes viewSlideRight { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:none; } }
@keyframes viewFadeIn     { from { opacity:0; transform:scale(0.992); } to { opacity:1; transform:none; } }
@keyframes trackFadeSlide { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes sheetSlideUp   { from { transform:translateY(100%); } to { transform:translateY(0); } }
@keyframes livePulse      { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.72); } }
@keyframes npPulse        { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
@keyframes floatUp        { 0% { transform:translateY(0) scale(0.9); opacity:1; } 70% { opacity:.9; } 100% { transform:translateY(-120vh) scale(1.2); opacity:0; } }

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
img { max-width:100%; height:auto; display:block; }
html, body {
    height:100dvh; margin:0;
    font-family:'Inter','Roboto',system-ui,sans-serif;
    background:var(--bg); color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
body {
    background-repeat:no-repeat; background-position:center; background-size:cover;
    background-attachment:fixed; display:flex; flex-direction:column; overflow:hidden;
}
input { font-family:inherit; }

/* ── Overlay (background photo dim) ─────────────────────────────────────── */
#overlay {
    content:""; position:fixed; inset:0;
    background:rgba(0,0,0,0.72); z-index:0; pointer-events:none;
}