:root{
  --ink:#ffffff;
  --muted:#aebbd0;
  --line:rgba(255,255,255,.14);
  --gold:#f6ae16;
  --gold-2:#ffe08a;
  --gold-3:#a96c00;
  --cyan:#24c4e8;
  --blue:#0c4d7f;
  --navy:#061326;
  --navy-2:#08203d;
  --navy-3:#0b3158;
  --dark:#020812;
  --panel:rgba(255,255,255,.075);
  --shadow:0 34px 100px rgba(0,0,0,.42);
}

*{box-sizing:border-box}
html{height:100%;width:100%;max-width:100%;-webkit-text-size-adjust:100%}
body{
  height:100%;
  width:100%;
  max-width:100%;
  margin:0;
  overflow:hidden;
  font-family:"Oxanium",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#040812;
}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
img,svg,video,canvas,audio{max-width:100%}

.radio-shell{
  width:100%;
  height:100svh;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 16%,rgba(36,196,232,.29),transparent 31%),
    radial-gradient(circle at 19% 83%,rgba(246,174,22,.24),transparent 34%),
    radial-gradient(circle at 50% 51%,rgba(11,49,88,.55),transparent 48%),
    linear-gradient(135deg,#020812 0%,#061326 43%,#102847 100%);
}
.radio-stage{
  position:relative;
  height:100svh;
  width:100%;
  display:grid;
  place-items:center;
  align-content:center;
  gap:12px;
  padding:24px 18px;
  overflow:hidden!important;
}
.radio-stage:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black 0%,transparent 86%);
}
.ambient{
  position:absolute;
  border-radius:999px;
  filter:blur(5px);
  opacity:.72;
  pointer-events:none;
}
.ambient--one{
  width:430px;height:430px;right:-135px;top:-135px;
  background:radial-gradient(circle,rgba(36,196,232,.31),transparent 68%);
  animation:floatOne 8s ease-in-out infinite;
}
.ambient--two{
  width:410px;height:410px;left:-140px;bottom:-140px;
  background:radial-gradient(circle,rgba(246,174,22,.27),transparent 69%);
  animation:floatTwo 9s ease-in-out infinite;
}

.radio-card{
  position:relative;
  z-index:2;
  width:min(1180px,100%);
  height:clamp(520px,calc(100svh - 118px),710px);
  max-width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 430px;
  gap:14px;
  padding:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  box-shadow:var(--shadow);
  backdrop-filter:blur(22px);
}
.radio-card:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(246,174,22,.11);
}

.radio-main,.history-panel{max-width:100%;min-width:0}
.radio-main{
  --artist-bg:none;
  position:relative;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 32px 24px;
  overflow:hidden;
  text-align:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  isolation:isolate;
  background:linear-gradient(180deg,rgba(3,13,27,.88),rgba(7,28,51,.68));
}
.radio-main:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(2,8,18,.72),rgba(2,8,18,.86)),var(--artist-bg);
  background-size:cover;
  background-position:center;
  filter:blur(11px) saturate(1.12) contrast(1.12) brightness(.88);
  transform:scale(1.08);
  opacity:0;
  transition:opacity .45s ease;
}
.radio-main.has-artist-bg:after{opacity:.54}
.radio-main:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 12%,rgba(246,174,22,.18),transparent 34%),
    radial-gradient(circle at 50% 23%,rgba(36,196,232,.15),transparent 44%),
    linear-gradient(180deg,rgba(2,8,18,.36),rgba(2,8,18,.80));
}
.radio-main>*{position:relative;z-index:2}

.brand-block{
  position:relative;
  width:min(500px,82%);
  min-height:0;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-block:before,.brand-block:after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.brand-block:before{
  width:132%;height:132%;
  background:
    radial-gradient(circle,rgba(246,174,22,.34),rgba(246,174,22,.12) 36%,transparent 66%),
    radial-gradient(circle at 69% 39%,rgba(36,196,232,.34),transparent 52%),
    radial-gradient(circle at 34% 58%,rgba(255,255,255,.15),transparent 44%);
  filter:blur(12px);
  animation:logoGlow 4.8s ease-in-out infinite;
}
.brand-block:after{
  width:86%;height:86%;
  border:1px solid rgba(255,224,138,.22);
  box-shadow:0 0 90px rgba(36,196,232,.20),0 0 120px rgba(246,174,22,.18), inset 0 0 18px rgba(255,255,255,.08);
}
.brand-block img{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  max-height:328px;
  object-fit:contain;
  transform-style:preserve-3d;
  will-change:transform,filter;
  transition:transform .35s ease, filter .35s ease;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.42));
}

.brand-block:hover img{transform:perspective(900px) rotateX(7deg) rotateY(-11deg) translateY(-4px) scale(1.05);filter:drop-shadow(0 30px 38px rgba(0,0,0,.48)) drop-shadow(0 0 18px rgba(246,174,22,.22))}
.brand-block:hover:before{transform:scale(1.07);opacity:1}
.brand-block:hover:after{transform:scale(1.03)}

.kicker,h1,.lead{display:none!important}

.control-strip{
  width:min(420px,100%);
  display:grid;
  position:relative;
  grid-template-columns:44px 76px minmax(0,1fr) 44px;
  align-items:center;
  gap:12px;
  margin:0 auto 12px;
}
.control-strip:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:132px;
  height:132px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(246,174,22,.12),rgba(36,196,232,.06) 48%,transparent 68%);
  filter:blur(2px);
  pointer-events:none;
}
.control-strip:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:164px;
  height:164px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 0 0 18px rgba(246,174,22,.04),0 0 0 36px rgba(36,196,232,.025);
  pointer-events:none;
}
.play-button{
  position:relative;
  z-index:2;
  width:76px;height:76px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  cursor:pointer;
  background:linear-gradient(145deg,var(--gold-2) 0%,var(--gold) 48%,var(--gold-3) 100%);
  box-shadow:0 18px 44px rgba(246,174,22,.34),0 0 0 9px rgba(246,174,22,.09),0 0 0 18px rgba(36,196,232,.055),inset 0 2px 0 rgba(255,255,255,.58),inset 0 -4px 10px rgba(81,44,0,.31);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.play-button:before,.play-button:after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(246,174,22,.18);opacity:.55;pointer-events:none}
.play-button:after{inset:-20px;border-color:rgba(36,196,232,.12);opacity:.42}
.is-playing .play-button:before{animation:playPulse 1.8s ease-out infinite}
.is-playing .play-button:after{animation:playPulseTwo 2.2s ease-out infinite}
.play-button:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.06)}
.play-button:active{transform:scale(.97)}
.play-button:focus-visible,.volume-button:focus-visible,.mobile-history-button:focus-visible,.history-modal__close:focus-visible,.radio-footer-button:focus-visible{outline:3px solid rgba(36,196,232,.70);outline-offset:4px}
.play-icon{
  width:0;height:0;
  margin-left:7px;
  border-top:16px solid transparent;
  border-bottom:16px solid transparent;
  border-left:24px solid #061326;
  filter:drop-shadow(0 2px 3px rgba(255,255,255,.10));
}
.is-playing .play-icon{position:relative;width:28px;height:34px;margin-left:0;border:0}
.is-playing .play-icon:before,.is-playing .play-icon:after{
  content:"";position:absolute;top:0;width:9px;height:34px;border-radius:4px;background:#061326;
}
.is-playing .play-icon:before{left:3px}.is-playing .play-icon:after{right:3px}

.volume-button{
  width:44px;height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:#fdf3c7;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  cursor:pointer;
  font-size:1rem;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 24px rgba(0,0,0,.18),0 0 0 1px rgba(246,174,22,.06);
  transition:.18s ease;
}
.volume-button:hover{background:rgba(246,174,22,.15);border-color:rgba(246,174,22,.36);transform:translateY(-1px);box-shadow:0 12px 24px rgba(0,0,0,.22),0 0 18px rgba(246,174,22,.15)}
.volume-level{
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.035);
}
.volume-level span{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--cyan),var(--gold-2));
  box-shadow:0 0 16px rgba(36,196,232,.38);
  transition:width .18s ease;
}
.status{
  min-height:16px;
  margin:0 0 13px;
  color:#99b6cf;
  font-size:.72rem;
  font-weight:700;
}
audio{display:none}

.now-card{
  width:min(670px,100%);
  max-width:100%;
  min-width:0;
  padding:14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  box-shadow:0 18px 46px rgba(0,0,0,.22);
  backdrop-filter:blur(12px);
}
.now-label{
  display:block;
  margin-bottom:9px;
  color:var(--gold-2);
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.now-current{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:11px;
  align-items:center;
  margin-bottom:10px;
  text-align:left;
}
.current-avatar,.history-avatar{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:linear-gradient(145deg,var(--gold-2),var(--gold-3) 72%);
  color:#061326;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 25px rgba(0,0,0,.22);
}
.current-avatar{width:52px;height:52px;border-radius:16px}
.history-avatar{width:45px;height:45px;border-radius:13px}
.current-avatar img,.history-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.current-avatar span,.history-avatar span{font-weight:900;text-transform:uppercase}
.current-avatar span{font-size:1.25rem}.history-avatar span{font-size:.95rem}
.current-info,.history-meta{min-width:0}
.current-info strong{display:block;overflow:hidden;color:#fff;font-size:.97rem;font-weight:900;line-height:1.18;text-overflow:ellipsis;white-space:nowrap}
.current-info span{display:block;overflow:hidden;margin-top:4px;color:#aebed0;font-size:.80rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.marquee{
  position:relative;
  height:38px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:13px;
  background:rgba(2,8,18,.55);
}
.marquee:after{content:"";position:absolute;z-index:2;right:0;top:0;bottom:0;width:52px;background:linear-gradient(270deg,rgba(2,8,18,.96),transparent);pointer-events:none}
.live-pill--marquee{
  position:relative;
  z-index:3;
  flex:0 0 auto;
  height:100%;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 11px;
  color:#061326;
  color:#fff;
  background:linear-gradient(135deg,#ff524d,#b80d19 85%);
  box-shadow:0 0 18px rgba(255,68,68,.24), inset 0 1px 0 rgba(255,255,255,.15);
  border-right:1px solid rgba(255,255,255,.20);
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.10em;
}
.live-pill--marquee i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,75,75,.9);animation:pulseLive 1.1s infinite}
.marquee-track{position:absolute;left:88px;white-space:nowrap;padding-left:100%;color:#fff;font-size:.88rem;font-weight:850;animation:marquee 17s linear infinite;text-shadow:0 0 12px rgba(255,255,255,.08)}
.mobile-history-button{
  display:none;
  width:100%;height:38px;
  margin-top:9px;
  border:1px solid rgba(246,174,22,.25);
  border-radius:12px;
  color:var(--gold-2);
  background:rgba(246,174,22,.08);
  cursor:pointer;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.history-panel{
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:24px;
  color:#fff;
  background:
    radial-gradient(circle at 100% 0,rgba(246,174,22,.11),transparent 33%),
    linear-gradient(180deg,rgba(9,35,65,.94),rgba(3,15,29,.94));
  box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
}
.history-head{display:grid;gap:5px;margin-bottom:15px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.09)}
.history-head span,.history-modal__head span{color:var(--gold-2);font-size:.68rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.history-head strong{font-size:1.28rem;line-height:1.15;letter-spacing:-.03em}
.history-grid{display:grid;gap:9px;align-content:start;min-height:0;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(246,174,22,.72) rgba(255,255,255,.06)}
.history-grid::-webkit-scrollbar{width:8px}.history-grid::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:999px}.history-grid::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold-2),var(--gold-3));border-radius:999px;border:2px solid rgba(5,21,39,.96)}
.history-item{
  display:grid;
  grid-template-columns:45px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:15px;
  background:rgba(255,255,255,.055);
  box-shadow:0 10px 24px rgba(0,0,0,.13);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.history-item:hover{transform:translateX(-2px);border-color:rgba(246,174,22,.22);background:rgba(255,255,255,.075)}
.history-title,.history-artist,.history-time{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-title{color:#fff;font-size:.82rem;font-weight:850;line-height:1.2}
.history-artist{margin-top:3px;color:#a9bacb;font-size:.70rem;font-weight:700}
.history-time{margin-top:3px;color:#71869c;font-size:.63rem;font-weight:800}
.history-item--empty{display:block;padding:17px;color:#8ea3b7;text-align:center;font-size:.78rem;font-weight:700}

.radio-footer-note{
  position:relative;
  z-index:3;
  width:min(1180px,100%);
  max-width:100%;
  display:grid;
  justify-items:center;
  gap:3px;
  color:rgba(255,255,255,.78);
  text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}
.radio-footer-note strong{
  color:#fff;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.05em;
}
.radio-footer-note p{
  margin:0;
  color:rgba(255,255,255,.70);
  font-size:.72rem;
  line-height:1.28;
  font-weight:750;
}
.radio-footer-note p span{color:var(--gold-2);font-weight:900}
.radio-footer-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  margin-top:6px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  color:#061326;
  background:linear-gradient(145deg,var(--gold-2),var(--gold) 58%,#d18a05);
  box-shadow:0 10px 25px rgba(246,174,22,.25),inset 0 1px 0 rgba(255,255,255,.48);
  text-decoration:none;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  transition:transform .18s ease,filter .18s ease;
}
.radio-footer-button:hover{transform:translateY(-1px);filter:brightness(1.06)}

.history-modal{display:none}
.history-modal.is-open{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:18px}
.history-modal__backdrop{position:absolute;inset:0;background:rgba(0,5,12,.76);backdrop-filter:blur(10px)}
.history-modal__panel{
  position:relative;
  z-index:2;
  width:min(500px,100%);
  max-height:min(760px,88vh);
  display:flex;
  flex-direction:column;
  padding:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:25px;
  color:#fff;
  background:linear-gradient(180deg,rgba(8,35,65,.98),rgba(3,15,29,.99));
  box-shadow:0 35px 100px rgba(0,0,0,.56);
}
.history-modal__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.10)}
.history-modal__head span{display:block;margin-bottom:4px}
.history-modal__head strong{font-size:1.1rem}
.history-modal__close{
  width:40px;height:40px;
  display:grid;place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  color:#fff;
  background:rgba(255,255,255,.08);
  cursor:pointer;
  font-size:1.45rem;
  line-height:1;
}
.history-grid--modal{min-height:0;overflow-y:auto;padding-right:3px}
body.history-modal-open .radio-card,body.history-modal-open .radio-footer-note{filter:blur(2px)}

@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@keyframes pulseLive{70%{box-shadow:0 0 0 9px rgba(255,70,70,0)}100%{box-shadow:0 0 0 0 rgba(255,70,70,0)}}
@keyframes playPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.18);opacity:0}}
@keyframes playPulseTwo{0%{transform:scale(1);opacity:.38}100%{transform:scale(1.32);opacity:0}}
@keyframes logoGlow{0%,100%{transform:scale(.98);opacity:.72}50%{transform:scale(1.04);opacity:1}}
@keyframes floatOne{50%{transform:translate(-24px,26px)}}
@keyframes floatTwo{50%{transform:translate(28px,-20px)}}

@media(max-height:790px) and (min-width:861px){
  .radio-stage{padding-top:18px;padding-bottom:18px;gap:9px}
  .radio-card{height:calc(100svh - 120px);border-radius:28px;padding:12px}
  .radio-main{padding:18px 28px}
  .brand-block{width:min(450px,74%);margin-bottom:12px}
  .brand-block img{max-height:286px}
  .control-strip{margin-bottom:10px}
  .status{margin-bottom:10px}
  .now-card{padding:12px}
  .history-panel{padding:18px}
  .radio-footer-note strong{font-size:.72rem}.radio-footer-note p{font-size:.66rem}.radio-footer-button{min-height:27px;margin-top:4px}
}

@media(max-width:1040px){
  .radio-card{grid-template-columns:minmax(0,1fr) 370px}
  .history-panel{padding:18px}
}

@media(max-width:860px){
  body{overflow:hidden}
  .radio-stage{padding:14px 12px;gap:9px}
  .radio-card{grid-template-columns:1fr;width:min(620px,100%);height:calc(100svh - 104px);padding:10px;border-radius:25px}
  .radio-main{padding:16px 16px 14px;border-radius:20px}
  .brand-block{width:min(390px,76%);margin-bottom:12px}
  .brand-block img{max-height:248px}
  .control-strip{width:min(378px,100%);grid-template-columns:40px 68px minmax(0,1fr) 40px;gap:9px;margin-bottom:8px}
  .control-strip:before{width:118px;height:118px}
  .control-strip:after{width:146px;height:146px}
  .play-button{width:68px;height:68px}
  .play-icon{border-top-width:14px;border-bottom-width:14px;border-left-width:22px}
  .volume-button{width:40px;height:40px}
  .status{margin-bottom:8px;font-size:.64rem}
  .history-panel{display:none}
  .mobile-history-button{display:inline-flex;align-items:center;justify-content:center}
  .radio-footer-note{width:min(620px,100%)}
}

@media(max-width:560px){
  .radio-stage{padding:9px 8px;gap:7px}
  .ambient--one{width:280px;height:280px}.ambient--two{width:260px;height:260px}
  .radio-card{height:calc(100svh - 94px);padding:8px;border-radius:20px}
  .radio-main{padding:11px 10px 10px;border-radius:16px}
  .brand-block{width:min(330px,79%);margin-bottom:7px}
  .brand-block img{max-height:198px}
  .control-strip{grid-template-columns:36px 60px minmax(0,1fr) 36px;gap:7px;margin-bottom:6px}
  .control-strip:before{width:102px;height:102px}
  .control-strip:after{width:124px;height:124px}
  .play-button{width:60px;height:60px;box-shadow:0 14px 34px rgba(246,174,22,.30),0 0 0 7px rgba(246,174,22,.08),0 0 0 14px rgba(36,196,232,.045),inset 0 2px 0 rgba(255,255,255,.54)}
  .play-icon{border-top-width:12px;border-bottom-width:12px;border-left-width:19px}
  .is-playing .play-icon{width:23px;height:28px}
  .is-playing .play-icon:before,.is-playing .play-icon:after{height:28px;width:8px}
  .volume-button{width:36px;height:36px;font-size:.92rem}
  .volume-level{height:8px}
  .status{min-height:13px;margin-bottom:6px;font-size:.58rem}
  .now-card{padding:8px;border-radius:14px}
  .now-label{margin-bottom:6px;font-size:.54rem}
  .now-current{grid-template-columns:38px minmax(0,1fr);gap:8px;margin-bottom:7px}
  .current-avatar{width:38px;height:38px;border-radius:11px}
  .current-info strong{font-size:.78rem}
  .current-info span{font-size:.66rem;margin-top:2px}
  .marquee{height:31px;border-radius:10px}
  .live-pill--marquee{padding:0 8px;font-size:.50rem;gap:5px}
  .live-pill--marquee i{width:6px;height:6px}
  .marquee-track{left:72px;font-size:.72rem}
  .mobile-history-button{height:30px;margin-top:6px;border-radius:10px;font-size:.56rem}
  .radio-footer-note strong{font-size:.66rem}
  .radio-footer-note p{font-size:.60rem;line-height:1.22}
  .radio-footer-button{min-height:26px;padding:0 14px;font-size:.58rem;margin-top:3px}
  .history-modal.is-open{padding:10px}
  .history-modal__panel{max-height:86svh;padding:13px;border-radius:20px}
  .history-modal__close{width:34px;height:34px;border-radius:11px}
  .history-item{grid-template-columns:40px minmax(0,1fr);padding:8px}
  .history-avatar{width:40px;height:40px}
}

@media(max-width:390px), (max-height:660px){
  .brand-block{width:min(270px,72%);margin-bottom:4px}
  .brand-block img{max-height:156px}
  .control-strip{grid-template-columns:32px 54px minmax(0,1fr) 32px;gap:6px}
  .control-strip:before{width:92px;height:92px}
  .control-strip:after{width:112px;height:112px}
  .play-button{width:54px;height:54px}
  .volume-button{width:32px;height:32px}
  .status{display:none}
  .now-card{padding:7px}
  .radio-footer-button{display:none}
}

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