/* Theme vars (scoped) */
.dnor-scope{
  --dnor-text:#ffffff;
  --dnor-border:rgba(255,255,255,0.08);
  --dnor-btn-bg:#ffffff;
  --dnor-btn-text:#111827;
  --dnor-live:#22c55e;
}
.dnor-scope.theme-dark{
  --dnor-text:#ffffff;
  --dnor-border:rgba(255,255,255,0.08);
  --dnor-btn-bg:#ffffff;
  --dnor-btn-text:#111827;
  --dnor-live:#22c55e;
}
.dnor-scope.theme-light{
  --dnor-text:#111827;
  --dnor-border:rgba(0,0,0,0.1);
  --dnor-btn-bg:#111827;
  --dnor-btn-text:#ffffff;
  --dnor-live:#16a34a;
}
/* Apply variables */
.dnor-station { color: var(--dnor-text); border: 1px solid var(--dnor-border); }
.dnor-btn { background: var(--dnor-btn-bg); color: var(--dnor-btn-text); }
.dnor-btn.is-playing { background:#ef4444; color:#fff; }
.dnor-dot { background: var(--dnor-live); box-shadow:0 0 12px var(--dnor-live); }

/* DN Online Radio styles */
.dnor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.dnor-single .dnor-station { max-width: 640px; margin: 0 auto; }
.dnor-station {
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.dnor-station.gradient-1 { background: linear-gradient(135deg, #0f172a, #1e3a8a); }
.dnor-station.gradient-2 { background: linear-gradient(135deg, #1f2937, #0ea5e9); }
.dnor-station.gradient-3 { background: linear-gradient(135deg, #111827, #6d28d9); }
.dnor-station.gradient-4 { background: linear-gradient(135deg, #0b2136, #0ea76d); }
.dnor-station.gradient-5 { background: linear-gradient(135deg, #3b0764, #db2777); }
.dnor-station.gradient-6 { background: linear-gradient(135deg, #1f2937, #f59e0b); }
.dnor-header { display: flex; align-items: center; gap: 12px; }
.dnor-logo img, .dnor-logo-placeholder { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background:#111827; border:1px solid rgba(255,255,255,0.1) }
.dnor-title { display:flex; flex-direction: column; }
.dnor-name { font-weight: 700; font-size: 1.1rem; }
.dnor-live { font-size: .9rem; opacity: .9; display:flex; align-items:center; gap:8px; }
.dnor-dot { display:inline-block; width:8px; height:8px; border-radius:999px; background:#22c55e; box-shadow:0 0 12px #22c55e; }
.dnor-meta { display:flex; gap:16px; align-items:center; margin-top: 10px; }
.dnor-track { font-size:.95rem; }
.dnor-art-img { width:72px; height:72px; border-radius:8px; object-fit:cover; border:1px solid rgba(255,255,255,0.1);  }
.dnor-controls { display:flex; align-items:center; gap:12px; margin-top: 12px; }
.dnor-btn { background:#ffffff; color:#111827; border:none; border-radius:999px; width:44px; height:44px; font-size:1.1rem; cursor:pointer; }
.dnor-btn.is-playing { background:#ef4444; color:#fff; }
.dnor-volume { width: 120px; }
.dnor-station.light { color:#111827 }
.dnor-wrap .dnor-card { background:#fff; border:1px solid #e5e7eb; padding:12px; border-radius:12px; margin-bottom:12px; }
.dnor-wrap .dnor-row { display:flex; gap:8px; align-items:center; margin:6px 0; }
.dnor-wrap .dnor-remove-card, .dnor-wrap .dnor-remove-row { color:#ef4444 }


/* v1.0.4 layout tweaks */
.dnor-meta { display:flex; align-items:flex-start; gap:12px; }
.dnor-track { flex: 1 1 auto; min-width: 0; }
.dnor-track .dnor-track-text { 
  display:block; 
  white-space: normal; 
  overflow: visible; 
  word-break: break-word; 
}
.dnor-art { margin-left: auto; }

.dnor-scope.theme-light .dnor-logo img, .dnor-scope.theme-light .dnor-logo-placeholder{ background:#f3f4f6; border:1px solid rgba(0,0,0,0.08) }

/* v1.0.9: shift station title right */
.dnor-title{ margin-left:30px; }


/* v1.1.0: enhanced play/stop button */
.dnor-btn {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dnor-btn-bg);
  color: var(--dnor-btn-text);
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.dnor-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,0.28); }
.dnor-btn:active { transform: translateY(0); box-shadow: 0 6px 18px rgba(0,0,0,0.22); }
.dnor-btn:focus-visible { outline: 2px solid var(--dnor-live); outline-offset: 2px; }

.dnor-icon { width: 22px; height: 22px; fill: currentColor; display: inline-block; }
.dnor-btn .icon-stop { display: none; }
.dnor-btn.is-playing .icon-play { display: none; }
.dnor-btn.is-playing .icon-stop { display: inline-block; }
.dnor-btn.is-playing { background: #f59e0b; color:#111827; }

.dnor-btn.is-playing:hover{ box-shadow: 0 12px 26px rgba(245,158,11,0.35); }


/* v1.1.2: LIVE pill (red), remove dot */
.dnor-dot { display: none !important; }
.dnor-live{display:inline-flex;align-items:center;justify-content:center;height:22px;width:60px;padding:0;border-radius:9999px;background:#ef4444;color:#ffffff;font-weight:700;font-size:.72rem;letter-spacing:.04em;line-height:1;text-transform:uppercase;box-shadow:0 4px 14px rgba(239,68,68,0.35);border:1px solid rgba(255,255,255,0.15);}
/* Slight spacing below station name */
.dnor-title .dnor-live { margin-top:4px; }


/* v1.1.4: footer copyright */
.dnor-footer{
  margin-top: 12px;
  text-align: center;
  font-weight: 700;
  color: var(--dnor-text);
  opacity: 1;
}

/* v1.1.7 footer */
.dnor-footer{
  margin-top:12px;
  text-align:center;
  font-weight:700;
  color: var(--dnor-text);
  opacity:1;
  display:block;
}


/* v1.2.1: in-card footer under controls */
.dnor-footer-card{
  margin-top: 10px;
  text-align: center;
  font-weight: 700;
  color: var(--dnor-text);
  opacity: 1;
}


/* v1.2.3: pin footer to bottom inside the card */
.dnor-station{ position: relative; padding-bottom: 48px; }
.dnor-footer-card{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  margin-top: 0;
  text-align: center;
}

/* v1.2.5: bold Now Playing label */
.dnor-np-label{ font-weight:700; }