:root{
  /* Base palette (keeps your original vibe) */
  --rs-bg:#0f1115;
  --rs-card:#151924;
  --rs-soft:#1d2230;
  --rs-border:#2a3247;
  --rs-text:#e7eaf2;
  --rs-sub:#9aa6c1;

  --rs-accent:#6ee7ff;
  --rs-accent2:#b6ff6e;
  --rs-danger:#ff6e6e;

  --rs-shadow: 0 10px 30px rgba(0,0,0,.25);

  /* Extra UI tokens */
  --rs-chip-bg: rgba(255,255,255,.03);
  --rs-panel-bg: rgba(255,255,255,.02);
  --rs-step-bg: rgba(255,255,255,.03);
  --rs-step-bg-hover: rgba(255,255,255,.055);

  /* Step numbering badge (readable on gray) */
  --rs-idx-text: #2b3448;
  --rs-idx-bg: rgba(255,255,255,.70);
  --rs-idx-bg-strong: rgba(255,255,255,.82);

  /* Gate visuals */
  --rs-gate-stroke: rgba(110,231,255,.50);
  --rs-gate-stroke-strong: rgba(110,231,255,.70);

  /* MPC grid */
  --rs-grid-mark: rgba(110,231,255,.26);

  /* Playing */
  --rs-play-glow: rgba(182,255,110,.20);
  --rs-play-border: rgba(182,255,110,.55);
}

/* Wrapper */
.rs-chords{
  color:var(--rs-text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

/* Card */
.rs-card{
  background:linear-gradient(180deg,var(--rs-card),#10131c);
  border:1px solid var(--rs-border);
  border-radius:18px;
  box-shadow:var(--rs-shadow);
  padding:18px;
}

/* Header */
.rs-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.rs-title{font-size:20px;font-weight:700;letter-spacing:.2px}
.rs-sub{font-size:13px;color:var(--rs-sub);margin-top:2px}

.rs-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.rs-badge{
  font-size:12px;
  color:var(--rs-sub);
  border:1px solid var(--rs-border);
  background:rgba(255,255,255,.03);
  padding:4px 8px;
  border-radius:999px
}

/* Controls grid */
.rs-controls{
  display:grid;
  grid-template-columns:repeat(6,minmax(140px,1fr));
  gap:10px;
  margin:14px 0 12px;
}
@media(max-width:1100px){
  .rs-controls{grid-template-columns:repeat(2,minmax(160px,1fr));}
}

/* Field */
.rs-field{
  background:rgba(255,255,255,.03);
  border:1px solid var(--rs-border);
  border-radius:14px;
  padding:10px;
}
.rs-field label{
  display:block;
  font-size:12px;
  color:var(--rs-sub);
  margin-bottom:6px;
}
.rs-field select,
.rs-field input[type=number]{
  width:100%;
  background:var(--rs-soft);
  border:1px solid var(--rs-border);
  color:var(--rs-text);
  border-radius:12px;
  padding:8px 10px;
  outline:none;
}
.rs-field input[type=range]{width:100%}

.rs-check{display:flex;align-items:center}
.rs-check label{margin:0;color:var(--rs-text);font-size:13px}
.rs-check input{margin-right:8px}

/* Actions */
.rs-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:10px 0 14px;
}
.rs-btn{
  background:rgba(255,255,255,.04);
  border:1px solid var(--rs-border);
  color:var(--rs-text);
  border-radius:12px;
  padding:9px 12px;
  cursor:pointer;
  transition:transform .05s ease,background .15s ease;
}
.rs-btn:hover{background:rgba(255,255,255,.06)}
.rs-btn:active{transform:translateY(1px)}
.rs-btn:disabled{opacity:.5;cursor:not-allowed}

.rs-primary{
  border-color:rgba(110,231,255,.45);
  box-shadow:0 0 0 3px rgba(110,231,255,.12) inset;
}
.rs-stop{border-color:rgba(255,110,110,.45)}

.rs-spacer{flex:1}
.rs-status{font-size:13px;color:var(--rs-sub)}

/* Main layout */
.rs-grid{display:grid;grid-template-columns:360px 1fr;gap:12px;}
@media(max-width:1100px){.rs-grid{grid-template-columns:1fr;}}

/* Panels */
.rs-panel{
  background:var(--rs-panel-bg);
  border:1px solid var(--rs-border);
  border-radius:16px;
  padding:12px;
}
.rs-panel-title{font-weight:700;margin-bottom:10px}

/* Progression chips */
.rs-prog{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.rs-chord-chip{
  border:1px solid var(--rs-border);
  background:var(--rs-chip-bg);
  padding:7px 10px;
  border-radius:999px;
  font-weight:650;
  cursor:default;
}
.rs-chord-chip b{color:var(--rs-accent)}

.rs-hint{font-size:12px;color:var(--rs-sub);margin:6px 0 10px;}

/* Palette / draggable chords */
.rs-palette{display:flex;gap:8px;flex-wrap:wrap}
.rs-drag{
  user-select:none;
  border:1px dashed rgba(110,231,255,.55);
  background:rgba(110,231,255,.08);
  color:var(--rs-text);
  padding:7px 10px;
  border-radius:12px;
  cursor:grab;
  font-weight:700
}
.rs-drag:active{cursor:grabbing}
.rs-rest{border-color:rgba(255,110,110,.6);background:rgba(255,110,110,.08)}

/* Transport rows (top & bottom) */
.rs-transport{
  display:flex;
  gap:10px;
  align-items:center;
  margin:6px 0 10px;
  flex-wrap:wrap;
}
.rs-mini{font-size:12px;color:var(--rs-sub)}

/* Step Editor wrapper */
.rs-step-editor{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Bars */
.rs-bar{
  border:1px solid var(--rs-border);
  border-radius:14px;
  padding:10px;
  background:rgba(0,0,0,.12);
  position:relative;
}

/* 🎨 Bar numbers left (1–16) */
.rs-bar::before{
  content: attr(data-bar);
  position:absolute;
  left:-30px;
  top:14px;
  width:22px;
  text-align:right;
  font-size:12px;
  font-weight:800;
  color:var(--rs-sub);
  opacity:.85;
}

/* Bar head */
.rs-bar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.rs-bar-title{font-weight:700}
.rs-bar-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rs-bar-controls select{
  background:var(--rs-soft);
  border:1px solid var(--rs-border);
  color:var(--rs-text);
  border-radius:12px;
  padding:6px 10px
}

/* Steps grid */
.rs-steps{display:grid;gap:6px}

/* Step */
.rs-step{
  min-height:44px;
  border:1px solid var(--rs-border);
  border-radius:12px;
  background:var(--rs-step-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:4px 6px;
  font-weight:700;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.rs-step:hover{background:var(--rs-step-bg-hover)}

/* REST */
.rs-step[data-kind="REST"]{
  border-color:rgba(255,110,110,.45);
  background:rgba(255,110,110,.06);
  color:#ffd1d1
}

/* Continuation steps (if you mark them) */
.rs-step[data-cont="1"]{opacity:.62}

/* ✅ Step Index badge (readable!) */
.rs-step .rs-step-idx{
  position:absolute;
  top:6px;
  left:8px;
  font-size:10px;
  font-weight:800;
  color:var(--rs-idx-text);
  background:var(--rs-idx-bg);
  padding:1px 5px;
  border-radius:7px;
  line-height:1;
  pointer-events:none;
}

/* Make badge still readable on chord/playing states */
.rs-step.has-chord .rs-step-idx,
.rs-step.rs-playing .rs-step-idx{
  background:var(--rs-idx-bg-strong);
  color:#0e1220;
}

/* Drop highlight */
.rs-step.rs-drop{outline:2px solid rgba(110,231,255,.7)}

/* Playing step highlight */
.rs-step.rs-playing{
  box-shadow:0 0 0 3px var(--rs-play-glow) inset;
  border-color:var(--rs-play-border);
}

/* 🔲 MPC-style 1–2–3–4 grid markers (every 4th step) */
.rs-step:nth-child(4n + 1){
  box-shadow: inset 0 -3px 0 var(--rs-grid-mark);
}
.rs-step.rs-playing:nth-child(4n + 1){
  /* keep playing glow visible too */
  box-shadow:
    inset 0 0 0 3px var(--rs-play-glow),
    inset 0 -3px 0 var(--rs-play-border);
}

/* =========================
   🌈 Gate visuals per step
   data-gate="hold" | "retrigger"
   ========================= */

.rs-step[data-gate="hold"].has-chord{
  box-shadow:
    inset 0 0 0 2px var(--rs-gate-stroke);
}
.rs-step[data-gate="retrigger"].has-chord{
  box-shadow:
    inset 0 0 0 2px var(--rs-gate-stroke);
  border-style:dashed;
}
.rs-step[data-gate="retrigger"].has-chord:hover{
  border-style:dashed;
}

/* keep playing readable */
.rs-step.rs-playing[data-gate="hold"].has-chord,
.rs-step.rs-playing[data-gate="retrigger"].has-chord{
  box-shadow:
    inset 0 0 0 3px var(--rs-play-glow),
    inset 0 0 0 2px var(--rs-gate-stroke-strong);
}

/* =========================
   🧠 Gate icons per step
   .rs-gate-ic inside step
   ========================= */

.rs-step .rs-gate-ic{
  position:absolute;
  top:6px;
  right:8px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.6px;
  color:rgba(14,18,32,.72);
  background:var(--rs-idx-bg);
  padding:1px 5px;
  border-radius:7px;
  line-height:1;
  pointer-events:none; /* icon reflects state; click handling is JS on step */
}

.rs-step.has-chord .rs-gate-ic,
.rs-step.rs-playing .rs-gate-ic{
  background:var(--rs-idx-bg-strong);
  color:#0e1220;
}

/* =========================
   🧩 Chord length handles
   .rs-handle inside step
   ========================= */

.rs-step .rs-handle{
  position:absolute;
  right:6px;
  bottom:6px;
  width:14px;
  height:14px;
  border-radius:6px;
  border:1px solid rgba(110,231,255,.55);
  background:rgba(110,231,255,.18);
  cursor:ew-resize;
  opacity:.0;
  transition:opacity .12s ease, transform .12s ease;
}

.rs-step.has-chord:hover .rs-handle{
  opacity:1;
  transform:translateY(0);
}

.rs-step .rs-handle::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:4px;
  border:1px dashed rgba(255,255,255,.25);
}

/* =========================
   🖱 Paint Mode
   .rs-paint-on on root wrapper when enabled
   ========================= */

.rs-paint-on .rs-step{
  cursor:crosshair;
}
.rs-step.rs-painting{
  outline:2px solid rgba(110,231,255,.65);
  background:rgba(110,231,255,.10);
}

/* =========================
   🎹 Mini keyboard overlay
   .rs-mini-keys inside step (12 semitones)
   ========================= */

.rs-mini-keys{
  position:absolute;
  left:6px;
  right:6px;
  bottom:6px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:2px;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
}

.rs-mini-keys span{
  height:6px;
  background:rgba(255,255,255,.14);
  border-radius:2px;
}

.rs-mini-keys span.on{
  background:rgba(182,255,110,.85);
}

.rs-step:hover .rs-mini-keys{opacity:1}

/* Respect theme backgrounds (light mode) */
@media (prefers-color-scheme: light){
  :root{
    --rs-bg:#f6f7fb;
    --rs-card:#ffffff;
    --rs-soft:#f2f4fb;
    --rs-border:#d9dfef;
    --rs-text:#0e1220;
    --rs-sub:#526079;
    --rs-shadow:0 10px 25px rgba(10,20,40,.08);

    --rs-chip-bg: rgba(0,0,0,.03);
    --rs-panel-bg: rgba(0,0,0,.02);
    --rs-step-bg: rgba(0,0,0,.03);
    --rs-step-bg-hover: rgba(0,0,0,.05);

    --rs-idx-text: #1e2a43;
    --rs-idx-bg: rgba(255,255,255,.75);
    --rs-idx-bg-strong: rgba(255,255,255,.88);

    --rs-gate-stroke: rgba(26,107,255,.35);
    --rs-gate-stroke-strong: rgba(26,107,255,.55);

    --rs-grid-mark: rgba(26,107,255,.18);

    --rs-play-glow: rgba(46,200,120,.14);
    --rs-play-border: rgba(46,200,120,.45);
  }

  .rs-card{
    background:linear-gradient(180deg,var(--rs-card),#fbfcff);
  }
  .rs-bar{
    background:rgba(0,0,0,.02);
  }
  .rs-step[data-kind="REST"]{
    background:rgba(255,110,110,.10);
  }
}