/* ============================================================
   GlobalMetalInfo — Player (full album streaming from YouTube)
   Visual language nods to Spotify (deep black + signature green)
   while staying inside the theme's existing dark "Obsidian" tokens.
   ============================================================ */
:root {
    --gp-green:       #1db954;
    --gp-green-light: #1ed760;
    --gp-green-glow:  rgba(29,185,84,.28);
    --gp-black:       #0a0a0a;
    --gp-panel:       #121212;
    --gp-panel-2:     #181818;
    --gp-line:        #282828;
}

/* ---- Support banner ---- */
.gmi-player-support-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(135deg, rgba(29,185,84,.14), rgba(18,18,18,.6));
    border: 1px solid rgba(29,185,84,.35);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: var(--space-lg);
}
.gmi-player-support-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.gmi-player-support-text { flex: 1; min-width: 0; }
.gmi-player-support-banner p { margin: 0; font-size: var(--text-sm); color: var(--mist); line-height: 1.55; }
.gmi-player-support-banner p + p { margin-top: 6px; }
.gmi-player-support-banner a { color: var(--gp-green-light); font-weight: 700; text-decoration: none; }
.gmi-player-support-banner a:hover { text-decoration: underline; }
.gmi-player-submit-toggle {
    flex-shrink: 0; align-self: center;
    background: var(--gp-green); color: #04140a; border: none; border-radius: 999px;
    padding: 10px 18px; font-weight: 800; font-size: var(--text-xs); white-space: nowrap;
    cursor: pointer; transition: background var(--trans-fast), transform var(--trans-fast);
}
.gmi-player-submit-toggle:hover { background: var(--gp-green-light); transform: translateY(-1px); }
.gmi-player-submit-toggle[aria-expanded="true"] { background: transparent; border: 1px solid var(--ink-3); color: var(--mist); }
@media (max-width: 640px) {
    .gmi-player-support-banner { flex-wrap: wrap; }
    .gmi-player-submit-toggle { width: 100%; text-align: center; margin-top: 4px; }
}

/* ---- "Submit your track" panel ---- */
.gmi-player-submit-panel {
    background: var(--gp-panel);
    border: 1px solid rgba(29,185,84,.35);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    overflow: hidden;
    animation: gmiSubmitIn .22s ease-out;
}
@keyframes gmiSubmitIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.gmi-player-submit-panel[hidden] { display: none; }
.gmi-player-submit-panel__inner { padding: 22px 24px 26px; }
.gmi-player-submit-title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--dark); margin: 0 0 6px; }
.gmi-player-submit-sub { color: var(--ash); font-size: var(--text-sm); margin: 0 0 18px; }
.gmi-player-submit-sub a { color: var(--gp-green-light); }
.gmi-player-submit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.gmi-player-submit-kind { display: flex; gap: 18px; }
.gmi-player-submit-kind label { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--dark); text-transform: none; cursor: pointer; }
.gmi-player-optional { color: var(--ash); font-weight: 400; text-transform: none; }
.gmi-player-submit-coffee-hint {
    font-size: var(--text-xs); color: var(--ash); background: rgba(29,185,84,.08);
    border: 1px dashed rgba(29,185,84,.35); border-radius: var(--radius-md);
    padding: 10px 14px; margin: 4px 0 18px;
}
.gmi-player-submit-coffee-hint a { color: var(--gp-green-light); font-weight: 700; text-decoration: none; }
.gmi-player-submit-coffee-hint a:hover { text-decoration: underline; }
.gmi-player-submit-collapse {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: 100%; margin-top: 18px; padding-top: 18px;
    background: transparent; border: none; border-top: 1px solid var(--ink-3);
    color: var(--ash); font-family: var(--font-sans); font-weight: 700; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .06em;
    cursor: pointer;
}
.gmi-player-submit-collapse__icon {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
    background: var(--gp-green); color: #04140a;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(29,185,84,.35);
    transition: background var(--trans-fast), transform var(--trans-fast);
}
.gmi-player-submit-collapse__icon svg { width: 17px; height: 17px; }
.gmi-player-submit-collapse:hover .gmi-player-submit-collapse__icon { background: var(--gp-green-light); transform: translateY(-2px); }
.gmi-player-submit-collapse:hover { color: var(--gp-green-light); }
@media (max-width: 640px) {
    .gmi-player-submit-grid { grid-template-columns: 1fr; }
    .gmi-player-submit-panel__inner { padding: 18px 16px 20px; }
}

/* ---- New Songs / Full Albums tab switcher ---- */
.gmi-player-tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--gp-panel);
    border: 1px solid var(--ink-3);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: var(--space-md);
}
.gmi-player-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: none;
    color: var(--ash);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--text-xs);
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--trans-fast);
    white-space: nowrap;
}
.gmi-player-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
.gmi-player-tab:hover { color: var(--dark); }
.gmi-player-tab.is-active { background: var(--gp-green); color: #04140a; }
@media (max-width: 480px) {
    .gmi-player-tabs { display: flex; width: 100%; }
    .gmi-player-tab { flex: 1; justify-content: center; padding: 10px 8px; }
}

/* ---- Topbar: tabs + "Install on iPhone" button ----
   On mobile the install button stays a fixed floating action button (see
   .gmi-player-install-btn below) regardless of its DOM position, so this
   wrapper just behaves like a plain block there — no layout changes.
   On desktop it becomes a row with the tabs on the left and the install
   button on the opposite side of the same line. */
.gmi-player-topbar { margin-bottom: var(--space-md); }
.gmi-player-topbar .gmi-player-tabs { margin-bottom: 0; }
@media (min-width: 781px) {
    .gmi-player-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
    }
}

/* ---- Layout ---- */
.gmi-player-page { padding-top: var(--space-lg); padding-bottom: var(--space-3xl); }
.gmi-player-header { border-bottom: 1px solid var(--ink-3); margin-bottom: var(--space-lg); }
.gmi-player-header .archive-super::before { background: var(--gp-green); }
.gmi-player-layout { padding-top: 0; }
.gmi-player-main { min-width: 0; }

/* ---- Controls ---- */
.gmi-player-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-lg);
}
.gmi-player-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 240px;
    max-width: 340px;
    min-width: 0;
    background: var(--gp-panel);
    border: 1px solid var(--ink-3);
    border-radius: 999px;
    padding: 9px 16px;
    transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}
.gmi-player-search:focus-within { border-color: var(--gp-green); box-shadow: 0 0 0 3px var(--gp-green-glow); }
.gmi-player-search svg { width: 15px; height: 15px; color: var(--ash); flex-shrink: 0; }
.gmi-player-search input {
    border: none; background: transparent; outline: none; color: var(--bone);
    font-family: var(--font-sans); font-size: var(--text-sm); width: 100%; min-width: 0;
}
.gmi-player-search input::placeholder { color: var(--ash); }

.gmi-player-country-select,
.gmi-player-genre-select {
    background: var(--gp-panel);
    border: 1px solid var(--ink-3);
    color: var(--mist);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    cursor: pointer;
}
.gmi-player-country-select:focus,
.gmi-player-genre-select:focus { outline: none; border-color: var(--gp-green); }

.gmi-player-sort { display: flex; gap: 4px; background: var(--gp-panel); border: 1px solid var(--ink-3); border-radius: 999px; padding: 3px; margin-left: auto; }
.gmi-player-sort-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: none; color: var(--ash);
    font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs);
    padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: all var(--trans-fast);
    white-space: nowrap;
}
.gmi-player-sort-btn:hover { color: var(--dark); }
.gmi-player-sort-btn.is-active { background: var(--gp-green); color: #04140a; }
@media (max-width: 700px) {
    .gmi-player-controls { flex-direction: column; align-items: stretch; gap: 10px; }
    .gmi-player-search, .gmi-player-country-select, .gmi-player-genre-select {
        max-width: none; width: 100%; box-sizing: border-box; height: 40px;
        flex: 0 0 auto; /* base rule's flex-grow:1 would otherwise stretch the
                           search box to fill the column's height here */
    }
    .gmi-player-search { padding: 0 16px; border-radius: var(--radius-lg); }
    .gmi-player-search input { font-size: 16px; } /* prevents iOS auto-zoom on focus */
    .gmi-player-country-select,
    .gmi-player-genre-select { padding: 0 16px; border-radius: var(--radius-lg); }
    .gmi-player-sort { margin-left: 0; width: 100%; }
    .gmi-player-sort-btn { flex: 1; justify-content: center; padding: 9px 6px; }
}
@media (max-width: 380px) {
    /* On very narrow phones the full placeholder wraps/clips awkwardly —
       swap in a shorter one (kept in sync with the input's data-full
       attribute so nothing is lost on wider screens). */
    .gmi-player-search input::placeholder { font-size: 13px; }
}

/* ---- Album list — thin rows, each expanding into an inline accordion ---- */
.gmi-player-list {
    background: var(--gp-panel);
    border: 1px solid var(--ink-3);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.gmi-player-item { border-bottom: 1px solid var(--ink-3); }
.gmi-player-item:last-child { border-bottom: none; }

/* -- date heading grouping the "New Songs" list by publish date -- */
.gmi-player-date-heading {
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gp-green-light);
    background: rgba(29,185,84,.06);
    padding: 10px 16px;
    border-bottom: 1px solid var(--ink-3);
}
.gmi-player-date-heading:first-child { border-top: none; }

/* -- the thin row itself -- */
.gmi-player-item__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background var(--trans-fast);
}
.gmi-player-item__row:hover { background: rgba(255,255,255,.03); }
.gmi-player-item.is-current .gmi-player-item__row { background: var(--gp-green-glow); }
.gmi-player-item.is-open .gmi-player-item__row { background: var(--gp-panel-2); }

.gmi-player-item__pin {
    flex-shrink: 0; font-size: 12px; line-height: 1;
    color: var(--gp-green-light);
}

.gmi-player-item__play {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: transparent; border: 1px solid var(--ink-3); color: var(--ash);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all var(--trans-fast);
}
.gmi-player-item__play svg { width: 12px; height: 12px; margin-left: 1px; }
.gmi-player-item__play:hover { background: var(--gp-green); border-color: var(--gp-green); color: #04140a; transform: scale(1.07); }
.gmi-player-item.is-current .gmi-player-item__play { border-color: var(--gp-green); color: var(--gp-green-light); }
.gmi-player-item.is-current .gmi-player-item__play:hover { color: #04140a; }
.gmi-player-item__play .gmi-player-item__pause-icon { display: none; }
.gmi-player-item.is-playing .gmi-player-item__play .gmi-player-item__play-icon { display: none; }
.gmi-player-item.is-playing .gmi-player-item__play .gmi-player-item__pause-icon { display: block; }

.gmi-player-item__thumb {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-sm);
    overflow: hidden; background: var(--ink-2); position: relative;
}
.gmi-player-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gmi-player-item__thumb .gmi-player-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ash); font-size: 1.1rem; }

.gmi-player-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gmi-player-item__title { font-size: var(--text-sm); font-weight: 700; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmi-player-item.is-current .gmi-player-item__title { color: var(--gp-green-light); }
.gmi-player-item__band { font-size: 11.5px; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gmi-player-item__meta {
    flex-shrink: 0; display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-family: var(--font-mono); color: var(--ash);
}
.gmi-player-item__meta span {
    background: rgba(255,255,255,.03); border: 1px solid var(--ink-3); border-radius: 999px;
    padding: 2px 9px; white-space: nowrap;
}
.gmi-player-item__kind--single { color: #6ab0f3; }
.gmi-player-item__kind--album { color: #c79df0; }

.gmi-player-item__chevron {
    flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    color: var(--ash); transition: transform var(--trans-fast), color var(--trans-fast);
}
.gmi-player-item__chevron svg { width: 14px; height: 14px; }
.gmi-player-item.is-open .gmi-player-item__chevron { transform: rotate(180deg); color: var(--gp-green-light); }

/* -- accordion panel (cover + info), animated with the grid-rows trick -- */
.gmi-player-item__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
    background: var(--gp-panel-2);
}
.gmi-player-item.is-open .gmi-player-item__panel { grid-template-rows: 1fr; }
.gmi-player-item__panel-inner { overflow: hidden; min-height: 0; }
.gmi-player-item__panel-content {
    position: relative;
    display: flex; gap: 18px; padding: 18px 20px 22px 20px;
    border-top: 1px solid var(--ink-3);
}
.gmi-player-item__source {
    position: absolute; top: 14px; right: 16px; z-index: 1;
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--ink-2); border: 1px solid var(--ink-3); color: var(--ash);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 5px 10px 5px 11px; border-radius: 999px; text-decoration: none;
    transition: all var(--trans-fast);
}
.gmi-player-item__source svg { width: 11px; height: 11px; }
.gmi-player-item__source:hover { border-color: var(--gp-green); color: var(--gp-green-light); }
.gmi-player-item__cover {
    flex-shrink: 0; width: 130px; height: 130px; border-radius: var(--radius-md);
    overflow: hidden; background: var(--ink-2); box-shadow: var(--shadow-sm);
}
.gmi-player-item__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gmi-player-item__info { flex: 1; min-width: 0; padding-right: 84px; }
.gmi-player-item__info-meta { color: var(--ash); font-size: var(--text-xs); font-family: var(--font-mono); margin-bottom: 8px; }
.gmi-player-item__info-bio { color: var(--mist); font-size: var(--text-sm); line-height: 1.6; margin-bottom: 14px; white-space: pre-line; }
.gmi-player-item__info-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gmi-player-item__info-links a {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--ink-2); border: 1px solid var(--ink-3); color: var(--mist);
    font-size: var(--text-xs); font-weight: 600; padding: 6px 12px; border-radius: 999px; text-decoration: none;
    transition: all var(--trans-fast);
}
.gmi-player-item__info-links a:hover { border-color: var(--gp-green); color: var(--gp-green-light); }
.gmi-player-item__info-play {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--gp-green); color: #04140a; border: none; border-radius: 999px;
    padding: 9px 18px; font-weight: 800; font-size: var(--text-xs); cursor: pointer;
    transition: background var(--trans-fast), transform var(--trans-fast);
}
.gmi-player-item__info-play:hover { background: var(--gp-green-light); transform: translateY(-1px); }

.gmi-player-empty, .gmi-gallery-noalbums { text-align: center; color: var(--ash); padding: var(--space-2xl) 0; }
.gmi-gallery-noalbums .btn { margin-top: var(--space-md); display: inline-flex; }

@media (max-width: 640px) {
    .gmi-player-item__meta { display: none; }
    .gmi-player-item__row { padding: 9px 10px; gap: 8px; }
    .gmi-player-item__play { width: 34px; height: 34px; }
    .gmi-player-item__thumb { width: 38px; height: 38px; }
    .gmi-player-item__chevron { width: 26px; height: 26px; }
    .gmi-player-item__band { font-size: 11px; }

    .gmi-player-item__panel-content { flex-direction: column; padding: 0 0 16px; border-top: none; }
    .gmi-player-item__cover { width: 100%; height: auto; aspect-ratio: 16/9; max-width: none; border-radius: 0; }
    .gmi-player-item__info { padding: 14px 16px 0; }
    .gmi-player-item__source { top: 10px; right: 10px; background: rgba(10,10,10,.75); backdrop-filter: blur(3px); }
}

@media (max-width: 400px) {
    .gmi-player-item__pin { display: none; }
    .gmi-player-item__band { display: none; }
    .gmi-player-item__main { justify-content: center; }
}

/* ---- Sticky now-playing bar ---- */
.gmi-player-yt-host { position: absolute; width: 2px; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; }
.gmi-player-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
    display: flex; align-items: center; gap: 18px;
    background: var(--gp-black); border-top: 1px solid var(--gp-line);
    padding: 10px 20px;
    box-shadow: 0 -6px 24px rgba(0,0,0,.5);
    transition: bottom .25s ease;
}
.gmi-player-bar[hidden] { display: none; }

.gmi-player-bar__track { display: flex; align-items: center; gap: 12px; width: 240px; flex-shrink: 0; min-width: 0; }
.gmi-player-bar__cover { position: relative; width: 46px; height: 46px; border-radius: 5px; overflow: hidden; background: var(--ink-2); flex-shrink: 0; }
.gmi-player-bar__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gmi-player-bar__eq { position: absolute; bottom: 4px; right: 4px; display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.gmi-player-bar__eq i { width: 2px; background: var(--gp-green-light); border-radius: 1px; height: 3px; animation: gmiEq .9s ease-in-out infinite; font-style: normal; }
.gmi-player-bar__eq i:nth-child(2) { animation-delay: .2s; }
.gmi-player-bar__eq i:nth-child(3) { animation-delay: .4s; }
.gmi-player-bar__eq.is-paused i { animation-play-state: paused; height: 3px !important; }
@keyframes gmiEq { 0%,100% { height: 3px; } 50% { height: 10px; } }
.gmi-player-bar__meta { min-width: 0; display: flex; flex-direction: column; }
.gmi-player-bar__title { font-size: var(--text-sm); font-weight: 700; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmi-player-bar__band { font-size: 11px; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gmi-player-bar__controls { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.gmi-player-bar__buttons { display: flex; align-items: center; gap: 16px; }
.gmi-player-bar__btn { background: transparent; border: none; color: var(--gp-green-light); cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transition: color var(--trans-fast), transform var(--trans-fast); }
.gmi-player-bar__btn svg { width: 18px; height: 18px; }
.gmi-player-bar__btn:hover { color: var(--gp-green); filter: brightness(1.15); }
.gmi-player-bar__btn:active { transform: scale(.9); }
.gmi-player-bar__btn--main { width: 34px; height: 34px; border-radius: 50%; background: var(--gp-green); color: #04140a; box-shadow: 0 2px 10px var(--gp-green-glow); }
.gmi-player-bar__btn--main svg { width: 16px; height: 16px; }
.gmi-player-bar__btn--main:hover { background: var(--gp-green-light); color: #04140a; transform: scale(1.06); filter: none; }

/* ---- Playback speed control ---- */
.gmi-player-bar__speed { position: relative; flex-shrink: 0; }
.gmi-player-bar__speed-btn {
    background: transparent; border: 1px solid var(--gp-line); color: var(--ash);
    font-family: var(--font-mono); font-weight: 700; font-size: 11px;
    width: 38px; height: 26px; border-radius: 999px; cursor: pointer;
    transition: all var(--trans-fast);
}
.gmi-player-bar__speed-btn:hover,
.gmi-player-bar__speed-btn[aria-expanded="true"] { border-color: var(--gp-green); color: var(--gp-green-light); }
.gmi-player-bar__speed-menu {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--gp-panel); border: 1px solid var(--gp-line); border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,.4); padding: 4px; display: flex; flex-direction: column;
    min-width: 64px; z-index: 2;
}
.gmi-player-bar__speed-menu[hidden] { display: none; }
.gmi-player-bar__speed-option {
    background: transparent; border: none; color: var(--mist); font-family: var(--font-mono);
    font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: var(--radius-sm);
    cursor: pointer; text-align: center;
}
.gmi-player-bar__speed-option:hover { background: rgba(29,185,84,.12); color: var(--gp-green-light); }
.gmi-player-bar__speed-option.is-active { background: var(--gp-green); color: #04140a; }
@media (max-width: 780px) {
    .gmi-player-bar__speed { order: 4; }
}

.gmi-player-bar__progress { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 520px; }
.gmi-player-bar__time { font-family: var(--font-mono); font-size: 10.5px; color: var(--ash); width: 32px; flex-shrink: 0; text-align: center; }
.gmi-player-bar__progress input[type="range"] {
    -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 2px;
    background: var(--gp-line); outline: none; cursor: pointer;
}
.gmi-player-bar__progress input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--bone); cursor: pointer; }
.gmi-player-bar__progress input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--bone); border: none; cursor: pointer; }

.gmi-player-bar__volume { display: flex; align-items: center; gap: 8px; width: 130px; flex-shrink: 0; color: var(--ash); }
.gmi-player-bar__volume input[type="range"] {
    -webkit-appearance: none; appearance: none; width: 90px; height: 4px; border-radius: 2px;
    background: var(--gp-line); outline: none; cursor: pointer;
}
.gmi-player-bar__volume input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: var(--bone); cursor: pointer; }
.gmi-player-bar__volume input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--bone); border: none; cursor: pointer; }

/* Reserve space at the bottom of the page while the bar is visible */
body.gmi-has-player-bar { padding-bottom: 86px; }

@media (max-width: 780px) {
    .gmi-player-bar { flex-wrap: wrap; padding: 8px 12px; gap: 6px 8px; }
    .gmi-player-bar__track { width: auto; flex: 1 1 auto; }
    .gmi-player-bar__volume { display: none; }
    .gmi-player-bar__controls { order: 3; flex-basis: 100%; }
    .gmi-player-bar__btn { width: 36px; height: 36px; }
    .gmi-player-bar__btn--main { width: 40px; height: 40px; }
    .gmi-player-bar__buttons { gap: 22px; }
    body.gmi-has-player-bar { padding-bottom: 112px; }
}
@media (max-width: 360px) {
    .gmi-player-bar__cover { width: 40px; height: 40px; }
    .gmi-player-bar__title { font-size: 12.5px; }
}

/* ============================================================
   LIGHT MODE — Player surfaces become translucent "glass" instead of
   the fixed Spotify-dark panels, matching the sidebar widgets' look
   (see html.gmi-light --glass-bg/--glass-border in style.css). The
   Spotify-style tokens (--gp-panel etc.) are hardcoded hex values by
   design (dark mode is the Player's default look), so in light mode we
   override just those tokens and add the same blur used elsewhere in
   the theme's glass surfaces.
   ============================================================ */
html.gmi-light {
    --gp-black:   transparent;
    --gp-panel:   var(--glass-bg);
    --gp-panel-2: rgba(20,17,11,0.06);
    --gp-line:    var(--glass-border);
}
html.gmi-light .gmi-player-support-banner,
html.gmi-light .gmi-player-submit-panel,
html.gmi-light .gmi-player-tabs,
html.gmi-light .gmi-player-search,
html.gmi-light .gmi-player-country-select,
html.gmi-light .gmi-player-genre-select,
html.gmi-light .gmi-player-sort,
html.gmi-light .gmi-player-list,
html.gmi-light .gmi-player-bar {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}
html.gmi-light .gmi-player-item__panel { background: rgba(20,17,11,0.04); }
html.gmi-light .gmi-player-bar {
    border-top-color: var(--glass-border);
    box-shadow: 0 -6px 24px rgba(20,17,11,.10);
}
html.gmi-light .gmi-player-item__source { background: rgba(255,255,255,.75); }
html.gmi-light .gmi-player-bar__speed-menu {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}
/* --ink-2/--ink-3 are global tokens shared by the whole theme, so they can't
   be redefined here without changing every other component's light mode too —
   override the player's own borders/fills locally instead. */
html.gmi-light .gmi-player-list,
html.gmi-light .gmi-player-sort,
html.gmi-light .gmi-player-item,
html.gmi-light .gmi-player-date-heading,
html.gmi-light .gmi-player-item__play,
html.gmi-light .gmi-player-item__meta span,
html.gmi-light .gmi-player-item__panel-content {
    border-color: var(--glass-border);
}
html.gmi-light .gmi-player-item__thumb { background: rgba(20,17,11,.06); }
html.gmi-light .gmi-player-item__meta span { background: rgba(20,17,11,.04); }
html.gmi-light .gmi-player-item__row:hover { background: rgba(20,17,11,.035); }

/* ============================================================
   "ZAINSTALUJ NA IPHONE" — subtelny przycisk + pop-up z instrukcją
   ============================================================ */
.gmi-player-install-btn {
    position: fixed;
    right: 18px;
    bottom: 16px;
    z-index: 10000;
    display: flex; align-items: center; gap: 7px;
    background: var(--gp-green);
    border: none;
    color: #04140a;
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 800; letter-spacing: .02em;
    padding: 10px 16px 10px 12px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 6px 20px var(--gp-green-glow), 0 2px 8px rgba(0,0,0,.35);
    transition: all var(--trans-fast);
}
body.gmi-has-player-bar .gmi-player-install-btn { bottom: var(--gmi-install-btn-bottom, 102px); }
@media (max-width: 780px) {
    body.gmi-has-player-bar .gmi-player-install-btn { bottom: var(--gmi-install-btn-bottom, 128px); }
}
.gmi-player-install-btn:hover { background: var(--gp-green-light); transform: translateY(-1px); box-shadow: 0 8px 24px var(--gp-green-glow), 0 2px 8px rgba(0,0,0,.4); }
.gmi-player-install-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.gmi-player-install-btn span { white-space: nowrap; }
@media (max-width: 560px) {
    .gmi-player-install-btn span { display: none; }
    .gmi-player-install-btn { padding: 9px; }
}
/* Desktop: drop the fixed floating position and let it sit inline in the
   .gmi-player-topbar row instead, on the opposite side from the tabs
   (mobile is left exactly as it was — floating button, bottom-right). */
@media (min-width: 781px) {
    .gmi-player-install-btn {
        position: static;
        flex-shrink: 0;
        box-shadow: 0 2px 10px var(--gp-green-glow);
    }
    .gmi-player-install-btn:hover { box-shadow: 0 4px 16px var(--gp-green-glow); }
    body.gmi-has-player-bar .gmi-player-install-btn { bottom: auto; }
}

.gmi-player-install-modal { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 20px; }
.gmi-player-install-modal[hidden] { display: none; }
.gmi-player-install-modal__backdrop { position: absolute; inset: 0; background: rgba(4,4,4,.6); backdrop-filter: blur(3px); }
.gmi-player-install-modal__box {
    position: relative;
    max-width: 400px; width: 100%;
    max-height: 86vh; overflow-y: auto;
    background: var(--gp-panel);
    border: 1px solid var(--gp-line);
    border-radius: var(--radius-lg);
    padding: 26px 24px 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.gmi-player-install-modal__box h3 { color: var(--bone); font-size: 17px; margin-bottom: 10px; }
.gmi-player-install-modal__desc { color: var(--mist); font-size: 13px; line-height: 1.55; margin-bottom: 16px; }
.gmi-player-install-modal__close {
    position: absolute; top: 12px; right: 12px;
    background: transparent; border: none; color: var(--mist);
    font-size: 22px; line-height: 1; cursor: pointer; width: 28px; height: 28px;
}
.gmi-player-install-modal__close:hover { color: var(--gp-green-light); }
.gmi-player-install-steps { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.gmi-player-install-steps li { display: flex; gap: 10px; align-items: flex-start; color: var(--ash); font-size: 13.5px; line-height: 1.5; }
.gmi-player-install-steps li strong { color: var(--bone); }
.gmi-player-install-steps__text { flex: 1; min-width: 0; }
.gmi-player-install-steps__num {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    background: var(--gp-green); color: #04140a; font-family: var(--font-mono);
    font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.gmi-player-install-modal__hint { color: var(--gp-green-light); font-size: 12.5px; line-height: 1.5; background: rgba(29,185,84,.1); border: 1px solid rgba(29,185,84,.25); border-radius: var(--radius-md); padding: 10px 12px; }

/* Jasny motyw: pop-up i przycisk też stają się "szklane" jak reszta playera */
html.gmi-light .gmi-player-install-btn,
html.gmi-light .gmi-player-install-modal__box {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}