/* Isolated UI — ship console / 8-bit fallout vibes (scoped to .afexkidz-rr) */
.afexkidz-rr{
  --bg0:#04060a;
  --bg1:#070c12;
  --panel:#07100b;
  --panel2:#0a1610;
  --line:#193526;
  --hi:#32ff7a;
  --hi2:#18c96a;
  --warn:#ff355e;
  --text:#d7ffd3;
  --dim:#8fd59f;
  --shadow: rgba(0,0,0,.45);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: var(--text);
  background: radial-gradient(1200px 400px at 20% 0%, rgba(50,255,122,.10), transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg0));
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow: 0 18px 40px var(--shadow);
  overflow:hidden;
  max-width: 1200px;
}
.afexkidz-rr *{ box-sizing:border-box; }
.rr-shell{ padding:10px; }
.rr-header{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background: rgba(0,0,0,.32);
}
.rr-title{
  display:flex; flex-direction:column; gap:2px;
  padding-right:12px; border-right:1px solid rgba(255,255,255,.06);
}
.rr-title strong{ letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:var(--hi); }
.rr-title span{ font-size:11px; color:var(--dim); opacity:.95; }

.rr-btn{
  background: linear-gradient(180deg, #0a1a11, #061009);
  border:1px solid var(--line);
  color:var(--text);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
  letter-spacing:.04em;
}
.rr-btn:hover{ border-color: var(--hi2); }
.rr-btn:active{ transform: translateY(1px); }
.rr-btn.primary{ border-color: var(--hi); box-shadow: 0 0 0 2px rgba(50,255,122,.08) inset; }
.rr-btn.danger{ border-color: var(--warn); color:#ffd0d9; }

.rr-readout{
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background: rgba(0,0,0,.28);
  color:var(--text);
  display:flex; align-items:center; gap:10px;
}
.rr-readout .k{ color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.rr-readout .v{ font-size:12px; color:var(--text); }

.rr-slider{ display:flex; align-items:center; gap:10px; }
.rr-slider input[type="range"]{ width:200px; }

.rr-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
@media (max-width: 980px){
  .rr-body{ gap:8px; }
}
}

.rr-panel{
  border:1px solid var(--line);
  border-radius:14px;
  background: rgba(0,0,0,.30);
  overflow:hidden;
}
.rr-panel .rr-panel-h{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(50,255,122,.08), rgba(0,0,0,.0));
}
.rr-panel .rr-panel-h .t{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  color:var(--hi);
}
.rr-panel .rr-panel-b{ padding:10px; }

/* Sequencer grid */
.rr-grid{
  display:grid;
  grid-template-columns: 120px repeat(16, 1fr);
  gap:4px;
  align-items:stretch;
}
@media (max-width: 980px){
  .rr-grid{ grid-template-columns: 90px repeat(16, 1fr); }
}
.rr-rowlabel{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:12px;
  background: rgba(0,0,0,.25);
  color:var(--dim);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.rr-cell{
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  background: rgba(0,0,0,.22);
  position:relative;
  cursor:pointer;
  min-height: 24px;
}
.rr-cell.on{
  background: rgba(50,255,122,.18);
  border-color: rgba(50,255,122,.35);
}
.rr-cell .dot{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10px;
  color: rgba(215,255,211,.9);
  opacity:.9;
}
.rr-cell.playhead{
  box-shadow: 0 0 0 2px rgba(50,255,122,.35) inset, 0 0 18px rgba(50,255,122,.15);
}

.rr-mini{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin-top:10px;
}
.rr-badge{
  padding:6px 10px; border:1px solid rgba(255,255,255,.06);
  border-radius:999px; background: rgba(0,0,0,.25);
  font-size:11px; color:var(--dim);
}

/* Mixer */
.rr-mixer{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
@media (max-width: 980px){
  .rr-mixer{ grid-template-columns: repeat(2, 1fr); gap:8px; }
}
}
.rr-strip{
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:8px;
  background: rgba(0,0,0,.22);
}
.rr-strip .h{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:6px;
}
.rr-strip .name{
  text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:var(--hi);
}
.rr-strip .mute{
  display:flex; align-items:center; gap:6px; font-size:11px; color:var(--dim);
}
.rr-controls{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:6px 8px;
}
.rr-c{
  display:flex; flex-direction:column; gap:6px;
}
.rr-c label{
  font-size:10px; color:var(--dim);
  text-transform:uppercase; letter-spacing:.12em;
}
.rr-c input[type="range"], .rr-c select{
  width:100%;
  background: transparent;
}
.rr-c select{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  color: var(--text);
}

.rr-footerlog{
  margin-top:10px;
  padding:8px 10px;
  border:1px dashed rgba(50,255,122,.25);
  border-radius:14px;
  height: 120px;
  max-height: 160px;
  overflow:auto;
  white-space:pre-wrap;
  font-size:12px;
  color: rgba(215,255,211,.9);
}


/* Tiny blinking lamp */
.rr-lamp{
  width:10px; height:10px; border-radius:999px; border:1px solid rgba(255,255,255,.15);
  background: rgba(255,53,94,.25);
  box-shadow: 0 0 12px rgba(255,53,94,.12);
}
.rr-lamp.on{
  background: rgba(50,255,122,.35);
  box-shadow: 0 0 14px rgba(50,255,122,.16);
}

/* Help modal */
.rr-help-overlay{
  position:fixed; inset:0; z-index:99999;
  background: rgba(0,0,0,.65);
  display:none;
  padding: 16px;
}
.rr-help-overlay.on{ display:flex; align-items:center; justify-content:center; }
.rr-help{
  width:min(900px, 100%);
  max-height: 88vh;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:16px;
  background: linear-gradient(180deg, rgba(7,16,11,.98), rgba(4,6,10,.98));
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.rr-help .h{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.35);
}
.rr-help .h .t{ text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:var(--hi); }
.rr-help .b{ padding:12px; color: rgba(215,255,211,.92); font-size:12px; line-height:1.45; }
.rr-help code{ background: rgba(0,0,0,.35); padding:2px 6px; border:1px solid rgba(255,255,255,.06); border-radius:8px; }
.rr-help ul{ margin: 8px 0 10px 18px; }
.rr-help .kbd{ display:inline-block; padding:2px 6px; border:1px solid rgba(255,255,255,.10); border-bottom-color: rgba(255,255,255,.18); border-radius:8px; background: rgba(0,0,0,.25); }

/* Rack/module separation */
.rr-panel{
  box-shadow: 0 0 0 1px rgba(50,255,122,.06) inset, 0 12px 26px rgba(0,0,0,.25);
}
.rr-panel .rr-panel-b{
  background:
    radial-gradient(600px 180px at 30% 0%, rgba(50,255,122,.06), transparent 65%),
    radial-gradient(520px 160px at 90% 30%, rgba(24,201,106,.05), transparent 70%),
    rgba(0,0,0,.18);
  border-top: 1px solid rgba(255,255,255,.04);
}

/* Mixer rack grid better readability */
.rr-mixer{
  align-items: stretch;
}
.rr-strip{
  background:
    linear-gradient(180deg, rgba(50,255,122,.06), rgba(0,0,0,.0) 28%),
    rgba(0,0,0,.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}
.rr-strip:nth-child(odd){
  background:
    linear-gradient(180deg, rgba(255,53,94,.05), rgba(0,0,0,.0) 28%),
    rgba(0,0,0,.22);
}
.rr-strip .h{
  background: rgba(0,0,0,.22);
  padding: 6px 8px;
  border-radius: 10px;
}
.rr-strip .rr-controls{
  padding-top: 4px;
}

/* Make controls more compact and prevent overflow */
.rr-c{ min-width: 0; }
.rr-c input[type="range"]{ height: 18px; }
.rr-c select{ width:100%; max-width:100%; }

/* Status panel: keep log in its own inner frame */
.rr-footerlog{
  background: rgba(0,0,0,.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}
/* ===========================
   AfexKidz — Terminal Rack (Fallout/ship)
   paste at END of reactor-ui.css
=========================== */

.afexkidz-rr{
  --phosphor: rgba(50,255,122,.92);
  --phosphor2: rgba(24,201,106,.88);
  --ink: rgba(0,0,0,.55);
  --grid: rgba(50,255,122,.12);
  --edge: rgba(50,255,122,.18);
  --edge2: rgba(255,255,255,.06);
  --txt: rgba(215,255,211,.92);
  --txtDim: rgba(150,220,175,.82);
}

/* Keep overall terminal vibe */
.afexkidz-rr .rr-panel{
  background: rgba(0,0,0,.30);
  border-color: var(--edge);
}

/* MIXER module: terminal cassette */
.afexkidz-rr .rr-strip{
  position: relative;
  border-radius: 14px;
  padding: 10px;
  border: 1px solid var(--edge);
  background:
    linear-gradient(180deg, rgba(50,255,122,.06), transparent 32%),
    rgba(0,0,0,.20);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.45) inset,
    0 10px 22px rgba(0,0,0,.25);
  overflow: hidden;
}

/* subtle terminal grid */
.afexkidz-rr .rr-strip:before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(180deg, var(--grid) 0 1px, transparent 1px 14px);
  opacity:.18;
  pointer-events:none;
}

/* left “module id rail” (differs per track, but stays within phosphor palette) */
.afexkidz-rr .rr-strip:after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 6px;
  background: linear-gradient(180deg, rgba(50,255,122,.55), rgba(50,255,122,.08));
  opacity:.85;
}

/* Header becomes a command-line bar */
.afexkidz-rr .rr-strip .h{
  position: relative;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.05);
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  margin-bottom: 10px;
}

/* Make track name readable without leaving style */
.afexkidz-rr .rr-strip .name{
  color: rgba(235,255,240,.95) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  font-size: 12px;
  letter-spacing: .16em;
}

/* ID tag (auto by position) */
.afexkidz-rr .rr-strip .name:after{
  display:inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(50,255,122,.22);
  background: rgba(0,0,0,.30);
  color: var(--txtDim);
  font-size: 10px;
  letter-spacing: .14em;
  content: "MOD";
}
.afexkidz-rr .rr-strip:nth-child(1) .name:after{ content:"KICK-01"; }
.afexkidz-rr .rr-strip:nth-child(2) . predominately terminal with slight id rail intensity */
.afexkidz-rr .rr-strip:nth-child(2):after{ opacity:.78; }
.afexkidz-rr .rr-strip:nth-child(2) .name:after{ content:"KICK-02"; }
.afexkidz-rr .rr-strip:nth-child(3) .name:after{ content:"SNARE-03"; }
.afexkidz-rr .rr-strip:nth-child(4) .name:after{ content:"HAT-04"; }
.afexkidz-rr .rr-strip:nth-child(5) .name:after{ content:"OH-05"; }
.afexkidz-rr .rr-strip:nth-child(6) .name:after{ content:"BASS-06"; }
.afexkidz-rr .rr-strip:nth-child(7) .name:after{ content:"PADS-07"; }
.afexkidz-rr .rr-strip:nth-child(8) .name:after{ content:"VOCAL-08"; }

/* Labels + controls: reduce visual noise, improve hierarchy */
.afexkidz-rr .rr-c label{
  color: var(--txtDim);
  font-size: 10px;
  letter-spacing: .14em;
}
.afexkidz-rr .rr-c input[type="range"],
.afexkidz-rr .rr-c select{
  border-radius: 10px;
}
.afexkidz-rr .rr-c select{
  border: 1px solid rgba(50,255,122,.18);
  background: rgba(0,0,0,.28);
  color: var(--txt);
}
.afexkidz-rr .rr-c select:focus{
  outline:none;
  box-shadow: 0 0 0 2px rgba(50,255,122,.12);
}

/* Section separators inside each module (pseudo "sub-panels") */
.afexkidz-rr .rr-controls{
  position: relative;
  gap: 8px 10px;
}
.afexkidz-rr .rr-controls:before{
  content:"LEVEL / TONE / FX";
  display:block;
  grid-column: 1 / -1;
  margin-bottom: 2px;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px dashed rgba(50,255,122,.20);
  background: rgba(0,0,0,.20);
  color: rgba(150,220,175,.75);
  font-size: 10px;
  letter-spacing: .18em;
}

/* Make MUTE pop but still terminal */
.afexkidz-rr .rr-strip .mute{
  color: rgba(235,255,240,.82);
}
.afexkidz-rr .rr-strip .mute input{
  accent-color: rgba(50,255,122,.85);
}

/* Mobile: one column inside strip + clearer spacing */
@media (max-width: 980px){
  .afexkidz-rr .rr-controls{
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .afexkidz-rr .rr-strip{
    padding: 10px;
  }
  .afexkidz-rr .rr-strip .h{
    margin-bottom: 12px;
  }
  .afexkidz-rr .rr-controls:before{
    margin-bottom: 6px;
  }
}

/* Reduce “all green everywhere” problem: make headings brighter, body slightly dimmer */
.afexkidz-rr .rr-panel .rr-panel-h .t{
  color: rgba(235,255,240,.92);
}
.afexkidz-rr .rr-panel .rr-panel-b{
  color: var(--txt);
}