:root{
  --mx-triage:#fb923c;
  --mx-builder:#22c55e;
  --mx-studio-bg:rgba(8,10,18,.78);
  --mx-studio-panel:rgba(27,28,38,.96);
}

#mxTriageStudio,
#mxBuilderStudio{
  position:fixed;
  inset:0;
  z-index:1600;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:var(--mx-studio-bg);
  backdrop-filter:blur(14px);
}
#mxTriageStudio.is-open,
#mxBuilderStudio.is-open{ display:flex; }

.mx-studio-dialog{
  width:min(1180px, calc(100vw - 24px));
  max-height:min(92dvh, 1000px);
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(50,52,71,.98), rgba(24,25,34,.98));
  box-shadow:0 34px 90px rgba(0,0,0,.40);
  display:grid;
  grid-template-rows:auto 1fr;
}
.mx-studio-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(123,63,228,.18), rgba(14,165,233,.08));
}
.mx-studio-head h2{
  margin:0;
  color:var(--text-light);
  font-size:clamp(20px, 2.6vw, 28px);
}
.mx-studio-head p{
  margin:6px 0 0;
  color:#c8d0e4;
  font-size:13px;
  line-height:1.6;
  max-width:760px;
}
.mx-studio-close{
  min-width:108px;
  min-height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:var(--text-light);
  font-weight:700;
}
.mx-studio-body{
  display:grid;
  grid-template-columns:minmax(0, 1.8fr) minmax(320px, 0.95fr);
  gap:18px;
  padding:18px 22px 22px;
  overflow:auto;
}
.mx-studio-main,
.mx-studio-side{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}
.mx-studio-card{
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  box-shadow:0 12px 32px rgba(0,0,0,.14);
}
.mx-studio-card h3{
  margin:0 0 10px;
  color:var(--text-light);
  font-size:15px;
}
.mx-studio-card p,
.mx-studio-card li,
.mx-studio-card span,
.mx-studio-note{
  color:#c5ccdd;
  font-size:12px;
  line-height:1.6;
}
.mx-studio-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:12px;
}
.mx-field{ grid-column:span 6; display:flex; flex-direction:column; gap:7px; min-width:0; }
.mx-field.wide{ grid-column:1/-1; }
.mx-field label{
  color:var(--text-light);
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
}
.mx-field input,
.mx-field select,
.mx-field textarea{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(11,13,18,.58);
  color:var(--text-light);
  padding:12px 14px;
  min-height:46px;
  resize:vertical;
}
.mx-field textarea{ min-height:124px; }
.mx-studio-actions,
.mx-studio-pill-row,
.mx-studio-chip-row,
.mx-stage-extra-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.mx-studio-btn,
.mx-stage-utility,
.mx-launch-chip{
  min-height:44px;
  border-radius:999px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
  color:var(--text-light);
  font-size:12px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.mx-studio-btn.primary{ background:linear-gradient(135deg, rgba(123,63,228,.92), rgba(14,165,233,.74)); }
.mx-studio-btn.triage{ background:linear-gradient(135deg, rgba(251,146,60,.95), rgba(245,158,11,.78)); border-color:rgba(251,146,60,.35); }
.mx-studio-btn.builder{ background:linear-gradient(135deg, rgba(34,197,94,.92), rgba(14,165,233,.74)); border-color:rgba(34,197,94,.35); }
.mx-studio-pill{
  min-height:34px;
  border-radius:999px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#dae1ef;
  font-size:11px;
  font-weight:800;
}
.mx-studio-pill.triage{ background:rgba(251,146,60,.13); color:#ffd1a6; }
.mx-studio-pill.builder{ background:rgba(34,197,94,.12); color:#bff3d0; }
.mx-studio-preview{
  white-space:pre-wrap;
  min-height:180px;
  max-height:320px;
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(11,13,18,.55);
  padding:14px;
  color:#eff4ff;
  font-size:12px;
  line-height:1.65;
}
.mx-studio-kpi-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.mx-studio-kpi{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}
.mx-studio-kpi strong{
  display:block;
  color:var(--text-light);
  font-size:13px;
  margin-bottom:6px;
}
.mx-source-status{
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#d6def0;
  font-size:12px;
  line-height:1.55;
}
.mx-source-status.warn{ border-color:rgba(245,158,11,.28); background:rgba(245,158,11,.11); color:#ffd69a; }
.mx-source-status.ok{ border-color:rgba(16,185,129,.25); background:rgba(16,185,129,.12); color:#c3f7de; }
.mx-source-status.bad{ border-color:rgba(239,68,68,.26); background:rgba(239,68,68,.10); color:#ffc3c3; }

#triage360Button{ background:linear-gradient(135deg, rgba(251,146,60,.95), rgba(245,158,11,.76)); color:white; }
#builderStudioButton{ background:linear-gradient(135deg, rgba(34,197,94,.95), rgba(14,165,233,.76)); color:white; }

.mx-stage-btn.mx-triage-btn{ background:rgba(251,146,60,.14); border-color:rgba(251,146,60,.22); }
.mx-stage-btn.mx-builder-btn{ background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.22); }

.specialty-card.mx-upgrade-card{
  position:relative;
  overflow:hidden;
}
.specialty-card.mx-upgrade-card::after{
  content:'';
  position:absolute;
  inset:auto -20% -45% auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
  pointer-events:none;
}
.specialty-card.mx-triage-card{ border-color:rgba(251,146,60,.36); background:linear-gradient(135deg, rgba(251,146,60,.14), rgba(59,59,79,.88)); }
.specialty-card.mx-builder-card{ border-color:rgba(34,197,94,.34); background:linear-gradient(135deg, rgba(34,197,94,.14), rgba(59,59,79,.88)); }

@media (max-width: 980px){
  .mx-studio-body{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  #mxTriageStudio,
  #mxBuilderStudio{ padding:0; align-items:flex-end; }
  .mx-studio-dialog{
    width:100%;
    max-height:94dvh;
    border-radius:26px 26px 0 0;
  }
  .mx-studio-head{ padding:18px 16px 14px; }
  .mx-studio-body{ padding:14px 16px 18px; }
  .mx-field{ grid-column:1/-1; }
  .mx-studio-kpi-grid{ grid-template-columns:1fr; }
  .mx-studio-btn,
  .mx-stage-utility,
  .mx-launch-chip{ min-height:42px; font-size:11px; }
}