:root {
      --cyan: #00f0ff;
      --pink: #ff2d95;
      --purple: #b44dff;
      --amber: #ffb800;
      --green: #1db954;
      --green2: #1ed760;
      --bg: #07070d;
      --bg-card: #0f0f1a;
      --bg-card2: #141425;
      --bg-surface: #0b0b15;
      --text: #f0f0f5;
      --text2: #8585a0;
      --text3: #4e4e68;
      --border: #1a1a30;
      --glow-c: 0 0 20px rgba(0,240,255,.35), 0 0 60px rgba(0,240,255,.1);
      --glow-p: 0 0 20px rgba(255,45,149,.35), 0 0 60px rgba(255,45,149,.1);
      --glow-g: 0 0 20px rgba(29,185,84,.4), 0 0 60px rgba(29,185,84,.12);
    }
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.5}
    a{text-decoration:none;color:inherit}
    button{font-family:'Outfit',sans-serif;cursor:pointer}
    input{font-family:'Outfit',sans-serif}
    ::-webkit-scrollbar{width:5px;height:5px}
    ::-webkit-scrollbar-track{background:var(--bg)}
    ::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:3px}

    @keyframes fadeUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes slideDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
    @keyframes glowPulse{0%,100%{box-shadow:var(--glow-c)}50%{box-shadow:0 0 35px rgba(0,240,255,.55),0 0 90px rgba(0,240,255,.18)}}
    @keyframes spinSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
    @keyframes eqBar1{0%,100%{height:5px}50%{height:22px}}
    @keyframes eqBar2{0%,100%{height:8px}50%{height:28px}}
    @keyframes eqBar3{0%,100%{height:4px}50%{height:18px}}
    @keyframes eqBar4{0%,100%{height:6px}50%{height:25px}}
    @keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}

    .fade-up{animation:fadeUp .65s ease both}
    .fade-in{animation:fadeIn .55s ease both}

    /* ═══════ NAVBAR ═══════ */
    .navbar{position:fixed;top:0;left:0;right:0;z-index:1000;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(7,7,13,.82);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(26,26,48,.6);transition:all .35s ease}
    .navbar.scrolled{height:60px;background:rgba(7,7,13,.96)}
    .nav-logo{font-family:'Bebas Neue',sans-serif;font-size:34px;letter-spacing:8px;color:var(--cyan);cursor:pointer;user-select:none;text-shadow:0 0 12px rgba(0,240,255,.4);transition:text-shadow .3s}
    .nav-logo:hover{text-shadow:0 0 24px rgba(0,240,255,.7),0 0 60px rgba(0,240,255,.25)}
    .nav-links{display:flex;align-items:center;gap:6px}
    .nav-link{padding:9px 18px;border-radius:8px;font-size:14px;font-weight:500;color:var(--text2);background:none;border:none;transition:all .25s;display:flex;align-items:center;gap:7px}
    .nav-link i{font-size:13px}
    .nav-link:hover{color:var(--text);background:rgba(255,255,255,.05)}
    .nav-link.active{color:var(--cyan);background:rgba(0,240,255,.07)}
    .nav-cta{padding:9px 22px;border-radius:8px;font-size:14px;font-weight:700;color:var(--bg);background:var(--cyan);border:none;transition:all .25s;margin-left:8px;display:flex;align-items:center;gap:7px}
    .nav-cta:hover{box-shadow:var(--glow-c);transform:translateY(-1px)}
    .hamburger{display:none;background:none;border:none;padding:8px;flex-direction:column;gap:5px;cursor:pointer}
    .hamburger span{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:all .3s ease}
    .hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
    .hamburger.open span:nth-child(2){opacity:0}
    .hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
    .mobile-menu{display:none;position:fixed;top:72px;left:0;right:0;bottom:0;background:rgba(7,7,13,.97);backdrop-filter:blur(24px);flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:999}
    .mobile-menu.open{display:flex}
    .mobile-menu .nav-link{font-size:20px;padding:16px 36px}
    @media(max-width:800px){.nav-links{display:none}.hamburger{display:flex}}

    .page{display:none}.page.active{display:block;animation:fadeIn .4s ease}

    /* ═══════ HERO ═══════ */
    .hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:100px 24px 80px;overflow:hidden}
    .hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 55% at 50% 35%,rgba(0,240,255,.08) 0%,transparent 60%),radial-gradient(ellipse 55% 45% at 20% 80%,rgba(255,45,149,.05) 0%,transparent 50%),radial-gradient(ellipse 50% 45% at 85% 20%,rgba(180,77,255,.05) 0%,transparent 50%)}
    .hero-bg::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,240,255,.015) 2px,rgba(0,240,255,.015) 4px)}
    .hero-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(circle 600px at 50% 50%,transparent 30%,var(--bg) 100%)}
    .hero-content{position:relative;z-index:2;max-width:720px}
    .hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 20px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--pink);background:rgba(255,45,149,.07);border:1px solid rgba(255,45,149,.18);margin-bottom:28px;animation:fadeUp .65s ease both}
    .hero-badge i{font-size:8px;color:var(--pink)}

.hero-title{
font-family:'Urbax Personal Use',sans-serif;
font-size:clamp(82px,17vw,170px);
letter-spacing:14px;
line-height:.88;
background:linear-gradient(180deg,
#ffffff 20%,rgba(0,240,255,.65) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
filter:drop-shadow(0 0 50px rgba(0,240,255,.18));
animation:fadeUp .65s .08s ease both
}


    .hero-tagline{font-size:clamp(16px,2.8vw,20px);color:var(--text2);line-height:1.65;margin:22px auto 40px;max-width:540px;animation:fadeUp .65s .16s ease both}
    .hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;animation:fadeUp .65s .24s ease both}

    .btn-primary{padding:17px 38px;border-radius:12px;font-size:15px;font-weight:800;color:var(--bg);background:var(--cyan);border:none;text-transform:uppercase;letter-spacing:1.2px;transition:all .3s ease;display:inline-flex;align-items:center;gap:10px}
    .btn-primary:hover{box-shadow:var(--glow-c);transform:translateY(-2px) scale(1.02)}
    .btn-primary:active{transform:scale(.97)}
    .btn-secondary{padding:17px 38px;border-radius:12px;font-size:15px;font-weight:600;color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--border);text-transform:uppercase;letter-spacing:1.2px;transition:all .3s ease;display:inline-flex;align-items:center;gap:10px}
    .btn-secondary:hover{background:rgba(255,255,255,.08);border-color:var(--cyan);transform:translateY(-2px)}
    .btn-pink{padding:15px 34px;border-radius:12px;font-size:15px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--pink),var(--purple));border:none;text-transform:uppercase;letter-spacing:1px;transition:all .3s ease;display:inline-flex;align-items:center;gap:10px}
    .btn-pink:hover{box-shadow:var(--glow-p);transform:translateY(-2px) scale(1.02)}
    .btn-outline{padding:11px 26px;border-radius:10px;font-size:14px;font-weight:600;color:var(--text);background:rgba(255,255,255,.04);border:1px solid var(--border);transition:all .25s;width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
    .btn-outline:hover{border-color:var(--pink);color:var(--pink);background:rgba(255,45,149,.05)}
    .btn-toast{padding:9px 18px;border-radius:8px;font-size:12px;font-weight:700;color:var(--bg);background:var(--amber);border:none;text-transform:uppercase;letter-spacing:.5px;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
    .btn-toast:hover{box-shadow:0 0 18px rgba(255,184,0,.3);transform:scale(1.04)}

    /* ═══════ SECTIONS ═══════ */
    .section{padding:90px 24px;max-width:1200px;margin:0 auto}
    .section-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3.5px;color:var(--cyan);margin-bottom:14px}
    .section-label .line{width:28px;height:1px;background:var(--cyan)}
    .section-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(36px,6vw,58px);letter-spacing:1px;margin-bottom:14px}
    .section-sub{color:var(--text2);font-size:16px;max-width:520px;line-height:1.65;margin-bottom:48px}
    .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
    .step{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:40px 28px;text-align:center;position:relative;overflow:hidden;transition:all .4s ease}
    .step::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:0;transition:opacity .4s}
    .step:hover{transform:translateY(-5px);border-color:rgba(0,240,255,.2)}
    .step:hover::before{opacity:1}
    .step-num{font-family:'Bebas Neue',sans-serif;font-size:52px;color:var(--cyan);opacity:.1;position:absolute;top:10px;right:20px}
    .step-icon{width:68px;height:68px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;font-size:26px;background:rgba(0,240,255,.07);color:var(--cyan);margin-bottom:22px;border:1px solid rgba(0,240,255,.12)}
    .step h3{font-size:19px;font-weight:700;margin-bottom:10px}
    .step p{color:var(--text2);font-size:14px;line-height:1.55}
    .promo-box{background:linear-gradient(135deg,rgba(0,240,255,.05) 0%,rgba(180,77,255,.05) 100%);border:1px solid rgba(0,240,255,.1);border-radius:24px;padding:64px 48px;display:flex;align-items:center;gap:48px;position:relative;overflow:hidden}
    .promo-box::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 50%,rgba(0,240,255,.06),transparent 55%)}
    .promo-text{flex:1;position:relative;z-index:2}
    .promo-visual{position:relative;z-index:2;width:200px;height:200px;border-radius:50%;background:var(--bg-card);border:2px solid var(--cyan);display:flex;align-items:center;justify-content:center;font-size:64px;color:var(--cyan);box-shadow:var(--glow-c);animation:spinSlow 10s linear infinite;flex-shrink:0}
    @media(max-width:768px){.promo-box{flex-direction:column;padding:40px 24px;text-align:center}.promo-visual{width:150px;height:150px;font-size:48px}}
    .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
    .menu-card-old{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:28px;transition:all .3s ease;display:flex;flex-direction:column;gap:10px}
    .menu-card-old:hover{border-color:rgba(0,240,255,.15);transform:translateY(-4px)}
    .menu-card-old .mc-icon{font-size:36px;color:var(--cyan)}
    .menu-card-old h4{font-size:19px;font-weight:700}
    .menu-card-old .desc{font-size:13px;color:var(--text2)}
    .menu-card-old .mc-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px}
    .menu-card-old .mc-price{font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--cyan)}
    .events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:22px}
    .event-card{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:30px;transition:all .3s ease;position:relative;overflow:hidden}
    .event-card:hover{border-color:rgba(255,45,149,.2);transform:translateY(-4px)}
    .event-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:18px}
    .event-tag.dj{background:rgba(0,240,255,.08);color:var(--cyan)}.event-tag.live{background:rgba(255,45,149,.08);color:var(--pink)}.event-tag.open{background:rgba(180,77,255,.08);color:var(--purple)}
    .event-card h3{font-size:22px;font-weight:700;margin-bottom:10px}
    .event-meta{display:flex;gap:18px;color:var(--text2);font-size:14px;margin-bottom:14px}
    .event-meta i{margin-right:5px;font-size:12px}
    .event-card .desc{color:var(--text3);font-size:14px;line-height:1.55;margin-bottom:22px}
    .event-details{margin-top:18px;padding-top:18px;border-top:1px solid var(--border);color:var(--text2);font-size:14px;line-height:1.65;animation:fadeUp .3s ease}
    .social-section{text-align:center;padding:70px 24px}
    .social-icons{display:flex;gap:18px;justify-content:center;margin-top:28px}
    .social-icon{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--bg-card);border:1px solid var(--border);color:var(--text2);cursor:pointer;transition:all .3s ease}
    .social-icon:hover{border-color:var(--pink);color:var(--pink);transform:translateY(-4px) scale(1.06);box-shadow:var(--glow-p)}
    .social-msg{color:var(--pink);font-size:14px;font-weight:600;margin-top:18px}
    .social-msg i{margin-right:5px}

    /* ═══════ FOOTER ═══════ */
    .footer{border-top:1px solid var(--border);padding:52px 24px 32px;background:var(--bg-surface)}
    .footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:40px}
    .footer-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2.5px;color:var(--cyan);margin-bottom:18px}
    .footer-text{color:var(--text2);font-size:14px;line-height:1.85}
    .footer-text i{margin-right:8px;color:var(--text3);width:16px;text-align:center}
    .footer-social{display:flex;gap:14px;margin-top:12px}
    .footer-social a{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text2);transition:all .25s}
    .footer-social a:hover{border-color:var(--cyan);color:var(--cyan)}
    .footer-bottom{max-width:1200px;margin:36px auto 0;padding-top:24px;border-top:1px solid var(--border);text-align:center;color:var(--text3);font-size:13px}

    /* ═══════ JUKEBOX ═══════ */
    .juke-hero{padding:110px 24px 44px;text-align:center;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(0,240,255,.07),transparent 70%)}
    .search-wrap{max-width:620px;margin:34px auto 0;position:relative}
    .search-input{width:100%;padding:19px 24px 19px 54px;border-radius:14px;font-size:16px;background:var(--bg-card);border:1px solid var(--border);color:var(--text);outline:none;transition:border-color .3s}
    .search-input::placeholder{color:var(--text3)}
    .search-input:focus{border-color:var(--cyan)}
    .search-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:16px}
    .juke-layout{max-width:1200px;margin:0 auto;padding:28px 24px;display:grid;grid-template-columns:1fr 350px;gap:28px}
    @media(max-width:900px){.juke-layout{grid-template-columns:1fr}}
    .filter-bar{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
    .filter-btn{padding:9px 20px;border-radius:100px;font-size:13px;font-weight:500;background:var(--bg-card);border:1px solid var(--border);color:var(--text2);transition:all .2s}
    .filter-btn.active{background:rgba(0,240,255,.08);border-color:var(--cyan);color:var(--cyan)}
    .filter-btn:hover{border-color:rgba(0,240,255,.25)}
    .song-list{display:flex;flex-direction:column;gap:8px}
    .song-row{display:flex;align-items:center;gap:16px;padding:15px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;transition:all .25s}
    .song-row:hover{border-color:rgba(0,240,255,.12);background:var(--bg-card2)}
    .song-idx{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--text3);width:28px;text-align:center}
    .song-info{flex:1;min-width:0}
    .song-title{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .song-artist{font-size:13px;color:var(--text2)}
    .song-dur{font-size:13px;color:var(--text3);font-variant-numeric:tabular-nums}
    .btn-request{padding:9px 18px;border-radius:8px;font-size:12px;font-weight:800;color:var(--bg);background:var(--cyan);border:none;text-transform:uppercase;letter-spacing:.5px;transition:all .2s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
    .btn-request:hover{box-shadow:var(--glow-c);transform:scale(1.04)}
    .btn-request.done{background:rgba(0,240,255,.12);color:var(--cyan);cursor:default}
    .sidebar-card{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:26px;margin-bottom:22px}
    .sidebar-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
    .sidebar-title i{color:var(--cyan)}
    .credit-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid rgba(26,26,48,.5);font-size:14px}
    .credit-row:last-child{border-bottom:none}
    .credit-time{color:var(--text2);display:flex;align-items:center;gap:8px}
    .credit-time i{font-size:12px;color:var(--text3);width:16px}
    .credit-price{font-weight:700}
    .credit-price.free{color:var(--green)}
    .now-playing{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--border);margin-bottom:14px}
    .eq-bars{display:flex;gap:3px;align-items:flex-end;height:28px}
    .eq-bar{width:3px;background:var(--cyan);border-radius:2px}
    .eq-bar:nth-child(1){animation:eqBar1 .85s ease infinite}
    .eq-bar:nth-child(2){animation:eqBar2 .65s ease infinite .08s}
    .eq-bar:nth-child(3){animation:eqBar3 .95s ease infinite .16s}
    .eq-bar:nth-child(4){animation:eqBar4 .75s ease infinite .04s}
    .np-info{flex:1}
    .np-label{font-size:10px;color:var(--cyan);font-weight:700;text-transform:uppercase;letter-spacing:1.5px}
    .np-title{font-size:15px;font-weight:700;margin-top:3px}
    .np-artist{font-size:13px;color:var(--text2)}
    .queue-item{display:flex;align-items:center;gap:14px;padding:11px 0;font-size:14px}
    .queue-num{color:var(--text3);font-weight:700;width:20px;text-align:center}
    .queue-song-title{font-weight:500}
    .queue-song-artist{font-size:12px;color:var(--text2)}

    /* ═══════ ARTIST ═══════ */
    .artist-hero{padding:110px 24px 48px;text-align:center;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(255,45,149,.07),transparent 65%)}
    .artist-avatar{width:130px;height:130px;border-radius:50%;background:var(--bg-card);border:3px solid var(--pink);display:flex;align-items:center;justify-content:center;font-size:52px;color:var(--pink);margin:0 auto 22px;box-shadow:var(--glow-p)}
    .artist-name{font-family:'Bebas Neue',sans-serif;font-size:50px;letter-spacing:5px}
    .artist-time{color:var(--pink);font-size:14px;font-weight:700;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px}
    .artist-bio{color:var(--text2);font-size:15px;margin-top:14px;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.6}

    /* ═══════ AUTH ═══════ */
    .auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px 24px 60px;background:radial-gradient(ellipse 55% 45% at 50% 30%,rgba(180,77,255,.06),transparent 60%),var(--bg)}
    .auth-card{width:100%;max-width:430px;background:var(--bg-card);border:1px solid var(--border);border-radius:24px;padding:44px 34px}
    .auth-logo{font-family:'Bebas Neue',sans-serif;font-size:42px;letter-spacing:8px;color:var(--cyan);text-align:center;text-shadow:0 0 10px rgba(0,240,255,.3)}
    .auth-sub{text-align:center;color:var(--text2);font-size:14px;margin:6px 0 28px}
    .auth-tabs{display:flex;gap:4px;margin-bottom:32px;background:var(--bg-surface);border-radius:10px;padding:4px}
    .auth-tab{flex:1;padding:11px;border-radius:8px;font-size:14px;font-weight:700;text-align:center;border:none;background:transparent;color:var(--text2);transition:all .25s}
    .auth-tab.active{background:var(--cyan);color:var(--bg)}
    .auth-field{margin-bottom:18px}
    .auth-label{display:block;font-size:13px;font-weight:500;color:var(--text2);margin-bottom:7px}
    .auth-input{width:100%;padding:15px 18px;border-radius:10px;font-size:15px;background:var(--bg-surface);border:1px solid var(--border);color:var(--text);outline:none;transition:border-color .3s}
    .auth-input:focus{border-color:var(--cyan)}
    .auth-submit{width:100%;padding:16px;border-radius:12px;font-size:16px;font-weight:800;color:var(--bg);background:var(--cyan);border:none;margin-top:8px;transition:all .3s;text-transform:uppercase;letter-spacing:1px}
    .auth-submit:hover{box-shadow:var(--glow-c)}
    .auth-divider{display:flex;align-items:center;gap:16px;margin:26px 0;color:var(--text3);font-size:13px}
    .auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
    .social-login{display:flex;gap:12px}
    .social-btn{flex:1;padding:13px;border-radius:10px;font-size:18px;text-align:center;background:var(--bg-surface);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:all .25s;display:flex;align-items:center;justify-content:center}
    .social-btn:hover{border-color:var(--cyan);transform:translateY(-1px)}
    .guest-btn{width:100%;padding:14px;border-radius:10px;font-size:14px;font-weight:500;color:var(--text2);background:none;border:1px dashed var(--border);margin-top:18px;transition:all .25s;display:flex;align-items:center;justify-content:center;gap:8px}
    .guest-btn:hover{border-color:var(--cyan);color:var(--cyan)}
    .page-hero{padding:110px 24px 48px;text-align:center;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(0,240,255,.06),transparent 65%)}

    /* ═══════ TOAST ═══════ */
    .toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg-card2);border:1px solid rgba(0,240,255,.15);color:var(--text);padding:14px 28px;border-radius:12px;font-size:14px;font-weight:500;opacity:0;transition:all .3s ease;z-index:9999;white-space:nowrap;display:flex;align-items:center;gap:10px;box-shadow:0 8px 32px rgba(0,0,0,.5)}
    .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
    .empty{padding:40px;text-align:center;color:var(--text3);font-size:15px}
    .empty i{font-size:32px;display:block;margin-bottom:12px;opacity:.4}
    @media(max-width:480px){.section{padding:60px 16px}.hero{padding:80px 16px 50px}.hero-btns{flex-direction:column;align-items:stretch}.btn-primary,.btn-secondary{justify-content:center;width:100%}.promo-box{padding:32px 20px}.auth-card{padding:30px 22px}}

    /* ═══════════════════════════════════════
       SPOTIFY-STYLE MENU PAGE
    ═══════════════════════════════════════ */
    .menu-hero{padding:90px 0 0;position:relative}
    .menu-hero-banner{position:relative;padding:60px 40px 50px;background:linear-gradient(135deg,#0d2818 0%,#0a3a1a 30%,#07070d 100%);overflow:hidden}
    .menu-hero-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 400px at 15% 60%,rgba(29,185,84,.18),transparent),radial-gradient(circle 300px at 80% 30%,rgba(0,240,255,.08),transparent)}
    .menu-hero-banner::after{content:'';position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to top,var(--bg),transparent)}
    .menu-hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;display:flex;align-items:flex-end;gap:32px}
    .menu-hero-icon{width:200px;height:200px;border-radius:16px;flex-shrink:0;background:linear-gradient(135deg,rgba(29,185,84,.2),rgba(0,240,255,.15));border:1px solid rgba(29,185,84,.2);display:flex;align-items:center;justify-content:center;font-size:72px;color:var(--green);box-shadow:0 8px 40px rgba(0,0,0,.5)}
    .menu-hero-info{padding-bottom:8px}
    .menu-hero-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--green);margin-bottom:8px;display:flex;align-items:center;gap:6px}
    .menu-hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,8vw,80px);letter-spacing:4px;line-height:.95}
    .menu-hero-meta{display:flex;align-items:center;gap:16px;margin-top:14px;font-size:14px;color:var(--text2);flex-wrap:wrap}
    .menu-hero-meta i{color:var(--green);margin-right:5px}
    .menu-hero-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--text3)}
    @media(max-width:600px){.menu-hero-banner{padding:40px 20px}.menu-hero-inner{flex-direction:column;align-items:flex-start;gap:20px}.menu-hero-icon{width:120px;height:120px;font-size:48px}}
    .menu-action-bar{max-width:1200px;margin:0 auto;padding:28px 40px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
    .menu-play-btn{width:56px;height:56px;border-radius:50%;border:none;background:var(--green);color:var(--bg);font-size:22px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}
    .menu-play-btn:hover{transform:scale(1.06);background:var(--green2);box-shadow:var(--glow-g)}
    .menu-shuffle-btn{padding:12px 28px;border-radius:100px;font-size:14px;font-weight:700;color:var(--text);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:all .25s;display:flex;align-items:center;gap:8px}
    .menu-shuffle-btn:hover{border-color:var(--text);transform:scale(1.03)}
    .menu-search-bar{margin-left:auto;position:relative;width:260px}
    .menu-search-bar input{width:100%;padding:12px 16px 12px 42px;border-radius:8px;font-size:14px;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text);outline:none;transition:all .3s}
    .menu-search-bar input::placeholder{color:var(--text3)}
    .menu-search-bar input:focus{border-color:var(--green);background:rgba(255,255,255,.08)}
    .menu-search-bar i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:14px}
    @media(max-width:600px){.menu-action-bar{padding:20px}.menu-search-bar{width:100%;margin-left:0}}
    .view-toggle{display:flex;gap:4px;background:rgba(255,255,255,.04);border-radius:8px;padding:3px}
    .view-toggle-btn{padding:8px 12px;border-radius:6px;border:none;background:transparent;color:var(--text3);font-size:15px;transition:all .2s}
    .view-toggle-btn.active{background:rgba(255,255,255,.08);color:var(--text)}
    .view-toggle-btn:hover:not(.active){color:var(--text2)}
    .menu-cats{max-width:1200px;margin:0 auto;padding:0 40px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
    .menu-cats::-webkit-scrollbar{display:none}
    .menu-cat{padding:10px 22px;border-radius:100px;font-size:14px;font-weight:600;white-space:nowrap;border:none;transition:all .25s;background:rgba(255,255,255,.06);color:var(--text2)}
    .menu-cat.active{background:var(--green);color:#fff}
    .menu-cat:hover:not(.active){background:rgba(255,255,255,.1);color:var(--text)}
    @media(max-width:600px){.menu-cats{padding:0 20px}}
    .menu-row{max-width:1200px;margin:0 auto;padding:36px 40px 0}
    .menu-row-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
    .menu-row-title{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:2px}
    .menu-row-see{font-size:13px;font-weight:700;color:var(--text2);background:none;border:none;text-transform:uppercase;letter-spacing:1px;transition:color .2s}
    .menu-row-see:hover{color:var(--text)}
    .menu-scroll{display:flex;gap:18px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:none}
    .menu-scroll::-webkit-scrollbar{display:none}
    @media(max-width:600px){.menu-row{padding:28px 20px 0}}
    .sp-card{flex:0 0 200px;scroll-snap-align:start;background:var(--bg-card);border-radius:12px;padding:16px;transition:all .3s ease;position:relative;cursor:pointer;border:1px solid transparent}
    .sp-card:hover{background:var(--bg-card2);border-color:rgba(255,255,255,.06);transform:translateY(-2px)}
    .sp-card-img{width:100%;aspect-ratio:1;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:52px;position:relative;overflow:hidden}
    .sp-card-img.food-bg{background:linear-gradient(135deg,#1a1209,#2a1a0a);color:var(--amber)}
    .sp-card-img.drink-bg{background:linear-gradient(135deg,#0a1a1a,#0a2020);color:var(--cyan)}
    .sp-card-img.cocktail-bg{background:linear-gradient(135deg,#1a0a1a,#200a20);color:var(--pink)}
    .sp-card-img.beer-bg{background:linear-gradient(135deg,#1a1500,#2a2000);color:var(--amber)}
    .sp-play-btn{position:absolute;bottom:10px;right:10px;width:48px;height:48px;border-radius:50%;background:var(--green);color:var(--bg);border:none;font-size:18px;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:all .25s ease;box-shadow:0 6px 20px rgba(0,0,0,.4);z-index:3}
    .sp-card:hover .sp-play-btn{opacity:1;transform:translateY(0)}
    .sp-play-btn:hover{transform:scale(1.08)!important;background:var(--green2)}
    .sp-card-name{font-size:15px;font-weight:700;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .sp-card-desc{font-size:13px;color:var(--text2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .sp-card-price{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:4px 12px;border-radius:100px;font-size:14px;font-weight:800;font-family:'Bebas Neue',sans-serif;letter-spacing:1px;background:rgba(29,185,84,.1);color:var(--green)}
    .menu-list-section{max-width:1200px;margin:0 auto;padding:36px 40px}
    .menu-list-header{display:grid;grid-template-columns:40px 1fr 160px 100px 120px;padding:0 20px 12px;font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;border-bottom:1px solid var(--border);margin-bottom:8px}
    .menu-list-header .col-right{text-align:right}
    .menu-list-row{display:grid;grid-template-columns:40px 1fr 160px 100px 120px;align-items:center;padding:10px 20px;border-radius:8px;transition:all .2s ease;gap:8px}
    .menu-list-row:hover{background:rgba(255,255,255,.04)}
    .ml-num{font-size:15px;color:var(--text3);text-align:center}
    .ml-play{display:none;color:var(--text);text-align:center;font-size:14px;cursor:pointer}
    .menu-list-row:hover .ml-num{display:none}
    .menu-list-row:hover .ml-play{display:block}
    .ml-info{display:flex;align-items:center;gap:14px;min-width:0}
    .ml-thumb{width:44px;height:44px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px}
    .ml-thumb.food{background:rgba(255,184,0,.08);color:var(--amber)}
    .ml-thumb.drink{background:rgba(0,240,255,.08);color:var(--cyan)}
    .ml-name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .ml-desc{font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .ml-cat{font-size:13px;color:var(--text2)}
    .ml-price{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--green);text-align:right}
    .ml-order{display:flex;justify-content:flex-end}
    .btn-order-sm{padding:8px 18px;border-radius:100px;font-size:12px;font-weight:700;background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--text);transition:all .2s;display:flex;align-items:center;gap:6px}
    .btn-order-sm:hover{border-color:var(--green);color:var(--green);background:rgba(29,185,84,.06)}
    .btn-order-sm.ordered{border-color:var(--green);color:var(--green);background:rgba(29,185,84,.1)}
    @media(max-width:900px){.menu-list-header{grid-template-columns:40px 1fr 100px 120px}.menu-list-header .hide-mobile{display:none}.menu-list-row{grid-template-columns:40px 1fr 100px 120px}.ml-cat{display:none}}
    @media(max-width:600px){.menu-list-section{padding:28px 20px}.menu-list-header{grid-template-columns:40px 1fr 80px}.menu-list-row{grid-template-columns:40px 1fr 80px}.ml-cat,.ml-order{display:none}}
    .menu-featured{max-width:1200px;margin:36px auto 0;padding:0 40px}
    .menu-featured-card{position:relative;border-radius:16px;overflow:hidden;padding:40px 36px;background:linear-gradient(135deg,#071a10 0%,#0a2a18 40%,#0d1a12 100%);border:1px solid rgba(29,185,84,.12);display:flex;align-items:center;gap:32px}
    .menu-featured-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 300px at 80% 50%,rgba(29,185,84,.12),transparent)}
    .mf-icon{width:100px;height:100px;border-radius:14px;flex-shrink:0;background:rgba(29,185,84,.12);display:flex;align-items:center;justify-content:center;font-size:44px;color:var(--green);position:relative;z-index:2}
    .mf-content{position:relative;z-index:2;flex:1}
    .mf-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--green);margin-bottom:6px;display:flex;align-items:center;gap:6px}
    .mf-title{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:2px}
    .mf-desc{color:var(--text2);font-size:14px;margin-top:6px}
    .mf-price{font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--green);margin-top:10px}
    .mf-btn{padding:14px 32px;border-radius:100px;font-size:14px;font-weight:700;background:var(--green);color:var(--bg);border:none;transition:all .25s;display:inline-flex;align-items:center;gap:8px;margin-top:14px;text-transform:uppercase;letter-spacing:.5px}
    .mf-btn:hover{background:var(--green2);box-shadow:var(--glow-g);transform:scale(1.03)}
    @media(max-width:600px){.menu-featured{padding:0 20px}.menu-featured-card{flex-direction:column;align-items:flex-start;padding:28px 24px}.mf-icon{width:72px;height:72px;font-size:32px}}