*{box-sizing:border-box}html{background:#06080d;color:#f6f8fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{margin:0;min-height:100vh;background:radial-gradient(circle at 70% 0,#152438 0,transparent 32%),linear-gradient(180deg,#080c13,#05070b 70%)}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.top{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,58px);border-bottom:1px solid #ffffff12;position:sticky;top:0;background:#080b11e8;backdrop-filter:blur(20px);z-index:20}.brand{display:flex;align-items:center;gap:12px}.brand b{letter-spacing:.16em}.brand span{font-size:10px;color:#7f8c9c;letter-spacing:.15em}.mini,.secondary{border:1px solid #ffffff1c;background:#ffffff08;color:#dbe8f4;border-radius:12px;padding:10px 13px;cursor:pointer}.intro{max-width:1160px;margin:auto;padding:clamp(44px,7vw,90px) 22px 32px}.intro small,.preview-head small{font-size:10px;letter-spacing:.18em;color:#72dfff;font-weight:900}.intro h1{font-size:clamp(38px,7vw,78px);line-height:.95;margin:13px 0 20px;letter-spacing:-.055em;max-width:800px}.intro h1 span:last-child{color:#71869b}.intro p{color:#9eabb8;max-width:730px;line-height:1.65;font-size:clamp(15px,2vw,18px)}.studio{max-width:1220px;margin:auto;padding:0 22px 70px;display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:28px}.panel,.preview-area{border:1px solid #ffffff12;background:#0b1018cc;border-radius:25px;box-shadow:0 25px 80px #0007}.panel{padding:22px}.step{display:flex;gap:12px;align-items:center;margin:5px 0 14px}.step>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#55dfff10;border:1px solid #55dfff35;color:#70e5ff;font-size:10px;font-weight:900}.step div{display:grid}.step small{color:#687889;margin-top:3px}.templates{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:24px}.tpl{min-height:96px;text-align:left;border:1px solid #ffffff10;background:#0e1520;color:#fff;border-radius:16px;padding:13px;cursor:pointer;position:relative;overflow:hidden}.tpl.active{border-color:#64dfff80;box-shadow:inset 0 0 25px #49dfff0d}.tpl i{display:block;width:30px;height:30px;margin-bottom:10px}.tpl b,.tpl small{display:block}.tpl small{color:#718193;font-size:10px;margin-top:3px}.t-orbit{border:1px solid #55e5ff;border-radius:50%;box-shadow:0 0 15px #55e5ff80}.t-glass{border-radius:9px;background:linear-gradient(135deg,#ffffff38,#59dfff18);border:1px solid #ffffff4a}.t-stage{border:1px solid #f5b866;border-radius:50% 50% 4px 4px}.t-pulse{background:repeating-linear-gradient(90deg,#ba7cff 0 2px,transparent 2px 5px)}label{display:grid;gap:7px;color:#91a0af;font-size:11px;font-weight:750;margin:11px 0}input{width:100%;border:1px solid #ffffff12;background:#070b11;color:#fff;border-radius:12px;padding:13px;outline:none}input:focus{border-color:#61dcff66}.testrow{display:flex;align-items:center;gap:12px;margin:8px 0 20px}.testrow span{font-size:11px;color:#758595}.primary{width:100%;border:0;background:linear-gradient(90deg,#43dfff,#3c83ff);color:#031019;border-radius:13px;padding:14px;font-weight:900;cursor:pointer}.result{margin-top:13px;border:1px solid #58dcff32;background:#58dcff08;border-radius:14px;padding:14px}.result p{font-size:11px;line-height:1.5;color:#8292a2}.result-actions{display:flex;gap:8px}.result canvas{width:100%;height:auto;margin-top:12px;border-radius:14px;background:white;padding:12px}.technical-note{margin-top:14px;padding:13px;border:1px solid #ffffff0f;border-radius:13px;background:#ffffff04}.technical-note b{font-size:11px;color:#b9ecff}.technical-note p{font-size:10px;line-height:1.5;color:#708091;margin:6px 0 0}.hidden{display:none}.preview-area{padding:20px;min-width:0}.preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.preview-head div{display:grid;gap:5px}.preview-head b{font-size:13px}.preview-head>span{font-size:9px;letter-spacing:.14em;color:#75e6ff;border:1px solid #63dcff30;border-radius:99px;padding:7px 9px}.device{width:min(390px,100%);aspect-ratio:9/18.6;margin:auto;background:#020305;border:7px solid #20252c;border-radius:45px;padding:7px;box-shadow:0 35px 100px #000,0 0 0 1px #ffffff18;position:relative}.speaker{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:76px;height:20px;border-radius:20px;background:#020305;z-index:5}.player{height:100%;border-radius:33px;overflow:hidden;position:relative;padding:38px 22px 20px;display:flex;flex-direction:column;align-items:center;background:#09101b;transition:background .35s ease}.ambient{position:absolute;inset:-20%;pointer-events:none}.stars,.stage-lights{position:absolute;inset:0;pointer-events:none}.station-top{width:100%;display:flex;justify-content:space-between;z-index:4;font-size:9px;letter-spacing:.18em;font-weight:900}.station-top i{width:7px;height:7px;border-radius:50%;background:#6affc8;box-shadow:0 0 14px #6affc8}.visual{height:43%;width:100%;display:grid;place-items:center;position:relative;z-index:2}.disc{width:min(58vw,190px);height:min(58vw,190px);max-width:190px;max-height:190px;border-radius:50%;display:grid;place-items:center;position:relative;transform-origin:center}.logo{width:70%;height:70%;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#0c121b;border:1px solid #ffffff22;box-shadow:0 0 60px #5bdcff24;transition:transform .08s linear,filter .08s linear,box-shadow .08s linear}.logo img{width:100%;height:100%;object-fit:cover;display:none}.logo span{font-size:55px;font-weight:950}.meta{text-align:center;z-index:3}.meta small{font-size:8px;letter-spacing:.2em;font-weight:900}.meta h2{font-size:clamp(24px,7vw,34px);margin:7px 0 5px;letter-spacing:-.04em;transition:text-shadow .12s ease,filter .12s ease}.meta p{margin:0;color:#8e9cab;font-size:11px}.wave{width:100%;height:42px;margin:12px 0;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 6px);mask:linear-gradient(0deg,transparent 5%,#000 30% 70%,transparent 95%);opacity:.18;z-index:2}.controls{z-index:4}.play{position:relative;width:64px;height:64px;border-radius:50%;color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.play-icon{position:relative;z-index:2}.play-ring{position:absolute;inset:-7px;border-radius:inherit;border:1px solid #ffffff20;pointer-events:none}.social-preview{display:flex;gap:9px;margin-top:16px;z-index:3;min-height:30px;align-items:center}.social-preview a{font-size:9px;color:#dce9f3;text-decoration:none}.install-hint{margin-top:auto;width:100%;border-top:1px solid #ffffff12;padding-top:13px;display:grid;gap:4px;z-index:3}.install-hint b{font-size:10px}.install-hint small{font-size:8px;color:#718192;line-height:1.4}.compat{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:18px}.compat span{font-size:9px;color:#8ea0b1;border:1px solid #ffffff10;padding:7px 9px;border-radius:99px}
/* Shared audio-reactive elements */
.bars{position:absolute;display:flex;align-items:center;justify-content:center;gap:3px;pointer-events:none}.bars i,.glass-meter i{display:block;transform-origin:center bottom;transition:height .06s linear,opacity .06s linear}.pulse-canvas{position:absolute;inset:auto 0 4%;width:100%;height:90px;opacity:0;pointer-events:none}.stage-vu{position:absolute;inset:auto 8% 7%;display:none;grid-template-columns:1fr 1fr;gap:14px}.vu{height:8px;border-radius:99px;background:#ffffff0b;overflow:hidden;border:1px solid #ffffff10}.vu span{display:block;height:100%;width:8%;background:linear-gradient(90deg,#52f0a8,#ffd062,#ff735e);transition:width .06s linear}
/* ORBIT */
.player.orbit{background:radial-gradient(circle at 50% 34%,#17324b,#080c16 55%,#040609)}.orbit .ambient{background:conic-gradient(from 0deg,#44dfff28,transparent,#6d72ff26,transparent,#44dfff28);animation:spin 12s linear infinite}.orbit .stars{background-image:radial-gradient(circle,#ffffff55 0 1px,transparent 1.5px);background-size:31px 31px;opacity:.28;animation:starsDrift 11s linear infinite}.orbit .disc{border:1px solid #68e9ff55;box-shadow:0 0 0 15px #61dfff08,0 0 0 32px #6f75ff08}.orbit .disc:after{content:"";position:absolute;inset:-22px;border:1px dashed #73e9ff3a;border-radius:50%;animation:spin 9s linear infinite}.orbit .orbit-reactive{position:absolute;inset:-32px;border-radius:50%;border:1px solid #6beaff40;box-shadow:0 0 35px #58e5ff22;transition:transform .06s linear,box-shadow .06s linear}.orbit .orbit-bars{width:240px;height:240px;border-radius:50%;opacity:.8}.orbit .orbit-bars i{position:absolute;left:50%;top:50%;width:2px;height:12px;background:linear-gradient(#a7f3ff,#52dfff);border-radius:4px;transform-origin:50% -93px}.orbit .wave{color:#6feaff}.orbit .play{border:1px solid #7feaff50;background:radial-gradient(circle,#17344a,#0b1620);box-shadow:0 0 30px #58e5ff28}.orbit .play-ring{border-color:#6feaff40;animation:orbitRing 2s ease-in-out infinite}.orbit .social-preview a{width:30px;height:30px;border-radius:50%;border:1px solid #6feaff2c;display:grid;place-items:center;background:#59dfff08}.orbit .meta h2{color:#f4fdff}
/* GLASS */
.player.glass{background:linear-gradient(160deg,#25354c,#0c1320 48%,#16101f)}.glass .ambient{background:radial-gradient(circle at 20% 20%,#8edfff55,transparent 30%),radial-gradient(circle at 90% 70%,#d780ff35,transparent 28%);filter:blur(18px);animation:glassFloat 7s ease-in-out infinite}.glass .disc{border-radius:30px;transform:rotate(-4deg);background:#ffffff08;border:1px solid #ffffff30;backdrop-filter:blur(18px);box-shadow:0 25px 55px #0008}.glass .logo{border-radius:22px}.glass .glass-meter{display:flex;position:absolute;left:8%;right:8%;bottom:3%;height:64px;align-items:end;justify-content:space-between;gap:3px}.glass .glass-meter i{flex:1;min-width:2px;height:12px;border-radius:5px;background:linear-gradient(#ffffffee,#74dfff88);box-shadow:0 0 9px #8ce8ff25}.glass .wave{opacity:0}.glass .play{border-radius:18px;border:1px solid #ffffff42;background:linear-gradient(145deg,#ffffff24,#ffffff0a);backdrop-filter:blur(16px);box-shadow:0 14px 28px #0005}.glass .play-ring{border-radius:22px;border-color:#ffffff20}.glass .social-preview a{padding:7px 11px;border-radius:12px;background:#ffffff0a;border:1px solid #ffffff22;backdrop-filter:blur(12px)}.glass .meta h2{text-shadow:0 0 0 transparent}
/* STAGE */
.player.stage{background:linear-gradient(#120c0b,#090706)}.stage .ambient{background:radial-gradient(ellipse at 50% 0,#ffb85a45,transparent 45%)}.stage .stage-lights:before,.stage .stage-lights:after{content:"";position:absolute;top:-6%;width:38%;height:62%;background:linear-gradient(#ffc36c55,transparent);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);filter:blur(7px);animation:stageSweep 4s ease-in-out infinite alternate}.stage .stage-lights:before{left:4%;transform:rotate(8deg)}.stage .stage-lights:after{right:4%;transform:rotate(-8deg);animation-delay:1.1s}.stage .disc{border:1px solid #ffc77655;box-shadow:0 0 80px #ff9d3733}.stage .stage-vu{display:grid}.stage .wave{opacity:0}.stage .play{width:70px;height:50px;border-radius:12px 12px 20px 20px;border:1px solid #ffc27155;background:linear-gradient(#4e2f14,#1e1209);box-shadow:0 0 26px #ffab4530}.stage .play-ring{border-radius:14px 14px 22px 22px;border-color:#ffc27135}.stage .social-preview{width:100%;justify-content:center}.stage .social-preview a{padding:6px 10px;border-top:1px solid #ffbe6d38;border-bottom:1px solid #ffbe6d18;color:#ffd7a4}.stage .meta h2{color:#fff3df}
/* PULSE */
.player.pulse{background:#050609}.pulse .ambient{background:linear-gradient(90deg,transparent,#9b63ff13,transparent);animation:pulseBg 4s ease-in-out infinite}.pulse .visual{height:38%}.pulse .disc{width:150px;height:150px;border:0}.pulse .logo{box-shadow:none;border:1px solid #ffffff18}.pulse .wave{opacity:0}.pulse .pulse-canvas{opacity:.9}.pulse .play{width:56px;height:56px;border:1px solid #a66cff55;background:#0a0810;box-shadow:0 0 40px #a66cff25}.pulse .play-ring{border-color:#a66cff45;animation:pulseRing 1.4s ease-in-out infinite}.pulse .social-preview{gap:5px}.pulse .social-preview a{font-size:8px;padding:5px 7px;border-radius:4px;border-left:2px solid #a66cff;background:#a66cff08}.pulse .meta h2{letter-spacing:-.02em}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes starsDrift{to{background-position:31px 62px}}@keyframes glassFloat{50%{transform:translate(5%,-4%) scale(1.04)}}@keyframes stageSweep{to{transform:rotate(20deg) translateX(10px)}}@keyframes pulseBg{50%{opacity:.45;transform:scaleX(1.2)}}@keyframes orbitRing{50%{transform:scale(1.1);opacity:.35}}@keyframes pulseRing{50%{transform:scale(1.18);opacity:.25}}
@media(max-width:860px){.studio{grid-template-columns:1fr}.preview-area{order:-1}.device{width:min(360px,92vw)}}
@media(max-width:480px){.top{height:58px}.brand span{display:none}.intro{padding-top:35px}.studio{padding-left:12px;padding-right:12px}.panel,.preview-area{border-radius:20px;padding:14px}.templates{gap:7px}.tpl{min-height:86px;padding:11px}.device{border-width:5px;border-radius:38px;padding:5px}.player{border-radius:30px;padding-left:18px;padding-right:18px}.preview-head b{font-size:11px}.preview-head>span{display:none}.orbit .orbit-bars{transform:scale(.84)}}
@media(max-width:350px){.templates{grid-template-columns:1fr}.intro h1{font-size:35px}.player{padding-left:14px;padding-right:14px}.install-hint small{font-size:7.5px}.disc{max-width:145px;max-height:145px}.orbit .orbit-bars{transform:scale(.72)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ===== DONBEX RADIO PRO V3 — AUDIO ENGINE + VISUALIZERS ===== */
.player.is-playing .meta h2{
  filter:brightness(1.08);
}
.player.is-playing .station-top i{
  animation:liveDot 1.2s ease-in-out infinite;
}
@keyframes liveDot{50%{transform:scale(1.5);opacity:.45}}

.orbit .orbit-bars i{
  box-shadow:0 0 8px rgba(102,232,255,.45);
}
.glass .glass-meter{
  z-index:5;
}
.glass .glass-meter i{
  min-height:5px;
}
.stage .stage-vu{
  z-index:5;
}
.pulse .pulse-canvas{
  z-index:5;
}

/* Make logo framing correct for arbitrary station logos */
.logo{
  padding:7%;
}
.logo img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:inherit;
}
.orbit .logo{padding:8%;background:#09111b}
.glass .logo{padding:7%;background:linear-gradient(145deg,#0d1620,#182334)}
.stage .logo{padding:7%;background:#100b08}
.pulse .logo{padding:9%;background:#08070b}

/* More obvious visual distinction */
.orbit .meta small{color:#86edff}
.glass .meta small{color:#e9f8ff}
.stage .meta small{color:#ffc876}
.pulse .meta small{color:#b98aff}

.orbit .play-icon{filter:drop-shadow(0 0 8px #63e9ff)}
.glass .play-icon{filter:drop-shadow(0 0 8px #fff)}
.stage .play-icon{filter:drop-shadow(0 0 8px #ffbf68)}
.pulse .play-icon{filter:drop-shadow(0 0 8px #ab72ff)}

.analysis-badge{
  margin-left:auto;
  font-size:8px;
  letter-spacing:.08em;
  padding:5px 7px;
  border:1px solid #ffffff14;
  border-radius:99px;
  color:#718295;
}


/* ===== DONBEX RADIO PRO V4 — ALIGNMENT / SOCIALS / INFO ===== */

.station-top{align-items:center}
.top-right{display:flex;align-items:center;gap:8px}
.info-badge{
  display:none;
  max-width:150px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:#d8e5ee;
  font-size:8px;
  letter-spacing:.06em;
  backdrop-filter:blur(10px);
}
.info-badge.show{display:inline-flex}

/* Perfectly centered visual stage */
.visual{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative;
  isolation:isolate;
}
.disc{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  margin:auto !important;
  flex:0 0 auto;
}
.logo{
  position:absolute !important;
  inset:15% !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.logo img{
  max-width:100% !important;
  max-height:100% !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:50% 50% !important;
}

/* Orbit: radial bars share exact same center as logo/disc */
.orbit .orbit-bars{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:230px !important;
  height:230px !important;
  margin:0 !important;
}
.orbit .orbit-bars i{
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-1px;
  margin-top:-6px;
  transform-origin:50% 6px;
}
.orbit .disc{
  z-index:3;
}
.orbit .orbit-reactive{
  z-index:-1;
}

/* Glass: centered card and logo */
.glass .disc{
  width:176px !important;
  height:176px !important;
  border-radius:32px !important;
  transform:rotate(-4deg);
}
.glass .logo{
  inset:16% !important;
  border-radius:24px !important;
}
.glass .glass-meter{
  left:7% !important;
  right:7% !important;
  bottom:1% !important;
}

/* Stage: force true circle and centered logo */
.stage .disc{
  width:170px !important;
  height:170px !important;
  aspect-ratio:1/1 !important;
  border-radius:50% !important;
  background:radial-gradient(circle,#1e1510 0 54%,rgba(70,44,23,.18) 55%,transparent 70%);
}
.stage .logo{
  inset:18% !important;
  border-radius:50% !important;
}

/* Pulse: force true circle */
.pulse .disc{
  width:152px !important;
  height:152px !important;
  aspect-ratio:1/1 !important;
  border-radius:50% !important;
}
.pulse .logo{
  inset:15% !important;
  border-radius:50% !important;
}

/* Socials: real recognizable monochrome icons */
.social-preview a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:30px;
  min-height:30px;
  color:#f4f7fb;
}
.social-preview svg{
  width:15px;
  height:15px;
  flex:0 0 auto;
}
.social-preview svg *{vector-effect:non-scaling-stroke}

/* Orbit = round icon-only */
.orbit .social-preview a{
  width:32px;height:32px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(103,234,255,.30);
  background:rgba(89,223,255,.07);
  box-shadow:0 0 14px rgba(89,223,255,.05);
}
.orbit .social-preview .social-label{display:none}

/* Glass = rounded square icon-only */
.glass .social-preview a{
  width:34px;height:34px;
  padding:0;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.09);
  backdrop-filter:blur(14px);
}
.glass .social-preview .social-label{display:none}

/* Stage = full social names */
.stage .social-preview a{
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(255,190,109,.28);
  background:rgba(255,181,88,.05);
  font-size:8px;
  letter-spacing:.03em;
}
.stage .social-preview svg{width:13px;height:13px}

/* Pulse = compact rectangular icon + name */
.pulse .social-preview a{
  padding:6px 9px;
  border-radius:6px;
  border-left:2px solid #a66cff;
  border-top:1px solid rgba(166,108,255,.16);
  border-right:1px solid rgba(166,108,255,.16);
  border-bottom:1px solid rgba(166,108,255,.16);
  background:rgba(166,108,255,.07);
  font-size:8px;
}
.pulse .social-preview svg{width:13px;height:13px}

/* Better visual hierarchy */
.meta{width:100%}
.meta h2{max-width:100%;padding:0 8px}
.player.stage .meta h2{text-shadow:0 0 22px rgba(255,191,104,.20)}
.player.pulse .meta h2{text-shadow:0 0 22px rgba(170,105,255,.16)}
.player.glass .meta h2{text-shadow:0 0 18px rgba(255,255,255,.12)}

/* Weather/date badges by template */
.orbit .info-badge,.glass .info-badge{
  border-color:rgba(110,231,255,.18);
}
.stage .info-badge{
  border-color:rgba(255,195,108,.25);
  color:#ffe3b8;
}
.pulse .info-badge{
  border-color:rgba(178,112,255,.25);
  color:#d9bfff;
}

@media(max-width:380px){
  .orbit .orbit-bars{width:205px !important;height:205px !important}
  .glass .disc{width:158px !important;height:158px !important}
  .stage .disc{width:154px !important;height:154px !important}
  .pulse .disc{width:142px !important;height:142px !important}
  .info-badge{max-width:118px;font-size:7px;padding:4px 6px}
}


/* ===== DONBEX RADIO APP STUDIO PRO V5 ===== */

.provider-note{
  display:flex;
  align-items:center;
  gap:8px;
  color:#7e8b99;
  font-size:9px;
  letter-spacing:.13em;
}
.provider-note b{color:#dbe7f1;font-size:10px}
.provider-note span{opacity:.7}

/* Preview header actions */
.preview-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.location-btn{
  min-height:32px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(100,222,255,.20);
  background:rgba(82,219,255,.05);
  color:#8eeaff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
}
.location-btn:disabled{opacity:.5;cursor:default}

/* Real visible spectrum between metadata and player control */
.audio-spectrum{
  position:relative;
  width:100% !important;
  height:52px !important;
  margin:12px 0 8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  background:none !important;
  mask:none !important;
  opacity:1 !important;
  overflow:hidden;
}
.audio-spectrum i{
  display:block;
  width:3px;
  min-height:5px;
  border-radius:999px;
  transform-origin:center center;
  transition:height .055s linear,opacity .055s linear;
}

/* Spectrum varies by template */
.orbit .audio-spectrum i{
  background:linear-gradient(180deg,#b7f5ff,#5ddfff);
  box-shadow:0 0 9px rgba(85,224,255,.30);
}
.glass .audio-spectrum i{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(112,218,255,.55));
  box-shadow:0 0 7px rgba(255,255,255,.12);
}
.stage .audio-spectrum i{
  background:linear-gradient(180deg,#ffe0a4,#ff9d50);
  box-shadow:0 0 8px rgba(255,168,81,.22);
}
.pulse .audio-spectrum i{
  background:linear-gradient(180deg,#d29bff,#9d5cff);
  box-shadow:0 0 9px rgba(166,100,255,.24);
}

/* Keep secondary template-specific analyzer visible too */
.orbit .orbit-bars,
.glass .glass-meter,
.stage .stage-vu,
.pulse .pulse-canvas{
  pointer-events:none;
}

/* Center preview on mobile exactly */
.preview-area{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.device{
  align-self:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
@media(max-width:860px){
  .preview-area{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .device{
    width:min(360px,calc(100vw - 42px)) !important;
    max-width:100% !important;
    transform:none !important;
  }
}
@media(max-width:480px){
  .provider-note{display:none}
  .preview-head{align-items:flex-start}
  .preview-actions{flex-direction:column;align-items:flex-end}
  .location-btn{min-height:30px;font-size:8px}
}

/* Improve player vertical balance on phones */
@media(max-width:480px){
  .visual{height:40% !important}
  .audio-spectrum{height:46px !important;margin:8px 0 6px !important}
  .meta h2{font-size:clamp(23px,8vw,32px) !important}
}


/* ===== V6 FIX: no layout bounce, Orbit-only spectrum ===== */

/* Remove the visible location control from this studio version. */
.location-btn{display:none !important}

/* The added horizontal spectrum exists ONLY in Orbit. */
.audio-spectrum{
  display:none !important;
}
.player.orbit .audio-spectrum{
  display:flex !important;
  position:relative !important;
  width:100% !important;
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  margin:10px 0 8px !important;
  overflow:hidden !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  flex:0 0 48px !important;
}

/* Do not let reactive animations move layout vertically. */
.visual,
.disc,
.logo,
.meta,
.controls,
.social-preview,
.install-hint{
  translate:none !important;
}

.player.glass .disc,
.player.stage .disc,
.player.pulse .disc{
  top:auto !important;
  bottom:auto !important;
  margin:auto !important;
}

/* Keep all reactive movement inside fixed boxes. */
.visual{
  min-height:0 !important;
  overflow:visible;
}
.player{
  contain:layout paint;
}
.player .meta{
  min-height:88px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.player .controls{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Existing per-template analyzers remain exactly as intended. */
.player.glass .glass-meter{display:flex !important}
.player.stage .stage-vu{display:grid !important}
.player.pulse .pulse-canvas{opacity:.9 !important}

/* Orbit horizontal spectrum is the only extra horizontal bar. */
.player.glass .audio-spectrum,
.player.stage .audio-spectrum,
.player.pulse .audio-spectrum{
  display:none !important;
}

/* Mobile: lock preview frame so internal animation cannot shift page. */
@media(max-width:860px){
  .device{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    margin-inline:auto !important;
  }
  .player{
    overflow:hidden !important;
  }
}


/* ===== V6.1 STABLE — WIDTH CONTAINMENT ONLY ===== */
/* IMPORTANT:
   This patch does NOT change Stage lights, Orbit rotation,
   Pulse animation, Glass animation, audio engine, or visual behavior.
   It only prevents animated children from expanding the page width. */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

main,
.intro,
.studio,
.panel,
.preview-area,
.preview-head,
.device,
.player{
  min-width:0;
  max-width:100%;
}

/* Clip decorative overflow at the preview shell instead of changing animations. */
.preview-area{
  overflow:hidden;
}

.device{
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  overflow:hidden;
}

/* Keep every existing template animation exactly as-is,
   but prevent it from affecting the document's scrollable width. */
.player{
  width:100%;
  max-width:100%;
  overflow:hidden;
  position:relative;
}

.player .ambient,
.player .stars,
.player .stage-lights,
.player .visual,
.player .pulse-canvas{
  pointer-events:none;
}

/* Mobile containment only. No animation overrides. */
@media(max-width:860px){
  .studio{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .preview-area,
  .panel{
    width:100%;
    max-width:100%;
  }

  .device{
    width:min(360px,calc(100vw - 42px));
    max-width:100%;
    margin-inline:auto;
  }
}

@media(max-width:380px){
  .device{
    width:calc(100vw - 28px);
  }
}

/* ===== V8 COMMERCE ===== */
.commerce-flow{margin-top:28px;padding-top:26px;border-top:1px solid #ffffff14}
.commerce-head small,.payment-title small,.pending-box small{color:#76e7ff;font-size:9px;font-weight:900;letter-spacing:.14em}
.commerce-head h3{margin:8px 0;font-size:24px}.commerce-head h3 strong{color:#88edff}.commerce-head p{color:#8596a6;font-size:12px;line-height:1.55}
.purchase-grid{display:grid;gap:10px}.purchase-card,.edit-card,.payment-box{border:1px solid #ffffff18;background:linear-gradient(180deg,#0f1620,#0a0f16);border-radius:16px;padding:15px}.purchase-card.active{border-color:#57e0ff57}
.plan-tag{display:inline-flex;padding:5px 8px;border-radius:999px;border:1px solid #58e0ff40;color:#78e9ff;font-size:8px;font-weight:900;letter-spacing:.12em}.plan-tag.soft{color:#b7c4d0;border-color:#ffffff1a}
.purchase-card h4,.edit-card h4,.payment-title h4,.pending-box h4{margin:8px 0;font-size:17px}.price{display:block;font-size:28px;margin-bottom:8px}
.purchase-card ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}.purchase-card li{position:relative;padding-left:16px;color:#a7b4c1;font-size:11px}.purchase-card li:before{content:"✓";position:absolute;left:0;color:#61e6ba}
.edit-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}.edit-options button{min-height:58px;border:1px solid #ffffff1a;border-radius:12px;background:#080d13;color:#dce6ef;display:grid;place-items:center}.edit-options button.active{border-color:#68e0ff7a;background:#46dcff12}.edit-options span{font-size:10px}.edit-options b{font-size:13px}.edit-card p{color:#6f8091;font-size:10px;line-height:1.45}
.payment-box{margin-top:12px;background:radial-gradient(circle at 92% 5%,#40c1ff14,transparent 22%),#0b1118}.payment-title{display:flex;gap:10px}.payment-title .dot{width:9px;height:9px;border-radius:50%;background:#5de3ff;box-shadow:0 0 15px #5de3ffaa;margin-top:6px}
.payment-methods{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.payment-method{min-height:55px;border-radius:12px;border:1px solid #ffffff1a;background:#070c12;color:#dce7f0;text-align:left;padding:11px}.payment-method.active{border-color:#5ee4ff6b;background:#50dfff0f}.payment-method b,.payment-method span{display:block}.payment-method span{margin-top:3px;color:#6f8090;font-size:9px}
.purchase-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.purchase-form label{display:grid;gap:6px;margin:0}.purchase-form label.full{grid-column:1/-1}.purchase-form label>span{color:#a8b6c3;font-size:10px;font-weight:800}
.slug-row{display:grid;grid-template-columns:auto 1fr;align-items:center;border:1px solid #ffffff1f;border-radius:12px;background:#070b11;overflow:hidden}.slug-row span{padding-left:11px;color:#698092;font-size:10px}.slug-row input{border:0!important;border-radius:0;padding-left:4px}
.receipt-preview{position:relative;margin-top:4px;border:1px solid #ffffff1a;border-radius:12px;overflow:hidden;background:#05080c}.receipt-preview img{display:block;width:100%;max-height:180px;object-fit:contain}.receipt-preview button{position:absolute;right:8px;top:8px;border:1px solid #ffffff25;border-radius:9px;background:#05080cd6;color:white;padding:7px 9px;font-size:9px}
.purchase-summary{margin-top:14px;padding:12px;border-radius:12px;background:#070b11;border:1px solid #ffffff14;display:grid;gap:7px}.purchase-summary>div{display:flex;justify-content:space-between;color:#8c9baa;font-size:10px}.purchase-summary .total{padding-top:8px;border-top:1px solid #ffffff14;color:#f2f7fb;font-size:13px}
.submit-order{width:100%;min-height:48px;margin-top:12px;border:0;border-radius:13px;background:linear-gradient(90deg,#43dfff,#3c83ff);color:#041019;font-weight:900}
.pending-box{margin-top:14px;padding:14px;border-radius:14px;border:1px solid #ffc35a38;background:#ffb2400e;display:grid;grid-template-columns:36px 1fr;gap:11px}.pending-box p{color:#9b8d7a;font-size:10px;line-height:1.5}.pending-box button{margin-top:10px;min-height:38px;border-radius:10px;border:1px solid #76e5ae33;background:#48de9612;color:#91f0bf;font-size:10px;font-weight:800}
.private-link-note{margin-top:12px;padding:13px;border-radius:13px;border:1px solid #9672ff29;background:#9672ff0b;display:grid;grid-template-columns:28px 1fr;gap:9px}.private-link-note b{font-size:11px}.private-link-note p{margin:4px 0 0;color:#7b7690;font-size:9.5px;line-height:1.5}
@media(max-width:480px){.purchase-form-grid{grid-template-columns:1fr}.purchase-form label.full{grid-column:auto}.edit-options,.payment-methods{grid-template-columns:1fr}.slug-row{grid-template-columns:1fr}.slug-row span{padding:9px 11px 0}.slug-row input{padding-left:11px}}


/* ===== V9 COMPACT CHECKOUT ===== */
.commerce-flow{display:none!important}

.checkout-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.checkout-modal.open{display:flex}
.checkout-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,6,10,.78);
  backdrop-filter:blur(12px);
}
.checkout-card{
  position:relative;
  z-index:1;
  width:min(980px,96vw);
  max-height:90vh;
  overflow:auto;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:linear-gradient(180deg,#101822,#090e14);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}
.checkout-top{
  position:sticky;
  top:0;
  z-index:5;
  min-height:68px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(12,18,26,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.checkout-top small,.checkout-side>small{
  color:#72e6ff;font-size:9px;font-weight:900;letter-spacing:.14em
}
.checkout-top h3{margin:4px 0 0;font-size:21px}
.checkout-top button{
  width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.1);
  background:#ffffff08;color:white;font-size:22px
}
.checkout-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 270px;
  min-width:0;
}
.checkout-main{padding:18px;min-width:0}
.checkout-side{
  border-left:1px solid rgba(255,255,255,.07);
  padding:22px 18px;
  background:linear-gradient(180deg,#0d151e,#091018);
}
.checkout-side h4{font-size:22px;margin:10px 0}
.mini-url{
  padding:10px 11px;border-radius:11px;border:1px solid rgba(91,226,255,.15);
  background:#071018;color:#8aa0b2;font-size:10px;word-break:break-all
}
.mini-url b{color:#9decff}
.side-points{display:grid;gap:9px;margin:18px 0;color:#afbdca;font-size:11px}
.privacy-note{font-size:9px;line-height:1.5;color:#637587;border-top:1px solid #ffffff0c;padding-top:14px}

.checkout-section{
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.065);
}
.section-title{
  display:flex;align-items:center;gap:10px;margin-bottom:10px
}
.section-title>span{
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:#55dfff0d;border:1px solid #55dfff2b;color:#73eaff;font-size:9px;font-weight:900
}
.section-title>div{display:grid}
.section-title b{font-size:13px}
.section-title small{font-size:9px;color:#697b8b;margin-top:2px}
.base-product{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px;border:1px solid #ffffff10;border-radius:13px;background:#0a1118
}
.base-product div{display:grid;gap:3px}
.base-product strong{font-size:22px}
.base-product small{color:#7d8d9b;font-size:9px}
.included{font-size:8px;font-weight:900;color:#70e8bb}
.edit-options.compact{grid-template-columns:repeat(3,1fr);margin-top:0}
.microcopy{font-size:9px!important;margin:8px 0 0!important;color:#68798a!important}
.compact-methods{margin:0 0 10px}
.payment-info{
  display:grid;grid-template-columns:auto 1fr 1fr;gap:12px;align-items:center;
  padding:12px;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:#080d13
}
.payment-info div{display:grid;gap:3px}
.payment-info small{font-size:8px;color:#66798b}
.payment-info b{font-size:11px}
.payment-brand{
  width:44px;height:44px;border-radius:12px;display:grid!important;place-items:center;
  background:#6c4cff1a;border:1px solid #8f7aff2f;color:#c7bfff;font-size:9px;font-weight:900
}
.bank-image-box{grid-template-columns:1fr;padding:8px}
.bank-image-box img{width:100%;display:block;border-radius:10px;max-height:210px;object-fit:contain}

.compact-form{padding-top:14px}
.phone-row{display:grid;grid-template-columns:110px 1fr;gap:8px}
.phone-row select{
  border:1px solid #ffffff1f;background:#070b11;color:#fff;border-radius:12px;padding:0 9px;font-size:13px
}
.readonly-link small{font-size:8px!important;color:#637687!important}
.generated-link{
  min-height:44px;display:flex;align-items:center;gap:3px;padding:0 12px;
  border:1px solid #ffffff1f;border-radius:12px;background:#070b11;color:#6b8293;font-size:11px
}
.generated-link b{color:#a8edff;font-weight:800}
.final-state{margin-top:8px}
.status-orbit{
  width:36px;height:36px;border-radius:50%;border:1px solid #ffc35a3d;
  display:grid;place-items:center
}
.status-orbit i{width:8px;height:8px;border-radius:50%;background:#ffc25c;box-shadow:0 0 14px #ffc25c}
.status-line{margin-top:9px;font-size:9px;color:#beaa86;display:flex;align-items:center;gap:7px}
.status-line span{width:7px;height:7px;border-radius:50%;background:#ffc25c;box-shadow:0 0 10px #ffc25c}

@media(max-width:760px){
  .checkout-modal{padding:8px}
  .checkout-card{width:100%;max-height:96vh;border-radius:18px}
  .checkout-layout{grid-template-columns:1fr}
  .checkout-side{border-left:0;border-top:1px solid #ffffff10;padding:16px 14px}
  .checkout-main{padding:14px}
}
@media(max-width:480px){
  .edit-options.compact{grid-template-columns:1fr 1fr 1fr}
  .payment-info{grid-template-columns:1fr}
  .payment-brand{width:auto;height:34px}
  .phone-row{grid-template-columns:95px 1fr}
  .checkout-top h3{font-size:18px}
}


/* ===== V10 TRACKING + WHATSAPP SUPPORT ===== */
.tracking-box{
  margin-top:12px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(103,225,255,.14);
  background:rgba(70,219,255,.045);
}
.tracking-box>small{
  color:#7deaff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}
.tracking-url{
  margin-top:7px;
  padding:9px 10px;
  border-radius:9px;
  background:#071018;
  border:1px solid rgba(255,255,255,.08);
  color:#b5ecf8;
  font-size:10px;
  word-break:break-all;
}
.tracking-box p{
  margin:7px 0 0!important;
  color:#73879a!important;
  font-size:9px!important;
  line-height:1.5!important;
}
.tracking-actions{
  display:flex;
  gap:7px;
  margin-top:9px;
}
.tracking-actions button{
  min-height:35px!important;
  margin:0!important;
  padding:0 10px;
  border-radius:9px!important;
  border:1px solid rgba(95,225,255,.15)!important;
  background:rgba(69,219,255,.06)!important;
  color:#92eaff!important;
  font-size:9px!important;
}
.support-whatsapp{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:950;
  min-height:52px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 11px 7px 8px;
  border-radius:17px;
  border:1px solid rgba(89,230,167,.24);
  background:linear-gradient(145deg,#11231d,#0c1714);
  color:#dff8ed;
  box-shadow:0 18px 45px rgba(0,0,0,.34),0 0 22px rgba(72,221,155,.08);
}
.wa-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(69,224,151,.12);
  border:1px solid rgba(80,232,162,.22);
  color:#72e7aa;
  font-size:20px;
}
.wa-copy{display:grid;text-align:left;line-height:1.1}
.wa-copy b{font-size:10px}
.wa-copy small{font-size:8px;color:#78a18d;margin-top:3px}
@media(max-width:480px){
  .tracking-actions{display:grid;grid-template-columns:1fr 1fr}
  .support-whatsapp{right:9px;bottom:9px}
  .wa-copy{display:none}
  .support-whatsapp{width:50px;height:50px;padding:6px;border-radius:50%}
  .wa-icon{width:36px;height:36px}
}

/* V11 editable bank details */
.bank-details{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.bank-details>div{padding:10px;border-radius:10px;background:#071018;border:1px solid rgba(255,255,255,.06)}
.bank-details small{display:block;color:#66798b;font-size:8px;margin-bottom:4px}
.bank-details small em{font-style:normal;color:#536576}
.bank-details b{display:block;color:#dce9f2;font-size:11px;word-break:break-word}
.bank-id-optional{grid-column:1/-1}
.bank-id-optional b:empty{display:none}
.bank-id-optional:has(b:empty){display:none}
@media(max-width:480px){.bank-details{grid-template-columns:1fr}.bank-id-optional{grid-column:auto}}

/* ===== V11.1 CHECKOUT ACCESS FIX ===== */
.activate-payment{
  width:100%;
  min-height:46px;
  margin-top:9px;
  border-radius:13px;
  border:1px solid rgba(96,226,255,.22);
  background:rgba(75,219,255,.055);
  color:#93edff;
  font-weight:850;
  cursor:pointer;
}
.activate-payment:hover{background:rgba(75,219,255,.09)}
.checkout-hint{
  margin:7px 2px 0;
  color:#647789;
  font-size:9px;
  line-height:1.45;
}
.bank-details{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.bank-details>div{
  min-height:58px;
}
.bank-details b{
  color:#d7e8f1;
}
@media(max-width:480px){
  .bank-details{grid-template-columns:1fr !important}
}


/* ===== V12 TRACKING FLOW FIX ===== */

/* Only one payment detail panel at a time */
#zelleInfo.hidden,
#bankInfo.hidden{
  display:none !important;
}
#zelleInfo:not(.hidden),
#bankInfo:not(.hidden){
  display:grid !important;
}

/* Tracking status */
.tracking-state-content{min-width:0}
.status-orbit.pending{
  border-color:rgba(255,195,90,.30);
}
.status-orbit.pending i{
  background:#ffc25c;
  box-shadow:0 0 14px rgba(255,194,92,.65);
}
.status-orbit.approved{
  border-color:rgba(86,232,158,.38);
}
.status-orbit.approved i{
  background:#69e5a5;
  box-shadow:0 0 16px rgba(105,229,165,.72);
}
.pending-box.approved{
  border-color:rgba(86,232,158,.26) !important;
  background:rgba(71,222,149,.06) !important;
}
.pending-box.approved #trackingKicker{
  color:#75e8ad !important;
}
.pending-box.approved #trackingTitle{
  color:#eafff3;
}

.approved-actions{
  margin-top:13px;
  padding:13px;
  border-radius:13px;
  border:1px solid rgba(84,231,159,.20);
  background:rgba(64,220,146,.055);
}
.approved-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:11px;
}
.approved-check{
  width:34px;height:34px;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(80,229,154,.12);
  border:1px solid rgba(80,229,154,.25);
  color:#78edb0;
  font-weight:950;
}
.approved-head div{display:grid;gap:2px}
.approved-head small{font-size:8px;color:#72e6aa!important;letter-spacing:.12em}
.approved-head b{font-size:12px}
.approved-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.approved-grid button{
  min-height:40px!important;
  margin:0!important;
  border-radius:10px!important;
  border:1px solid rgba(91,229,162,.18)!important;
  background:rgba(76,221,150,.07)!important;
  color:#a8f1c9!important;
  font-size:9px!important;
  font-weight:800!important;
}
.approved-links{
  margin-top:10px;
  padding:10px;
  border-radius:10px;
  background:#07100c;
  border:1px solid rgba(80,230,155,.10);
  display:grid;
  gap:4px;
}
.approved-links small{font-size:8px;color:#658174}
.approved-links b{font-size:9px;color:#b8e8cf;word-break:break-all}
#approvedQrCanvas{
  width:min(230px,100%);
  height:auto;
  display:block;
  margin:12px auto 0;
  padding:10px;
  border-radius:14px;
  background:#fff;
}
@media(max-width:480px){
  .approved-grid{grid-template-columns:1fr}
}

/* ===== V13 ACTIVATION FLOW COPY ===== */
.checkout-hint{
  max-width:34rem;
}
.pending-box #trackingMessage{
  font-weight:550;
}

/* V14 Firebase submit state */
.submit-order:disabled{
  opacity:.62;
  cursor:wait;
}


/* ===== V15 PUBLIC RADIO MODE ===== */
.public-radio-shell{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:18px;
  background:
    radial-gradient(circle at 50% 15%,rgba(50,167,221,.12),transparent 32%),
    #070b12;
}
.public-radio-wrap{
  width:min(430px,100%);
  display:grid;
  gap:14px;
  justify-items:center;
}
.public-brand{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:9px;
  letter-spacing:.13em;
  color:#6f8292;
}
.public-brand b{color:#9cefff;font-size:11px}
.public-loading,.public-error{
  width:100%;
  padding:16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:#0b1118;
  text-align:center;
  color:#7f91a1;
  font-size:11px;
}
.public-error b{display:block;color:#f1f5f7;font-size:15px;margin-bottom:5px}
.public-error p{margin:0;color:#768797}

body.public-mode > header.top,
body.public-mode > main,
body.public-mode > .support-whatsapp{
  display:none !important;
}
body.public-mode #publicRadioShell{display:grid !important}
body.public-mode .public-radio-shell .device{
  width:min(360px,calc(100vw - 38px)) !important;
  margin:0 auto;
}
.public-player-host{
  width:100%;
  display:flex;
  justify-content:center;
}
.public-player-host .device{
  margin:0 !important;
}
.public-player-host .compat{
  display:none !important;
}

/* QR logo overlay helper canvas remains sharp */
#approvedQrCanvas{image-rendering:auto}


/* ===== V15.1 HOME / PUBLIC SHELL FIX ===== */
.public-radio-shell.hidden{
  display:none !important;
}

body:not(.public-mode) #publicRadioShell{
  display:none !important;
  min-height:0 !important;
  padding:0 !important;
}

body.public-mode #publicRadioShell{
  display:grid !important;
}