@media (max-width:1280px){.pipol-rack{grid-template-columns:110px 100px minmax(200px,1fr) 190px 190px 84px 76px 50px 84px}.rack-module{padding-left:7px;padding-right:7px}.display-footer{display:none}.brand-logo{max-width:82px}.logo-plate{width:92px;height:96px}.cover-frame{width:78px;height:96px}.metal-button small{font-size:9px}.icon{width:25px;height:25px}.knob{width:58px;height:58px}}
@media (max-width:1100px){.pipol-player-shell.is-bottom{position:relative;padding:8px}.pipol-rack{grid-template-columns:130px 115px 1fr 210px;max-width:980px}.vu-module{grid-column:span 2}.analyzer-module,.status-module,.social-module,.volume-module{grid-column:span 1}.display-footer{display:flex}}
@media (max-width:760px){.pipol-rack{grid-template-columns:1fr 1fr;border-radius:14px}.display-module,.controls-module,.vu-module{grid-column:1/-1}.rack-module{min-height:auto}.logo-module,.cover-module{min-height:140px}.analyzer-module,.status-module,.social-module,.volume-module{min-height:135px}.transport-grid{height:112px}.song-marquee{font-size:21px}}
@media (max-width:480px){.pipol-rack{grid-template-columns:1fr}.rack-module{grid-column:1/-1}.cover-frame{width:130px}.social-module{grid-template-columns:repeat(3,1fr)}.module-title{grid-column:1/-1}}


/* =========================================================
   Hotfix v4.0.2 Production - Interfaz móvil compacta
   Objetivo: que el reproductor se vea bien en smartphone,
   manteniendo intacto el rack completo en desktop.
   ========================================================= */
@media (max-width: 767px){
  :root{--rack-h:86px;}
  html,body{
    width:100%;
    min-height:104px;
    height:104px;
    background:transparent!important;
    overflow:hidden!important;
  }
  .demo-page,.demo-footer-space{display:none!important;height:0!important;min-height:0!important;}
  .pipol-player-shell.is-bottom{
    position:fixed!important;
    left:0;right:0;bottom:0;
    width:100%;
    height:104px;
    padding:5px 6px 6px;
    background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.88))!important;
    overflow:visible;
  }
  .pipol-rack{
    width:100%;
    max-width:none;
    min-height:88px!important;
    height:88px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 132px!important;
    grid-template-rows:1fr!important;
    gap:4px!important;
    padding:5px!important;
    border-radius:14px!important;
    overflow:hidden;
    box-shadow:0 0 0 1px #111,0 -2px 18px rgba(255,133,0,.18),0 -1px 0 rgba(255,255,255,.2) inset!important;
  }
  .rack-glow{left:12px;right:12px;bottom:3px;height:1px;}
  .rack-module{
    min-height:78px!important;
    height:78px!important;
    padding:5px!important;
    border-radius:8px!important;
    overflow:hidden!important;
  }
  .screw,.module-title,.pipol-rights-bar,
  .logo-module,.cover-module,.vu-module,.analyzer-module,.status-module,.social-module,.volume-module{
    display:none!important;
  }

  .display-module{grid-column:auto!important;grid-row:1!important;padding:5px!important;}
  .crt-display{
    height:68px!important;
    min-height:68px!important;
    padding:6px 8px!important;
    border-radius:7px!important;
  }
  .crt-display:before{inset:4px!important;}
  .crt-display::after,.scanlines:after{display:none!important;}
  .display-topline{
    font-size:8px!important;
    line-height:1!important;
    margin-bottom:2px!important;
  }
  .display-topline strong{font-size:8px!important;}
  .artist-label,.title-label,.display-footer,.lcd-bars{display:none!important;}
  .artist-line,.song-marquee{
    max-width:100%!important;
    font-size:12px!important;
    line-height:1.15!important;
    margin-top:3px!important;
    min-height:15px!important;
  }
  .song-marquee{font-size:14px!important;color:#afffb4!important;}
  .artist-line span,.song-marquee span{padding-right:28px!important;}

  .controls-module{grid-column:auto!important;grid-row:1!important;padding:5px!important;}
  .controls-module .module-title{display:none!important;}
  .transport-grid{
    height:68px!important;
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:3px!important;
    padding:0!important;
    align-items:stretch!important;
  }
  .metal-button{
    height:68px!important;
    min-width:0!important;
    border-radius:7px!important;
    padding:0!important;
  }
  .metal-button small{
    display:block!important;
    height:12px!important;
    line-height:12px!important;
    margin:1px 0 0!important;
    font-size:6.5px!important;
    letter-spacing:.01em!important;
  }
  .metal-button::before{
    left:4px!important;right:4px!important;top:14px!important;height:34px!important;border-radius:5px!important;
  }
  .metal-button::after{left:5px!important;right:5px!important;top:15px!important;height:10px!important;}
  .icon{width:18px!important;height:18px!important;margin:17px auto 0!important;}
  .play{width:19px!important;height:19px!important;}
  .stop{width:16px!important;height:16px!important;margin-top:18px!important;}
  .pause{height:18px!important;margin-top:17px!important;}
  .pause:before,.pause:after{height:18px!important;width:5px!important;margin:0 1.5px!important;}
  .speaker{width:19px!important;height:18px!important;margin-top:17px!important;}
  .led{bottom:4px!important;width:7px!important;height:7px!important;margin-left:-3.5px!important;}
  .player-hide-tab{
    right:8px!important;
    top:-2px!important;
    transform:none!important;
    writing-mode:horizontal-tb!important;
    height:22px!important;
    min-width:58px!important;
    padding:4px 7px!important;
    border-radius:0 0 8px 8px!important;
    font-size:8px!important;
    z-index:10050!important;
  }
  .pipol-player-shell.is-hidden{
    height:42px!important;
    transform:none!important;
    background:transparent!important;
  }
  .pipol-player-shell.is-hidden .pipol-rack{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
  .pipol-player-shell.is-hidden .player-hide-tab{
    top:5px!important;right:10px!important;height:28px!important;min-width:76px!important;border-radius:9px!important;
  }
}

@media (max-width: 380px){
  .pipol-rack{grid-template-columns:minmax(0,1fr) 118px!important;gap:3px!important;}
  .artist-line{font-size:11px!important;}
  .song-marquee{font-size:13px!important;}
  .metal-button small{font-size:6px!important;}
  .icon{width:16px!important;height:16px!important;}
}

/* Hotfix v4.0.3: en smartphone se ocultan logo, cover, analizador y status; desktop queda intacto. */

/* =========================================================
   Hotfix v4.0.4: adaptación del nuevo rack compacto.
   Desktop conserva una sola fila; móvil mantiene la barra compacta.
   ========================================================= */
@media (max-width:1280px) and (min-width:1101px){
  .pipol-rack{
    width:calc(100% - 30px);
    grid-template-columns:108px minmax(235px,1fr) 188px 210px 80px 98px 54px 86px;
  }
  .plus-module .feature-btn{font-size:8px;min-height:33px;}
}
@media (max-width:1100px) and (min-width:768px){
  .pipol-player-shell.is-bottom{position:relative;padding:8px;}
  .pipol-rack{
    width:calc(100% - 24px);
    max-width:980px;
    grid-template-columns:120px minmax(260px,1fr) 205px 205px;
  }
  .logo-module,.display-module,.controls-module,.vu-module,.status-module,.plus-module,.social-module,.volume-module{grid-column:auto;}
  .vu-module{grid-column:span 2;}
  .plus-module.feature-module{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:767px){
  .plus-module,.social-module{display:none!important;}
}