/* ===== AIDJ — Pioneer DJ inspired dark UI ===== */
:root {
  --bg0: #08090d;
  --bg1: #101219;
  --bg2: #171a24;
  --bg3: #1f2330;
  --line: #2a2f40;
  --txt: #d6dae6;
  --txt-dim: #7a8095;
  --a: #22d3ee;       /* Deck A cyan */
  --a-dim: #0e7490;
  --b: #fb923c;       /* Deck B orange */
  --b-dim: #9a3412;
  --green: #4ade80;
  --red: #f43f5e;
  --amber: #fbbf24;
  --violet: #a78bfa;
  font-size: 13px;
}
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-user-select: none; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: radial-gradient(1200px 500px at 50% -10%, #131829 0%, var(--bg0) 60%);
  color: var(--txt);
  font-family: "Segoe UI", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  min-height: 100vh;
  touch-action: pan-x pan-y;              /* ピンチズームを無効化しスクロールは許可 */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
/* ドラッグ操作するコントロールはページのパン/ズームを一切起こさない */
.jog, .knob, .pitch-fader, .ch-fader, #xfader,
.hotcue, .t-btn, .loop-btn, .wave-zoom, .wave-over { touch-action: none; }
#app { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; max-width: 1500px; margin: 0 auto; }
button { font-family: inherit; cursor: pointer; }
canvas { display: block; }

/* ===== Header ===== */
#topbar {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(180deg, var(--bg2), var(--bg1));
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 16px;
}
.logo { font-size: 26px; font-weight: 900; letter-spacing: 2px; color: #fff; }
.logo span { color: var(--violet); text-shadow: 0 0 12px var(--violet); }
.logo-sub { display: block; font-size: 8px; letter-spacing: 2.5px; color: var(--txt-dim); font-weight: 600; }
.top-status { display: flex; gap: 18px; }
.status-label { font-size: 9px; letter-spacing: 1.5px; color: var(--txt-dim); }
.status-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--green); }
#automix-status.on { color: var(--amber); text-shadow: 0 0 10px var(--amber); }
#master-vu { width: 180px; height: 26px; margin-left: auto; background: #05060a; border: 1px solid var(--line); border-radius: 4px; }
.top-actions { display: flex; gap: 8px; }
.top-btn {
  background: var(--bg3); color: var(--txt); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 14px; font-weight: 700; letter-spacing: 1px; font-size: 12px;
  transition: all .15s;
}
.top-btn:hover { border-color: var(--txt-dim); }
#btn-rec.on { color: #fff; background: var(--red); border-color: var(--red); box-shadow: 0 0 14px rgba(244,63,94,.6); }
.automix-btn.on { color: #000; background: var(--amber); border-color: var(--amber); box-shadow: 0 0 16px rgba(251,191,36,.55); }

/* ===== Console layout ===== */
#console { display: grid; grid-template-columns: 1fr 300px 1fr; gap: 10px; }

/* ===== Deck ===== */
.deck {
  background: linear-gradient(180deg, var(--bg2), var(--bg1));
  border: 1px solid var(--line); border-radius: 12px; padding: 10px; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
}
#deck-A { border-top: 2px solid var(--a-dim); }
#deck-B { border-top: 2px solid var(--b-dim); }
.deck-header { display: flex; align-items: center; gap: 10px; }
.deck-badge {
  width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center;
  font-weight: 900; font-size: 16px; color: #000; background: var(--a); box-shadow: 0 0 10px rgba(34,211,238,.5);
}
.deck-badge.b { background: var(--b); box-shadow: 0 0 10px rgba(251,146,60,.5); }
.track-info { flex: 1; min-width: 0; }
.track-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-sub { display: flex; gap: 6px; margin-top: 2px; }
.key-chip, .bpm-chip {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 4px;
  background: var(--bg3); border: 1px solid var(--line); color: var(--txt-dim);
  font-variant-numeric: tabular-nums;
}
.key-chip { color: var(--violet); }
.time-display { text-align: right; font-variant-numeric: tabular-nums; }
.time-elapsed { font-size: 17px; font-weight: 700; }
.time-remain { font-size: 11px; color: var(--txt-dim); }
/* canvas は表示サイズをCSSで固定する。未指定だと描画ループがバッキングストアを
   毎フレーム clientWidth×dpr で再確保し、高解像度(dpr>1)で無限に膨張してしまう。 */
.wave-zoom, .wave-over {
  width: 100%; display: block;
  background: #05060a; border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
}
.wave-zoom { height: 90px; }
.wave-over { height: 34px; }
.deck-body { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; }
.jog-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jog { width: 190px; height: 190px; cursor: grab; }
.jog:active { cursor: grabbing; }
.eff-bpm { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.eff-bpm small { font-size: 9px; color: var(--txt-dim); margin-left: 3px; }
.ctrl-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* Hot cues */
.hotcue-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.hotcue {
  height: 34px; border-radius: 5px; border: 1px solid var(--line); background: var(--bg3);
  color: var(--txt-dim); font-weight: 800; font-size: 11px; position: relative; transition: all .1s;
}
.hotcue.set { color: #000; box-shadow: 0 0 10px currentColor; }
.hotcue:active { transform: scale(.95); }

/* Loop / beat-jump */
.loop-row { display: flex; gap: 4px; flex-wrap: wrap; }
.loop-btn {
  flex: 1; min-width: 30px; height: 26px; border-radius: 4px; border: 1px solid var(--line);
  background: var(--bg3); color: var(--txt-dim); font-size: 10px; font-weight: 700;
}
.loop-btn.active { background: var(--green); color: #000; border-color: var(--green); box-shadow: 0 0 8px rgba(74,222,128,.5); }
.loop-btn:hover { border-color: var(--txt-dim); }

/* Transport */
.transport { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 6px; }
.t-btn {
  height: 44px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg3);
  color: var(--txt); font-weight: 800; font-size: 13px; letter-spacing: 1px; transition: all .12s;
}
.t-btn.play { font-size: 17px; }
.t-btn.play.on { background: var(--green); color: #000; border-color: var(--green); box-shadow: 0 0 16px rgba(74,222,128,.55); }
.t-btn.cue:active { background: var(--b); color: #000; }
.t-btn.sync.on { background: var(--a); color: #000; border-color: var(--a); box-shadow: 0 0 12px rgba(34,211,238,.5); }

/* Pitch */
.pitch-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pitch-label { font-size: 9px; letter-spacing: 1.5px; color: var(--txt-dim); }
.pitch-fader {
  writing-mode: vertical-lr; direction: rtl; width: 26px; height: 150px;
  appearance: none; background: transparent;
}
.pitch-fader::-webkit-slider-runnable-track {
  background: linear-gradient(180deg, var(--bg3), #05060a, var(--bg3));
  border: 1px solid var(--line); border-radius: 4px; width: 8px;
}
.pitch-fader::-webkit-slider-thumb {
  appearance: none; width: 24px; height: 14px; border-radius: 3px; margin-left: -8.5px;
  background: linear-gradient(180deg, #e5e7eb, #6b7280); border: 1px solid #111;
  box-shadow: 0 2px 5px rgba(0,0,0,.6);
}
.pitch-range-btn {
  background: var(--bg3); border: 1px solid var(--line); color: var(--txt-dim);
  border-radius: 4px; font-size: 10px; padding: 3px 6px; font-weight: 700;
}

/* ===== Mixer ===== */
#mixer {
  background: linear-gradient(180deg, #14161f, var(--bg1));
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.mixer-strips { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 4px; flex: 1; }
.strip { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.strip-center { border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0 4px; }

/* Knob */
.knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.knob {
  width: 38px; height: 38px; border-radius: 50%; position: relative; cursor: ns-resize;
  background: radial-gradient(circle at 35% 30%, #3f4658, #262b3a 45%, #14171f);
  border: 1px solid #000; box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.12);
}
.knob .pointer {
  position: absolute; left: 50%; top: 3px; width: 2.5px; height: 12px; border-radius: 2px;
  background: var(--txt); transform-origin: 50% 16px; margin-left: -1.25px;
}
.knob.accent .pointer { background: var(--a); box-shadow: 0 0 5px var(--a); }
.knob-label { font-size: 8.5px; letter-spacing: 1px; color: var(--txt-dim); font-weight: 700; }
.knob.small { width: 30px; height: 30px; }
.knob.small .pointer { height: 9px; transform-origin: 50% 12px; top: 3px; }

/* Channel fader + VU */
.fader-vu { display: flex; gap: 6px; align-items: center; }
.ch-fader { writing-mode: vertical-lr; direction: rtl; width: 24px; height: 110px; appearance: none; background: transparent; }
.ch-fader::-webkit-slider-runnable-track {
  background: #05060a; border: 1px solid var(--line); border-radius: 4px; width: 8px;
}
.ch-fader::-webkit-slider-thumb {
  appearance: none; width: 22px; height: 13px; border-radius: 3px; margin-left: -7.5px;
  background: linear-gradient(180deg, #e5e7eb, #6b7280); border: 1px solid #111;
}
.vu { width: 8px; height: 110px; background: #05060a; border: 1px solid var(--line); border-radius: 3px; }

/* Crossfader */
.xfader-row { display: flex; align-items: center; gap: 8px; padding: 2px 14px 4px; }
.xf-label { font-weight: 800; font-size: 12px; color: var(--txt-dim); }
#xfader { flex: 1; appearance: none; height: 26px; background: transparent; }
#xfader::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--a-dim), #05060a 40%, #05060a 60%, var(--b-dim));
  border: 1px solid var(--line); border-radius: 4px; height: 8px; margin-top: 0px;
}
#xfader::-webkit-slider-thumb {
  appearance: none; width: 30px; height: 22px; border-radius: 4px; margin-top: -8px;
  background: linear-gradient(180deg, #f3f4f6, #6b7280); border: 1px solid #111;
  box-shadow: 0 2px 6px rgba(0,0,0,.7);
}

/* ===== FX panel ===== */
.fx-panel { display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.fx-title { font-size: 9px; letter-spacing: 2px; color: var(--txt-dim); font-weight: 800; text-align: center; }
.fx-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.fx-type-btn, .fx-beat-btn, .fx-assign-btn {
  border: 1px solid var(--line); background: var(--bg3); color: var(--txt-dim);
  border-radius: 4px; font-size: 9px; font-weight: 700; padding: 4px 2px;
}
.fx-type-btn.active { background: var(--violet); color: #000; border-color: var(--violet); box-shadow: 0 0 8px rgba(167,139,250,.5); }
.fx-beats { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.fx-beat-btn.active { background: var(--a); color: #000; border-color: var(--a); }
.fx-assigns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.fx-assign-btn.active { background: var(--b); color: #000; border-color: var(--b); }
.fx-knobs { display: flex; justify-content: space-around; }
.fx-on-btn {
  height: 34px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg3);
  color: var(--txt-dim); font-weight: 900; letter-spacing: 2px; font-size: 12px;
}
.fx-on-btn.on { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 0 16px rgba(244,63,94,.6); animation: pulse 1s infinite alternate; }
@keyframes pulse { from { box-shadow: 0 0 8px rgba(244,63,94,.4); } to { box-shadow: 0 0 20px rgba(244,63,94,.8); } }

/* ===== Browser / library ===== */
#browser {
  background: linear-gradient(180deg, var(--bg2), var(--bg1));
  border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-height: 180px;
}
#browser.dragover { outline: 2px dashed var(--a); outline-offset: -4px; }
.browser-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.browser-title { font-weight: 900; letter-spacing: 2px; font-size: 12px; color: var(--txt-dim); margin-right: 6px; }
.lib-btn {
  background: var(--bg3); border: 1px solid var(--line); color: var(--txt);
  border-radius: 6px; padding: 6px 12px; font-size: 11px; font-weight: 700;
}
.lib-btn:hover { border-color: var(--txt-dim); }
.lib-btn.accent { border-color: var(--a-dim); color: var(--a); }
.drop-hint { margin-left: auto; font-size: 10px; color: var(--txt-dim); }
.browser-panes { display: grid; grid-template-columns: 1fr 300px; gap: 10px; }
.track-table-wrap { max-height: 230px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; }
#track-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
#track-table th {
  text-align: left; font-size: 9px; letter-spacing: 1px; color: var(--txt-dim);
  padding: 6px 8px; position: sticky; top: 0; background: var(--bg2); border-bottom: 1px solid var(--line);
}
#track-table td { padding: 5px 8px; border-bottom: 1px solid #1a1e2b; font-variant-numeric: tabular-nums; }
#track-table tbody tr:hover { background: var(--bg3); }
#track-table tr.loaded-A td:first-child { color: var(--a); }
#track-table tr.loaded-B td:first-child { color: var(--b); }
.row-btn {
  border: 1px solid var(--line); background: var(--bg3); color: var(--txt-dim);
  border-radius: 4px; font-size: 9px; font-weight: 800; padding: 3px 7px; margin-left: 3px;
}
.row-btn.a:hover { background: var(--a); color: #000; }
.row-btn.b:hover { background: var(--b); color: #000; }
.row-btn.q:hover { background: var(--amber); color: #000; }
.energy-bar { display: inline-block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--green), var(--amber)); vertical-align: middle; }
.queue-pane { border: 1px solid var(--line); border-radius: 6px; padding: 8px; overflow-y: auto; max-height: 230px; }
.queue-title { font-size: 10px; letter-spacing: 1.5px; font-weight: 800; color: var(--amber); margin-bottom: 6px; }
#queue-list { margin-left: 20px; font-size: 11.5px; color: var(--txt); }
#queue-list li { padding: 3px 0; border-bottom: 1px solid #1a1e2b; }
#queue-list li.now { color: var(--amber); font-weight: 700; }

/* ===== DeckGhost panels (Brain / Performance Lab / Cue Workbench / Critic) ===== */
#ghost-panels { display: grid; grid-template-columns: 1fr 1.3fr 1.2fr 1fr; gap: 10px; }
.ghost-panel {
  background: linear-gradient(180deg, var(--bg2), var(--bg1));
  border: 1px solid var(--line); border-radius: 12px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; min-height: 220px; max-height: 340px; overflow-y: auto;
}
#brain-panel { border-top: 2px solid var(--violet); }
#perf-lab { border-top: 2px solid var(--amber); }
#cue-workbench { border-top: 2px solid var(--green); }
#critic-panel { border-top: 2px solid var(--red); }
.ghost-title { font-size: 11px; font-weight: 900; letter-spacing: 2px; color: var(--txt-dim); }

/* Brain */
.brain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.brain-cell { background: var(--bg3); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.brain-cell.wide { grid-column: span 2; }
.brain-label { font-size: 8px; letter-spacing: 1.5px; color: var(--txt-dim); font-weight: 700; }
.brain-value { font-size: 14px; font-weight: 800; margin-top: 2px; }
.brain-value.small { font-size: 11px; }
.brain-value.accent { color: var(--violet); }

/* Performance Lab */
.preset-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.preset-btn {
  border: 1px solid var(--line); background: var(--bg3); color: var(--txt-dim);
  border-radius: 5px; font-size: 9.5px; font-weight: 700; padding: 6px 4px;
}
.preset-btn.active { background: var(--amber); color: #000; border-color: var(--amber); box-shadow: 0 0 8px rgba(251,191,36,.4); }
.plan-box, .history-box { background: var(--bg3); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; }
.plan-head { font-size: 9px; letter-spacing: 1.5px; font-weight: 800; color: var(--amber); margin-bottom: 4px; }
.plan-state { float: right; color: var(--green); }
.plan-detail { font-size: 11px; line-height: 1.5; }
.plan-detail b { color: var(--violet); }
.plan-timeline { margin: 6px 0 0 18px; font-size: 10px; color: var(--txt-dim); }
.plan-timeline li { padding: 1px 0; }
.history-box ul { margin-left: 16px; font-size: 10.5px; color: var(--txt-dim); }
.history-box li { padding: 2px 0; }

/* Cue Workbench */
.wb-decks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; }
.wb-deck { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wb-head { font-size: 10px; font-weight: 800; color: var(--txt-dim); display: flex; align-items: center; gap: 5px; }
.wb-role { background: var(--bg3); color: var(--txt); border: 1px solid var(--line); border-radius: 4px; font-size: 10px; padding: 2px; }
.wb-list { overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.wb-cue {
  display: flex; align-items: center; gap: 6px; background: var(--bg3);
  border: 1px solid var(--line); border-radius: 5px; padding: 4px 7px; font-size: 10px; cursor: pointer;
}
.wb-cue:hover { border-color: var(--txt-dim); }
.wb-cue .role {
  font-weight: 800; font-size: 8.5px; padding: 1px 5px; border-radius: 3px; text-transform: uppercase;
  background: var(--bg1); color: var(--txt-dim);
}
.wb-cue .role.entry { color: var(--a); } .wb-cue .role.exit { color: var(--b); }
.wb-cue .role.drop { color: var(--red); } .wb-cue .role.safe { color: var(--green); }
.wb-cue .role.blend { color: var(--amber); } .wb-cue .role.custom { color: var(--violet); }
.wb-cue .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-cue .q { color: var(--txt-dim); font-variant-numeric: tabular-nums; }
.wb-cue .del { background: none; border: none; color: var(--txt-dim); font-size: 11px; cursor: pointer; }
.wb-cue .del:hover { color: var(--red); }

/* Mix Critic */
.critic-actions { display: flex; gap: 6px; }
.critic-report { font-size: 11px; line-height: 1.6; color: var(--txt-dim); }
.critic-report .crit-good { color: var(--green); }
.critic-report .crit-warn { color: var(--amber); }
.critic-report .crit-sugg { color: var(--a); }
.critic-report h4 { font-size: 9px; letter-spacing: 1.5px; margin: 6px 0 2px; color: var(--txt-dim); }
.critic-report ul { margin-left: 16px; }

@media (max-width: 1150px) {
  #ghost-panels { grid-template-columns: 1fr 1fr; }
}

/* ===== Status bar ===== */
#statusbar {
  font-size: 11px; color: var(--txt-dim); padding: 4px 10px;
  background: var(--bg1); border: 1px solid var(--line); border-radius: 6px;
}

@media (max-width: 1150px) {
  #console { grid-template-columns: 1fr; }
  .browser-panes { grid-template-columns: 1fr; }
}