/* === VNCG audio player v1.5  27/12/2025 === */

.lpap-player {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #666666;
  --accent: #0ea5e9;
  --surface: #f3f4f6;
  --border: #e5e7eb;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  max-width: 800px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  position: relative;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.lpap-theme-dark {
  --bg: #0b1220;
  --fg: #e2e8f0;
  --muted: #93a4b8;
  --accent: #38bdf8;
  --surface: #111827;
  --border: #1f2937;
}

.lpap-header { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.lpap-thumb img, .lpap-thumb-placeholder {
  width: 96px; height: 96px; border-radius: 8px; object-fit: cover;
  display:flex; align-items:center; justify-content:center; background: var(--surface);
  font-size: 32px;
}
.lpap-title { margin: 0 0 6px 0; font-size: 18px; color: var(--fg); font-weight: 600; }
.lpap-description { color: var(--muted); font-size: 14px; }

.lpap-theme-toggle { margin-top: 6px; display:flex; align-items:center; gap:8px; }
.lpap-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.lpap-switch input { display:none; }
.lpap-slider { position:absolute; cursor:pointer; inset:0; background:#cbd5e1; border-radius:24px; transition:.2s; }
.lpap-slider:before { content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:white; border-radius:50%; transition:.2s; }
.lpap-switch input:checked + .lpap-slider { background: var(--accent); }
.lpap-switch input:checked + .lpap-slider:before { transform: translateX(20px); }

.lpap-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top: 12px; }
.lpap-btn {
  background: var(--surface); color: var(--fg); border: 1px solid var(--border);
  padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px;
  transition: all 0.2s ease;
}
.lpap-btn:disabled { opacity: .5; cursor: not-allowed; }
.lpap-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent); color: white; }

.lpap-progress { display:flex; align-items:center; gap:8px; padding-top: 15px; }
.lpap-time { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.lpap-seek, .lpap-volume-range { width: 100%; height: 4px; border-radius: 2px; background: var(--surface); }
.lpap-seek::-webkit-slider-thumb, .lpap-volume-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; }
.lpap-seek::-moz-range-thumb, .lpap-volume-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; }

.lpap-volume { display:none; align-items:center; gap:6px; min-width: 150px; }
.lpap-speed { display:flex; align-items:center; gap:6px; }
.lpap-speed select {
  background: var(--surface); color: var(--fg); border:1px solid var(--border); border-radius: 6px; padding: 4px 6px;
  font-size: 13px;
}

.lpap-playlist { margin-top: 12px; background: var(--surface); border-radius: 10px; padding: 6px; max-height: 320px; overflow:auto; }
.lpap-track {
  display:grid; grid-template-columns: 28px 1fr; gap:10px; width: 100%; text-align: left;
  background: transparent; color: var(--fg); border: 1px solid transparent; border-radius: 8px; padding: 8px;
  cursor: pointer; font-size: 14px; transition: all 0.2s ease;
}
.lpap-track:hover { border-color: var(--border); background: rgba(0,0,0,.03); }
.lpap-theme-dark .lpap-track:hover { background: rgba(255,255,255,.05); }
.lpap-track.is-active { border-color: var(--accent); background: rgba(56,189,248,.08); }
.lpap-track-index { color: var(--muted); font-weight: 500; }

.lpap-error { color: #ef4444; padding: 10px; text-align: center; font-size: 14px; }

.lpap-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--muted);
  font-size: 14px;
}

.lpap-loading:before {
  content: '';
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lpap-spin 1s linear infinite;
}

@keyframes lpap-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 560px) {
  .lpap-header { grid-template-columns: 72px 1fr; }
  .lpap-thumb img, .lpap-thumb-placeholder { width:72px; height:72px; }
  .lpap-controls { gap:8px; }
  .lpap-progress { width: 100%; }
}