/* IW Player for Suno Pro — front-end. Scoped + hard-reset so themes can't bleed in. */
.iwsp-card, .iwsp-card *, .iwsp-playlist, .iwsp-playlist *, .iwsp-grid, .iwsp-grid * { box-sizing: border-box; }
.iwsp-card, .iwsp-playlist, .iwsp-grid {
	--iwsp-primary: #7c3aed;
	--iwsp-bg: #fff; --iwsp-fg: #111827; --iwsp-muted: #6b7280; --iwsp-panel: #f6f5fb; --iwsp-border: #ece9f6;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.iwsp-mode-dark { --iwsp-bg:#15131c; --iwsp-fg:#f3f4f6; --iwsp-muted:#9aa0ab; --iwsp-panel:#211d2b; --iwsp-border:#2c2738; }
@media (prefers-color-scheme: dark) {
	.iwsp-mode-auto { --iwsp-bg:#15131c; --iwsp-fg:#f3f4f6; --iwsp-muted:#9aa0ab; --iwsp-panel:#211d2b; --iwsp-border:#2c2738; }
}

/* Single card */
.iwsp-card {
	max-width: 460px; margin: 1.5em 0; color: var(--iwsp-fg); line-height: 1.35;
	background: var(--iwsp-bg); border: 1px solid var(--iwsp-border); border-radius: 14px; padding: 14px;
	box-shadow: 0 1px 4px rgba(17,12,46,.06);
}
.iwsp-card .iwsp-card-head { display: flex !important; align-items: center; gap: 12px; margin: 0 0 12px; }
.iwsp-card .iwsp-card-cover {
	width: 72px !important; height: 72px !important; min-width: 72px !important; max-width: 72px !important;
	margin: 0 !important; border-radius: 10px !important; object-fit: cover !important; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center; background: #ede9fe; color: #a78bfa; font-size: 26px;
}
.iwsp-card .iwsp-card-meta { display: flex !important; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.iwsp-card .iwsp-card-title { font-weight: 700; font-size: 1.04em; color: var(--iwsp-fg); line-height: 1.25; }
.iwsp-card .iwsp-card-artist { font-size: .9em; color: var(--iwsp-muted); display: flex; align-items: center; gap: 6px; }
.iwsp-card .iwsp-card-artist a { color: var(--iwsp-muted) !important; text-decoration: none !important; }
.iwsp-avatar { border-radius: 50%; object-fit: cover; }
.iwsp-card .iwsp-card-style { font-size: .78em; color: var(--iwsp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.iwsp-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.iwsp-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; background: rgba(124,58,237,.1); color: var(--iwsp-primary); padding: .25em .5em; border-radius: 999px; }
.iwsp-badge-e { background: rgba(220,38,38,.12); color: #b91c1c; }

.iwsp-player-bar { display: flex !important; align-items: center; gap: 10px; background: var(--iwsp-panel); border: 1px solid var(--iwsp-border); border-radius: 10px; padding: 8px 10px; }
.iwsp-card .iwsp-btn, .iwsp-playlist .iwsp-btn, .iwsp-grid .iwsp-btn {
	-webkit-appearance: none; appearance: none; display: inline-flex !important; align-items: center; justify-content: center;
	width: 40px !important; height: 40px !important; min-width: 0 !important; max-width: 40px !important;
	padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important;
	background: var(--iwsp-primary) !important; color: #fff !important; font-size: 14px; line-height: 1; cursor: pointer; box-shadow: none !important; flex: 0 0 auto;
}
.iwsp-btn:hover { filter: brightness(.92); }
.iwsp-prev, .iwsp-next { background: transparent !important; color: var(--iwsp-primary) !important; width: 34px !important; max-width: 34px !important; height: 34px !important; font-size: 16px; }
.iwsp-seek { flex: 1 1 auto; min-width: 0; accent-color: var(--iwsp-primary); height: 4px; cursor: pointer; }
.iwsp-time { font-variant-numeric: tabular-nums; font-size: .82em; color: var(--iwsp-muted); min-width: 3.4em; text-align: right; }
.iwsp-stats { margin: 8px 0 0; display: flex; gap: 12px; font-size: .82em; color: var(--iwsp-muted); }
.iwsp-card-desc { margin: 10px 0 0; color: var(--iwsp-fg); font-size: .92em; }
.iwsp-lyrics { margin-top: 10px; }
.iwsp-lyrics summary { cursor: pointer; font-weight: 600; color: var(--iwsp-primary); }
.iwsp-lyrics-text { white-space: pre-wrap; font-family: inherit; background: var(--iwsp-panel); border: 1px solid var(--iwsp-border); border-radius: 8px; padding: .7em .8em; color: var(--iwsp-fg); margin: .5em 0 0; }
.iwsp-card-footer { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5em .7em; }
.iwsp-card-suno { display: inline-block; font-size: 12px !important; font-weight: 600; text-decoration: none !important; color: var(--iwsp-primary) !important; background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.22); border-radius: 999px; padding: .38em .75em; }
.iwsp-disclaimer-note { font-size: 11px; color: #9ca3af; }
.iwsp-invite { margin: 8px 0 0; }
.iwsp-invite-link { display: inline-block; font-size: 13px !important; font-weight: 600; text-decoration: none !important; color: #fff !important; background: var(--iwsp-primary); border-radius: 8px; padding: .5em 1em; }
.iwsp-notice, .iwsp-error { color: var(--iwsp-muted); }

/* Layout variants */
.iwsp-layout-compact .iwsp-card-cover { width: 56px !important; height: 56px !important; min-width: 56px !important; max-width: 56px !important; }
.iwsp-layout-minimal .iwsp-card-head { display: none !important; }

/* Playlist */
.iwsp-playlist { max-width: 560px; margin: 1.5em 0; color: var(--iwsp-fg); background: var(--iwsp-bg); border: 1px solid var(--iwsp-border); border-radius: 14px; padding: 14px; }
.iwsp-pl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.iwsp-pl-cover { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.iwsp-pl-name { font-weight: 700; font-size: 1.1em; display: block; }
.iwsp-pl-desc { font-size: .9em; color: var(--iwsp-muted); }
.iwsp-now { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.iwsp-now-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iwsp-now-artist { font-size: .85em; color: var(--iwsp-muted); }
.iwsp-tracklist { list-style: none; margin: .6em 0 0; padding: 0; }
.iwsp-track { display: flex; align-items: center; gap: .7em; padding: .5em .4em; border-bottom: 1px solid var(--iwsp-border); }
.iwsp-track.is-active { background: rgba(124,58,237,.08); border-radius: 8px; }
.iwsp-track-cover { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.iwsp-track-play { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; background: none; border: 0; cursor: pointer; text-align: left; padding: 0; min-width: 0; color: inherit; }
.iwsp-track-title { font-weight: 600; }
.iwsp-track-artist { font-size: .85em; color: var(--iwsp-muted); }
.iwsp-track-dur { font-size: .8em; color: var(--iwsp-muted); }

/* Grid */
.iwsp-grid { display: grid; grid-template-columns: repeat(var(--iwsp-cols,3), minmax(0,1fr)); gap: 14px; margin: 1.5em 0; }
.iwsp-grid .iwsp-grid-item { margin: 0; max-width: none; }
.iwsp-grid-cover { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; display: block; background: #ede9fe; }
.iwsp-grid-title { font-weight: 700; display: block; margin-top: 8px; font-size: .95em; }
.iwsp-grid-artist { font-size: .85em; color: var(--iwsp-muted); display: block; }
.iwsp-grid-bar { margin-top: 8px; padding: 6px 8px; }
.iwsp-grid-disc { grid-column: 1 / -1; }
@media (max-width: 600px) { .iwsp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Add form */
.iwsp-upload-form { max-width: 460px; }
.iwsp-upload-form p { margin: 0 0 .8em; display: flex; flex-direction: column; gap: .25em; }
.iwsp-upload-form input[type="url"] { width: 100%; }
.iwsp-upload-form .iwsp-upload-submit { -webkit-appearance: none; appearance: none; border: 0; border-radius: 8px; background: var(--iwsp-primary,#7c3aed); color: #fff; padding: .55em 1.1em; font-size: 14px; font-weight: 600; cursor: pointer; width: auto !important; height: auto !important; max-width: none !important; }
.iwsp-upload-status { margin-left: .6em; font-size: .9em; color: var(--iwsp-muted); }