/* ============================================================
   BANDSCAPE — style.css
   Aesthetic: late-night gig flyer. Photocopied, taped to a pole,
   rained on once. Heavy condensed type, marker accents, grain.
   ============================================================ */

:root {
  --bg:    #0b0b0f;
  --bg2:   #14121a;
  --panel: #1b1822;
  --panel2:#221e2c;
  --line:  #322c3e;
  --text:  #ece8f0;
  --muted: #968ea6;

  --pink:  #ff3b6b;
  --yellow:#ffd23f;
  --green: #7CFC9B;
  --blue:  #4fc3f7;
  --purple:#b388ff;
  --orange:#ff8a3d;

  --display: Impact, 'Haettenschweiler', 'Franklin Gothic Bold', 'Arial Narrow Bold', 'Arial Narrow', sans-serif;
  --cond: 'Oswald', 'Arial Narrow', 'Avenir Next Condensed', sans-serif;
  --body: 'Avenir Next', 'Segoe UI', 'Helvetica Neue', Helvetica, sans-serif;
  --mono: 'Courier New', Courier, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* grain overlay everywhere */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.screen { position: fixed; inset: 0; }

/* ---------- buttons ---------- */
.btn {
  display: block; width: 100%; margin: 8px 0;
  padding: 12px 16px; border: 2px solid var(--text); border-radius: 2px;
  background: transparent; color: var(--text);
  font-family: var(--cond); font-weight: 700; font-size: 15px;
  letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
  transition: transform .08s ease, background .12s, color .12s, box-shadow .12s;
}
.btn:hover { background: var(--text); color: var(--bg); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--pink); }
.btn:active { transform: translate(1px,1px); box-shadow: none; }
.btn-big { font-size: 18px; padding: 15px; border-color: var(--yellow); color: var(--yellow); }
.btn-big:hover { background: var(--yellow); color: var(--bg); box-shadow: 4px 4px 0 var(--pink); }
.btn-danger { border-color: var(--pink); color: var(--pink); }
.btn-danger:hover { background: var(--pink); color: var(--bg); box-shadow: none; }
.btn-file { text-align: center; }
.btn:disabled { opacity: .35; cursor: not-allowed; }

/* ============================================================
   BOOT / TITLE
   ============================================================ */
#boot { display: grid; place-items: center; background:
  radial-gradient(120% 90% at 50% -10%, #241a2e 0%, var(--bg) 60%); }
.boot-wrap { width: min(440px, 88vw); text-align: center; position: relative; }
.logo {
  font-family: var(--display); font-size: clamp(56px, 13vw, 104px);
  line-height: .82; letter-spacing: 2px; margin: 0 0 4px;
  color: var(--text); text-transform: uppercase;
  text-shadow: 4px 4px 0 var(--pink), 8px 8px 0 rgba(0,0,0,.5);
  transform: rotate(-2deg);
}
.tagline { font-family: var(--mono); color: var(--yellow); margin: 0 0 26px; font-size: 13px; letter-spacing: .5px; }
.boot-menu { text-align: left; }
.boot-status { margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.boot-error { color: var(--pink); font-weight: bold; }
#boot.loading .tagline { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* slot list */
.slot-list { margin-top: 14px; display: grid; gap: 8px; }
.slot {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  text-align: left; padding: 11px 14px; cursor: pointer;
  background: var(--panel); border: 2px solid var(--line); border-radius: 2px; color: var(--text);
  transition: border-color .12s, transform .08s;
}
.slot:hover { border-color: var(--green); transform: translateX(2px); }
.slot-name { font-family: var(--cond); font-weight: 700; font-size: 17px; letter-spacing: .5px; }
.slot-info { grid-column: 1; font-size: 12px; color: var(--muted); }
.slot-cta { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--mono); font-size: 11px; color: var(--green); }
.slot-empty { grid-template-columns: 1fr; color: var(--muted); }

/* ============================================================
   CHARACTER CREATION
   ============================================================ */
#charcreate { display: grid; place-items: center; overflow-y: auto;
  background: radial-gradient(120% 100% at 80% 0%, #2a1426 0%, var(--bg) 55%); }
.cc-wrap { width: min(460px, 92vw); padding: 20px 0; }
.cc-flyer {
  position: relative; background: var(--panel); border: 3px solid var(--text);
  padding: 24px 22px 26px; border-radius: 2px; transform: rotate(-.6deg);
  box-shadow: 10px 12px 0 rgba(0,0,0,.55);
}
.cc-title { font-family: var(--display); font-size: 42px; margin: 0; letter-spacing: 2px;
  text-transform: uppercase; color: var(--pink); text-shadow: 3px 3px 0 var(--bg); }
.cc-sub { font-family: var(--mono); color: var(--muted); margin: 2px 0 18px; font-size: 12px; }
.cc-field { display: block; margin: 14px 0; }
.cc-field > span { display: block; font-family: var(--cond); font-weight: 700; letter-spacing: 2px;
  font-size: 12px; color: var(--yellow); margin-bottom: 7px; text-transform: uppercase; }
#cc-name { width: 100%; padding: 11px 12px; background: var(--bg); border: 2px solid var(--line);
  color: var(--text); font-family: var(--body); font-size: 16px; border-radius: 2px; }
#cc-name:focus { outline: none; border-color: var(--green); }
.cc-colors { display: flex; gap: 9px; }
.cc-swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--bg);
  cursor: pointer; transition: transform .1s; }
.cc-swatch.sel { outline: 2px solid var(--text); outline-offset: 2px; transform: scale(1.12); }
.cc-preview { display: grid; place-items: center; margin: 6px 0 2px; }
.cc-avatar { width: 64px; height: 64px; border-radius: 50%; transition: background .15s; }
.cc-vibes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-vibe { text-align: left; padding: 9px 11px; background: var(--bg); border: 2px solid var(--line);
  border-radius: 2px; cursor: pointer; color: var(--text); }
.cc-vibe.sel { border-color: var(--green); background: var(--panel2); }
.cc-vibe strong { display: block; font-family: var(--cond); letter-spacing: .5px; }
.cc-vibe small { color: var(--muted); font-size: 11px; }
.tape { position: absolute; width: 96px; height: 28px; background: rgba(255,210,63,.22);
  border: 1px dashed rgba(255,210,63,.4); }
.tape-1 { top: -12px; left: 30px; transform: rotate(-7deg); }
.tape-2 { bottom: -10px; right: 26px; transform: rotate(5deg); }

/* ============================================================
   GAME — stage + HUD
   ============================================================ */
#game { background: var(--bg); }
#stage { position: absolute; inset: 0 0 0 0; }

.stage-room {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #20151f 0%, #161019 58%, #0e0a12 100%);
  overflow: hidden;
}
.stage-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background:
    repeating-linear-gradient(90deg, #1a1420 0 38px, #16101c 38px 76px);
  border-top: 3px solid #2a2030;
  transform: perspective(420px) rotateX(34deg); transform-origin: bottom;
  box-shadow: 0 -30px 60px rgba(0,0,0,.5) inset;
}
.stage-label { position: absolute; top: 10px; left: 12px; font-family: var(--mono);
  font-size: 12px; color: var(--muted); background: rgba(0,0,0,.4); padding: 3px 8px; border-radius: 2px; }
.placeholder-note { color: var(--orange); }

.hotspots { position: absolute; inset: 0; }
.hotspot {
  position: absolute; transform: translate(-50%,-50%);
  display: grid; justify-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; color: var(--text);
}
.hotspot-img { width: 58px; height: 58px; object-fit: contain;
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,.55)); transition: transform .1s; }
.hotspot:hover .hotspot-img { transform: translateY(-4px) scale(1.06); }
.hotspot-label { font-family: var(--cond); font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; background: rgba(0,0,0,.55); padding: 2px 7px; border-radius: 2px;
  opacity: 0; transition: opacity .12s; }
.hotspot:hover .hotspot-label { opacity: 1; }

/* HUD bar */
#hud {
  position: absolute; top: 0; left: 0; right: 0; height: 52px; z-index: 20;
  display: flex; align-items: center; gap: 16px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(11,11,15,.92), rgba(11,11,15,.55) 80%, transparent);
}
#hud-clock { display: flex; flex-direction: column; line-height: 1; }
.hud-day { font-family: var(--display); font-size: 20px; letter-spacing: 1px; color: var(--text); }
.hud-time { font-family: var(--mono); font-size: 11px; color: var(--yellow); }
#hud-pips { display: flex; gap: 12px; flex: 1; }
.pip { width: 78px; }
.pip-label { font-family: var(--cond); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.pip-track { height: 7px; background: #000; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.pip-fill { height: 100%; transition: width .3s ease; }
.pip-low .pip-label { color: var(--pink); }
.pip-low .pip-track { border-color: var(--pink); animation: lowpulse 1s infinite; }
@keyframes lowpulse { 50% { box-shadow: 0 0 8px var(--pink); } }
.hud-cash { font-family: var(--display); font-size: 24px; color: var(--green); letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.6); }

/* phone button */
#phone-button {
  position: absolute; right: 18px; bottom: 18px; z-index: 30;
  width: 64px; height: 64px; border-radius: 14px; cursor: pointer;
  background: var(--panel); border: 3px solid var(--text);
  display: grid; place-items: center; gap: 0; color: var(--text);
  box-shadow: 4px 5px 0 rgba(0,0,0,.5);
  transition: transform .1s, box-shadow .1s;
}
#phone-button:hover { transform: translate(-1px,-1px); box-shadow: 6px 7px 0 var(--pink); }
#phone-button:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
.pb-glyph { font-size: 22px; line-height: 1; color: var(--green); }
.pb-text { font-family: var(--cond); font-size: 9px; letter-spacing: 2px; }

/* ============================================================
   PHONE
   ============================================================ */
#phone { position: absolute; inset: 0; z-index: 40; display: grid; place-items: end;
  justify-items: end; padding: 14px 18px 14px; background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity .2s; }
#phone.open { opacity: 1; }
.phone-frame {
  width: 330px; max-width: 92vw; height: min(620px, 90vh);
  background: #060608; border: 4px solid #000; border-radius: 30px;
  box-shadow: 0 0 0 2px var(--line), 10px 14px 0 rgba(0,0,0,.5), 0 0 40px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden; position: relative;
  transform: translateY(16px) scale(.98); transition: transform .22s ease;
}
#phone.open .phone-frame { transform: translateY(0) scale(1); }
.phone-notch { height: 22px; background: #000; border-radius: 0 0 12px 12px; width: 120px;
  margin: 0 auto; flex: none; }
#phone-screen { flex: 1; overflow-y: auto; padding: 12px 14px 16px;
  background: radial-gradient(120% 80% at 50% 0%, #181320, #0c0a10); }
.phone-bar { flex: none; display: flex; justify-content: space-around; padding: 8px;
  background: #000; border-top: 1px solid var(--line); }
.phone-nav { width: 44px; height: 32px; background: var(--panel); border: 1px solid var(--line);
  color: var(--text); border-radius: 8px; cursor: pointer; font-size: 14px; }
.phone-nav:hover { border-color: var(--green); }

.phone-status-bar { display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: 10px; color: var(--muted); margin-bottom: 14px; }

/* app grid */
.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
.app-icon { background: none; border: none; cursor: pointer; display: grid; justify-items: center;
  gap: 6px; color: var(--text); }
.app-glyph { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  font-size: 26px; background: var(--panel); border: 2px solid var(--accent);
  color: var(--accent); box-shadow: 3px 3px 0 rgba(0,0,0,.4); transition: transform .1s; }
.app-icon:hover .app-glyph { transform: translateY(-3px); }
.app-name { font-family: var(--cond); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.app-soon { opacity: .55; position: relative; }
.app-soon-tag { font-family: var(--mono); font-size: 9px; color: var(--orange); }

/* app panes */
.app-title { font-family: var(--display); font-size: 30px; letter-spacing: 1px; margin: 4px 0 14px;
  color: var(--text); text-shadow: 2px 2px 0 var(--pink); }
.sub { font-family: var(--cond); letter-spacing: 1px; text-transform: uppercase; font-size: 13px;
  color: var(--yellow); margin: 18px 0 8px; }

/* tasks */
.task { display: flex; gap: 10px; padding: 10px; background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--yellow); border-radius: 2px; margin-bottom: 8px; }
.task-optional { border-left-color: var(--blue); }
.task-locked { opacity: .5; border-left-color: var(--line); }
.task-completed { border-left-color: var(--green); opacity: .65; }
.task-check { width: 18px; height: 18px; border: 2px solid var(--yellow); border-radius: 3px; flex: none; margin-top: 2px; }
.task-check-locked { border: none; }
.task-check-done { border: none; color: var(--green); font-weight: bold; }
.task-title { font-family: var(--cond); font-weight: 700; font-size: 14px; letter-spacing: .3px; }
.task-desc { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.task-done-head { font-family: var(--mono); font-size: 10px; color: var(--muted); margin: 14px 0 8px; letter-spacing: 2px; }
.tag { font-family: var(--mono); font-size: 9px; color: var(--blue); }

/* status */
.res-row { display: flex; gap: 8px; margin-bottom: 12px; }
.res { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 2px;
  padding: 8px; display: grid; gap: 2px; }
.res span { font-family: var(--cond); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.res strong { font-family: var(--display); font-size: 20px; color: var(--green); }
.stat-row { display: grid; grid-template-columns: 64px 1fr 32px; align-items: center; gap: 8px; margin-bottom: 8px; }
.stat-name { font-family: var(--cond); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.stat-track { height: 9px; background: #000; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.stat-fill { height: 100%; transition: width .3s; }
.stat-val { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--muted); }
.cond-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.cond { font-family: var(--cond); font-size: 11px; letter-spacing: .5px; padding: 3px 8px; border-radius: 2px;
  text-transform: uppercase; border: 1px solid; }
.cond-buff { color: var(--green); border-color: var(--green); }
.cond-debuff { color: var(--pink); border-color: var(--pink); }
.cond-status { color: var(--blue); border-color: var(--blue); }

/* settings */
.set-block { margin-bottom: 18px; }
.set-label { font-family: var(--cond); letter-spacing: 2px; text-transform: uppercase; font-size: 11px;
  color: var(--yellow); margin-bottom: 6px; }
.set-meta { font-family: var(--mono); font-size: 10px; margin-top: 18px; line-height: 1.5; }

/* stub apps */
.stub { text-align: center; padding: 30px 10px; color: var(--muted); }
.stub-glyph { font-size: 50px; opacity: .4; margin-bottom: 10px; }

/* ============================================================
   TOASTS + OVERLAY
   ============================================================ */
#toast-host { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%);
  z-index: 9000; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: max-content; max-width: 90vw; }
.toast { font-family: var(--cond); font-size: 13px; letter-spacing: .5px; padding: 9px 16px;
  border-radius: 2px; background: var(--panel); border: 2px solid var(--text); color: var(--text);
  box-shadow: 3px 3px 0 rgba(0,0,0,.5); transform: translateY(10px); opacity: 0;
  transition: transform .25s, opacity .25s; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast-good { border-color: var(--green); color: var(--green); }
.toast-warn { border-color: var(--pink); color: var(--pink); }

.overlay { position: fixed; inset: 0; z-index: 8000; display: grid; place-items: center;
  background: rgba(5,3,8,.88); }
.overlay-card { text-align: center; width: min(360px, 88vw); background: var(--panel);
  border: 3px solid var(--pink); padding: 28px; border-radius: 2px; box-shadow: 8px 10px 0 rgba(0,0,0,.6); }
.overlay-card h2 { font-family: var(--display); font-size: 44px; margin: 0 0 8px; color: var(--pink);
  letter-spacing: 2px; }

/* ============================================================
   ROTATE PROMPT (mobile portrait only)
   ============================================================ */
#rotate { display: none; }
@media (orientation: portrait) and (max-width: 900px) {
  #rotate { display: grid; place-items: center; position: fixed; inset: 0; z-index: 99999;
    background: var(--bg); text-align: center; }
  .rotate-inner { font-family: var(--cond); font-size: 22px; letter-spacing: 1px; color: var(--yellow); line-height: 1.6; }
  .rotate-inner small { color: var(--muted); font-size: 13px; }
  #game, #boot, #charcreate { display: none !important; }
}

/* ============================================================
   STEP 2 — isometric canvas stage
   ============================================================ */
#stage { background: #0c0810; }
.iso-canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* arrange-mode button (bottom-left) + banner */
#arrange-button {
  position: absolute; left: 18px; bottom: 18px; z-index: 30;
  width: 64px; height: 64px; border-radius: 14px; cursor: pointer;
  background: var(--panel); border: 3px solid var(--text);
  display: grid; place-items: center; color: var(--text);
  box-shadow: 4px 5px 0 rgba(0,0,0,.5); transition: transform .1s, box-shadow .1s, border-color .12s;
}
#arrange-button:hover { transform: translate(-1px,-1px); box-shadow: 6px 7px 0 var(--yellow); }
#arrange-button:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
#arrange-button.active { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow), 4px 5px 0 rgba(0,0,0,.5); }
#arrange-button.active .ab-glyph { color: var(--yellow); }
.ab-glyph { font-size: 22px; line-height: 1; color: var(--blue); }
.ab-text { font-family: var(--cond); font-size: 9px; letter-spacing: 1.5px; }
#arrange-banner {
  position: absolute; left: 50%; top: 60px; transform: translateX(-50%); z-index: 25;
  font-family: var(--mono); font-size: 11px; letter-spacing: .5px; color: var(--yellow);
  background: rgba(0,0,0,.66); border: 1px solid var(--yellow); border-radius: 2px;
  padding: 6px 12px; text-transform: uppercase; max-width: 90vw; text-align: center;
}

/* ============================================================
   MESSAGE LOG (top-right feed) — replaces center toasts
   ============================================================ */
#log {
  position: absolute; top: 58px; right: 14px; z-index: 25;
  width: min(240px, 38vw); display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
.log-entry {
  font-family: var(--mono); font-size: 11px; line-height: 1.35; color: var(--text);
  background: rgba(8,6,12,.74); border-left: 3px solid var(--muted); border-radius: 2px;
  padding: 6px 9px; transform: translateX(10px); opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 2px 2px 0 rgba(0,0,0,.4);
}
.log-entry.show { transform: translateX(0); }
.log-good { border-left-color: var(--green); color: var(--green); }
.log-warn { border-left-color: var(--pink); color: var(--pink); }
.log-info { border-left-color: var(--yellow); }

/* ============================================================
   STEP 3 — Bag button + inventory
   ============================================================ */
#bag-button {
  position: absolute; right: 92px; bottom: 18px; z-index: 30;
  width: 64px; height: 64px; border-radius: 14px; cursor: pointer;
  background: var(--panel); border: 3px solid var(--text);
  display: grid; place-items: center; color: var(--text);
  box-shadow: 4px 5px 0 rgba(0,0,0,.5); transition: transform .1s, box-shadow .1s;
}
#bag-button:hover { transform: translate(-1px,-1px); box-shadow: 6px 7px 0 var(--green); }
#bag-button:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
.bg-glyph { font-size: 22px; line-height: 1; color: var(--green); }
.bg-text { font-family: var(--cond); font-size: 9px; letter-spacing: 2px; }

#inventory { position: absolute; inset: 0; z-index: 45; display: grid; place-items: center;
  background: rgba(0,0,0,.55); opacity: 0; transition: opacity .2s; padding: 12px; }
#inventory.open { opacity: 1; }
.inv-modal { width: min(580px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
  background: var(--panel); border: 3px solid var(--text); border-radius: 4px;
  box-shadow: 10px 12px 0 rgba(0,0,0,.55); overflow: hidden; transform: translateY(10px) scale(.99);
  transition: transform .2s; }
#inventory.open .inv-modal { transform: translateY(0) scale(1); }
.inv-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px;
  background: #000; border-bottom: 2px solid var(--line); }
.inv-title { font-family: var(--display); font-size: 22px; letter-spacing: 1px; color: var(--text);
  text-shadow: 2px 2px 0 var(--green); }
.inv-body { display: flex; gap: 12px; padding: 12px; overflow-y: auto; }
.inv-pane { flex: 1; min-width: 0; }
.inv-pane-title { font-family: var(--cond); font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  font-size: 12px; color: var(--yellow); margin-bottom: 8px; }
.inv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.inv-slot { position: relative; aspect-ratio: 1; background: var(--bg); border: 2px solid var(--line);
  border-radius: 3px; display: grid; place-items: center; cursor: pointer; padding: 2px;
  touch-action: none; transition: border-color .1s, transform .08s; }
.inv-slot:not(.inv-empty):hover { border-color: var(--green); }
.inv-slot.sel { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); }
.inv-empty { cursor: default; opacity: .5; border-style: dashed; }
.inv-icon { width: 70%; height: 70%; object-fit: contain; pointer-events: none; }
.inv-qty { position: absolute; right: 3px; bottom: 2px; font-family: var(--display); font-size: 13px;
  color: var(--green); text-shadow: 1px 1px 0 #000; pointer-events: none; }
.inv-name { position: absolute; top: 2px; left: 3px; right: 3px; font-family: var(--mono); font-size: 8px;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.inv-actions { border-top: 2px solid var(--line); padding: 10px 12px; background: #000;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 56px; }
.inv-sel-info { flex: 1; min-width: 120px; }
.inv-sel-info strong { font-family: var(--cond); letter-spacing: .5px; display: block; }
.inv-sel-info small { color: var(--muted); font-size: 11px; }
.inv-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-act { width: auto; margin: 0; padding: 8px 12px; font-size: 12px; }
.inv-hint { font-family: var(--mono); font-size: 10px; color: var(--muted); text-align: center;
  padding: 6px; border-top: 1px solid var(--line); }
.inv-ghost { position: fixed; width: 44px; height: 44px; object-fit: contain; pointer-events: none;
  transform: translate(-50%,-50%); z-index: 9500; opacity: .85; filter: drop-shadow(2px 3px 2px #000); }

/* hide the message log while any modal/popup is open (so it doesn't bleed through the backdrop) */
body.modal-open #log { opacity: 0; pointer-events: none; transition: opacity .12s; }

/* ============================================================
   STEP 4 — Music app (on the phone)
   ============================================================ */
.mus-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-bottom: 10px; }
.mus-key { font-family: var(--cond); font-size: 10px; letter-spacing: 1px; color: var(--yellow); display: flex; flex-direction: column; gap: 3px; }
.mus-key select, .mus-bpm input { background: var(--bg); color: var(--text); border: 2px solid var(--line); border-radius: 2px; font-family: var(--mono); padding: 4px 6px; }
.mus-tabs { display: flex; gap: 4px; }
.mus-tab { font-family: var(--cond); font-size: 10px; letter-spacing: 1px; padding: 5px 8px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 2px; cursor: pointer; }
.mus-tab.active { color: var(--green); border-color: var(--green); }
.mus-hint { font-size: 11px; margin: 2px 0 10px; }
.pad-label { font-family: var(--cond); font-size: 10px; letter-spacing: 2px; color: var(--muted); margin: 10px 0 5px; }
.pad-row { display: flex; flex-wrap: wrap; gap: 5px; }
.pad { flex: 1 1 18%; min-width: 34px; aspect-ratio: 1.1; border-radius: 3px; cursor: pointer; border: 2px solid var(--line);
  display: grid; place-items: center; font-family: var(--display); font-size: 15px; touch-action: none; transition: transform .05s, background .05s; }
.pad span { pointer-events: none; }
.pad-chord { background: #2a1d33; color: var(--pink); border-color: #4a2d44; }
.pad-note { background: #1d2a2a; color: var(--blue); border-color: #2d4a4a; }
.pad.hit { transform: translateY(2px) scale(.96); background: var(--yellow); color: var(--bg); }
.rec-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mus-bpm { font-family: var(--cond); font-size: 10px; letter-spacing: 1px; color: var(--yellow); display: flex; flex-direction: column; gap: 3px; }
.mus-bpm input { width: 70px; }
.rec-btn { width: auto; margin: 0; border-color: var(--pink); color: var(--pink); padding: 9px 14px; }
.rec-btn.recording { background: var(--pink); color: var(--bg); animation: recpulse 1s infinite; }
@keyframes recpulse { 50% { box-shadow: 0 0 12px var(--pink); } }
.step-strip { display: flex; gap: 2px; margin-bottom: 10px; }
.step { flex: 1; height: 12px; background: #000; border: 1px solid var(--line); border-radius: 1px; }
.step.on { background: var(--green); }
.step.ph { outline: 2px solid var(--yellow); outline-offset: -1px; }
.loop-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 10px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 2px; margin-bottom: 7px; }
.loop-info strong { font-family: var(--cond); letter-spacing: .3px; }
.loop-info small { display: block; color: var(--muted); font-size: 11px; }
.loop-btns { display: flex; gap: 5px; }
.loop-act { width: auto; margin: 0; padding: 7px 11px; font-size: 13px; }

/* ============================================================
   STEP 4.1 — Music: landscape phone, metronome, octave controls
   ============================================================ */
#phone.landscape .phone-frame { width: min(680px, 95vw); height: min(400px, 88vh); border-radius: 22px; }
#phone.landscape .phone-notch { display: none; }
#phone.landscape .pad-row { flex-wrap: nowrap; }
#phone.landscape .pad { flex: 1 1 0; min-width: 0; aspect-ratio: 1.7; }

.mus-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mus-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.mus-sel { font-family: var(--cond); font-size: 9px; letter-spacing: 1px; color: var(--yellow); display: flex; flex-direction: column; gap: 2px; }
.mus-sel select, .mus-sel input { background: var(--bg); color: var(--text); border: 2px solid var(--line); border-radius: 2px; font-family: var(--mono); padding: 3px 5px; font-size: 12px; }
.mus-sel input[type=number] { width: 56px; }
.mus-check { font-family: var(--cond); font-size: 11px; color: var(--green); display: flex; align-items: center; gap: 5px; align-self: flex-end; }
.rec-opts { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; }
.rec-status { font-family: var(--mono); font-size: 11px; margin-left: 4px; }
.loop-list { display: flex; flex-direction: column; gap: 7px; }

/* ============================================================
   STEP 5 — Laptop DAW (studio)
   ============================================================ */
#daw { position: absolute; inset: 0; z-index: 46; display: grid; place-items: center; background: rgba(0,0,0,.62); opacity: 0; transition: opacity .2s; padding: 10px; }
#daw.open { opacity: 1; }
.daw-modal { width: min(940px, 98vw); height: min(580px, 94vh); display: flex; flex-direction: column; background: var(--panel); border: 3px solid var(--text); border-radius: 4px; box-shadow: 10px 12px 0 rgba(0,0,0,.55); overflow: hidden; }
.daw-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; background: #000; border-bottom: 2px solid var(--line); flex-wrap: wrap; }
.daw-title { font-family: var(--display); font-size: 22px; letter-spacing: 1px; text-shadow: 2px 2px 0 var(--blue); }
.daw-transport { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.daw-t { width: auto; margin: 0; padding: 7px 10px; font-size: 11px; }
.daw-load { background: var(--bg); color: var(--text); border: 2px solid var(--line); border-radius: 2px; font-family: var(--mono); padding: 5px; font-size: 12px; }
.daw-palette { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel2); border-bottom: 1px solid var(--line); overflow-x: auto; flex-wrap: nowrap; }
.daw-pal-label { font-family: var(--cond); font-size: 10px; letter-spacing: 2px; color: var(--yellow); flex: none; }
.daw-chip { flex: none; background: var(--bg); border: 2px solid var(--line); border-radius: 3px; color: var(--text); font-family: var(--cond); font-size: 12px; padding: 6px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.daw-chip small { color: var(--muted); font-size: 9px; }
.daw-chip.armed { border-color: var(--green); color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.daw-timeline-wrap { flex: 1; overflow: auto; background: var(--bg); padding: 0 4px 4px; }
.daw-timeline { position: relative; }
.daw-ruler { display: flex; position: sticky; top: 0; background: var(--bg); z-index: 2; }
.daw-bar { flex: none; font-family: var(--mono); font-size: 10px; color: var(--muted); border-left: 1px solid var(--line); padding: 3px 0 3px 4px; box-sizing: border-box; }
.daw-tracks { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.daw-lane { position: relative; height: 54px; background: repeating-linear-gradient(90deg, #15111c 0 53px, #1d1726 53px 54px); border: 1px solid var(--line); border-radius: 2px; cursor: copy; }
.daw-clip { position: absolute; top: 4px; bottom: 4px; border: 2px solid; border-radius: 3px; display: flex; align-items: center; padding: 0 6px; cursor: pointer; overflow: hidden; }
.daw-clip span { font-family: var(--cond); font-size: 11px; white-space: nowrap; pointer-events: none; }
.daw-clip.sel { outline: 2px solid var(--yellow); outline-offset: -2px; }
.daw-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--yellow); box-shadow: 0 0 8px var(--yellow); pointer-events: none; z-index: 3; }
.daw-foot { padding: 8px 12px; background: #000; border-top: 2px solid var(--line); min-height: 44px; display: flex; align-items: center; }
.daw-del { width: auto; margin: 0; padding: 7px 12px; font-size: 12px; border-color: var(--pink); color: var(--pink); }

/* ============================================================
   STEP 5.1 — extra instruments, loop browser, mixer FX
   ============================================================ */
.pad-drum { background: #2a2118; color: var(--orange); border-color: #4a3a22; }
.mus-inst { font-family: var(--display); font-size: 16px; color: var(--green); letter-spacing: .5px; }

.daw-modal { position: relative; }
.daw-loadloop { flex: none; width: auto; margin: 0; padding: 6px 10px; font-size: 11px; border-color: var(--green); color: var(--green); }

#daw-sub { position: absolute; inset: 0; background: rgba(0,0,0,.62); display: grid; place-items: center; padding: 14px; z-index: 5; }
#daw-sub.hidden { display: none; }
.daw-sub-card { width: min(740px, 96%); max-height: 90%; overflow: auto; background: var(--panel); border: 3px solid var(--text); border-radius: 4px; padding: 14px; box-shadow: 8px 10px 0 rgba(0,0,0,.5); }
.daw-sub-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

.browse-q { width: 100%; padding: 8px 10px; background: var(--bg); color: var(--text); border: 2px solid var(--line); border-radius: 2px; font-family: var(--body); margin-bottom: 8px; }
.browse-q:focus { outline: none; border-color: var(--green); }
.browse-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.browse-filter { font-family: var(--cond); font-size: 11px; padding: 5px 9px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); border-radius: 2px; cursor: pointer; }
.browse-filter.active { color: var(--green); border-color: var(--green); }
.browse-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.browse-row { text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; padding: 8px 10px; color: var(--text); cursor: pointer; display: flex; flex-direction: column; }
.browse-row:hover { border-color: var(--green); }
.browse-row small { color: var(--muted); font-size: 11px; }

.mix-note { font-size: 11px; margin: 0 0 10px; }
.mix-tracks { display: flex; gap: 10px; flex-wrap: wrap; }
.mix-track { flex: 1 1 150px; min-width: 150px; border: 2px solid; border-radius: 3px; padding: 8px; background: var(--bg); }
.mix-th { font-family: var(--display); font-size: 15px; margin-bottom: 6px; }
.mix-knob { display: flex; flex-direction: column; font-family: var(--cond); font-size: 10px; letter-spacing: 1px; color: var(--muted); gap: 2px; margin-bottom: 6px; }
.mix-knob input { width: 100%; }
.mix-val { color: var(--text); font-family: var(--mono); font-size: 10px; }
.mix-eq-label { font-family: var(--cond); font-size: 9px; letter-spacing: 1px; color: var(--yellow); margin: 6px 0 4px; }
.mix-eq { display: flex; gap: 3px; justify-content: space-between; }
.eq-band { display: flex; flex-direction: column; align-items: center; font-family: var(--mono); font-size: 7px; color: var(--muted); gap: 2px; }
.eq-slider { writing-mode: vertical-lr; direction: rtl; width: 14px; height: 64px; }

/* Step 5.2 — microphone / vocals */
.mic-foot { font-size: 10px; margin-top: 10px; line-height: 1.45; }

/* ============================================================
   STEP 6 — town shops / venue
   ============================================================ */
#shop { position: absolute; inset: 0; z-index: 46; display: grid; place-items: center; background: rgba(0,0,0,.62); opacity: 0; transition: opacity .2s; padding: 14px; }
#shop.open { opacity: 1; }
#shop.hidden { display: none; }
.shop-modal { width: min(560px, 96vw); max-height: 92%; overflow: auto; background: var(--panel); border: 3px solid var(--text); border-radius: 4px; box-shadow: 8px 10px 0 rgba(0,0,0,.5); }
.shop-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: #000; border-bottom: 2px solid var(--line); position: sticky; top: 0; }
.shop-title { font-family: var(--display); font-size: 22px; letter-spacing: 1px; }
.shop-cash { font-family: var(--mono); color: var(--green); margin-right: 6px; }
.shop-body { padding: 14px; }
.shop-debt { font-family: var(--display); font-size: 22px; color: var(--pink); margin-bottom: 10px; }
.shop-pay { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.shop-section { font-family: var(--cond); letter-spacing: 2px; color: var(--yellow); font-size: 11px; margin: 14px 0 6px; }
.shop-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.shop-row small { color: var(--muted); display: block; font-size: 11px; }
.shop-price { font-family: var(--mono); color: var(--yellow); }
.shop-btn { width: auto; margin: 0; padding: 6px 12px; font-size: 12px; }
.shop-note { color: var(--muted); font-size: 12px; line-height: 1.5; }

/* ============================================================
   STEP 7 — recruit modal + BAND app
   ============================================================ */
#recruit { position: absolute; inset: 0; z-index: 47; display: grid; place-items: center; background: rgba(0,0,0,.62); opacity: 0; transition: opacity .2s; padding: 16px; }
#recruit.open { opacity: 1; }
#recruit.hidden { display: none; }
.bd-modal { width: min(420px, 94vw); background: var(--panel); border: 3px solid var(--text); border-radius: 4px; box-shadow: 8px 10px 0 rgba(0,0,0,.5); overflow: hidden; }
.bd-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #000; border-bottom: 2px solid var(--line); }
.bd-portrait { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--text); display: grid; place-items: center; font-family: var(--display); font-size: 24px; color: #0b0b0f; flex: none; }
.bd-portrait.sm { width: 30px; height: 30px; font-size: 15px; }
.bd-name { font-family: var(--display); font-size: 22px; letter-spacing: .5px; }
.bd-arch { font-family: var(--cond); color: var(--muted); font-size: 12px; letter-spacing: 1px; }
.bd-head .phone-nav { margin-left: auto; }
.bd-body { padding: 14px; }
.bd-stat { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--cond); font-size: 11px; letter-spacing: 1px; color: var(--muted); }
.bd-stat > span { width: 78px; flex: none; }
.bd-bar { flex: 1; height: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.bd-bar > div { height: 100%; }
.bd-vices { font-family: var(--cond); color: var(--muted); font-size: 12px; margin: 6px 0; }
.bd-action { margin: 12px 0 4px; }
.bd-recruit { border-color: var(--green); color: var(--green); }

.band-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.band-name { font-family: var(--display); font-size: 24px; letter-spacing: .5px; }
.band-mini { width: auto; margin: 0; padding: 5px 10px; font-size: 11px; }
.band-roster { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.band-member { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; padding: 6px 8px; }
.band-member small { display: block; color: var(--muted); font-size: 11px; }
.band-rehearse { border-color: var(--yellow); color: var(--yellow); margin-top: 4px; }
.band-foot { font-size: 11px; margin-top: 10px; line-height: 1.45; }

/* ============================================================
   STEP 8 — booking & playing a show
   ============================================================ */
#show { position: absolute; inset: 0; z-index: 47; display: grid; place-items: center; background: rgba(0,0,0,.62); opacity: 0; transition: opacity .2s; padding: 14px; }
#show.open { opacity: 1; }
#show.hidden { display: none; }
.show-modal { width: min(480px, 96vw); max-height: 92%; overflow: auto; background: var(--panel); border: 3px solid var(--text); border-radius: 4px; box-shadow: 8px 10px 0 rgba(0,0,0,.5); }
.show-body { padding: 14px; }
.show-section { font-family: var(--cond); letter-spacing: 2px; color: var(--yellow); font-size: 11px; margin: 12px 0 6px; }
.set-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; max-height: 34vh; overflow: auto; }
.set-row { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; padding: 8px 10px; cursor: pointer; }
.set-row.on { border-color: var(--green); }
.set-name { flex: 1; }
.set-q { font-family: var(--mono); color: var(--muted); font-size: 11px; }
.show-est { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; padding: 10px 12px; margin-bottom: 12px; }
.show-est > div { display: flex; justify-content: space-between; gap: 8px; font-family: var(--cond); font-size: 12px; color: var(--muted); }
.show-est strong { color: var(--text); font-family: var(--mono); }
.show-est strong.good { color: var(--green); }
.show-go { border-color: var(--pink); color: var(--pink); }
.show-report { text-align: center; }
.report-head { font-family: var(--display); font-size: 26px; color: var(--yellow); margin-bottom: 4px; text-shadow: 2px 2px 0 var(--pink); }
.band-pk { font-family: var(--cond); font-size: 12px; color: var(--muted); margin: 8px 0; }
.band-pk strong { color: var(--green); }
.band-actions { margin-bottom: 6px; }

/* ============================================================
   STEP 9 — calendar app + scheduler picker
   ============================================================ */
#cal { position: absolute; inset: 0; z-index: 48; display: grid; place-items: center; background: rgba(0,0,0,.62); opacity: 0; transition: opacity .2s; padding: 14px; }
#cal.open { opacity: 1; }
#cal.hidden { display: none; }
.cal-modal { width: min(440px, 96vw); max-height: 90%; overflow: auto; background: var(--panel); border: 3px solid var(--text); border-radius: 4px; box-shadow: 8px 10px 0 rgba(0,0,0,.5); }
.cal-body { padding: 14px; }
.cal-day { margin-bottom: 10px; }
.cal-day-h { font-family: var(--cond); letter-spacing: 1px; color: var(--yellow); font-size: 12px; margin-bottom: 4px; }
.cal-slots { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-slot-btn { width: auto; margin: 0; padding: 7px 12px; font-size: 12px; border-color: var(--blue); color: var(--blue); }

/* calendar phone app */
.cal-note { font-size: 12px; line-height: 1.5; margin: 4px 0 10px; }
.cal-grid { display: flex; flex-direction: column; gap: 5px; }
.cal-row { display: flex; align-items: center; gap: 8px; }
.cal-row-d { width: 64px; flex: none; font-family: var(--cond); font-size: 11px; color: var(--muted); }
.cal-row-cells { display: flex; gap: 4px; flex: 1; }
.cal-cell { flex: 1; min-width: 0; height: 34px; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cal-cell-sl { font-family: var(--mono); font-size: 7px; color: var(--muted); letter-spacing: .5px; }
.cal-cell-t { font-size: 12px; line-height: 1; }
.cal-cell.reh { border-color: var(--orange); background: #2a210f; }
.cal-cell.show { border-color: var(--pink); background: #2a0f1a; }
.cal-cell.now { outline: 2px solid var(--green); outline-offset: -2px; }
.cal-legend { font-size: 10px; margin-top: 10px; line-height: 1.4; }

/* ============================================================
   STEP 9.1 — time controls (pause / advance)
   ============================================================ */
#hud-timectl { display: flex; gap: 6px; margin-top: 5px; }
.tc-btn { width: auto; margin: 0; padding: 4px 11px; font-size: 13px; line-height: 1; background: #000; border: 2px solid var(--line); color: var(--text); border-radius: 3px; cursor: pointer; font-family: var(--mono); }
.tc-btn:hover { border-color: var(--yellow); color: var(--yellow); }
body.paused #hud-clock .hud-time::after { content: " ⏸"; color: var(--yellow); }
#timeskip { position: absolute; inset: 0; z-index: 49; display: grid; place-items: center; background: rgba(0,0,0,.62); opacity: 0; transition: opacity .2s; padding: 14px; }
#timeskip.open { opacity: 1; }
#timeskip.hidden { display: none; }
.ts-modal { width: min(360px, 92vw); background: var(--panel); border: 3px solid var(--text); border-radius: 4px; box-shadow: 8px 10px 0 rgba(0,0,0,.5); }
.ts-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ts-opt { width: 100%; margin: 0; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; background: var(--bg); border: 2px solid var(--line); color: var(--text); border-radius: 2px; cursor: pointer; font-family: var(--body); }
.ts-opt:hover { border-color: var(--blue); color: var(--blue); }
.ts-opt small { font-family: var(--mono); color: var(--muted); }

/* ============================================================
   STEP 10 — Band Management 2.0 (multi-band, roles, happiness)
   ============================================================ */
.band-switch { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.band-switch select { flex: 1; background: var(--bg); color: var(--text); border: 2px solid var(--line); border-radius: 2px; padding: 6px; font-family: var(--body); }
.band-member.you { border-color: var(--yellow); }
.bm-info { flex: 1; min-width: 0; }
.bm-info strong { display: block; }
.bm-hap { margin-top: 4px; }
.bm-hap-bar { height: 5px; background: #0c0810; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.bm-hap-bar > div { height: 100%; }
.bm-role { background: #000; color: var(--text); border: 1px solid var(--line); border-radius: 2px; font-family: var(--cond); font-size: 11px; padding: 3px 4px; flex: none; }
.bm-kick { background: none; border: 1px solid var(--line); color: var(--pink); border-radius: 2px; cursor: pointer; width: 26px; height: 26px; flex: none; font-size: 12px; }
.bm-kick:hover { border-color: var(--pink); }

/* Step 11.0 — device label in DAW header */
.daw-dev { font-family: var(--cond); font-size: 11px; letter-spacing: 1px; color: var(--blue); margin-left: 8px; }

/* ============================================================
   STEP 11.1 — mixer channel strips (volume/pan knobs, mute/solo)
   ============================================================ */
.mix-strip { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.knob { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #3a3346, #16111f); border: 2px solid var(--line); position: relative; cursor: ns-resize; touch-action: none; }
.knob:hover { border-color: var(--yellow); }
.knob-ind { position: absolute; left: 50%; top: 3px; width: 2px; height: 12px; background: var(--yellow); transform-origin: 50% 14px; margin-left: -1px; }
.knob-lbl { font-family: var(--cond); font-size: 8px; letter-spacing: 1px; color: var(--muted); }
.knob-val { font-family: var(--mono); font-size: 9px; color: var(--text); }
.mix-ms { display: flex; flex-direction: column; gap: 4px; }
.ms-btn { width: 28px; height: 17px; font-size: 10px; font-family: var(--mono); background: #000; border: 1px solid var(--line); color: var(--muted); border-radius: 2px; cursor: pointer; line-height: 1; }
.ms-btn.on-m { background: var(--pink); color: #000; border-color: var(--pink); }
.ms-btn.on-s { background: var(--yellow); color: #000; border-color: var(--yellow); }

/* Band-manager fix — discoverable band tabs (replaces dropdown) */
.band-tabs { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.band-tab { flex: 0 0 auto; background: var(--bg); color: var(--muted); border: 2px solid var(--line); border-radius: 2px; padding: 7px 12px; font-family: var(--cond); font-size: 13px; letter-spacing: 0.5px; cursor: pointer; white-space: nowrap; }
.band-tab.active { border-color: var(--pink); color: var(--text); background: #2a1620; }
.band-tab.band-new { color: var(--green); border-style: dashed; }

/* ============================================================
   Band Management 3.0 — two-view app, picker, roster manager
   ============================================================ */
.app-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.app-tab { flex: 1; background: var(--bg); color: var(--muted); border: 2px solid var(--line); border-radius: 2px; padding: 8px; font-family: var(--cond); font-size: 13px; letter-spacing: 1px; cursor: pointer; }
.app-tab.active { border-color: var(--pink); color: var(--text); background: #2a1620; }

.band-picker { margin-bottom: 10px; }
.picker-head { width: 100%; display: flex; justify-content: space-between; align-items: center; background: var(--bg); color: var(--text); border: 2px solid var(--line); border-radius: 2px; padding: 9px 12px; font-family: var(--body); cursor: pointer; }
.picker-head strong { color: var(--pink); }
.picker-panel { border: 2px solid var(--line); border-top: none; border-radius: 0 0 2px 2px; padding: 8px; background: #120d1a; }
.picker-list { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.pick-row { display: flex; justify-content: space-between; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; padding: 7px 10px; color: var(--text); cursor: pointer; font-family: var(--body); }
.pick-row.active { border-color: var(--pink); }
.pick-row small { color: var(--muted); font-family: var(--mono); font-size: 10px; }

.band-idstats { display: flex; gap: 8px; margin: 8px 0; }
.band-idstats > div { flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; padding: 6px; text-align: center; }
.band-idstats span { display: block; font-family: var(--cond); font-size: 9px; letter-spacing: 1px; color: var(--muted); }
.band-idstats strong { font-family: var(--mono); font-size: 15px; color: var(--text); }
.ovr { display: inline-block; min-width: 22px; text-align: center; font-family: var(--mono); font-size: 10px; background: #2a1620; border: 1px solid var(--pink); color: var(--pink); border-radius: 2px; padding: 0 3px; margin-left: 2px; }

.m-list { display: flex; flex-direction: column; gap: 6px; }
.m-row { background: var(--bg); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.m-row.open { border-color: var(--blue); }
.m-row-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: none; border: none; cursor: pointer; text-align: left; }
.m-badge { flex: none; font-family: var(--cond); font-size: 9px; letter-spacing: 0.5px; border: 1px solid; border-radius: 2px; padding: 2px 5px; }
.m-actions { padding: 8px; border-top: 1px solid var(--line); background: #120d1a; }
.m-statline { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-bottom: 8px; }
.m-controls { display: flex; gap: 8px; margin-bottom: 8px; }
.m-controls label { flex: 1; font-family: var(--cond); font-size: 10px; letter-spacing: 0.5px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.m-controls select { background: #000; color: var(--text); border: 1px solid var(--line); border-radius: 2px; padding: 5px; font-family: var(--body); }
.m-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.btn.danger { color: var(--pink); border-color: var(--pink); }

/* ============================================================
   STEP 12 — Piano roll editor
   ============================================================ */
.pr-compose { width: 100%; margin-bottom: 10px; }
.pr-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pr-mini { padding: 6px 10px; font-size: 12px; }
.pr-name { flex: 1; font-family: var(--display); font-size: 18px; color: var(--pink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-tools { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pr-tlabel { font-family: var(--cond); font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.pr-brush { width: 28px; height: 24px; background: #000; color: var(--muted); border: 1px solid var(--line); border-radius: 2px; font-family: var(--mono); cursor: pointer; }
.pr-brush.active { border-color: var(--yellow); color: var(--yellow); }
.pr-scroll { overflow: auto; max-height: 48vh; border: 1px solid var(--line); border-radius: 2px; -webkit-overflow-scrolling: touch; }
.pr-inner { display: flex; width: max-content; }
.pr-gutter { position: sticky; left: 0; z-index: 3; background: #0a0710; border-right: 1px solid var(--line); }
.pr-rl { height: 20px; padding: 0 6px; display: flex; align-items: center; justify-content: flex-end; font-family: var(--mono); font-size: 9px; color: var(--muted); box-sizing: border-box; }
.pr-rl.blk { background: #070509; color: #5b5566; }
.pr-grid { position: relative; background-color: #0c0810; background-repeat: repeat;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px); }
.pr-rowbg { position: absolute; left: 0; width: 100%; background: rgba(255,255,255,0.03); pointer-events: none; }
.pr-note { position: absolute; background: var(--pink); border: 1px solid rgba(255,255,255,0.25); border-radius: 2px; box-shadow: 0 0 4px rgba(255,59,107,0.5); pointer-events: none; }
.pr-playhead { position: absolute; top: 0; width: 2px; background: var(--yellow); pointer-events: none; z-index: 2; }
.pr-foot { margin-top: 6px; }

/* ============================================================
   STEP 14 — Streamr (releases) app
   ============================================================ */
.rel-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.rel-total span { display: block; font-family: var(--cond); font-size: 9px; letter-spacing: 1px; color: var(--muted); }
.rel-total strong { font-family: var(--mono); font-size: 20px; color: var(--green); }
.rel-list { display: flex; flex-direction: column; gap: 8px; }
.rel-row { display: flex; gap: 10px; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; padding: 8px; }
.rel-cover { width: 48px; height: 48px; flex: none; border-radius: 2px; object-fit: cover; border: 1px solid var(--line); }
.rel-cover.ph { display: flex; align-items: center; justify-content: center; color: var(--orange, #ff8a3d); background: #1a121f; font-size: 20px; }
.rel-cover.lg { width: 96px; height: 96px; font-size: 36px; }
.rel-info { flex: 1; min-width: 0; }
.rel-info strong { display: block; }
.rel-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--text); }
.rel-trend { color: var(--green); }
.rel-field { display: flex; flex-direction: column; gap: 4px; font-family: var(--cond); font-size: 10px; letter-spacing: 1px; color: var(--muted); margin-bottom: 10px; }
.rel-field select, .rel-field input { background: #000; color: var(--text); border: 1px solid var(--line); border-radius: 2px; padding: 8px; font-family: var(--body); }
.rel-cover-pick { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rel-coverbtn { cursor: pointer; }
.rel-type-line { font-family: var(--cond); font-size: 11px; letter-spacing: 1px; color: var(--yellow); margin-bottom: 6px; }
.rel-songlist { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; max-height: 30vh; overflow-y: auto; }
.rel-song { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; padding: 7px 9px; cursor: pointer; }
.rel-song.on { border-color: var(--green); }
.rel-song span:nth-child(2) { flex: 1; }
.rel-q { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.rel-release { width: 100%; }
.rel-release.dim { opacity: 0.4; }

/* ---- Step 15: Rocktroit venue picker / panel ---- */
.cal-slot-btn[disabled] { white-space: normal; text-align: left; line-height: 1.35; font-size: 11px; cursor: default; max-width: 100%; }
.cal-day-h small { color: var(--muted); font-weight: normal; text-transform: none; letter-spacing: 0; }

/* released tracks can't be re-released (Step 15.1) */
.rel-song.released { opacity: .5; cursor: default; }
.rel-song.released .rel-q { color: var(--muted); font-style: italic; }

/* ---- Step 16.1: Files / library browser ---- */
.lib-search { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text); border: 2px solid var(--line); border-radius: 3px; padding: 9px 10px; font-family: var(--mono); font-size: 13px; margin-bottom: 8px; }
.lib-search:focus { outline: none; border-color: var(--purple, #b388ff); }
.lib-controls { display: flex; gap: 6px; margin-bottom: 8px; }
.lib-sel { flex: 1; min-width: 0; background: var(--bg); color: var(--text); border: 2px solid var(--line); border-radius: 3px; padding: 7px 6px; font-family: var(--cond); font-size: 12px; }
.lib-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 6px; -webkit-overflow-scrolling: touch; }
.lib-chip { flex: 0 0 auto; background: var(--bg); color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 6px 11px; font-family: var(--cond); font-size: 12px; letter-spacing: .5px; cursor: pointer; white-space: nowrap; }
.lib-chip.on { border-color: var(--purple, #b388ff); color: var(--text); background: #241a33; }
.lib-count { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.lib-list { display: flex; flex-direction: column; gap: 6px; }
.lib-row { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 9px 10px; }
.lib-info { flex: 1; min-width: 0; }
.lib-name { font-family: var(--cond); font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.lib-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.lib-badge { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; padding: 1px 5px; border-radius: 2px; border: 1px solid; }
.lib-badge.song { color: var(--green); border-color: var(--green); }
.lib-badge.loop { color: var(--blue); border-color: var(--blue); }
.lib-rel { font-family: var(--mono); font-size: 9px; color: var(--pink); }
.lib-actions { flex: 0 0 auto; }
.lib-act { background: var(--bg); color: var(--text); border: 2px solid var(--line); border-radius: 3px; padding: 7px 12px; font-family: var(--cond); font-size: 13px; cursor: pointer; min-width: 44px; }
.lib-act.playing { border-color: var(--green); color: var(--green); }

/* ---- Step 16.2: library management (detail panel, folders, save dialog) ---- */
.lib-row.open { border-color: var(--purple, #b388ff); }
.lib-info[data-expand] { cursor: pointer; }
.lib-chip.manage { color: var(--muted); border-style: dashed; }
.lib-detail { background: #1a1422; border: 1px solid var(--line); border-top: none; border-radius: 0 0 3px 3px; padding: 9px 10px; margin: -6px 0 0; }
.lib-fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.lib-fchip { background: var(--bg); color: var(--muted); border: 1px solid var(--line); border-radius: 16px; padding: 5px 10px; font-family: var(--cond); font-size: 11px; cursor: pointer; }
.lib-fchip.on { border-color: var(--purple, #b388ff); color: var(--text); background: #241a33; }
.lib-fchip.new { border-style: dashed; }
.lib-detail-acts { display: flex; gap: 6px; }
.lib-mini { flex: 1; background: var(--bg); color: var(--text); border: 2px solid var(--line); border-radius: 3px; padding: 7px 8px; font-family: var(--cond); font-size: 12px; letter-spacing: .5px; cursor: pointer; }
.lib-mini.danger { color: var(--pink); border-color: #5a2233; }
.sv-field { display: flex; flex-direction: column; gap: 4px; font-family: var(--cond); font-size: 12px; color: var(--muted); margin-bottom: 9px; }
.sv-field input, .sv-field select { background: var(--bg); color: var(--text); border: 2px solid var(--line); border-radius: 3px; padding: 8px; font-family: var(--mono); font-size: 13px; }
.sv-flabel { font-family: var(--cond); font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.sv-folders { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sv-fchip { display: flex; align-items: center; gap: 5px; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 5px 10px; font-family: var(--cond); font-size: 11px; color: var(--text); cursor: pointer; }
.sv-go { width: 100%; margin-top: 4px; }
.lib-open-hint { font-family: var(--mono); font-size: 9px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 1px 6px; }

/* ---- Step 17.0: merch (BAND app) ---- */
.merch-row { background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 10px; margin-bottom: 8px; }
.merch-head { display: flex; justify-content: space-between; align-items: baseline; }
.merch-name { font-family: var(--cond); font-size: 15px; color: var(--text); }
.merch-stock { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.merch-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 3px 0 8px; }
.merch-ctrls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.merch-price { display: flex; align-items: center; gap: 8px; border: 2px solid var(--line); border-radius: 3px; padding: 3px 6px; }
.merch-price span { font-family: var(--mono); font-size: 14px; color: var(--text); min-width: 36px; text-align: center; }
.merch-price button { width: 28px; height: 28px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 3px; font-size: 16px; cursor: pointer; }
.merch-order { flex: 1; min-width: 90px; background: var(--bg); color: var(--text); border: 2px solid var(--line); border-radius: 3px; padding: 8px 6px; font-family: var(--cond); font-size: 12px; cursor: pointer; }

/* ---- Step 17.1: contracts, payroll, negotiate dialog ---- */
.band-fin { display: flex; gap: 6px; margin: 8px 0; }
.band-fin > div { flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 7px; text-align: center; }
.band-fin span { display: block; font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .5px; }
.band-fin strong { font-family: var(--display); font-size: 17px; color: var(--text); }
.band-fin strong.good { color: var(--green); }
.band-fin strong.bad { color: var(--pink); }
.bm-pay { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 3px 0; }
.bm-contract { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.bm-owed { font-family: var(--mono); font-size: 10px; color: var(--pink); }
.bm-negotiate { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: 3px 8px; font-family: var(--cond); font-size: 11px; cursor: pointer; }
#band-payday { width: 100%; }
.modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; z-index: 9000; padding: 18px; }
.neg-card { background: var(--panel, #181221); border: 2px solid var(--purple, #b388ff); border-radius: 5px; padding: 16px; width: 100%; max-width: 360px; font-family: var(--cond); }
.neg-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-size: 16px; color: var(--text); letter-spacing: 1px; margin-bottom: 8px; }
.neg-head button { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.neg-ask { font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.neg-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.neg-label { flex: 0 0 88px; font-size: 13px; color: var(--text); }
.neg-type { flex: 1; background: var(--bg); color: var(--text); border: 2px solid var(--line); border-radius: 3px; padding: 6px; font-family: var(--cond); font-size: 12px; }
.neg-val { width: 64px; background: var(--bg); color: var(--text); border: 2px solid var(--line); border-radius: 3px; padding: 6px; font-family: var(--mono); font-size: 13px; }
.neg-react { min-height: 20px; font-family: var(--mono); font-size: 12px; margin: 6px 0 12px; }
.neg-react .good { color: var(--green); }
.neg-react .warn-c { color: var(--yellow); }
.neg-react .bad { color: var(--pink); }
.neg-acts .btn { width: 100%; }

/* ---- Step 17.1: show-report band cut breakdown ---- */
.show-cuts { background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 10px; margin: 10px 0; }
.show-cuts-h { font-family: var(--mono); font-size: 10px; letter-spacing: .5px; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.show-cuts > div:not(.show-cuts-h) { display: flex; justify-content: space-between; font-family: var(--cond); font-size: 13px; color: var(--text); padding: 2px 0; }
.show-cuts-total { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 5px !important; }
.show-cuts-total strong.bad { color: var(--pink); }

/* Step 18.0: settings note */
.set-note { font-family: var(--mono); font-size: 10px; color: var(--muted); line-height: 1.5; margin: 6px 2px 0; }

/* Step 18.1: burn-to-tape buttons */
.lib-burn, .rel-burn { width: 100%; margin-top: 6px; border-color: var(--yellow); color: var(--yellow); }
.rel-burn { width: auto; margin-top: 4px; font-size: 11px; padding: 3px 8px; }

/* ---- Step 18.2: Calendar v2 (tappable multi-band slots) ---- */
.cal-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; font: inherit; color: var(--text); position: relative; }
.cal-cell.sel { outline: 2px solid var(--yellow); outline-offset: -2px; }
.cal-cell-n { font-family: var(--display); font-size: 13px; line-height: 1; background: var(--pink); color: #1a1018; border-radius: 8px; padding: 1px 6px; }
.cal-detail { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 10px; margin-top: 10px; }
.cal-detail-h { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-size: 14px; letter-spacing: 1px; color: var(--text); margin-bottom: 8px; }
.cal-d-x { background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.cal-d-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid var(--line); }
.cal-d-ic { font-size: 17px; flex: 0 0 22px; text-align: center; }
.cal-d-info { flex: 1; display: flex; flex-direction: column; }
.cal-d-info strong { font-family: var(--cond); font-size: 14px; color: var(--text); }
.cal-d-info small { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.cal-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; border: 1px solid; }
.cal-tag.mine { color: var(--green); border-color: var(--green); }
.cal-tag.mgr { color: var(--muted); border-color: var(--line); }
.cal-conflict { font-family: var(--cond); font-size: 12px; color: var(--pink); margin-top: 8px; }
.cal-where { font-family: var(--cond); font-size: 12px; color: var(--green); margin-top: 8px; }
.cal-where.muted { color: var(--muted); }

/* ---- Step 18.3: delegated auto-resolve report ---- */
.ar-card { max-width: 380px; }
.ar-row { border-top: 1px solid var(--line); padding: 8px 0; }
.ar-h { display: flex; justify-content: space-between; align-items: baseline; }
.ar-h strong { font-family: var(--cond); font-size: 15px; color: var(--text); }
.ar-h small { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.ar-stats { display: flex; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--text); margin-top: 3px; }
.ar-stats .good { color: var(--green); }
.ar-owed { font-family: var(--mono); font-size: 10px; color: var(--pink); margin-top: 3px; }

/* ---- Step 18.4: Maps app ---- */
.mp-next { border-radius: 4px; padding: 9px 11px; margin: 8px 0; font-family: var(--cond); font-size: 13px; color: var(--text); border-left: 3px solid var(--muted); background: var(--bg); }
.mp-next.u-now { border-left-color: var(--pink); }
.mp-next.u-soon { border-left-color: var(--yellow); }
.mp-next.u-later { border-left-color: #4fc3f7; }
.mp-legend { font-family: var(--mono); font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 5px; margin: 4px 0 10px; }
.mp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.mp-dot.u-now { background: var(--pink); }
.mp-dot.u-soon { background: var(--yellow); }
.mp-dot.u-later { background: #4fc3f7; }
.mp-town { border: 1px solid var(--line); border-radius: 4px; padding: 9px; margin-bottom: 10px; }
.mp-town.here { border-color: var(--green); }
.mp-town-h { font-family: var(--display); font-size: 14px; letter-spacing: 1px; color: var(--text); margin-bottom: 7px; display: flex; align-items: center; gap: 8px; }
.mp-here { font-family: var(--mono); font-size: 9px; letter-spacing: .5px; color: var(--green); border: 1px solid var(--green); border-radius: 3px; padding: 1px 5px; }
.mp-venue { padding: 6px 0; border-top: 1px solid var(--line); }
.mp-venue:first-of-type { border-top: none; }
.mp-venue-h { display: flex; justify-content: space-between; align-items: center; font-family: var(--cond); font-size: 13px; color: var(--text); }
.mp-lock { font-family: var(--mono); font-size: 9px; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; }
.mp-evt { display: flex; align-items: center; gap: 7px; padding: 3px 0 3px 4px; font-family: var(--mono); font-size: 11px; color: var(--text); }
.mp-evt-band { flex: 1; font-family: var(--cond); font-size: 12px; }
.mp-evt-when { color: var(--muted); }
.mp-empty { color: var(--muted); font-style: italic; padding-left: 16px; }

/* ---- Properties app (Step 19.4) ---- */
.prop-sub { padding: 2px 14px 10px; color: #9aa3ad; font-size: 13px; }
.prop-list { display: flex; flex-direction: column; gap: 14px; padding: 0 12px 16px; }
.prop-card { background: #1c1826; border: 1px solid #2e2840; border-radius: 14px; overflow: hidden; }
.prop-photo { position: relative; height: 120px; display: flex; align-items: center; justify-content: center; }
.prop-photo img { width: 100%; height: 100%; object-fit: cover; }
.prop-photo.placeholder { flex-direction: column; gap: 4px; }
.prop-photo-glyph { font-size: 40px; color: rgba(255,255,255,.85); line-height: 1; }
.prop-photo-tag { color: rgba(255,255,255,.9); font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.prop-body { padding: 12px 14px 14px; }
.prop-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.prop-name { font-weight: 800; font-size: 16px; }
.prop-tag { color: #9aa3ad; font-size: 12px; }
.prop-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.prop-badge.owned { background: #1e3a26; color: #7bd88f; }
.prop-badge.rented { background: #1e2f3a; color: #6cc6ff; }
.prop-badge.avail { background: #2e2840; color: #b9a6ff; }
.prop-blurb { color: #c7ccd2; font-size: 13px; line-height: 1.45; margin: 8px 0; }
.prop-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.prop-chip { background: #262030; color: #b6bcc4; font-size: 11px; padding: 3px 8px; border-radius: 8px; }
.prop-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.prop-act { flex: 1 1 auto; min-width: 44%; }
.btn.ghost { background: transparent; border: 1px solid #3a3450; color: #c7ccd2; }

/* ---- Properties: city sections + locked (Step 19.4b) ---- */
.prop-city { margin-bottom: 6px; }
.prop-city-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 14px 10px; font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: #cdd3da; }
.prop-lock { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #8c93a0; }
.prop-city.is-locked .prop-city-head { color: #7c828c; }
.prop-card.locked { opacity: .55; filter: grayscale(.5); }
.prop-card.locked .prop-photo-glyph, .prop-card.locked .prop-photo-tag { opacity: .8; }
.prop-locked-note { font-size: 12px; color: #8c93a0; font-style: italic; padding-top: 2px; }

/* ---- Music store (Step 19.5a) ---- */
.store-cat { width: 100%; text-align: left; cursor: pointer; }
.store-chev { color: #8c93a0; font-size: 18px; }
.store-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.shop-back { display: inline-flex; align-items: center; gap: 4px; background: #262030; border: 1px solid #3a3450; color: #cdd3da; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; margin-bottom: 10px; cursor: pointer; }
.shop-back:active { background: #2e2840; }
.shop-btn.ghost { background: transparent; border: 1px solid #3a3450; color: #cdd3da; }

/* ---- Polish pass (Step 19.6) ---- */
/* Hide the floating message log whenever a menu/overlay is open (was bleeding through) */
body.modal-open #log,
body:has(#inventory.open) #log,
body:has(.modal-scrim) #log { display: none; }

/* Inventory: smaller slots so everything fits on mobile/landscape without cropping */
.inv-grid { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)) !important; }
.inv-modal { max-height: 88vh; }
.inv-body { max-height: 62vh; }

/* ---- Admin cheats + log history (Step 19.7) ---- */
.log-hist { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 6px; }
.log-hist-row { font-family: var(--mono); font-size: 11px; line-height: 1.3; color: var(--text);
  border-left: 3px solid var(--muted); padding: 3px 6px; }
.log-hist-row.log-good { border-left-color: var(--green); color: var(--green); }
.log-hist-row.log-warn, .log-hist-row.log-bad { border-left-color: var(--pink); color: var(--pink); }
.log-hist-row.log-info { border-left-color: var(--yellow); }
.adm-pw { width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 8px;
  background: var(--bg); border: 1px solid var(--line); color: var(--text); font-family: var(--mono); border-radius: 4px; }
.adm-panel { display: flex; flex-direction: column; gap: 8px; }
.adm-grp { border-top: 1px solid var(--line); padding-top: 6px; }
.adm-grp-label { font-family: var(--cond); font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.adm-btns { display: flex; flex-wrap: wrap; gap: 5px; }
.adm-cheat { flex: 0 0 auto; font-size: 12px; padding: 6px 9px; }

/* ---- Bank app (Step 20.1) ---- */
.bank-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.bank-tab { flex: 1; padding: 7px 4px; font-family: var(--cond); font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; font-size: 12px; background: var(--panel); border: 1px solid var(--line);
  color: var(--muted); border-radius: 4px; cursor: pointer; }
.bank-tab.on { color: #06120a; background: var(--green); border-color: var(--green); }
.bank-body { display: flex; flex-direction: column; gap: 8px; }
.bank-card { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.bank-card.big { padding: 16px; }
.bank-card-label { font-family: var(--cond); text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-size: 13px; }
.bank-card-amt { font-family: var(--mono); font-size: 26px; font-weight: 700; }
.bank-sect { font-family: var(--cond); text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-size: 11px; margin-top: 4px; }
.bank-row { display: flex; justify-content: space-between; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; font-size: 14px; }
.bank-row strong { font-family: var(--mono); }
.bank-mini { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.bank-mini > div { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 2px; }
.bank-mini strong { font-family: var(--mono); color: var(--text); }
.bank-pick { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.bank-back { background: none; border: none; color: var(--muted); font-family: var(--mono); font-size: 13px; cursor: pointer; padding: 2px 0; text-align: left; }
.bank-amt-row { display: flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; }
.bank-amt-pre { font-family: var(--mono); color: var(--muted); }
.bank-amt { flex: 1; background: none; border: none; color: var(--text); font-family: var(--mono); font-size: 16px; padding: 6px 2px; }
.bank-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bank-ledger { display: flex; flex-direction: column; gap: 5px; }
.bank-tx { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 7px 9px; }
.bank-tx-main { display: flex; justify-content: space-between; align-items: baseline; }
.bank-tx-note { font-size: 13px; color: var(--text); }
.bank-tx-amt { font-family: var(--mono); font-weight: 700; }
.bank-tx-sub { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 2px; text-transform: capitalize; }

.warn { color: var(--pink); }

/* ---- Bank 20.2: clickable rows + activity filters ---- */
.bank-row-btn { cursor: pointer; width: 100%; text-align: left; font: inherit; }
.bank-filters { display: flex; gap: 6px; }
.bank-filter { flex: 1; min-width: 0; padding: 7px 6px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font-family: var(--mono); font-size: 12px; border-radius: 4px; }
.bank-search { width: 100%; box-sizing: border-box; padding: 8px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font-family: var(--mono); font-size: 13px; border-radius: 4px; }

/* ---- Credits & Splits (Step 21.1) ---- */
.cr-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.cr-row { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 8px 9px; display: flex; flex-direction: column; gap: 6px; }
.cr-who { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cr-name { font-weight: 700; }
.cr-aff { font-size: 11px; color: var(--muted); font-family: var(--mono); white-space: nowrap; }
.cr-controls { display: flex; align-items: center; gap: 6px; }
.cr-role { flex: 1; min-width: 0; padding: 6px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font-family: var(--mono); font-size: 12px; border-radius: 4px; }
.cr-pct { display: flex; align-items: center; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; }
.cr-pctin { width: 44px; background: none; border: none; color: var(--text); font-family: var(--mono); font-size: 14px; text-align: right; padding: 4px 0; }
.cr-pct-sym { color: var(--muted); font-family: var(--mono); }
.cr-rm { background: none; border: 1px solid var(--line); color: var(--muted); width: 30px; height: 30px; border-radius: 4px; cursor: pointer; flex: none; }
.cr-rm:hover { color: var(--pink); border-color: var(--pink); }
.cr-total { text-align: center; font-family: var(--mono); padding: 6px; border-radius: 4px; }
.cr-total.ok { color: var(--green); }
.cr-total.off { color: var(--yellow); }
.cr-add { width: 100%; }
.cr-picker-card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px; margin: 6px 0; }
.cr-cands { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; margin-top: 6px; }
.cr-cand { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 4px; cursor: pointer; width: 100%; text-align: left; }
.cr-cand:hover { border-color: var(--green); }
.rel-credits { font-size: 10px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.rel-cr-role { color: var(--green); }

/* ---- Payouts tab (Step 21.3) ---- */
.po-head { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.po-tot { display: flex; justify-content: space-between; align-items: baseline; }
.po-tot strong { font-family: var(--mono); font-size: 20px; }
.po-short { font-size: 11px; color: var(--yellow); }
.po-all { width: 100%; }
.po-bands { display: flex; flex-direction: column; gap: 10px; }
.po-band { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 9px; }
.po-band-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.po-band-name { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.po-band-sub { font-size: 11px; color: var(--muted); margin: 3px 0 6px; font-family: var(--mono); }
.po-mem { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-top: 1px solid var(--line); font-size: 14px; }
.po-mem-r { display: flex; align-items: center; gap: 8px; }
.po-mem-r .muted { font-family: var(--mono); }
.po-paybtn { background: var(--green); color: #06120a; border: none; border-radius: 4px; padding: 5px 10px; font-family: var(--cond); font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }

/* ---- Setlist booking revamp (Step 22.1) ---- */
.set-src { display: flex; gap: 4px; margin-bottom: 8px; }
.set-srcbtn { flex: 1; padding: 8px; font-family: var(--cond); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; font-size: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 4px; cursor: pointer; }
.set-srcbtn.on { color: #06120a; background: var(--green); border-color: var(--green); }
.set-tools { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.set-tool { flex: 1; min-width: 80px; padding: 7px 8px; font-size: 12px; font-family: var(--mono); background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 4px; cursor: pointer; }
.set-tool.on { border-color: var(--green); color: var(--green); }
.set-tool:disabled { opacity: .4; }
.set-saved-panel { background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 6px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.set-saved-row { display: flex; gap: 6px; }
.set-load { flex: 1; text-align: left; padding: 7px 9px; background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 4px; cursor: pointer; }
.set-del { width: 32px; background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 4px; cursor: pointer; }
.set-del:hover { color: var(--pink); border-color: var(--pink); }

/* ---- Setlist chooser modal (Step 22.1.1) ---- */
.set-modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
.set-modal { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; width: min(420px, 94vw); max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.set-modal-body { padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }

/* ---- Maps venue board + discovery (Step 23.1) ---- */
.mp-buzz { margin: 6px 0 10px; }
.mp-buzz-h { display: flex; justify-content: space-between; font-family: var(--cond); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.mp-buzz-h span { color: var(--green); }
.mp-buzz-bar { height: 7px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.mp-buzz-bar i { display: block; height: 100%; background: var(--green); }
.mp-blurb { font-size: 12px; color: var(--muted); margin: 3px 0 5px; line-height: 1.35; }
.mp-sched { font-family: var(--mono); font-size: 11px; color: var(--text); opacity: .8; margin: 0 0 6px; }
.mp-open { font-size: 11px; color: var(--green); font-family: var(--cond); text-transform: uppercase; letter-spacing: .5px; }
.mp-next-open { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.mp-lock-req { font-size: 12px; color: var(--pink); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; }
.mp-go { width: 100%; margin-top: 4px; padding: 8px; font-family: var(--cond); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; font-size: 12px; background: var(--green); color: #06120a; border: none; border-radius: 4px; cursor: pointer; }
.mp-venue.lead { opacity: .92; border-style: dashed; }
.mp-venue.lead .mp-go { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.mp-lead-tag { font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; text-transform: uppercase; letter-spacing: .5px; }

/* ---- People (contacts) app (Step 23.1) ---- */
.ct-note { margin: 2px 0 10px; font-size: 12px; line-height: 1.4; }
.ct-list { display: flex; flex-direction: column; gap: 6px; }
.ct-row { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.ct-av { width: 34px; height: 34px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--cond); font-weight: 700; color: var(--accent, #b388ff); flex-shrink: 0; }
.ct-info { flex: 1; display: flex; flex-direction: column; }
.ct-info small { color: var(--muted); font-size: 11px; }
.ct-met { font-family: var(--mono); font-size: 10px; color: var(--muted); }

/* ---- NPC dialogue modal (Step 24.5) ---- */
#dialogue { position: absolute; inset: 0; z-index: 49; display: grid; place-items: end center; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .2s; padding: 0 12px 18px; }
#dialogue.open { opacity: 1; }
#dialogue.hidden { display: none; }
.dlg-modal { width: min(420px, 94vw); background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--purple, #b388ff); border-radius: 12px; padding: 12px 14px 14px; box-shadow: 0 -8px 30px rgba(0,0,0,.5); }
.dlg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dlg-who { font-family: var(--display); font-size: 22px; color: var(--purple, #b388ff); flex: 1; }
.dlg-rap { font-size: 12px; color: var(--pink); letter-spacing: 1px; }
.dlg-x { background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.dlg-text { font-size: 14px; line-height: 1.45; margin: 4px 0 12px; }
.dlg-choices { display: flex; flex-direction: column; gap: 6px; }
.dlg-choice { text-align: left; padding: 9px 11px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font-size: 13px; cursor: pointer; }
.dlg-choice:hover { border-color: var(--purple, #b388ff); }

/* ---- People app: rapport + perks (Step 25.1) ---- */
.ct-rap { font-size: 12px; color: var(--pink); letter-spacing: 1px; white-space: nowrap; }
.ct-perk { display: block; font-size: 10px; margin-top: 2px; }
.ct-perk.on { color: var(--green); }
.ct-perk.off { color: var(--muted); }

/* ===== Streamr FAN side (Step 27.1) ===== */
.strm-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.strm-tab { flex: 1; padding: 8px 0; font-family: var(--cond, var(--mono)); font-size: 13px; letter-spacing: 1px;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line); border-radius: 2px; cursor: pointer; }
.strm-tab.on { color: #0b0b0f; background: var(--orange, #ff8a3d); border-color: var(--orange, #ff8a3d); font-weight: 700; }
.strm-filters { display: flex; gap: 6px; margin-bottom: 10px; }
.strm-filt { padding: 5px 12px; font-size: 12px; background: var(--bg); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.strm-filt.on { color: var(--text); border-color: var(--orange, #ff8a3d); }
.strm-rank { width: 18px; flex: none; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.strm-link { cursor: pointer; }
.strm-link:hover { color: var(--pink); text-decoration: underline; }
.strm-play { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--orange, #ff8a3d);
  background: #1a121f; color: var(--orange, #ff8a3d); font-size: 13px; cursor: pointer; }
.strm-play:active { transform: scale(0.93); }
.strm-play.dim { opacity: 0.35; border-color: var(--line); color: var(--muted); cursor: default; }
.strm-row { cursor: pointer; }
.strm-trk { cursor: default; }
.strm-artist-head, .strm-rel-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.strm-avatar { width: 56px; height: 56px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 26px; color: #0b0b0f; background: var(--orange, #ff8a3d); }
.strm-np { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 10px;
  background: #160f1d; border: 1px solid var(--orange, #ff8a3d); border-radius: 4px; }
.strm-np-eq { color: var(--orange, #ff8a3d); font-size: 16px; animation: strmpulse 1s infinite alternate; }
@keyframes strmpulse { from { opacity: 0.4; } to { opacity: 1; } }
.strm-np-info { flex: 1; min-width: 0; }
.strm-np-info strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strm-np-info small { color: var(--muted); }
.strm-np-stop { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); cursor: pointer; }

/* ===== Streamr v2 (Step 27.4): search, band-switcher, queue ===== */
.strm-search { width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 8px 12px; font-size: 13px;
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 999px; }
.strm-search::placeholder { color: var(--muted); }
.strm-bandpills { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.strm-bandpill { padding: 5px 12px; font-size: 12px; background: var(--bg); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.strm-bandpill.on { color: #0b0b0f; background: var(--orange, #ff8a3d); border-color: var(--orange, #ff8a3d); font-weight: 700; }
.strm-playall-btn { color: var(--orange, #ff8a3d) !important; border-color: var(--orange, #ff8a3d) !important; }
.strm-np-skip { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); cursor: pointer; }

/* ===== Performance Arc (Step 28): set planner + outcome tiers ===== */
.set-planner { margin: 8px 0; padding: 10px; background: var(--panel, #16161c); border: 1px solid var(--line); border-radius: 10px; }
.set-planner-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.set-pips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.set-pip { min-width: 22px; height: 22px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 11px; font-weight: 700; color: #0b0b0f; }
.pp-strong { background: #57c97a; }
.pp-sloppy { background: #e6b54a; }
.pp-risk { background: #f08a3c; color: #1a0f04; }
.pp-collapse { background: #e25555; color: #fff; }
.set-warn { font-size: 12px; padding: 6px 8px; border-radius: 7px; line-height: 1.35; }
.set-warn.ok { background: rgba(87,201,122,.14); color: #9fe3b4; }
.set-warn.warn { background: rgba(240,138,60,.14); color: #f3b483; }
.set-warn.bad { background: rgba(226,85,85,.16); color: #f0a6a6; }
.tier-badge { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.tier-legendary { background: linear-gradient(90deg,#ffd86b,#ff8a3d); color: #2a1500; }
.tier-great { background: #57c97a; color: #06210f; }
.tier-solid { background: #4a90d9; color: #04162a; }
.tier-sloppy { background: #e6b54a; color: #2a1f04; }
.tier-disaster { background: #e25555; color: #fff; }
.tier-collapse { background: #7a2b2b; color: #ffd5d5; }

/* ===== Progression spine (Step 29): band standing + locked regions ===== */
.band-standing { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 2px 0 8px; padding: 6px 10px; background: var(--panel, #16161c); border: 1px solid var(--line); border-radius: 8px; }
.band-tier { font-weight: 800; color: var(--orange, #ff8a3d); font-size: 13px; letter-spacing: .02em; }
.band-standing small { color: var(--muted); font-size: 11px; text-align: right; }
.mp-coming { opacity: .9; }
.mp-lockreg { display: flex; justify-content: space-between; gap: 8px; padding: 5px 2px; font-size: 12px; border-top: 1px solid var(--line); }
.mp-lockreg strong { color: var(--text); }
.mp-lockreg span { color: var(--muted); }
.mp-lockreg.sub strong { color: var(--muted); font-weight: 600; }

/* ===== Genre system (Step 30): band genre dropdowns ===== */
.band-genre-sel { display: flex; gap: 8px; margin: 0 0 8px; }
.band-gsel { flex: 1; padding: 7px 10px; font-size: 13px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; }
.band-gsel:disabled { opacity: .5; }

/* ===== Multi-band bills (Step 32): venue lineup line ===== */
.mp-bill { font-size: 11px; color: var(--muted); margin: 3px 0 5px; line-height: 1.35; }
.mp-bill-h { color: var(--text); font-weight: 600; }
.mp-bill-open { color: var(--green, #57c97a); }
.mp-bill-full { color: var(--muted); }

/* ===== Bill-aware booking scheduler (Step 32 step 2) ===== */
.sched-bands { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.sched-band-pill { font-size: 12px; padding: 5px 11px; border-radius: 14px; border: 1px solid var(--line, #333); background: transparent; color: var(--text); }
.sched-band-pill.on { background: var(--accent, #c0392b); color: #fff; border-color: var(--accent, #c0392b); }
.sched-night { border: 1px solid var(--line, #333); border-radius: 10px; padding: 9px 11px; margin: 8px 0; }
.sched-night-h { font-weight: 700; margin-bottom: 3px; }
.sched-bill { font-size: 12px; color: var(--muted); line-height: 1.35; }
.sched-meta { font-size: 11px; margin: 4px 0 7px; }
.sched-proj { font-style: italic; }
.sched-proj.head { color: var(--green, #57c97a); }
.sched-proj.open { color: var(--muted); }
.sched-bands-lbl { font-size: 11px; color: var(--muted); margin-right: 4px; }

/* ===== Travel picker (Step 35: Maps & Cities) ===== */
.trv-card { max-width: 380px; }
.trv-region { margin: 10px 0; }
.trv-region-h { font-weight: 700; font-size: 13px; margin-bottom: 6px; opacity: 0.92; }
.trv-cost { font-size: 11px; color: var(--green, #57c97a); font-weight: 600; }
.trv-dests { display: flex; flex-wrap: wrap; gap: 8px; }
.trv-dest { flex: 1 1 auto; }

/* Properties app: Vehicles tab + ownership (Step 43.1) */
.prop-tabs{display:flex;gap:6px;margin:10px 0 4px;}
.prop-tab{flex:1;padding:9px 8px;border:1px solid #3a3346;background:transparent;color:inherit;border-radius:9px;font:inherit;font-weight:600;cursor:pointer;opacity:.55;}
.prop-tab.on{opacity:1;background:rgba(201,162,39,.16);border-color:#c9a227;}
.prop-assign{font-size:12px;opacity:.9;margin:1px 0 7px;}
.prop-assign strong{color:#e8c34a;}

/* Touring Phase 1: booking clusters (Your Circuit vs On the Road) */
.mp-cluster{margin:10px 0 4px;}
.mp-cluster-h{font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;opacity:.95;padding:6px 2px;border-bottom:1px solid #3a3346;margin-bottom:6px;}
.mp-cluster.road .mp-cluster-h{color:#c9a227;opacity:.85;}

/* ---- Step 47: Drive menu (HIT THE ROAD) ---- */
.drive-row{border:2px solid #3a3346;border-radius:5px;padding:8px 10px;margin:7px 0;cursor:pointer;background:rgba(255,255,255,.02);transition:border-color .12s,background .12s;}
.drive-row:hover{border-color:#6a6080;}
.drive-row, .drive-row *{cursor:pointer;}
.drive-row.sel{border-color:#8a7fb0;background:rgba(138,127,176,.10);}
.drive-row.mine{border-left:5px solid #4caf72;}
.drive-row.mgr{border-left:5px solid #6a6478;}
.drive-row-h{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.drive-row-h strong{font-size:14px;}
.drive-row-sub{font-size:12px;opacity:.82;margin-top:2px;}
.drive-dist{font-weight:700;opacity:.95;}
.drive-tag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:10px;white-space:nowrap;}
.drive-tag.mine{background:#1f5134;color:#9fe9bc;border:1px solid #4caf72;}
.drive-tag.mgr{background:#2c2836;color:#b9b2c8;border:1px solid #6a6478;}
.drive-exp{margin-top:9px;padding-top:8px;border-top:1px dashed #3a3346;}
.drive-warn{font-size:12px;line-height:1.5;color:#ffd07a;background:rgba(255,160,40,.10);border:1px solid #7a5a20;border-radius:4px;padding:7px 9px;margin-bottom:8px;}
.drive-ok{font-size:12px;color:#9fe9bc;opacity:.9;margin-bottom:8px;}
.drive-modes{display:flex;flex-direction:column;gap:7px;}
.drive-modes .cal-slot-btn{width:100%;text-align:left;}

/* ---- Step 51: Tour Planner (route board) ---- */
.tp-link{background:#2c2838;border:1px solid #6a6080;color:#cdbff0;font-size:11px;font-weight:700;padding:4px 9px;border-radius:12px;cursor:pointer;margin-left:auto;}
.tp-node{border:2px solid #3a3346;border-radius:6px;padding:9px 11px;margin:5px 0;}
.tp-home{background:rgba(120,150,255,.08);border-color:#46506e;font-size:14px;}
.tp-anchor{background:rgba(255,255,255,.02);}
.tp-anchor.mine{border-left:5px solid #4caf72;}
.tp-anchor.mgr{border-left:5px solid #6a6478;}
.tp-anchor small{opacity:.82;}
.tp-leg{font-size:12px;opacity:.65;text-align:center;margin:1px 0;letter-spacing:.03em;}
.tp-gap{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;background:rgba(255,200,80,.06);border:1px dashed #7a6a3a;border-radius:6px;padding:7px 10px;margin:5px 0;}
.tp-fill{font-size:11px;font-weight:700;padding:5px 10px;border-radius:12px;border:1px solid #7a6a3a;background:#2c2820;color:#ffd07a;cursor:pointer;white-space:nowrap;}
.tp-fill.on{background:#1f5134;border-color:#4caf72;color:#9fe9bc;}
.tp-tag{font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:10px;white-space:nowrap;}
.tp-tag.mine{background:#1f5134;color:#9fe9bc;border:1px solid #4caf72;}
.tp-tag.mgr{background:#2c2836;color:#b9b2c8;border:1px solid #6a6478;}
.tp-foot{margin-top:10px;padding-top:9px;border-top:2px solid #3a3346;font-weight:700;font-size:13px;text-align:center;}

/* ---- Step 52: Tour Planner anchor booking + Band-app redirect ---- */
.tp-add-h{margin:14px 0 6px;font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;opacity:.9;border-top:2px solid #3a3346;padding-top:11px;}
.tp-city{margin:7px 0;}
.tp-city-h{font-size:12px;font-weight:700;opacity:.85;text-transform:capitalize;margin-bottom:4px;}
.tp-venue{display:inline-block;margin:3px 4px 3px 0;padding:6px 11px;border-radius:14px;border:1px solid #6a6080;background:#2c2838;color:#e8e0f4;font-size:12px;font-weight:600;cursor:pointer;}
.tp-venue:hover{border-color:#8a7fb0;background:rgba(138,127,176,.14);}
.tp-redirect{margin-top:10px;border-top:1px dashed #3a3346;padding-top:9px;opacity:.92;}

/* ---- Step 53: roadside nowhere-town pickup gigs ---- */
.rs-gig{margin:8px 0;padding:9px 11px;border-radius:10px;background:#241f30;border:1px solid #3a3346;}
.rs-gig-h{font-size:13px;}
.rs-flavor{font-size:11px;opacity:.72;font-style:italic;margin:3px 0 5px;}
.rs-take{font-size:12px;font-weight:700;color:#8fe388;}

/* ---- Step 54: locked anchor chips + per-band tour ---- */
.tp-venue.locked{border-color:#5a4a4a;background:#241c1c;color:#b89a9a;opacity:.78;cursor:default;display:block;margin:4px 0;text-align:left;}
.tp-venue.locked small{display:block;opacity:.85;font-weight:500;margin-top:2px;}

/* ---- Step 55: tour cost recap rows ---- */
.rs-cost{margin:9px 0 4px;padding:8px 11px;border-radius:10px;background:#2a2620;border:1px solid #4a4030;}
.rs-cost-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:2px 0;}
.rs-cost-row span:last-child{font-weight:700;color:#e6b860;}

/* ---- Step 56: Vehicle Outfitter ---- */
.of-bar{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;padding:8px 11px;margin-bottom:8px;border-radius:9px;background:#241f30;border:1px solid #3a3346;}
.of-h{margin:13px 0 5px;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.85;border-top:1px solid #3a3346;padding-top:10px;}
.of-cat{margin:8px 0 3px;font-size:11px;font-weight:700;opacity:.7;text-transform:uppercase;letter-spacing:.03em;}
.of-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;font-size:13px;}
.of-buy,.of-rm{padding:5px 12px;border-radius:13px;border:1px solid #6a6080;background:#2c2838;color:#e8e0f4;font-size:12px;font-weight:600;cursor:pointer;}
.of-buy:hover:not([disabled]),.of-rm:hover{border-color:#8a7fb0;background:rgba(138,127,176,.15);}
.of-buy[disabled]{opacity:.4;cursor:default;}
.of-rm{border-color:#5a4a4a;color:#caa;}

/* ---- Step 57: cancel-show button ---- */
.tp-cancel{margin-top:6px;padding:4px 10px;border-radius:12px;border:1px solid #6a4a4a;background:#2a1c1c;color:#d9a9a9;font-size:11px;font-weight:600;cursor:pointer;}
.tp-cancel:hover{border-color:#a05a5a;background:rgba(160,90,90,.18);}