:root {
  --bg: #0b1120;
  --bg-soft: #111827;
  --card: rgba(15, 23, 42, 0.78);
  --border: rgba(255, 255, 255, 0.08);
  --text: #f8fafc;
  --muted: #94a3b8;
  --accent: #f5e6b3;
  --danger: #ef4444;
  color-scheme: dark;
  font-family: Inter, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at top, #0f1a35, #070b16 55%); color: var(--text); }
body { padding: 20px; }
code { background: rgba(255,255,255,.06); padding: 2px 6px; border-radius: 8px; }
.page { max-width: 1440px; margin: 0 auto; display: grid; gap: 18px; }
.grid.two-col { display: grid; grid-template-columns: 1.06fr .94fr; gap: 18px; }
.card {
  background: linear-gradient(180deg, rgba(15,23,42,.85), rgba(2,6,23,.92));
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.26);
}
.hero { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.hero h1, .card h2, .card h3 { margin: 0 0 8px; }
.hero p, .muted { color: var(--muted); }
.tiny { font-size: 12px; }
.top-gap { margin-top: 12px; }
.hero-actions, .track-actions, .actions-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.split-row { justify-content: space-between; }
.inline-settings { display:flex; gap:12px; flex-wrap:wrap; align-items:end; }
.inline-settings label { min-width: 132px; }
.btn {
  appearance:none; border:none; outline:none; cursor:pointer;
  height:40px; padding:0 14px; border-radius:999px;
  background: linear-gradient(135deg, rgba(245,230,179,.18), rgba(255,255,255,.08));
  color: var(--text); border:1px solid rgba(245,230,179,.18);
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
}
.btn:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(245,230,179,.24), rgba(255,255,255,.12)); }
.btn.secondary { background: rgba(255,255,255,.06); border-color: var(--border); }
.btn.danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); }
.file-btn input { display:none; }
.pill { display:inline-flex; align-items:center; height:28px; padding:0 10px; border-radius:999px; font-size:12px; color: var(--accent); border:1px solid rgba(245,230,179,.18); background: rgba(245,230,179,.08); }
.pill.subtle { color: var(--muted); border-color: var(--border); background: rgba(255,255,255,.04); }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.compact-head { margin-bottom: 12px; }
.form-grid, .track-grid { display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-grid.compact { grid-template-columns: repeat(3, minmax(0,1fr)); }
label { display:grid; gap:8px; font-size:13px; color: var(--muted); }
.checkbox-inline { display:flex; align-items:center; gap:8px; white-space:nowrap; }
input, textarea, select {
  width:100%; min-width:0; border-radius:14px; border:1px solid var(--border);
  background: rgba(255,255,255,.05); color: var(--text); padding: 10px 12px; outline:none;
}
textarea { resize: vertical; }
.full { grid-column: 1 / -1; }
.preview-card { display:grid; gap:12px; }
.preview-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.preview-shell {
  position:relative; overflow:hidden; border-radius:24px; border:1px solid var(--border);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.preview-shell.player-ratio { aspect-ratio: 380 / 560; }
.compact-preview { max-width: 320px; }
.preview-shell img, .preview-shell video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;
  transition: transform .18s ease;
}
.preview-overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(2,6,23,.08), rgba(2,6,23,.38)); pointer-events:none; }
.preview-empty { position:absolute; inset:0; display:grid; place-items:center; color: var(--muted); padding: 20px; text-align:center; }
.dropzone {
  border:1px dashed rgba(245,230,179,.25); border-radius:18px; padding:16px; display:grid; gap:8px;
  justify-items:flex-start; margin-bottom:14px; background: rgba(245,230,179,.03);
}
.dropzone.is-over { background: rgba(245,230,179,.08); }
.backgrounds-list, .tracks-list { display:grid; gap:16px; }
.track-card, .background-card { padding:16px; }
.background-card-main, .track-layout { display:grid; grid-template-columns: 320px 1fr; gap:16px; }
.background-card-fields, .track-form-wrap { min-width:0; }
.upload-grid { display:grid; gap:12px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.uploader {
  display:grid; gap:8px; padding:12px; border-radius:16px; border:1px dashed var(--border);
  background: rgba(255,255,255,.03);
}
.empty-state {
  padding: 24px; border-radius: 20px; border:1px dashed var(--border); color: var(--muted); text-align:center;
}
@media (max-width: 1180px) {
  .background-card-main, .track-layout { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .grid.two-col { grid-template-columns: 1fr; }
  .form-grid, .track-grid, .upload-grid, .form-grid.compact { grid-template-columns: 1fr; }
  .hero { flex-direction: column; }
  .inline-settings { flex-direction: column; align-items: stretch; }
}

.track-card .track-body{display:block;}
.track-card.is-collapsed .track-body{display:none;}
.track-card .toggle-track{min-width:72px;}