:root {
  color-scheme: dark;
  --ink: #07131f;
  --ink-2: #0e2132;
  --panel: #10283b;
  --panel-2: #16354a;
  --line: rgba(196, 218, 232, 0.16);
  --text: #f5f1e8;
  --muted: #9fb4c3;
  --red: #d54a3f;
  --gold: #e0b764;
  --cyan: #68c2d4;
  --success: #79c79b;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% -10%, rgba(45,111,143,.3), transparent 38%), var(--ink); color: var(--text); font-family: "DM Sans", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.center-screen { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 14px; padding: 24px; color: var(--muted); }
.access-card { width: min(100%, 470px); padding: 40px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(22,53,74,.98), rgba(8,24,36,.98)); box-shadow: var(--shadow); }
.brand-lockup { display: flex; align-items: center; gap: 15px; }
.brand-lockup p { margin: 0; color: var(--red); font-family: Oswald, sans-serif; font-size: .74rem; font-weight: 600; letter-spacing: .2em; }
.brand-lockup h1 { margin: 2px 0 0; font-family: Oswald, sans-serif; font-size: 1.8rem; font-weight: 500; }
.brand-mark { position: relative; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: white; box-shadow: 0 0 0 6px rgba(213,74,63,.12); }
.brand-mark span { font-family: Oswald, sans-serif; font-size: 1.6rem; font-weight: 600; }
.brand-mark::after { content: "♪"; position: absolute; right: -2px; top: -3px; color: var(--gold); font-size: .72rem; }
.access-copy { margin: 30px 0 22px; color: #d8e1e6; line-height: 1.6; }
.primary-button { width: 100%; min-height: 50px; border: 0; border-radius: 10px; background: var(--red); color: white; font-weight: 700; }
.primary-button:hover { background: #e1584d; }
.secondary-link { display: block; margin-top: 16px; color: var(--cyan); text-align: center; text-decoration: none; }
.form-message { min-height: 1.4em; margin-bottom: 0; color: var(--gold); font-size: .9rem; }

.dashboard-shell { width: min(1500px, 100%); margin: 0 auto; padding: 0 34px 70px; }
.dj-topbar { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.brand-lockup.compact .brand-mark { width: 40px; height: 40px; }
.brand-lockup.compact h1 { font-size: 1.25rem; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.top-actions a, .top-actions button { min-height: 38px; display: inline-flex; align-items: center; padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); text-decoration: none; font-size: .8rem; }
.top-actions a { border-color: rgba(224,183,100,.42); color: var(--gold); }

.dashboard-hero { padding: 42px 0 24px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.eyebrow { margin: 0 0 8px; color: var(--red); font-family: Oswald, sans-serif; font-size: .8rem; letter-spacing: .18em; }
.dashboard-hero h2 { margin: 0; font-family: Oswald, sans-serif; font-size: clamp(2.5rem, 5vw, 4.2rem); line-height: 1; font-weight: 500; }
.dashboard-hero > div > p:last-child, .last-updated { color: var(--muted); }
.live-dot { width: 9px; height: 9px; display: inline-block; margin-right: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(121,199,155,.13); }
.last-updated { font-size: .8rem; }

.event-control { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(420px, .9fr); align-items: center; gap: 24px; margin-bottom: 18px; padding: 18px 20px; border: 1px solid rgba(224,183,100,.32); border-radius: 14px; background: linear-gradient(135deg, rgba(16,40,59,.9), rgba(7,19,31,.88)); }
.event-status h3 { margin: 0; font: 500 1.45rem Oswald, sans-serif; }
.event-status > p:last-child { margin: 6px 0 0; color: var(--muted); font-size: .82rem; }
.event-actions { display: flex; align-items: end; justify-content: end; gap: 10px; }
.event-actions label { flex: 1; display: grid; gap: 5px; color: var(--muted); font-size: .74rem; font-weight: 700; }
.event-actions input, .event-history select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink-2); color: var(--text); }
.start-event, .end-event { flex: 0 0 auto; min-height: 42px; padding: 9px 14px; border-radius: 8px; font-weight: 700; }
.start-event { border: 0; background: var(--red); color: white; }
.end-event { border: 1px solid rgba(213,74,63,.55); background: rgba(213,74,63,.08); color: #ffaaa3; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.stats-grid article { padding: 18px 20px; border: 1px solid var(--line); border-radius: 13px; background: rgba(16,40,59,.8); }
.stats-grid span { font-family: Oswald, sans-serif; font-size: 2rem; color: var(--text); }
.stats-grid p { margin: 3px 0 0; color: var(--muted); font-size: .78rem; }

.queue-toolbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(7,19,31,.94); backdrop-filter: blur(16px); }
.queue-tabs { display: flex; gap: 7px; overflow-x: auto; }
.queue-tab { flex: 0 0 auto; min-height: 40px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: .78rem; font-weight: 700; }
.queue-tab.active { border-color: var(--cyan); background: rgba(104,194,212,.12); color: #e3fbff; }
.request-search { width: min(330px, 32vw); flex: 0 0 auto; }
.event-history { width: min(270px, 24vw); flex: 0 0 auto; }
.request-search input, .request-controls input { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink-2); color: var(--text); padding: 9px 11px; outline: 0; }
.request-search input:focus, .request-controls input:focus { border-color: var(--cyan); }
.dashboard-message { min-height: 1.3em; margin: 12px 3px; color: var(--gold); font-size: .85rem; }

.request-queue { display: grid; gap: 10px; }
.request-card { display: grid; grid-template-columns: 54px 1fr; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, rgba(16,40,59,.96), rgba(10,27,41,.96)); overflow: hidden; }
.queue-position { display: grid; place-items: center; align-content: center; gap: 5px; border-right: 1px solid var(--line); background: rgba(7,19,31,.5); color: var(--gold); font-family: Oswald, sans-serif; font-size: 1.35rem; }
.drag-handle { color: var(--muted); font: 700 .85rem "DM Sans", sans-serif; letter-spacing: -.2em; opacity: .65; }
.request-card[draggable="true"] { cursor: grab; }
.request-card[draggable="true"]:active { cursor: grabbing; }
.request-card.dragging { opacity: .45; }
.request-card.drag-target { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(104,194,212,.14); }
.request-card.now-singing { border-color: rgba(104,194,212,.75); box-shadow: 0 0 0 2px rgba(104,194,212,.11); }
.request-card.up-next { border-color: rgba(224,183,100,.72); box-shadow: 0 0 0 2px rgba(224,183,100,.09); }
.request-main { min-width: 0; padding: 16px 18px; }
.request-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.singer-name { margin: 0 0 3px; color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.request-title { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.request-artist { margin: 4px 0 0; color: #b8c8d2; font-size: .91rem; }
.status-badge { flex: 0 0 auto; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .72rem; font-weight: 700; }
.status-badge[data-status="Submitted"] { border-color: rgba(224,183,100,.42); color: var(--gold); }
.status-badge[data-status="Singing"] { border-color: rgba(104,194,212,.55); background: rgba(104,194,212,.1); color: #bcf3ff; }
.status-badge[data-status="Completed"] { border-color: rgba(121,199,155,.5); color: #bdf0cf; }
.status-badge[data-status="Skipped"], .status-badge[data-status="Cancelled"] { opacity: .75; }
.request-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.request-meta span { padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .7rem; }
.request-meta .queue-callout { border-color: rgba(224,183,100,.5); color: var(--gold); font-weight: 700; }
.request-meta .queue-callout.now { border-color: rgba(104,194,212,.55); color: var(--cyan); }
.request-meta .reorder-actions { display: inline-flex; gap: 4px; padding: 0; border: 0; }
.move-request { min-width: 30px; min-height: 27px; border: 1px solid var(--line); border-radius: 6px; background: var(--ink-2); color: var(--text); font-weight: 700; }
.move-request:disabled { cursor: default; opacity: .35; }
.request-controls { display: grid; grid-template-columns: minmax(360px, 1.4fr) minmax(180px, 1fr) auto; align-items: end; gap: 10px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.request-controls label { display: grid; gap: 5px; color: var(--muted); font-size: .72rem; font-weight: 600; }
.status-control { min-width: 0; padding: 0; margin: 0; border: 0; }
.status-control legend { margin-bottom: 5px; color: var(--muted); font-size: .72rem; font-weight: 600; }
.status-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.status-button { min-height: 42px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink-2); color: var(--muted); font-size: .72rem; font-weight: 700; }
.status-button:hover:not(:disabled) { border-color: rgba(104,194,212,.55); color: var(--text); }
.status-button.active[data-status="Submitted"] { border-color: rgba(224,183,100,.65); background: rgba(224,183,100,.12); color: var(--gold); }
.status-button.active[data-status="Singing"] { border-color: rgba(104,194,212,.7); background: rgba(104,194,212,.13); color: #bcf3ff; }
.status-button.active[data-status="Completed"] { border-color: rgba(121,199,155,.65); background: rgba(121,199,155,.12); color: #bdf0cf; }
.status-button.active[data-status="Skipped"] { border-color: rgba(159,180,195,.5); background: rgba(159,180,195,.09); color: #d4e0e7; }
.status-button.active[data-status="Cancelled"] { border-color: rgba(213,74,63,.65); background: rgba(213,74,63,.12); color: #ffb6af; }
.status-button:disabled { cursor: default; }
.save-note { min-height: 42px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--text); font-weight: 700; }
.save-note:disabled { cursor: wait; opacity: .6; }
.queue-empty { padding: 70px 20px; text-align: center; color: var(--muted); }
.queue-empty span { color: var(--red); font-size: 2rem; }
.queue-empty h3 { margin-bottom: 5px; color: var(--text); }
.queue-empty p { margin-top: 0; }

@media (max-width: 820px) {
  .dashboard-shell { padding: 0 14px 55px; }
  .dj-topbar { min-height: 68px; }
  .brand-lockup.compact { gap: 10px; }
  .brand-lockup.compact .brand-mark { width: 35px; height: 35px; }
  .brand-lockup.compact h1 { font-size: 1.05rem; }
  .brand-lockup.compact p { font-size: .6rem; }
  .top-actions { gap: 6px; }
  .top-actions a, .top-actions button { padding: 6px 8px; font-size: .7rem; }
  .dashboard-hero { padding: 28px 0 18px; align-items: start; flex-direction: column; gap: 4px; }
  .dashboard-hero h2 { font-size: 2.6rem; }
  .event-control { grid-template-columns: 1fr; gap: 14px; }
  .event-actions { justify-content: stretch; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid article { padding: 14px 16px; }
  .queue-toolbar { margin: 0 -14px; padding: 11px 14px; border-left: 0; border-right: 0; border-radius: 0; flex-direction: column; align-items: stretch; }
  .queue-tabs { margin-right: -14px; padding-right: 14px; }
  .request-search { width: 100%; }
  .event-history { width: 100%; }
  .request-card { grid-template-columns: 42px 1fr; }
  .request-main { padding: 14px 12px; }
  .request-controls { grid-template-columns: 1fr; }
  .save-note { width: 100%; }
}

@media (max-width: 440px) {
  .brand-lockup.compact .brand-mark { display: none; }
  .dashboard-hero h2 { font-size: 2.35rem; }
  .request-heading { gap: 8px; }
  .status-badge { padding: 5px 7px; font-size: .66rem; }
  .queue-position { font-size: 1.05rem; }
  .access-card { padding: 30px 22px; }
}

@media (max-width: 520px) {
  .status-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-actions { align-items: stretch; flex-direction: column; }
  .start-event, .end-event { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }