@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/outfit-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../fonts/cormorant-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../fonts/cormorant-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Cormorant Garamond";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/cormorant-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Cormorant Garamond";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/cormorant-italic-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --ink: #e8dfc8;
    --muted: #b7ad96;
    --gold: #d4b36a;
    --gold-2: #f0d392;
    --bg: #0c1018;
    --panel: #141a26;
    --line: rgba(212, 179, 106, 0.22);
    --danger: #e07a6a;
    --ok: #7dba8a;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Outfit", system-ui, sans-serif;
    --sidebar: #10141c;
    --main-bg: radial-gradient(900px 480px at 110% -8%, rgba(70, 90, 160, 0.28), transparent 52%), linear-gradient(180deg, #182238 0%, #0c1018 28%, #06080c 100%);
    --nav-active: #1e2636;
    --accent: #e11d48;
    --player: #0c1016;
    --glow: rgba(70, 90, 160, 0.2);
}
html[data-theme="normal"] {
    --ink: #e8dfc8;
    --muted: #b7ad96;
    --gold: #d4b36a;
    --gold-2: #f0d392;
    --bg: #0c1018;
    --panel: #141a26;
    --line: rgba(212, 179, 106, 0.22);
    --sidebar: #10141c;
    --main-bg: radial-gradient(900px 480px at 110% -8%, rgba(70, 90, 160, 0.28), transparent 52%), linear-gradient(180deg, #182238 0%, #0c1018 28%, #06080c 100%);
    --nav-active: #1e2636;
    --accent: #e11d48;
    --player: #0c1016;
    --glow: rgba(70, 90, 160, 0.2);
}
html[data-theme="christmas"] {
    --gold: #e4c36a;
    --gold-2: #fff0b8;
    --bg: #14080c;
    --panel: #241014;
    --line: rgba(228, 195, 106, 0.28);
    --sidebar: #1a0c10;
    --main-bg: linear-gradient(180deg, #3a1018 0%, #14080c 28%, #080406 100%);
    --nav-active: #4a1820;
    --accent: #c41e3a;
    --player: #12080a;
    --glow: rgba(196, 30, 58, 0.22);
}
html[data-theme="advent"] {
    --gold: #d4b36a;
    --gold-2: #f0d392;
    --bg: #12081c;
    --panel: #1c1230;
    --line: rgba(124, 58, 237, 0.28);
    --sidebar: #161022;
    --main-bg: linear-gradient(180deg, #2a1848 0%, #12081c 30%, #07050e 100%);
    --nav-active: #3a2460;
    --accent: #7c3aed;
    --player: #100818;
    --glow: rgba(124, 58, 237, 0.22);
}
html[data-theme="epiphany"] {
    --gold: #f0d392;
    --gold-2: #fff3c4;
    --bg: #0a1224;
    --panel: #142038;
    --line: rgba(212, 160, 23, 0.28);
    --sidebar: #101828;
    --main-bg: linear-gradient(180deg, #1a3060 0%, #0a1224 32%, #050814 100%);
    --nav-active: #243868;
    --accent: #d4a017;
    --player: #0a1220;
    --glow: rgba(212, 160, 23, 0.2);
}
html[data-theme="ash"] {
    --gold: #c4b49a;
    --gold-2: #e6dcc8;
    --bg: #121212;
    --panel: #1c1c1c;
    --line: rgba(196, 180, 154, 0.22);
    --sidebar: #161616;
    --main-bg: linear-gradient(180deg, #2a2a2a 0%, #121212 30%, #080808 100%);
    --nav-active: #333;
    --accent: #8a7a6a;
    --player: #101010;
    --glow: rgba(180, 170, 150, 0.12);
}
html[data-theme="palm"] {
    --gold: #c9b45a;
    --gold-2: #efe08a;
    --bg: #10180c;
    --panel: #1a2814;
    --line: rgba(107, 143, 58, 0.28);
    --sidebar: #141c10;
    --main-bg: linear-gradient(180deg, #243818 0%, #10180c 30%, #070a05 100%);
    --nav-active: #2c4420;
    --accent: #6b8f3a;
    --player: #0c1408;
    --glow: rgba(107, 143, 58, 0.18);
}
html[data-theme="goodfriday"] {
    --gold: #c45c5c;
    --gold-2: #e8a0a0;
    --bg: #0a0606;
    --panel: #1a1010;
    --line: rgba(139, 30, 30, 0.3);
    --sidebar: #120c0c;
    --main-bg: linear-gradient(180deg, #2a1010 0%, #0a0606 28%, #050303 100%);
    --nav-active: #3a1818;
    --accent: #8b1e1e;
    --player: #0c0808;
    --glow: rgba(139, 30, 30, 0.22);
}
html[data-theme="easter"] {
    --gold: #f0d392;
    --gold-2: #fff6d2;
    --bg: #10140c;
    --panel: #1c2418;
    --line: rgba(212, 179, 106, 0.28);
    --sidebar: #141810;
    --main-bg: linear-gradient(180deg, #3a3420 0%, #14180e 28%, #080a06 100%);
    --nav-active: #3a4030;
    --accent: #d4b36a;
    --player: #10140c;
    --glow: rgba(240, 211, 146, 0.2);
}
html[data-theme="ascension"] {
    --gold: #dce8ff;
    --gold-2: #ffffff;
    --bg: #0c1424;
    --panel: #182438;
    --line: rgba(126, 176, 255, 0.28);
    --sidebar: #101828;
    --main-bg: linear-gradient(180deg, #2a4878 0%, #0c1424 32%, #060a12 100%);
    --nav-active: #2a4068;
    --accent: #7eb0ff;
    --player: #0c1420;
    --glow: rgba(126, 176, 255, 0.2);
}
html[data-theme="pentecost"] {
    --gold: #ffb14a;
    --gold-2: #ffe08a;
    --bg: #180808;
    --panel: #2a1010;
    --line: rgba(226, 58, 26, 0.3);
    --sidebar: #1c0c0c;
    --main-bg: linear-gradient(180deg, #5a1810 0%, #180808 30%, #0a0404 100%);
    --nav-active: #6a2418;
    --accent: #e23a1a;
    --player: #140808;
    --glow: rgba(226, 58, 26, 0.22);
}
html[data-theme="allsaints"] {
    --gold: #e8e2d0;
    --gold-2: #fffaf0;
    --bg: #10141c;
    --panel: #1c2430;
    --line: rgba(196, 180, 154, 0.26);
    --sidebar: #141820;
    --main-bg: linear-gradient(180deg, #2a3040 0%, #10141c 30%, #080a10 100%);
    --nav-active: #3a4458;
    --accent: #c4b49a;
    --player: #10141a;
    --glow: rgba(232, 226, 208, 0.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    font-family: var(--sans);
    color: var(--ink);
    background:
        radial-gradient(1200px 500px at 10% -10%, var(--glow), transparent 50%),
        radial-gradient(900px 600px at 110% 10%, rgba(70, 90, 160, 0.18), transparent 45%),
        var(--bg);
    letter-spacing: 0.01em;
}

body::before {
    content: "";
    pointer-events: none;
    position: fixed;
    inset: 0;
    opacity: 0.04;
    background-image: radial-gradient(rgba(232, 223, 200, 0.35) 0.6px, transparent 0.7px);
    background-size: 3px 3px;
}
.studio-ui::before { display: none; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-2); }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(12, 16, 24, 0.78);
}

.brand {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    color: var(--ink);
}
.brand strong {
    display: block;
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.brand small { color: var(--muted); font-size: 0.75rem; }
.brand-mark {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 0.7rem;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 2px solid #d4b36a;
}

.nav { display: flex; gap: 1rem; align-items: center; }
.nav-user { color: var(--muted); font-size: 0.9rem; }

.btn, .file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
}
.btn-gold { background: linear-gradient(180deg, #e3c27a, #b99145); color: #1a1408; border: none; font-weight: 600; }
.btn-ghost { background: rgba(255,255,255,0.03); }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
[hidden] { display: none !important; }

.flash {
    margin: 0.75rem 1.5rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--line);
}
.flash-ok { background: rgba(125, 186, 138, 0.12); }
.flash-err { background: rgba(224, 122, 106, 0.12); }

.studio {
    display: grid;
    grid-template-columns: 1.1fr 0.95fr 1.05fr;
    gap: 1rem;
    padding: 1rem 1.5rem 2rem;
    min-height: calc(100vh - 8rem);
}
.panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%), var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 1rem;
    box-shadow: var(--shadow);
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.panel-head {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.panel-head h2, h1, h2 {
    font-family: var(--serif);
    font-weight: 600;
    margin: 0;
}
.playlist-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
}
.playlist-head-actions select { min-width: 9rem; }

.song-picker {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 1rem;
}
.song-picker[hidden] { display: none !important; }
.song-picker-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(5, 8, 13, 0.82);
    backdrop-filter: blur(5px);
    cursor: default;
}
.song-picker-dialog {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    height: min(760px, calc(100dvh - 2rem));
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--panel);
    box-shadow: var(--shadow);
}
.song-picker-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.8rem;
}
.song-picker-head p { margin: 0.2rem 0 0; }
.song-picker-search {
    display: block;
    margin: 0 0 0.75rem;
    flex: 0 0 auto;
}
.song-picker-search input {
    font-size: 1rem;
    padding: 0.8rem 0.95rem;
    border-radius: 14px;
}
.song-picker-close {
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 1.5rem;
    cursor: pointer;
}
.picker-filters {
    margin-top: 0.75rem;
}
.song-picker-results {
    margin-top: 0.15rem;
    flex: 1;
    min-height: 0;
    overflow: auto;
}
.song-picker-dialog .pager {
    margin-top: 0.65rem;
    flex: 0 0 auto;
}
body.song-picker-open { overflow: hidden; }
.lede, .muted, .hint, .warn { color: var(--muted); }
.warn { font-size: 0.85rem; background: rgba(212,179,106,0.08); padding: 0.6rem 0.75rem; border-radius: 10px; }

input[type="search"], input[type="text"], input[type="email"], input[type="password"], select, textarea {
    width: 100%;
    background: #0d121c;
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 12px;
    padding: 0.65rem 0.8rem;
    font: inherit;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.filter-label {
    margin: 0.15rem 0 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.chip-btn, .chips button {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
}
.chip-btn[aria-pressed="true"], .chips button.active {
    color: #1a1408;
    background: var(--gold);
    border-color: var(--gold);
}

.song-list { overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 0.35rem; }
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--line);
}
.pager-meta { margin: 0; color: var(--muted); font-size: 0.8rem; }
.pager-btns { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pager-btns button, .pager-btns a {
    min-width: 2rem;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    border-radius: 8px;
    padding: 0.28rem 0.55rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
.pager-btns button.active, .pager-btns a.active {
    color: #1a1408;
    background: var(--gold);
    border-color: var(--gold);
}
.pager-btns button:disabled { opacity: 0.4; cursor: default; }
.song {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.55rem 0.6rem;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
}
.song:hover, .song.playing { background: rgba(212,179,106,0.08); border-color: var(--line); }
.song img, .thumb {
    width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: #0d121c;
}
.song strong { display: block; font-size: 0.92rem; }
.song small { color: var(--muted); }
.song-actions { display: flex; gap: 0.25rem; }
.song-actions button, .song-actions a {
    border: 0;
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    white-space: nowrap;
}
.song-actions button:disabled { color: var(--muted); cursor: default; }

.stage { align-items: center; text-align: center; }
.stage h1 { font-size: 2rem; margin-top: 0.4rem; }
.disc-wrap { perspective: 800px; margin-top: 0.5rem; }
.disc {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 8px solid #1b2233;
    box-shadow: 0 0 0 2px var(--gold), 0 20px 40px rgba(0,0,0,0.4);
    animation: none;
}
.disc.spin { animation: none; }
.disc img { width: 100%; height: 100%; object-fit: cover; }
@keyframes spin { to { transform: rotate(360deg); } }

.progress-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    align-items: center;
    width: 100%;
    margin: 1rem 0 0.5rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    font-size: 0.8rem;
}
input[type="range"] { width: 100%; accent-color: var(--gold); }

.controls { display: flex; gap: 0.6rem; align-items: center; justify-content: center; margin-top: 0.4rem; }
.controls.sub { flex-wrap: wrap; margin-top: 0.9rem; }
.icon-btn {
    width: 3rem; height: 3rem; border-radius: 50%;
    border: 1px solid var(--line);
    background: #0d121c;
    color: var(--ink);
    cursor: pointer;
    font-size: 1rem;
}
.icon-btn.play {
    width: 4rem; height: 4rem;
    background: linear-gradient(180deg, #e3c27a, #b99145);
    color: #1a1408;
    border: none;
    font-size: 1.2rem;
}
.vol { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.8rem; min-width: 140px; }
.hint { font-size: 0.82rem; margin-top: 1rem; max-width: 28rem; }

.playlist-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
.playlist-tools input { flex: 1; min-width: 8rem; }

.auth-wrap { display: grid; place-items: center; min-height: calc(100vh - 8rem); padding: 2rem 1rem; }
.auth-card, .card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
}
.auth-card { width: min(440px, 100%); display: grid; gap: 0.85rem; }
.auth-card h1 { font-size: 2.2rem; }
.form-error { color: var(--danger); }
.auth-split {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.auth-split::before, .auth-split::after {
    content: "";
    height: 1px;
    background: var(--line);
}
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 12px;
    background: #fff;
    color: #1f1f1f;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.btn-google:hover {
    background: #f7f7f7;
    color: #1f1f1f;
    border-color: #fff;
}
.btn-google svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
label { display: grid; gap: 0.35rem; font-size: 0.88rem; color: var(--muted); }

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-items: center;
    padding: 1.1rem;
}
.auth-modal[hidden] { display: none !important; }
.auth-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(6, 8, 14, 0.78);
    backdrop-filter: blur(10px);
    cursor: pointer;
}
.auth-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    max-height: min(92dvh, 920px);
    overflow: auto;
}
.auth-modal .auth-card {
    width: 100%;
    margin: 0;
}
.auth-modal-close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    z-index: 2;
    width: 2.35rem;
    height: 2.35rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    color: var(--ink);
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
}
.auth-modal-close:hover { background: rgba(255,255,255,0.18); }
.auth-modal-dismiss {
    width: 100%;
    margin-top: 0.15rem;
}
body.auth-modal-open { overflow: hidden; }

.admin {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem 3rem;
}
.admin-nav { display: flex; flex-direction: column; gap: 0.4rem; }
.admin-nav a {
    color: var(--muted);
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
}
.admin-nav a.active, .admin-nav a:hover { background: rgba(212,179,106,0.12); color: var(--ink); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin: 1rem 0 1.5rem; }
.stat { text-align: center; }
.stat span { display: block; font-family: var(--serif); font-size: 2rem; color: var(--gold); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--line); }
.library-tree {
    margin-top: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #0d121c;
    padding: 0.7rem 0.8rem 1rem;
}
.lib-root, .lib-artist > summary, .lib-album > summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    list-style: none;
}
.lib-root { color: var(--gold); font-weight: 600; padding: 0.35rem 0 0.7rem; }
.lib-artist > summary::-webkit-details-marker,
.lib-album > summary::-webkit-details-marker { display: none; }
.lib-artist > summary, .lib-album > summary { padding: 0.45rem 0.35rem; border-radius: 10px; }
.lib-artist > summary:hover, .lib-album > summary:hover { background: rgba(212,179,106,0.08); }
.lib-artist > summary small, .lib-album > summary small { margin-left: auto; color: var(--muted); font-weight: 400; }
.lib-folder-ico {
    width: 1.15rem;
    height: 0.9rem;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #c9a45a, #8d6b2e);
    box-shadow: 0 6px 0 -3px #6f5424;
    flex-shrink: 0;
}
.lib-children { margin: 0.15rem 0 0.55rem 1.35rem; border-left: 1px dashed var(--line); padding-left: 0.75rem; }
.lib-folder-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.15rem;
    margin: 0.35rem 0 0.5rem;
}
.lib-artist-block { margin-bottom: 0.85rem; }
.lib-album-block {
    margin: 0.25rem 0 0.85rem 1.35rem;
    border-left: 1px dashed var(--line);
    padding-left: 0.85rem;
}
.lib-album-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--gold);
    margin-bottom: 0.35rem;
}
.lib-file {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0.5rem;
    border-radius: 10px;
    border: 1px solid transparent;
}
.lib-file:hover { background: rgba(212,179,106,0.08); border-color: var(--line); }
.lib-file strong { display: block; font-size: 0.95rem; }
.lib-file small { color: var(--muted); word-break: break-all; }
.lib-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin: 0.85rem 0 0.65rem;
}
.lib-per {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.88rem;
}
.lib-per select { width: auto; min-width: 4.5rem; }
.lib-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
    cursor: pointer;
}
.lib-check input { margin-top: 0.35rem; accent-color: var(--gold); }
.lib-check span { min-width: 0; }
.lib-folder {
    margin: 0.15rem 0 0.35rem;
    border: 1px solid transparent;
    border-radius: 12px;
}
.lib-folder[open] { background: rgba(255,255,255,0.02); border-color: var(--line); }
.lib-folder-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
    padding: 0.55rem 0.5rem;
    border-radius: 12px;
}
.lib-folder-summary::-webkit-details-marker { display: none; }
.lib-folder-summary:hover { background: rgba(212,179,106,0.08); }
.lib-folder-summary .lib-check { align-items: center; flex: 1; }
.lib-folder-summary small { color: var(--muted); }
.btn-danger {
    background: rgba(200, 80, 80, 0.16);
    color: #f3c2c2;
    border: 1px solid rgba(200, 80, 80, 0.35);
}
.library-form .lib-album-block { margin-left: 1.6rem; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.row-actions { display: flex; gap: 0.75rem; align-items: center; }
.link-danger, .row-actions button {
    background: none; border: 0; color: var(--danger); cursor: pointer; font: inherit;
}
.form-grid { display: grid; gap: 0.85rem; max-width: 560px; }
.form-grid.wide { max-width: 760px; }
.admin.upload-studio {
    width: 100%;
    height: calc(100dvh - 5.5rem);
    min-height: 28rem;
    align-items: stretch;
    padding-bottom: 0.75rem;
    overflow: hidden;
}
.admin.upload-studio > section {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.upload-workbench {
    display: grid;
    grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr);
    grid-template-areas: "fields preview";
    align-items: stretch;
    max-width: none;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    gap: 1.25rem;
}
.upload-workbench > input[type="hidden"] {
    display: none;
}
.upload-workbench .upload-fields {
    grid-area: fields;
    display: grid;
    gap: 0.85rem;
    align-content: start;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding-right: 0.2rem;
}
.upload-workbench .track-review {
    grid-area: preview;
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-self: stretch;
    width: 100%;
}
#shared-album-fields { display: grid; gap: 0.85rem; }
body:has(.admin.upload-studio) .site-foot { display: none; }
.upload-progress {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    background: rgba(8, 10, 18, 0.82);
}
.upload-progress[hidden] { display: none !important; }
.upload-progress-card {
    width: min(34rem, calc(100vw - 2rem));
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.4rem 1.5rem;
    box-shadow: var(--shadow);
}
.xfer-bar {
    height: 16px;
    margin: 1rem 0 0.7rem;
    border-radius: 999px;
    background: #0d121c;
    overflow: hidden;
    border: 1px solid var(--line);
}
.xfer-bar span {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #b99145, #f0d392);
    transition: width 0.12s linear;
}
.xfer-pct { font-family: var(--serif); font-size: 2rem; margin: 0; color: var(--gold); }
.xfer-bytes { margin: 0.25rem 0 0; }
.check { display: flex; align-items: center; gap: 0.5rem; color: var(--ink); }
.site-foot { text-align: center; color: var(--muted); padding: 1.5rem; font-size: 0.85rem; }
.nav { flex-wrap: wrap; }
.scripture { color: var(--gold-2); font-family: var(--serif); font-style: italic; min-height: 1.2em; }
.lyrics {
    text-align: left;
    width: 100%;
    max-height: 180px;
    overflow: auto;
    margin-top: 0.8rem;
    padding: 0.6rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 0.9rem;
}
.lyrics .active-line { color: var(--gold-2); font-weight: 600; }
.lyrics-block { white-space: pre-wrap; font-family: var(--sans); }
.eq, .tools-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.7rem;
}
.share-row, .playlist-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.page { padding: 1.25rem 1.5rem 3rem; max-width: 960px; margin: 0 auto; }
.media-hero { display: grid; grid-template-columns: 160px 1fr; gap: 1rem; }
.media-hero img { width: 160px; height: 160px; object-fit: cover; border-radius: 12px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.8rem; }
.card.mini { display: grid; gap: 0.4rem; color: inherit; }
.card.mini img { width: 100%; height: 140px; object-fit: cover; border-radius: 10px; }
.note { border-left: 3px solid var(--gold); padding-left: 0.8rem; }
.hour-chart { display: flex; align-items: flex-end; gap: 4px; height: 170px; margin: 1rem 0 2rem; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.bar { width: 100%; background: var(--gold); border-radius: 4px 4px 0 0; min-height: 2px; }
.mail { background: #0d121c; padding: 1rem; border-radius: 12px; white-space: pre-wrap; }
.embed-player { display: flex; gap: 0.8rem; padding: 0.8rem; align-items: center; }
.embed-player img { width: 88px; height: 88px; border-radius: 10px; object-fit: cover; }
.embed-player audio { width: 100%; }
.embed-body { background: var(--bg); }
.inline-form { display: inline; }
textarea { width: 100%; background: #0d121c; border: 1px solid var(--line); color: var(--ink); border-radius: 12px; padding: 0.65rem; font: inherit; }
.share-list { padding-left: 1.2rem; }
.share-list li { margin: 0.4rem 0; }
.track-review {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.9rem;
    background: #0d121c;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.review-empty {
    margin: auto 0;
    text-align: center;
    padding: 2rem 1rem;
}
.track-review h2,
.track-review .track-head,
.track-review > .muted,
.dup-box {
    flex-shrink: 0;
}
.track-review .track-list {
    flex: 1 1 auto;
    min-height: 240px;
    overflow: auto;
    align-content: start;
}
.track-review h2 { font-size: 1.3rem; margin-bottom: 0.35rem; }
.track-head, .track-row {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 1.2fr);
    gap: 0.75rem;
    align-items: start;
}
.track-head { color: var(--gold); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0.6rem 0 0.35rem; }
.track-list { display: grid; gap: 0.55rem; }
.track-row { padding: 0.45rem 0; border-top: 1px solid var(--line); }
.orig-name {
    display: block;
    color: var(--muted);
    font-size: 0.82rem;
    word-break: break-all;
    white-space: normal;
}
.trim-cell { display: grid; gap: 0.35rem; }
.trim-cell .btn { justify-self: start; padding: 0.25rem 0.7rem; font-size: 0.78rem; }
.dup-line { margin: 0; color: var(--danger); font-size: 0.8rem; }
.dup-box {
    margin-top: 0.8rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(224, 122, 106, 0.45);
    background: rgba(224, 122, 106, 0.1);
    border-radius: 12px;
    color: var(--ink);
}
.dup-box ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.track-row.is-dup { background: rgba(224, 122, 106, 0.08); border-radius: 10px; padding: 0.55rem 0.4rem; }
.same-album-check { font-weight: 600; color: var(--ink); }
.track-row-mixed { grid-template-columns: minmax(10rem, 0.7fr) minmax(16rem, 1.4fr); }
.mixed-fields { display: grid; gap: 0.45rem; }
.tag-note { font-size: 0.78rem; margin: 0; }

/* Player and playlist */
.studio.player-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: 1180px;
    margin: 0 auto;
    gap: 1rem;
    padding: 1rem 1.5rem 1.5rem;
    min-height: 0;
    align-items: stretch;
}
.studio.player-layout > .panel {
    min-height: 0;
    height: 100%;
    padding: 1rem 1.05rem;
    border-radius: 22px;
}
.stage, .queue {
    position: relative;
    overflow: hidden;
}
.stage {
    gap: 0.55rem;
    background:
        radial-gradient(circle at 18% 12%, rgba(212, 179, 106, 0.18), transparent 34%),
        linear-gradient(155deg, rgba(46, 57, 90, 0.3), rgba(12, 16, 24, 0.08) 58%),
        var(--panel);
}
.queue {
    gap: 0.55rem;
    background:
        radial-gradient(circle at 88% 8%, rgba(212, 179, 106, 0.16), transparent 32%),
        linear-gradient(200deg, rgba(46, 57, 90, 0.26), rgba(12, 16, 24, 0.08) 58%),
        var(--panel);
}
.stage::after, .queue::after {
    content: "";
    position: absolute;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    filter: blur(28px);
    pointer-events: none;
}
.stage::after {
    right: -11rem;
    bottom: -11rem;
    background: rgba(84, 105, 180, 0.16);
}
.queue::after {
    left: -11rem;
    bottom: -12rem;
    background: rgba(212, 179, 106, 0.1);
}
.now-bar {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem;
    text-align: left;
    width: 100%;
}
.now-text { min-width: 0; }
.now-playing-label {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.now-playing-label span {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 0 rgba(212, 179, 106, 0.5);
}
.stage.is-playing .now-playing-label span { animation: statusPulse 1.8s infinite; }
@keyframes statusPulse {
    70% { box-shadow: 0 0 0 9px rgba(212, 179, 106, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 179, 106, 0); }
}
.disc-wrap {
    position: relative;
    width: clamp(96px, 14vw, 132px);
    margin: 0;
    perspective: none;
    flex: 0 0 auto;
}
.disc-wrap::before {
    content: "";
    position: absolute;
    inset: 12% -8% -5%;
    z-index: 0;
    border-radius: 35%;
    background: rgba(212, 179, 106, 0.22);
    filter: blur(32px);
    opacity: 0.35;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.stage.is-playing .disc-wrap::before { opacity: 0.75; transform: scale(1.08); }
.disc {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 18px;
    border: 1px solid rgba(240, 211, 146, 0.65);
    background: #101522;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255,255,255,0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.disc.spin {
    animation: none;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 22px rgba(212, 179, 106, 0.32);
}
.disc img,
.disc-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform-origin: 50% 50%;
}
.disc-spin-ring {
    position: absolute;
    inset: 13%;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid rgba(212, 179, 106, 0.18);
    border-top-color: #f0d392;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.disc.spin .disc-logo {
    animation: discLogoPulse 1.8s ease-in-out infinite;
}
.disc.spin .disc-spin-ring {
    opacity: 1;
    animation: discLogoRing 1.2s linear infinite;
}
@keyframes discLogoPulse {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.22) saturate(1.15); }
}
@keyframes discLogoRing {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .disc.spin .disc-logo,
    .disc.spin .disc-spin-ring { animation: none; }
}
.stage h1 {
    max-width: 100%;
    font-size: clamp(1.25rem, 2.1vw, 1.7rem);
    line-height: 1.1;
    margin: 0.15rem 0 0;
}
.stage #now-meta {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
}
.stage .scripture {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
}
.stage .scripture:empty { display: none; }
.playing-waves {
    height: 12px;
    display: flex;
    align-items: end;
    gap: 3px;
    margin-top: 0.4rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.playing-waves i {
    display: block;
    width: 3px;
    height: 5px;
    border-radius: 99px;
    background: var(--gold);
}
.stage.is-playing .playing-waves { opacity: 1; }
.stage.is-playing .playing-waves i { animation: wave 0.8s ease-in-out infinite alternate; }
.playing-waves i:nth-child(2) { animation-delay: -0.35s !important; }
.playing-waves i:nth-child(3) { animation-delay: -0.6s !important; }
.playing-waves i:nth-child(4) { animation-delay: -0.2s !important; }
.playing-waves i:nth-child(5) { animation-delay: -0.45s !important; }
@keyframes wave { to { height: 12px; } }
.stage .progress-row {
    width: 100%;
    margin: 0.35rem 0 0.15rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(8, 11, 18, 0.5);
    font-size: 0.76rem;
}
#seek {
    appearance: none;
    height: 5px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--gold) var(--seek, 0%), rgba(255,255,255,0.18) var(--seek, 0%));
}
#seek::-webkit-slider-thumb {
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 3px solid var(--panel);
    background: var(--gold-2);
    box-shadow: 0 0 0 1px var(--gold);
    cursor: pointer;
}
.stage .controls { gap: 0.6rem; margin: 0; }
.stage .icon-btn {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 0.95rem;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.stage .icon-btn:hover { transform: translateY(-2px); border-color: var(--gold); background: rgba(212,179,106,0.1); }
.stage .icon-btn.play {
    width: 3.1rem;
    height: 3.1rem;
    font-size: 1.1rem;
    box-shadow: 0 8px 20px rgba(212, 179, 106, 0.24);
}
.stage .icon-btn.play:hover { transform: scale(1.06); background: var(--gold-2); }
.stage .controls.sub {
    width: 100%;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.5rem;
    border-radius: 12px;
    background: rgba(8, 11, 18, 0.34);
    font-size: 0.78rem;
}
.stage .controls.sub .chip-btn { padding: 0.28rem 0.6rem; font-size: 0.75rem; }
.stage .vol { gap: 0.35rem; }
.stage .vol input { width: 5.5rem; }

.stage-extras {
    width: 100%;
    margin-top: 0.15rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(8, 11, 18, 0.3);
    text-align: left;
}
.stage-extras > summary,
.queue-extras > summary {
    cursor: pointer;
    padding: 0.45rem 0.7rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    list-style: none;
}
.stage-extras > summary::marker,
.queue-extras > summary::marker { content: ""; }
.stage-extras > summary::after,
.queue-extras > summary::after { content: " ▾"; color: var(--gold); }
.stage-extras[open] > summary::after,
.queue-extras[open] > summary::after { content: " ▴"; }
.stage-extras > summary:hover,
.queue-extras > summary:hover { color: var(--gold-2); }
.stage-extras > *:not(summary) { margin: 0 0.7rem 0.7rem; }
.stage .tools-grid, .stage .eq {
    gap: 0.45rem;
    font-size: 0.75rem;
}
.stage .tools-grid label, .stage .eq label {
    padding: 0.4rem 0.5rem;
    border: 1px solid rgba(212,179,106,0.14);
    border-radius: 10px;
    background: rgba(8, 11, 18, 0.28);
}
.stage .tools-grid select { padding: 0.25rem 0.4rem; font-size: 0.78rem; }
.stage .lyrics {
    max-height: 130px;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    background: rgba(8, 11, 18, 0.38);
}
.stage .share-row { flex-wrap: wrap; justify-content: flex-start; gap: 0.4rem; }
.stage .share-row .btn { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
.stage .hint {
    margin: auto 0 0;
    padding-top: 0.35rem;
    font-size: 0.7rem;
    color: var(--muted);
}

.queue .panel-head {
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0;
}
.queue .panel-head h2 { font-size: 1.2rem; margin: 0; }
.playlist-head-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.playlist-head-actions .btn { padding: 0.38rem 0.85rem; font-size: 0.8rem; white-space: nowrap; }
.playlist-head-actions select {
    max-width: 10.5rem;
    padding: 0.38rem 0.6rem;
    border-radius: 99px;
    font-size: 0.78rem;
}
.queue .warn {
    margin: 0;
    padding: 0.4rem 0.65rem;
    border-radius: 10px;
    font-size: 0.74rem;
}
.queue-extras {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(8, 11, 18, 0.3);
    flex: 0 0 auto;
}
.queue-extras .playlist-tools { margin: 0 0.6rem 0.6rem; gap: 0.35rem; }
.queue-extras .playlist-tools .btn { padding: 0.28rem 0.55rem; font-size: 0.74rem; }
.queue-extras .playlist-tools input { padding: 0.3rem 0.5rem; font-size: 0.8rem; }
.panel-kicker {
    margin: 0 0 0.15rem;
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.playlist-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.7rem;
    height: 1.7rem;
    margin-left: 0.35rem;
    padding: 0 0.4rem;
    border-radius: 99px;
    background: rgba(212,179,106,0.14);
    color: var(--gold-2);
    font-family: var(--sans);
    font-size: 0.72rem;
    vertical-align: middle;
}
.playlist-songs {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    gap: 0.4rem;
    padding: 0.15rem 0.05rem;
    overflow-y: auto;
}
.song.queue-song {
    grid-template-columns: 1.6rem 42px minmax(0, 1fr) auto;
    gap: 0.55rem;
    padding: 0.48rem 0.55rem;
    border-radius: 14px;
    font-size: 0.82rem;
    border-color: rgba(212,179,106,0.16);
    background: linear-gradient(90deg, rgba(8, 11, 18, 0.42), rgba(8, 11, 18, 0.18));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.song.queue-song:hover {
    transform: translateX(-2px);
    border-color: rgba(212,179,106,0.45);
    background: linear-gradient(90deg, rgba(212,179,106,0.12), rgba(8, 11, 18, 0.22));
}
.song.queue-song.playing {
    border-color: var(--gold);
    background: linear-gradient(90deg, rgba(212,179,106,0.2), rgba(212,179,106,0.04));
    box-shadow: 0 0 0 1px rgba(212,179,106,0.18), 0 8px 18px rgba(0,0,0,0.18);
}
.queue-index {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}
.song.queue-song.playing .queue-index { color: var(--gold); }
.queue-song .thumb {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.28);
}
.queue-song strong { font-size: 0.88rem; }
.queue-song small { font-size: 0.72rem; }
.queue-song .song-actions { gap: 0.28rem; }
.queue-song .song-actions button,
.queue-song .song-actions .act-dl {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.72rem;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(212,179,106,0.18);
    border-radius: 50%;
    background: rgba(8, 11, 18, 0.45);
    color: var(--ink);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.queue-song .song-actions button:hover,
.queue-song .song-actions .act-dl:hover {
    color: var(--gold-2);
    border-color: var(--gold);
    background: rgba(212,179,106,0.16);
    transform: translateY(-1px);
}
.queue-song .song-actions .act-dl {
    color: var(--gold-2);
}
.queue-song .song-actions .act-remove:hover {
    color: var(--danger);
    border-color: rgba(224, 122, 106, 0.7);
    background: rgba(224, 122, 106, 0.16);
}
.queue-song .song-actions svg {
    width: 0.92rem;
    height: 0.92rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.playlist-songs:has(.playlist-empty) {
    display: flex;
}
.playlist-empty {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    padding: 1.2rem;
    border: 1px dashed rgba(212,179,106,0.32);
    border-radius: 16px;
    background: rgba(8, 11, 18, 0.22);
    color: var(--muted);
    font-size: 0.82rem;
}
.playlist-empty span {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.55rem;
    border-radius: 50%;
    background: rgba(212,179,106,0.14);
    color: var(--gold);
    font-size: 1.2rem;
    box-shadow: 0 0 0 6px rgba(212,179,106,0.05);
}
.playlist-empty strong { color: var(--ink); font-size: 0.95rem; }
.playlist-empty p { margin: 0.25rem 0 0; }
.playlist-footer-tools {
    margin-top: auto;
    padding-top: 0.65rem;
    gap: 0.4rem;
    border-top: 1px solid var(--line);
}
.playlist-footer-tools .btn { padding: 0.35rem 0.7rem; font-size: 0.76rem; border-radius: 99px; }

@media (max-width: 1100px) {
    .studio, .admin, .stats, .media-hero, .eq, .tools-grid { grid-template-columns: 1fr; }
    .stage .eq, .stage .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .studio.player-layout {
        grid-template-columns: 1fr;
        max-width: 640px;
        align-items: stretch;
    }
    .studio.player-layout > .panel { height: auto; }
}
@media (max-width: 800px) {
    .track-head, .track-row, .lib-file { grid-template-columns: 1fr; }
    .upload-workbench {
        grid-template-columns: 1fr;
        grid-template-areas:
            "fields"
            "preview";
        overflow: auto;
    }
    .upload-workbench .track-review {
        min-height: 18rem;
    }
    .playlist-head-actions { flex-wrap: wrap; }
    .now-bar { gap: 0.7rem; }
    .song.queue-song {
        grid-template-columns: 1.4rem 40px minmax(0, 1fr);
    }
    .queue-song .song-actions {
        grid-column: 2 / -1;
        justify-content: flex-end;
    }
}

/* Apple Music-style listen shell */
.listen-app .site-foot { display: none !important; }
html:has(body.listen-app),
.listen-app {
    height: 100%;
    overflow: hidden;
    background: var(--bg);
}
.listen-app::before { opacity: 0.03; }
.listen-app .flash { margin: 0; border-radius: 0; }
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.am-shell.studio {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 0;
    padding: 0;
    max-width: none;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
}
.am-sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    padding: 1rem 0.85rem 0.85rem;
    background: var(--sidebar);
    border-right: 1px solid rgba(255,255,255,0.06);
}
.am-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #fff;
    padding: 0.2rem 0.45rem 1rem;
}
.am-brand .brand-mark {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.78rem;
    border-width: 2px;
}
.am-brand strong {
    font-family: var(--sans);
    font-size: 1.05rem;
    letter-spacing: 0;
}
.am-nav { display: grid; gap: 0.2rem; }
.am-nav-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #c8c8cc;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}
.am-nav-item svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round;
    flex: 0 0 auto;
}
.am-nav-item:hover { color: #fff; background: rgba(255,255,255,0.06); }
.am-nav-item.active { color: #fff; background: var(--nav-active); }
.am-nav-item.is-locked::after {
    content: "LOCK";
    margin-left: auto;
    color: var(--gold);
    font-size: 0.5rem;
    letter-spacing: 0.08em;
}
.am-nav-item:focus { outline: none; }
.am-nav-item:focus-visible { box-shadow: inset 0 0 0 2px rgba(240, 211, 146, 0.35); }
.am-player.stage {
    margin-top: auto;
    gap: 0.45rem;
    padding: 0.75rem;
    border-radius: 16px;
    background: var(--player);
    border: 1px solid rgba(255,255,255,0.08);
    text-align: left;
    align-items: stretch;
    min-height: 0;
}
.am-player .now-bar, .am-player .disc-wrap { width: 100%; }
.am-player .disc-wrap { width: 100%; max-width: 112px; margin: 0 auto; }
.am-player .disc {
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #d4b36a;
}
.am-player h1 { font-size: 0.92rem; margin: 0.1rem 0 0; max-width: 100%; font-family: var(--sans); }
.am-player #now-meta { font-size: 0.72rem; color: var(--muted); }
.am-player .scripture { display: none; }
.am-player .playing-waves { height: 8px; margin-top: 0.15rem; }
.am-player .now-playing-label { font-size: 0.62rem; }
.am-player .controls { justify-content: center; }
.am-player .icon-btn { width: 2.1rem; height: 2.1rem; }
.am-player .icon-btn.play { width: 2.6rem; height: 2.6rem; }
.am-player .progress-row { padding: 0.3rem 0.4rem; margin: 0.2rem 0; }
.am-player .controls.sub { padding: 0.3rem; }
.am-player .vol { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--muted); }
.am-player .vol input { width: 100%; }
.am-sidebar-foot {
    display: grid;
    gap: 0.4rem;
    padding-top: 0.7rem;
}
.am-signin {
    display: block;
    text-align: center;
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    background: var(--accent);
    color: #fff !important;
    font-weight: 700;
}
.am-signin:hover { filter: brightness(1.12); color: #fff !important; }
.am-join, .am-sidebar-foot a { color: #c8c8cc; font-size: 0.8rem; text-align: center; }
.am-user { margin: 0; color: #fff; font-size: 0.82rem; text-align: center; }
.am-main {
    padding: 1.1rem 1.4rem 1.6rem;
    background: var(--main-bg);
    height: 100dvh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.am-head {
    display: grid;
    grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem 1.1rem;
    margin-bottom: 0.4rem;
}
.am-head-title { min-width: 0; }
.am-nowplay {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    max-width: min(460px, 100%);
    min-width: 0;
    width: 100%;
    padding: 0.32rem 0.85rem 0.32rem 0.32rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0.07), color-mix(in srgb, var(--gold) 16%, rgba(12,16,24,0.55)));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.08);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.am-nowplay:hover {
    border-color: color-mix(in srgb, var(--gold) 45%, rgba(255,255,255,0.2));
    filter: brightness(1.06);
}
.am-nowplay img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #111;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}
.am-nowplay.is-playing img {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 70%, white), 0 0 18px color-mix(in srgb, var(--gold) 40%, transparent);
}
.am-nowplay-copy {
    min-width: 0;
    flex: 1;
}
.am-nowplay-copy small {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}
.am-nowplay-copy strong,
.am-nowplay-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.am-nowplay-copy strong {
    color: #fff;
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.2;
    margin-top: 0.05rem;
}
.am-nowplay-copy span {
    color: rgba(255,255,255,0.62);
    font-size: 0.78rem;
}
.am-nowplay-eq {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 16px;
    flex: 0 0 auto;
}
.am-nowplay-eq i {
    display: block;
    width: 3px;
    height: 40%;
    border-radius: 2px;
    background: var(--gold);
    opacity: 0.35;
}
.am-nowplay.is-playing .am-nowplay-eq i {
    opacity: 1;
    animation: nowplay-eq 0.85s ease-in-out infinite;
}
.am-nowplay.is-playing .am-nowplay-eq i:nth-child(2) { animation-delay: -0.22s; height: 85%; }
.am-nowplay.is-playing .am-nowplay-eq i:nth-child(3) { animation-delay: -0.42s; height: 55%; }
@keyframes nowplay-eq {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(1); }
}
.am-head-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    grid-column: 3;
    justify-self: end;
    align-self: end;
    margin-bottom: 0.28rem;
    width: max-content;
    min-width: 0;
}
.am-account-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    color: #fff;
    min-width: 0;
}
.am-account-link span { min-width: 0; text-align: right; }
.am-account-link small,
.am-account-link strong {
    display: block;
    overflow: hidden;
    max-width: 9.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.am-account-link small {
    color: #9a9aa0;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.am-account-link strong { font-size: 0.78rem; }
.am-account-link svg {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.32rem;
    border: 1px solid rgba(212,179,106,0.45);
    border-radius: 50%;
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.6;
    stroke-linecap: round;
}
.am-theme {
    display: grid;
    gap: 0.12rem;
    order: -1;
    justify-self: end;
    width: max-content;
    min-width: 0;
}
.am-theme span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.am-theme select {
    appearance: none;
    width: 9.75rem;
    max-width: 9.75rem;
    background: rgba(255,255,255,0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c8c8cc' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.55rem center;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 0.32rem 1.6rem 0.32rem 0.55rem;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.am-theme select:focus {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 45%, transparent);
}
.am-crumb { margin: 0; color: #9a9aa0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.am-head h2 { margin: 0.1rem 0 0; font-size: 2.4rem; color: #fff; font-family: var(--sans); font-weight: 700; }
.am-search { grid-column: 1 / -1; max-width: none; }
.am-search input {
    width: 100%;
    border-radius: 10px;
    background: #1c1c1e;
    border: 1px solid rgba(255,255,255,0.1);
}
.am-heroes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.2rem;
}
.am-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.35rem;
}
.am-chart-card {
    min-width: 0;
    background: rgba(16, 20, 30, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0.72rem 0.65rem 0.5rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.am-chart-card h3 {
    margin: 0 0 0.55rem;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.25;
}
.chart-row {
    display: grid;
    grid-template-columns: 1.35rem 32px minmax(0, 1fr) auto;
    gap: 0.38rem;
    align-items: center;
    padding: 0.28rem 0.12rem;
    border-radius: 8px;
    cursor: pointer;
}
.chart-row:hover,
.chart-row.is-playing {
    background: rgba(255, 255, 255, 0.06);
}
.chart-rank {
    font-size: 0.66rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.chart-row img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    background: #111;
}
.chart-copy {
    min-width: 0;
}
.chart-copy strong,
.chart-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chart-copy strong {
    font-size: 0.76rem;
    font-weight: 500;
    color: #fff;
}
.chart-copy small {
    font-size: 0.66rem;
    color: var(--muted);
}
.yt-like {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    border-radius: 999px;
    color: #d4d4d8;
    padding: 0.18rem 0.46rem 0.18rem 0.34rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.68rem;
    line-height: 1;
}
.yt-like svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}
.yt-like:hover {
    background: rgba(255, 255, 255, 0.14);
}
.yt-like.is-liked {
    color: #fff;
    background: #065fd4;
}
.yt-like.is-liked:hover {
    background: #1877f2;
}
.song-actions .yt-like {
    margin-right: 0.15rem;
    background: rgba(255, 255, 255, 0.08);
    color: #d4d4d8;
    border-radius: 999px;
    padding: 0.18rem 0.46rem 0.18rem 0.34rem;
}
.song-actions .yt-like:hover {
    background: rgba(255, 255, 255, 0.14);
}
.song-actions .yt-like.is-liked {
    color: #fff;
    background: #065fd4;
}
.song-actions .yt-like.is-liked:hover {
    background: #1877f2;
}
.song-actions .yt-like svg {
    fill: currentColor;
    stroke: none;
}
.am-hero {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 16 / 9;
    min-height: 0;
    cursor: pointer;
    background: #111;
}
.am-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%;
    display: block;
    opacity: 1;
    transition: opacity 0.45s ease;
}
.am-hero img.is-swap { opacity: 0; }
.am-hero-copy {
    position: absolute;
    inset: auto 0 0;
    padding: 1.2rem 1rem 0.75rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.78));
    color: #fff;
}
.am-hero-copy small {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
}
.am-hero-copy strong { display: block; font-size: 1.7rem; line-height: 1.05; margin: 0.15rem 0; }
.am-hero-copy span { font-size: 0.82rem; color: rgba(255,255,255,0.8); }
.am-hero:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,0.4); }
.am-hero[data-tint="1"] img { object-position: 22% 18%; filter: saturate(1.12) contrast(1.04); }
.am-hero[data-tint="2"] img { object-position: 78% 12%; filter: saturate(1.05) hue-rotate(-8deg); }
.am-hero[data-tint="3"] img { object-position: center 28%; filter: saturate(1.18) brightness(1.04); }
.am-hero[data-tint="4"] img { object-position: 12% 30%; filter: contrast(1.08) saturate(0.92); }
.am-hero[data-tint="5"] img { object-position: 88% 22%; filter: hue-rotate(12deg) saturate(1.1); }
.am-hero[data-tint="6"] img { object-position: center 6%; filter: brightness(1.08) saturate(1.15); }
.am-hero[data-tint="7"] img { object-position: 40% 40%; filter: contrast(1.12) saturate(1.05); }
.am-hero[data-tint="8"] img { object-position: 60% 8%; filter: sepia(0.18) saturate(1.2); }
.am-hero[data-tint="9"] img { object-position: 8% 10%; filter: hue-rotate(-14deg) contrast(1.06); }
.am-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0.4rem 0 0.7rem;
}
.am-section-head h3 { margin: 0; color: #fff; font-size: 1.15rem; }
.text-link { background: none; border: 0; color: rgba(255,255,255,0.62); cursor: pointer; font: inherit; font-size: 0.88rem; }
.text-link:hover { color: #fff; }
.am-discover { margin: 0.15rem 0 0.4rem; }
.am-shelf {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 148px;
    gap: 1.15rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.1rem 0.15rem 0.85rem;
    margin: 0 0 1.15rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.am-shelf-wrap {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    grid-auto-columns: unset;
    overflow: visible;
    padding-bottom: 1.2rem;
}
.am-tile {
    display: grid;
    gap: 0.55rem;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
    font: inherit;
    min-width: 0;
}
.am-tile img {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    background: #1a1a1a;
    display: block;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.am-tile strong,
.am-tile small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.am-tile strong {
    color: #fff;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.25;
}
.am-tile small {
    color: rgba(255,255,255,0.58);
    font-size: 0.8rem;
}
.am-tile:hover img { transform: scale(1.02); }
.am-tile img { transition: transform 0.2s ease; }
.am-artist-shelf { grid-auto-columns: 152px; }
.am-artist-shelf.am-shelf-wrap { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }
.am-artist-tile { justify-items: center; text-align: center; }
.am-artist-tile img {
    border-radius: 50%;
    box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}
.am-artist-tile strong,
.am-artist-tile small { width: 100%; text-align: center; }
.am-song-table { display: grid; gap: 0.15rem; }
.am-song-table .song {
    grid-template-columns: 2rem 42px minmax(0, 1fr) auto;
    background: transparent;
    border: 0;
    border-radius: 10px;
    padding: 0.45rem 0.5rem;
}
.am-song-table .song:hover, .am-song-table .song.playing {
    background: rgba(255,255,255,0.06);
}
.am-queue.queue {
    margin-top: 1.4rem;
    padding: 0.9rem;
    border-radius: 16px;
    background: rgba(22,22,24,0.9);
}
.listen-app.sing-view .am-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.listen-app.sing-view .am-head { flex-shrink: 0; }
.am-view[hidden] { display: none !important; }
#view-sing.karaoke-view:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.75fr);
    gap: 1rem;
    min-height: 0;
    flex: 1;
}
.karaoke-stage {
    --mood-a: #d4b36a;
    --mood-b: #f0d392;
    --mood-c: #c4893a;
    --mood-line: #f3d48a;
    --mood-pulse: 1;
    --mood-mid: 0.5;
    --mood-high: 0.2;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 18px;
    background: #09090b;
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    isolation: isolate;
}
.karaoke-mood {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--mood-a) 38%, transparent) 0%, transparent 58%),
        radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--mood-c) 28%, #09090b) 0%, #09090b 70%);
    transition: background 0.8s ease;
}
.karaoke-mood i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(28px);
    opacity: calc(0.28 + var(--mood-high) * 0.45);
    transform: scale(var(--mood-pulse));
    mix-blend-mode: screen;
    animation: km-drift 14s ease-in-out infinite;
}
.karaoke-mood i:nth-child(1) { width: 42%; height: 48%; left: -8%; top: -12%; background: var(--mood-a); animation-duration: 16s; }
.karaoke-mood i:nth-child(2) { width: 36%; height: 40%; right: -6%; top: 18%; background: var(--mood-b); animation-duration: 18s; animation-delay: -4s; }
.karaoke-mood i:nth-child(3) { width: 50%; height: 38%; left: 20%; bottom: -18%; background: var(--mood-c); animation-duration: 20s; animation-delay: -7s; }
.karaoke-mood i:nth-child(4) { width: 18%; height: 22%; left: 12%; top: 40%; background: var(--mood-b); animation-duration: 11s; animation-delay: -2s; }
.karaoke-mood i:nth-child(5) { width: 22%; height: 26%; right: 18%; bottom: 22%; background: var(--mood-a); animation-duration: 13s; animation-delay: -9s; }
.karaoke-mood i:nth-child(6) { width: 14%; height: 16%; left: 48%; top: 12%; background: var(--mood-b); animation-duration: 9s; animation-delay: -1s; }
.karaoke-mood .km-sheen {
    position: absolute;
    inset: -20%;
    background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--mood-b) 22%, transparent) 50%, transparent 70%);
    opacity: calc(0.15 + var(--mood-mid) * 0.4);
    animation: km-sheen 9s linear infinite;
}
.karaoke-stage[data-motion="bounce"] .karaoke-mood i { animation-name: km-bounce; animation-duration: 3.2s; }
.karaoke-stage[data-motion="glow"] .karaoke-mood i { animation-name: km-glow; }
.karaoke-stage[data-motion="drift"] .karaoke-mood i { animation-name: km-drift; }
.karaoke-stage[data-motion="breathe"] .karaoke-mood i { animation-name: km-breathe; animation-duration: 8s; }
.karaoke-stage[data-motion="fall"] .karaoke-mood i { animation-name: km-fall; filter: blur(18px); }
.karaoke-stage[data-motion="pulse"] .karaoke-mood i { animation-name: km-heart; animation-duration: 2.4s; }
.karaoke-stage[data-motion="surge"] .karaoke-mood i { animation-name: km-surge; animation-duration: 1.8s; }
.karaoke-stage[data-motion="scan"] .karaoke-mood .km-sheen { animation-duration: 4.5s; opacity: 0.45; }
.karaoke-stage[data-motion="aurora"] .karaoke-mood i { animation-name: km-aurora; animation-duration: 22s; }
.karaoke-stage[data-motion="party"] .karaoke-mood { animation: km-hue 8s linear infinite; }
.karaoke-stage[data-motion="party"] .karaoke-mood i { animation-name: km-party; animation-duration: 4s; }
@keyframes km-drift {
    0%, 100% { translate: 0 0; }
    50% { translate: 6% 4%; }
}
@keyframes km-bounce {
    0%, 100% { transform: scale(calc(var(--mood-pulse) * 0.92)); }
    50% { transform: scale(calc(var(--mood-pulse) * 1.18)); }
}
@keyframes km-glow {
    0%, 100% { opacity: 0.22; transform: scale(var(--mood-pulse)); }
    50% { opacity: 0.5; transform: scale(calc(var(--mood-pulse) * 1.08)); }
}
@keyframes km-breathe {
    0%, 100% { opacity: 0.2; transform: scale(0.92); }
    50% { opacity: 0.48; transform: scale(calc(var(--mood-pulse) * 1.06)); }
}
@keyframes km-fall {
    0% { translate: 0 -8%; opacity: 0.15; }
    100% { translate: 0 18%; opacity: 0.4; }
}
@keyframes km-heart {
    0%, 100% { transform: scale(calc(var(--mood-pulse) * 0.9)); }
    30% { transform: scale(calc(var(--mood-pulse) * 1.16)); }
    45% { transform: scale(calc(var(--mood-pulse) * 0.96)); }
    60% { transform: scale(calc(var(--mood-pulse) * 1.1)); }
}
@keyframes km-surge {
    0%, 100% { transform: scale(calc(var(--mood-pulse) * 0.85)) rotate(0deg); }
    50% { transform: scale(calc(var(--mood-pulse) * 1.25)) rotate(8deg); }
}
@keyframes km-aurora {
    0%, 100% { translate: -4% 6%; filter: blur(34px); }
    50% { translate: 8% -4%; filter: blur(22px); }
}
@keyframes km-party {
    0% { transform: scale(var(--mood-pulse)) rotate(0deg); }
    50% { transform: scale(calc(var(--mood-pulse) * 1.2)) rotate(12deg); }
    100% { transform: scale(var(--mood-pulse)) rotate(0deg); }
}
@keyframes km-hue { to { filter: hue-rotate(360deg); } }
@keyframes km-sheen { to { transform: translateX(18%); } }
.karaoke-now, .karaoke-window { position: relative; z-index: 1; }
.karaoke-now {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem 0.7rem;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.karaoke-now > div { min-width: 0; flex: 1; }
.karaoke-now img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 12px;
    background: #111;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--mood-a) 35%, transparent);
}
.karaoke-now h3 { margin: 0.15rem 0 0.2rem; color: #fff; font-size: 1.25rem; }
.karaoke-window {
    flex: 1;
    min-height: 280px;
    overflow: auto;
    scroll-behavior: smooth;
    padding: 0 1.2rem 1.4rem;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.karaoke-pad { height: 28vh; }
.karaoke-line {
    margin: 0;
    padding: 0.45rem 0.2rem;
    text-align: center;
    font-size: 1.35rem;
    line-height: 1.35;
    color: rgba(255,255,255,0.28);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease, font-size 0.2s ease, text-shadow 0.2s ease;
}
.karaoke-line.is-next { color: color-mix(in srgb, var(--mood-line) 55%, #fff); }
.karaoke-line.is-past { color: rgba(255,255,255,0.18); }
.karaoke-line.is-current,
.karaoke-line.active-line {
    color: var(--mood-line);
    font-weight: 700;
    font-size: 1.7rem;
    transform: scale(1.02);
    text-shadow: 0 0 24px color-mix(in srgb, var(--mood-a) 55%, transparent);
}
.karaoke-empty {
    margin: 18vh 1rem 0;
    text-align: center;
    color: rgba(255,255,255,0.55);
}
.karaoke-list-wrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 18px;
    background: rgba(22,22,24,0.96);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}
.karaoke-list-head {
    position: relative;
    z-index: 3;
    padding: 0.85rem 1rem 0.55rem;
    flex-shrink: 0;
}
.karaoke-list-head h3 { margin: 0.1rem 0 0; color: #fff; font-size: 1.05rem; }
.karaoke-list-actions {
    position: relative;
    z-index: 4;
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 0.65rem;
    pointer-events: auto;
}
.karaoke-list-actions .btn {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    padding: 0.42rem 0.55rem;
    pointer-events: auto;
    cursor: pointer;
}
.karaoke-vocal-switch {
    flex: 1 1 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    margin: 0;
    padding: 0.38rem 0.7rem;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    color: #f3ead6;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    pointer-events: auto;
}
.karaoke-vocal-switch[aria-pressed="true"] {
    border-color: rgba(185, 145, 69, 0.55);
    background: rgba(185, 145, 69, 0.16);
}
.vocal-switch {
    position: relative;
    width: 2.15rem;
    height: 1.2rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    transition: background 0.2s ease;
}
.vocal-switch i {
    position: absolute;
    top: 0.14rem;
    left: 0.14rem;
    width: 0.92rem;
    height: 0.92rem;
    border-radius: 50%;
    background: #e3c27a;
    transition: transform 0.2s ease, background 0.2s ease;
}
.karaoke-vocal-switch[aria-pressed="true"] .vocal-switch {
    background: #b99145;
}
.karaoke-vocal-switch[aria-pressed="true"] .vocal-switch i {
    transform: translateX(0.95rem);
    background: #1a1408;
}
.karaoke-vocal-switch [data-vocal-state] {
    min-width: 1.6rem;
    text-align: right;
    color: rgba(255,255,255,0.62);
    font-weight: 700;
}
.karaoke-vocal-switch[aria-pressed="true"] [data-vocal-state] {
    color: #f3d48a;
}
.lyrics-finder {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    place-items: center;
    padding: 1rem;
    pointer-events: none;
}
.lyrics-finder.is-open,
.lyrics-finder:not([hidden]) {
    display: grid !important;
    pointer-events: auto !important;
}
.lyrics-finder[hidden] { display: none !important; pointer-events: none !important; }
.lyrics-finder-dialog {
    height: min(820px, calc(100dvh - 2rem));
}
.lyrics-finder-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 0.7rem;
}
.lyrics-finder-fields label {
    display: grid;
    gap: 0.28rem;
    color: var(--muted);
    font-size: 0.78rem;
}
.lyrics-finder-toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}
.lyrics-finder-hits {
    display: grid;
    gap: 0.35rem;
    max-height: 7.5rem;
    overflow: auto;
    margin-bottom: 0.7rem;
}
.lyrics-hit {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.lyrics-hit strong,
.lyrics-hit small { display: block; }
.lyrics-hit small { color: var(--muted); font-size: 0.75rem; }
.lyrics-hit.is-active,
.lyrics-hit:hover {
    border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
    background: rgba(212,179,106,0.08);
}
.lyrics-finder-preview {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
    min-height: 0;
    color: var(--muted);
    font-size: 0.78rem;
}
.lyrics-finder-player {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(7rem, 1fr) auto;
    align-items: center;
    gap: 0.45rem 0.55rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(212,179,106,0.35);
    border-radius: 14px;
    background: rgba(12, 14, 20, 0.92);
    flex: 0 0 auto;
}
.lyrics-finder-player .play {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 0;
    background: var(--gold);
    color: #1a1408;
    font-size: 0.85rem;
    cursor: pointer;
}
.lyrics-finder-now {
    min-width: 0;
}
.lyrics-finder-now strong,
.lyrics-finder-now span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lyrics-finder-now strong {
    color: #fff;
    font-size: 0.82rem;
}
.lyrics-finder-now span {
    color: var(--gold);
    font-size: 0.78rem;
    margin-top: 0.12rem;
}
.lyrics-finder-player input[type="range"] {
    width: 100%;
    min-width: 0;
    margin: 0;
}
.lyrics-finder-preview textarea {
    flex: 1;
    min-height: 8rem;
    height: auto;
    resize: none;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.45;
}
body.lyrics-finder-open { overflow: hidden; }
@media (max-width: 700px) {
    .lyrics-finder-fields { grid-template-columns: 1fr; }
    .lyrics-finder-player {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .lyrics-finder-player input[type="range"] {
        grid-column: 1 / -1;
    }
}
.karaoke-songs {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0 0.45rem 0.7rem;
    gap: 0.12rem;
    align-content: start;
}
.karaoke-list-empty { margin: 0.6rem 0.7rem; }
.karaoke-track {
    display: grid;
    grid-template-columns: 1.6rem 36px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    margin: 0;
    padding: 0.38rem 0.5rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.karaoke-track:hover { background: rgba(255,255,255,0.05); }
.karaoke-track.is-playing {
    background: color-mix(in srgb, var(--mood-a, #d4b36a) 16%, transparent);
}
.karaoke-track .kt-num {
    color: #8d8d93;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.karaoke-track.is-playing .kt-num { color: var(--mood-line, var(--gold)); }
.kt-art {
    width: 36px;
    height: 36px;
    border-radius: 7px;
    object-fit: cover;
    background: #111;
}
.kt-copy { min-width: 0; }
.kt-copy strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 650;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kt-copy small {
    display: block;
    color: #8d8d93;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kt-time {
    color: #8d8d93;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}
.kt-bars {
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
    width: 12px;
}
.karaoke-track.is-playing .kt-bars { display: flex; }
.kt-bars i {
    display: block;
    width: 2px;
    height: 40%;
    border-radius: 2px;
    background: var(--mood-line, var(--gold));
    animation: kt-eq 0.9s ease-in-out infinite;
}
.kt-bars i:nth-child(2) { animation-delay: -0.2s; height: 80%; }
.kt-bars i:nth-child(3) { animation-delay: -0.45s; height: 55%; }
@keyframes kt-eq {
    0%, 100% { transform: scaleY(0.45); }
    50% { transform: scaleY(1); }
}

.account-page {
    width: min(1180px, calc(100% - 2rem));
    margin: 2rem auto 4rem;
}
.account-hero,
.account-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.account-hero h1,
.account-section-head h2 { margin: 0.15rem 0 0; }
.account-hero .lede,
.account-section-head .lede { margin: 0.25rem 0 0; }
.account-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}
.account-card { max-width: none; }
.account-card h2 { margin: 0.2rem 0 0.65rem; }
.account-status {
    background:
        radial-gradient(circle at 90% 0, rgba(212,179,106,0.18), transparent 38%),
        var(--panel);
}
.account-meter {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin: 1rem 0 0.65rem;
}
.account-meter strong {
    color: var(--gold-2);
    font-family: var(--serif);
    font-size: 2.6rem;
}
.account-meter span { color: var(--muted); font-size: 0.85rem; }
.account-access { color: var(--gold); }
.account-plans { margin-top: 2rem; }
.paypal-mode {
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.75rem;
}
.plan-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
}
.plan-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
}
.plan-card.supporter {
    border-color: rgba(212,179,106,0.55);
    box-shadow: inset 0 1px 0 rgba(240,211,146,0.14);
}
.plan-card h3 { margin: 0.2rem 0; font-size: 1.25rem; }
.plan-price { margin: 0.25rem 0; }
.plan-price strong { color: var(--gold-2); font-family: var(--serif); font-size: 2rem; }
.plan-card ul {
    display: grid;
    gap: 0.45rem;
    flex: 1;
    margin: 0.8rem 0 1rem;
    padding-left: 1.1rem;
    color: var(--muted);
    font-size: 0.83rem;
}
.paypal-plan-button { min-height: 38px; }
.payment-success {
    padding: 0.8rem 1rem;
    border: 1px solid rgba(100,210,140,0.35);
    border-radius: 10px;
    color: #a9efc2;
}
.account-history { margin-top: 1.5rem; }
.account-history-list { display: grid; }
.account-history-list > div {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 1rem;
    padding: 0.65rem 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.85rem;
}
.premium-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 1rem;
}
.premium-modal[hidden] { display: none !important; }
.premium-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(3,5,10,0.82);
    backdrop-filter: blur(9px);
}
.premium-modal-card {
    position: relative;
    z-index: 1;
    width: min(430px, 100%);
    padding: 1.6rem;
    border: 1px solid rgba(212,179,106,0.38);
    border-radius: 20px;
    background:
        radial-gradient(circle at 90% 0, rgba(212,179,106,0.2), transparent 38%),
        #151a25;
    box-shadow: 0 30px 90px rgba(0,0,0,0.65);
    text-align: center;
}
.premium-modal-card h2 { margin: 0.3rem 0 0.5rem; }
.premium-modal-card ul {
    display: grid;
    gap: 0.45rem;
    margin: 1rem 0 1.25rem;
    padding: 0;
    color: var(--muted);
    list-style: none;
}
.premium-modal-card .btn { margin: 0.25rem; }
.premium-modal-close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #fff;
    cursor: pointer;
}
.premium-lock {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    margin: 0 auto 0.7rem;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold-2);
    font-size: 1.4rem;
}
body.premium-modal-open { overflow: hidden; }
@media (max-width: 1100px) {
    html:has(body.listen-app), .listen-app, .am-shell.studio, .am-main {
        height: auto;
        overflow: visible;
    }
    .am-shell.studio { grid-template-columns: 1fr; }
    .am-sidebar {
        position: sticky;
        top: 0;
        z-index: 40;
        height: auto;
        min-height: 0;
    }
    .am-heroes { grid-template-columns: 1fr; }
    .am-head {
        grid-template-columns: 1fr auto;
    }
    .am-head-tools { grid-column: 2; }
    .am-nowplay {
        grid-column: 1 / -1;
        justify-self: stretch;
        max-width: none;
    }
    .am-charts { grid-template-columns: 1fr; }
    .am-shelf { grid-auto-columns: 132px; gap: 0.85rem; }
    .am-artist-shelf { grid-auto-columns: 132px; }
    .am-shelf-wrap, .am-artist-shelf.am-shelf-wrap {
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    }
    .am-player.stage { margin-top: 1rem; }
    .listen-app.sing-view .am-main { overflow: visible; height: auto; }
    #view-sing.karaoke-view:not([hidden]) {
        grid-template-columns: 1fr;
        min-height: 70vh;
    }
    .karaoke-window { min-height: 240px; }
    .karaoke-pad { height: 12vh; }
    .account-grid { grid-template-columns: 1fr; }
    .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .account-page { width: min(100% - 1rem, 1180px); margin-top: 1rem; }
    .account-hero,
    .account-section-head { align-items: flex-start; flex-direction: column; }
    .plan-grid { grid-template-columns: 1fr; }
    .account-history-list > div { grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; }
}