:root {
  color-scheme: dark;
  --bg: #071018;
  --panel: #0c1923;
  --panel-2: #101f2b;
  --line: #243747;
  --text: #f2f7fb;
  --muted: #8fa7b9;
  --pink: #ff006a;
  --green: #9cff2e;
  --cyan: #7fe7ff;
  --yellow: #ffd166;
  --red: #ff5d72;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: radial-gradient(circle at 15% 0, #132333 0, var(--bg) 38%, #050b10 100%); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100vh; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: min(1500px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 56px; }
.header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
.eyebrow { color:var(--pink); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:7px; }
h1 { font-size:30px; line-height:1.1; margin:0; letter-spacing:-.03em; }
.subtitle { color:var(--muted); margin-top:8px; max-width:760px; }
.header-actions { display:flex; gap:8px; flex-wrap:wrap; }
.panel { background:linear-gradient(180deg, rgba(15,31,43,.96), rgba(8,20,29,.96)); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:18px; box-shadow:0 16px 40px rgba(0,0,0,.18); }
.panel-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.panel-title h2 { margin:0; font-size:18px; }
.grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px; }
.station-card { grid-column:span 3; border:1px solid var(--line); background:#09151e; border-radius:10px; padding:14px; }
.station-name { font-weight:750; margin-bottom:10px; }
.station-meta { color:var(--muted); font-size:12px; margin-bottom:12px; }
.btn { appearance:none; border:1px solid #355064; color:var(--text); background:#142431; min-height:38px; padding:9px 13px; border-radius:8px; font-weight:800; font-size:12px; cursor:pointer; text-transform:uppercase; letter-spacing:.02em; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.btn:hover { border-color:#5b7890; background:#193040; text-decoration:none; }
.btn-primary { border-color:var(--pink); background:var(--pink); color:#fff; }
.btn-primary:hover { background:#e90061; border-color:#e90061; }
.btn-green { border-color:#4b721d; color:#d9ffa9; background:#13200c; }
.btn-danger { border-color:#7d3141; color:#ffc4cd; background:#241015; }
.btn-quiet { background:transparent; }
.btn-sm { min-height:32px; padding:6px 9px; font-size:11px; }
.btn-block { width:100%; }
.notice { padding:12px 14px; border-radius:9px; border:1px solid #31566a; background:#0b2431; color:#c9f1ff; margin-bottom:16px; }
.notice.success { border-color:#3f7032; background:#10250d; color:#d9ffc8; }
.notice.error { border-color:#773044; background:#281017; color:#ffd0d8; }
.notice.warning { border-color:#755d24; background:#281f0b; color:#ffe6a4; }
.campaign { border:1px solid var(--line); background:#09151e; border-radius:12px; padding:16px; margin-bottom:12px; }
.campaign-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.campaign-name { font-size:18px; font-weight:850; }
.status { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 9px; font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.status.active { color:#d6ffae; border:1px solid #477024; background:#13220b; }
.status.paused { color:#b4c3ce; border:1px solid #394b59; background:#111c24; }
.campaign-meta { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px; }
.metric { border:1px solid #1d3140; border-radius:8px; padding:10px; background:#08131b; }
.metric strong { display:block; font-size:15px; }
.metric span { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.pill { display:inline-flex; align-items:center; gap:7px; border:1px solid #274153; border-radius:999px; padding:5px 8px; color:#b9d1df; font-size:11px; }
.pill.queued { border-color:#735c1f; color:#ffe493; background:#201a08; }
.campaign-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
form.inline { display:inline; }
.form-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; }
.field { grid-column:span 6; }
.field.third { grid-column:span 4; }
.field.full { grid-column:1/-1; }
label { display:block; color:#b8ccda; font-size:12px; font-weight:750; margin-bottom:6px; }
input[type=text], input[type=number], input[type=datetime-local], input[type=time], input[type=file], select { width:100%; min-height:42px; border:1px solid #30495b; border-radius:8px; background:#08131b; color:var(--text); padding:9px 11px; outline:none; }
input:focus, select:focus { border-color:var(--pink); box-shadow:0 0 0 2px rgba(255,0,106,.12); }
.check-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.check { display:flex; align-items:center; gap:8px; border:1px solid #263b4a; border-radius:8px; padding:9px 10px; background:#08131b; font-size:12px; }
.check input { accent-color:var(--pink); }
.help { color:var(--muted); font-size:11px; margin-top:6px; }
.audio-box { border:1px solid #263b4a; border-radius:9px; padding:12px; background:#08131b; }
audio { width:100%; margin-top:9px; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 9px; border-bottom:1px solid #1d303e; font-size:12px; }
th { color:#93acbd; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.empty { color:var(--muted); padding:20px 0; text-align:center; }
.footer-note { color:#6f8798; font-size:11px; margin-top:18px; }
@media (max-width: 980px) {
  .station-card { grid-column:span 6; }
  .campaign-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .field, .field.third { grid-column:span 6; }
  .check-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .wrap { width:min(100% - 20px, 1500px); padding-top:18px; }
  .header { flex-direction:column; }
  .station-card { grid-column:1/-1; }
  .campaign-head { flex-direction:column; }
  .campaign-meta { grid-template-columns:1fr; }
  .field, .field.third { grid-column:1/-1; }
  .check-grid { grid-template-columns:1fr; }
  .panel { padding:14px; border-radius:10px; }
}

/* Control v1A · accounts + playlist manager */
code { color:#c8e6f6; background:#08131b; border:1px solid #1d3140; padding:1px 5px; border-radius:5px; }
.header-side { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.nav { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.btn.is-active { border-color:var(--pink); color:#fff; background:#24111a; }
.userbar { display:flex; align-items:center; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.user-chip { display:flex; flex-direction:column; align-items:flex-end; border:1px solid #263b4a; background:#08131b; border-radius:9px; padding:7px 10px; color:var(--text); line-height:1.15; }
.user-chip:hover { text-decoration:none; border-color:#3d5a6d; }
.user-chip strong { font-size:12px; }
.user-chip span { color:var(--muted); font-size:10px; margin-top:3px; text-transform:uppercase; letter-spacing:.06em; }
.auth-shell { width:min(100% - 28px, 460px); margin:0 auto; padding:8vh 0 40px; }
.auth-card { background:linear-gradient(180deg, rgba(15,31,43,.98), rgba(8,20,29,.98)); border:1px solid var(--line); border-radius:16px; padding:24px; }
.auth-card h1 { margin-bottom:8px; }
.auth-form { margin-top:20px; display:grid; gap:14px; }
.muted-inline { color:var(--muted); }
.align-right { text-align:right; }
.inline-fields { display:flex; gap:8px; align-items:center; }
.inline-fields > input, .inline-fields > select { flex:1 1 auto; min-width:0; }
.inline-create { margin-top:18px; border-top:1px solid #1d303e; padding-top:16px; max-width:560px; }
.station-card-wide { grid-column:span 4; }
.station-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.playlist-card-name { font-size:16px; font-weight:800; margin:8px 0 10px; }
.playlist-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-bottom:12px; }
.playlist-stats span { border:1px solid #1d3140; border-radius:7px; padding:7px; color:var(--muted); font-size:10px; }
.playlist-stats strong { display:block; color:var(--text); font-size:12px; margin-bottom:2px; }
.dashboard-playlist-summary { border:1px solid #1d3140; border-radius:8px; background:#08131b; padding:9px 10px; margin:0 0 9px; }
.dashboard-playlist-summary strong { display:block; font-size:12px; }
.dashboard-playlist-summary span { display:block; color:var(--muted); font-size:10px; margin-top:3px; }
.empty.compact { padding:10px 0; text-align:left; }
.table-wrap { width:100%; overflow-x:auto; }
.playlist-hero h2 { font-size:24px; margin:0; }
.now-strip { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:10px; margin-top:14px; }
.now-strip-main, .now-strip-next { border:1px solid #294252; border-radius:9px; background:#08131b; padding:11px 12px; min-width:0; }
.now-strip-main { border-color:#476629; background:#101b0c; }
.now-strip strong { display:block; margin:4px 0 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.now-strip span:not(.now-label) { display:block; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.now-label { color:#9cff2e; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.now-strip-next .now-label { color:#ffe493; }
.playlist-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px; }
.playlist-settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; padding-top:16px; border-top:1px solid #1d303e; }
.cardless-form { min-width:0; }
.playlist-toolbar-head { align-items:flex-end; }
.playlist-filter-wrap { width:min(340px,100%); }
.action-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.bulkbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border:1px solid #263b4a; border-radius:9px; background:#08131b; padding:10px; margin-bottom:10px; }
.bulk-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.check-inline { display:inline-flex; margin:0; border:0; padding:0; background:transparent; }
.position-input { width:82px !important; min-height:34px !important; padding:6px 8px !important; }
.sr-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.playlist-table th, .playlist-table td { vertical-align:middle; }
.playlist-table .col-select { width:38px; }
.playlist-table .col-drag { width:42px; }
.drag-handle { cursor:grab; color:#6e8798; font-weight:900; user-select:none; text-align:center; }
tr[data-playlist-row].dragging { opacity:.45; }
tr[data-playlist-row].drag-over { outline:1px solid var(--pink); outline-offset:-1px; }
.playlist-table tr.is-current { background:rgba(156,255,46,.06); }
.playlist-table tr.is-next { background:rgba(255,209,102,.055); }
.playlist-table tr.is-played td { opacity:.74; }
.playlist-table tr.is-played td:first-child, .playlist-table tr.is-played td:last-child { opacity:1; }
.seq-cell { white-space:nowrap; font-variant-numeric:tabular-nums; }
.track-secondary { color:var(--muted); max-width:320px; word-break:break-word; }
.status.queued { color:#ffe493; border:1px solid #735c1f; background:#201a08; }
.loop-footer { margin-top:12px; padding:10px 12px; border:1px dashed #365267; border-radius:8px; color:#b9d1df; text-align:center; font-size:12px; }
.timeline-cell { white-space:nowrap; font-variant-numeric:tabular-nums; color:#cfe8f5; min-width:112px; }
.playlist-table tr.is-current .timeline-cell { color:#d6ffae; font-weight:800; }
.playlist-table tr.is-next .timeline-cell { color:#ffe493; }
.genre-chip { display:inline-flex; align-items:center; border:1px solid #2a4354; border-radius:999px; padding:3px 7px; background:#08131b; color:#b9d1df; font-size:10px; line-height:1.2; white-space:nowrap; }
.library-search { max-width:none; margin-bottom:14px; }
.library-browser { width:100%; }
.library-filter-grid { display:grid; grid-template-columns:minmax(170px,.85fr) minmax(220px,1.15fr) minmax(260px,1.5fr) auto; gap:10px; align-items:end; }
.library-filter-action { display:flex; align-items:flex-end; }
.library-filter-action .btn { min-height:42px; white-space:nowrap; }
.library-query-field { min-width:0; }
.library-placement { margin-top:8px; }
.account-panel { max-width:980px; }
input[type=email], input[type=password], input[type=search] { width:100%; min-height:42px; border:1px solid #30495b; border-radius:8px; background:#08131b; color:var(--text); padding:9px 11px; outline:none; }
input[type=email]:focus, input[type=password]:focus, input[type=search]:focus { border-color:var(--pink); box-shadow:0 0 0 2px rgba(255,0,106,.12); }

@media (max-width: 980px) {
  .library-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .station-card-wide { grid-column:span 6; }
  .playlist-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .now-strip { grid-template-columns:1fr; }
  .playlist-settings-grid { grid-template-columns:1fr; }
  .header-side { align-items:flex-start; width:100%; }
  .nav, .userbar { justify-content:flex-start; }
}
@media (max-width: 640px) {
  .library-filter-grid { grid-template-columns:1fr; }
  .library-filter-action .btn { width:100%; }
  .station-card-wide { grid-column:1/-1; }
  .playlist-metrics { grid-template-columns:1fr 1fr; }
  .playlist-stats { grid-template-columns:1fr; }
  .inline-fields { flex-direction:column; align-items:stretch; }
  .bulkbar { align-items:stretch; }
  .bulk-actions { width:100%; }
  .bulk-actions .btn { flex:1 1 auto; }
  .position-input { width:100% !important; }
  .playlist-toolbar-head { align-items:stretch; flex-direction:column; }
  .playlist-filter-wrap { width:100%; }
  .auth-card { padding:18px; }
  .user-chip { align-items:flex-start; }
}

/* Control v1A.2 · playlist programming safety + PLAY AT */
.playlist-table tr.is-targeted { box-shadow:inset 3px 0 0 #ff006a; }
.drag-handle.is-locked { cursor:not-allowed; color:#88a0af; font-size:12px; }
.target-line { display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:6px; color:#ff8cba; font-size:10px; font-weight:800; }
.target-line span:last-child { color:#b9d1df; }
.plan-preview { border-color:#5d2b43; }
.plan-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px; }
.plan-change-list { margin-top:14px; border:1px solid #263b4a; border-radius:9px; overflow:hidden; }
.plan-change-list > div { display:flex; justify-content:space-between; gap:16px; padding:9px 11px; border-bottom:1px solid #1d303e; font-size:11px; }
.plan-change-list > div:last-child { border-bottom:0; }
.plan-change-list span { color:var(--muted); white-space:nowrap; }
.plan-more { color:var(--muted); justify-content:center !important; }
.plan-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; flex-wrap:wrap; }
.play-at-dialog { width:min(560px,calc(100% - 28px)); border:1px solid #355064; border-radius:14px; background:#0b1a24; color:var(--text); padding:0; }
.play-at-dialog::backdrop { background:rgba(0,0,0,.72); }
.play-at-dialog form { padding:18px; }
.dialog-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; }
.dialog-head h3 { margin:4px 0 0; font-size:20px; }
.dialog-track-title { display:block; margin-bottom:14px; }
.dialog-note { margin-top:12px; padding:10px 11px; border:1px solid #263b4a; border-radius:8px; background:#08131b; color:#9db4c3; font-size:11px; }
.dialog-actions { display:flex; justify-content:flex-end; margin-top:14px; }
#target-gmt { color-scheme:dark; }
@media (max-width:980px) { .plan-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .plan-metrics { grid-template-columns:1fr; } .plan-change-list > div { flex-direction:column; gap:4px; } }

/* v1A.2.1 — safer programming optimizer + explicit 24-hour GMT picker */
.plan-preview-warning { border-color:#6b4d19; }
.plan-guardrail { margin:12px 0 0; }
.gmt-picker-grid { display:grid; grid-template-columns:minmax(0,1fr) 92px 92px; gap:10px; align-items:end; margin-top:6px; }
.gmt-picker-grid > div { min-width:0; }
.gmt-picker-grid input[type="date"],
.gmt-picker-grid select { width:100%; }
.field-label { display:block; margin-bottom:6px; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.manual-tune-banner { margin:12px 0; padding:12px 14px; border:1px solid #6b4d19; border-radius:10px; background:#17140b; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.manual-tune-banner[hidden] { display:none; }
.manual-tune-banner strong { display:block; margin-bottom:4px; }
@media (max-width:640px) {
  .gmt-picker-grid { grid-template-columns:1fr 1fr; }
  .gmt-picker-grid > div:first-child { grid-column:1 / -1; }
  .manual-tune-banner { align-items:flex-start; flex-direction:column; }
}


/* Music Scan v1 — legacy scanner bridge */
.music-scan-metrics, .scan-result-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px; }
.scan-result-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.scan-base-dir { margin-top:12px; display:grid; gap:5px; }
.scan-base-dir span { color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.scan-base-dir code { display:block; padding:9px 11px; border:1px solid #263b4a; border-radius:8px; background:#08131b; color:#cfe8f5; overflow-wrap:anywhere; }
.scan-form { margin-top:16px; padding-top:16px; border-top:1px solid #1d303e; }
.scan-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.scan-options .check { align-items:flex-start; margin:0; padding:11px; border:1px solid #263b4a; border-radius:9px; background:#08131b; }
.scan-options .check span { display:grid; gap:4px; }
.scan-options .check small { color:var(--muted); font-size:10px; line-height:1.45; }
.scan-warning { margin-top:12px; padding:10px 12px; border:1px solid #5b4718; border-radius:8px; background:#17140b; color:#d8c58c; font-size:11px; line-height:1.5; }
.scan-actions { margin-top:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.scan-actions button[disabled] { opacity:.55; cursor:not-allowed; }
.compact-notice { margin-top:12px; }
.scan-running-row { display:flex; align-items:center; gap:12px; padding:14px 0; }
.scan-spinner { width:22px; height:22px; border:2px solid #294252; border-top-color:var(--pink); border-radius:50%; animation:eilo-scan-spin .8s linear infinite; }
@keyframes eilo-scan-spin { to { transform:rotate(360deg); } }
.scan-finished-meta { margin-top:12px; }
.scan-log { margin-top:14px; border:1px solid #263b4a; border-radius:9px; background:#08131b; overflow:hidden; }
.scan-log summary { cursor:pointer; padding:10px 12px; font-weight:800; }
.scan-log pre { margin:0; padding:12px; border-top:1px solid #1d303e; max-height:420px; overflow:auto; white-space:pre-wrap; word-break:break-word; color:#9db4c3; font:11px/1.5 Consolas,Monaco,monospace; }
@media (max-width:980px) { .music-scan-metrics, .scan-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .music-scan-metrics, .scan-result-grid, .scan-options { grid-template-columns:1fr; } }

/* Campaign viewer / scoped access */
.panel-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.campaign-access-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px; margin-top:8px; }
.campaign-access-item { align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02); }
.campaign-access-item span { display:flex; flex-direction:column; gap:2px; }
.campaign-access-item small { color:var(--muted); font-size:11px; }
.notice.compact { margin:8px 0 0; padding:10px 12px; }
@media (max-width:700px) {
  .panel-title { align-items:flex-start; }
  .panel-actions { width:100%; justify-content:flex-start; }
}