/* ================= TEME ================= */
:root {
    color-scheme: dark;
    --bg: #08080a;
    --panel: #121216;
    --panel-2: #18181e;
    --field: #1a1a21;
    --hover: #1d1d25;
    --line: #2a2a34;
    --line-2: #3a3a46;
    --text: #f5f5f7;
    --soft: #d6d6de;
    --muted: #9c9cab;
    --accent: #fbbf24;
    --accent-strong: #f59e0b;
    --accent-ink: #1a1203;
    --accent-soft: rgba(251, 191, 36, 0.13);
    --ok: #22c55e;
    --danger: #ef4444;
    --topbar: rgba(8, 8, 10, 0.86);
    --shadow: rgba(0, 0, 0, 0.55);
    --radius: 16px;
    --topbar-h: 62px;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html[data-theme="white"] {
    color-scheme: light;
    --bg: #f6f5f2;
    --panel: #ffffff;
    --panel-2: #f9f8f6;
    --field: #ffffff;
    --hover: #efede8;
    --line: #e2dfd8;
    --line-2: #cdc9bf;
    --text: #111111;
    --soft: #2b2b2b;
    --muted: #66645e;
    --accent: #b45309;
    --accent-strong: #92400e;
    --accent-ink: #ffffff;
    --accent-soft: rgba(180, 83, 9, 0.1);
    --ok: #15803d;
    --danger: #b91c1c;
    --topbar: rgba(246, 245, 242, 0.9);
    --shadow: rgba(30, 25, 15, 0.12);
}

/* Izvođački ekrani: čista crna ili čista bijela pozadina za najbolji kontrast */
.stage { --bg: #000; --panel: #0d0d10; }
html[data-theme="white"] .stage { --bg: #fff; --panel: #f7f6f3; }

/* ================= OSNOVA ================= */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); line-height: 1.5; transition: background .15s, color .15s; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; }
h1 { margin: 0 0 6px; font-size: clamp(26px, 4vw, 36px); font-weight: 800; }
h2 { font-size: 1.3rem; font-weight: 750; }
code { background: var(--field); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; font-size: .9em; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); margin: 8px 2px; }

/* ================= GORNJA TRAKA ================= */
.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    min-height: var(--topbar-h);
    padding: 10px max(16px, calc((100vw - 1140px) / 2));
    background: var(--topbar);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; color: var(--text); white-space: nowrap; letter-spacing: -0.01em; }
.brand-mark {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    background: var(--accent); color: var(--accent-ink); font-size: 19px; font-weight: 900;
    box-shadow: 0 0 22px var(--accent-soft);
}

nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
nav a, nav .theme-toggle, nav .offline-download {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 12px; border-radius: 10px;
    color: var(--muted); font-size: .92rem; font-weight: 600; white-space: nowrap;
    transition: color .15s, background .15s;
}
nav a:hover { color: var(--text); background: var(--hover); }
nav a.active { color: var(--text); background: var(--hover); box-shadow: inset 0 -2px 0 var(--accent); }
nav .nav-live { color: var(--text); border: 1px solid var(--line-2); }
nav .nav-live .dot, .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
nav .nav-quiet { color: var(--muted); }

.theme-toggle {
    padding: 8px 12px; border-radius: 10px;
    background: var(--field); border: 1px solid var(--line); color: var(--text);
    font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.theme-toggle:hover { border-color: var(--line-2); }

/* Na manjim ekranima izbornik se pomiče vodoravno; nijedna stavka se ne skriva */
@media (max-width: 980px) {
    .topbar { flex-wrap: wrap; gap: 8px 12px; padding-bottom: 8px; }
    nav { order: 2; width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px 2px; }
    nav::-webkit-scrollbar { display: none; }
    nav .theme-toggle { font-size: 0; padding: 8px 11px; }
    nav .theme-toggle::after { content: '◐'; font-size: 1rem; }
}

/* ================= RASPORED ================= */
.container { width: min(1140px, calc(100% - 32px)); margin: 26px auto 80px; }
.narrow { width: min(800px, calc(100% - 32px)); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin: 6px 0 22px; }
.page-head p { margin: 0; color: var(--muted); }

.card {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: clamp(20px, 4vw, 32px);
    box-shadow: 0 20px 50px -20px var(--shadow);
}
.card + .card { margin-top: 18px; }

/* ================= OBRASCI ================= */
label { display: grid; gap: 7px; font-weight: 650; font-size: .95rem; margin: 14px 0; }
input, textarea, select, .search {
    width: 100%; color: var(--text); background: var(--field);
    border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
textarea { line-height: 1.5; resize: vertical; }
input:focus, textarea:focus, select:focus, .search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row label { margin: 14px 0 0; }
fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 6px 18px 18px; margin: 22px 0; }
legend { padding: 0 8px; font-weight: 800; }
.check-label { display: flex; align-items: center; gap: 9px; font-weight: 500; margin: 0; }
.check-label input { width: auto; accent-color: var(--accent); }
small.muted { display: block; margin-top: 10px; }

/* ================= GUMBI ================= */
button, .button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 11px 18px; border: 0; border-radius: 12px;
    background: var(--accent); color: var(--accent-ink);
    font: inherit; font-weight: 750; cursor: pointer; white-space: nowrap;
    transition: transform .15s, background .15s, box-shadow .15s, opacity .15s;
}
button:hover, .button:hover { background: var(--accent-strong); }
button:active, .button:active { transform: translateY(1px); }
.secondary { background: var(--field); border: 1px solid var(--line-2); color: var(--text); }
.secondary:hover { background: var(--hover); }
.danger { background: var(--danger); color: #fff; }
.danger:hover { background: var(--danger); filter: brightness(1.1); }
button:disabled { opacity: .45; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ================= PORUKE ================= */
.alert { padding: 12px 15px; border-radius: 12px; background: var(--hover); border: 1px solid var(--line); }
.error { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .35); color: #fecaca; }
.success { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .35); color: #bbf7d0; }
html[data-theme="white"] .error { color: #991b1b; }
html[data-theme="white"] .success { color: #166534; }

/* ================= PRIJAVA ================= */
.auth {
    display: grid; place-items: center; padding: 20px;
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, var(--accent-soft), transparent 70%),
        var(--bg);
}
.auth-card { width: min(430px, 100%); }
.auth-card .brand { margin-bottom: 22px; font-size: 1.2rem; }
.auth-card .brand-mark { width: 42px; height: 42px; font-size: 23px; }
.auth-card button[type="submit"], .auth-card form > button { width: 100%; margin-top: 8px; }
.auth-theme { float: right; min-height: 0; margin: -6px -6px 10px 10px; }

/* ================= REPERTOAR ================= */
.search-panel {
    position: sticky; top: var(--topbar-h); z-index: 10;
    margin: 0 -8px; padding: 12px 8px 14px;
    background: linear-gradient(var(--bg) 82%, transparent);
}
.search-box { position: relative; }
.search-box::before {
    content: '⌕'; position: absolute; left: 20px; top: 50%; transform: translateY(-52%);
    font-size: 26px; color: var(--muted); pointer-events: none;
}
.search { font-size: clamp(19px, 2.6vw, 25px); padding: 16px 20px 16px 56px; border-radius: 16px; border-width: 2px; }
.search-panel .muted { display: flex; justify-content: space-between; gap: 12px; margin: 10px 4px 0; font-size: .92rem; }

.letter {
    position: relative; margin: 0; padding: 22px 6px 8px;
    font-size: .82rem; font-weight: 800; letter-spacing: .12em; color: var(--accent);
}
.song-list, .artist-songs { display: grid; gap: 2px; }

.song-row {
    display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 0 18px; align-items: center;
    border-radius: 12px; font-size: 17.5px; transition: background .12s;
}
.song-row:hover { background: var(--hover); }
.song-row .artist-link { display: block; padding: 13px 14px; font-weight: 750; color: var(--text); }
.song-row .artist-link:hover, .artist-inline:hover { color: var(--accent); }
.song-row .song, .artist-songs .song { display: flex; align-items: center; gap: 10px; padding: 13px 14px; color: var(--soft); }
.song-row .song:hover span, .artist-songs .song:hover span { color: var(--text); }
.artist-songs .song { border-radius: 12px; font-size: 17.5px; }
.artist-songs .song:hover { background: var(--hover); }

.song-row.is-live, .artist-songs .song.is-live { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.live-badge {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    padding: 3px 9px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
    font-size: .7rem; font-weight: 900; letter-spacing: .08em;
}

.missing { margin-top: 22px; }
.missing h2 { margin-top: 0; }

.artist-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin: 10px 0 22px; }
.artist-header h1 { margin-bottom: 2px; }
.artist-header .muted { margin: 0; }

/* ================= IZVOĐAČKI EKRAN ================= */
.stage-tools {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 8px;
    padding: 9px max(12px, env(safe-area-inset-left));
    background: var(--topbar); border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    overflow-x: auto; scrollbar-width: none;
}
.stage-tools::-webkit-scrollbar { display: none; }
.stage-tools a, .stage-tools button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 8px 12px; border-radius: 10px;
    background: var(--field); border: 1px solid var(--line); color: var(--text);
    font-size: .9rem; font-weight: 700; white-space: nowrap; flex: none;
}
.stage-tools a:hover, .stage-tools button:hover { background: var(--hover); border-color: var(--line-2); }
.stage-tools button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tool-group { display: inline-flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); flex: none; }
.tool-group a, .tool-group button { min-height: 36px; border: 0; background: transparent; }
.tool-group a:hover, .tool-group button:hover { background: var(--hover); }
.tool-spacer { flex: 1 0 8px; }
.stage-tools .back { font-weight: 800; }
.stage-tools [data-playback="start"] { background: var(--accent); color: var(--accent-ink); }
.stage-tools [data-playback="start"]:hover { background: var(--accent-strong); }

.playback-controls { display: inline-flex; gap: 4px; }
.playback-label {
    display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
    color: var(--soft); font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none;
}
.playback-error {
    position: sticky; top: 58px; z-index: 15; margin: 0; padding: 10px 16px; text-align: center;
    background: rgba(239, 68, 68, .16); border-bottom: 1px solid rgba(239, 68, 68, .4); color: #fecaca; font-weight: 600;
}
html[data-theme="white"] .playback-error { color: #991b1b; }

.live-status { display: inline-flex; align-items: center; gap: 7px; padding: 0 6px; font-size: .85rem; font-weight: 700; color: var(--ok); white-space: nowrap; flex: none; }
.live-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: pulse 2s ease-in-out infinite; }
.live-status.offline { color: var(--danger); }
@keyframes pulse { 50% { opacity: .35; } }

.lyrics-wrap { width: min(1080px, calc(100% - 34px)); margin: 26px auto 110px; }
.lyrics-wrap h1 { font-size: clamp(28px, 5vw, 50px); font-weight: 850; margin-bottom: 4px; letter-spacing: -0.03em; }
.artist { margin: 0 0 6px; color: var(--muted); font-size: clamp(17px, 2.6vw, 24px); font-weight: 600; }
.artist-inline { color: var(--accent); }
.lyrics {
    margin-top: 18px; white-space: pre-wrap; overflow-wrap: break-word;
    font-family: Arial, "Helvetica Neue", sans-serif; font-weight: 650; line-height: 1.45; color: var(--text);
}

.song-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 16px 0 6px; }
.song-meta div { padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.song-meta dt { color: var(--accent); font-size: .7rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.song-meta dd { margin: 3px 0 0; white-space: pre-wrap; font-weight: 700; line-height: 1.35; }

.live-stage.waiting .lyrics-wrap { text-align: center; margin-top: 20vh; }
.live-stage.waiting h1 { color: var(--muted); }
.live-stage.waiting .artist { margin-top: 14px; }
.live-stage.waiting .lyrics-wrap::before {
    content: '♪'; display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 26px;
    border-radius: 24px; background: var(--accent-soft); color: var(--accent); font-size: 44px;
    animation: pulse 2.4s ease-in-out infinite;
}

/* Cijeli tekst na jednom ekranu */
.stage.fit-mode .lyrics-wrap { width: calc(100% - 24px); margin: 12px auto 20px; }
.stage.fit-mode .lyrics-wrap h1 { font-size: clamp(20px, 3vw, 32px); margin-bottom: 0; }
.stage.fit-mode .artist { font-size: 16px; margin: 0 0 8px; }
.stage.fit-mode .song-meta { margin: 8px 0; }
.stage.fit-mode .lyrics { line-height: 1.22; margin-top: 8px; }
@media (min-width: 700px) { .stage.fit-mode .lyrics { column-count: 2; column-gap: 4vw; column-rule: 1px solid var(--line); } }
@media (min-width: 1400px) { .stage.fit-mode .lyrics { column-count: 3; } }

/* Note za klavijaturista */
.sheet-panel { width: 100%; }
.sheet-pages { display: grid; gap: 18px; justify-items: center; }
.sheet-page-image { display: block; width: min(1200px, 100%); height: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.sheet-page-pdf { display: block; width: min(1200px, 100%); height: 82vh; min-height: 600px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.sheet-missing {
    display: grid; place-items: center; min-height: 45vh; padding: 28px; text-align: center;
    border: 1.5px dashed var(--line-2); border-radius: 16px; color: var(--muted); font-size: clamp(18px, 3vw, 28px);
}
.keyboard-stage .lyrics-wrap { width: calc(100% - 20px); max-width: none; margin: 12px auto 20px; }
.keyboard-stage .lyrics-wrap h1 { font-size: clamp(24px, 4vw, 38px); margin-bottom: 0; }
.keyboard-stage .artist { font-size: clamp(16px, 2vw, 21px); margin-bottom: 9px; }
.keyboard-stage.waiting .sheet-panel { display: none; }
.keyboard-stage.waiting .lyrics-wrap { width: min(1050px, calc(100% - 34px)); margin-top: 20vh; }

/* ================= UREĐIVANJE PJESME ================= */
.song-details { margin: 22px 0; }
.sheet-upload { margin: 22px 0 0; }
.sheet-admin-list { display: grid; gap: 10px; margin: 6px 0 18px; }
.sheet-admin-page { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.sheet-admin-page a { color: var(--accent); }
.sheet-thumb { display: block; width: 72px; height: 90px; object-fit: cover; border-radius: 8px; background: #fff; }
.sheet-pdf-icon { display: grid; place-items: center; width: 72px; height: 90px; border-radius: 8px; background: #b91c1c; color: #fff; font-weight: 900; }
.camera-upload {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 68px; padding: 15px; border: 2px dashed var(--line-2); border-radius: 14px;
    background: var(--field); font-size: 1.05rem; cursor: pointer; transition: border-color .15s, background .15s;
}
.camera-upload:hover { border-color: var(--accent); background: var(--accent-soft); }
.camera-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ================= SETLISTE ================= */
.setlist-create, .setlist-add { display: flex; align-items: flex-end; gap: 12px; }
.setlist-create label, .setlist-add label { flex: 1; margin: 0; }
.setlist-list { display: grid; gap: 10px; margin-top: 20px; }
.setlist-card {
    display: flex; justify-content: space-between; align-items: center; gap: 18px;
    padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
    transition: border-color .15s, background .15s, transform .15s;
}
.setlist-card:hover { border-color: var(--accent); background: var(--hover); transform: translateY(-1px); }
.setlist-card strong { font-size: 1.05rem; }
.setlist-card span { color: var(--muted); white-space: nowrap; }
.setlist-items { display: grid; gap: 8px; margin: 22px 0; counter-reset: none; }
.setlist-item {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
    padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
}
.setlist-item.is-live { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.setlist-number { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 850; font-variant-numeric: tabular-nums; }
.setlist-play { display: grid; justify-content: start; justify-items: start; gap: 2px; min-height: 0; padding: 8px 10px; background: transparent; color: var(--text); text-align: left; white-space: normal; }
.setlist-play:hover { background: var(--hover); }
.setlist-play strong { font-size: 1rem; }
.setlist-play span { color: var(--muted); font-weight: 500; }
.setlist-actions { display: flex; gap: 4px; }
.setlist-actions button, .setlist-item form .secondary { min-height: 40px; padding: 8px 12px; }
.setlist-actions button { background: var(--field); border: 1px solid var(--line); color: var(--text); }
.setlist-actions button:hover { background: var(--hover); }
.setlist-settings { margin-top: 30px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.setlist-settings summary { font-weight: 800; cursor: pointer; }
.setlist-settings form { margin: 16px 0 0; }
.empty-state { padding: 34px 6px; text-align: center; }

/* ================= KORISNICI ================= */
.user-list { display: grid; gap: 10px; }
.user-row { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); }
.user-row-main { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.user-name { display: flex; align-items: center; gap: 12px; }
.user-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 850; text-transform: uppercase; }
.user-date { display: block; color: var(--muted); font-size: .84rem; margin-top: 2px; }
.user-role-actions { display: flex; align-items: center; gap: 8px; margin: 0; }
.user-role-actions select { width: auto; min-width: 150px; padding: 9px 12px; }
.user-role-actions button { min-height: 42px; padding: 9px 14px; }
.user-more { margin-top: 10px; }
.user-more summary { color: var(--muted); font-size: .9rem; cursor: pointer; }
.user-more form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.user-more label { flex: 1 1 180px; margin: 0; }
.role-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--hover); color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

/* ================= OFFLINE ================= */
.offline-download { background: var(--field) !important; color: var(--text) !important; border: 1px solid var(--line) !important; min-height: 0; white-space: nowrap; }

/* ================= MOBITEL ================= */
@media (max-width: 700px) {
    .search-panel .muted span + span { display: none; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .song-row { grid-template-columns: 1fr; }
    .song-row .artist-link { padding: 12px 14px 0; font-size: .92em; color: var(--muted); }
    .song-row .song { padding: 2px 14px 12px; color: var(--text); font-weight: 600; }
    .artist-header, .page-head { flex-direction: column; align-items: stretch; }
    .artist-header .button, .page-head .button { width: 100%; }
    .setlist-create, .setlist-add { display: grid; }
    .setlist-item { grid-template-columns: auto minmax(0, 1fr) auto; }
    .setlist-item > form:last-child { grid-column: 2 / -1; }
    .setlist-item form .secondary { width: 100%; }
    .user-row-main { flex-direction: column; align-items: stretch; }
    .user-role-actions select { flex: 1; }
    .sheet-admin-page { grid-template-columns: 58px 1fr; }
    .sheet-thumb, .sheet-pdf-icon { width: 58px; height: 74px; }
    .sheet-admin-page .check-label { grid-column: 1 / -1; }
    .sheet-page-pdf { height: 75vh; min-height: 480px; }
    .playback-label { font-size: .8rem; }
}

@media print {
    .stage-tools, .topbar { display: none; }
    .stage, body { background: #fff; color: #000; }
    .lyrics, .lyrics-wrap h1 { color: #000; }
}