:root{
  --bg:#120d05;
  --panel:#1d160a;
  --panel-2:#2b200f;
  --line:rgba(255,220,140,.16);
  --text:#fff6dd;
  --muted:#d4bf8d;
  --accent:#ffcc57;
  --accent-2:#ff9800;
  --accent-rgb:255,204,87;
  --magenta:var(--accent);
  --magenta-2:var(--accent-2);
  --green:#55ffac;
  --amber:#ffc85a;
  --red:#ff5d7d;
  --cyan:#24f5ff;
  color-scheme:dark;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:
radial-gradient(circle at top left,rgba(255,204,87,.16),transparent 35%),
linear-gradient(180deg,var(--bg),#09070d);color:var(--text)}
.app-shell{width:min(1180px,calc(100vw - 32px));margin:0 auto;padding:24px 0 48px}
.topbar{display:flex;align-items:center;justify-content:flex-end;gap:18px;min-height:54px;margin-bottom:20px}
.status-chip{border:1px solid rgba(255,204,87,.32);border-radius:999px;padding:9px 14px;color:var(--green);
background:rgba(0,0,0,.45);box-shadow:0 0 28px rgba(85,255,172,.12);font-size:.82rem}
.dashboard{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018)),var(--panel);
border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.28)}
.full{grid-column:1/-1}.left{grid-column:span 5}.right{grid-column:span 7}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
h1,h2,h3{margin:0} h2{font-size:1.05rem}
.identity{position:relative;overflow:hidden;min-height:96px}
.identity:before{content:"";position:absolute;inset:-40%;background:
radial-gradient(circle at 30% 50%,rgba(255,204,87,.20),transparent 34%),
radial-gradient(circle at 70% 40%,rgba(255,152,0,.14),transparent 36%);
filter:blur(22px);animation:vapour 8s ease-in-out infinite alternate;pointer-events:none}
.identity>*{position:relative}.identity small{display:block;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-size:.72rem}
.identity strong{display:block;font-size:clamp(1.6rem,4vw,2.6rem);margin-top:8px;text-shadow:0 0 28px rgba(255,204,87,.25)}
@keyframes vapour{from{transform:translate(-2%,-1%) scale(1);opacity:.34}to{transform:translate(2%,1%) scale(1.06);opacity:.58}}
.device-list{display:flex;flex-direction:column;gap:10px}
.device-card{width:100%;text-align:left;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.035);
color:var(--text);padding:14px 16px;cursor:pointer}
.device-card.active{border-color:var(--accent);box-shadow:0 0 26px rgba(255,204,87,.22)}
.device-card strong{display:block}.device-card span{color:var(--muted);font-size:.86rem}
.device-card .device-name{
  transition:color .18s ease,text-shadow .18s ease;
}
.device-card.online .device-name{
  color:var(--green);
  text-shadow:0 0 10px rgba(85,255,172,.72),0 0 26px rgba(85,255,172,.32);
}
.device-card.offline .device-name{
  color:var(--red);
  text-shadow:0 0 10px rgba(255,93,125,.70),0 0 26px rgba(255,93,125,.30);
}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:8px}.field span{color:var(--muted);font-size:.82rem}
input,select{width:100%;border:1px solid rgba(255,255,255,.12);background:#0e0a12;color:var(--text);border-radius:14px;padding:12px 14px}
.segmented{display:flex;gap:8px;flex-wrap:wrap}
button,.btn{border:0;border-radius:14px;padding:11px 15px;background:linear-gradient(135deg,var(--accent),var(--accent-2));
color:#1b1203;font-weight:700;cursor:pointer}
button.ghost{background:rgba(255,255,255,.06);color:var(--text);border:1px solid rgba(255,255,255,.12)}
button:disabled{opacity:.45;cursor:not-allowed}.muted{color:var(--muted)}.danger{color:var(--red)}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.metric{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px}
.metric span{display:block;color:var(--muted);font-size:.78rem}.metric strong{display:block;margin-top:4px;font-size:1.2rem}
@media(max-width:860px){.left,.right{grid-column:1/-1}.form-grid,.metric-grid{grid-template-columns:1fr}.app-shell{width:min(100vw - 20px,1180px)}}

/* Device configuration mirrors the local Xiao layout */
.portal-dashboard{
  gap:14px;
}

.portal-dashboard .panel{
  border-radius:8px;
  padding:16px;
  min-width:0;
}

.system-identity-panel{
  grid-column:1/-1;
}

.system-identity-card{
  display:grid;
  gap:8px;
}

.system-identity-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.identity-status-chip{
  max-width:min(100%,380px);
  text-align:center;
  text-transform:uppercase;
  font-weight:900;
  line-height:1.1;
}

.system-identity-label,
.eyebrow,
.panel-title span,
.hero-status span,
.settings-panel .field span{
  color:var(--muted);
  font-size:.84rem;
}

.system-identity-label{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
}

.system-identity-card strong{
  color:#fff;
  font-size:clamp(1.6rem,4vw,2.65rem);
  line-height:1;
  text-shadow:0 0 28px rgba(var(--accent-rgb),.34);
}

.live-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.mp3-action-btn,
.standby-action-btn{
  min-height:38px;
  max-width:260px;
  padding:8px 13px;
  border:1px solid rgba(255,204,87,.30);
  border-radius:999px;
  color:#1b1203;
  line-height:1.05;
  text-align:center;
  white-space:normal;
  overflow:hidden;
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
}

.mp3-action-btn:hover:not(:disabled),
.standby-action-btn:hover:not(:disabled){
  transform:translateY(-1px);
}

.mp3-action-btn:disabled,
.standby-action-btn:disabled{
  opacity:1;
  cursor:wait;
}

.standby-action-btn{
  color:#ffffff;
  text-shadow:0 0 10px rgba(255,255,255,.10);
  border-color:rgba(255,200,90,.58);
  background:rgba(255,200,90,.10);
  box-shadow:0 0 18px rgba(255,200,90,.16);
}

.standby-action-btn.active{
  color:#fff6dd;
  border-color:rgba(255,93,125,.62);
  background:linear-gradient(135deg,rgba(255,93,125,.96),rgba(142,12,38,.88));
  box-shadow:0 0 20px rgba(255,93,125,.42),0 0 46px rgba(255,93,125,.18);
}

.standby-action-btn.maintenance{
  color:#03191b;
  border-color:rgba(36,245,255,.58);
  background:linear-gradient(135deg,var(--cyan),#8dfcff);
  box-shadow:0 0 20px rgba(36,245,255,.34),0 0 42px rgba(36,245,255,.16);
  cursor:wait;
}

.standby-action-btn.transitioning{
  color:rgba(255,246,221,.86);
  border-color:rgba(255,255,255,.16);
  background:
    linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.04)) 0 0/100% 100% no-repeat,
    rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 18px rgba(255,255,255,.08);
  cursor:wait;
}

.standby-action-btn.syncing{
  color:#ffe7a1;
  border-color:rgba(255,204,87,.54);
  background:
    linear-gradient(90deg,rgba(255,204,87,.38),rgba(255,152,0,.24)) 0 0/var(--standby-sync-progress,0%) 100% no-repeat,
    linear-gradient(135deg,rgba(255,204,87,.14),rgba(255,255,255,.04));
  box-shadow:0 0 18px rgba(255,204,87,.20),inset 0 0 0 1px rgba(255,255,255,.04);
  transition:background-size .9s linear,box-shadow .18s ease,border-color .18s ease,color .18s ease;
  cursor:wait;
}

.standby-action-btn.timeout{
  color:#fff5f7;
  border-color:rgba(255,93,125,.72);
  background:linear-gradient(135deg,rgba(255,93,125,.88),rgba(94,8,25,.78));
  box-shadow:0 0 18px rgba(255,93,125,.38),0 0 42px rgba(255,93,125,.16);
}

.standby-action-btn.timeout:hover:not(:disabled){
  box-shadow:0 0 22px rgba(255,93,125,.46),0 0 54px rgba(255,93,125,.20);
}

.mp3-action-btn.mp3-ready{
  color:#06180d;
  border-color:rgba(85,255,172,.58);
  background:linear-gradient(135deg,var(--green),#aaffd2);
  box-shadow:0 0 16px rgba(85,255,172,.34),0 0 36px rgba(85,255,172,.16);
}

.mp3-action-btn.mp3-sync-needed{
  color:#201202;
  border-color:rgba(255,204,87,.72);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 18px rgba(255,204,87,.42),0 0 42px rgba(255,152,0,.20);
  animation:mp3NeedsSync 1.7s ease-in-out infinite;
}

.mp3-action-btn.mp3-empty{
  color:var(--accent);
  border-color:rgba(255,204,87,.50);
  background:rgba(255,204,87,.08);
  box-shadow:0 0 18px rgba(255,204,87,.14);
}

.mp3-action-btn.mp3-no-card{
  color:var(--red);
  border-color:rgba(255,93,125,.38);
  background:rgba(255,93,125,.075);
  box-shadow:0 0 18px rgba(255,93,125,.16);
  cursor:not-allowed;
}

.mp3-action-btn.mp3-checking{
  color:var(--muted);
  border-color:rgba(255,220,140,.18);
  background:rgba(255,255,255,.04);
  cursor:wait;
}

.mp3-action-btn.mp3-offline{
  color:#ffd8df;
  border-color:rgba(255,93,125,.36);
  background:rgba(255,93,125,.08);
  box-shadow:0 0 18px rgba(255,93,125,.14);
  cursor:not-allowed;
}

@keyframes mp3NeedsSync{
  0%,100%{box-shadow:0 0 16px rgba(255,204,87,.30),0 0 32px rgba(255,152,0,.14)}
  50%{box-shadow:0 0 28px rgba(255,204,87,.56),0 0 58px rgba(255,152,0,.28)}
}

.devices-panel{
  grid-column:span 4;
  grid-row:span 2;
}

.hero-panel{
  grid-column:span 8;
}

.settings-panel{
  grid-column:span 8;
}

.compact-title{
  margin-bottom:14px;
}

.hero-status{
  display:grid;
  gap:8px;
  margin-bottom:18px;
}

.device-meta-line{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-size:.84rem;
}

.device-info-btn{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  min-height:28px;
  padding:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.045);
  box-shadow:0 0 16px rgba(255,255,255,.10);
}

.device-info-btn .material-symbols-outlined{
  font-size:19px;
}

.device-info-btn:hover:not(:disabled){
  color:#1b1203;
  border-color:rgba(255,204,87,.70);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 20px rgba(255,204,87,.32);
}

.hero-status strong{
  color:#fff;
  font-size:clamp(2rem,5vw,4rem);
  line-height:1;
  text-shadow:0 0 28px rgba(var(--accent-rgb),.45);
}

.portal-dashboard .metric{
  display:grid;
  gap:5px;
  padding:12px;
  border-color:var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.045);
}

.portal-dashboard .metric strong{
  margin-top:0;
  font-size:1.08rem;
}

.settings-panel .form-grid{
  gap:10px;
}

.settings-panel .field{
  display:grid;
  gap:7px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.045);
}

.range-field,
.music-trigger-field,
.audio-mode-field,
.fixed-track-field,
.cooldown-field,
.track-duration-field{
  grid-column:span 2;
}

.settings-panel input{
  width:100%;
  color:var(--text);
  background:#0e0a12;
  border:1px solid rgba(255,255,255,.16);
  border-radius:6px;
  padding:10px 11px;
  outline:none;
}

.settings-panel input:focus{
  border-color:var(--magenta);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);
}

.settings-panel input:disabled,
.settings-panel input[readonly]{
  color:#8f8199;
  background:#0a070d;
  border-color:rgba(255,255,255,.09);
}

.settings-panel .segmented{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
  padding:5px;
  margin-bottom:0;
  border:1px solid var(--line);
  border-radius:8px;
  background:#0c0910;
}

.time-trigger-options,
.cooldown-options,
.duration-options{
  display:grid;
  gap:6px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#0c0910;
}

.time-trigger-options,
.cooldown-options{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.segment,
.btn,
.stepper-btn{
  position:relative;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:8px;
  min-height:40px;
  padding:0 14px;
  color:var(--text);
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}

.segment{
  background:transparent;
  border-color:transparent;
}

.segment.active{
  background:rgba(var(--accent-rgb),.18);
  border-color:rgba(var(--accent-rgb),.45);
  box-shadow:inset 0 0 16px rgba(var(--accent-rgb),.13);
}

.trigger-card{
  min-height:52px;
  font-weight:850;
  background:rgba(255,255,255,.045);
  border-color:var(--line);
}

.segment.trigger-card.active{
  color:var(--text);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.24),rgba(var(--accent-rgb),.09));
  border-color:rgba(var(--accent-rgb),.58);
  box-shadow:inset 0 0 16px rgba(var(--accent-rgb),.12),0 0 22px rgba(var(--accent-rgb),.16);
}

.btn:hover,
.segment:hover,
.stepper-btn:hover{
  transform:translateY(-1px);
}

.btn:disabled,
.segment:disabled,
.stepper-btn:disabled{
  color:#72677a;
  cursor:not-allowed;
  transform:none;
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.08);
  box-shadow:none;
}

.btn-magenta{
  color:#1b1203;
  background:linear-gradient(135deg,var(--magenta),var(--magenta-2));
  box-shadow:0 0 26px rgba(var(--accent-rgb),.28);
}

.btn-soft{
  color:var(--text);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
}

.btn-ghost{
  color:var(--text);
  background:transparent;
  border-color:rgba(255,255,255,.18);
}

.stepper-control{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 58px;
  align-items:center;
  gap:8px;
}

.stepper-control input{
  min-height:52px;
  text-align:center;
  font-size:1.12rem;
  font-weight:850;
}

.stepper-control input::-webkit-outer-spin-button,
.stepper-control input::-webkit-inner-spin-button{
  margin:0;
  -webkit-appearance:none;
}

.stepper-btn{
  min-height:52px;
  padding:0;
  color:var(--text);
  background:rgba(255,255,255,.055);
  border-color:var(--line);
  font-size:1.35rem;
  font-weight:900;
}

.settings-panel input[type="range"]{
  accent-color:var(--magenta);
  --range-percent:0%;
  height:36px;
  padding:0;
  cursor:pointer;
  background:transparent;
  border:0;
  appearance:none;
  -webkit-appearance:none;
}

.settings-panel input[type="range"]::-webkit-slider-runnable-track{
  height:10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:linear-gradient(90deg,var(--magenta) 0 var(--range-percent),rgba(255,255,255,.13) var(--range-percent) 100%);
}

.settings-panel input[type="range"]::-webkit-slider-thumb{
  width:28px;
  height:28px;
  margin-top:-10px;
  border:2px solid #fff;
  border-radius:50%;
  background:linear-gradient(135deg,var(--magenta),var(--magenta-2));
  box-shadow:0 0 18px rgba(var(--accent-rgb),.34);
  -webkit-appearance:none;
}

.settings-panel input[type="range"]::-moz-range-track{
  height:10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:linear-gradient(90deg,var(--magenta) 0 var(--range-percent),rgba(255,255,255,.13) var(--range-percent) 100%);
}

.settings-panel input[type="range"]::-moz-range-thumb{
  width:24px;
  height:24px;
  border:2px solid #fff;
  border-radius:50%;
  background:linear-gradient(135deg,var(--magenta),var(--magenta-2));
  box-shadow:0 0 18px rgba(var(--accent-rgb),.34);
}

.status-ok{
  color:var(--green);
  border-color:rgba(85,255,172,.4);
}

.status-warn{
  color:var(--amber);
  border-color:rgba(255,200,90,.36);
}

.status-bad{
  color:var(--red);
  border-color:rgba(255,93,125,.42);
}

@media(max-width:860px){
  .devices-panel,
  .hero-panel,
  .settings-panel{
    grid-column:1/-1;
    grid-row:auto;
  }

  .range-field,
  .music-trigger-field,
  .audio-mode-field,
  .fixed-track-field,
  .cooldown-field,
  .track-duration-field{
    grid-column:1/-1;
  }

  .time-trigger-options,
  .cooldown-options{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


.sync-pending{
  color:var(--accent);
  border-color:rgba(255,204,87,.46);
  box-shadow:0 0 28px rgba(255,204,87,.16);
}

.device-card.pending{
  border-color:rgba(255,204,87,.72);
  box-shadow:0 0 26px rgba(255,204,87,.18);
}

.device-card.sync-timeout{
  border-color:rgba(255,93,125,.76);
  box-shadow:0 0 26px rgba(255,93,125,.20);
}

.device-card.sync-timeout span{
  color:var(--red);
}

.sync-loader{
  width:100%;
  height:4px;
  margin-top:12px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,204,87,.14);
  box-shadow:inset 0 0 0 1px rgba(255,204,87,.12);
}

.sync-loader span{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(var(--sync-from, 0));
  transform-origin:left center;
  border-radius:inherit;
  background:linear-gradient(90deg,#fff4b8,var(--accent),var(--accent-2));
  box-shadow:0 0 14px rgba(255,204,87,.74),0 0 28px rgba(255,152,0,.28);
  animation:syncFill var(--sync-duration, 90s) linear forwards;
}

.playback-loader{
  background:rgba(85,255,172,.12);
  box-shadow:inset 0 0 0 1px rgba(85,255,172,.14);
}

.playback-loader span{
  background:linear-gradient(90deg,#dbffec,var(--green),#59f4ff);
  box-shadow:0 0 14px rgba(85,255,172,.72),0 0 28px rgba(89,244,255,.24);
}

@keyframes syncFill{
  from{transform:scaleX(var(--sync-from, 0))}
  to{transform:scaleX(1)}
}

.pending-note{
  color:var(--accent);
  font-size:.86rem;
  margin-top:10px;
}

#saveState:empty{
  display:none;
}


.cloud-actions{
  margin-top:22px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

button.subtle{
  opacity:.78;
}

#devicePanel{
  transition:border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

#devicePanel.unsaved-changes{
  border-color:rgba(255,93,125,.86);
  box-shadow:
    0 0 0 1px rgba(255,93,125,.44),
    0 0 34px rgba(255,93,125,.22),
    0 0 90px rgba(255,39,215,.10),
    inset 0 0 30px rgba(255,93,125,.035);
}

#devicePanel.unsaved-changes::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,93,125,.18), transparent 34%),
    radial-gradient(circle at 82% 86%, rgba(255,39,215,.12), transparent 38%);
  filter:blur(12px);
  opacity:.75;
  z-index:-1;
}

#devicePanel.panel{
  position:relative;
  isolation:isolate;
}

#sendSettingsBtn:disabled,
#cancelChangesBtn:disabled{
  opacity:.38;
  cursor:not-allowed;
}


[hidden]{display:none !important}

/* Login page is completely separate from portal.php */
.login-mode{overflow:hidden}
.login-page{
  position:fixed;
  inset:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,204,87,.18), transparent 34%),
    radial-gradient(circle at 82% 80%, rgba(255,152,0,.14), transparent 38%),
    linear-gradient(180deg,#120d05,#09070d 64%,#06050a);
}
.login-page::before{
  content:"";
  position:absolute;
  inset:-18%;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,204,87,.18), transparent 30%),
    radial-gradient(circle at 70% 62%, rgba(255,152,0,.12), transparent 34%);
  filter:blur(18px);
  animation:loginAurora 12s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes loginAurora{
  from{transform:translate3d(-1.5%,-1%,0) scale(1);opacity:.7}
  to{transform:translate3d(1.5%,1%,0) scale(1.05);opacity:1}
}
.gold-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.gold-particles span{
  display:block;
  position:absolute;
  left:var(--x);
  top:-24px;
  width:var(--size);
  height:var(--size);
  min-width:2px;
  min-height:2px;
  border-radius:999px;
  opacity:var(--opacity);
  background:radial-gradient(circle,#fff9df 0%,#ffcc57 36%,rgba(255,152,0,.22) 68%,transparent 100%);
  box-shadow:0 0 10px rgba(255,204,87,.72),0 0 24px rgba(255,152,0,.30);
  animation:goldSnow var(--duration) linear infinite;
  animation-delay:var(--delay);
  will-change:transform;
}
@keyframes goldSnow{
  from{transform:translate3d(0,-8vh,0) scale(.72)}
  to{transform:translate3d(var(--drift),112vh,0) scale(1.16)}
}
.login-brand{
  display:flex;
  justify-content:flex-start;
  margin:-4px 0 4px;
}
.login-logo-stage{
  position:relative;
  width:min(100%, 272px);
  aspect-ratio:2.16 / 1;
  display:grid;
  place-items:center;
  overflow:visible;
  isolation:isolate;
  margin-left:-6px;
}
.login-logo-stage::before,
.login-logo-stage::after{
  content:"";
  position:absolute;
  inset:12% 8%;
  border-radius:999px;
  pointer-events:none;
}
.login-logo-stage::before{
  background:
    radial-gradient(circle at 50% 52%, rgba(255,231,146,.42), rgba(255,191,55,.22) 24%, rgba(255,204,87,0) 70%);
  filter:blur(16px);
  opacity:.94;
  animation:loginLogoPulse 7.2s ease-in-out infinite alternate;
}
.login-logo-stage::after{
  inset:17% 14%;
  background:
    radial-gradient(circle at 12% 40%, rgba(0,255,246,.34), transparent 34%),
    radial-gradient(circle at 28% 76%, rgba(255,66,174,.28), transparent 30%),
    radial-gradient(circle at 50% 22%, rgba(255,229,94,.22), transparent 28%),
    radial-gradient(circle at 72% 34%, rgba(113,109,255,.30), transparent 30%),
    radial-gradient(circle at 84% 68%, rgba(255,154,36,.26), transparent 30%),
    radial-gradient(circle at 56% 76%, rgba(70,255,146,.24), transparent 28%);
  filter:blur(18px) saturate(1.22);
  opacity:.96;
  animation:loginSpectrumDrift 9.8s ease-in-out infinite alternate;
}
.login-logo-aura{
  position:absolute;
  inset:16% 12%;
  border-radius:999px;
  background:
    conic-gradient(from 18deg,
      rgba(255,59,185,.34),
      rgba(255,107,0,.34),
      rgba(255,235,92,.36),
      rgba(61,255,158,.30),
      rgba(0,238,255,.32),
      rgba(126,104,255,.32),
      rgba(255,59,185,.34));
  filter:blur(18px) saturate(1.3);
  mix-blend-mode:screen;
  opacity:.9;
  animation:loginAuraOrbit 9.2s ease-in-out infinite, loginAuraSpectrum 7.4s linear infinite;
  pointer-events:none;
}
.login-logo-aura.secondary{
  inset:22% 18%;
  opacity:.62;
  filter:blur(24px) saturate(1.4);
  animation-duration:11.5s, 5.8s;
  animation-direction:alternate-reverse, reverse;
}
.login-logo-wisp{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:calc(var(--size) * .34);
  border-radius:999px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0),
    hsl(calc(var(--hue) - 28deg) 100% 62% / .14) 14%,
    hsl(var(--hue) 100% 74% / .98) 50%,
    hsl(calc(var(--hue) + 34deg) 100% 68% / .18) 86%,
    rgba(255,255,255,0));
  opacity:calc(var(--opacity) + .14);
  filter:blur(10px) saturate(1.34);
  mix-blend-mode:screen;
  box-shadow:0 0 18px hsl(var(--hue) 100% 66% / .22),0 0 42px hsl(calc(var(--hue) + 22deg) 100% 64% / .14);
  transform:translate(-50%,-50%) rotate(var(--tilt));
  animation:loginWispDrift var(--duration) ease-in-out infinite, loginWispFlash calc(var(--duration) * .58) ease-in-out infinite;
  animation-delay:var(--delay);
  will-change:transform,opacity,filter;
  pointer-events:none;
}
.login-logo{
  position:relative;
  z-index:3;
  width:min(100%, 236px);
  aspect-ratio:523.58 / 242.35;
  display:block;
  background:linear-gradient(135deg,#ffe7a1 0%,#ffcc57 34%,#ffb11f 62%,#ff9800 100%);
  -webkit-mask:url("./logo-pixelmusic.svg") center/contain no-repeat;
  mask:url("./logo-pixelmusic.svg") center/contain no-repeat;
  filter:
    drop-shadow(0 0 8px rgba(255,219,120,.32))
    drop-shadow(0 0 20px rgba(255,204,87,.26))
    drop-shadow(0 0 42px rgba(255,152,0,.14));
}
@keyframes loginLogoPulse{
  from{transform:translate3d(-1.5%, -1%, 0) scale(.98);opacity:.58}
  to{transform:translate3d(1.5%, 1%, 0) scale(1.03);opacity:.92}
}
@keyframes loginAuraOrbit{
  0%{transform:translate3d(-1.5%, -2%, 0) scale(.96) rotate(-4deg)}
  35%{transform:translate3d(1.8%, 1.4%, 0) scale(1.02) rotate(2deg)}
  70%{transform:translate3d(-1%, 2.4%, 0) scale(1.05) rotate(5deg)}
  100%{transform:translate3d(1.2%, -1.6%, 0) scale(.98) rotate(-2deg)}
}
@keyframes loginAuraSpectrum{
  0%{filter:blur(18px) saturate(1.22) hue-rotate(0deg)}
  33%{filter:blur(24px) saturate(1.48) hue-rotate(60deg)}
  66%{filter:blur(20px) saturate(1.36) hue-rotate(132deg)}
  100%{filter:blur(18px) saturate(1.22) hue-rotate(220deg)}
}
@keyframes loginSpectrumDrift{
  0%{transform:translate3d(-3%, -2%, 0) scale(.94) rotate(-4deg)}
  28%{transform:translate3d(4%, 2%, 0) scale(1.05) rotate(6deg)}
  58%{transform:translate3d(-2%, 4%, 0) scale(1.09) rotate(-3deg)}
  100%{transform:translate3d(2%, -3%, 0) scale(.98) rotate(4deg)}
}
@keyframes loginWispDrift{
  0%{transform:translate(-50%,-50%) scale(.82) rotate(calc(var(--tilt) - 8deg))}
  50%{transform:translate(calc(-50% + var(--drift-x)), calc(-50% + var(--drift-y))) scale(1.14) rotate(calc(var(--tilt) + 8deg))}
  100%{transform:translate(-50%,-50%) scale(.9) rotate(calc(var(--tilt) - 5deg))}
}
@keyframes loginWispFlash{
  0%,100%{opacity:calc(var(--opacity) + .08)}
  45%{opacity:calc(var(--opacity) + .26)}
  70%{opacity:calc(var(--opacity) + .18)}
}
.login-card{
  position:relative;
  z-index:2;
  width:min(380px, calc(100vw - 42px));
  margin:auto;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:16px;
  border-radius:26px;
  border:1px solid rgba(255,220,140,.24);
  background:radial-gradient(circle at 20% 10%,rgba(255,204,87,.10),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.024)),rgba(29,22,10,.82);
  backdrop-filter:blur(18px);
  box-shadow:0 28px 90px rgba(0,0,0,.48),0 0 0 1px rgba(255,204,87,.06),0 0 70px rgba(255,204,87,.13);
}
.login-card input{height:48px;border-radius:16px;background:#0e0a12;border-color:rgba(255,220,140,.18)}
.login-card input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px rgba(255,204,87,.25),0 0 24px rgba(255,204,87,.14)}
.login-card button[type="submit"]{height:48px;margin-top:2px;border-radius:16px}
@media(max-width:640px){
  .login-page{padding:18px}
  .login-card{
    width:min(100%, calc(100vw - 28px));
    padding:22px 18px 20px;
    gap:14px;
    border-radius:22px;
  }
  .login-brand{
    margin:-2px 0 2px;
  }
  .login-logo-stage{
    width:min(100%, 228px);
    margin-left:-4px;
  }
  .login-logo{
    width:min(100%, 196px);
  }
  .login-logo-wisp{
    filter:blur(10px);
  }
}

/* Logged topbar */
.portal-userbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
  margin-left:auto;
  padding:6px;
  color:#fff;
  border:1px solid rgba(255,220,140,.18);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025)),rgba(14,10,18,.66);
  box-shadow:0 16px 44px rgba(0,0,0,.30),0 0 34px rgba(255,204,87,.08);
  backdrop-filter:blur(16px);
}

.user-pill{
  display:flex;
  align-items:center;
  min-width:0;
  padding:0 10px;
}

.user-meta{
  display:flex;
  min-width:0;
  align-items:center;
  min-height:42px;
  line-height:1;
}

#loggedUserName{
  max-width:220px;
  overflow:hidden;
  color:#ffffff;
  font-size:.96rem;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:6px;
  padding-left:6px;
  border-left:1px solid rgba(255,255,255,.10);
}

.topbar-icon{
  appearance:none;
  width:42px;
  height:42px;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  background:rgba(255,255,255,.055);
  cursor:pointer;
  opacity:.94;
  transition:background 160ms ease,border-color 160ms ease,box-shadow 160ms ease,transform 160ms ease,color 160ms ease;
}

.topbar-icon:hover{
  color:#ffcc57;
  border-color:rgba(255,204,87,.42);
  background:rgba(255,204,87,.10);
  box-shadow:0 0 28px rgba(255,204,87,.12);
  transform:translateY(-1px);
}

.topbar-icon:focus-visible{
  outline:2px solid rgba(255,204,87,.72);
  outline-offset:3px;
}

.topbar-icon .material-symbols-outlined{
  font-size:27px;
  line-height:1;
  font-variation-settings:
    'FILL' 0,
    'wght' 350,
    'GRAD' 0,
    'opsz' 28;
}



/* Device grouping */
.device-group-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.device-group-title{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 8px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--accent);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.12em;
  text-align:left;
  text-transform:uppercase;
}

.device-group-title[type="button"]{
  min-height:40px;
  cursor:pointer;
}

.device-group-title[type="button"]:hover{
  border-color:rgba(255,204,87,.22);
  background:rgba(255,204,87,.055);
  box-shadow:0 0 20px rgba(255,204,87,.08);
}

.device-group-section.locked-open .device-group-title[type="button"]{
  cursor:default;
  border-color:rgba(255,204,87,.42);
  background:linear-gradient(180deg,rgba(255,204,87,.10),rgba(255,255,255,.025));
  box-shadow:0 0 24px rgba(255,204,87,.12);
}

.device-group-section.locked-open .device-group-title[type="button"]:hover{
  transform:none;
}

.device-group-title:focus-visible{
  outline:2px solid rgba(255,204,87,.72);
  outline-offset:2px;
}

.device-group-name{
  display:flex;
  align-items:center;
  min-width:0;
  gap:6px;
}

.device-group-name > span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.device-group-chevron{
  flex:0 0 auto;
  color:var(--accent);
  font-size:20px;
  line-height:1;
  transition:transform .18s ease;
  font-variation-settings:
    'FILL' 0,
    'wght' 420,
    'GRAD' 0,
    'opsz' 24;
}

.device-group-section.collapsed .device-group-chevron{
  transform:rotate(-90deg);
}

.device-group-title small{
  display:inline-flex;
  min-width:24px;
  height:24px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,204,87,.28);
  border-radius:999px;
  color:var(--text);
  background:rgba(255,204,87,.08);
  letter-spacing:0;
}

.group-status-counts{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:0 0 auto;
}

.group-status-count{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
  white-space:nowrap;
}

.group-status-count i{
  width:10px;
  height:10px;
  border-radius:50%;
}

.group-status-count strong{
  font-size:.82rem;
}

.group-status-count.online{
  color:var(--green);
  text-shadow:0 0 12px rgba(85,255,172,.55);
}

.group-status-count.online i{
  background:var(--green);
  box-shadow:0 0 10px rgba(85,255,172,.85),0 0 22px rgba(85,255,172,.35);
}

.group-status-count.offline{
  color:var(--red);
  text-shadow:0 0 12px rgba(255,93,125,.55);
}

.group-status-count.offline i{
  background:var(--red);
  box-shadow:0 0 10px rgba(255,93,125,.85),0 0 22px rgba(255,93,125,.35);
}

.device-group-section.collapsed .device-group-title{
  border-color:rgba(255,204,87,.16);
  background:linear-gradient(180deg,rgba(255,204,87,.075),rgba(255,255,255,.025));
}

.device-group-section.collapsed.contains-active .device-group-title{
  border-color:rgba(255,204,87,.55);
  box-shadow:0 0 24px rgba(255,204,87,.14);
}

.device-group-section.ungrouped .device-group-title{
  color:var(--muted);
}

/* Users modal */
.modal-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.62);backdrop-filter:blur(12px)}
.users-modal{width:min(980px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto}
.device-info-modal{width:min(1040px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto}
.device-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.device-info-card{
  padding:14px;
  border:1px solid rgba(255,220,140,.16);
  border-radius:12px;
  background:rgba(255,255,255,.035);
}
.device-info-card h3{
  margin-bottom:10px;
  color:#fff;
  font-size:.96rem;
}
.device-info-card dl{
  display:grid;
  gap:8px;
  margin:0;
}
.device-info-card dl div{
  display:grid;
  grid-template-columns:minmax(110px,.7fr) minmax(0,1fr);
  align-items:start;
  gap:10px;
}
.device-info-card dt{
  color:var(--muted);
  font-size:.78rem;
}
.device-info-card dd{
  min-width:0;
  margin:0;
  color:var(--text);
  font-size:.86rem;
  overflow:hidden;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.firmware-update-panel{
  display:grid;
  gap:12px;
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(36,245,255,.22);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(36,245,255,.075),rgba(255,255,255,.026));
}
.firmware-update-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.firmware-update-head p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:.86rem;
}
.firmware-progress-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid rgba(255,204,87,.26);
  border-radius:12px;
  background:rgba(255,204,87,.06);
}
.firmware-progress-panel strong,
.firmware-progress-panel span{
  display:block;
}
.firmware-progress-panel span{
  margin-top:3px;
  color:var(--muted);
  font-size:.84rem;
}
.firmware-server-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.035);
}
.firmware-server-panel strong,
.firmware-server-panel span{
  display:block;
}
.firmware-server-panel span{
  margin-top:3px;
  color:var(--muted);
  font-size:.84rem;
}
.firmware-sync-loader span{
  animation:none;
  transform:scaleX(var(--sync-percent,0));
}
#firmwareProgressPanel[hidden]{display:none !important}
.settings-tabs{
  display:flex;
  gap:8px;
  margin:-2px 0 18px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0c0910;
}

.modal-backdrop.mp3-modal-mode .settings-tabs{
  display:none;
}

.settings-tab{
  flex:1;
  min-height:42px;
  color:var(--muted);
  background:transparent;
  border:1px solid transparent;
  border-radius:8px;
}

.settings-tab.active{
  color:#1b1203;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 24px rgba(var(--accent-rgb),.20);
}

.settings-tab-panel{
  display:block;
}

.groups-layout,
.mp3-files-layout,
.users-layout{display:grid;grid-template-columns:1fr;gap:20px}
.groups-layout:has(#groupForm:not([hidden])),
.users-layout:has(#userForm:not([hidden])){grid-template-columns:1.2fr .8fr}
.users-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.mp3-toolbar-actions,
.mp3-row-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.groups-list,
.users-list{display:flex;flex-direction:column;gap:10px}
.group-row,
.user-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.035)}
.group-row.active{border-color:rgba(255,204,87,.58);box-shadow:0 0 24px rgba(255,204,87,.12)}
.user-row span{display:block;color:var(--muted);font-size:.84rem;margin-top:3px}
.user-actions{display:flex;gap:8px;flex-wrap:wrap}
.mp3-row-actions.confirming,
.user-actions.confirming{min-width:154px}
.inline-delete-confirm{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  width:100%;
  min-width:154px;
  border:1px solid rgba(255,93,125,.55);
  background:linear-gradient(135deg,#ff5d7d,#ff174f);
  color:#fff6dd;
  box-shadow:0 0 16px rgba(255,93,125,.40),0 0 34px rgba(255,23,79,.22);
  transition:opacity .18s ease,box-shadow .18s ease,transform .18s ease;
  user-select:none;
  touch-action:none;
}
.inline-delete-confirm::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(135deg,#8a0924,#4f0617);
}
.inline-delete-confirm span{
  position:relative;
  z-index:1;
}
.inline-delete-confirm.arming{
  opacity:.58;
  cursor:wait;
}
.inline-delete-confirm.holding::before{
  transform:scaleX(1);
  transition:transform 2s linear;
}
.inline-delete-confirm.holding{
  transform:translateY(1px);
  box-shadow:0 0 24px rgba(255,93,125,.62),0 0 52px rgba(255,23,79,.34);
}
.inline-delete-confirm.complete::before{
  transform:scaleX(1);
}
.inline-delete-confirm:hover{
  box-shadow:0 0 20px rgba(255,93,125,.56),0 0 44px rgba(255,23,79,.30);
}
.group-form,
.user-form{border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:18px;background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:12px}
#groupForm[hidden],
#userForm[hidden]{display:none !important}
.danger-btn{color:var(--red)}

.mp3-files-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.mp3-file-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.035)}
.mp3-icon-btn{display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border-radius:999px}
.mp3-icon-btn .material-symbols-outlined{font-size:22px}
.mp3-icon-btn.playing{
  position:relative;
  color:#fff6dd;
  border:1px solid rgba(255,93,125,.62);
  background:linear-gradient(135deg,#ff5d7d,#ff174f);
  box-shadow:0 0 16px rgba(255,93,125,.50),0 0 38px rgba(255,23,79,.28);
  animation:mp3PreviewPulse 1.05s ease-in-out infinite;
}
.mp3-icon-btn.playing::after{
  content:"";
  position:absolute;
  inset:-6px;
  border:1px solid rgba(255,93,125,.40);
  border-radius:999px;
  opacity:.9;
  pointer-events:none;
  animation:mp3PreviewRing 1.05s ease-out infinite;
}
@keyframes mp3PreviewPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 16px rgba(255,93,125,.46),0 0 38px rgba(255,23,79,.24)}
  50%{transform:scale(1.05);box-shadow:0 0 24px rgba(255,93,125,.68),0 0 56px rgba(255,23,79,.36)}
}
@keyframes mp3PreviewRing{
  from{transform:scale(.86);opacity:.78}
  to{transform:scale(1.32);opacity:0}
}
.mp3-file-info{display:grid;gap:6px;min-width:0}
.mp3-file-info input{height:38px;border-radius:10px}
.mp3-file-description{display:block;color:var(--text);font-size:.98rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp3-file-info span{color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp3-upload-form{display:grid;grid-template-columns:1fr 220px auto;gap:10px;align-items:end;margin:12px 0;padding:14px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.03)}
.mp3-upload-form .cloud-actions{align-self:end;margin:0}
.mp3-upload-form .danger{grid-column:1/-1}
#mp3UploadForm[hidden],
#mp3SyncPanel[hidden]{display:none !important}
.mp3-sync-panel{display:grid;grid-template-columns:minmax(0,1fr) 180px auto;align-items:center;gap:12px;margin:10px 0 12px;padding:12px;border:1px solid rgba(255,204,87,.26);border-radius:16px;background:rgba(255,204,87,.06)}
.mp3-sync-panel strong,
.mp3-sync-panel span{display:block}
.mp3-sync-panel span{color:var(--muted);font-size:.84rem;margin-top:3px}
.mp3-sync-loader{margin:0}
.mp3-sync-loader span{animation:none;transform:scaleX(var(--sync-percent,0))}

.group-info,
.user-info{
  min-width:0;
}

.group-info strong,
.group-info > span,
.user-info strong,
.user-info > span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.group-info > span,
.user-info > span{
  max-width:420px;
  color:var(--muted);
  font-size:.84rem;
  margin-top:3px;
}

.group-devices-field{
  gap:10px;
}

.group-device-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:360px;
  overflow:auto;
  padding-right:4px;
}

.group-device-option{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  cursor:pointer;
}

.group-device-option input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--accent);
}

.group-device-option span,
.group-device-option strong,
.group-device-option small{
  display:block;
  min-width:0;
}

.group-device-option strong{
  overflow:hidden;
  color:var(--text);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.group-device-option small{
  margin-top:2px;
  color:var(--muted);
  font-size:.76rem;
}

.empty-note{
  padding:14px;
  border:1px dashed rgba(255,255,255,.13);
  border-radius:14px;
  color:var(--muted);
  background:rgba(255,255,255,.025);
}

.user-badges{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}

.role-badge{
  display:inline-flex;
  align-items:center;
  margin-top:0;
  min-height:24px;
  padding:4px 9px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
}

.role-badge.admin{
  color:#1b1203;
  border-color:rgba(255,204,87,.62);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}

.role-badge.user{
  color:#dbeafe;
  border-color:rgba(147,197,253,.30);
  background:rgba(59,130,246,.14);
}

.role-badge.current{
  color:var(--green);
  border-color:rgba(85,255,172,.28);
  background:rgba(85,255,172,.08);
}

.danger-btn:disabled{
  color:var(--muted);
}

.read-only-control,
input:disabled,
select:disabled{
  cursor:not-allowed;
  opacity:.62;
}

.viewer-mode .settings-panel .read-only-control,
.viewer-mode .settings-panel input:disabled,
.viewer-mode .settings-panel select:disabled,
.viewer-mode .settings-panel .segment:disabled,
.viewer-mode .settings-panel .stepper-btn:disabled{
  opacity:1;
  cursor:default;
  pointer-events:none;
}

.viewer-mode .settings-panel input:disabled,
.viewer-mode .settings-panel input[readonly]{
  color:var(--text);
  background:#0e0a12;
  border-color:rgba(255,255,255,.16);
}

.viewer-mode .settings-panel input[type="range"]:disabled{
  background:transparent;
  border:0;
}

.viewer-mode .settings-panel input[type="range"]:disabled::-webkit-slider-runnable-track{
  border-color:rgba(255,255,255,.12);
  background:linear-gradient(90deg,var(--magenta) 0 var(--range-percent),rgba(255,255,255,.13) var(--range-percent) 100%);
}

.viewer-mode .settings-panel input[type="range"]:disabled::-webkit-slider-thumb{
  border-color:#fff;
  background:linear-gradient(135deg,var(--magenta),var(--magenta-2));
  box-shadow:0 0 18px rgba(var(--accent-rgb),.34);
}

.viewer-mode .settings-panel input[type="range"]:disabled::-moz-range-track{
  border-color:rgba(255,255,255,.12);
  background:linear-gradient(90deg,var(--magenta) 0 var(--range-percent),rgba(255,255,255,.13) var(--range-percent) 100%);
}

.viewer-mode .settings-panel input[type="range"]:disabled::-moz-range-thumb{
  border-color:#fff;
  background:linear-gradient(135deg,var(--magenta),var(--magenta-2));
  box-shadow:0 0 18px rgba(var(--accent-rgb),.34);
}

.viewer-mode .settings-panel .segment:disabled{
  color:var(--text);
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}

.viewer-mode .settings-panel .segment.active:disabled{
  background:rgba(var(--accent-rgb),.18);
  border-color:rgba(var(--accent-rgb),.45);
  box-shadow:inset 0 0 16px rgba(var(--accent-rgb),.13);
}

.viewer-mode .settings-panel .trigger-card:disabled{
  color:var(--text);
  background:rgba(255,255,255,.045);
  border-color:var(--line);
}

.viewer-mode .settings-panel .segment.trigger-card.active:disabled{
  color:var(--text);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.24),rgba(var(--accent-rgb),.09));
  border-color:rgba(var(--accent-rgb),.58);
  box-shadow:inset 0 0 16px rgba(var(--accent-rgb),.12),0 0 22px rgba(var(--accent-rgb),.16);
}

.viewer-mode .settings-panel .stepper-btn:disabled{
  color:var(--text);
  background:rgba(255,255,255,.055);
  border-color:var(--line);
}

@media(max-width:860px){
  .groups-layout,
  .groups-layout:has(#groupForm:not([hidden])),
  .users-layout,
  .users-layout:has(#userForm:not([hidden])){grid-template-columns:1fr}
  .device-info-grid,
  .mp3-file-row,
  .mp3-upload-form,
  .mp3-sync-panel,
  .firmware-progress-panel{grid-template-columns:1fr}
  .firmware-server-panel{align-items:stretch;flex-direction:column}
  .firmware-update-head{align-items:stretch;flex-direction:column}
  .portal-userbar{width:100%;justify-content:flex-end}
}

@media(max-width:520px){
  .topbar{align-items:stretch}
  .portal-userbar{width:100%;align-items:center;justify-content:space-between}
  .user-pill{min-width:0}
  #loggedUserName{max-width:42vw}
}