/* Shared visual language with the sirhoz marketplace; studio behavior is unchanged. */
body.beat-studio {
  --bg: #070e0c;
  --surface: #0b1714;
  --line: #263d2c;
  --text: #fafafa;
  --muted: #a3a3a3;
  --blood: #a5f326;
  --red: #a5f326;
  --ink-white: #fafafa;
  --ink-red: #fafafa;
  --ink-purple: #b8b8b8;
  background: var(--bg);
  color: var(--text);
  color-scheme: dark;
}
body.beat-studio button,
body.beat-studio input,
body.beat-studio select {
  border-color: #304637;
  border-radius: 5px;
  background: #14271e;
  color: #ededed;
}
body.beat-studio button { transition: background-color .15s, border-color .15s; }
body.beat-studio button:hover { background: #263d2c; border-color: #5c5c5c; }
body.beat-studio button:disabled { opacity: .42; }
body.beat-studio input,
body.beat-studio select { background: #08120f; }
body.beat-studio input[type=range] { accent-color: #a5f326; }
body.beat-studio input[type=checkbox] { accent-color: #a5f326; }
body.beat-studio :focus-visible { outline: 2px solid #bafa80; outline-offset: 3px; }
body.beat-studio header {
  height: auto;
  min-height: 80px;
  padding: 15px 32px;
  background: #060c0b;
  border-bottom-color: #303030;
}
body.beat-studio .brand {
  color: #fff;
  font-size: 32px;
  letter-spacing: -1px;
  line-height: .95;
  text-transform: uppercase;
}
body.beat-studio .brand small {
  margin-top: 8px;
  color: #aaa;
  font-size: 9px;
  letter-spacing: 3px;
  -webkit-text-stroke: 0;
}
body.beat-studio .badge {
  color: #ddd;
  background: #14271e;
  border-color: #304637;
  border-radius: 5px;
  font-size: 12px;
  letter-spacing: 1.5px;
  padding: 8px 12px;
}
body.beat-studio .back { color: #ccc; }
body.beat-studio .back:hover { color: #fff; }
body.beat-studio main { padding-top: 24px; }
body.beat-studio .transport {
  background: #0b1714;
  border: 1px solid #363636;
  border-top: 3px solid #a5f326;
  border-radius: 7px;
  padding: 20px;
}
body.beat-studio label { color: #c4c4c4; }
body.beat-studio .project label { color: #a3a3a3; letter-spacing: 1.3px; font-size: 12px; }
body.beat-studio .project input { background: #14271e; color: #fff; }
body.beat-studio .primary,
body.beat-studio .accent {
  background: #a5f326;
  border-color: #a5f326;
  color: #fff;
}
body.beat-studio .primary:hover,
body.beat-studio .accent:hover { background: #a5f326; border-color: #a5f326; color: #fff; }
body.beat-studio #position {
  background: #070e0c;
  border: 1px solid #263d2c;
  border-radius: 5px;
  padding: 9px 12px;
  color: #f4f4f4;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}
body.beat-studio aside,
body.beat-studio .panel {
  background: #0b1712;
  border-color: #263d2c;
  border-radius: 7px;
}
body.beat-studio aside h2 { color: #eee; font-size: 12px; letter-spacing: 1.4px; }
body.beat-studio aside p { color: #aaa; }
body.beat-studio aside .hint { color: #939393; line-height: 1.7; }
body.beat-studio #library button { background: #14271e; border-color: #263d2c; color: #ddd; }
body.beat-studio #library button:hover { background: #263d2c; border-color: #606060; }
body.beat-studio #library span { color: #a5a5a5; }
body.beat-studio .upload {
  border-color: #606060;
  border-radius: 5px;
  color: #ddd;
  background: #101e19;
}
body.beat-studio .upload:hover { border-color: #a5f326; background: #11231a; }
body.beat-studio .panel-head { background: #101e19; border-bottom: 1px solid #2d2d2d; margin-bottom: 16px; }
body.beat-studio h1,
body.beat-studio .panel h2 { font-family: SirhozSans, Arial, sans-serif !important; color: #fafafa; font-size: 24px; letter-spacing: -.5px; }
body.beat-studio .eyebrow { color: #999; font-size: 12px; letter-spacing: 1.5px; }
body.beat-studio .channel-name { background: #14271e; color: #eee; }
body.beat-studio .channel-name.selected { background: #304b28; outline-color: #a5f326; color: #fff; }
body.beat-studio .step:not(.on) { background: #1c3025; border-color: #304637; }
body.beat-studio .step.group:not(.on) { background: #304637; border-color: #454545; }
body.beat-studio .step:not(.on):hover { background: #494949; border-color: #686868; }
body.beat-studio .step.on { background: var(--color); border-color: var(--color); }
body.beat-studio .step.current { outline-color: #fff; }
body.beat-studio .ruler { color: #a8a8a8; }
body.beat-studio .help { color: #999; }
body.beat-studio .key { background: #e5e5e5; color: #060c0b; }
body.beat-studio .key.black { background: #111; color: #ccc; }
body.beat-studio .key:hover { background: #fff; color: #111; }
body.beat-studio .key.black:hover { background: #363636; color: #fff; }
body.beat-studio .note { background: #1c3025; }
body.beat-studio .note.black { background: #101e19; }
body.beat-studio .note.bar { border-left-color: #575757; }
body.beat-studio .note:not(.on):not(.tail):hover { background: #454545; }
body.beat-studio .note.on { background: #a5f326; box-shadow: inset 0 0 0 1px #bafa80; }
body.beat-studio .note.tail { background: #304b28; }
body.beat-studio .note.current { box-shadow: inset 2px 0 #fff; }
body.beat-studio .channel-fx { background: #101e19; border-top: 1px solid #263d2c; }
body.beat-studio .channel-fx button { font-size: 14px; }
body.beat-studio #remove-track { color: #bafa80; border-color: #304b28; background: #11231a; }
body.beat-studio #remove-track:hover { border-color: #a5f326; background: #304b28; }
body.beat-studio .clip { background: #1c3025; border-color: #4b4b4b; border-radius: 5px; }
body.beat-studio .clip strong { color: #ddd; }
body.beat-studio .clip div { background: #101e19; }
body.beat-studio .clip.active { border-color: #a5f326; box-shadow: 0 0 0 1px #a5f326; }
body.beat-studio .clip.active strong { color: #fff; }
body.beat-studio .strip { background: #14271e; }
body.beat-studio .strip strong { color: #eee; }
body.beat-studio .strip label { color: #b8b8b8; }
body.beat-studio .strip button.active { background: #a5f326; color: #fff; border-color: #a5f326; }
body.beat-studio .meter { background: #3c3c3c; }
body.beat-studio footer { color: #939393; font-size: 12px; }
body.beat-studio #status { background: #0b1714f5; border-top-color: #304637; color: #ccc; backdrop-filter: blur(10px); }
body.beat-studio dialog { background: #0b1714; border-color: #474747; color: #eee; border-radius: 9px; box-shadow: 0 20px 100px #000b; }
body.beat-studio dialog h2 { color: #fff; }
body.beat-studio dialog::backdrop { background: #000a; }
@media(max-width:1000px) {
  body.beat-studio #library button, body.beat-studio .upload { font-size: 14px; }
}
@media(max-width:600px) {
  body.beat-studio header { padding: 15px 16px; gap: 12px; min-height: 76px; flex-wrap: wrap; }
  body.beat-studio .brand { font-size: 28px; }
  body.beat-studio .badge { font-size: 12px; letter-spacing: .5px; padding: 7px 9px; }
  body.beat-studio .back { font-size: 13px; }
  body.beat-studio main { padding-top: 16px; }
  body.beat-studio .transport { padding: 14px; }
  body.beat-studio .filebar button, body.beat-studio .note-tools label, body.beat-studio .note-tools select { font-size: 14px; }
  body.beat-studio h1, body.beat-studio .panel h2 { font-size: 22px; }
  body.beat-studio .channel-fx button { font-size: 13px; }
}
@media(prefers-reduced-motion:reduce) {
  body.beat-studio button { transition: none; }
}
body.beat-studio .channel-name { border-left-color: var(--color); }
body.beat-studio .step { border-radius: 3px; }
body.beat-studio .key, body.beat-studio .note { border-radius: 0; }
/* Match the neon storefront while retaining each instrument's --color. */
body.beat-studio{--bg:#070e0c;--surface:#0b1714;--line:#263d2c;--text:#f4f8f5;--muted:#a7b8ae;--blood:#a5f326;--red:#a5f326;--lime:#a5f326;--acid:#a5f326;--ink-white:#f4f8f5;--ink-red:#f4f8f5;--ink-purple:#b9cbbd;background:#070e0c}
body.beat-studio .primary,body.beat-studio .accent,body.beat-studio .strip button.active{background:#a5f326;border-color:#a5f326;color:#101b06}
body.beat-studio .primary:hover,body.beat-studio .accent:hover{background:#bafa60;border-color:#bafa60;color:#101b06}
body.beat-studio .brand small{color:#a5f326}
body.beat-studio .badge{background:#10281d;border-color:#3a5e2f;color:#bafa80}
body.beat-studio .channel-name.selected{background:#183822;outline-color:#a5f326;color:#f4f8f5}
body.beat-studio .step.on{background:var(--color);border-color:var(--color)}
body.beat-studio .note.on{background:#a5f326;box-shadow:inset 0 0 0 1px #c9ff83}
body.beat-studio .note.tail{background:#416227}
body.beat-studio .studio-task{background:#10251a;border-color:#395a2d;color:#edf5e8}
body.beat-studio .studio-task p{color:#bfcfbf}
body.beat-studio .studio-task a{color:#bafa80}
body.beat-studio #sample-drop{background:#101e19;border-color:#48683d}
body.beat-studio #sample-drop.drag-over{background:#173322;border-color:#a5f326}
body.beat-studio #sample-wave{border-color:#355332}
body.beat-studio .motion-wallpaper{background:radial-gradient(ellipse at 85% 15%,#a5f3260a,transparent 55%)}
body.beat-studio .motion-wallpaper i{background:radial-gradient(ellipse,#84bd2723,transparent 68%)}
body.beat-studio .motion-wallpaper i:last-child{background:radial-gradient(ellipse,#a5f32617,transparent 67%)}