.c434-music-player { --mp-bg: #fff; --mp-text: #111; --mp-sub: #666; --mp-accent: #1db954; --mp-border: #e5e7eb; }
.c434-music-player[data-theme="dark"] { --mp-bg: #1a1a2e; --mp-text: #f0f0f0; --mp-sub: #aaa; --mp-accent: #1db954; --mp-border: #333; }

/* Card — full width */
.c434-mp-card { background: var(--mp-bg); border: 1px solid var(--mp-border); border-radius: 16px; overflow: hidden; width: 100%; font-family: inherit; box-shadow: 0 2px 12px rgba(0,0,0,.08); }

/* Two-column body */
.c434-mp-body { display: flex; align-items: stretch; }

/* Left column: art + info + controls + up-next */
.c434-mp-player-col { flex: 0 0 300px; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 20px; border-right: 1px solid var(--mp-border); }

.c434-mp-art { position: relative; width: 220px; height: 220px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: var(--mp-border); display: flex; align-items: center; justify-content: center; }
.c434-mp-art img { width: 100%; height: 100%; object-fit: cover; }
.c434-mp-art-icon { font-size: 3rem; line-height: 1; }

.c434-mp-info { width: 100%; text-align: center; min-width: 0; }
.c434-mp-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mp-accent); margin-bottom: 4px; }
.c434-mp-title { font-size: 16px; font-weight: 700; color: var(--mp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c434-mp-artist { font-size: 13px; color: var(--mp-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.c434-mp-progress-wrap { width: 100%; }
.c434-mp-progress-bar { height: 4px; background: var(--mp-border); border-radius: 2px; overflow: hidden; }
.c434-mp-progress-fill { height: 100%; width: 0%; background: var(--mp-accent); border-radius: 2px; transition: width .5s linear; }

.c434-mp-controls { display: flex; gap: 8px; align-items: center; justify-content: center; }
.c434-mp-btn { background: none; border: none; cursor: pointer; color: var(--mp-text); font-size: 18px; padding: 6px 8px; border-radius: 6px; line-height: 1; transition: background .15s; }
.c434-mp-btn:hover { background: var(--mp-border); }
.c434-mp-play-pause { font-size: 26px; color: var(--mp-accent); }
.c434-mp-resync { font-size: 14px; color: var(--mp-sub); }

.c434-mp-up-next { width: 100%; padding-top: 12px; border-top: 1px solid var(--mp-border); font-size: 12px; color: var(--mp-sub); text-align: center; }
.c434-mp-up-next-label { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mp-sub); margin-right: 4px; }
.c434-mp-up-next-title { color: var(--mp-text); font-weight: 600; }
.c434-mp-up-next-sep { margin: 0 4px; }

/* Right column: lyrics */
.c434-mp-lyrics-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 24px 20px; }
.c434-mp-lyrics-header { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mp-accent); margin-bottom: 16px; flex-shrink: 0; }
.c434-mp-lyrics-content { flex: 1; overflow-y: auto; min-height: 260px; max-height: 400px; padding-right: 6px; scroll-behavior: smooth; }
.c434-mp-lyrics-content::-webkit-scrollbar { width: 4px; }
.c434-mp-lyrics-content::-webkit-scrollbar-thumb { background: var(--mp-border); border-radius: 2px; }
.c434-mp-lyrics-line { font-size: 14px; color: var(--mp-sub); margin: 10px 0; line-height: 1.55; transition: color .25s, font-size .25s, font-weight .25s; cursor: default; }
.c434-mp-lyrics-line.active { color: var(--mp-text); font-weight: 700; font-size: 16px; }
.c434-mp-lyrics-empty { font-size: 13px; color: var(--mp-sub); font-style: italic; }

.c434-mp-spotify-strip { padding: 0; height: 0; overflow: hidden; visibility: hidden; }

/* Auth bar */
.c434-mp-auth-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 16px; background:#f0fdf4; border-bottom:1px solid #bbf7d0; font-size:12px; color:#166534; }
.c434-music-player[data-theme="dark"] .c434-mp-auth-bar { background:#052e16; border-color:#166534; color:#86efac; }
.c434-mp-auth-login { display:flex; align-items:center; gap:8px; flex:1; min-width:0; flex-wrap:wrap; }
.c434-mp-auth-prompt { flex:1; min-width:0; }
.c434-mp-spotify-icon { flex-shrink:0; vertical-align:middle; }
.c434-mp-auth-login-btn { flex-shrink:0; background:#1db954; color:#fff; border:none; border-radius:20px; padding:4px 14px; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; }
.c434-mp-auth-login-btn:hover { background:#17a349; }
.c434-mp-auth-status { flex:1; font-weight:600; }
.c434-mp-auth-error { flex:1; color:#dc2626; font-size:11px; }
.c434-mp-auth-dismiss { flex-shrink:0; background:none; border:none; cursor:pointer; color:inherit; font-size:12px; opacity:.6; padding:2px 4px; line-height:1; }
.c434-mp-auth-dismiss:hover { opacity:1; }

.c434-mp-loading,
.c434-mp-error,
.c434-music-player-error { padding: 20px; border-radius: 16px; border: 1px solid var(--mp-border, #e5e7eb); background: var(--mp-bg, #fff); color: var(--mp-text, #111); box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.c434-mp-error,
.c434-music-player-error { color: #b91c1c; }

/* Responsive: stack vertically on small screens */
@media (max-width: 640px) {
  .c434-mp-body { flex-direction: column; }
  .c434-mp-player-col { flex: none; width: 100%; border-right: none; border-bottom: 1px solid var(--mp-border); }
  .c434-mp-art { width: 160px; height: 160px; }
  .c434-mp-lyrics-content { min-height: 180px; max-height: 260px; }
}