:root{
  --radio-max:1180px;
  --radio-line:var(--idesuss-border,rgba(255,255,255,.10));
  --radio-text:var(--idesuss-text,#f5f1e8);
  --radio-muted:var(--idesuss-text-muted,#b9c5d1);
  --radio-surface:var(--idesuss-surface,#102131);
  --radio-surface-soft:var(--idesuss-surface-soft,#15293b);
  --radio-accent:var(--idesuss-accent,#e0a85a);
  --radio-cool:var(--idesuss-accent-cool,#5b9ed8);
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;
  min-height:100vh;
  color:var(--radio-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
button,select,input{font:inherit}
a{color:inherit}

.radio-topbar{
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:1px solid var(--radio-line);
  background:rgba(7,17,28,.94);
  backdrop-filter:blur(18px);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.radio-topbar-inner{
  width:min(var(--radio-max),calc(100% - 28px));
  min-height:68px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.radio-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:max-content;
  text-decoration:none;
}
.radio-brand-logo{width:34px;height:34px;border-radius:10px}
.radio-brand-copy{display:grid;line-height:1.05}
.radio-brand-title{font-size:1.03rem;font-weight:950;letter-spacing:-.025em}
.radio-brand-sub{margin-top:4px;color:#8397a7;font-size:.62rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.radio-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex:1 1 auto;
}
.radio-nav a{
  padding:8px 10px;
  border-radius:8px;
  color:#aebdca;
  font-size:.72rem;
  font-weight:800;
  text-decoration:none;
}
.radio-nav a:hover,.radio-nav a.is-active{color:#f5f1e8;background:rgba(255,255,255,.055)}
.top-nav{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:max-content}
.language-select,.back,.skin-select{
  min-height:38px;
  border:1px solid var(--radio-line);
  border-radius:9px;
  background:rgba(255,255,255,.035);
  color:#dce5eb;
  font-weight:800;
}
.language-select,.skin-select{padding:7px 9px;cursor:pointer}
.back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  text-decoration:none;
  font-size:.7rem;
}
.back:hover,.language-select:hover,.skin-select:hover{border-color:rgba(91,158,216,.38);background:rgba(255,255,255,.055)}

.shell{width:min(var(--radio-max),calc(100% - 28px));margin:0 auto;padding:28px 0 54px}
.radio-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:20px;
  margin-bottom:16px;
}
.radio-kicker{
  margin:0 0 7px;
  color:var(--radio-accent);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.radio-hero h1{
  margin:0;
  font-size:clamp(2rem,4.6vw,3.7rem);
  line-height:.96;
  letter-spacing:-.05em;
}
.subtitle{max-width:720px;margin:11px 0 0;color:#aebdca;font-size:.86rem;line-height:1.55}
.tier{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.badge{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:7px 10px;
  border:1px solid rgba(224,168,90,.22);
  border-radius:9px;
  background:rgba(224,168,90,.065);
  color:#d9b77f;
  font-size:.68rem;
  font-weight:900;
}

.radio-face{
  overflow:hidden;
  border:1px solid var(--radio-line);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(16,33,49,.96),rgba(11,23,36,.98));
  box-shadow:var(--idesuss-shadow,0 18px 50px rgba(0,0,0,.28));
}
.face-head{display:none}
.radio-console{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);
  min-height:260px;
}
.display{
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
  background:
    radial-gradient(circle at 12% 10%,rgba(91,158,216,.11),transparent 42%),
    #091724;
  border-right:1px solid var(--radio-line);
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  color:#8fa4b4;
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--idesuss-success,#2fb173);
  box-shadow:0 0 0 3px rgba(47,177,115,.08);
}
.now{
  max-width:820px;
  margin:10px 0 7px;
  color:#f8f4ec;
  font-size:clamp(1.7rem,4vw,3.15rem);
  font-weight:950;
  line-height:1.02;
  letter-spacing:-.045em;
  overflow-wrap:anywhere;
}
.status{max-width:760px;min-height:1.4em;color:#9dafbd;font-size:.78rem;line-height:1.5}
.volume-wrap{
  display:grid;
  grid-template-columns:auto minmax(140px,320px) auto;
  align-items:center;
  gap:11px;
}
.volume-wrap label{color:#869aaa;font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.volume-wrap input{width:100%;accent-color:var(--radio-cool)}
.volume-value{color:#8295a4;font-size:.65rem;font-variant-numeric:tabular-nums}

.radio-controls{
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
  background:linear-gradient(180deg,rgba(21,41,59,.96),rgba(13,29,43,.98));
}
.radio-control-label{margin:0;color:#8295a4;font-size:.62rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.transport{
  position:static;
  z-index:auto;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  display:grid;
  gap:9px;
  background:none;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}
.transport button{
  min-height:46px;
  border:1px solid var(--radio-line);
  border-radius:9px;
  background:rgba(255,255,255,.035);
  color:#e5ebef;
  font-weight:900;
  cursor:pointer;
}
.transport button:hover{background:rgba(255,255,255,.06);border-color:rgba(91,158,216,.30)}
.transport .primary{
  min-width:0;
  border-color:rgba(224,168,90,.34);
  background:linear-gradient(135deg,#9b713c,#c9954e);
  color:#0b1520;
}
.transport .primary:hover{background:linear-gradient(135deg,#ab7d43,#dda756)}
.radio-control-meta{padding-top:4px;color:#7f92a1;font-size:.66rem;line-height:1.5}

.radio-presets-section{padding:18px;border-top:1px solid var(--radio-line)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:12px}
.section-title{
  margin:0;
  color:#dfe6ea;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.section-hint{margin:0;color:#788c9c;font-size:.66rem}
.presets{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.preset{
  min-height:72px;
  padding:8px;
  border:1px solid var(--radio-line);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:#eef2f4;
  cursor:pointer;
  display:grid;
  place-items:center;
  text-align:center;
}
.preset:hover{border-color:rgba(91,158,216,.36);background:rgba(91,158,216,.045)}
.preset b{display:inline-flex;align-items:center;gap:7px;font-size:1.05rem}
.preset small{color:#8ea0ae;font-size:.62rem;text-transform:capitalize}
.preset.saved{box-shadow:inset 0 0 0 1px rgba(91,158,216,.22);background:rgba(91,158,216,.035)}
.preset.locked{opacity:.38;cursor:not-allowed}
.preset.unlocked{opacity:1}
.preset.unlocked b{font-size:1.17rem}
.preset-lock{position:relative;display:inline-block;width:14px;height:11px;border:2px solid currentColor;border-radius:3px;color:#7b8795}
.preset-lock::before{content:"";position:absolute;width:8px;height:8px;border:2px solid currentColor;border-bottom:0;border-radius:7px 7px 0 0;left:1px;top:-9px;transform-origin:left bottom}
.preset-lock.is-open{color:#d9b35e}
.preset-lock.is-open::before{transform:translate(4px,-1px) rotate(32deg)}
.preset-lock.is-closed{color:#7b8795}
.note{margin:10px 0 0;color:#768a9a;font-size:.67rem;line-height:1.5}
#saveHint:empty{display:none}

.radio-footer-note{
  margin-top:12px;
  padding:0 3px;
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:#718695;
  font-size:.64rem;
  line-height:1.5;
}
.radio-footer-note::before{
  content:"i";
  flex:0 0 auto;
  width:16px;height:16px;
  display:grid;place-items:center;
  border:1px solid var(--radio-line);
  border-radius:50%;
  color:#93a5b3;
  font-size:.58rem;
  font-weight:900;
}

body.radio-directory-open{overflow:hidden}
.radio-directory-panel[hidden]{display:none!important}
.radio-directory-panel{
  position:fixed;inset:0;z-index:200000;
  padding:max(16px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  display:flex;align-items:center;justify-content:center;
  background:rgba(3,9,17,.78);
  backdrop-filter:blur(8px);
}
.radio-directory-card{
  width:min(980px,100%);height:min(820px,92dvh);
  padding:18px;
  display:flex;flex-direction:column;gap:14px;overflow:hidden;
  border:1px solid var(--radio-line);border-radius:16px;
  background:linear-gradient(180deg,#102131,#0b1724);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.radio-directory-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.radio-directory-head h2{margin:0;font-size:1.15rem;letter-spacing:-.02em}
.radio-directory-close{
  width:38px;height:38px;border:1px solid var(--radio-line);border-radius:9px;
  background:rgba(255,255,255,.035);color:#fff;font-size:1.35rem;line-height:1;cursor:pointer;
}
.radio-directory-filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:9px}
.radio-directory-field{display:grid;gap:6px;color:#9eb0bd;font-size:.68rem;font-weight:800}
.radio-directory-field input,.radio-directory-field select{
  width:100%;min-width:0;padding:9px 10px;
  border:1px solid var(--radio-line);border-radius:9px;
  background:#091724;color:#eef2f4;
}
.radio-directory-actions{display:flex;justify-content:flex-end}
.radio-directory-actions button,.radio-directory-result-actions button{
  padding:8px 10px;border:1px solid var(--radio-line);border-radius:8px;
  background:rgba(255,255,255,.035);color:#e8edef;font-size:.7rem;font-weight:850;cursor:pointer;
}
.radio-directory-actions .primary,.radio-directory-result-actions .primary{
  border-color:rgba(224,168,90,.32);background:rgba(224,168,90,.11);color:#e0bd87;
}
.radio-directory-result-actions button:disabled{opacity:.4;cursor:not-allowed}
.radio-directory-message{min-height:1.3em;color:#94a6b4;font-size:.72rem}
.radio-directory-results{overflow-y:auto;overscroll-behavior:contain;display:grid;gap:7px;padding-right:4px}
.radio-directory-result{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px;border:1px solid var(--radio-line);border-radius:10px;background:rgba(255,255,255,.02)
}
.radio-directory-result-copy{display:grid;gap:4px;min-width:0}
.radio-directory-result-copy strong{overflow-wrap:anywhere;font-size:.78rem}
.radio-directory-result-copy span{color:#8498a8;font-size:.67rem;overflow-wrap:anywhere}
.radio-directory-result-actions{display:flex;gap:7px;flex:0 0 auto}

@media(max-width:980px){
  .radio-nav{display:none}
  .radio-console{grid-template-columns:1fr}
  .display{border-right:0;border-bottom:1px solid var(--radio-line)}
  .radio-controls{display:grid;grid-template-columns:1fr 1fr;align-items:end}
  .radio-control-meta{display:none}
  .presets{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
  .radio-topbar-inner{align-items:flex-start;padding:11px 0;flex-wrap:wrap}
  .radio-brand{flex:1 1 auto}
  .top-nav{width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:2px}
  .radio-hero{grid-template-columns:1fr;align-items:start}
  .tier{justify-content:flex-start}
  .display{padding:22px}
  .radio-controls{grid-template-columns:1fr}
  .radio-directory-panel{align-items:flex-start}
  .radio-directory-card{height:calc(100dvh - max(32px,env(safe-area-inset-top) + env(safe-area-inset-bottom)));padding:14px}
  .radio-directory-filters{grid-template-columns:1fr 1fr}
  .radio-directory-result{align-items:flex-start;flex-direction:column}
  .radio-directory-result-actions{width:100%}
  .radio-directory-result-actions button{flex:1}
}
@media(max-width:520px){
  .radio-topbar-inner,.shell{width:min(100% - 20px,var(--radio-max))}
  .radio-brand-sub{display:none}
  .radio-hero h1{font-size:2rem}
  .subtitle{font-size:.78rem}
  .top-nav .back{white-space:nowrap}
  .language-select{max-width:150px}
  .display{padding:18px}
  .volume-wrap{grid-template-columns:1fr}
  .presets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-head{align-items:flex-start;flex-direction:column}
  .radio-directory-filters{grid-template-columns:1fr}
  .radio-directory-result-actions{flex-direction:column}
}