/* style.css — NeonBeat */
:root {
  --bg: #07070d;
  --bg2: #0e0e1a;
  --panel: #12121f;
  --panel2: #161628;
  --border: #232338;
  --text: #e8e8f5;
  --muted: #7a7a96;
  --kick: #ff2d95;
  --snare: #00e5ff;
  --hihat: #ffd60a;
  --clap: #39ff14;
  --ghost: #b388ff;
  --accent: #ff2d95;
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #eef0f7;
  --bg2: #e3e6f0;
  --panel: #ffffff;
  --panel2: #f4f5fb;
  --border: #d4d7e6;
  --text: #1a1a2e;
  --muted: #6b6b85;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) { --bg:#eef0f7; --bg2:#e3e6f0; --panel:#ffffff; --panel2:#f4f5fb; --border:#d4d7e6; --text:#1a1a2e; --muted:#6b6b85; color-scheme:light; }
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; }
body {
  background: radial-gradient(1200px 600px at 20% -10%, #1a1030 0%, transparent 60%),
              radial-gradient(900px 500px at 100% 0%, #0a1a2a 0%, transparent 55%),
              var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
}
html[data-theme="light"] body {
  background: radial-gradient(1200px 600px at 20% -10%, #d9def0 0%, transparent 60%),
              radial-gradient(900px 500px at 100% 0%, #e6ecf5 0%, transparent 55%),
              var(--bg);
}

.app { height:100%; display:flex; flex-direction:column; }

/* ---------- Top bar ---------- */
.topbar {
  flex: 0 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(20,20,35,0.9), rgba(10,10,20,0.6));
  backdrop-filter: blur(8px);
  flex-wrap: wrap;
}
html[data-theme="light"] .topbar { background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(244,245,251,0.6)); }
.brand h1 {
  margin:0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.14em;
  background: linear-gradient(90deg, var(--kick), var(--snare), var(--clap));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(255,45,149,0.25);
}
.brand .sub { display:block; font-size: 11px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; margin-top: 2px; }

.transport { display:flex; align-items:center; gap: 14px; flex-wrap: wrap; }

.btn-play {
  display:flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, var(--kick), #c0186f);
  color:#fff; border:none; border-radius: 12px;
  padding: 11px 20px; font-family: inherit; font-weight:700; font-size: 14px;
  letter-spacing: 0.08em; cursor: pointer;
  box-shadow: 0 4px 18px rgba(255,45,149,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform .12s ease, box-shadow .2s ease;
}
.btn-play:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(255,45,149,0.55); }
.btn-play:active { transform: translateY(1px); }
.btn-play .play-icon { width:0; height:0; border-style:solid; border-width:7px 0 7px 11px; border-color: transparent transparent transparent #fff; transition: all .15s; }
.btn-play.playing { background: linear-gradient(135deg, #444, #222); box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
.btn-play.playing .play-icon { width:10px; height:12px; border:none; background:#fff; border-radius:2px; }

.tempo { display:flex; align-items:center; gap:10px; background: var(--panel); border:1px solid var(--border); border-radius:12px; padding: 8px 14px; }
.tempo-label { font-size: 10px; letter-spacing: 0.2em; color: var(--muted); font-weight:600; }
.tempo input[type=range] { width: 130px; accent-color: var(--accent); cursor: pointer; }
.tempo-val { font-family: ui-monospace, 'SF Mono', Consolas, 'Courier New', monospace; font-size: 14px; color: var(--text); min-width: 64px; text-align:right; }
.tempo-val b { font-size: 18px; }
.tempo-val i { font-style: normal; font-size: 10px; color: var(--muted); margin-left:3px; letter-spacing:0.1em; }

.actions { display:flex; gap:8px; flex-wrap: wrap; }
.btn {
  background: var(--panel); color: var(--text); border:1px solid var(--border);
  border-radius: 10px; padding: 9px 14px; font-family: inherit; font-weight:600; font-size: 13px;
  cursor: pointer; transition: all .15s ease; letter-spacing: 0.04em;
}
.btn:hover { border-color: var(--muted); background: var(--panel2); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-save { background: linear-gradient(135deg, var(--snare), #0099b8); color:#001821; border:none; box-shadow: 0 3px 12px rgba(0,229,255,0.3); }
.btn-save:hover { box-shadow: 0 5px 18px rgba(0,229,255,0.45); }

/* ---------- Main ---------- */
.main { flex:1 1 auto; overflow:auto; padding: 18px 20px 28px; }
.main::-webkit-scrollbar { width:10px; height:10px; }
.main::-webkit-scrollbar-thumb { background: var(--border); border-radius:6px; }

.sequencer { max-width: 980px; margin: 0 auto 28px; }
.seq-head { display:flex; align-items:center; justify-content: space-between; margin-bottom: 10px; min-height: 24px; }
.beat-marks { display:flex; gap: 4px; }
.beat-marks span { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 11px; color: var(--muted); width: 60px; text-align:center; letter-spacing:0.1em; }

.ghost-indicator {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ghost);
  display:flex; align-items:center; gap:8px; opacity:0; transform: translateY(-4px);
  transition: opacity .5s ease, transform .5s ease;
  font-weight: 600;
}
.ghost-indicator.show { opacity:1; transform: translateY(0); }
.ghost-sprite { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 0 6px var(--ghost)); image-rendering: pixelated; }
.ghost-dot { width:8px; height:8px; border-radius:50%; background: var(--ghost); box-shadow: 0 0 12px var(--ghost); animation: ghostpulse 1.2s ease-in-out infinite; }
@keyframes ghostpulse { 0%,100%{ opacity:0.4; transform:scale(0.8);} 50%{ opacity:1; transform:scale(1.2);} }

/* ---------- Grid ---------- */
.grid-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
.grid-scroll::-webkit-scrollbar { height:8px; }
.grid-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius:6px; }

.grid {
  display: grid;
  grid-template-columns: 110px repeat(16, minmax(34px, 1fr));
  gap: 6px;
  min-width: 660px;
  padding: 4px;
}
.cell { aspect-ratio: 1; border-radius: 10px; }
.corner { background: transparent; }
.stepnum {
  display:flex; align-items:center; justify-content:center;
  font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 11px; color: var(--muted);
  background: transparent; aspect-ratio: auto; height: 22px; align-self:end;
}
.stepnum.beat { color: var(--text); font-weight:700; }
.stepnum.playing { color: #fff; text-shadow: 0 0 8px var(--accent); }

.row-label {
  display:flex; flex-direction: row; align-items:center; justify-content:flex-start;
  gap: 8px; padding: 6px 8px; background: var(--panel); border:1px solid var(--border);
  aspect-ratio: auto; height: 100%; min-height: 48px;
  border-left: 3px solid var(--c);
  box-shadow: 0 0 12px color-mix(in srgb, var(--c) 18%, transparent);
}
.row-icon-wrap {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.row-icon { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.row-text { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--c); flex: 1 1 auto; min-width: 0; }
.row-rand {
  background: transparent; border:1px solid var(--border); color: var(--muted);
  border-radius: 6px; padding: 4px 6px; cursor: pointer; line-height:0;
  transition: all .15s ease; font-family: inherit; flex: 0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.row-rand:hover { color: var(--c); border-color: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 40%, transparent); }
.row-rand svg { display:block; }

.pad {
  background: var(--panel);
  border: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: background .12s ease, box-shadow .18s ease, transform .08s ease, border-color .12s ease;
  touch-action: manipulation;
}
.pad.beat-start { border-left: 2px solid color-mix(in srgb, var(--c) 35%, transparent); }
.pad:hover { border-color: color-mix(in srgb, var(--c) 50%, var(--border)); background: var(--panel2); }
.pad:active { transform: scale(0.93); }
.pad.on {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 95%, #fff 5%), var(--c));
  border-color: var(--c);
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 70%, transparent),
              0 0 28px color-mix(in srgb, var(--c) 35%, transparent),
              inset 0 1px 0 rgba(255,255,255,0.4);
}
.pad.playing {
  outline: 2px solid #fff;
  outline-offset: -3px;
  box-shadow: 0 0 18px rgba(255,255,255,0.5);
}
.pad.on.playing {
  box-shadow: 0 0 22px color-mix(in srgb, var(--c) 90%, transparent),
              0 0 40px color-mix(in srgb, var(--c) 50%, transparent),
              0 0 12px #fff;
  transform: scale(1.06);
}

/* ---------- Loops panel ---------- */
.loops-panel { max-width: 980px; margin: 0 auto; background: var(--panel); border:1px solid var(--border); border-radius: 16px; padding: 18px 20px; }
.loops-head { display:flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.loops-head h2 { margin:0; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }
.loops-count { font-size: 12px; color: var(--muted); font-family: ui-monospace, 'SF Mono', Consolas, monospace; display:flex; align-items:center; gap:6px; }
.count-coin { width: 16px; height: 16px; object-fit: contain; image-rendering: pixelated; }

.loops-list { display:flex; flex-direction: column; gap: 10px; }
.loops-empty { color: var(--muted); font-size: 13px; padding: 18px; text-align:center; border:1px dashed var(--border); border-radius: 12px; }

.loop-row {
  display:flex; align-items:center; gap: 14px;
  background: var(--panel2); border:1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  transition: border-color .15s ease, transform .12s ease;
}
.loop-row:hover { border-color: var(--muted); }

.loop-mini { flex: 0 0 auto; }
.mini-grid { display:grid; grid-template-columns: repeat(16, 6px); grid-template-rows: repeat(4, 6px); gap: 2px; }
.mini-cell { background: color-mix(in srgb, var(--c) 14%, transparent); border-radius: 1px; }
.mini-cell.on { background: var(--c); box-shadow: 0 0 4px var(--c); }

.loop-info { flex:1 1 auto; min-width: 0; }
.loop-name { font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loop-meta { font-size: 11px; color: var(--muted); font-family: ui-monospace, 'SF Mono', Consolas, monospace; margin-top: 2px; letter-spacing: 0.05em; display:flex; align-items:center; gap:4px; }
.meta-gem { width: 12px; height: 12px; object-fit: contain; image-rendering: pixelated; }

.loop-btns { display:flex; gap: 6px; flex: 0 0 auto; }
.chip {
  background: var(--panel); border:1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 6px 11px; font-size: 12px; font-family: inherit; font-weight:600;
  cursor: pointer; transition: all .15s ease;
}
.chip:hover { border-color: var(--snare); color: var(--snare); }
.chip.danger:hover { border-color: var(--kick); color: var(--kick); }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center; z-index: 50;
  transition: opacity .2s ease;
}
.modal.hidden { display:none; }
.modal-card {
  background: var(--panel); border:1px solid var(--border); border-radius: 16px;
  padding: 22px; width: min(360px, 90vw); box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: modalpop .2s ease;
}
@keyframes modalpop { from { transform: scale(0.94); opacity:0; } to { transform: scale(1); opacity:1; } }
.modal-card h3 { margin:0 0 14px; font-size: 16px; letter-spacing: 0.06em; }
.modal-input {
  width:100%; background: var(--bg2); border:1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 11px 13px; font-family: inherit; font-size: 14px; outline: none;
  transition: border-color .15s ease;
}
.modal-input:focus { border-color: var(--snare); box-shadow: 0 0 0 3px rgba(0,229,255,0.15); }
.modal-actions { display:flex; justify-content:flex-end; gap: 8px; margin-top: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .topbar { padding: 12px 14px; gap: 10px; }
  .brand h1 { font-size: 22px; }
  .transport { width: 100%; justify-content: space-between; }
  .tempo input[type=range] { width: 90px; }
  .btn { padding: 8px 11px; font-size: 12px; }
  .btn-play { padding: 10px 16px; }
  .main { padding: 14px 12px 24px; }
  .beat-marks span { width: 48px; }
  .grid { grid-template-columns: 96px repeat(16, minmax(30px, 1fr)); gap: 5px; min-width: 580px; }
  .row-text { font-size: 11px; }
  .row-icon-wrap { width: 28px; height: 28px; }
  .row-icon { width: 22px; height: 22px; }
  .loop-row { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .actions { width: 100%; }
  .actions .btn { flex: 1 1 auto; }
}