/* AffectoneWave for Broadcast
   Visual language inherited from the supplied AffectoneWave: deep charcoal panels,
   violet/cyan accents, restrained glow, compact audio-lab controls. */

.aw-broadcast-modal[hidden],.aw-pad-modal[hidden]{display:none!important}
.aw-broadcast-modal,
.aw-pad-modal{
  --aw-bg:#080910;
  --aw-panel:rgba(20,22,31,.96);
  --aw-panel2:rgba(13,15,23,.97);
  --aw-line:rgba(255,255,255,.08);
  --aw-line-strong:rgba(255,255,255,.15);
  --aw-text:#f5f7ff;
  --aw-muted:#8d93a8;
  --aw-accent:#9f7aea;
  --aw-accent-strong:#b794f4;
  --aw-blue:#55d6ff;
  --aw-danger:#ff5b7d;
  --aw-warning:#f5c563;
  --aw-success:#68efc1;
  position:fixed;
  inset:0;
  z-index:6000;
  color:var(--aw-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.aw-pad-modal{z-index:6200}
.aw-broadcast-backdrop,.aw-pad-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(3,4,8,.76);
  backdrop-filter:blur(8px);
}
.aw-broadcast-dialog{
  position:absolute;
  inset:3vh max(16px,3vw);
  overflow:auto;
  width:auto;
  max-width:1500px;
  margin:auto;
  padding:22px;
  border:1px solid var(--aw-line);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% -15%,rgba(118,83,208,.18),transparent 38%),
    radial-gradient(circle at 100% 45%,rgba(39,175,215,.07),transparent 32%),
    linear-gradient(180deg,#0b0c14 0%,#07080e 100%);
  box-shadow:0 35px 100px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.03);
  opacity:0;
  transform:translateY(8px) scale(.995);
  transition:opacity .12s ease,transform .12s ease;
}
.aw-broadcast-modal.open .aw-broadcast-dialog{opacity:1;transform:none}
.aw-broadcast-header,.aw-broadcast-brand,.aw-header-status,.aw-panel-heading,.aw-soundpad-toolbar,.aw-master-control>div,.aw-pad-header,.aw-pad-actions,.aw-pad-actions>div{
  display:flex;
  align-items:center;
}
.aw-broadcast-header{
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.aw-broadcast-brand{gap:13px;min-width:0}
.aw-brand-mark{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
  flex:0 0 auto;
  width:48px;
  height:48px;
  padding:11px;
  border:1px solid var(--aw-line-strong);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(169,125,255,.24),rgba(34,40,58,.65));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 35px rgba(98,65,170,.20);
}
.aw-brand-mark span{
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--aw-blue),var(--aw-accent));
}
.aw-brand-mark span:nth-child(1){height:11px}.aw-brand-mark span:nth-child(2){height:22px}.aw-brand-mark span:nth-child(3){height:16px}.aw-brand-mark span:nth-child(4){height:27px}
.aw-eyebrow,.aw-panel-kicker{
  margin:0 0 3px;
  color:var(--aw-accent-strong);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
}
.aw-broadcast-brand h2,.aw-panel h3,.aw-pad-header h2{margin:0;color:var(--aw-text)}
.aw-broadcast-brand h2{font-size:clamp(22px,2.2vw,34px);line-height:1;letter-spacing:-.04em}
.aw-broadcast-brand h2 small{display:inline;color:var(--aw-muted);font-size:.42em;font-weight:700;letter-spacing:.03em}
.aw-header-status{gap:8px;flex-wrap:wrap;justify-content:flex-end}
.aw-sync-status,.aw-engine-status{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border:1px solid var(--aw-line-strong);
  border-radius:999px;
  background:rgba(23,25,35,.82);
  color:var(--aw-muted);
  font-size:10px;
  font-weight:850;
  letter-spacing:.07em;
}
.aw-sync-status[data-state="saved"]{border-color:rgba(104,239,193,.35);color:#8ee9cb}
.aw-sync-status[data-state="loading"]{color:#d8dbee}
.aw-sync-status[data-state="dirty"]{color:var(--aw-warning)}
.aw-sync-status[data-state="error"]{border-color:rgba(255,91,125,.42);color:#ff8ba3}
.aw-engine-status[data-live="1"]{border-color:rgba(104,239,193,.48);color:var(--aw-success);box-shadow:0 0 18px rgba(104,239,193,.08)}
.aw-close{
  width:36px;
  height:36px;
  border:1px solid var(--aw-line-strong);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  color:var(--aw-text);
  cursor:pointer;
  font-size:22px;
}
.aw-broadcast-top-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.aw-panel{
  position:relative;
  overflow:hidden;
  min-width:0;
  padding:20px;
  border:1px solid var(--aw-line);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(24,26,37,.94),rgba(13,15,23,.96));
  box-shadow:0 22px 60px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.03);
}
.aw-panel::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(183,148,244,.42),transparent);
}
.aw-panel-heading{justify-content:space-between;gap:14px;margin-bottom:18px}
.aw-panel h3{font-size:19px;letter-spacing:-.02em}
.aw-field,.aw-range-field{display:grid;gap:8px;margin-bottom:15px}
.aw-field>span,.aw-master-control>span{
  color:var(--aw-muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
}
.aw-field input[type="text"],.aw-field input:not([type]),.aw-field select,.aw-pad-body input,.aw-pad-body select,.aw-broadcast-modal select{
  width:100%;
  min-height:43px;
  box-sizing:border-box;
  padding:0 38px 0 12px;
  border:1px solid var(--aw-line-strong);
  border-radius:10px;
  outline:none;
  background:#121520;
  color:var(--aw-text);
  font:inherit;
  font-size:12px;
}
.aw-field input[type="file"]{
  padding:9px 10px;
  min-height:auto;
}
.aw-field input:focus,.aw-field select:focus,.aw-pad-body input:focus,.aw-pad-body select:focus{
  border-color:rgba(183,148,244,.72);
  box-shadow:0 0 0 3px rgba(159,122,234,.12);
}
.aw-field small,.aw-field-note{
  margin:0;
  color:var(--aw-muted);
  font-size:10px;
  line-height:1.5;
}
.aw-range-field>span{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#d9ddec;
  font-size:11px;
}
.aw-range-field output{color:var(--aw-accent-strong);font-weight:850;font-variant-numeric:tabular-nums}
.aw-range-field input[type="range"],.aw-master-control input[type="range"]{width:100%;accent-color:var(--aw-accent)}
.aw-info-card,.aw-cloud-note{
  border:1px solid rgba(85,214,255,.15);
  border-radius:12px;
  background:rgba(85,214,255,.045);
}
.aw-info-card{padding:12px}
.aw-info-card strong{display:block;margin-bottom:4px;font-size:11px;color:#d8dbee}
.aw-info-card p{margin:0;color:#9aa2b9;font-size:10px;line-height:1.55}

.aw-soundpad-panel{margin-top:14px}
.aw-soundpad-heading{align-items:flex-end}
.aw-soundpad-toolbar{gap:8px;flex-wrap:wrap;justify-content:flex-end}
.aw-master-control{display:grid;gap:5px;min-width:180px}
.aw-master-control>div{gap:8px}
.aw-master-control output{min-width:44px;color:#d9ddec;font-size:10px;font-weight:800;text-align:right}
.aw-toolbar-button{
  min-height:38px;
  padding:0 13px;
  border:1px solid var(--aw-line-strong);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  color:var(--aw-text);
  cursor:pointer;
  font:inherit;
  font-size:10px;
  font-weight:850;
  letter-spacing:.06em;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.aw-toolbar-button:not(:disabled):hover{transform:translateY(-1px);border-color:rgba(183,148,244,.65)}
.aw-toolbar-button.active{border-color:rgba(183,148,244,.55);background:rgba(93,64,148,.38)}
.aw-toolbar-button--danger{border-color:rgba(255,91,125,.28);color:#ff8ba3}
.aw-toolbar-button--primary{border-color:rgba(183,148,244,.55);background:rgba(112,79,180,.52);color:#fff}
.aw-toolbar-button:disabled{cursor:not-allowed;opacity:.4}
.aw-cloud-note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0 0 14px;
  padding:10px 12px;
}
.aw-cloud-note p{margin:0;color:#a7aec1;font-size:10px;line-height:1.55}
.aw-cloud-note strong{color:#dcecff}
.aw-cloud-dot{
  flex:0 0 auto;
  width:8px;
  height:8px;
  margin-top:3px;
  border-radius:50%;
  background:var(--aw-blue);
  box-shadow:0 0 12px rgba(85,214,255,.7);
}
.aw-pad-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.aw-pad{
  position:relative;
  display:grid;
  align-content:center;
  min-width:0;
  min-height:112px;
  padding:14px;
  border:1px solid var(--aw-line);
  border-radius:14px;
  background:
    radial-gradient(circle at 90% 0,rgba(159,122,234,.08),transparent 46%),
    rgba(255,255,255,.02);
  color:var(--aw-text);
  cursor:pointer;
  text-align:left;
  transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.aw-pad:hover{transform:translateY(-1px);border-color:rgba(183,148,244,.34)}
.aw-pad.configured{border-color:rgba(85,214,255,.20)}
.aw-pad.playing{border-color:rgba(104,239,193,.55);background:rgba(42,100,86,.20);box-shadow:0 0 22px rgba(104,239,193,.07)}
.aw-pad.edit-mode{border-style:dashed}
.aw-pad-number{position:absolute;top:9px;right:10px;color:#656b7e;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:800}
.aw-pad strong{overflow:hidden;color:#f1f3fb;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.aw-pad small{overflow:hidden;margin-top:4px;color:var(--aw-muted);font-size:9px;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap}
.aw-pad-state{min-height:14px;margin-top:8px;color:var(--aw-success);font-size:9px;font-weight:900;letter-spacing:.08em}
.aw-broadcast-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
  padding:12px 4px 0;
  color:#686e80;
  font-size:9px;
}
.aw-broadcast-footer p{margin:0}

/* pad settings modal */
.aw-pad-dialog{
  position:absolute;
  top:50%;
  left:50%;
  width:min(560px,calc(100% - 24px));
  max-height:90vh;
  overflow:auto;
  padding:20px;
  border:1px solid var(--aw-line);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(24,26,37,.98),rgba(13,15,23,.99));
  box-shadow:0 35px 90px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.03);
  transform:translate(-50%,-48%) scale(.99);
  opacity:0;
  transition:.1s ease;
}
.aw-pad-modal.open .aw-pad-dialog{transform:translate(-50%,-50%);opacity:1}
.aw-pad-header{justify-content:space-between;gap:12px;margin-bottom:16px}
.aw-pad-header h2{font-size:22px}
.aw-pad-two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aw-pad-actions{justify-content:space-between;gap:12px;margin-top:18px;padding-top:15px;border-top:1px solid var(--aw-line)}
.aw-pad-actions>div{gap:8px}

@media(max-width:900px){
  .aw-broadcast-dialog{inset:1.5vh 10px;padding:15px}
  .aw-broadcast-top-grid{grid-template-columns:1fr}
  .aw-pad-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .aw-soundpad-heading{align-items:flex-start;flex-direction:column}
  .aw-soundpad-toolbar{width:100%;justify-content:flex-start}
  .aw-master-control{flex:1 1 180px}
}
@media(max-width:640px){
  .aw-broadcast-dialog{inset:6px;padding:12px;border-radius:16px}
  .aw-broadcast-header{align-items:flex-start}
  .aw-brand-mark{width:42px;height:42px;padding:9px;border-radius:13px}
  .aw-broadcast-brand h2{font-size:21px}
  .aw-broadcast-brand h2 small{display:block;margin-top:4px;font-size:10px;letter-spacing:.04em}
  .aw-header-status{gap:5px}
  .aw-sync-status,.aw-engine-status{min-height:27px;padding:0 7px;font-size:8px}
  .aw-close{width:32px;height:32px}
  .aw-panel{padding:14px;border-radius:14px}
  .aw-panel-heading{margin-bottom:13px}
  .aw-pad-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .aw-pad{min-height:96px;padding:12px}
  .aw-soundpad-toolbar{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .aw-master-control{grid-column:1/-1;min-width:0}
  .aw-toolbar-button{min-width:0;padding:0 8px}
  .aw-broadcast-footer{display:block;line-height:1.6}
  .aw-broadcast-footer span{display:block;margin-top:3px}
  .aw-pad-dialog{padding:15px}
  .aw-pad-two-col{grid-template-columns:1fr}
  .aw-pad-actions{align-items:stretch;flex-direction:column}
  .aw-pad-actions>div{display:grid;grid-template-columns:1fr 1fr}
  .aw-pad-actions>.aw-toolbar-button{width:100%}
}