:root{
  --rs1-bg:#0f1220;
  --rs1-panel:#151a2d;
  --rs1-panel2:#101426;
  --rs1-text:#e9ecff;
  --rs1-muted:#aeb7e6;
  --rs1-line:rgba(255,255,255,0.08);
  --rs1-accent:#8ef0ff;
  --rs1-good:#7CFFB2;
  --rs1-bad:#ff7ca8;
  --rs1-radius:16px;
}

.rs1-wrap{ 
  color:var(--rs1-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 20% 0%, rgba(142,240,255,0.12), transparent 55%),
              radial-gradient(900px 500px at 100% 30%, rgba(124,255,178,0.10), transparent 55%),
              linear-gradient(180deg, #0b0e1a, var(--rs1-bg));
  border:1px solid var(--rs1-line);
  border-radius: calc(var(--rs1-radius) + 8px);
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  max-width: 1180px;
  margin: 16px auto;
  overflow: hidden;
}

.rs1-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid var(--rs1-line);
  border-radius: var(--rs1-radius);
}

.rs1-brand{display:flex; gap:12px; align-items:center; min-width: 260px;}
.rs1-logo{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(142,240,255,0.35), rgba(124,255,178,0.20));
  border:1px solid rgba(255,255,255,0.14);
  font-weight:800;
  letter-spacing:0.5px;
}
.rs1-name{font-weight:800; font-size: 15px; line-height: 1.1;}
.rs1-sub{color:var(--rs1-muted); font-size:12px; margin-top:2px;}

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

.rs1-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--rs1-text);
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
  font-weight:700;
  font-size: 12px;
  line-height: 1;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.rs1-btn:hover{background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.20);}
.rs1-btn:active{transform: translateY(1px);}
.rs1-btn[disabled]{opacity:.55; cursor:not-allowed;}
.rs1-btn-sm{padding:6px 8px; border-radius: 10px; font-weight:800;}

.rs1-grid{
  display:grid;
  /* User requested: Step editor at the end (below) on desktop too */
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

.rs1-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid var(--rs1-line);
  border-radius: var(--rs1-radius);
  overflow:hidden;
}

.rs1-card-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.18);
  border-bottom:1px solid var(--rs1-line);
}
.rs1-card-title{font-weight:900; letter-spacing:.3px; font-size: 13px;}

.rs1-pill{
  font-size:11px;
  font-weight:900;
  color: rgba(255,255,255,0.9);
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(142,240,255,0.10);
  border:1px solid rgba(142,240,255,0.20);
}

.rs1-select{
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.25) !important;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight:700;
}
.rs1-select option{ color:#000000; }

.rs1-midi{display:flex; gap:8px; align-items:center; flex-wrap:nowrap; min-width: 0;}
.rs1-midi .rs1-select{width: 220px; max-width: 260px;}
.rs1-midi .rs1-btn-sm{padding:6px 8px; min-width: 34px; white-space:nowrap;}
.rs1-midi-status{margin-left:6px;font-size:11px;opacity:.85;white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 260px;}

/* Monster bar: compact, no full-width dropdowns */
.rs1-monsterbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding: 10px;
  border-bottom: 1px solid var(--rs1-line);
  background: rgba(0,0,0,0.10);
}
.rs1-monsterbar .rs1-mini{
  display:flex;
  align-items:center;
  gap:6px;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}
.rs1-monsterbar .rs1-mini label{font-size:10px; color: var(--rs1-muted); font-weight:900; min-width: 34px;}
.rs1-select-sm{min-width:96px; padding:6px 8px; font-size:12px;}
.rs1-monsterbar .rs1-select-sm{min-width: 88px; width: 88px; flex: 0 0 auto;}
.rs1-range-sm{width: 90px; flex: 0 0 auto;}

.rs1-columns{display:grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px;}
.rs1-col{display:flex; flex-direction:column; gap:10px;}

.rs1-group{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 10px;
  background: rgba(0,0,0,0.14);
}
.rs1-group-title{font-weight:900; font-size: 12px; color: rgba(255,255,255,0.92); margin-bottom: 8px;}

.rs1-row{
  display:grid;
  grid-template-columns: 90px 1fr 36px;
  gap: 8px;
  align-items:center;
  margin: 6px 0;
}
.rs1-row label{font-size: 11px; color: var(--rs1-muted); font-weight:800; letter-spacing:.2px;}
.rs1-row input[type="range"]{width:100%;}
.rs1-val{font-variant-numeric: tabular-nums; text-align:right; font-size: 11px; color: rgba(255,255,255,0.88);}

.rs1-row select.rs1-select{grid-column: 2 / span 2;}
.rs1-row .rs1-wide{grid-column: 2 / span 2;}

.rs1-presets-body{padding: 10px; display:flex; flex-direction:column; gap: 10px;}
.rs1-presets-row{display:flex; gap:8px; align-items:center;}
.rs1-input{
  width: 100%;
  background: rgba(255,255,255,0.04);
  color: var(--rs1-text);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight:700;
}

.rs1-note{color: var(--rs1-muted); font-size: 12px; line-height: 1.35;}
.rs1-note strong{color: rgba(255,255,255,0.95);}

.rs1-status{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.rs1-chip{
  display:flex; gap:8px; align-items:center;
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.86);
  font-weight:800;
}
.rs1-dot{width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,0.35);}
.rs1-dot.good{background: var(--rs1-good);}
.rs1-dot.bad{background: var(--rs1-bad);}

/* Step editor */
.rs1-seq-body{padding: 10px; display:flex; flex-direction:column; gap: 10px;}
.rs1-seq-controls{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.rs1-mini{display:flex; gap:8px; align-items:center;}
.rs1-mini label{font-size: 11px; color: var(--rs1-muted); font-weight:900;}

.rs1-step-grid{
  display:grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 6px;
  user-select:none;
  padding: 0 10px 10px;
}
.rs1-step-grid .rs1-step{
  position:relative;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  overflow:hidden;
  cursor:pointer;
}
.rs1-step-grid .rs1-step.on{background: rgba(142,240,255,0.12); border-color: rgba(142,240,255,0.25);}
.rs1-step-grid .rs1-step.play{outline: 2px solid rgba(124,255,178,0.65);} /* legacy */
.rs1-step-grid .rs1-step.now{outline: 2px solid rgba(124,255,178,0.65);}
.rs1-step-grid .rs1-step-n{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-weight:900;
  font-size: 12px;
  color: rgba(255,255,255,0.90);
}
.rs1-step-grid .rs1-step-p{
  position:absolute; left:7px; top:6px;
  font-size: 10px;
  color: rgba(255,255,255,0.68);
  font-weight:900;
}

.rs1-step-bottom{padding: 0 10px 10px; display:flex; flex-direction:column; gap: 8px;}
.rs1-step-hint{font-size: 11px; color: rgba(255,255,255,0.72);}

.rs1-kbd{
  display:grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 4px;
  padding: 2px 2px 0;
}
.rs1-key{
  height: 42px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  cursor:pointer;
  outline:none;
}
.rs1-key.black{
  background: rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.10);
}
.rs1-key.down{
  background: rgba(124,255,178,0.18);
  border-color: rgba(124,255,178,0.28);
  transform: translateY(1px);
}

/* Make it fit nicely */
@media (max-width: 980px){
  .rs1-midi{flex-wrap:wrap;}
  .rs1-midi-status{max-width: 100%; flex-basis: 100%; margin-left:0;}
}

/* Range styling (Chrome) */
.rs1-wrap input[type=range]{
  -webkit-appearance:none;
  height: 18px;
  background: transparent;
}
.rs1-wrap input[type=range]::-webkit-slider-runnable-track{
  height: 6px;
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
  border:1px solid rgba(255,255,255,0.10);
}
.rs1-wrap input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  margin-top: -6px;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  border:1px solid rgba(0,0,0,0.25);
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}

/* Step pattern IO */
.rs1-seqio{display:flex; gap:6px; align-items:center; margin-left:auto;}
.rs1-input-sm{width:120px; padding:6px 8px; font-size:12px;}
/* rs1-select-sm defined above to also serve monsterbar */
@media (max-width: 1100px){
  .rs1-seqio{flex-wrap:wrap; justify-content:flex-end;}
  .rs1-input-sm{width:110px;}
  .rs1-select-sm{min-width:110px;}
}