/* /css/ondemand-neon.css — neon terminal theme for On-Demand modal */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root{
  --crt-bg: #0b0d10;
  --crt-panel:#0e1014;
  --crt-line:#1b1f27;
  --neon:#ffd54a;            /* main neon yellow */
  --neon-dim:#b08800;
  --text:#e9ffe2;
  --muted:#9fe59f;
}

#ondemand-lite-modal{
  position:fixed; inset:0; display:none; z-index:9999;
  background:rgba(0,0,0,.8);
  backdrop-filter: blur(2px);
  font-family:"Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color:var(--text);
}
#ondemand-lite-modal[aria-hidden="false"]{ display:block; }

/* Neon frame */
.od-wrap{
  max-width: 980px;
  margin: 5vh auto;
  background: var(--crt-panel);
  border: 2px dashed var(--neon);
  box-shadow:
    0 0 18px rgba(255,213,74,.35),
    inset 0 0 18px rgba(255,213,74,.15),
    0 0 120px rgba(255,213,74,.12);
  border-radius: 12px;
  overflow: hidden;
}

/* Glowing header with title + subline */
.od-header{
  padding: 22px 22px 14px;
  border-bottom: 1px dashed var(--neon);
  background: linear-gradient(180deg, #0f1116, #0b0e12);
}
.od-title{
  text-align:center;
  letter-spacing: 3px;
  font-weight: 700;
  color: var(--neon);
  text-shadow:
    0 0 6px rgba(255,213,74,.65),
    0 0 16px rgba(255,213,74,.4);
  margin-bottom: 6px;
}
.od-sub{
  text-align:center;
  font-size: 13px;
  color: var(--muted);
  opacity:.9;
}

/* Divider line (scanline look) */
.od-divider{
  height:1px; margin:16px 0 14px;
  background: linear-gradient(90deg, transparent, var(--neon) 20%, var(--neon) 80%, transparent);
  opacity:.45;
}

/* Search row */
.od-searchbar{
  display:grid; grid-template-columns: 1fr auto; gap:12px;
  align-items:center;
  margin-bottom: 12px;
}
.od-input{
  width:100%;
  background:#050608;
  color:var(--text);
  border:1px solid var(--neon);
  border-radius:10px;
  padding:14px 16px;
  box-shadow: inset 0 0 10px rgba(255,213,74,.06);
}
.od-input::placeholder{ color:#ffeead; opacity:.55; letter-spacing:.5px; }
.od-btn{
  background: transparent;
  color: var(--neon);
  border:1px solid var(--neon);
  border-radius:10px;
  padding:12px 18px;
  cursor:pointer;
  letter-spacing:1px;
  text-shadow: 0 0 6px rgba(255,213,74,.45);
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.od-btn:hover{
  background: rgba(255,213,74,.08);
  box-shadow: 0 0 10px rgba(255,213,74,.35), inset 0 0 12px rgba(255,213,74,.15);
  transform: translateY(-1px);
}

.od-status{
  padding: 10px 22px;
  color: var(--muted);
  font-size: 12.5px;
  border-bottom: 1px dashed var(--neon);
}

/* List region */
.od-body{
  max-height: min(70vh, 760px);
  overflow:auto;
  background:
    linear-gradient(transparent 23px, rgba(255,213,74,.05) 24px) 0 0/100% 24px,
    var(--crt-bg);
}
.od-list{ display:block; }

.od-item{
  display:grid; grid-template-columns: 64px 1fr auto;
  gap:14px; align-items:center;
  padding: 14px 20px;
  border-bottom: 1px dashed rgba(255,213,74,.22);
  cursor:pointer;
  transition: background .12s ease, box-shadow .12s ease;
}
.od-item:hover{
  background: rgba(255,213,74,.06);
  box-shadow: inset 0 0 12px rgba(255,213,74,.12);
}

.od-art{
  width:64px;height:64px;object-fit:cover; border-radius:8px;
  border:1px solid var(--neon);
  background:#000;
  box-shadow: 0 0 12px rgba(255,213,74,.18);
}

.od-meta .od-track{ font-weight:700; letter-spacing:.3px; }
.od-meta .od-artist{ color:#ffeead; font-size:12.5px; margin-top:4px; opacity:.9; }

.od-play{
  padding:10px 14px;
  border:1px solid var(--neon);
  border-radius:10px;
  background:transparent;
  color:var(--neon);
  font-weight:700;
  letter-spacing:1px;
}
.od-play:hover{
  background: rgba(255,213,74,.08);
  box-shadow: 0 0 10px rgba(255,213,74,.35), inset 0 0 12px rgba(255,213,74,.15);
}

/* Close button top-right */
.od-close{
  position:absolute; right:18px; top:16px;
  border:1px solid var(--neon);
  color:var(--neon);
  background:transparent;
  border-radius:8px;
  padding:6px 10px;
  font-size:12px;
}
.od-close:hover{ background: rgba(255,213,74,.08); }

/* Mobile tweaks */
@media (max-width:560px){
  .od-searchbar{ grid-template-columns: 1fr; }
  .od-item{ grid-template-columns:56px 1fr; }
  .od-art{ width:56px; height:56px; }
  .od-play{ grid-column: 1 / -1; justify-self:start; margin-top:8px; }
}