:root {
  --bg: #101216;
  --panel: #181b21;
  --panel-2: #20242c;
  --panel-3: #12151a;
  --ink: #f5f7fb;
  --muted: #aeb7c8;
  --line: #333947;
  --accent: #f4c430;
  --accent-2: #61d394;
  --bad: #ff6b6b;
  --blue: #7cb7ff;
  --shadow: 0 16px 40px rgba(0,0,0,.35);
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at top left, #272d3b 0, var(--bg) 38rem);
  color: var(--ink);
  min-height: 100vh;
}

body.install-page {
  display: grid;
  place-items: center;
  padding: 24px;
}

.install-card {
  width: min(680px, 100%);
  background: rgba(24,27,33,.96);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.install-card form { display: grid; gap: 14px; }
.install-card a { color: var(--accent); }

.app-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(16, 18, 22, .86);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
}

.title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

h1, h2, h3 { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: clamp(1.25rem, 3vw, 2rem); }
h2 { font-size: 1.08rem; }
h3 { font-size: 1rem; }

.subtle { color: var(--muted); font-size: .92rem; }
.version-chip, .ai-chip, .status-chip, .usage-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: .74rem;
  color: var(--muted);
  vertical-align: middle;
}
.ai-chip { color: #ffe58a; border-color: #8c741f; }
.usage-chip.warn { color: #ffc1c1; border-color: #803842; }
.usage-chip.good { color: #a9f0c5; border-color: #31784d; }

.layout {
  display: grid;
  grid-template-columns: minmax(340px, 42%) minmax(420px, 58%);
  gap: 18px;
  padding: 18px;
  max-width: 1740px;
  margin: 0 auto;
}

.panel {
  background: rgba(24, 27, 33, .94);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
  overflow: hidden;
}

.panel > header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.controls {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}

.span-2 { grid-column: span 1; }

.wide-controls, .gig-bar, .notes-row {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  align-items: center;
}

.compact-row { padding-top: 10px; padding-bottom: 10px; }
.gig-bar label { min-width: 150px; flex: 1; }
.notes-row label { width: 100%; }
.target-label { min-width: 170px; }

label {
  color: var(--muted);
  font-size: .85rem;
  display: grid;
  gap: 5px;
}

input, select, button, textarea { font: inherit; }

input[type="search"], select, input[type="text"], input[type="date"], input[type="password"], textarea {
  width: 100%;
  background: #0e1116;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  outline: none;
}

textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244,196,48,.13); }

.checkline { display: flex; align-items: center; gap: 8px; white-space: nowrap; }

button, .button-link {
  border: 1px solid var(--line);
  background: #252a33;
  color: var(--ink);
  border-radius: 10px;
  padding: 8px 11px;
  cursor: pointer;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
button:hover, .button-link:hover { background: #303744; border-color: #4a5366; }
button:active { transform: translateY(1px); }
.primary { background: #604d10; border-color: #a9891d; }
.primary:hover { background: #806716; }
.danger { background: #3a1d24; border-color: #7d3644; }
.ghost { background: transparent; }
.small { padding: 5px 7px; font-size: .82rem; }
.button-row, .top-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.song-list {
  max-height: calc(100vh - 290px);
  overflow: auto;
  padding: 10px;
}

.song-card, .set-item {
  display: grid;
  gap: 5px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
}
.song-card { cursor: grab; }
.song-card:hover, .set-item:hover { border-color: #596476; }
.song-card.used { opacity: .55; }
.song-card.dragging, .set-item.dragging { opacity: .45; }

.song-top, .set-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.song-title { font-weight: 700; }
.song-meta, .mini-meta { color: var(--muted); font-size: .83rem; display: flex; gap: 7px; flex-wrap: wrap; }
.song-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.song-id { color: var(--accent); font-variant-numeric: tabular-nums; }

.sets-wrap { padding: 14px 16px; display: grid; gap: 14px; }
.set-card {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.set-card.drop-target { outline: 2px dashed var(--accent); outline-offset: 3px; }
.set-header {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.12);
}
.set-list { min-height: 72px; padding: 10px; }
.empty-set { color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; padding: 16px; text-align: center; }
.set-item { cursor: grab; grid-template-columns: auto 1fr auto; align-items: start; }
.set-position { color: var(--accent); min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.set-item-main { display: grid; gap: 4px; }
.set-item-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.notice { padding: 10px 12px; border-radius: 10px; margin: 10px 0; border: 1px solid var(--line); }
.notice.good { background: rgba(97,211,148,.08); border-color: #31784d; }
.notice.bad { background: rgba(255,107,107,.08); border-color: #803842; }
.toast {
  position: fixed;
  bottom: 18px;
  right: 18px;
  background: #0e1116;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  z-index: 50;
}
code { color: #ffe58a; }

.loading { opacity: .75; }

.print-body { background: #fff; color: #000; }
.print-page { max-width: 1100px; margin: 0 auto; padding: 24px; }
.print-actions { display: flex; gap: 8px; margin-bottom: 18px; }
.print-header { border-bottom: 2px solid #000; padding-bottom: 12px; margin-bottom: 18px; }
.print-header h1 { color: #000; }
.print-meta { display: flex; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.print-notes { white-space: pre-wrap; }
.print-set { break-inside: avoid; margin-bottom: 24px; }
.print-set h2 { color: #000; border-bottom: 1px solid #777; padding-bottom: 5px; display: flex; justify-content: space-between; }
.print-set table { width: 100%; border-collapse: collapse; font-size: 11pt; }
.print-set th, .print-set td { border-bottom: 1px solid #ddd; padding: 5px 6px; text-align: left; vertical-align: top; }
.print-set th { background: #f2f2f2; }

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .song-list { max-height: 55vh; }
}

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .print-page { padding: 0; }
}

.admin-layout {
  display: grid;
  gap: 18px;
  padding: 18px;
  max-width: 1740px;
  margin: 0 auto;
}

.admin-grid {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
}

.admin-actions-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.admin-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

.admin-card h3 { margin-bottom: 6px; }
.admin-card p { min-height: 48px; }

.admin-split {
  display: grid;
  grid-template-columns: minmax(360px, 48%) minmax(360px, 52%);
  gap: 0;
}

.admin-list-pane {
  border-right: 1px solid var(--line);
  min-width: 0;
}

.admin-controls {
  grid-template-columns: 1fr 140px;
}

.admin-table-wrap {
  max-height: 520px;
  overflow: auto;
  padding: 10px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.admin-table th,
.admin-table td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 7px 8px;
  vertical-align: top;
}

.admin-table th {
  position: sticky;
  top: 0;
  background: var(--panel-3);
  z-index: 1;
  color: var(--muted);
}

.admin-table tbody tr {
  cursor: pointer;
}

.admin-table tbody tr:hover {
  background: rgba(255,255,255,.05);
}

.admin-table tbody tr.selected {
  background: rgba(244,196,48,.12);
  outline: 1px solid rgba(244,196,48,.45);
}

.muted-row {
  opacity: .55;
}

.admin-form {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  align-content: start;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.admin-checks {
  padding: 0;
  border-bottom: 0;
}

.admin-form-actions {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

@media (max-width: 960px) {
  .admin-split { grid-template-columns: 1fr; }
  .admin-list-pane { border-right: 0; border-bottom: 1px solid var(--line); }
}

.admin-count-line {
  padding: 0 16px 8px;
}

.admin-summary-box {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  border-radius: 12px;
  padding: 10px 12px;
  line-height: 1.45;
}

.compact-buttons {
  gap: 8px;
}

.compact-buttons .button-link {
  padding: 7px 9px;
  font-size: .9rem;
}

@media (min-width: 961px) {
  .admin-controls {
    grid-template-columns: minmax(180px, 1.2fr) minmax(120px, .7fr) minmax(150px, .8fr) minmax(160px, .8fr);
  }
}