/* =========================================================
   MAGICALRADIO3D — WEB RADIO APP V1
   ========================================================= */

.mr3d-app-card{
  position:relative!important;
  isolation:isolate!important;

  width:100%!important;

  overflow:hidden!important;

  padding:18px!important;

  border-radius:28px!important;

  background:#06142d!important;

  border:1px solid rgba(67,191,255,.42)!important;

  box-shadow:
    0 0 0 1px rgba(222,62,255,.12),
    0 0 34px rgba(65,117,255,.22),
    0 24px 60px rgba(0,0,0,.40)!important;
}


/* Neutralisation anciens pseudo-fonds */
.mr3d-app-card::before,
.mr3d-app-card::after{
  content:none!important;
}


/* =========================
   COUCHE FOND
   ========================= */

.mr3d-app-bg{
  position:absolute!important;

  inset:0!important;

  width:100%!important;
  height:100%!important;

  object-fit:cover!important;
  object-position:center top!important;

  display:block!important;

  z-index:-3!important;

  pointer-events:none!important;
}


.mr3d-app-shade{
  position:absolute!important;

  inset:0!important;

  z-index:-2!important;

  pointer-events:none!important;

  background:
    linear-gradient(
      180deg,
      rgba(3,9,27,.10) 0%,
      rgba(3,9,27,.23) 30%,
      rgba(3,9,27,.50) 67%,
      rgba(3,9,27,.70) 100%
    )!important;
}


/* =========================
   HEADER
   ========================= */

.mr3d-app-header{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:3px 3px 18px;
}


.mr3d-app-brand{
  display:flex;
  align-items:center;

  gap:12px;
}


.mr3d-app-wave-icon{
  width:48px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:15px;

  color:#ff5fe9;

  font-size:26px;
  font-weight:900;

  background:
    linear-gradient(
      145deg,
      rgba(228,65,255,.18),
      rgba(46,202,255,.10)
    );

  border:1px solid rgba(210,88,255,.30);

  box-shadow:
    0 0 22px rgba(219,67,255,.17);
}


.mr3d-app-kicker{
  color:#62e8ff;

  font-size:10px;
  font-weight:900;

  letter-spacing:.16em;

  margin-bottom:2px;
}


.mr3d-app-brand strong{
  display:block;

  color:#fff;

  font-size:19px;
  line-height:1.1;
}


.mr3d-app-brand span{
  display:block;

  margin-top:3px;

  color:#b8c6e6;

  font-size:11px;
}


.mr3d-app-live{
  display:flex;
  align-items:center;

  gap:7px;

  padding:8px 12px;

  border-radius:999px;

  color:#75ffd0;

  background:
    rgba(10,216,143,.13);

  border:
    1px solid rgba(66,255,183,.36);

  font-size:10px;
  font-weight:900;

  box-shadow:
    0 0 20px rgba(39,255,177,.10);
}


.mr3d-app-live i{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#54ffbe;

  box-shadow:
    0 0 12px rgba(84,255,190,.92);
}


/* =========================
   PLAYER
   ========================= */

.mr3d-app-player{
  position:relative;

  display:grid;

  grid-template-columns:100px 1fr;

  gap:20px;

  align-items:center;

  min-height:146px;

  padding:20px;

  border-radius:24px;

  background:
    linear-gradient(
      112deg,
      rgba(4,17,44,.80),
      rgba(10,27,66,.69)
    );

  border:
    1px solid rgba(93,145,255,.29);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 15px 38px rgba(0,0,0,.25);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}


/* VRAI BOUTON PLAY */
.mr3d-app-card #radioPlayBtn{
  width:90px!important;
  height:90px!important;
  min-width:90px!important;

  padding:0!important;
  margin:0!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  border:0!important;

  border-radius:50%!important;

  background:
    url("/assets/mr3d-play-texture.svg")
    center / contain no-repeat!important;

  color:#fff!important;

  font-size:30px!important;
  line-height:1!important;

  cursor:pointer!important;

  text-shadow:
    0 2px 5px rgba(0,0,0,.4),
    0 0 9px rgba(255,255,255,.30)!important;

  box-shadow:
    0 0 0 7px rgba(197,65,255,.07),
    0 0 27px rgba(221,65,255,.42),
    0 0 50px rgba(46,205,255,.20)!important;

  transition:
    transform .18s ease,
    filter .18s ease!important;
}


.mr3d-app-card #radioPlayBtn:hover{
  transform:scale(1.06)!important;

  filter:
    brightness(1.12)
    saturate(1.10)!important;
}


.mr3d-app-card #radioPlayBtn:active{
  transform:scale(.96)!important;
}


/* Infos player */
.mr3d-app-track{
  min-width:0;
}


.mr3d-app-track-top{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:15px;
}


.mr3d-app-track small{
  display:block;

  margin-bottom:3px;

  color:#68eaff;

  font-size:9px;
  font-weight:900;

  letter-spacing:.14em;
}


.mr3d-app-track strong{
  display:block;

  color:#fff;

  font-size:23px;
  font-weight:900;
}


.mr3d-app-track span{
  display:block;

  margin-top:3px;

  color:#bac7e6;

  font-size:11px;
}


/* mini onde */
.mr3d-app-mini-wave{
  width:62px;
  height:55px;

  display:flex;
  justify-content:center;
  align-items:center;

  gap:4px;

  padding:7px;

  border-radius:15px;

  background:
    rgba(112,70,255,.09);

  border:
    1px solid rgba(144,103,255,.14);
}


.mr3d-app-mini-wave i{
  width:4px;

  border-radius:999px;

  background:
    linear-gradient(
      to top,
      #37e8ff,
      #795dff,
      #ed50dc
    );

  box-shadow:
    0 0 8px rgba(117,106,255,.40);

  animation:
    mr3dAppWave 1s ease-in-out infinite alternate;
}


.mr3d-app-mini-wave i:nth-child(1){
  height:18px;
}

.mr3d-app-mini-wave i:nth-child(2){
  height:31px;
  animation-delay:.15s;
}

.mr3d-app-mini-wave i:nth-child(3){
  height:43px;
  animation-delay:.30s;
}

.mr3d-app-mini-wave i:nth-child(4){
  height:25px;
  animation-delay:.10s;
}

.mr3d-app-mini-wave i:nth-child(5){
  height:35px;
  animation-delay:.23s;
}


@keyframes mr3dAppWave{
  from{
    transform:scaleY(.58);
    opacity:.58;
  }

  to{
    transform:scaleY(1.08);
    opacity:1;
  }
}


/* Volume */
.mr3d-app-volume{
  display:grid;

  grid-template-columns:25px 1fr;

  align-items:center;

  gap:10px;

  margin-top:15px;

  padding:8px 12px;

  border-radius:999px;

  background:
    rgba(3,13,34,.55);

  border:
    1px solid rgba(111,151,255,.15);
}


.mr3d-app-volume input{
  width:100%!important;

  accent-color:#bc48ff;
}


.mr3d-app-speaker{
  margin:0!important;

  font-size:16px!important;
}


/* status */
.mr3d-app-status{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:7px 5px 0;
}


.mr3d-app-status span{
  margin:0!important;

  color:#aebcdb!important;

  font-size:10px!important;
}


.mr3d-app-status strong{
  color:#54f1cf!important;

  font-size:10px!important;

  text-shadow:
    0 0 12px rgba(84,241,207,.30);
}


/* =========================
   TA SONO
   ========================= */

.mr3d-app-sono{
  display:grid;

  grid-template-columns:58px 1fr auto;

  align-items:center;

  gap:14px;

  margin-top:14px;

  padding:15px;

  border-radius:22px;

  background:
    linear-gradient(
      110deg,
      rgba(61,24,108,.65),
      rgba(24,31,82,.68)
    );

  border:
    1px solid rgba(209,76,255,.34);

  box-shadow:
    0 12px 30px rgba(0,0,0,.20);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}


.mr3d-app-sono-icon{
  width:54px;
  height:54px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:16px;

  font-size:25px;

  background:
    linear-gradient(
      145deg,
      rgba(224,59,255,.28),
      rgba(67,187,255,.18)
    );

  border:
    1px solid rgba(218,88,255,.37);
}


.mr3d-app-sono-copy strong{
  display:block;

  color:#fff;

  font-size:17px;
}


.mr3d-app-sono-copy span{
  display:block;

  margin-top:4px;

  color:#bdc8e7;

  font-size:11px;
}


.mr3d-app-sono-btn{
  min-width:190px;

  min-height:58px;

  padding:8px 17px;

  display:flex;

  align-items:center;
  justify-content:center;

  gap:11px;

  color:#fff;

  cursor:pointer;

  border-radius:18px;

  border:
    1px solid rgba(255,255,255,.24);

  background:
    linear-gradient(
      108deg,
      #ed2ce9 0%,
      #bc3cff 36%,
      #685dff 68%,
      #33d8f8 100%
    );

  box-shadow:
    0 0 27px rgba(216,55,255,.25),
    0 12px 26px rgba(53,76,220,.25);

  transition:
    transform .18s ease,
    filter .18s ease;
}


.mr3d-app-sono-btn:hover{
  transform:translateY(-2px);

  filter:brightness(1.10);
}


.mr3d-app-sono-btn b{
  display:block;

  font-size:14px;
}


.mr3d-app-sono-btn small{
  display:block;

  margin-top:2px;

  font-size:9px;

  color:rgba(255,255,255,.78);
}


/* =========================
   MODE ACTUEL
   ========================= */

.mr3d-app-mode{
  margin-top:14px;

  padding:16px;

  border-radius:22px;

  background:
    rgba(4,18,47,.75);

  border:
    1px solid rgba(91,144,255,.22);

  box-shadow:
    0 12px 30px rgba(0,0,0,.20);

  backdrop-filter:blur(11px);
  -webkit-backdrop-filter:blur(11px);
}


.mr3d-app-mode-head{
  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:12px;

  margin-bottom:14px;
}


.mr3d-app-mode-head small{
  display:block;

  color:#69eaff;

  font-size:9px;
  font-weight:900;

  letter-spacing:.14em;
}


.mr3d-app-mode-head strong{
  display:block;

  margin-top:3px;

  color:#fff;

  font-size:15px;
}


.mr3d-app-mode-badge{
  padding:7px 10px;

  border-radius:999px;

  color:#ffabe9;

  font-size:9px;
  font-weight:900;

  border:
    1px solid rgba(229,81,255,.36);

  background:
    rgba(203,52,255,.13);
}


.mr3d-app-mode-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:12px;
}


.mr3d-app-mode-card{
  position:relative;

  min-height:102px;

  padding:14px;

  display:grid;

  grid-template-columns:52px 1fr 30px;

  align-items:center;

  gap:12px;

  border-radius:18px;

  border:
    1px solid rgba(89,139,255,.23);

  background:
    rgba(10,29,68,.78);
}


.mr3d-app-mode-card.active{
  border:
    1px solid rgba(234,77,255,.76);

  background:
    radial-gradient(
      circle at 5% 50%,
      rgba(226,48,255,.20),
      transparent 45%
    ),
    rgba(48,19,91,.80);

  box-shadow:
    0 0 27px rgba(216,58,255,.19),
    inset 0 1px 0 rgba(255,255,255,.06);
}


.mr3d-app-mode-icon{
  width:50px;
  height:50px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:15px;

  font-size:23px;
}


.mr3d-app-mode-icon.exclusive{
  color:#ff78ec;

  background:
    rgba(213,54,255,.17);

  border:
    1px solid rgba(225,82,255,.31);
}


.mr3d-app-mode-icon.open{
  background:
    rgba(31,161,255,.13);

  border:
    1px solid rgba(44,190,255,.31);
}


.mr3d-app-mode-text strong{
  display:block;

  margin-bottom:4px;

  color:#fff;

  font-size:14px;
}


.mr3d-app-mode-text span{
  display:block;

  color:#afbddf;

  font-size:10px;

  line-height:1.35;
}


.mr3d-app-mode-check{
  width:29px;
  height:29px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#fff;

  font-size:17px;
  font-weight:900;

  background:
    linear-gradient(
      145deg,
      #ed52ff,
      #985bff
    );

  box-shadow:
    0 0 17px rgba(228,75,255,.32);
}


.mr3d-app-mode-empty{
  width:27px;
  height:27px;

  border-radius:50%;

  border:
    1px solid rgba(116,157,255,.47);

  background:
    rgba(7,23,55,.66);
}


/* =========================
   ROOMS
   ========================= */

.mr3d-app-rooms-toggle{
  width:100%;

  min-height:60px;

  margin-top:14px;

  padding:10px 15px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  color:#fff;

  cursor:pointer;

  border-radius:19px;

  background:
    rgba(5,21,52,.80);

  border:
    1px solid rgba(94,146,255,.25);

  box-shadow:
    0 10px 25px rgba(0,0,0,.19);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}


.mr3d-app-rooms-left{
  display:flex!important;

  align-items:center;

  gap:10px;

  text-align:left;
}


.mr3d-app-room-icon{
  width:38px;
  height:38px;

  margin:0!important;

  display:flex!important;

  align-items:center;
  justify-content:center;

  border-radius:12px;

  background:
    rgba(210,57,255,.12);

  color:#f364e2;

  font-size:19px!important;
}


.mr3d-app-rooms-left b{
  display:block;

  font-size:12px;
}


.mr3d-app-rooms-left small{
  display:block;

  margin-top:2px;

  color:#9eacd0;

  font-size:9px;
}


.mr3d-app-card #mr3dActiveRoomsCount{
  min-width:30px!important;
  height:28px!important;

  margin-left:5px!important;

  display:flex!important;

  align-items:center!important;
  justify-content:center!important;

  border-radius:999px!important;

  color:#fff!important;

  background:
    linear-gradient(
      145deg,
      #4d5cff,
      #329fff
    )!important;

  border:0!important;

  box-shadow:
    0 0 17px rgba(70,121,255,.30)!important;
}


.mr3d-app-rooms-panel{
  margin-top:8px;

  padding:12px;

  border-radius:18px;

  color:#aebadb;

  background:
    rgba(4,18,46,.88);

  border:
    1px solid rgba(86,142,255,.20);
}


/* =========================
   MOBILE
   ========================= */

@media(max-width:768px){

  .mr3d-app-card{
    padding:12px!important;
  }


  .mr3d-app-header{
    align-items:flex-start;
  }


  .mr3d-app-brand strong{
    font-size:16px;
  }


  .mr3d-app-player{
    grid-template-columns:74px 1fr;

    gap:12px;

    min-height:125px;

    padding:14px;
  }


  .mr3d-app-card #radioPlayBtn{
    width:70px!important;
    height:70px!important;
    min-width:70px!important;

    font-size:23px!important;
  }


  .mr3d-app-track strong{
    font-size:18px;
  }


  .mr3d-app-mini-wave{
    width:45px;
    height:45px;
  }


  .mr3d-app-sono{
    grid-template-columns:48px 1fr;
  }


  .mr3d-app-sono-btn{
    grid-column:1 / -1;

    width:100%;

    min-width:0;
  }


  .mr3d-app-mode-grid{
    grid-template-columns:1fr;
  }


  .mr3d-app-mode-head{
    align-items:flex-start;

    flex-direction:column;
  }


  .mr3d-app-rooms-left small{
    display:none;
  }

}

/* =========================================================
   FIX DEFINITIF ORDRE DES COUCHES
   fond -> voile -> interface
   ========================================================= */

/* COUCHE 1 : vraie image de fond */
.mr3d-radio-card.mr3d-app-card > img.mr3d-app-bg{
  position:absolute!important;
  inset:0!important;

  width:100%!important;
  height:100%!important;

  object-fit:cover!important;
  object-position:center top!important;

  display:block!important;

  z-index:0!important;

  pointer-events:none!important;
}

/* COUCHE 2 : voile de lisibilité */
.mr3d-radio-card.mr3d-app-card > .mr3d-app-shade{
  position:absolute!important;
  inset:0!important;

  z-index:1!important;

  pointer-events:none!important;

  background:
    linear-gradient(
      180deg,
      rgba(3,9,27,.08) 0%,
      rgba(3,9,27,.16) 28%,
      rgba(3,9,27,.34) 58%,
      rgba(3,9,27,.55) 100%
    )!important;
}

/* COUCHE 3 : tous les vrais éléments cliquables */
.mr3d-radio-card.mr3d-app-card
> *:not(.mr3d-app-bg):not(.mr3d-app-shade){
  position:relative!important;
  z-index:2!important;
}


/* =========================================================
   MAGICALRADIO3D — APP RADIO PREMIUM V2
   FINITION VISUELLE
   ========================================================= */


/* =========================================================
   CARTE GLOBALE
   ========================================================= */

.mr3d-app-card{
  padding:16px!important;

  border-radius:30px!important;

  border:1px solid rgba(83,205,255,.48)!important;

  box-shadow:
    0 0 0 1px rgba(231,65,255,.14),
    0 0 42px rgba(67,111,255,.22),
    0 28px 70px rgba(0,0,0,.48)!important;
}


/* Fond légèrement cinématique */
.mr3d-app-bg{
  filter:
    brightness(.82)
    saturate(1.14)
    contrast(1.04)!important;

  transform:scale(1.015)!important;
}


/* Voile général :
   plus sombre derrière les fonctions,
   mais le décor reste bien visible */
.mr3d-app-shade{
  background:
    radial-gradient(
      circle at 20% 8%,
      rgba(2,8,25,.72) 0%,
      rgba(2,8,25,.36) 33%,
      transparent 55%
    ),
    linear-gradient(
      180deg,
      rgba(2,8,24,.10) 0%,
      rgba(3,10,29,.22) 35%,
      rgba(3,11,31,.49) 72%,
      rgba(2,8,24,.67) 100%
    )!important;
}


/* =========================================================
   HEADER — vraie barre d'application
   Elle masque proprement le texte déjà présent dans l'image
   ========================================================= */

.mr3d-app-header{
  padding:13px 15px!important;
  margin-bottom:13px!important;

  border-radius:20px!important;

  background:
    linear-gradient(
      105deg,
      rgba(3,14,38,.88),
      rgba(8,22,54,.74)
    )!important;

  border:1px solid rgba(102,177,255,.22)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 30px rgba(0,0,0,.20)!important;

  backdrop-filter:blur(15px)!important;
  -webkit-backdrop-filter:blur(15px)!important;
}


.mr3d-app-wave-icon{
  width:52px!important;
  height:52px!important;

  font-size:29px!important;

  border-radius:17px!important;

  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255,101,238,.30),
      rgba(170,60,255,.20) 52%,
      rgba(44,183,255,.12)
    )!important;

  border:1px solid rgba(231,92,255,.39)!important;

  box-shadow:
    0 0 22px rgba(223,65,255,.20),
    inset 0 1px 0 rgba(255,255,255,.10)!important;
}


.mr3d-app-kicker{
  color:#65eeff!important;

  font-size:10px!important;
}


.mr3d-app-brand strong{
  font-size:22px!important;
  letter-spacing:-.025em!important;
}


.mr3d-app-brand span{
  font-size:12px!important;
  color:#c3cee8!important;
}


.mr3d-app-live{
  padding:9px 13px!important;

  background:
    linear-gradient(
      135deg,
      rgba(24,220,151,.20),
      rgba(10,117,89,.22)
    )!important;

  box-shadow:
    0 0 22px rgba(52,255,186,.14)!important;
}


/* =========================================================
   PLAYER CENTRAL
   ========================================================= */

.mr3d-app-player{
  min-height:160px!important;

  grid-template-columns:110px 1fr!important;

  gap:22px!important;

  padding:20px 22px!important;

  border-radius:25px!important;

  background:
    radial-gradient(
      circle at 8% 50%,
      rgba(222,58,255,.14),
      transparent 27%
    ),
    radial-gradient(
      circle at 94% 30%,
      rgba(46,207,255,.10),
      transparent 28%
    ),
    linear-gradient(
      115deg,
      rgba(4,16,44,.88),
      rgba(11,27,67,.77)
    )!important;

  border:1px solid rgba(105,158,255,.31)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 36px rgba(87,67,255,.05),
    0 18px 42px rgba(0,0,0,.29)!important;
}


/* =========================================================
   PLAY
   ========================================================= */

.mr3d-app-card #radioPlayBtn{
  width:98px!important;
  height:98px!important;
  min-width:98px!important;

  font-size:32px!important;

  box-shadow:
    0 0 0 8px rgba(205,64,255,.07),
    0 0 22px rgba(231,68,255,.52),
    0 0 48px rgba(50,210,255,.28),
    0 16px 35px rgba(0,0,0,.42)!important;
}


.mr3d-app-card #radioPlayBtn:hover{
  transform:
    translateY(-2px)
    scale(1.06)!important;

  filter:
    brightness(1.16)
    saturate(1.12)!important;
}


/* =========================================================
   INFOS RADIO
   ========================================================= */

.mr3d-app-track small{
  display:flex!important;
  align-items:center!important;

  gap:6px!important;

  margin-bottom:5px!important;

  color:#6deeff!important;

  font-size:10px!important;
}


.mr3d-app-track small::before{
  content:"";

  width:7px;
  height:7px;

  border-radius:50%;

  background:#48ffc1;

  box-shadow:
    0 0 10px rgba(72,255,193,.75);
}


.mr3d-app-track strong{
  font-size:26px!important;

  letter-spacing:-.035em!important;

  text-shadow:
    0 2px 12px rgba(0,0,0,.28)!important;
}


.mr3d-app-track span{
  font-size:12px!important;
}


/* =========================================================
   MINI ONDE
   ========================================================= */

.mr3d-app-mini-wave{
  width:68px!important;
  height:62px!important;

  border-radius:18px!important;

  background:
    linear-gradient(
      145deg,
      rgba(162,68,255,.13),
      rgba(41,180,255,.08)
    )!important;

  border:1px solid rgba(151,108,255,.19)!important;

  box-shadow:
    inset 0 0 22px rgba(91,73,255,.09),
    0 0 24px rgba(73,135,255,.08)!important;
}


.mr3d-app-mini-wave i{
  width:5px!important;

  box-shadow:
    0 0 10px rgba(104,137,255,.46)!important;
}


/* =========================================================
   VOLUME PRO
   ========================================================= */

.mr3d-app-volume{
  margin-top:18px!important;

  min-height:45px!important;

  padding:8px 14px!important;

  background:
    rgba(1,10,29,.62)!important;

  border:1px solid rgba(101,157,255,.18)!important;
}


.mr3d-app-volume input{
  height:7px!important;

  cursor:pointer!important;
}


.mr3d-app-volume input::-webkit-slider-runnable-track{
  height:7px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #ed40de,
      #9c55ff 50%,
      #42d8ff
    );
}


.mr3d-app-volume input::-webkit-slider-thumb{
  width:18px;
  height:18px;

  margin-top:-5px;

  appearance:none;
  -webkit-appearance:none;

  border-radius:50%;

  border:2px solid rgba(255,255,255,.90);

  background:#45dcff;

  box-shadow:
    0 0 12px rgba(69,220,255,.65);
}


/* =========================================================
   STATUS
   ========================================================= */

.mr3d-app-status{
  padding-top:9px!important;
}


.mr3d-app-status span{
  font-size:11px!important;
}


.mr3d-app-status strong{
  padding:5px 9px!important;

  border-radius:999px!important;

  color:#64f6d4!important;

  background:rgba(27,207,157,.08)!important;

  border:1px solid rgba(70,238,192,.12)!important;
}


/* =========================================================
   TA SONO
   ========================================================= */

.mr3d-app-sono{
  position:relative!important;

  min-height:92px!important;

  grid-template-columns:62px 1fr auto!important;

  gap:16px!important;

  padding:17px!important;

  overflow:hidden!important;

  background:
    radial-gradient(
      circle at 5% 50%,
      rgba(239,54,255,.18),
      transparent 29%
    ),
    linear-gradient(
      110deg,
      rgba(50,21,98,.82),
      rgba(20,31,81,.78)
    )!important;

  border:1px solid rgba(220,77,255,.42)!important;

  box-shadow:
    0 0 28px rgba(193,54,255,.10),
    0 14px 34px rgba(0,0,0,.22)!important;
}


.mr3d-app-sono::after{
  content:"";

  position:absolute;

  left:0;
  bottom:0;

  width:100%;
  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #f144e1,
      #8658ff,
      #3bdcff,
      transparent
    );

  opacity:.80;
}


.mr3d-app-sono-icon{
  width:58px!important;
  height:58px!important;

  font-size:27px!important;

  border-radius:18px!important;

  box-shadow:
    0 0 22px rgba(209,62,255,.16)!important;
}


.mr3d-app-sono-copy strong{
  font-size:19px!important;
}


.mr3d-app-sono-copy span{
  font-size:12px!important;
}


.mr3d-app-sono-btn{
  min-width:205px!important;
  min-height:62px!important;

  border-radius:19px!important;

  box-shadow:
    0 0 30px rgba(221,55,255,.30),
    0 13px 29px rgba(48,79,220,.30),
    inset 0 1px 0 rgba(255,255,255,.20)!important;
}


.mr3d-app-sono-btn b{
  font-size:16px!important;
}


.mr3d-app-sono-btn small{
  font-size:10px!important;
}


/* =========================================================
   MODE ACTUEL
   ========================================================= */

.mr3d-app-mode{
  padding:18px!important;

  border-radius:24px!important;

  background:
    linear-gradient(
      145deg,
      rgba(3,17,45,.84),
      rgba(8,24,59,.80)
    )!important;

  border:1px solid rgba(102,152,255,.26)!important;
}


.mr3d-app-mode-head{
  margin-bottom:16px!important;
}


.mr3d-app-mode-head small{
  font-size:10px!important;
}


.mr3d-app-mode-head strong{
  font-size:17px!important;
}


.mr3d-app-mode-badge{
  padding:8px 11px!important;

  font-size:10px!important;

  box-shadow:
    0 0 18px rgba(212,65,255,.12)!important;
}


/* Deux vraies cartes */
.mr3d-app-mode-grid{
  gap:14px!important;
}


.mr3d-app-mode-card{
  min-height:118px!important;

  grid-template-columns:58px 1fr 34px!important;

  gap:14px!important;

  padding:16px!important;

  border-radius:20px!important;

  background:
    linear-gradient(
      140deg,
      rgba(8,28,66,.90),
      rgba(8,24,58,.78)
    )!important;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease!important;
}


.mr3d-app-mode-card:hover{
  transform:translateY(-2px)!important;
}


.mr3d-app-mode-card.active{
  background:
    radial-gradient(
      circle at 8% 50%,
      rgba(233,50,255,.27),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(65,19,104,.91),
      rgba(31,22,84,.88)
    )!important;

  border:1px solid rgba(241,78,255,.88)!important;

  box-shadow:
    0 0 0 1px rgba(224,67,255,.11),
    0 0 32px rgba(217,57,255,.21),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}


/* mode ouvert bleu */
#mr3dModeOpen{
  border-color:
    rgba(52,172,255,.28)!important;
}


#mr3dModeOpen:hover{
  border-color:
    rgba(55,208,255,.55)!important;

  box-shadow:
    0 0 26px rgba(48,164,255,.12)!important;
}


.mr3d-app-mode-icon{
  width:56px!important;
  height:56px!important;

  font-size:26px!important;

  border-radius:17px!important;
}


.mr3d-app-mode-text strong{
  font-size:16px!important;
}


.mr3d-app-mode-text span{
  font-size:12px!important;

  line-height:1.42!important;
}


/* =========================================================
   ROOMS
   ========================================================= */

.mr3d-app-rooms-toggle{
  min-height:68px!important;

  padding:11px 16px!important;

  border-radius:21px!important;

  background:
    linear-gradient(
      110deg,
      rgba(4,20,52,.88),
      rgba(13,27,67,.83)
    )!important;

  border:1px solid rgba(92,154,255,.29)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 28px rgba(0,0,0,.20)!important;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease!important;
}


.mr3d-app-rooms-toggle:hover{
  transform:translateY(-1px)!important;

  border-color:
    rgba(67,208,255,.48)!important;

  background:
    linear-gradient(
      110deg,
      rgba(7,29,70,.94),
      rgba(18,34,82,.90)
    )!important;
}


.mr3d-app-room-icon{
  width:43px!important;
  height:43px!important;

  font-size:20px!important;

  border-radius:14px!important;

  box-shadow:
    0 0 18px rgba(215,56,255,.12)!important;
}


.mr3d-app-rooms-left b{
  font-size:14px!important;
}


.mr3d-app-rooms-left small{
  font-size:10px!important;
}


.mr3d-app-card #mr3dActiveRoomsCount{
  min-width:33px!important;
  height:31px!important;

  font-size:12px!important;
}


#mr3dActiveRoomsArrow{
  font-size:20px!important;

  color:#76dfff!important;

  margin-right:4px!important;
}


/* =========================================================
   PANNEAU ROOMS OUVERT
   ========================================================= */

.mr3d-app-rooms-panel{
  padding:15px!important;

  border-radius:20px!important;

  background:
    rgba(3,16,42,.91)!important;

  border:
    1px solid rgba(77,163,255,.23)!important;

  box-shadow:
    0 14px 30px rgba(0,0,0,.22)!important;
}


/* =========================================================
   RESPONSIVE POUR TA LARGEUR ACTUELLE
   ========================================================= */

@media(max-width:1050px){

  .mr3d-app-mode-grid{
    grid-template-columns:1fr 1fr!important;
  }

}


@media(max-width:720px){

  .mr3d-app-header{
    padding:11px!important;
  }

  .mr3d-app-live{
    font-size:8px!important;
  }

  .mr3d-app-player{
    grid-template-columns:80px 1fr!important;

    gap:13px!important;

    padding:15px!important;
  }

  .mr3d-app-card #radioPlayBtn{
    width:75px!important;
    height:75px!important;
    min-width:75px!important;
  }

  .mr3d-app-track strong{
    font-size:20px!important;
  }

  .mr3d-app-mini-wave{
    width:50px!important;
    height:50px!important;
  }

  .mr3d-app-sono{
    grid-template-columns:52px 1fr!important;
  }

  .mr3d-app-sono-btn{
    grid-column:1/-1!important;

    width:100%!important;
    min-width:0!important;
  }

  .mr3d-app-mode-grid{
    grid-template-columns:1fr!important;
  }

}


/* =========================================================
   MAGICALRADIO3D — FLAT OVERLAY
   UNE SEULE CARTE / ELEMENTS FLOTTANTS
   ========================================================= */


/* =========================================================
   CARTE GLOBALE = SEUL VRAI CONTENEUR
   ========================================================= */

.mr3d-app-card{
  padding:22px 24px 20px!important;
  border-radius:30px!important;

  background:#06142d!important;

  border:1px solid rgba(72,209,255,.42)!important;

  box-shadow:
    0 0 0 1px rgba(228,57,255,.12),
    0 0 40px rgba(61,115,255,.22),
    0 26px 65px rgba(0,0,0,.46)!important;
}


/* Fond plus vivant */
.mr3d-app-bg{
  filter:
    brightness(.90)
    saturate(1.16)
    contrast(1.05)!important;
}


/* Grand voile unique pour toute la carte */
.mr3d-app-shade{
  background:
    linear-gradient(
      90deg,
      rgba(3,10,29,.48) 0%,
      rgba(3,10,29,.18) 45%,
      rgba(3,10,29,.08) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3,10,29,.08) 0%,
      rgba(3,10,29,.16) 35%,
      rgba(3,10,29,.40) 72%,
      rgba(3,10,29,.62) 100%
    )!important;
}


/* =========================================================
   HEADER FLOTTANT
   ========================================================= */

.mr3d-app-header{
  margin:0 0 18px!important;
  padding:0 4px 12px!important;

  background:transparent!important;
  border:0!important;
  box-shadow:none!important;

  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;

  border-bottom:
    1px solid rgba(98,203,255,.20)!important;
}


.mr3d-app-wave-icon{
  background:
    rgba(13,18,51,.42)!important;

  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;

  box-shadow:
    0 0 24px rgba(217,61,255,.22)!important;
}


.mr3d-app-brand strong{
  font-size:23px!important;

  text-shadow:
    0 2px 8px rgba(0,0,0,.55),
    0 0 20px rgba(71,206,255,.18)!important;
}


.mr3d-app-brand span{
  text-shadow:
    0 2px 7px rgba(0,0,0,.65)!important;
}


/* =========================================================
   PLAYER = PAS DE GROS RECTANGLE
   ========================================================= */

.mr3d-app-player{
  min-height:150px!important;

  padding:10px 6px 18px!important;

  grid-template-columns:112px 1fr!important;

  gap:22px!important;

  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;

  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;

  border-bottom:
    1px solid rgba(105,160,255,.18)!important;
}


/* Bouton Play flottant */
.mr3d-app-card #radioPlayBtn{
  width:98px!important;
  height:98px!important;
  min-width:98px!important;

  box-shadow:
    0 0 0 8px rgba(208,64,255,.06),
    0 0 27px rgba(229,65,255,.58),
    0 0 52px rgba(47,210,255,.34),
    0 17px 34px rgba(0,0,0,.42)!important;
}


/* Texte radio */
.mr3d-app-track strong{
  font-size:28px!important;

  text-shadow:
    0 3px 10px rgba(0,0,0,.70)!important;
}


.mr3d-app-track span,
.mr3d-app-track small{
  text-shadow:
    0 2px 6px rgba(0,0,0,.80)!important;
}


/* Mini onde = objet flottant */
.mr3d-app-mini-wave{
  background:
    rgba(8,18,47,.32)!important;

  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;

  border:
    1px solid rgba(129,112,255,.15)!important;

  box-shadow:
    0 0 20px rgba(74,127,255,.09)!important;
}


/* =========================================================
   VOLUME FLOTTANT
   ========================================================= */

.mr3d-app-volume{
  margin-top:18px!important;
  padding:8px 4px!important;

  background:transparent!important;
  border:0!important;
  box-shadow:none!important;

  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}


.mr3d-app-volume input{
  filter:
    drop-shadow(0 0 7px rgba(184,68,255,.22))!important;
}


/* Status sans rectangle */
.mr3d-app-status{
  padding:7px 4px 0!important;
}


.mr3d-app-status strong{
  background:rgba(4,30,37,.32)!important;

  border:0!important;

  box-shadow:
    0 0 13px rgba(79,241,207,.08)!important;
}


/* =========================================================
   TA SONO = BANDEAU FLOTTANT
   ========================================================= */

.mr3d-app-sono{
  margin-top:18px!important;

  min-height:82px!important;

  padding:13px 7px!important;

  background:transparent!important;

  border:0!important;
  border-radius:0!important;

  box-shadow:none!important;

  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;

  border-bottom:
    1px solid rgba(214,70,255,.22)!important;
}


.mr3d-app-sono::after{
  display:none!important;
}


.mr3d-app-sono-icon{
  background:
    rgba(72,28,105,.38)!important;

  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;

  box-shadow:
    0 0 22px rgba(212,63,255,.17)!important;
}


.mr3d-app-sono-copy strong{
  font-size:20px!important;

  text-shadow:
    0 2px 8px rgba(0,0,0,.60)!important;
}


.mr3d-app-sono-copy span{
  text-shadow:
    0 2px 6px rgba(0,0,0,.65)!important;
}


/* Le bouton reste la pièce forte */
.mr3d-app-sono-btn{
  border-radius:999px!important;

  min-width:215px!important;

  box-shadow:
    0 0 28px rgba(222,55,255,.36),
    0 12px 28px rgba(37,106,226,.30),
    inset 0 1px 0 rgba(255,255,255,.25)!important;
}


/* =========================================================
   MODE ACTUEL = AUCUNE CARTE PARENTE
   ========================================================= */

.mr3d-app-mode{
  margin-top:17px!important;

  padding:4px 4px 17px!important;

  background:transparent!important;

  border:0!important;
  border-radius:0!important;

  box-shadow:none!important;

  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;

  border-bottom:
    1px solid rgba(86,178,255,.18)!important;
}


.mr3d-app-mode-head{
  margin-bottom:15px!important;
}


.mr3d-app-mode-head strong{
  font-size:18px!important;

  text-shadow:
    0 2px 8px rgba(0,0,0,.65)!important;
}


/* Badge flottant */
.mr3d-app-mode-badge{
  background:
    rgba(103,25,116,.38)!important;

  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;

  box-shadow:
    0 0 18px rgba(215,58,255,.14)!important;
}


/* =========================================================
   LES 2 MODES = PLAQUES LUMINEUSES
   PAS DE GROS RECTANGLES
   ========================================================= */

.mr3d-app-mode-grid{
  gap:18px!important;
}


.mr3d-app-mode-card{
  min-height:100px!important;

  padding:12px 10px!important;

  background:
    rgba(5,19,49,.20)!important;

  border:
    1px solid rgba(79,149,255,.16)!important;

  border-radius:18px!important;

  box-shadow:none!important;

  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
}


/* Actif = halo, pas grosse carte */
.mr3d-app-mode-card.active{
  background:
    linear-gradient(
      110deg,
      rgba(210,39,229,.15),
      rgba(100,55,255,.08),
      rgba(5,19,49,.14)
    )!important;

  border:
    1px solid rgba(244,69,255,.72)!important;

  box-shadow:
    0 0 20px rgba(226,55,255,.20),
    inset 0 0 22px rgba(219,58,255,.06)!important;
}


/* Ouvert = bleu discret */
#mr3dModeOpen{
  background:
    linear-gradient(
      110deg,
      rgba(38,129,255,.10),
      rgba(5,19,49,.15)
    )!important;

  border:
    1px solid rgba(49,184,255,.28)!important;
}


/* Icônes comme objets flottants */
.mr3d-app-mode-icon{
  background:
    rgba(15,27,65,.45)!important;

  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}


.mr3d-app-mode-icon.exclusive{
  border:
    1px solid rgba(237,75,255,.38)!important;

  box-shadow:
    0 0 19px rgba(222,62,255,.14)!important;
}


.mr3d-app-mode-icon.open{
  border:
    1px solid rgba(63,201,255,.34)!important;

  box-shadow:
    0 0 19px rgba(55,183,255,.12)!important;
}


.mr3d-app-mode-text strong{
  font-size:17px!important;

  text-shadow:
    0 2px 7px rgba(0,0,0,.68)!important;
}


.mr3d-app-mode-text span{
  font-size:12px!important;

  text-shadow:
    0 2px 5px rgba(0,0,0,.65)!important;
}


/* =========================================================
   ROOMS = LIGNE FLOTTANTE EN BAS
   ========================================================= */

.mr3d-app-rooms-toggle{
  margin-top:14px!important;

  min-height:64px!important;

  padding:10px 5px!important;

  background:transparent!important;

  border:0!important;
  border-radius:0!important;

  box-shadow:none!important;

  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}


.mr3d-app-rooms-toggle:hover{
  background:
    rgba(25,67,121,.10)!important;

  border-radius:16px!important;
}


.mr3d-app-room-icon{
  background:
    rgba(74,24,98,.37)!important;

  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}


.mr3d-app-rooms-left b{
  font-size:15px!important;

  text-shadow:
    0 2px 7px rgba(0,0,0,.67)!important;
}


/* panneau ouvert seulement = vraie surface */
.mr3d-app-rooms-panel{
  margin-top:5px!important;

  background:
    rgba(3,15,39,.72)!important;

  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:720px){

  .mr3d-app-card{
    padding:14px!important;
  }

  .mr3d-app-header{
    padding:0 0 11px!important;
  }

  .mr3d-app-player{
    grid-template-columns:78px 1fr!important;
    padding:8px 0 16px!important;
  }

  .mr3d-app-card #radioPlayBtn{
    width:74px!important;
    height:74px!important;
    min-width:74px!important;
  }

  .mr3d-app-track strong{
    font-size:20px!important;
  }

  .mr3d-app-sono{
    padding-left:0!important;
    padding-right:0!important;
  }

  .mr3d-app-mode{
    padding-left:0!important;
    padding-right:0!important;
  }

}

/* =========================================================
   MAGICALRADIO3D — FREE LAYOUT
   LE FOND EST LA CARTE / PLUS DE CARTES DANS LA CARTE
   ========================================================= */


/* ---------------------------------------------------------
   HEADER : le décor contient déjà l'identité
   On garde seulement EN DIFFUSION
   --------------------------------------------------------- */

.mr3d-app-brand{
  display:none!important;
}

.mr3d-app-header{
  min-height:44px!important;

  display:flex!important;
  justify-content:flex-end!important;
  align-items:flex-start!important;

  margin:0!important;
  padding:8px 4px 0!important;

  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.mr3d-app-live{
  position:relative!important;

  background:rgba(3,40,35,.40)!important;

  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;

  border:1px solid rgba(67,255,185,.34)!important;

  box-shadow:
    0 0 18px rgba(54,255,182,.12)!important;
}


/* ---------------------------------------------------------
   PLAYER : uniquement PLAY + TITRE + VOLUME
   --------------------------------------------------------- */

.mr3d-app-player{
  min-height:128px!important;

  grid-template-columns:105px 1fr!important;

  padding:4px 7px 13px!important;

  margin-top:0!important;

  border:0!important;
  border-bottom:0!important;

  background:transparent!important;
  box-shadow:none!important;

  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}


/* Pas de labels inutiles */
.mr3d-app-track small{
  display:none!important;
}

.mr3d-app-track > span,
.mr3d-app-track-top > div > span{
  display:none!important;
}


/* Le nom reste seulement une fois près du Play */
.mr3d-app-track strong{
  font-size:25px!important;

  text-shadow:
    0 3px 10px rgba(0,0,0,.85),
    0 0 15px rgba(72,203,255,.12)!important;
}


/* mini onde : sans petite carte autour */
.mr3d-app-mini-wave{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;

  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}


/* ---------------------------------------------------------
   VOLUME LIBRE
   --------------------------------------------------------- */

.mr3d-app-volume{
  margin-top:15px!important;

  padding:6px 2px!important;

  background:transparent!important;

  border:0!important;
  box-shadow:none!important;
}


/* ---------------------------------------------------------
   ON CACHE LES TEXTES DE STATUT MAIS ON GARDE LE HTML
   pour que le JS continue à fonctionner
   --------------------------------------------------------- */

.mr3d-app-status{
  display:none!important;
}

#radioStatus{
  display:none!important;
}


/* ---------------------------------------------------------
   TA SONO : aucun conteneur
   --------------------------------------------------------- */

.mr3d-app-sono{
  min-height:78px!important;

  margin-top:10px!important;
  padding:10px 4px!important;

  background:transparent!important;

  border:0!important;
  border-bottom:0!important;

  box-shadow:none!important;

  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}


/* pas de carré derrière le casque */
.mr3d-app-sono-icon{
  width:48px!important;
  height:48px!important;

  background:transparent!important;

  border:0!important;

  box-shadow:
    0 0 18px rgba(223,62,255,.16)!important;
}


/* texte plus léger */
.mr3d-app-sono-copy strong{
  font-size:18px!important;
}

.mr3d-app-sono-copy span{
  font-size:10px!important;
  opacity:.82!important;
}


/* seul le bouton reste réellement dessiné */
.mr3d-app-sono-btn{
  border:0!important;

  box-shadow:
    0 0 24px rgba(226,54,255,.36),
    0 0 28px rgba(52,188,255,.18)!important;
}


/* ---------------------------------------------------------
   MODE ACTUEL : titre flottant
   --------------------------------------------------------- */

.mr3d-app-mode{
  margin-top:6px!important;

  padding:10px 4px!important;

  background:transparent!important;

  border:0!important;
  border-bottom:0!important;

  box-shadow:none!important;
}


.mr3d-app-mode-head{
  margin-bottom:10px!important;
}


/* Texte secondaire raccourci visuellement */
.mr3d-app-mode-head small{
  opacity:.75!important;
}


/* badge = seul petit élément encadré */
.mr3d-app-mode-badge{
  background:rgba(81,18,102,.34)!important;

  border:1px solid rgba(223,72,255,.28)!important;

  box-shadow:
    0 0 14px rgba(211,63,255,.12)!important;
}


/* ---------------------------------------------------------
   LES 2 MODES : PLUS DE CARTES
   --------------------------------------------------------- */

.mr3d-app-mode-grid{
  gap:8px!important;
}


/* Suppression totale des rectangles */
.mr3d-app-mode-card,
.mr3d-app-mode-card.active,
#mr3dModeOpen{
  min-height:85px!important;

  padding:8px 8px!important;

  background:transparent!important;

  border:0!important;

  box-shadow:none!important;

  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}


/* séparation uniquement avec une légère lumière */
.mr3d-app-mode-card:first-child{
  border-right:
    1px solid rgba(215,76,255,.18)!important;
}


/* pas de carré lourd autour des icônes */
.mr3d-app-mode-icon,
.mr3d-app-mode-icon.exclusive,
.mr3d-app-mode-icon.open{
  width:48px!important;
  height:48px!important;

  background:transparent!important;

  border:0!important;

  box-shadow:none!important;

  font-size:23px!important;
}


/* L'actif est indiqué seulement par le check + texte */
.mr3d-app-mode-card.active .mr3d-app-mode-text strong{
  color:#ff8bea!important;

  text-shadow:
    0 0 13px rgba(231,70,255,.26)!important;
}


/* Description plus discrète */
.mr3d-app-mode-text span{
  font-size:10px!important;

  opacity:.78!important;
}


/* check flottant */
.mr3d-app-mode-check{
  box-shadow:
    0 0 18px rgba(229,74,255,.40)!important;
}


/* cercle inactif très discret */
.mr3d-app-mode-empty{
  background:transparent!important;

  border:
    1px solid rgba(78,181,255,.45)!important;
}


/* ---------------------------------------------------------
   ROOMS : UNE SIMPLE LIGNE CLIQUABLE
   --------------------------------------------------------- */

.mr3d-app-rooms-toggle{
  min-height:56px!important;

  margin-top:8px!important;

  padding:7px 5px!important;

  background:transparent!important;

  border:0!important;

  box-shadow:none!important;
}


/* icône libre */
.mr3d-app-room-icon{
  width:36px!important;
  height:36px!important;

  background:transparent!important;

  border:0!important;

  box-shadow:none!important;
}


/* retire la phrase secondaire */
.mr3d-app-rooms-left small{
  display:none!important;
}


/* compteur reste */
.mr3d-app-card #mr3dActiveRoomsCount{
  box-shadow:
    0 0 15px rgba(63,122,255,.33)!important;
}


/* ---------------------------------------------------------
   Quelques traits lumineux seulement pour structurer
   --------------------------------------------------------- */

.mr3d-app-sono,
.mr3d-app-mode,
.mr3d-app-rooms-toggle{
  position:relative!important;
}

.mr3d-app-sono::before,
.mr3d-app-mode::before,
.mr3d-app-rooms-toggle::before{
  content:"";

  position:absolute;

  left:8%;
  right:8%;
  top:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(83,205,255,.14),
      rgba(220,74,255,.18),
      transparent
    );

  pointer-events:none;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:720px){

  .mr3d-app-player{
    grid-template-columns:76px 1fr!important;
  }

  .mr3d-app-track strong{
    font-size:19px!important;
  }

  .mr3d-app-mode-card:first-child{
    border-right:0!important;

    border-bottom:
      1px solid rgba(215,76,255,.15)!important;
  }

}

/* =========================================================
   MAGICALRADIO3D — FINAL CLEAN
   ========================================================= */


/* ---------------------------------------------------------
   PLAYER : PLAY + VOLUME UNIQUEMENT
   Le décor porte déjà l'identité de la radio
   --------------------------------------------------------- */

.mr3d-app-track-top{
  display:none!important;
}

.mr3d-app-player{
  min-height:105px!important;

  grid-template-columns:105px 1fr!important;

  align-items:center!important;

  padding:5px 8px 14px!important;
}

.mr3d-app-track{
  display:flex!important;
  align-items:center!important;

  min-width:0!important;
}


/* Volume devient l'élément principal à droite du Play */
.mr3d-app-volume{
  width:100%!important;

  margin:0!important;
  padding:7px 2px!important;
}

.mr3d-app-speaker{
  opacity:.80!important;
}


/* ---------------------------------------------------------
   PLAY encore un peu plus intégré au décor
   --------------------------------------------------------- */

.mr3d-app-card #radioPlayBtn{
  width:94px!important;
  height:94px!important;
  min-width:94px!important;

  box-shadow:
    0 0 0 6px rgba(197,62,255,.06),
    0 0 26px rgba(224,60,255,.46),
    0 0 48px rgba(42,211,255,.27),
    0 14px 30px rgba(0,0,0,.35)!important;
}


/* ---------------------------------------------------------
   TA SONO
   --------------------------------------------------------- */

.mr3d-app-sono{
  min-height:82px!important;

  padding:12px 8px!important;
}

.mr3d-app-sono-copy strong{
  font-size:19px!important;
}

.mr3d-app-sono-copy span{
  opacity:.66!important;
}

.mr3d-app-sono-btn{
  min-height:58px!important;
}


/* ---------------------------------------------------------
   MODES : uniquement l'essentiel
   --------------------------------------------------------- */

/* On retire les explications longues */
.mr3d-app-mode-text span{
  display:none!important;
}

.mr3d-app-mode-card{
  min-height:72px!important;

  grid-template-columns:50px 1fr 32px!important;

  padding:7px 10px!important;
}

.mr3d-app-mode-text strong{
  font-size:17px!important;
}

.mr3d-app-mode-icon{
  width:45px!important;
  height:45px!important;
}


/* Actif plus évident */
.mr3d-app-mode-card.active .mr3d-app-mode-text strong{
  color:#ff78ed!important;

  text-shadow:
    0 0 14px rgba(234,69,255,.35)!important;
}


/* ---------------------------------------------------------
   PLUS DE TRAITS ENTRE LES ELEMENTS
   --------------------------------------------------------- */

.mr3d-app-sono::before,
.mr3d-app-mode::before,
.mr3d-app-rooms-toggle::before{
  display:none!important;
}

.mr3d-app-player{
  border-bottom:0!important;
}

.mr3d-app-mode{
  border-bottom:0!important;
}


/* ---------------------------------------------------------
   ROOMS
   --------------------------------------------------------- */

.mr3d-app-rooms-toggle{
  min-height:52px!important;

  padding:5px 7px!important;

  margin-top:4px!important;
}

.mr3d-app-rooms-left b{
  font-size:15px!important;
}


/* ---------------------------------------------------------
   ESPACEMENT GLOBAL
   --------------------------------------------------------- */

.mr3d-app-sono{
  margin-top:5px!important;
}

.mr3d-app-mode{
  margin-top:5px!important;
}

.mr3d-app-mode-head{
  margin-bottom:7px!important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:720px){

  .mr3d-app-player{
    grid-template-columns:76px 1fr!important;
  }

  .mr3d-app-card #radioPlayBtn{
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
  }

}

/* =========================================================
   MAGICALRADIO3D - FINITION CLEAN
   On épure la carte sans casser la logique
   ========================================================= */


/* ---------------------------------------------------------
   1) ZONE SONO
   On retire le texte + l’icône casque
   --------------------------------------------------------- */

.mr3d-app-sono-copy{
  display:none!important;
}

.mr3d-app-sono-icon,
.mr3d-app-sono-ico,
.mr3d-app-sono-left{
  display:none!important;
}

.mr3d-app-sono{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;

  min-height:82px!important;
  padding:10px 14px!important;
  margin-top:8px!important;
}

.mr3d-app-sono-btn{
  min-width:230px!important;
  min-height:60px!important;

  margin-left:auto!important;

  border-radius:18px!important;

  box-shadow:
    0 0 22px rgba(232,73,255,.22),
    0 10px 24px rgba(0,0,0,.22)!important;
}


/* ---------------------------------------------------------
   2) TITRE MODE
   On garde MODE ACTUEL
   On retire le grand texte explicatif
   --------------------------------------------------------- */

.mr3d-app-mode-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;

  margin-bottom:12px!important;
}

.mr3d-app-mode-head strong,
.mr3d-app-mode-head .mr3d-app-mode-title,
.mr3d-app-mode-head .mr3d-mode-title{
  display:none!important;
}

.mr3d-app-mode-eyebrow,
.mr3d-app-mode-label{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;

  padding:7px 14px!important;
  border-radius:999px!important;

  font-size:.78rem!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;

  color:#7de7ff!important;

  background:linear-gradient(
    90deg,
    rgba(24,38,92,.72),
    rgba(76,24,118,.54)
  )!important;

  border:1px solid rgba(76,219,255,.35)!important;

  box-shadow:
    0 0 16px rgba(77,216,255,.10),
    inset 0 0 16px rgba(255,255,255,.04)!important;
}


/* ---------------------------------------------------------
   3) ZONE MODE
   Plus compact, mieux équilibré
   --------------------------------------------------------- */

.mr3d-app-mode{
  margin-top:10px!important;
  padding-top:2px!important;
}

.mr3d-app-mode-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:14px!important;
}

.mr3d-app-mode-card{
  min-height:88px!important;

  padding:12px 14px!important;

  border-radius:18px!important;

  display:grid!important;
  grid-template-columns:48px 1fr 34px!important;
  align-items:center!important;
  gap:12px!important;
}

.mr3d-app-mode-text strong{
  display:block!important;
  margin-bottom:2px!important;

  font-size:1.02rem!important;
  font-weight:900!important;
  line-height:1.1!important;
}

.mr3d-app-mode-text span{
  font-size:.82rem!important;
  line-height:1.25!important;
  opacity:.78!important;
}

.mr3d-app-mode-card.active{
  box-shadow:
    0 0 0 1px rgba(245,84,255,.16),
    0 0 22px rgba(236,79,255,.12),
    inset 0 0 18px rgba(255,255,255,.03)!important;
}


/* ---------------------------------------------------------
   4) PLAYER HAUT
   Un peu mieux placé
   --------------------------------------------------------- */

.mr3d-app-player{
  padding:12px 14px 12px!important;
  margin-top:4px!important;
}

.mr3d-app-track{
  margin-top:4px!important;
}

.mr3d-app-volume{
  margin-top:6px!important;
}

.mr3d-app-card #radioPlayBtn{
  width:92px!important;
  height:92px!important;
  min-width:92px!important;
}

.mr3d-app-status,
#radioStatus{
  font-size:.92rem!important;
  font-weight:800!important;
}


/* ---------------------------------------------------------
   5) ROOMS QUI ECOUTENT
   Plus propre et mieux aligné
   --------------------------------------------------------- */

.mr3d-app-rooms-toggle{
  min-height:54px!important;

  padding:8px 14px!important;
  margin-top:12px!important;

  border-radius:17px!important;
}

.mr3d-app-rooms-left{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}

.mr3d-app-rooms-left b,
#mr3dActiveRoomsCount{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  min-width:28px!important;
  height:28px!important;

  padding:0 8px!important;
  border-radius:999px!important;
}


/* ---------------------------------------------------------
   6) ON ENLEVE QUELQUES SURCHARGES VISUELLES
   --------------------------------------------------------- */

.mr3d-app-sono::before,
.mr3d-app-mode::before,
.mr3d-app-rooms-toggle::before{
  display:none!important;
}

.mr3d-app-player,
.mr3d-app-sono,
.mr3d-app-mode{
  border-bottom:0!important;
}


/* ---------------------------------------------------------
   7) MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px){

  .mr3d-app-mode-grid{
    grid-template-columns:1fr!important;
  }

  .mr3d-app-sono{
    justify-content:center!important;
  }

  .mr3d-app-sono-btn{
    width:100%!important;
    min-width:0!important;
  }
}

/* =========================================================
   MAGICALRADIO3D — REPOSITIONNEMENT FINAL
   ========================================================= */


/* ---------------------------------------------------------
   1. RETIRER COMPLETEMENT EMISSION MGR
   --------------------------------------------------------- */

.mr3d-app-mode-badge,
#mr3dRadioModeBadge{
  display:none!important;
}


/* ---------------------------------------------------------
   2. SONO : PLUS PRESENTE ET MIEUX PLACE
   --------------------------------------------------------- */

.mr3d-app-sono{
  display:flex!important;

  align-items:center!important;
  justify-content:flex-end!important;

  min-height:78px!important;

  margin-top:0!important;
  padding:8px 14px 12px!important;
}

.mr3d-app-sono-btn{
  width:255px!important;
  min-width:255px!important;

  min-height:64px!important;

  margin-right:2%!important;

  border-radius:22px!important;

  transform:translateY(-2px);

  box-shadow:
    0 0 30px rgba(232,53,255,.37),
    0 0 34px rgba(45,195,255,.20),
    0 12px 30px rgba(0,0,0,.28)!important;
}

.mr3d-app-sono-btn:hover{
  transform:
    translateY(-4px)
    scale(1.02)!important;
}


/* ---------------------------------------------------------
   3. MODE ACTUEL : REMONTE + PLUS IMPORTANT
   --------------------------------------------------------- */

.mr3d-app-mode{
  margin-top:-2px!important;

  padding:
    4px 12px
    8px!important;
}

.mr3d-app-mode-head{
  display:block!important;

  margin-bottom:8px!important;
}

.mr3d-app-mode-head small{
  display:inline-block!important;

  padding:6px 13px!important;

  color:#6fe9ff!important;

  font-size:11px!important;
  font-weight:900!important;

  letter-spacing:.16em!important;

  border-radius:999px!important;

  background:
    linear-gradient(
      90deg,
      rgba(18,94,139,.23),
      rgba(114,38,151,.18)
    )!important;

  box-shadow:
    0 0 18px rgba(64,205,255,.08)!important;
}


/* ---------------------------------------------------------
   4. MODES : DEUX GRANDES COMMANDES QUI PRENNENT L'ESPACE
   --------------------------------------------------------- */

.mr3d-app-mode-grid{
  width:100%!important;

  display:grid!important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr)!important;

  gap:28px!important;

  margin-top:5px!important;
}

.mr3d-app-mode-card,
.mr3d-app-mode-card.active,
#mr3dModeOpen{
  min-height:105px!important;

  padding:12px 18px!important;

  grid-template-columns:
    54px 1fr 36px!important;

  align-items:center!important;

  border-radius:20px!important;
}


/* Exclusif */
#mr3dModeExclusive{
  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(226,57,255,.20),
      transparent 55%
    )!important;

  border:
    1px solid rgba(236,68,255,.40)!important;

  box-shadow:
    0 0 24px rgba(221,58,255,.10)!important;
}


/* Ouvert */
#mr3dModeOpen{
  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(43,178,255,.18),
      transparent 55%
    )!important;

  border:
    1px solid rgba(57,194,255,.32)!important;

  box-shadow:
    0 0 24px rgba(48,176,255,.09)!important;
}


/* Icônes plus visibles */
.mr3d-app-mode-icon{
  width:52px!important;
  height:52px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  font-size:25px!important;

  border-radius:50%!important;
}

.mr3d-app-mode-icon.exclusive{
  background:
    rgba(212,49,255,.12)!important;

  box-shadow:
    0 0 18px rgba(225,62,255,.13)!important;
}

.mr3d-app-mode-icon.open{
  background:
    rgba(43,172,255,.10)!important;

  box-shadow:
    0 0 18px rgba(48,189,255,.12)!important;
}


/* Titres plus forts */
.mr3d-app-mode-text strong{
  font-size:18px!important;

  font-weight:900!important;

  letter-spacing:-.01em!important;
}

#mr3dModeExclusive .mr3d-app-mode-text strong{
  color:#ff7be9!important;
}

#mr3dModeOpen .mr3d-app-mode-text strong{
  color:#81e6ff!important;
}


/* ---------------------------------------------------------
   5. CHECK / CERCLE PLUS PRO
   --------------------------------------------------------- */

.mr3d-app-mode-check{
  width:34px!important;
  height:34px!important;

  font-size:19px!important;

  box-shadow:
    0 0 22px rgba(230,70,255,.46)!important;
}

.mr3d-app-mode-empty{
  width:32px!important;
  height:32px!important;

  border:
    2px solid rgba(74,190,255,.50)!important;
}


/* ---------------------------------------------------------
   6. ROOMS PLUS PROCHE DU RESTE
   --------------------------------------------------------- */

.mr3d-app-rooms-toggle{
  margin-top:4px!important;

  min-height:54px!important;

  padding:6px 14px!important;
}


/* ---------------------------------------------------------
   7. UTILISER UN PEU MIEUX LA HAUTEUR DE LA CARTE
   --------------------------------------------------------- */

.mr3d-app-player{
  min-height:95px!important;

  padding-bottom:5px!important;
}

.mr3d-app-sono{
  min-height:72px!important;
}

.mr3d-app-mode{
  min-height:150px!important;
}


/* ---------------------------------------------------------
   8. MOBILE
   --------------------------------------------------------- */

@media(max-width:720px){

  .mr3d-app-sono-btn{
    width:100%!important;
    min-width:0!important;
    margin-right:0!important;
  }

  .mr3d-app-mode-grid{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .mr3d-app-mode-card{
    min-height:80px!important;
  }

}

/* =========================================================
   MAGICALRADIO3D — SONO BUTTON SKIN PREMIUM 3D
   ========================================================= */


/* ---------------------------------------------------------
   1) LIGNE SONO : même ligne, bouton visuellement centré
   --------------------------------------------------------- */

.mr3d-app-sono{
  display:grid!important;
  grid-template-columns:1fr auto 1fr!important;
  align-items:center!important;

  gap:18px!important;

  min-height:92px!important;

  padding:14px 18px!important;
}

.mr3d-app-sono-copy{
  grid-column:1!important;
  align-self:center!important;
}

.mr3d-app-sono::after{
  content:""!important;
  grid-column:3!important;
  display:block!important;
  min-height:1px!important;
}


/* ---------------------------------------------------------
   2) TEXTE GAUCHE : plus compact, plus propre
   --------------------------------------------------------- */

.mr3d-app-sono-copy strong{
  display:block!important;
  margin:0 0 4px 0!important;

  font-size:1.05rem!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;

  color:#ffffff!important;
}

.mr3d-app-sono-copy span{
  display:block!important;

  font-size:.80rem!important;
  line-height:1.25!important;

  color:rgba(220,235,255,.78)!important;
}


/* ---------------------------------------------------------
   3) BOUTON : position centrale + aspect plus premium
   --------------------------------------------------------- */

.mr3d-app-sono-btn{
  grid-column:2!important;

  position:relative!important;
  overflow:hidden!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;

  width:270px!important;
  min-width:270px!important;
  min-height:72px!important;

  padding:14px 26px!important;

  border-radius:24px!important;
  border:1px solid rgba(255,255,255,.14)!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,120,255,.18) 0%,
      rgba(154,49,255,.22) 24%,
      rgba(112,34,205,.92) 52%,
      rgba(64,142,255,.92) 100%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -8px 16px rgba(0,0,0,.18),
    0 8px 18px rgba(17,8,48,.45),
    0 16px 38px rgba(225,62,255,.24),
    0 10px 22px rgba(31,198,255,.18)!important;

  transform:translateY(0)!important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease!important;
}


/* Brillance haute */
.mr3d-app-sono-btn::before{
  content:""!important;

  position:absolute!important;
  left:8%!important;
  right:8%!important;
  top:7%!important;
  height:40%!important;

  border-radius:999px!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.28),
      rgba(255,255,255,.03)
    )!important;

  pointer-events:none!important;
}


/* Relief bas / profondeur */
.mr3d-app-sono-btn::after{
  content:""!important;

  position:absolute!important;
  left:10%!important;
  right:10%!important;
  bottom:8px!important;
  height:16px!important;

  border-radius:999px!important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,.30) 0%,
      rgba(0,0,0,0) 75%
    )!important;

  pointer-events:none!important;
}


/* Hover */
.mr3d-app-sono-btn:hover{
  transform:
    translateY(-2px)
    scale(1.015)!important;

  filter:brightness(1.04)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -8px 16px rgba(0,0,0,.16),
    0 10px 22px rgba(16,8,45,.50),
    0 20px 44px rgba(234,60,255,.30),
    0 14px 28px rgba(34,197,255,.22)!important;
}


/* Click */
.mr3d-app-sono-btn:active{
  transform:
    translateY(1px)
    scale(.995)!important;

  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.22),
    0 6px 14px rgba(16,8,45,.30),
    0 10px 20px rgba(234,60,255,.16)!important;
}


/* ---------------------------------------------------------
   4) CONTENU DU BOUTON
   --------------------------------------------------------- */

.mr3d-app-sono-btn b{
  display:block!important;

  margin:0!important;

  font-size:1.28rem!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:-.02em!important;

  color:#ffffff!important;
}

.mr3d-app-sono-btn small{
  display:block!important;

  margin-top:4px!important;

  font-size:.73rem!important;
  line-height:1.1!important;

  color:rgba(245,250,255,.88)!important;
}

.mr3d-app-sono-btn .mr3d-sono-star{
  font-size:1.15rem!important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.28))!important;
}

.mr3d-app-sono-btn .mr3d-sono-arrow{
  font-size:1.35rem!important;
  font-weight:900!important;
  margin-left:2px!important;

  color:#ffffff!important;
}


/* ---------------------------------------------------------
   5) MOBILE
   --------------------------------------------------------- */

@media(max-width:780px){

  .mr3d-app-sono{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .mr3d-app-sono-copy{
    grid-column:auto!important;
    text-align:left!important;
  }

  .mr3d-app-sono::after{
    display:none!important;
  }

  .mr3d-app-sono-btn{
    grid-column:auto!important;
    width:100%!important;
    min-width:0!important;
  }
}