:root {
  --bg: #060607;
  --panel: #0f0f11;
  --panel2: #141417;
  --line: #222227;
  --line2: #2c2c33;
  --text: #dedee3;
  --dim: #6c6c76;
  --dim2: #44444c;
  --accent: #ff2b2b;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter Tight', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 12px; }
body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255, 43, 43, 0.07), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
button { font-family: inherit; }
#app { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- header ---------- */
.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(#0d0d0f, #09090a);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; margin-right: 6px; }
.logo { width: 30px; height: 30px; border: 3px solid var(--accent); position: relative; }
.logo b { position: absolute; inset: 7px; background: var(--accent); }
body.playing .logo b { animation: pulse calc(60s / 133) infinite; }
@keyframes pulse { 0% { opacity: 1; } 60% { opacity: 0.25; } 100% { opacity: 1; } }
.brand .name { font-family: var(--sans); font-weight: 900; font-size: 19px; letter-spacing: 0.22em; }
.brand .sub { color: var(--dim); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 2px; }
.group { display: flex; align-items: center; gap: 8px; padding-left: 16px; border-left: 1px solid var(--line); }
.field { display: flex; flex-direction: column; gap: 3px; }
.field label { font-size: 9px; color: var(--dim); letter-spacing: 0.16em; }

.btn {
  height: 30px; padding: 0 12px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; cursor: pointer; border-radius: 2px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover { border-color: #4a4a52; background: #1b1b20; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn.ghost { background: transparent; color: #a9a9b2; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.accent:hover { background: #ff4646; }
.btn.toggle.on { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.btn.play { width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 50%; border-width: 2px; }
.btn.play .ico-play { width: 0; height: 0; border-left: 15px solid var(--text); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.btn.play .ico-stop { display: none; width: 14px; height: 14px; background: #fff; }
body.playing .btn.play { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 24px rgba(255, 43, 43, 0.45); }
body.playing .btn.play .ico-play { display: none; }
body.playing .btn.play .ico-stop { display: block; }
.btn.rec { display: flex; align-items: center; gap: 7px; }
.btn.rec .dot { width: 9px; height: 9px; border-radius: 50%; background: #5a1a1a; }
body.recording .btn.rec { border-color: var(--accent); color: var(--accent); }
body.recording .btn.rec .dot { background: var(--accent); animation: pulse 1s infinite; }

.sel {
  height: 30px; background: var(--panel2); color: var(--text); border: 1px solid var(--line2); border-radius: 2px;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 0 6px; cursor: pointer;
}
.numbox {
  min-width: 58px; height: 30px; display: grid; place-items: center; background: #050506; border: 1px solid var(--line2);
  color: var(--accent); font-size: 18px; font-weight: 700; cursor: ns-resize; border-radius: 2px; outline: none;
}
.numbox.bpm { min-width: 70px; text-shadow: 0 0 12px rgba(255, 43, 43, 0.5); }
.numbox:focus { border-color: var(--accent); }
.pats { display: flex; gap: 3px; }
.pat {
  width: 28px; height: 30px; border: 1px solid var(--line2); background: var(--panel2); color: var(--dim);
  font-weight: 700; cursor: pointer; border-radius: 2px; position: relative;
}
.pat.has { color: var(--text); }
.pat.cur { border-color: var(--accent); color: #fff; background: #2a0c0c; }
.pat.live::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 2px; background: var(--accent); }
.pat.queued { animation: blink 0.25s steps(2) infinite; border-color: #fff; }
@keyframes blink { 50% { background: #3a1010; } }
.tools { display: flex; gap: 3px; }
.tools .btn { padding: 0 7px; }
.chain {
  width: 150px; height: 30px; background: #050506; color: var(--text); border: 1px solid var(--line2); border-radius: 2px;
  font-family: inherit; font-size: 12px; letter-spacing: 0.12em; padding: 0 8px; outline: none;
}
.chain:focus { border-color: var(--accent); }

/* ---------- layout ---------- */
.main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; padding: 14px 18px 18px; }
.left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel { background: linear-gradient(var(--panel), #0c0c0e); border: 1px solid var(--line); border-radius: 3px; }

/* ---------- grid ---------- */
.grid { padding: 10px 12px 12px; }
.row {
  display: grid; grid-template-columns: 96px 76px minmax(0, 1fr) 44px 36px; gap: 10px; align-items: center;
  height: 40px;
}
.row + .row { margin-top: 3px; }
.row.head { height: 18px; color: var(--dim2); font-size: 9px; }
.len-h, .lvl-h { text-align: center; letter-spacing: 0.1em; }
.tname {
  height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: transparent; color: #b8b8c0;
  border: 1px solid transparent; border-radius: 2px; font-weight: 700; font-size: 11px; letter-spacing: 0.12em; cursor: pointer; text-align: left;
}
.tname:hover { background: var(--panel2); }
.row.sel .tname { border-color: var(--tc); color: #fff; background: #151518; }
.tname .led { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--tc) 25%, #000); flex: none; }
.tname.hit .led { animation: hit 0.16s ease-out; }
@keyframes hit { 0% { background: var(--tc); box-shadow: 0 0 10px var(--tc); } 100% { background: color-mix(in srgb, var(--tc) 25%, #000); } }
.ms { display: flex; gap: 3px; }
.ms button {
  width: 23px; height: 23px; border: 1px solid var(--line2); background: transparent; color: var(--dim);
  font-size: 10px; font-weight: 700; cursor: pointer; border-radius: 2px; padding: 0;
}
.ms .m.on { background: #ffb02b; border-color: #ffb02b; color: #000; }
.ms .s.on { background: #2bd1ff; border-color: #2bd1ff; color: #000; }
.ms .l.on { background: #c6ff2b; border-color: #c6ff2b; color: #000; }
.row.muted .steps { opacity: 0.32; }
.row.muted .tname { color: var(--dim2); }
.steps { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; height: 100%; }
.steps .num { text-align: center; }
.steps .num.beat { color: var(--dim); }
.step {
  height: 34px; align-self: center; background: #18181c; border: 1px solid #1f1f24; border-radius: 2px; cursor: pointer;
  position: relative; display: grid; place-items: center; transition: background 0.06s;
}
.step.beat { background: #1f1f25; }
.step:hover { border-color: #3a3a42; }
.step.on { background: color-mix(in srgb, var(--tc) 55%, #111); border-color: color-mix(in srgb, var(--tc) 70%, #111); }
.step.acc { background: var(--tc); border-color: #fff; box-shadow: 0 0 12px color-mix(in srgb, var(--tc) 55%, transparent); }
.step.out { opacity: 0.18; }
.step.ph::after { content: ''; position: absolute; inset: -1px; border: 2px solid #fff; border-radius: 2px; pointer-events: none; }
.step.ph.on { filter: brightness(1.45); }
.step .nl { font-size: 9px; font-weight: 700; color: #0b0b0b; pointer-events: none; }
.variation { max-width: 78px; }
.btn.evolve { border-color: #657e24; color: #c6ff2b; }
.rc.offscale { opacity: .32; }
.rl.offscale { opacity: .35; }
.step.slide::before { content: ''; position: absolute; right: -6px; top: 50%; width: 8px; height: 2px; background: var(--tc); z-index: 1; }
.numbox.len { min-width: 0; width: 44px; height: 28px; font-size: 13px; color: #b9b9c2; }
.knob.mini .k-label, .knob.mini .k-value { display: none; }

/* ---------- knobs ---------- */
.knob { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: ns-resize; touch-action: none; min-width: 52px; }
.knob svg { display: block; overflow: visible; }
.k-body { fill: #1a1a1f; stroke: #2a2a31; stroke-width: 1; }
.k-track { fill: none; stroke: #26262c; stroke-width: 3.5; stroke-linecap: round; }
.k-val { fill: none; stroke: var(--kc); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--kc) 50%, transparent)); }
.k-ptr { stroke: #f2f2f4; stroke-width: 2; stroke-linecap: round; }
.k-label { font-size: 9px; letter-spacing: 0.14em; color: var(--dim); white-space: nowrap; }
.k-value { font-size: 10px; color: #c9c9d0; height: 12px; }
.knob:hover .k-body, .knob.dragging .k-body { stroke: #4a4a54; }
.knob.dragging .k-value { color: #fff; }
.knob.sm { min-width: 44px; }
.knob.mini { min-width: 0; }

/* ---------- editor ---------- */
.editor { padding: 12px 14px 14px; border-top: 2px solid var(--tc); }
.ehead { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.etitle { font-family: var(--sans); font-weight: 900; font-size: 16px; letter-spacing: 0.2em; display: flex; align-items: center; gap: 10px; }
.etitle .sw { width: 10px; height: 10px; background: var(--tc); box-shadow: 0 0 10px var(--tc); }
.hint { color: var(--dim); font-size: 10px; flex: 1; }
.etools { display: flex; gap: 4px; }
.etools .btn { padding: 0 9px; }
.ebody { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.kgroup { display: flex; flex-direction: column; gap: 8px; }
.glabel { font-size: 9px; letter-spacing: 0.22em; color: var(--dim2); }
.knobs { display: flex; flex-wrap: wrap; gap: 8px 10px; }

.roll { display: flex; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.rlabels { width: 52px; flex: none; }
.rl, .rc { height: 13px; }
.rl { font-size: 8px; color: var(--dim2); line-height: 13px; padding-right: 6px; text-align: right; }
.rl.black { color: #34343a; }
.rl.root { color: #c6ff2b; }
.rl.ctl { height: 16px; line-height: 16px; color: var(--dim); margin-top: 4px; }
.rgrid { flex: 1; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; }
.rcol { display: flex; flex-direction: column; gap: 0; }
.rcol.out { opacity: 0.25; }
.rc { background: #16161a; border-bottom: 1px solid #0e0e10; cursor: pointer; }
.rc.black { background: #111114; }
.rc.root { background: #1b2010; }
.rcol.beat .rc:not(.ctl) { background-color: color-mix(in srgb, #fff 3%, #16161a); }
.rc:hover { background: #2a2a31; }
.rc.on { background: var(--tc) !important; box-shadow: 0 0 8px color-mix(in srgb, var(--tc) 60%, transparent); }
.rc.ctl { height: 16px; margin-top: 4px; border: 1px solid #222228; border-radius: 2px; }
.rc.ctl.acc.on { background: #fff !important; }
.rc.ctl.sl.on { background: #2bd1ff !important; box-shadow: none; }
.rcol.ph .rc:not(.ctl):not(.on) { background-color: #23232a; }

/* ---------- master ---------- */
.master { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; align-self: start; position: sticky; top: 86px; }
.mhead { display: flex; justify-content: space-between; font-family: var(--sans); font-weight: 900; letter-spacing: 0.24em; font-size: 13px; }
.meter-txt { font-family: var(--mono); font-weight: 400; letter-spacing: 0.04em; font-size: 10px; color: var(--dim); }
.viz { width: 100%; height: 150px; border: 1px solid var(--line); border-radius: 2px; background: #0a0a0b; }
.mknobs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.mknobs.big { align-items: center; justify-content: flex-start; gap: 14px; }
.mk2 { display: flex; gap: 6px; flex: 1; justify-content: space-between; }
.knob.dj .k-label { font-size: 10px; color: var(--text); }
.perfs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.btn.perf { height: 54px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; font-size: 12px; }
.btn.perf small { color: var(--dim); font-size: 9px; }
.btn.perf.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 22px rgba(255, 43, 43, 0.5); }
.btn.perf.on small { color: #fff; }
.foot { color: var(--dim2); font-size: 9px; letter-spacing: 0.12em; text-align: center; padding-top: 4px; border-top: 1px solid var(--line); }

/* ---------- overlays ---------- */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: #f2f2f4; color: #000; padding: 10px 16px; font-weight: 700; font-size: 11px; letter-spacing: 0.06em; border-radius: 2px;
  transition: opacity 0.2s, transform 0.2s; z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); display: grid; place-items: center; z-index: 40; backdrop-filter: blur(3px); }
.modal { padding: 22px 26px; width: min(560px, 92vw); }
.mtitle { font-family: var(--sans); font-weight: 900; letter-spacing: 0.22em; font-size: 14px; margin-bottom: 14px; }
.modal table { width: 100%; border-collapse: collapse; }
.modal td { padding: 5px 0; border-bottom: 1px solid var(--line); color: #b8b8c0; }
.modal td.k { color: var(--accent); font-weight: 700; width: 140px; }
.modal .tip { color: var(--dim); line-height: 1.6; margin: 14px 0; }

@media (max-width: 1180px) {
  .main { grid-template-columns: 1fr; }
  .master { position: static; }
}

@media (max-width: 760px) {
  .grid, .roll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .row { min-width: 720px; }
  .roll { min-width: 680px; }
  .editor { overflow-x: auto; }
  .group { flex-wrap: wrap; max-width: 100%; }
  .main { padding: 10px; }
}

/* ---------- SoundCloud publishing ---------- */
.btn.sc { border-color: #f50; color: #fff; background: #f50; }
.btn.sc:hover { background: #ff6a1a; border-color: #ff6a1a; }
.btn.sc:disabled { background: #3a1d10; border-color: #4b2818; color: #8a6a5c; }
.modal.pub { width: min(1040px, 94vw); max-height: 92vh; overflow: auto; padding: 0; }
.pub-head { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: rgba(15,15,17,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.pub-head .mtitle { margin: 0; }
.pub-body { padding: 0 20px 24px; }
.pub-note, .pub-setup { padding: 28px 0; color: #b8b8c0; line-height: 1.7; }
.pub-setup code { color: #fff; background: #19191d; padding: 2px 5px; }
.pub-setup li { margin: 6px 0; }
.dim { color: var(--dim); }
.pub-acct { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.pub-acct .who { display: flex; gap: 10px; align-items: center; }
.pub-acct .who img, .pub-acct .who i { display: block; width: 34px; height: 34px; object-fit: cover; border-radius: 50%; background: linear-gradient(135deg,#f50,#ffb600); }
.pub-acct a { color: #fff; font-weight: 700; text-decoration: none; }
.pub-form { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 24px; padding: 20px 0 24px; border-bottom: 1px solid var(--line); }
.pub-art { aspect-ratio: 1; width: 100%; background: #050506; border: 1px solid var(--line2); }
.pub-art canvas { width: 100%; height: 100%; display: block; }
.pub-art-tools { display: flex; gap: 6px; margin-top: 8px; }
.pub-right { min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.pub-row { display: flex; flex-direction: column; gap: 5px; color: var(--dim); font-size: 9px; letter-spacing: .14em; }
.pub-row small { font-size: 9px; letter-spacing: 0; line-height: 1.4; }
.inp { width: 100%; box-sizing: border-box; border: 1px solid var(--line2); background: #08080a; color: #eee; padding: 9px 10px; font: 11px var(--mono); border-radius: 2px; outline: none; }
.inp:focus { border-color: #f50; }
textarea.inp { resize: vertical; line-height: 1.5; }
.pub-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pub-check { display: flex; align-items: center; gap: 8px; color: #c8c8cf; font-size: 10px; }
.pub-check input { accent-color: #f50; }
.pub-go { align-self: flex-start; min-width: 190px; }
.pub-progress { display: none; height: 3px; background: #25252b; overflow: hidden; }
.pub-progress.on { display: block; }
.pub-progress i { display: block; width: 0; height: 100%; background: #f50; transition: width .15s; }
.pub-status { min-height: 15px; font-size: 10px; }
.pub-result:not(:empty) { padding: 10px; border: 1px solid #314726; background: #10160d; }
.pub-link { display: block; color: #c6ff2b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 8px; }
.pub-share-btns { display: flex; flex-wrap: wrap; gap: 5px; }
.pub-share-btns a { display: inline-flex; align-items: center; text-decoration: none; }
.pub-growth { padding-top: 20px; }
.pub-growth .mlabel { margin-bottom: 10px; }
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.stat { border: 1px solid var(--line); padding: 12px; background: #0a0a0c; display: flex; flex-direction: column; gap: 3px; }
.stat b { font: 900 20px var(--sans); color: #fff; }
.stat span { color: var(--dim); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.pub-nudge { padding: 10px 12px; color: #c6ff2b; border-left: 2px solid #c6ff2b; background: #0d1108; margin: 10px 0; font-size: 10px; }
.pub-tracks { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pub-tracks a { display: flex; justify-content: space-between; color: #bbb; text-decoration: none; padding: 7px 2px; border-bottom: 1px solid var(--line); }
.pub-tracks a:hover { color: #fff; }
.pub-tracks small { color: var(--dim); }
.pub-tips { color: var(--dim); line-height: 1.6; padding-left: 18px; }
.pub-tips li { margin: 4px 0; }

/* ---------- autonomous artist ---------- */
.btn.artist-btn { border-color: #657e24; color: #c6ff2b; }
.btn.live-toggle { border-color: #30404b; color: #8bdcff; }
.btn.live-toggle.on, body.artist-live .btn.live-toggle { background: #c6ff2b; border-color: #c6ff2b; color: #070807; box-shadow: 0 0 18px rgba(198,255,43,.25); }
body.artist-live .logo { border-color: #c6ff2b; }
body.artist-live .logo b { background: #c6ff2b; }
.btn.live { border-color: #657e24; color: #c6ff2b; }
.artist-modal { width: min(1120px, 95vw); max-height: 94vh; overflow: auto; padding: 0; }
.artist-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: rgba(15,15,17,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.artist-head .mtitle { margin: 0 0 3px; }
.artist-kicker { font-size: 9px; letter-spacing: .14em; }
.artist-body { padding: 20px; }
.artist-identity { display: grid; grid-template-columns: minmax(300px,.9fr) minmax(420px,1.2fr); gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.artist-profile { display: grid; grid-template-columns: 82px 1fr; gap: 14px; }
.artist-monogram { width: 82px; height: 82px; display: grid; place-items: center; background: #c6ff2b; color: #070807; font: 900 30px var(--sans); letter-spacing: -.05em; }
.artist-profile-fields { display: flex; flex-direction: column; gap: 9px; }
.artist-name { font: 900 19px var(--sans); letter-spacing: .12em; }
.artist-field { display: flex; flex-direction: column; gap: 5px; color: var(--dim); font-size: 9px; letter-spacing: .14em; }
.artist-label { color: #c6ff2b; font-size: 9px; letter-spacing: .2em; margin-bottom: 10px; }
.dna { display: flex; flex-direction: column; }
.dna-trait { display: grid; grid-template-columns: 78px 1fr 30px; align-items: center; gap: 10px; min-height: 31px; color: #aaaab2; font-size: 9px; letter-spacing: .1em; }
.dna-trait input { width: 100%; accent-color: #c6ff2b; }
.dna-trait b { color: #fff; text-align: right; }
.artist-create { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.artist-create p { max-width: 720px; color: #aaaab2; line-height: 1.6; margin: 0; }
.artist-actions { display: flex; flex: none; gap: 7px; }
.artist-catalog { padding-top: 18px; }
.catalog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.catalog-head .artist-label { margin-bottom: 4px; }
.catalog-empty { padding: 36px; border: 1px dashed var(--line2); color: var(--dim); text-align: center; }
.catalog-card { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px; border: 1px solid var(--line); background: #0a0a0c; margin-top: 8px; position: relative; }
.catalog-card::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: #444; }
.catalog-card.ready::before { background: #c6ff2b; }
.catalog-card.published::before { background: #f50; }
.catalog-art { aspect-ratio: 1; background: #050506; }
.catalog-art canvas { width: 100%; height: 100%; display: block; }
.catalog-info { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.catalog-title { font: 900 22px var(--sans); letter-spacing: .08em; color: #fff; text-transform: uppercase; }
.catalog-meta { color: #c6ff2b; font-size: 10px; letter-spacing: .1em; }
.catalog-plan { display: grid; grid-template-columns: minmax(140px,220px) minmax(120px,180px); gap: 8px; }
.catalog-actions { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 760px) {
  .modal.pub { width: 100vw; max-height: 100vh; height: 100vh; border: 0; }
  .pub-body { padding: 0 12px 20px; }
  .pub-form { grid-template-columns: 1fr; }
  .pub-left { max-width: 380px; margin: auto; width: 100%; }
  .stats { grid-template-columns: 1fr 1fr; }
  .pub-two { grid-template-columns: 1fr; }
  .artist-modal { width: 100vw; max-height: 100vh; height: 100vh; border: 0; }
  .artist-body { padding: 12px; }
  .artist-identity { grid-template-columns: 1fr; }
  .artist-profile { grid-template-columns: 58px 1fr; }
  .artist-monogram { width: 58px; height: 58px; font-size: 22px; }
  .artist-create { align-items: stretch; flex-direction: column; }
  .artist-actions { flex-wrap: wrap; }
  .catalog-card { grid-template-columns: 94px 1fr; gap: 10px; }
  .catalog-title { font-size: 16px; }
  .catalog-plan { grid-template-columns: 1fr; }
}

/* ---------- club rooms ---------- */
.btn.club-btn { border-color: #6540a0; color: #cbb2ff; }
.btn.club-queue { border-color: #8d5cff; color: #cbb2ff; }
.club-overlay { position: fixed; inset: 0; z-index: 60; background: #050506; color: #f1f1f4; }
.club-shell { --club-purple: #8d5cff; height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; background:
  radial-gradient(circle at 50% 20%, rgba(99,53,164,.22), transparent 33%),
  linear-gradient(180deg,#09080d,#040405 72%); }
.club-head { min-height: 68px; display: flex; align-items: center; gap: 18px; padding: 10px 16px; border-bottom: 1px solid #25222d; background: rgba(7,7,9,.94); }
.club-brand { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.club-brand > i { width: 28px; height: 28px; border: 2px solid #c6ff2b; position: relative; }
.club-brand > i::after { content: ''; position: absolute; width: 8px; height: 8px; left: 8px; top: 8px; background: #c6ff2b; }
.club-brand div { display: flex; flex-direction: column; gap: 2px; }
.club-brand b { font: 900 13px var(--sans); letter-spacing: .18em; }
.club-brand span { color: #7c7884; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.club-room-name { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 360px; color: #77737e; font-size: 8px; letter-spacing: .16em; }
.club-room-input { font: 900 14px var(--sans); text-transform: uppercase; letter-spacing: .1em; }
.club-head-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.club-main { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 320px; }
.club-stage { position: relative; overflow: hidden; min-height: 420px; perspective: 900px; background:
  linear-gradient(90deg,transparent 49.7%,rgba(255,255,255,.05) 50%,transparent 50.3%),
  repeating-linear-gradient(90deg, transparent 0 11.8%, rgba(255,255,255,.025) 12% 12.2%),
  linear-gradient(180deg,#0e0b14 0 61%,#080709 61%); }
.club-stage::before { content: ''; position: absolute; left: 0; right: 0; top: 61%; bottom: 0; background:
  repeating-linear-gradient(90deg,transparent 0 9.8%,rgba(141,92,255,.08) 10% 10.3%),
  repeating-linear-gradient(0deg,transparent 0 24%,rgba(141,92,255,.08) 25% 25.5%);
  transform: rotateX(58deg) scale(1.3); transform-origin: top; }
.club-stage::after { content: 'UNTERGRUND / ORIGINAL SIGNAL ONLY'; position: absolute; left: 20px; top: 18px; color: rgba(255,255,255,.18); font: 900 10px var(--sans); letter-spacing: .35em; }
.club-lights { position: absolute; inset: 0; pointer-events: none; }
.club-lights i { position: absolute; top: -20%; width: 24%; height: 90%; opacity: .14; filter: blur(12px); clip-path: polygon(44% 0,56% 0,100% 100%,0 100%); transform-origin: top; animation: clubSweep 8s ease-in-out infinite alternate; }
.club-lights i:nth-child(1) { left: 4%; background: #8d5cff; }
.club-lights i:nth-child(2) { left: 38%; background: #ff2b2b; animation-delay: -3s; }
.club-lights i:nth-child(3) { right: 2%; background: #c6ff2b; animation-delay: -6s; }
@keyframes clubSweep { to { transform: translateX(40%) rotate(8deg); opacity: .24; } }
.club-kick .club-stage { filter: brightness(1.11); }
.club-accent .club-lights i { opacity: .34; }
.club-dj { position: absolute; left: 50%; top: 11%; width: 320px; height: 250px; transform: translateX(-50%); z-index: 4; }
.club-booth { position: absolute; left: 0; right: 0; bottom: 0; height: 82px; display: flex; align-items: center; justify-content: space-around; background: linear-gradient(#222029,#0c0b0e); border: 1px solid #3b3546; box-shadow: 0 25px 50px #000; transform: perspective(400px) rotateX(7deg); }
.club-booth b { color: #c6ff2b; font: 900 14px var(--sans); letter-spacing: .24em; }
.club-booth i { width: 48px; height: 48px; border: 2px solid #393440; border-radius: 50%; box-shadow: inset 0 0 0 10px #141217; }
.club-dj > .club-person { position: absolute; left: 50%; top: 0; transform: translateX(-50%) scale(1.28); z-index: -1; }
.club-now { position: absolute; left: 20px; top: 49%; z-index: 5; width: min(340px,42%); padding: 11px 14px; border-left: 3px solid #c6ff2b; background: rgba(5,5,7,.82); backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 3px; }
.club-now span { color: #c6ff2b; font-size: 8px; letter-spacing: .2em; }
.club-now strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 20px var(--sans); text-transform: uppercase; letter-spacing: .08em; }
.club-now small { color: #96919e; font-size: 9px; letter-spacing: .08em; }
.club-floor { position: absolute; left: 8%; right: 8%; bottom: 4%; height: 37%; z-index: 6; display: flex; align-items: flex-end; justify-content: space-around; gap: 4px; }
.club-person { --av: #c6ff2b; position: relative; width: 74px; height: 130px; flex: none; display: flex; justify-content: center; transform-origin: 50% 100%; animation: clubDance .9s steps(2,end) infinite; }
.club-person.red { --av: #ff4c4c; } .club-person.blue { --av: #45c8ff; } .club-person.violet { --av: #9b6cff; } .club-person.bone { --av: #e5dfd2; }
.club-person:nth-child(3n+1) { animation-duration: .82s; animation-delay: -.3s; }
.club-person:nth-child(3n+2) { animation-duration: 1.05s; animation-delay: -.7s; }
.club-kick .club-person { transform: translateY(-5px) scaleY(1.03); }
@keyframes clubDance { 0%,100% { rotate: -2deg; } 50% { rotate: 3deg; translate: 0 -3px; } }
.club-avatar { position: absolute; left: 17px; top: 9px; width: 40px; height: 88px; z-index: 2; }
.av-head { position: absolute; left: 2px; top: 0; width: 36px; height: 34px; background: var(--av); border: 3px solid #070708; box-sizing: border-box; }
.round .av-head { border-radius: 50%; }
.visor .av-head { border-radius: 10px 10px 2px 2px; height: 30px; }
.av-body { position: absolute; left: 0; top: 31px; width: 40px; height: 50px; background: #19171d; border: 3px solid #070708; box-sizing: border-box; clip-path: polygon(15% 0,85% 0,100% 100%,0 100%); }
.av-mark { position: absolute; left: 14px; top: 14px; width: 7px; height: 7px; background: var(--av); }
.av-eye { position: absolute; top: 13px; width: 4px; height: 4px; background: #09090a; }
.av-eye.left { left: 8px; } .av-eye.right { right: 8px; }
.visor .av-eye { top: 11px; width: 9px; height: 3px; }
.av-arm { position: absolute; top: 42px; width: 9px; height: 42px; background: #151319; border: 2px solid #070708; transform-origin: top; }
.av-arm.left { left: -5px; rotate: 8deg; } .av-arm.right { right: -5px; rotate: -8deg; }
.club-kick .av-arm.left { rotate: 18deg; } .club-kick .av-arm.right { rotate: -22deg; }
.club-shadow { position: absolute; left: 9px; bottom: 21px; width: 56px; height: 11px; background: rgba(0,0,0,.7); border-radius: 50%; filter: blur(3px); }
.club-name { position: absolute; bottom: 0; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #aaa5af; font-size: 8px; text-align: center; }
.gear-hood .av-head::before { content: ''; position: absolute; inset: -8px -7px -4px; border: 5px solid #25212b; border-bottom-width: 2px; border-radius: 45% 45% 14px 14px; z-index: -1; }
.av-goggles { display: none; position: absolute; left: 3px; top: 9px; width: 24px; height: 8px; border: 3px solid #0a090b; background: #50d8ff; }
.gear-goggles .av-goggles { display: block; }
.gear-goggles .av-eye { display: none; }
.av-antenna { display: none; position: absolute; left: 18px; top: -13px; width: 2px; height: 15px; background: var(--av); }
.av-antenna::after { content: ''; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--av); box-shadow: 0 0 8px var(--av); }
.gear-antenna .av-antenna { display: block; }
.club-dj .club-name { color: #c6ff2b; }
.club-person.ambient { opacity: .28; filter: saturate(.5); }
.club-reaction-fx { position: absolute; left: 50%; top: 38%; z-index: 12; transform: translate(-50%,20px) scale(.85); opacity: 0; color: #fff; font: 900 26px var(--sans); letter-spacing: .12em; text-shadow: 0 0 28px #8d5cff; pointer-events: none; }
.club-reaction-fx.show { animation: clubReaction 1.4s ease-out; }
@keyframes clubReaction { 0% { opacity: 0; transform: translate(-50%,20px) scale(.85); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-80px) scale(1.1); } }
.club-social { min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; background: #09090b; border-left: 1px solid #25222d; }
.club-social-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid #25222d; color: #817c88; font-size: 9px; letter-spacing: .17em; }
.club-social-head b { color: #c6ff2b; }
.club-chat-feed { min-height: 0; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 9px; }
.club-chat-line { display: grid; grid-template-columns: 82px 1fr; gap: 8px; font-size: 10px; line-height: 1.4; }
.club-chat-line b { overflow: hidden; text-overflow: ellipsis; color: #cbb2ff; }
.club-chat-line span { color: #c4c1c8; overflow-wrap: anywhere; }
.club-chat-empty { align-self: center; margin: auto; color: #595660; font-size: 10px; }
.club-chat-compose { padding: 10px; border-top: 1px solid #25222d; }
.club-reactions { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 0 10px 10px; }
.club-reactions .btn { padding: 0 5px; font-size: 8px; }
.club-footer { display: grid; grid-template-columns: minmax(540px,1fr) minmax(280px,.6fr); border-top: 1px solid #25222d; background: #08080a; }
.club-customizer { display: flex; align-items: center; min-height: 120px; padding: 10px 16px; border-right: 1px solid #25222d; }
.club-custom-preview { width: 100px; height: 112px; overflow: hidden; display: grid; place-items: center; flex: none; }
.club-custom-preview .club-person { transform: scale(.78); }
.club-custom-fields { flex: 1; display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 8px; }
.club-field { display: flex; flex-direction: column; gap: 5px; color: #6e6a74; font-size: 8px; letter-spacing: .14em; }
.club-principle { padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.club-principle b { color: #c6ff2b; font: 900 12px var(--sans); letter-spacing: .15em; }
.club-principle span { color: #837e89; font-size: 9px; line-height: 1.5; }
.club-principle small { color: #cbb2ff; font-size: 8px; letter-spacing: .12em; }

@media (max-width: 900px) {
  .club-shell { overflow: auto; display: block; }
  .club-head { position: sticky; top: 0; z-index: 20; flex-wrap: wrap; }
  .club-brand { min-width: 180px; }
  .club-room-name { order: 3; flex-basis: 100%; max-width: none; }
  .club-main { display: block; }
  .club-stage { min-height: 560px; }
  .club-social { height: 360px; border-left: 0; border-top: 1px solid #25222d; }
  .club-footer { grid-template-columns: 1fr; }
  .club-customizer { border-right: 0; border-bottom: 1px solid #25222d; }
}

@media (max-width: 560px) {
  .club-head { gap: 8px; padding: 9px; }
  .club-brand { min-width: 0; flex: 1; }
  .club-brand span { display: none; }
  .club-head-actions { width: 100%; margin: 0; display: grid; grid-template-columns: 1fr 1.25fr .7fr; }
  .club-head-actions .btn { padding: 0 5px; font-size: 8px; }
  .club-stage { min-height: 500px; }
  .club-dj { width: 240px; top: 12%; transform: translateX(-50%) scale(.85); }
  .club-now { top: 51%; left: 10px; width: calc(100% - 20px); box-sizing: border-box; }
  .club-floor { left: 0; right: 0; overflow: hidden; }
  .club-person { transform: scale(.82); margin: 0 -8px; }
  .club-customizer { align-items: flex-start; }
  .club-custom-preview { width: 72px; }
  .club-custom-fields { grid-template-columns: 1fr 1fr; }
}

/* ---------- generate-first home ---------- */
.generate-home { margin: 14px 18px 0; padding: clamp(22px,4vw,48px); border: 1px solid #29292f; background:
  radial-gradient(circle at 80% 10%,rgba(198,255,43,.09),transparent 28%),
  radial-gradient(circle at 10% 90%,rgba(255,43,43,.08),transparent 30%),
  linear-gradient(145deg,#101013,#09090b); display: grid; grid-template-columns: minmax(280px,.9fr) minmax(420px,1.25fr); gap: 28px 48px; align-items: center; }
.generate-copy > span { color: #c6ff2b; font-size: 9px; letter-spacing: .24em; }
.generate-copy h1 { margin: 10px 0 12px; max-width: 620px; font: 900 clamp(32px,4.6vw,66px)/.95 var(--sans); letter-spacing: -.035em; color: #fff; }
.generate-copy p { max-width: 610px; margin: 0; color: #96969f; font-size: 12px; line-height: 1.65; }
.generate-styles { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.generate-style { min-height: 82px; padding: 13px 10px; border: 1px solid #2b2b32; background: #0b0b0e; color: #777780; cursor: pointer; text-align: left; }
.generate-style b,.generate-style span { display: block; }
.generate-style b { font: 900 11px var(--sans); letter-spacing: .1em; color: #d5d5da; }
.generate-style span { margin-top: 8px; font-size: 8px; line-height: 1.5; letter-spacing: .08em; }
.generate-style:hover { border-color: #595962; }
.generate-style.on { border-color: #c6ff2b; background: #14180c; box-shadow: inset 0 -3px #c6ff2b; }
.generate-style.on b { color: #c6ff2b; }
.generate-actions { grid-column: 1 / -1; display: flex; align-items: stretch; gap: 8px; }
.generate-primary { flex: 1; min-height: 82px; border: 0; background: #c6ff2b; color: #070807; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 14px 24px; }
.generate-primary:hover { background: #d4ff59; box-shadow: 0 0 34px rgba(198,255,43,.2); }
.generate-primary span { font: 900 26px var(--sans); letter-spacing: .14em; }
.generate-primary small { margin-top: 4px; font: 700 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.refine-toggle { min-height: 82px; min-width: 180px; border-color: #575760; }
.generate-actions > .ghost { min-height: 82px; min-width: 150px; color: #8bdcff; border-color: #30404b; }
.generate-status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 4px; color: #686871; font-size: 9px; letter-spacing: .13em; }
.generate-status b { color: #fff; }
.studio-workspace { display: none; }
body.studio-open .studio-workspace { display: grid; }
body:not(.studio-open) .top .studio-only { display: none; }
body:not(.studio-open) .top { position: static; }
@media (max-width: 900px) {
  .generate-home { grid-template-columns: 1fr; margin: 10px; padding: 24px 18px; gap: 22px; }
  .generate-styles { grid-template-columns: repeat(5,minmax(105px,1fr)); overflow-x: auto; padding-bottom: 4px; }
  .generate-actions { flex-wrap: wrap; }
  .generate-primary { flex-basis: 100%; }
  .refine-toggle,.generate-actions > .ghost { flex: 1; min-width: 145px; }
}