:root{
  --navy:#06245f;
  --navy-2:#0a3d8f;
  --navy-3:#0c57c7;
  --orange:#ff5a0a;
  --orange-2:#ff7a00;
  --orange-soft:#fff2e8;
  --blue-soft:#eef5ff;
  --ink:#0b1d3a;
  --muted:#62718a;
  --line:#d9e5f4;
  --white:#ffffff;
  --shadow:0 26px 70px rgba(6,36,95,.14);
}

*{box-sizing:border-box}
html{min-height:100%;-webkit-text-size-adjust:100%;background:#fff}
body{
  min-height:100%;
  margin:0;
  font-family:"Oxanium",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}
button,input{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.radio-shell{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% -10%,rgba(91,181,255,.18),transparent 30%),
    radial-gradient(circle at 8% 84%,rgba(12,87,199,.06),transparent 26%),
    radial-gradient(circle at 92% 18%,rgba(255,90,10,.06),transparent 24%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 46%,#f2f8ff 100%);
}
.radio-shell::before,.radio-shell::after{
  content:"";
  position:absolute;
  pointer-events:none;
  will-change:transform,opacity,background-position;
  z-index:-2;
}
.radio-shell::before{
  top:-18%;
  left:-10%;
  width:52vw;
  height:48vw;
  min-width:420px;
  min-height:420px;
  border-radius:50%;
  background:
    radial-gradient(circle at 40% 40%,rgba(126,205,255,.34) 0%,rgba(126,205,255,.18) 24%,rgba(255,255,255,0) 62%),
    radial-gradient(circle at 62% 58%,rgba(255,255,255,.72) 0%,rgba(255,255,255,0) 42%);
  filter:blur(34px);
  opacity:.8;
  animation:bgFloatBlue 18s ease-in-out infinite;
}
.radio-shell::after{
  right:-14%;
  bottom:-18%;
  width:46vw;
  height:42vw;
  min-width:380px;
  min-height:380px;
  border-radius:50%;
  background:
    radial-gradient(circle at 45% 42%,rgba(255,177,110,.30) 0%,rgba(255,177,110,.16) 24%,rgba(255,255,255,0) 62%),
    radial-gradient(circle at 58% 60%,rgba(91,181,255,.16) 0%,rgba(255,255,255,0) 40%);
  filter:blur(38px);
  opacity:.7;
  animation:bgFloatOrange 22s ease-in-out infinite;
}
.radio-stage{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;
  padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  overflow:hidden;
  isolation:isolate;
}
.radio-stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-3;
  opacity:.42;
  background:
    radial-gradient(rgba(6,36,95,.05) 1px,transparent 1px),
    linear-gradient(135deg,rgba(46,154,255,.035),transparent 35%,rgba(255,90,10,.03) 68%,transparent 100%);
  background-size:20px 20px,100% 100%;
  animation:pageGridDrift 22s linear infinite;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.34),transparent 30%,transparent 72%,rgba(0,0,0,.28));
  mask-image:linear-gradient(180deg,rgba(0,0,0,.34),transparent 30%,transparent 72%,rgba(0,0,0,.28));
}
.radio-stage::after{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  z-index:-2;
  opacity:.48;
  background:
    radial-gradient(circle at 20% 28%,rgba(43,153,255,.10),transparent 14%),
    radial-gradient(circle at 82% 70%,rgba(255,90,10,.08),transparent 14%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.35),transparent 35%);
  filter:blur(18px);
  animation:ambientPulse 16s ease-in-out infinite;
}

.edge-neon{
  position:absolute;
  top:-30%;
  bottom:-30%;
  width:8px;
  border-radius:999px;
  opacity:.75;
  filter:blur(.2px);
  background:linear-gradient(180deg,transparent 0%,var(--navy-3) 28%,#7cc6ff 43%,transparent 51%,var(--orange) 69%,#ffb145 82%,transparent 100%);
  background-size:100% 220%;
  animation:edgeSlide 5.5s linear infinite;
  box-shadow:0 0 15px currentColor,0 0 34px rgba(12,87,199,.25);
  pointer-events:none;
  z-index:-1;
}
.edge-neon--left{left:5px;color:#1684ff}
.edge-neon--right{right:5px;color:#ff6a00;animation-delay:-2.5s;animation-direction:reverse}

.radio-card{
  position:relative;
  width:min(1180px,100%);
  display:grid;
  grid-template-columns:minmax(0,1fr) 350px;
  gap:14px;
  padding:14px;
  border-radius:34px;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow),0 0 0 1px rgba(6,36,95,.05),0 20px 60px rgba(72,152,255,.08);
  isolation:isolate;
}
.radio-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-2;
  border-radius:36px;
  background:linear-gradient(105deg,transparent 0 14%,#25a2ff 23%,var(--navy-3) 31%,transparent 43% 54%,var(--orange) 66%,#ffb13b 74%,transparent 86% 100%);
  background-size:260% 100%;
  animation:borderSweep 5.4s linear infinite;
  filter:drop-shadow(0 0 8px rgba(23,121,255,.24)) drop-shadow(0 0 8px rgba(255,90,10,.18));
}
.radio-card::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:-1;
  border-radius:32px;
  background:#fff;
}

.radio-main{
  position:relative;
  min-height:650px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:18px 26px 22px;
  border-radius:25px;
  border:1px solid #e2ebf7;
  background:
    radial-gradient(circle at 50% -12%,rgba(119,198,255,.26),transparent 30%),
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.95),transparent 19%),
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.94),transparent 20%),
    radial-gradient(circle at 50% 72%,rgba(12,87,199,.06),transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 42%,#eef7ff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
}
.radio-main::after{
  content:"";
  position:absolute;
  inset:-24px;
  z-index:0;
  background-image:var(--artist-bg);
  background-size:cover;
  background-position:center;
  filter:blur(22px) saturate(1.18) contrast(1.06) brightness(.98);
  transform:scale(1.14);
  opacity:0;
  transition:opacity .55s ease,background-image .55s ease;
  pointer-events:none;
}
.radio-main.has-artist-bg::after{opacity:.46}
.radio-main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(117,199,255,.17),transparent 42%),
    linear-gradient(115deg,rgba(255,255,255,.72),rgba(255,255,255,.50) 34%,rgba(242,249,255,.58) 62%,rgba(255,255,255,.74));
  pointer-events:none;
}
.radio-main > *{position:relative;z-index:2}
.station-header{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}

.live-badge{
  display:inline-grid;
  grid-template-columns:auto auto;
  align-items:center;
  column-gap:8px;
  row-gap:0;
  margin:0 auto 6px;
  padding:7px 14px 6px;
  border:1px solid rgba(6,36,95,.14);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  box-shadow:0 9px 26px rgba(6,36,95,.08);
  color:var(--navy);
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
}
.live-badge i{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(255,90,10,.45);animation:pulse 1.4s infinite}
.live-badge span{font-size:.73rem}
.live-badge small{grid-column:1/-1;margin-top:3px;font-size:.48rem;letter-spacing:.22em;color:var(--navy-2)}

.brand-block{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:0;
  margin:-4px 0 6px;
  isolation:isolate;
}
.brand-block::before{
  content:"";
  position:absolute;
  inset:8% 12% 12%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(32,142,255,.18) 0%,rgba(255,90,10,.10) 38%,transparent 72%);
  filter:blur(30px);
  opacity:.9;
  transition:transform .45s ease,opacity .45s ease;
  z-index:0;
}
.brand-block::after{
  content:"";
  position:absolute;
  left:16%;
  right:16%;
  bottom:8%;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(12,87,199,.24),rgba(255,90,10,.28),transparent);
  filter:blur(.4px);
  opacity:.85;
  z-index:0;
}
.brand-block img{
  position:relative;
  z-index:1;
  width:min(720px,96%);
  max-height:430px;
  object-fit:contain;
  filter:drop-shadow(0 22px 26px rgba(6,36,95,.12)) drop-shadow(0 0 16px rgba(21,136,255,.08));
  transform-origin:center;
  transition:transform .42s cubic-bezier(.2,.75,.2,1),filter .42s ease;
}
.brand-block:hover::before{transform:scale(1.08);opacity:1}
.brand-block:hover img{
  transform:translateY(-5px) scale(1.035) rotate(-1deg);
  filter:drop-shadow(0 26px 34px rgba(6,36,95,.16)) drop-shadow(0 0 22px rgba(255,90,10,.16)) saturate(1.05);
}
.station-identity{
  margin:0 auto 4px;
  color:var(--navy);
  text-transform:uppercase;
  font-size:clamp(.72rem,1.1vw,.9rem);
  line-height:1.3;
  letter-spacing:.05em;
  font-weight:700;
}
.station-identity span,.station-identity strong{display:block}
.station-identity strong{color:var(--orange);font-size:1.03em;font-weight:900;letter-spacing:.025em}

.player-zone{
  width:min(720px,100%);
  display:grid;
  grid-template-columns:108px minmax(0,1fr);
  align-items:center;
  gap:14px;
}
.player-orb{
  position:relative;
  width:108px;
  height:108px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#fff,#eef5ff);
  box-shadow:0 14px 30px rgba(6,36,95,.13),inset 0 0 0 1px rgba(6,36,95,.06);
  overflow:visible;
  isolation:isolate;
}
.player-orb::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:0;
  border-radius:50%;
  background-image:var(--artist-bg);
  background-size:cover;
  background-position:center;
  opacity:0;
  filter:saturate(1.12) contrast(1.04);
  transition:opacity .45s ease,background-image .45s ease;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.66);
}
.radio-main.has-artist-bg .player-orb::before{opacity:.22}
.player-orb::after{
  content:"";
  position:absolute;
  inset:5px;
  z-index:1;
  border-radius:50%;
  background:linear-gradient(145deg,rgba(6,36,95,.12),rgba(255,90,10,.08));
  pointer-events:none;
}
.orb-ring{position:absolute;z-index:3;border-radius:50%;pointer-events:none}
.orb-ring--one{inset:-4px;border:2px solid rgba(12,87,199,.30);border-right-color:var(--orange);animation:spin 4s linear infinite}
.orb-ring--two{inset:7px;border:1px dashed rgba(255,90,10,.28);animation:spin 7s linear infinite reverse}
.play-button{
  position:relative;
  z-index:4;
  width:72px;
  height:72px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--navy-2),var(--navy));
  box-shadow:0 10px 24px rgba(6,36,95,.30),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .18s ease,box-shadow .18s ease;
}
.play-button:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 13px 28px rgba(6,36,95,.34)}
.play-button:active{transform:scale(.97)}
.play-icon{display:block;width:0;height:0;margin-left:5px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:18px solid #fff}
.player-orb.is-playing .play-icon{width:18px;height:23px;margin-left:0;border:0;border-left:6px solid #fff;border-right:6px solid #fff}
.player-orb.is-playing .orb-ring--one{border-color:rgba(255,90,10,.48);box-shadow:0 0 14px rgba(255,90,10,.2)}

.now-card{
  min-width:0;
  padding:12px 14px;
  border:1px solid #dce7f5;
  border-radius:19px;
  background:linear-gradient(135deg,#fff,#f5f9ff);
  box-shadow:0 9px 24px rgba(6,36,95,.07);
  text-align:left;
}
.now-label{
  display:block;
  margin:0 0 7px;
  color:var(--orange);
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.now-current{display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px;align-items:center}
.current-avatar,.history-avatar{
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--navy-2),var(--navy));
  color:#fff;
  font-weight:900;
}
.current-avatar{width:46px;height:46px;border-radius:14px;box-shadow:0 7px 16px rgba(6,36,95,.15)}
.current-avatar img,.history-avatar img{width:100%;height:100%;object-fit:cover}
.avatar-fallback span{display:grid;place-items:center;width:100%;height:100%}
.current-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.current-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--navy);font-size:.98rem;font-weight:900}
.current-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.75rem;font-weight:700}
.marquee{display:flex;align-items:center;gap:8px;margin-top:8px;min-width:0}
.live-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;background:var(--orange-soft);color:#d74700;font-size:.52rem;font-weight:900;letter-spacing:.08em}
.live-pill i{width:6px;height:6px;border-radius:50%;background:var(--orange);animation:pulse 1.4s infinite}
.marquee-window{min-width:0;overflow:hidden;white-space:nowrap;flex:1}
.marquee-track{display:inline-block;min-width:100%;color:#37506f;font-size:.68rem;font-weight:700;animation:marquee 16s linear infinite}

.control-row{width:min(720px,100%);display:flex;align-items:center;justify-content:center;gap:10px}
.volume-controls{
  flex:1;
  max-width:350px;
  height:39px;
  display:grid;
  grid-template-columns:34px minmax(100px,1fr) 34px;
  align-items:center;
  gap:8px;
  padding:3px 5px;
  border:1px solid #dfe9f6;
  border-radius:999px;
  background:#fff;
  box-shadow:0 7px 20px rgba(6,36,95,.06);
}
.volume-button{width:32px;height:32px;border:0;border-radius:50%;background:var(--blue-soft);color:var(--navy);font-size:1.15rem;font-weight:900;line-height:1}
.volume-level{height:6px;overflow:hidden;border-radius:999px;background:#e6edf6}
.volume-level span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--navy-3),#3aa8ff,var(--orange));box-shadow:0 0 8px rgba(12,87,199,.25);transition:width .2s ease}
.mobile-history-button{display:none;height:39px;border:0;border-radius:999px;padding:0 14px;background:linear-gradient(135deg,var(--orange),var(--orange-2));color:#fff;font-size:.68rem;font-weight:900;letter-spacing:.04em;box-shadow:0 8px 18px rgba(255,90,10,.22)}
.player-status{margin:0;color:#7a8798;font-size:.64rem;font-weight:600;letter-spacing:.02em;text-align:center}.player-status:empty{display:none}

.history-panel{
  min-height:650px;
  display:flex;
  flex-direction:column;
  padding:18px;
  border-radius:25px;
  border:1px solid #e0eaf6;
  background:linear-gradient(180deg,#f9fbff,#f2f7ff);
  overflow:hidden;
}
.history-head{padding:5px 5px 14px;border-bottom:1px solid #dce7f4}
.history-head span{display:block;color:var(--orange);font-size:.61rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.history-head strong{display:block;margin-top:4px;color:var(--navy);font-size:1.08rem;font-weight:900}
.history-grid{display:grid;grid-template-columns:1fr;gap:8px;padding-top:12px;overflow:auto;scrollbar-width:thin;scrollbar-color:#b7cbe6 transparent}
.history-item{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:10px;
  align-items:center;
  min-height:59px;
  padding:8px;
  border:1px solid rgba(6,36,95,.07);
  border-radius:15px;
  background:#fff;
  box-shadow:0 5px 15px rgba(6,36,95,.04);
}
.history-item--empty{grid-template-columns:1fr;color:var(--muted);text-align:center;font-size:.77rem;padding:16px}
.history-avatar{width:44px;height:44px;border-radius:12px}
.history-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.history-title,.history-artist,.history-time{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-title{color:var(--navy);font-size:.78rem;font-weight:900}
.history-artist{color:#65758d;font-size:.66rem;font-weight:700}
.history-time{color:#98a4b5;font-size:.57rem;font-weight:600}

.saair-footer-note{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#7d8998;
  font-size:.57rem;
  line-height:1;
  text-align:center;
}
.saair-footer-note strong{color:var(--navy);font-size:.59rem}
.saair-footer-button{color:var(--orange);text-decoration:none;font-weight:900}
.saair-footer-button:hover{text-decoration:underline}

.history-modal{display:none}
.history-modal.is-open{position:fixed;inset:0;z-index:2147483000;display:block;width:100vw;height:100dvh;overflow:hidden}
.history-modal__backdrop{position:absolute;inset:0;background:rgba(5,21,48,.46);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.history-modal__panel{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  background:
    radial-gradient(circle at 90% 5%,rgba(255,90,10,.09),transparent 30%),
    radial-gradient(circle at 8% 92%,rgba(12,87,199,.09),transparent 30%),
    #fff;
  animation:modalIn .23s ease both;
}
.history-modal__head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 13px;
  border-bottom:1px solid #e0e9f5;
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 28px rgba(6,36,95,.07);
}
.history-modal__head span{display:block;color:var(--orange);font-size:.61rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.history-modal__head strong{display:block;margin-top:3px;color:var(--navy);font-size:1.05rem;font-weight:900}
.history-modal__close{width:42px;height:42px;border:0;border-radius:14px;background:linear-gradient(145deg,var(--navy-2),var(--navy));color:#fff;font-size:1.5rem;font-weight:700;box-shadow:0 8px 20px rgba(6,36,95,.20)}
.history-grid--modal{flex:1;min-height:0;overflow-y:auto;align-content:start;padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 18px)}
.history-grid--modal .history-item{width:100%;max-width:720px;margin:0 auto;grid-template-columns:50px minmax(0,1fr);min-height:66px;padding:8px 10px}
.history-grid--modal .history-avatar{width:50px;height:50px;border-radius:14px}
.history-grid--modal .history-title{font-size:.9rem}
.history-grid--modal .history-artist{font-size:.72rem}
body.history-modal-open{overflow:hidden}

@media(max-width:860px){
  .radio-stage{padding:10px 10px max(8px,env(safe-area-inset-bottom));align-content:center}
  .edge-neon{width:5px;opacity:.65}
  .radio-card{
    width:min(520px,100%);
    min-height:calc(100svh - 20px - env(safe-area-inset-bottom,0px));
    grid-template-columns:1fr;
    padding:8px;
    border-radius:27px;
  }
  .radio-card::before{border-radius:29px}
  .radio-card::after{border-radius:25px}
  .radio-main{
    min-height:0;
    height:100%;
    justify-content:center;
    gap:8px;
    padding:10px 12px 9px;
    border-radius:21px;
  }
  .brand-block img{width:min(470px,99%);max-height:40svh}
  .station-identity{margin:-3px 0 1px;font-size:clamp(.58rem,2.6vw,.72rem);line-height:1.22;letter-spacing:.035em}
  .player-zone{grid-template-columns:78px minmax(0,1fr);gap:9px}
  .player-orb{width:74px;height:74px}
  .play-button{width:52px;height:52px}
  .play-icon{border-top-width:9px;border-bottom-width:9px;border-left-width:14px}
  .player-orb.is-playing .play-icon{width:15px;height:18px;border-left-width:5px;border-right-width:5px}
  .now-card{padding:8px 10px;border-radius:15px}
  .now-label{margin-bottom:4px;font-size:.52rem}
  .now-current{grid-template-columns:36px minmax(0,1fr);gap:8px}
  .current-avatar{width:36px;height:36px;border-radius:10px}
  .current-info strong{font-size:.82rem}
  .current-info span{font-size:.64rem}
  .marquee{margin-top:5px;gap:6px}
  .live-pill{height:19px;padding:0 6px;font-size:.44rem}
  .marquee-track{font-size:.58rem}
  .control-row{gap:7px}
  .volume-controls{height:34px;grid-template-columns:29px minmax(74px,1fr) 29px;gap:6px;padding:2px 4px}
  .volume-button{width:28px;height:28px;font-size:1rem}
  .mobile-history-button{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 12px;font-size:.58rem}
  .player-status{font-size:.52rem}
  .history-panel{display:none}
  .saair-footer-note{font-size:.48rem;gap:5px}
  .saair-footer-note strong{font-size:.5rem}
}

@media(max-width:420px){
  .radio-stage{padding-left:7px;padding-right:7px}
  .radio-card{min-height:calc(100svh - 14px - env(safe-area-inset-bottom,0px));padding:6px;border-radius:24px}
  .radio-main{padding-left:8px;padding-right:8px;border-radius:19px}
  .brand-block img{width:100%;max-height:42svh}
  .station-identity{font-size:clamp(.54rem,2.8vw,.66rem)}
  .player-zone{grid-template-columns:70px minmax(0,1fr);gap:7px}
  .player-orb{width:68px;height:68px}
  .play-button{width:48px;height:48px}
  .now-card{padding:7px 8px}
  .current-info strong{font-size:.76rem}
  .current-info span{font-size:.59rem}
  .control-row{width:100%}
  .volume-controls{max-width:none}
  .player-status{max-width:95%}
}

@media(max-width:860px) and (max-height:700px){
  .radio-stage{padding-top:6px;padding-bottom:6px}
  .radio-card{min-height:calc(100svh - 12px)}
  .radio-main{gap:5px;padding-top:6px;padding-bottom:6px}
  .brand-block img{max-height:31svh;width:min(390px,96%)}
  .station-identity{font-size:.54rem;line-height:1.16;margin-top:-4px}
  .player-zone{grid-template-columns:64px minmax(0,1fr);gap:7px}
  .player-orb{width:62px;height:62px}
  .play-button{width:44px;height:44px}
  .now-card{padding:6px 8px}
  .now-current{grid-template-columns:32px minmax(0,1fr)}
  .current-avatar{width:32px;height:32px}
  .now-label{font-size:.47rem;margin-bottom:3px}
  .current-info strong{font-size:.72rem}
  .current-info span{font-size:.56rem}
  .marquee{margin-top:3px}
  .volume-controls,.mobile-history-button{height:31px}
  .volume-controls{grid-template-columns:27px minmax(60px,1fr) 27px}
  .volume-button{width:26px;height:26px}
  .mobile-history-button{padding:0 10px}
  .player-status{font-size:.46rem}
  .saair-footer-note{display:none}
}

@media(orientation:landscape) and (max-height:560px) and (pointer:coarse){
  .radio-stage{padding:6px 12px}
  .radio-card{width:min(980px,100%);min-height:calc(100svh - 12px);grid-template-columns:minmax(0,1fr) 290px}
  .radio-main{display:grid;grid-template-columns:minmax(250px,.95fr) minmax(330px,1.15fr);grid-template-rows:auto auto auto;align-content:center;column-gap:14px;padding:8px 14px}
  .station-header{grid-row:1/4;grid-column:1}
  .brand-block img{max-height:66svh;width:98%}
  .station-identity{font-size:.52rem}
  .player-zone{grid-column:2;grid-row:1;width:100%;grid-template-columns:70px minmax(0,1fr)}
  .player-orb{width:66px;height:66px}
  .play-button{width:46px;height:46px}
  .control-row{grid-column:2;grid-row:2;width:100%}
  .player-status{grid-column:2;grid-row:3}
  .history-panel{display:flex;min-height:0;padding:10px}
  .history-grid{grid-template-columns:1fr 1fr;gap:5px}
  .history-item{grid-template-columns:34px minmax(0,1fr);min-height:43px;padding:5px}
  .history-avatar{width:34px;height:34px;border-radius:9px}
  .history-title{font-size:.64rem}.history-artist{font-size:.55rem}.history-time{display:none}
  .mobile-history-button{display:none}
  .saair-footer-note{display:none}
}


@media(max-width:860px){
  .radio-main.has-artist-bg::after{opacity:.52;filter:blur(18px) saturate(1.14) contrast(1.04);transform:scale(1.12)}
  .radio-main::before{background:
    radial-gradient(ellipse at 50% 0%,rgba(112,195,255,.14),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.64),rgba(255,255,255,.72) 48%,rgba(255,255,255,.79))}
  .radio-main.has-artist-bg .player-orb::before{opacity:.18}
}

@keyframes bgFloatBlue{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(32px,22px,0) scale(1.06)}}
@keyframes bgFloatOrange{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-28px,-18px,0) scale(1.05)}}
@keyframes pageGridDrift{0%{background-position:0 0,0 0}100%{background-position:40px 40px,0 0}}
@keyframes ambientPulse{0%,100%{transform:scale(1);opacity:.42}50%{transform:scale(1.04);opacity:.56}}
@keyframes borderSweep{to{background-position:-260% 0}}
@keyframes edgeSlide{to{background-position:0 -220%}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,90,10,.42)}70%{box-shadow:0 0 0 8px rgba(255,90,10,0)}100%{box-shadow:0 0 0 0 rgba(255,90,10,0)}}
@keyframes marquee{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(-35%)}}
@keyframes modalIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}



/* v9: transmission effects only in the page background; neon borders preserved */
.radio-stage::before,.radio-stage::after{content:none!important;display:none!important}

.radio-card{
  background:#ffffff!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:var(--shadow),0 0 0 1px rgba(6,36,95,.05)!important;
}

/* Background transmission field — always behind the player */
.radio-shell::before,
.radio-shell::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-3;
}
.radio-shell::before{
  top:-8%;
  left:-12%;
  width:70vw;
  height:70vw;
  min-width:560px;
  min-height:560px;
  border-radius:50%;
  background:
    repeating-radial-gradient(circle at 22% 42%,
      transparent 0 46px,
      rgba(12,87,199,.075) 46px 49px,
      transparent 49px 92px),
    radial-gradient(circle at 26% 30%,rgba(123,203,255,.20),rgba(123,203,255,0) 42%);
  opacity:.78;
  animation:bgBroadcastBlue 18s ease-in-out infinite;
}
.radio-shell::after{
  right:-14%;
  bottom:-12%;
  width:62vw;
  height:48vw;
  min-width:470px;
  min-height:360px;
  border-radius:40px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 10px,
      rgba(12,87,199,.035) 10px 13px,
      transparent 13px 24px,
      rgba(255,90,10,.032) 24px 27px,
      transparent 27px 38px),
    repeating-radial-gradient(circle at 86% 62%,
      transparent 0 38px,
      rgba(255,90,10,.065) 38px 41px,
      transparent 41px 78px),
    radial-gradient(circle at 72% 68%,rgba(255,177,110,.16),rgba(255,177,110,0) 45%);
  background-size:220px 100%,auto,auto;
  opacity:.52;
  animation:bgBroadcastOrange 20s linear infinite;
}

@keyframes bgBroadcastBlue{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.72}
  50%{transform:translate3d(20px,14px,0) scale(1.035);opacity:.88}
}
@keyframes bgBroadcastOrange{
  0%{background-position:0 0,0 0,0 0;transform:translate3d(0,0,0)}
  100%{background-position:220px 0,0 0,0 0;transform:translate3d(-16px,-8px,0)}
}



/* v10: artist cover background refined + no art in play orb + deeper current avatar */
.radio-main::after{
  inset:-10px!important;
  background-size:115% auto!important;
  background-position:50% 50%!important;
  filter:blur(12px) saturate(1.10) contrast(1.03) brightness(.98)!important;
  transform:scale(1.08)!important;
  animation:bgCoverFloat 26s ease-in-out infinite alternate;
}
.radio-main.has-artist-bg::after{opacity:.36!important}

.player-orb::before{display:none!important;opacity:0!important;background-image:none!important}
.radio-main.has-artist-bg .player-orb::before{display:none!important;opacity:0!important}

.current-avatar{
  position:relative;
  overflow:visible;
  border:1px solid rgba(255,255,255,.72);
  background:linear-gradient(145deg,#ffffff,#ecf4ff);
  box-shadow:
    0 16px 24px rgba(6,36,95,.16),
    0 6px 10px rgba(6,36,95,.10),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -10px 18px rgba(6,36,95,.08);
  transform:translateZ(0) perspective(800px) rotateX(7deg);
}
.current-avatar::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:-9px;
  height:14px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(6,36,95,.22) 0%,rgba(6,36,95,.08) 40%,transparent 74%);
  filter:blur(4px);
  z-index:-1;
}
.current-avatar::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.34),transparent 42%,rgba(255,255,255,.18) 70%,transparent 100%);
  pointer-events:none;
}
.current-avatar img{
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transform:translateZ(0) scale(1.01);
}

@media(max-width:860px){
  .radio-main::after{
    filter:blur(10px) saturate(1.08) contrast(1.02) brightness(.99)!important;
    transform:scale(1.06)!important;
  }
  .radio-main.has-artist-bg::after{opacity:.34!important}
  .current-avatar{
    box-shadow:
      0 12px 18px rgba(6,36,95,.14),
      0 5px 8px rgba(6,36,95,.08),
      inset 0 1px 0 rgba(255,255,255,.92),
      inset 0 -8px 14px rgba(6,36,95,.08);
  }
}

@keyframes bgCoverFloat{
  0%{transform:scale(1.08) translate3d(-8px,-4px,0);background-position:48% 50%}
  50%{transform:scale(1.10) translate3d(0px,6px,0);background-position:52% 48%}
  100%{transform:scale(1.08) translate3d(8px,-2px,0);background-position:50% 52%}
}



/* v11: even less blur on artist background + stronger inner-shadow depth on current cover */
.radio-main::after{
  inset:-6px!important;
  background-size:108% auto!important;
  filter:blur(7px) saturate(1.08) contrast(1.02) brightness(.99)!important;
  transform:scale(1.04)!important;
}
.radio-main.has-artist-bg::after{opacity:.32!important}

.current-avatar{
  border:1px solid rgba(255,255,255,.82)!important;
  background:linear-gradient(145deg,#ffffff,#eef5ff)!important;
  box-shadow:
    0 10px 18px rgba(6,36,95,.12),
    0 4px 8px rgba(6,36,95,.08),
    inset 0 2px 3px rgba(255,255,255,.96),
    inset 0 -12px 18px rgba(6,36,95,.12),
    inset 8px 0 14px rgba(255,255,255,.12),
    inset -8px 0 14px rgba(6,36,95,.10)!important;
  transform:translateZ(0) perspective(800px) rotateX(6deg)!important;
}
.current-avatar::after{
  inset:1px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.30),transparent 38%,rgba(255,255,255,.12) 64%,transparent 100%),
    radial-gradient(circle at 50% 122%,rgba(6,36,95,.15),transparent 58%)!important;
}
.current-avatar img{
  transform:translateZ(0) scale(1.01)!important;
  filter:saturate(1.02) contrast(1.02);
}

@media(max-width:860px){
  .radio-main::after{
    filter:blur(6px) saturate(1.06) contrast(1.02) brightness(1)!important;
    transform:scale(1.03)!important;
  }
  .radio-main.has-artist-bg::after{opacity:.30!important}
  .current-avatar{
    box-shadow:
      0 8px 14px rgba(6,36,95,.11),
      0 3px 6px rgba(6,36,95,.07),
      inset 0 2px 3px rgba(255,255,255,.96),
      inset 0 -10px 14px rgba(6,36,95,.11),
      inset 6px 0 10px rgba(255,255,255,.10),
      inset -6px 0 10px rgba(6,36,95,.09)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}