:root {
    color-scheme: dark;
    --bg: #050708;
    --surface: rgba(12, 16, 19, 0.8);
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.15);
    --text: #f3f2ee;
    --muted: #969aa4;
    --faint: #5f646e;
    --orange: #f7931a;
    --lime: #b8f228;
    --violet: #a26cff;
    --cyan: #55d9ff;
    --red: #ff4d59;
    --market-color: #f7931a;
    --market-rgb: 247, 147, 26;
    --radius-xl: 28px;
    --radius-lg: 20px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 25% 15%, rgba(247, 147, 26, 0.055), transparent 32rem),
        radial-gradient(circle at 83% 42%, rgba(85, 217, 255, 0.035), transparent 28rem),
        linear-gradient(145deg, #050708 0%, #080b0e 48%, #050607 100%);
    color: var(--text);
    font-family: Inter, system-ui, sans-serif;
}

button, input, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
a, button { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.hidden { display: none !important; }

#starfield-canvas { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: .6; pointer-events: none; }
.ambient-glow { position: fixed; z-index: -1; top: 9%; left: 15%; width: 48vw; height: 48vw; border-radius: 50%; background: var(--market-color); filter: blur(150px); opacity: .035; pointer-events: none; transition: background 1s ease; }
.app-shell { width: min(calc(100% - 36px), 1180px); margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 0 calc(22px + var(--safe-bottom)); }

.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 20px; min-height: 54px; padding: 0 5px 10px; border-bottom: 1px solid rgba(255,255,255,.055); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); font: 700 clamp(.9rem, 1.7vw, 1.22rem) "Space Grotesk", sans-serif; letter-spacing: .16em; text-decoration: none; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; filter: drop-shadow(0 0 9px rgba(247,147,26,.13)); }
.brand-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.brand-disc { fill: url(#brand-disc); }
.brand-ring-base { fill: none; stroke: rgba(121,134,145,.46); stroke-width: 1.05; }
.brand-ring-amber,
.brand-ring-cyan,
.brand-ring-glint { fill: none; stroke-linecap: round; }
.brand-ring-amber { stroke: #f7931a; stroke-width: 1.75; }
.brand-ring-cyan { stroke: #18cfe8; stroke-width: 1.85; filter: drop-shadow(0 0 2px rgba(24,207,232,.48)); }
.brand-ring-glint { stroke: rgba(255,244,213,.92); stroke-width: 1.4; }
.brand-signal { fill: none; stroke: #f7931a; stroke-width: 1.35; stroke-linecap: round; }
.brand-signal text { fill: #f7931a; stroke: none; font: 600 25px Inter, sans-serif; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.header-telemetry { display: flex; align-items: center; gap: 0; color: var(--muted); font-size: .68rem; letter-spacing: .09em; }
.header-telemetry > div { display: flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 14px; border-left: 1px solid var(--line); white-space: nowrap; }
.header-telemetry > div:first-child { border-left: 0; }
.account-control { position: relative; flex: 0 0 auto; }
.account-sign-in,
.account-profile-button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.035); color: #e8e7e2; font: 700 .58rem "Space Grotesk",sans-serif; letter-spacing: .09em; text-decoration: none; cursor: pointer; transition: border-color .18s,background .18s,color .18s; }
.account-sign-in:hover,
.account-profile-button:hover { border-color: rgba(247,147,26,.55); background: rgba(247,147,26,.08); color: #fff; }
.account-sign-in svg { width: 15px; height: 15px; fill: #f4f4f4; }
.account-sign-in.is-auth-pending,
#playlist-account-sign-in.is-auth-pending { opacity: .74; }

html.auth-popup-return body { min-height: 100vh; display: grid; place-items: center; background: #050708; color: #f4f4f4; }
html.auth-popup-return body > * { display: none !important; }
html.auth-popup-return body > .auth-popup-fallback { display: grid !important; }
.auth-popup-fallback { width: min(360px,calc(100vw - 48px)); justify-items: center; text-align: center; }
.auth-popup-fallback .auth-popup-mark { width: 62px; height: 62px; margin-bottom: 22px; display: grid; place-items: center; border: 1px solid var(--orange); border-radius: 50%; color: var(--orange); font-size: 30px; box-shadow: 0 0 34px rgba(247,147,26,.18); }
.auth-popup-fallback h1 { margin: 0 0 10px; color: #f4f4f4; font: 700 25px "Space Grotesk",sans-serif; }
.auth-popup-fallback p { margin: 0; color: #aeb7bd; font-size: 14px; line-height: 1.55; }
.auth-popup-fallback button { margin-top: 24px; padding: 10px 18px; border: 1px solid #3b454c; border-radius: 999px; background: #10161a; color: #fff; cursor: pointer; }
.account-profile-button { width: 36px; min-height: 36px; padding: 0; justify-content: center; border-color: rgba(156,166,175,.2); background: radial-gradient(circle at 45% 35%, rgba(74,50,23,.48), rgba(10,13,16,.96) 70%); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 5px 15px rgba(0,0,0,.22); }
.account-initials { display: grid; place-items: center; width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; color: #dda252; font: 750 .5rem "Space Grotesk",sans-serif; letter-spacing: .025em; }
.account-chevron { color: var(--orange); font-size: .72rem; transform: translateY(-1px); }
.account-menu { position: absolute; top: calc(100% + 9px); right: 0; z-index: 80; width: min(270px,calc(100vw - 24px)); padding: 8px; border: 1px solid rgba(247,147,26,.2); border-radius: 13px; background: rgba(10,13,15,.98); box-shadow: 0 18px 55px rgba(0,0,0,.55); }
.account-menu-identity { padding: 9px 10px 11px; border-bottom: 1px solid rgba(255,255,255,.07); }
.account-menu-identity strong,
.account-menu-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-identity strong { color: #f4f1ea; font: 700 .73rem "Space Grotesk",sans-serif; }
.account-menu-identity small { margin-top: 3px; color: var(--muted); font-size: .58rem; }
.account-menu a,
.account-menu button { display: block; width: 100%; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: #cbc8c0; font: 600 .64rem Inter,sans-serif; text-align: left; text-decoration: none; cursor: pointer; }
.account-menu a:hover,
.account-menu button:hover { background: rgba(255,255,255,.055); color: #fff; }
.account-menu form { margin: 0; }
.btc-ticker { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .68rem; letter-spacing: .09em; white-space: nowrap; }
.live-status strong { color: var(--text); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(255,77,89,.1); animation: live-pulse 1.7s infinite; }
@keyframes live-pulse { 70%,100% { box-shadow: 0 0 0 11px rgba(255,77,89,0); } }

.header-go-live-capsule {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 13px;
    margin-right: 6px;
    border: 1px solid rgba(255,82,67,.48);
    border-radius: 99px;
    background: rgba(255,82,67,.12);
    color: #ff665c;
    font: 700 .62rem "Space Grotesk", sans-serif;
    letter-spacing: .08em;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .15s, color .2s, box-shadow .2s;
    user-select: none;
    box-shadow: 0 0 14px rgba(255,82,67,.18);
    white-space: nowrap;
}
.header-go-live-capsule:hover {
    border-color: rgba(255,82,67,.85);
    background: rgba(255,82,67,.24);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(255,82,67,.38);
}
.header-go-live-capsule .pulse-red-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff5243;
    box-shadow: 0 0 8px #ff5243;
    animation: live-pulse 1.5s infinite;
}

.audience-icon { position: relative; width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 50% 50% 42% 42%; border-bottom-color: transparent; }
.audience strong { color: var(--text); }
.funding-telemetry { cursor: pointer; transition: all .2s ease; user-select: none; }
.funding-telemetry:hover, .funding-telemetry:focus-visible { background: rgba(247,147,26,.1); border-radius: 6px; }
.funding-telemetry strong { color: #fff; font-weight: 700; transition: color .2s; }
.funding-telemetry:hover strong { color: var(--orange); }
.funding-bolt { color: var(--orange); font-size: .78rem; filter: drop-shadow(0 0 6px rgba(247,147,26,.65)); animation: bolt-glow 2.4s infinite ease-in-out; }
@keyframes bolt-glow { 0%,100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); filter: drop-shadow(0 0 10px rgba(247,147,26,.95)); } }
.btc-ticker > span:first-child { color: var(--orange); font-weight: 700; }
.btc-ticker strong { color: var(--text); font-weight: 600; }
.price-change { color: var(--market-color); font-weight: 700; transition: color .5s; }

.broadcast-stage { position: relative; display: grid; grid-template-columns: 1fr; min-height: 730px; margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: radial-gradient(circle at 50% 48%, rgba(var(--market-rgb),.055), transparent 41%), linear-gradient(145deg, rgba(12,16,19,.92), rgba(6,9,11,.84)); box-shadow: 0 38px 100px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.025); backdrop-filter: blur(24px); }
.composition-panel { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 145px 20px 112px; overflow: hidden; background: radial-gradient(circle at 50% 48%, rgba(var(--market-rgb),.08), transparent 48%); }
.composition-panel::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 48%, transparent 36%, rgba(5,7,8,.13) 62%, rgba(5,7,8,.42)); pointer-events: none; }
.composition-status { position: absolute; top: 21px; left: 23px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .56rem; font-weight: 700; letter-spacing: .16em; }
.composition-status b { font: inherit; }
.composition-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 9px var(--orange); animation: live-pulse 1.5s infinite; }
.composition-visual { --audio-energy: .08; position: relative; z-index: 2; display: block; width: min(58vw, 570px); padding: 0; aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; isolation: isolate; }
.composition-visual::before { content: ""; position: absolute; inset: 17%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--market-rgb),calc(.07 + var(--audio-energy) * .16)), transparent 68%); filter: blur(18px); opacity: calc(.4 + var(--audio-energy) * .58); transform: scale(calc(.82 + var(--audio-energy) * .48)); transition: opacity 90ms linear, transform 90ms linear; }
.composition-visual::after { content: ""; position: absolute; inset: 5%; z-index: -1; border: 1px solid rgba(255,255,255,.035); border-radius: 50%; box-shadow: 0 0 80px rgba(var(--market-rgb),calc(.03 + var(--audio-energy) * .09)); opacity: .6; transition: opacity .25s ease, transform .45s cubic-bezier(.16,1,.3,1); }
.composition-visual:hover::after, .composition-visual:focus-visible::after { opacity: 1; transform: scale(1.025); }
.composition-visual:focus-visible { outline: 1px solid rgba(247,147,26,.82); outline-offset: 7px; }
#composition-canvas { display: block; width: 100%; height: 100%; }
.composition-core { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 88px; height: 88px; border: 1px solid rgba(247,147,26,.38); border-radius: 50%; background: radial-gradient(circle at 45% 38%, rgba(247,147,26,.24), rgba(5,7,8,.94) 66%); color: var(--orange); box-shadow: 0 0 42px rgba(247,147,26,.25), inset 0 0 25px rgba(247,147,26,.09); transform: translate(-50%,-50%); transition: transform 75ms linear, box-shadow 75ms linear, border-color .25s ease; }
.core-bitcoin { font-size: 2.45rem; line-height: 1; transition: opacity .18s ease, transform .25s ease; }
.core-icon { position: absolute; width: 27px; height: 27px; fill: #090b0d; filter: drop-shadow(0 0 6px rgba(247,147,26,.45)); opacity: 0; transform: scale(.72); transition: opacity .18s ease, transform .25s ease; }
.core-icon-pause { fill: var(--orange); }
.core-icon-suspended { fill: #dce8ee; }
.core-loader { position: absolute; top: 50%; left: 50%; width: 126px; height: 126px; opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.84); transition: opacity .22s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.core-loader i { position: absolute; inset: 0; border: 1.5px solid transparent; border-top-color: var(--orange); border-radius: 50%; filter: drop-shadow(0 0 6px rgba(247,147,26,.55)); }
.core-loader i:nth-child(2) { inset: 7px; border-top-color: var(--cyan); animation-direction: reverse; animation-duration: 1.55s; }
.core-loader i:nth-child(3) { inset: 14px; border-top-color: var(--violet); animation-duration: 1.15s; }
.core-loader i:nth-child(4) { inset: 21px; border-top-color: var(--fear-greed-color,var(--lime)); animation-direction: reverse; animation-duration: 1.85s; }
@keyframes core-connect-spin { to { transform: rotate(360deg); } }
.composition-visual.is-loading .core-loader, .composition-visual.is-reconnecting .core-loader, .composition-visual.is-bootstrapping .core-loader { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.composition-visual.is-loading .core-loader i, .composition-visual.is-reconnecting .core-loader i, .composition-visual.is-bootstrapping .core-loader i { animation-name: core-connect-spin; animation-duration: 1.35s; animation-timing-function: linear; animation-iteration-count: infinite; }
.composition-visual.is-loading .core-loader i:nth-child(2) { animation-duration: 1.65s; }
.composition-visual.is-loading .core-loader i:nth-child(3) { animation-duration: 1.08s; }
.composition-visual.is-loading .core-loader i:nth-child(4) { animation-duration: 1.9s; }
.composition-visual.is-reconnecting .core-loader i { animation-duration: .95s; }
.composition-visual.is-reconnecting .core-loader i:nth-child(2) { animation-duration: 1.25s; }
.composition-visual.is-reconnecting .core-loader i:nth-child(3) { animation-duration: .78s; }
.composition-visual.is-reconnecting .core-loader i:nth-child(4) { animation-duration: 1.45s; }
.composition-visual.is-loading .core-bitcoin, .composition-visual.is-reconnecting .core-bitcoin, .composition-visual.is-bootstrapping .core-bitcoin { opacity: .36; transform: scale(.86); }
.composition-visual.is-loading .core-icon, .composition-visual.is-reconnecting .core-icon, .composition-visual.is-bootstrapping .core-icon { opacity: 0 !important; }
.composition-visual.is-bootstrapping { cursor: progress; }
.composition-visual.is-bootstrapping::after { opacity: 1; animation: startup-breathe 2.8s ease-in-out infinite; }
.composition-visual.is-bootstrapping .composition-action-copy { color: rgba(255,190,111,.92); border-color: rgba(247,147,26,.34); box-shadow: 0 0 24px rgba(247,147,26,.08); opacity: 1; }
@keyframes startup-breathe { 50% { transform: scale(1.035); box-shadow: 0 0 105px rgba(var(--market-rgb),.14); } }
.composition-visual.is-reconnecting .composition-action-copy { opacity: 1; }
.composition-visual.has-playback-error .composition-core { border-color: rgba(255,77,89,.55); box-shadow: 0 0 42px rgba(255,77,89,.18), inset 0 0 25px rgba(255,77,89,.08) !important; }
.composition-visual.has-playback-error .composition-action-copy { color: #ff8d96; border-color: rgba(255,77,89,.28); }
.composition-visual:hover .core-bitcoin, .composition-visual:focus-visible .core-bitcoin { opacity: .13; transform: scale(.82); }
.composition-visual:hover .core-icon:not(.hidden), .composition-visual:focus-visible .core-icon:not(.hidden) { opacity: 1; transform: scale(1); }
.composition-visual:not(.is-playing) .core-bitcoin { opacity: .58; }
.composition-visual:not(.is-playing) .core-icon-play { opacity: .95; transform: scale(1); fill: var(--orange); }
.composition-action-copy { position: absolute; bottom: 6.5%; left: 50%; padding: 6px 10px; border: 1px solid rgba(247,147,26,.18); border-radius: 99px; background: rgba(5,7,8,.72); color: rgba(247,184,105,.72); font-size: .47rem; font-weight: 800; letter-spacing: .18em; opacity: .8; transform: translateX(-50%); transition: opacity .2s, color .2s, border-color .2s; white-space: nowrap; }
.composition-visual.is-playing .composition-action-copy { opacity: 0; }
.composition-visual.is-playing:hover .composition-action-copy, .composition-visual.is-playing:focus-visible .composition-action-copy { opacity: 1; color: var(--text); border-color: rgba(255,255,255,.15); }
.composition-caption { position: relative; z-index: 2; margin: -9px 0 0; color: var(--faint); font-size: .61rem; letter-spacing: .11em; text-align: center; text-transform: uppercase; }

/* Broadcast control states: telemetry stays vivid while the audio surface rests. */
.broadcast-unavailable .broadcast-stage {
    border-color: rgba(190, 215, 228, .15);
    background: radial-gradient(circle at 50% 48%, rgba(164, 202, 222, .035), transparent 42%), linear-gradient(145deg, rgba(11, 15, 18, .95), rgba(5, 8, 10, .92));
    box-shadow: 0 38px 100px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.035);
}
.broadcast-unavailable .composition-panel { background: radial-gradient(circle at 50% 48%, rgba(178, 211, 228, .045), transparent 47%); }
.broadcast-unavailable #composition-canvas { opacity: .24; filter: saturate(.15); transition: opacity .8s ease, filter .8s ease; }
.broadcast-unavailable .composition-core {
    border-color: rgba(205, 224, 234, .28);
    background: radial-gradient(circle at 45% 38%, rgba(201, 220, 230, .1), rgba(5,7,8,.97) 68%);
    color: #dce8ee;
    box-shadow: 0 0 58px rgba(153, 194, 216, .1), inset 0 0 30px rgba(188, 215, 228, .04);
}
.broadcast-unavailable .core-bitcoin { opacity: .08 !important; transform: scale(.82); }
.broadcast-unavailable .core-icon-suspended:not(.hidden) { opacity: 1; transform: scale(1); }
.broadcast-unavailable .composition-visual { cursor: default; }
.broadcast-unavailable .composition-action-copy {
    opacity: 1;
    color: rgba(218, 232, 239, .82);
    border-color: rgba(190, 215, 228, .18);
    background: rgba(7, 10, 12, .82);
    box-shadow: 0 12px 38px rgba(0,0,0,.22);
}
.broadcast-unavailable .composition-status { color: rgba(213, 229, 237, .68); }
.broadcast-unavailable .composition-status span,
.broadcast-unavailable .never-repeat span { background: #b9d0dc; box-shadow: 0 0 10px rgba(185, 208, 220, .38); animation: none; }
.broadcast-unavailable .live-status .live-dot { background: #b9d0dc; box-shadow: 0 0 0 4px rgba(185, 208, 220, .08); animation: none; }
.broadcast-unavailable .live-status strong { color: #d8e7ee; }
.broadcast-unavailable .mini-wave i,
.broadcast-unavailable .generation-wave i { animation-play-state: paused; height: 3px; background: #9dbac9; }
.broadcast-unavailable .track-kicker,
.broadcast-unavailable .generation-line strong,
.broadcast-unavailable .schedule-meta strong { color: #bed3de; }
.broadcast-unavailable .generation-line,
.broadcast-unavailable .mini-schedule { border-color: rgba(177, 207, 222, .12); background: rgba(177, 207, 222, .025); }
.broadcast-unavailable .player-dock { border-color: rgba(184, 211, 224, .16); }
.broadcast-unavailable #main-play-pause-button:disabled { opacity: .34; cursor: not-allowed; }
.broadcast-unavailable.broadcast-restarting .composition-core { border-color: rgba(103, 215, 255, .32); box-shadow: 0 0 64px rgba(67, 210, 255, .12), inset 0 0 30px rgba(67, 210, 255, .05); }
.broadcast-unavailable.broadcast-restarting .composition-status span { background: var(--cyan); box-shadow: 0 0 12px rgba(67,210,255,.7); animation: live-pulse 1.4s infinite; }
.broadcast-unavailable.broadcast-restarting .core-icon-suspended { animation: startup-breathe 2.4s ease-in-out infinite; }

.track-panel { position: absolute; z-index: 3; inset: 0; min-width: 0; padding: 30px clamp(28px,4vw,54px); text-align: center; pointer-events: none; }
.track-head { display: flex; align-items: flex-start; justify-content: center; gap: 18px; }
.track-kicker { display: flex; align-items: center; gap: 8px; color: var(--orange); font-size: .64rem; font-weight: 800; letter-spacing: .18em; }
.hero-price { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 8px; min-width: 142px; margin-top: -9px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.075); border-radius: 12px; background: rgba(255,255,255,.024); text-align: right; }
.hero-price span { grid-column: 1; grid-row: 1; color: var(--faint); font-size: .46rem; font-weight: 700; letter-spacing: .12em; }
.hero-price strong { grid-column: 1 / 3; grid-row: 2; color: var(--text); font: 600 .9rem "Space Grotesk",Inter,sans-serif; letter-spacing: -.02em; }
.hero-price small { grid-column: 2; grid-row: 1; color: var(--market-color); font-size: .45rem; font-weight: 800; letter-spacing: .08em; transition: color .5s; }
.mini-wave, .generation-wave { display: flex; align-items: center; gap: 2px; height: 15px; }
.mini-wave i, .generation-wave i { width: 2px; height: 30%; border-radius: 4px; background: currentColor; animation: equalizer .85s ease-in-out infinite alternate; }
.mini-wave i:nth-child(2), .generation-wave i:nth-child(2) { height: 95%; animation-delay: -.3s; }
.mini-wave i:nth-child(3), .generation-wave i:nth-child(5) { height: 60%; animation-delay: -.65s; }
.mini-wave i:nth-child(4), .generation-wave i:nth-child(3) { height: 82%; animation-delay: -.5s; }
@keyframes equalizer { to { height: 22%; } }
.track-panel h1 { max-width: 760px; margin: 10px auto 6px; font: 700 clamp(1.65rem, 3vw, 2.75rem)/1 "Space Grotesk", Inter, sans-serif; letter-spacing: -.045em; text-wrap: balance; }
.flow-state { margin: 0; color: var(--muted); font-size: .84rem; }
.never-repeat { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 10px; color: #c6cad0; font-size: .52rem; font-weight: 700; letter-spacing: .22em; }
.never-repeat span { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px rgba(184,242,40,.65); }
.never-repeat b { font: inherit; }
.never-repeat i { color: var(--violet); font-style: normal; }
.generation-row { position: absolute; bottom: 26px; left: 50%; width: min(calc(100% - 56px),700px); display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: center; gap: 14px; margin: 0; text-align: left; pointer-events: auto; transform: translateX(-50%); }
.generation-line { display: flex; align-items: center; gap: 13px; min-width: 0; min-height: 55px; padding: 7px 10px; border: 1px solid rgba(67,210,255,.12); border-radius: 11px; background: rgba(67,210,255,.025); color: var(--cyan); }
.generation-wave { width: 50px; height: 23px; flex: 0 0 50px; justify-content: center; }
.generation-wave i { background: var(--cyan); }
.generation-line > div:last-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.generation-line strong { font-size: .58rem; letter-spacing: .2em; }
.generation-line small { overflow: hidden; color: var(--faint); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.generation-line .next-play-state { color: rgba(205,235,244,.76); font-size: .52rem; letter-spacing: .015em; }
.mini-schedule { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; min-width: 0; min-height: 55px; padding: 7px 10px; overflow: hidden; border: 1px solid rgba(67,210,255,.12); border-radius: 11px; background: rgba(67,210,255,.025); }
.schedule-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; transition: opacity .18s ease, transform .18s ease; }
.schedule-copy.is-changing { opacity: .12; transform: translateY(3px); }
.schedule-meta { display: flex; align-items: center; gap: 9px; min-width: 0; }
.schedule-meta strong { overflow: hidden; color: var(--cyan); font-size: .46rem; letter-spacing: .15em; text-overflow: ellipsis; white-space: nowrap; }
.schedule-meta time { flex: 0 0 auto; color: #cbd4db; font: 600 .5rem "Space Grotesk",sans-serif; letter-spacing: .05em; }
#schedule-title { overflow: hidden; color: #dce5ec; font: 600 .65rem "Space Grotesk",sans-serif; text-overflow: ellipsis; white-space: nowrap; }
#schedule-detail { overflow: hidden; color: var(--faint); font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }
.schedule-dots { display: flex; align-items: center; gap: 4px; }
.schedule-dots i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.14); transition: background .2s ease; }
.schedule-dots i.active { background: var(--cyan); box-shadow: 0 0 6px rgba(67,210,255,.3); }
.dj-insight { display: grid; grid-template-columns: 54px 1fr; gap: 15px; align-items: center; padding: 16px 17px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255,255,255,.034), rgba(255,255,255,.012)); }
.dj-avatar { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(162,108,255,.45); border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(162,108,255,.22), rgba(247,147,26,.08) 58%, transparent 59%); color: var(--text); font: 700 .72rem "Space Grotesk"; box-shadow: 0 0 22px rgba(162,108,255,.09); }
.dj-avatar i { position: absolute; right: 0; bottom: 2px; width: 9px; height: 9px; border: 2px solid #101316; border-radius: 50%; background: var(--orange); }
.dj-copy { min-width: 0; }
.insight-label { color: var(--orange); font-size: .56rem; font-weight: 800; letter-spacing: .17em; }
.dj-insight p { margin: 5px 0 10px; color: #c2c5ca; font-size: .75rem; line-height: 1.48; }
.dj-wave { display: flex; align-items: center; gap: 2px; height: 30px; overflow: hidden; color: var(--orange); }
.dj-wave i { flex: 1; max-width: 18px; min-width: 2px; height: 25%; border-radius: 3px; background: currentColor; transition: height 65ms linear, opacity 120ms ease; }

.market-score { margin-top: 12px; padding: 16px 19px 18px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: rgba(10,13,15,.72); box-shadow: inset 0 1px rgba(255,255,255,.02); backdrop-filter: blur(20px); }
.score-heading { display: flex; align-items: center; gap: 10px; padding: 0 3px 11px; color: var(--orange); font-size: .58rem; font-weight: 800; letter-spacing: .2em; }
.score-heading i { color: var(--lime); font-style: normal; }.score-heading small { margin-left: auto; color: var(--faint); font-size: .52rem; letter-spacing: .15em; }
.signal-strip { display: grid; grid-template-columns: 1.15fr 1fr .9fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.score-signal { --voice-color: var(--market-color); position: relative; min-width: 0; padding: 14px 20px 3px; border-left: 1px solid var(--line); border-radius: 12px; outline: none; cursor: pointer; transition: background .55s ease, transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease; }
.score-signal:first-child { border-left: 0; padding-left: 3px; }
.score-signal::after { content: ""; position: absolute; right: 12px; bottom: -1px; left: 12px; height: 1px; background: linear-gradient(90deg,transparent,var(--voice-color),transparent); opacity: 0; transform: scaleX(.5); transition: opacity .2s, transform .3s cubic-bezier(.16,1,.3,1); }
.score-signal:hover, .score-signal:focus-visible, .score-signal.is-selected { z-index: 2; background: color-mix(in srgb, var(--voice-color) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--voice-color) 18%, transparent), 0 12px 32px rgba(0,0,0,.18); transform: translateY(-2px); }
.score-signal:hover::after, .score-signal:focus-visible::after, .score-signal.is-selected::after { opacity: .7; transform: scaleX(1); }
.momentum-signal { --voice-color: var(--market-color); }
.volume-signal { --voice-color: var(--cyan); }
.mood-signal { --voice-color: var(--violet); }
.fear-greed-signal { --voice-color: var(--fear-greed-color,#ffd64a); }
.signal-label { display: flex; align-items: center; gap: 10px; }
.signal-icon { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 auto; border: 1px solid rgba(var(--market-rgb),.3); border-radius: 50%; color: var(--market-color); transition: color .5s, border-color .5s; }
.signal-label div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.signal-label small { color: #b4b7bd; font-size: .53rem; font-weight: 700; letter-spacing: .13em; }
.signal-label strong { color: var(--market-color); font-size: .68rem; font-weight: 600; transition: color .5s; }
.volume-signal .signal-icon, .volume-signal .signal-label strong { color: var(--cyan); }.mood-signal .signal-icon, .mood-signal .signal-label strong { color: var(--violet); }.fear-greed-signal .signal-icon, .fear-greed-signal .signal-label strong { color: var(--fear-greed-color, #ffd64a); }
.micro-chart, .volume-chart, .score-notes { height: 57px; margin-top: 8px; }
#market-pulse-canvas { display: block; width: 100%; height: 100%; }
.volume-chart { display: flex; align-items: flex-end; gap: 2px; padding-top: 7px; overflow: hidden; }
.volume-chart-bar { flex: 1; min-width: 1px; max-width: 5px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #ffb147, rgba(247,147,26,.15)); }
.score-notes { position: relative; display: flex; align-items: center; justify-content: space-around; color: var(--violet); overflow: hidden; }
.score-notes::before { content: ""; position: absolute; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(162,108,255,.45), transparent); }
.score-notes span { position: relative; z-index: 1; font-size: .9rem; text-shadow: 0 0 12px currentColor; }.score-notes span:nth-of-type(2) { transform: translateY(-9px); }.score-notes span:nth-of-type(3) { transform: translateY(8px); }.score-notes span:nth-of-type(4) { transform: translateY(-4px); }
.score-notes i { position: relative; z-index: 1; width: 4px; height: 4px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.signal-scale { display: flex; justify-content: space-between; gap: 10px; color: var(--faint); font-size: .46rem; font-weight: 700; letter-spacing: .08em; }
.fear-greed-chart { height: 57px; margin-top: 8px; overflow: hidden; }
#fear-greed-canvas { display: block; width: 100%; height: 100%; }
.fear-greed-scale { align-items: center; }
.fear-greed-scale a { color: #899198; text-decoration: none; transition: color .2s ease; }
.fear-greed-scale a:hover, .fear-greed-scale a:focus-visible { color: var(--cyan); }
.accessible-chart { display: none; }

.player-dock { position: sticky; bottom: 9px; z-index: 20; display: grid; grid-template-columns: auto minmax(170px,1fr) clamp(120px,22vw,240px) auto auto; align-items: center; gap: clamp(8px,1.5vw,18px); min-height: 86px; margin-top: 12px; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 25px; background: rgba(9,12,14,.91); box-shadow: 0 24px 70px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(28px); }
.player-toggle-button { display: grid; place-items: center; width: 59px; height: 59px; padding: 0; border: 2px solid var(--orange); border-radius: 50%; background: rgba(247,147,26,.08); color: var(--orange); cursor: pointer; box-shadow: 0 0 0 5px rgba(247,147,26,.045), 0 0 26px rgba(247,147,26,.12); transition: transform .2s, background .2s; }
.player-toggle-button:hover { transform: scale(1.04); background: rgba(247,147,26,.14); }.player-toggle-button svg { width: 25px; height: 25px; fill: currentColor; }.player-toggle-button .icon-play { transform: translateX(2px); }
.player-toggle-button.is-loading { animation: dock-connect-pulse 1.25s ease-in-out infinite; }
.player-toggle-button.is-startup-loading { position: relative; cursor: progress; border-color: rgba(247,147,26,.45); background: rgba(247,147,26,.045); animation: dock-connect-pulse 1.65s ease-in-out infinite; }
.player-toggle-button.is-startup-loading::before { content: ""; position: absolute; inset: 9px; border: 2px solid transparent; border-top-color: var(--orange); border-right-color: rgba(85,217,255,.72); border-radius: 50%; animation: core-connect-spin 1.15s linear infinite; }
.player-toggle-button:disabled { opacity: 1; }
@keyframes dock-connect-pulse { 50% { border-color: var(--cyan); box-shadow: 0 0 0 7px rgba(85,217,255,.035), 0 0 30px rgba(85,217,255,.18); } }
.volume-control { display: flex; align-items: center; gap: 9px; min-width: 0; }.volume-glyph { color: var(--text); }
#volume-slider { width: 100%; min-width: 70px; height: 4px; margin: 0; appearance: none; border-radius: 99px; background: linear-gradient(90deg,var(--orange) 0 80%,rgba(255,255,255,.14) 80%); }
#volume-slider::-webkit-slider-thumb { width: 14px; height: 14px; appearance: none; border: 3px solid #0c0f11; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--orange); cursor: pointer; }
#volume-slider::-moz-range-thumb { width: 10px; height: 10px; border: 3px solid #0c0f11; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--orange); cursor: pointer; }
.feedback-controls { display: flex; align-items: center; gap: 4px; }
.feedback-button { position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; transition: color .2s, background .2s, transform .15s; }
.feedback-button:hover { color: var(--text); background: rgba(255,255,255,.05); }
.feedback-button svg { width: 20px; height: 20px; fill: currentColor; }
.feedback-button.disabled { opacity: .35; pointer-events: none; }

/* HEART BUTTON (Twitter / Instagram style) */
.heart-button { color: #8a919e; }
.heart-button .heart-solid { display: none; fill: url(#heart-grad, #f7931a); }
.heart-button .heart-outline { display: block; fill: currentColor; }
.heart-button:hover { color: #f7931a; background: rgba(247,147,26,.08); }
.heart-button.liked { color: #f7931a; background: rgba(247,147,26,.12); }
.heart-button.liked .heart-outline { display: none; }
.heart-button.liked .heart-solid { display: block; fill: #f7931a; filter: drop-shadow(0 0 6px rgba(247,147,26,.45)); }
.heart-button.liked svg { animation: heart-burst .35s cubic-bezier(0.17, 0.89, 0.32, 1.49) forwards; }

@keyframes heart-burst {
    0% { transform: scale(1); }
    35% { transform: scale(1.38); }
    65% { transform: scale(0.92); }
    100% { transform: scale(1); }
}

/* PLAYLIST BUTTON & BADGE */
.playlist-toggle-button { color: #8a919e; }
.playlist-toggle-button:hover { color: var(--cyan); background: rgba(67,210,255,.08); }
.playlist-toggle-button.active { color: var(--cyan); background: rgba(67,210,255,.14); }
.playlist-badge { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 99px; background: var(--orange); color: #0a0d0f; font: 700 .48rem "Space Grotesk", sans-serif; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 8px rgba(247,147,26,.6); transition: transform .2s ease; }
.playlist-badge.bump { transform: scale(1.35); }

/* SUPPORT LIGHTNING BUTTON */
.support-button { color: var(--orange); }
.support-button:hover { color: #ffaa3b; background: rgba(247,147,26,.14); transform: scale(1.1); box-shadow: 0 0 14px rgba(247,147,26,.3); }
.dock-bolt { font-size: 1.05rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(247,147,26,.6)); }

/* DOCK TRACK & SCRUBBER */
.dock-track { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; overflow: hidden; }
.dock-track-header { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%; overflow: hidden; }
.dock-track strong { overflow: hidden; color: #d6d8dc; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; display: block; }
.dock-mode-badge { flex: 0 0 auto; font: 700 .42rem "Space Grotesk", sans-serif; letter-spacing: .08em; padding: 1.5px 5px; border-radius: 4px; text-transform: uppercase; }
.dock-mode-badge.live { background: rgba(247,147,26,.15); color: var(--orange); border: 1px solid rgba(247,147,26,.3); }
.dock-mode-badge.track { background: rgba(67,210,255,.15); color: var(--cyan); border: 1px solid rgba(67,210,255,.3); }

.dock-bars { display: flex; align-items: end; gap: 2px; height: 18px; overflow: hidden; width: 100%; }
.dock-bars i { flex: 1; min-width: 2px; max-width: 7px; height: 25%; border-radius: 2px 2px 0 0; background: var(--orange); transition: height 65ms linear, opacity 120ms ease; }
.dock-bars i:nth-child(3n) { height: 62%; }
.dock-bars i:nth-child(4n) { height: 42%; }

.track-scrubber-container { display: flex; align-items: center; gap: 8px; width: 100%; }
.track-time { color: var(--faint); font: 600 .5rem "Space Grotesk", sans-serif; letter-spacing: .04em; min-width: 24px; }
.track-scrubber { flex: 1; height: 4px; margin: 0; appearance: none; border-radius: 99px; background: linear-gradient(90deg, var(--cyan) 0%, rgba(255,255,255,.14) 0%); cursor: pointer; }
.track-scrubber::-webkit-slider-thumb { width: 12px; height: 12px; appearance: none; border: 2px solid #0c0f11; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 2px var(--cyan); cursor: pointer; }
.track-scrubber::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid #0c0f11; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 2px var(--cyan); cursor: pointer; }

.dock-resume-live { padding: 2px 7px; border: 1px solid rgba(255,82,67,.4); border-radius: 99px; background: rgba(255,82,67,.12); color: #ff5243; font: 700 .46rem "Space Grotesk", sans-serif; letter-spacing: .08em; cursor: pointer; white-space: nowrap; transition: background .2s, transform .15s; }
.dock-resume-live:hover { background: rgba(255,82,67,.22); transform: scale(1.04); }

.dock-track small { color: var(--faint); font-size: .46rem; letter-spacing: .12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* MY SONGS STUDIO WINDOW MODAL */
.my-songs-overlay,
#my-songs-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(2,4,6,.82) !important;
    backdrop-filter: blur(20px) saturate(.8) !important;
    -webkit-backdrop-filter: blur(20px) saturate(.8) !important;
    z-index: 99998 !important;
    opacity: 1;
    transition: opacity .25s ease;
}
.my-songs-overlay.hidden,
#my-songs-overlay.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
}

.my-songs-window,
#my-songs-window {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) scale(1) !important;
    width: min(1080px, calc(100vw - 34px)) !important;
    height: auto !important;
    max-height: 94vh !important;
    background:
        radial-gradient(circle at 50% 30%, rgba(247,147,26,.035), transparent 38%),
        linear-gradient(145deg, rgba(12,16,19,.99), rgba(7,10,12,.985)) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 26px !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    box-shadow: 0 38px 110px rgba(0,0,0,.92), 0 0 0 1px rgba(247,147,26,.025), inset 0 1px rgba(255,255,255,.055) !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: opacity .28s ease, transform .28s cubic-bezier(0.16, 1, 0.3, 1);
}
html.my-songs-open, body.my-songs-open { overflow: hidden; }
.my-songs-window.is-empty,
.my-songs-window:not(.has-songs):not(.hidden) { height: min(760px, calc(100dvh - 34px)) !important; }
.my-songs-window.hidden,
#my-songs-window.hidden {
    opacity: 0 !important;
    transform: translate(-50%,-46%) scale(0.96) !important;
    pointer-events: none !important;
    display: none !important;
}

html.shared-song-boot,
body.shared-song-boot {
    overflow: hidden !important;
}

html.shared-song-boot #my-songs-overlay,
html.shared-song-boot .my-songs-overlay,
html.shared-song-boot #my-songs-overlay.hidden,
html.shared-song-boot .my-songs-overlay.hidden {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

html.shared-song-boot #my-songs-window,
html.shared-song-boot .my-songs-window,
html.shared-song-boot #my-songs-window.hidden,
html.shared-song-boot .my-songs-window.hidden {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-50%,-50%) scale(1) !important;
}

@media (max-width: 720px) {
    html.shared-song-boot #my-songs-window,
    html.shared-song-boot .my-songs-window,
    html.shared-song-boot #my-songs-window.hidden,
    html.shared-song-boot .my-songs-window.hidden {
        transform: translateX(-50%) !important;
    }
}

.window-titlebar { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 12px 18px 12px 20px; border-bottom: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.012); flex-shrink: 0; }
.window-title-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.window-logo { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid rgba(255,174,60,.72); border-radius: 11px; background: linear-gradient(145deg,#ffac35,var(--orange)); color: #080a0c; font: 800 1.05rem "Space Grotesk"; box-shadow: 0 7px 22px rgba(247,147,26,.16), inset 0 1px rgba(255,255,255,.35); }
.playlist-account-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 14px 24px 0; padding: 12px 14px; border: 1px solid rgba(67,210,255,.14); border-radius: 12px; background: rgba(67,210,255,.045); }
.playlist-account-banner > div { min-width: 0; }
.playlist-account-banner strong,
.playlist-account-banner small { display: block; }
.playlist-account-banner strong { color: #e8f7fb; font: 700 .67rem "Space Grotesk",sans-serif; }
.playlist-account-banner small { margin-top: 3px; color: #7f9298; font-size: .55rem; }
.playlist-account-banner a { flex: 0 0 auto; padding: 8px 10px; border: 1px solid rgba(247,147,26,.36); border-radius: 8px; background: rgba(247,147,26,.1); color: #ffc16f; font: 700 .53rem "Space Grotesk",sans-serif; letter-spacing: .07em; text-decoration: none; }
.playlist-account-banner.is-authenticated { border-color: rgba(91,214,151,.18); background: rgba(91,214,151,.045); }
.playlist-account-banner.is-authenticated a { display: none; }
.window-title-copy { min-width: 0; }
.window-titlebar h2 { margin: 0; font: 700 1rem "Space Grotesk", sans-serif; color: #f7f6f1; letter-spacing: .01em; }
.window-title-copy small { display: block; margin-top: 2px; color: #696f7a; font-size: .52rem; letter-spacing: .025em; white-space: nowrap; }
.window-track-count { flex: 0 0 auto; padding: 3px 8px; border: 1px solid rgba(247,147,26,.13); border-radius: 99px; background: rgba(247,147,26,.09); color: #d98920; font: 700 .5rem "Space Grotesk"; }
.window-title-right { display: flex; align-items: center; gap: 9px; }
.btn-window-live { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border: 1px solid rgba(255,82,67,.3); border-radius: 99px; background: rgba(255,82,67,.075); color: #ff665c; font: 700 .5rem "Space Grotesk"; letter-spacing: .075em; cursor: pointer; transition: background .2s, border-color .2s, transform .15s, color .2s; }
.btn-window-live.is-live-status { border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.025); color: #9ca2ac; cursor: default; }
.btn-window-live.is-live-status:not(.is-broadcasting) .pulse-red-dot { opacity: .45; box-shadow: none; animation: none; }
.btn-window-live.is-action:hover { border-color: rgba(255,82,67,.58); background: rgba(255,82,67,.16); color: #ff776f; transform: translateY(-1px); }
.btn-window-live:disabled { opacity: 1; }
.pulse-red-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5243; box-shadow: 0 0 8px #ff5243; animation: pulse-live 1.5s infinite; }
.window-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    color: #7c838e;
    cursor: pointer;
    font-family: Inter, system-ui, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    transition: color .2s, background .2s, border-color .2s;
    user-select: none;
}
.window-close-btn:hover {
    color: #fff;
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.065);
}

.shared-song-autoplay-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 12px 18px 0;
    padding: 11px 18px;
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.22), rgba(247, 147, 26, 0.08));
    border: 1px solid rgba(247, 147, 26, 0.45);
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    font-size: 0.82rem;
    box-shadow: 0 4px 20px rgba(247, 147, 26, 0.2), inset 0 0 12px rgba(247, 147, 26, 0.08);
    animation: cta-pulse 1.8s infinite ease-in-out;
    transition: transform 0.2s, background 0.2s, border-color 0.2s;
    user-select: none;
    z-index: 10;
}
.shared-song-autoplay-cta:hover {
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.32), rgba(247, 147, 26, 0.14));
    border-color: rgba(247, 147, 26, 0.7);
    transform: translateY(-1px);
}
.shared-song-autoplay-cta strong {
    color: var(--orange, #f7931a);
    font-weight: 700;
}
.cta-pulse-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--orange, #f7931a);
    color: #07090b;
    font-size: 0.62rem;
    font-weight: 900;
    padding-left: 2px;
    box-shadow: 0 0 10px rgba(247, 147, 26, 0.6);
}
@keyframes cta-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(247, 147, 26, 0.2); }
    50% { transform: scale(1.015); box-shadow: 0 6px 28px rgba(247, 147, 26, 0.45); }
}

/* HERO PLAYER DECK */
.hero-player-deck { flex: 0 0 auto; padding: 20px 24px; background: linear-gradient(180deg, rgba(247,147,26,.032), rgba(255,255,255,.006)); border-bottom: 1px solid rgba(255,255,255,.065); }
.hero-deck-inner { display: grid; grid-template-columns: 126px minmax(0,1fr); gap: 22px; align-items: center; }
.hero-disc-container { display: flex; justify-content: center; align-items: center; }
.vinyl-disc { position: relative; display: grid; place-items: center; width: 118px; height: 118px; border: 1px solid rgba(255,255,255,.065); border-radius: 50%; background: repeating-radial-gradient(circle,transparent 0 6px,rgba(255,255,255,.022) 7px 8px), radial-gradient(circle at 50% 50%,#15191d 0 19%,#07090b 20% 29%,#15191d 30% 58%,#080a0c 59% 100%); box-shadow: 0 13px 35px rgba(0,0,0,.58), 0 0 34px rgba(247,147,26,.045), inset 0 0 22px rgba(255,255,255,.018); transition: transform .3s ease; }
.vinyl-disc.is-spinning { animation: spin-vinyl 4s linear infinite; }
@keyframes spin-vinyl { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.vinyl-label { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 42px; height: 42px; border: 3px solid #080a0c; border-radius: 50%; background: radial-gradient(circle at 40% 30%,#ffad39,var(--orange) 60%,#a95507); color: #07090b; box-shadow: 0 0 22px rgba(247,147,26,.18); }
.vinyl-btc-mark { font: 800 .86rem "Space Grotesk"; line-height: 1; }
.vinyl-label small { font: 700 .32rem "Space Grotesk"; letter-spacing: .06em; margin-top: 1px; }

.hero-controls-panel { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.hero-track-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hero-kicker { font-size: .46rem; font-weight: 700; color: #dc8a21; letter-spacing: .16em; text-transform: uppercase; }
.hero-track-header h3 { margin: 3px 0 0; font: 700 1.08rem "Space Grotesk", sans-serif; color: #f6f5f1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-tags { display: flex; gap: 6px; flex-shrink: 0; }
.hero-tag { max-width: 245px; padding: 3px 8px; overflow: hidden; border-radius: 99px; font: 700 .45rem "Space Grotesk"; letter-spacing: .055em; text-overflow: ellipsis; white-space: nowrap; }
.hero-tag.genre { background: rgba(85,217,255,.075); color: #65d7f5; border: 1px solid rgba(85,217,255,.17); }
.hero-tag.bpm { background: rgba(184,242,40,.065); color: #b7dc50; border: 1px solid rgba(184,242,40,.15); }

.hero-transport-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(255,255,255,.014); border: 1px solid rgba(255,255,255,.06); border-radius: 15px; box-shadow: inset 0 1px rgba(255,255,255,.012); }
.hero-play-btn { display: grid; place-items: center; width: 42px; height: 42px; min-width: 42px; min-height: 42px; flex: 0 0 42px; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg,#ffad39,var(--orange)); color: #080a0c; border: 0; cursor: pointer; box-shadow: 0 7px 22px rgba(247,147,26,.24); transition: transform .18s cubic-bezier(0.16,1,0.3,1), background .2s ease, box-shadow .2s ease; }
.hero-play-btn:hover { transform: translateY(-1px) scale(1.04); background: #ffaa3b; box-shadow: 0 9px 26px rgba(247,147,26,.34); }
.hero-play-btn svg { width: 18px; height: 18px; fill: currentColor; }
.hero-transport-btn { display: grid; place-items: center; width: 28px; height: 28px; min-width: 28px; min-height: 28px; flex: 0 0 28px; aspect-ratio: 1; border-radius: 50%; background: transparent; border: 0; color: #69717d; cursor: pointer; transition: color .2s ease, background .15s ease; }
.hero-transport-btn:hover { color: #f5f4ef; background: rgba(255,255,255,.045); }
.hero-transport-btn:disabled { color: #3f454e; background: transparent; cursor: default; }
.hero-transport-btn svg { width: 15px; height: 15px; fill: currentColor; }
.hero-scrubber-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.hero-time { font: 600 .51rem "Space Grotesk"; color: #666d78; min-width: 27px; }
.hero-scrubber { flex: 1; min-width: 0; width: 100%; height: 4px; appearance: none; border-radius: 99px; background: linear-gradient(90deg, var(--orange) 0%, rgba(255,255,255,.14) 0%); cursor: pointer; }
.hero-scrubber::-webkit-slider-thumb { width: 14px; height: 14px; appearance: none; border-radius: 50%; background: var(--orange); box-shadow: 0 0 6px rgba(247,147,26,.8); cursor: pointer; }
.hero-scrubber:disabled { opacity: .42; cursor: default; }
.hero-scrubber:disabled::-webkit-slider-thumb { box-shadow: none; cursor: default; }
.hero-action-btn { display: grid; place-items: center; width: 34px; height: 34px; min-width: 34px; min-height: 34px; flex: 0 0 34px; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.024); border: 1px solid rgba(255,255,255,.065); color: #747c88; cursor: pointer; text-decoration: none; transition: color .2s, background .2s, border-color .2s; }
.hero-action-btn:hover { color: var(--cyan); background: rgba(85,217,255,.08); border-color: rgba(85,217,255,.22); }
.hero-action-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* MARKET MOOD & DJ NOTE CARD */
.hero-market-card { display: grid; grid-template-columns: minmax(245px,.9fr) minmax(0,1.35fr); gap: 0 18px; padding: 12px 14px; background: rgba(5,8,10,.48); border: 1px solid rgba(247,147,26,.14); border-radius: 14px; }
.market-card-header { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; padding-bottom: 8px; font: 700 .48rem "Space Grotesk"; color: #d68720; letter-spacing: .105em; }
.market-card-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.market-card-price { margin-left: auto; font: 700 .66rem "Space Grotesk"; color: #f4f2ed; letter-spacing: 0; }
.market-metrics-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 9px 16px 4px 0; border-top: 1px solid rgba(255,255,255,.065); }
.market-metric small { display: block; font-size: .41rem; color: #5e6570; font-weight: 700; letter-spacing: .09em; }
.market-metric strong { display: block; margin-top: 3px; overflow: hidden; color: #cfd2d6; font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; }
.market-dj-note-row, .market-lyrics-row { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0 4px 18px; border-top: 1px solid rgba(255,255,255,.065); border-left: 1px solid rgba(255,255,255,.065); }
.market-lyrics-row { grid-column: 1 / -1; margin-top: 9px; padding: 10px 0 0; border-left: 0; }
.dj-note-icon, .lyrics-icon { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid rgba(85,217,255,.13); border-radius: 50%; color: #6bbfd4; }
.dj-note-icon svg, .lyrics-icon svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.dj-note-content, .lyrics-content { min-width: 0; }
.dj-note-content small, .lyrics-content small { display: block; font-size: .42rem; font-weight: 800; color: #59c5e2; letter-spacing: .105em; }
.dj-note-content p, .lyrics-content p { margin: 3px 0 0; font-size: .57rem; line-height: 1.45; color: #afb6be; }

/* TRACK LIST SECTION */
.window-tracks-section { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 26px; scrollbar-color: rgba(255,255,255,.12) transparent; scrollbar-width: thin; }
.tracks-section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 11px; padding: 0 4px; }
.tracks-eyebrow { display: block; margin-bottom: 3px; color: #6d737d; font-size: .42rem; font-weight: 700; letter-spacing: .15em; }
.tracks-section-header h3 { margin: 0; font: 700 .82rem "Space Grotesk"; color: #e8e7e2; letter-spacing: .01em; }
.tracks-hint { font-size: .48rem; color: #5f6670; }

.window-tracks-list { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.065); }
.window-track-row { position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr) 50px 34px; align-items: center; gap: 11px; min-height: 62px; padding: 8px 8px 8px 10px; border-bottom: 1px solid rgba(255,255,255,.055); transition: background .18s, border-color .18s; }
.window-track-row::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 2px; border-radius: 3px; background: var(--orange); opacity: 0; transform: scaleY(.4); transition: opacity .18s, transform .18s; }
.window-track-row:hover { background: rgba(255,255,255,.018); }
.window-track-row.selected { background: linear-gradient(90deg,rgba(247,147,26,.055),transparent 72%); }
.window-track-row.selected::before { opacity: 1; transform: scaleY(1); }
.track-row-play-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.075); border-radius: 50%; background: rgba(255,255,255,.026); color: #8b929d; cursor: pointer; transition: color .18s, background .18s, border-color .18s, transform .18s; }
.track-row-play-btn:hover { border-color: rgba(247,147,26,.35); background: rgba(247,147,26,.12); color: var(--orange); transform: scale(1.04); }
.window-track-row.active .track-row-play-btn { border-color: var(--orange); background: var(--orange); color: #07090b; box-shadow: 0 5px 16px rgba(247,147,26,.18); }
.track-row-play-btn svg { width: 13px; height: 13px; fill: currentColor; }
.track-row-select-btn { min-width: 0; padding: 5px 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.track-row-title-col strong { display: block; overflow: hidden; color: #e8e9e7; font: 600 .68rem "Space Grotesk"; text-overflow: ellipsis; white-space: nowrap; transition: color .18s; }
.track-row-select-btn:hover strong, .window-track-row.selected .track-row-title-col strong { color: #fff; }
.track-row-title-col small { display: block; margin-top: 4px; overflow: hidden; color: #666d78; font-size: .47rem; text-overflow: ellipsis; white-space: nowrap; }
.track-row-duration { font: 600 .5rem "Space Grotesk"; color: #626975; text-align: right; }
.track-row-menu { position: relative; z-index: 3; }
.track-row-menu[open] { z-index: 8; }
.track-row-menu summary { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #69717d; cursor: pointer; list-style: none; transition: color .18s, background .18s; }
.track-row-menu summary::-webkit-details-marker { display: none; }
.track-row-menu summary:hover, .track-row-menu[open] summary { color: #fff; background: rgba(255,255,255,.055); }
.track-row-menu summary svg { width: 16px; height: 16px; fill: currentColor; }
.track-row-menu-popover { position: absolute; top: 37px; right: 0; display: flex; flex-direction: column; width: 144px; padding: 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(16,20,24,.985); box-shadow: 0 16px 36px rgba(0,0,0,.68); }
.window-track-row:last-child .track-row-menu-popover { top: auto; bottom: 37px; }
.track-menu-action { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: #aeb4bd; font-size: .55rem; text-decoration: none; cursor: pointer; transition: color .16s, background .16s; }
.track-menu-action:hover { color: #fff; background: rgba(255,255,255,.055); }
.track-menu-action.delete:hover { color: #ff756c; background: rgba(255,82,67,.08); }
.track-menu-action svg { width: 14px; height: 14px; fill: currentColor; }

/* LOADING & EMPTY COLLECTION */
.window-loading-state, .window-empty-state { flex: 1; min-height: 0; align-items: center; justify-content: center; text-align: center; }
.window-loading-state { display: flex; flex-direction: column; gap: 16px; color: #747b86; font-size: .62rem; }
.loading-orbit { position: relative; width: 54px; height: 54px; }
.loading-orbit span { position: absolute; inset: 0; border: 1px solid transparent; border-top-color: var(--orange); border-radius: 50%; animation: core-connect-spin 1.3s linear infinite; }
.loading-orbit span:nth-child(2) { inset: 7px; border-top-color: var(--cyan); animation-direction: reverse; animation-duration: 1.65s; }
.loading-orbit span:nth-child(3) { inset: 14px; border-top-color: rgba(255,255,255,.32); animation-duration: 1s; }
.window-loading-state p { margin: 0; }
.window-empty-state { display: flex; flex-direction: column; padding: 38px 24px 44px; color: var(--muted); }
.empty-state-orbit { position: relative; display: grid; place-items: center; width: 184px; height: 184px; margin-bottom: 18px; border-radius: 50%; background: radial-gradient(circle,rgba(247,147,26,.08),rgba(247,147,26,.015) 42%,transparent 69%); }
.empty-state-orbit::before { content: ""; position: absolute; inset: 16px; border: 1px dotted rgba(85,217,255,.18); border-radius: 50%; animation: spin-vinyl 18s linear infinite; }
.empty-orbit-ring { position: absolute; border-radius: 50%; }
.empty-orbit-ring.ring-one { inset: 31px; border: 1px solid rgba(247,147,26,.25); box-shadow: 0 0 26px rgba(247,147,26,.08); }
.empty-orbit-ring.ring-two { inset: 44px; border: 1px dashed rgba(85,217,255,.28); animation: spin-vinyl 12s linear infinite reverse; }
.empty-orbit-wave { position: absolute; top: 50%; width: 44px; height: 32px; opacity: .72; transform: translateY(-50%); background: repeating-linear-gradient(90deg,transparent 0 4px,currentColor 5px 6px,transparent 7px 9px); clip-path: polygon(0 45%,10% 22%,20% 66%,30% 36%,40% 78%,50% 13%,60% 62%,70% 35%,80% 72%,90% 28%,100% 50%,100% 58%,90% 39%,80% 83%,70% 46%,60% 72%,50% 25%,40% 88%,30% 48%,20% 76%,10% 34%,0 55%); }
.empty-orbit-wave.wave-left { right: calc(50% + 48px); color: var(--orange); }
.empty-orbit-wave.wave-right { left: calc(50% + 48px); color: var(--cyan); transform: translateY(-50%) scaleX(-1); }
.empty-state-heart { position: relative; z-index: 2; width: 48px; height: 48px; overflow: visible; fill: none; stroke: var(--orange); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 11px rgba(247,147,26,.38)); }
.empty-state-copy { max-width: 520px; }
.empty-state-eyebrow { display: block; margin-bottom: 9px; color: #d98920; font-size: .45rem; font-weight: 700; letter-spacing: .17em; }
.window-empty-state h3 { margin: 0; color: #f3f2ee; font: 700 clamp(1.2rem,2.5vw,1.55rem) "Space Grotesk"; letter-spacing: -.015em; }
.window-empty-state p { max-width: 455px; margin: 10px auto 0; color: #777e89; font-size: .68rem; line-height: 1.65; }
.empty-listen-live-btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-width: 190px; min-height: 48px; margin-top: 25px; padding: 0 23px; border: 1px solid rgba(247,147,26,.7); border-radius: 14px; background: linear-gradient(180deg,rgba(247,147,26,.09),rgba(247,147,26,.025)); color: var(--orange); font: 700 .68rem "Space Grotesk"; letter-spacing: .08em; cursor: pointer; box-shadow: 0 9px 32px rgba(0,0,0,.35),0 0 24px rgba(247,147,26,.08),inset 0 1px rgba(255,255,255,.04); transition: transform .18s,background .2s,box-shadow .2s; }
.empty-listen-live-btn:hover { transform: translateY(-2px); background: rgba(247,147,26,.12); box-shadow: 0 12px 36px rgba(0,0,0,.42),0 0 28px rgba(247,147,26,.15); }
.empty-listen-live-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.empty-sync-note { margin-top: 18px; color: #565d68; font: 600 .44rem "Space Grotesk"; letter-spacing: .13em; }
.empty-sync-note.is-warning { color: #bd873e; }

/* DELETE CONFIRMATION MODAL */
.delete-confirm-overlay { position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0,0,0,.78) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; z-index: 100000 !important; transition: opacity .2s ease; }
.delete-confirm-overlay.hidden { opacity: 0 !important; pointer-events: none !important; display: none !important; }

.delete-confirm-modal { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) scale(1) !important; width: min(390px, 90vw) !important; background: rgba(14,18,23,.98) !important; border: 1px solid rgba(255,82,67,.3) !important; border-radius: 22px !important; backdrop-filter: blur(32px) !important; -webkit-backdrop-filter: blur(32px) !important; box-shadow: 0 24px 60px rgba(0,0,0,.92), 0 0 30px rgba(255,82,67,.12) !important; z-index: 100001 !important; padding: 26px 24px 22px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; box-sizing: border-box !important; transition: opacity .2s ease, transform .2s cubic-bezier(0.16,1,0.3,1) !important; }
.delete-confirm-modal.hidden { opacity: 0 !important; transform: translate(-50%,-46%) scale(0.95) !important; pointer-events: none !important; display: none !important; }

.confirm-icon-wrap { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,82,67,.12); border: 1px solid rgba(255,82,67,.25); color: #ff5243; margin-bottom: 14px; }
.confirm-icon-wrap svg { width: 22px; height: 22px; fill: currentColor; }
.delete-confirm-modal h3 { margin: 0 0 8px; font: 700 1.05rem "Space Grotesk", sans-serif; color: #fff; letter-spacing: .02em; }
.delete-confirm-modal p { margin: 0 0 22px; font-size: .68rem; line-height: 1.45; color: #9da5b2; }
.delete-confirm-modal p strong { color: #fff; }

.confirm-modal-actions { display: flex; gap: 10px; width: 100%; }
.btn-confirm-cancel { flex: 1; padding: 10px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 99px; background: rgba(255,255,255,.04); color: #b4bac6; font: 600 .68rem "Space Grotesk", sans-serif; cursor: pointer; transition: all .18s ease; }
.btn-confirm-cancel:hover { background: rgba(255,255,255,.09); color: #fff; }
.btn-confirm-delete { flex: 1; padding: 10px 16px; border: 0; border-radius: 99px; background: linear-gradient(135deg, #ff5243 0%, #e03222 100%); color: #fff; font: 700 .68rem "Space Grotesk", sans-serif; letter-spacing: .02em; cursor: pointer; box-shadow: 0 0 18px rgba(255,82,67,.4); transition: all .18s ease; }
.btn-confirm-delete:hover { transform: scale(1.03); box-shadow: 0 0 24px rgba(255,82,67,.6); }

.dock-links { display: flex; align-items: center; gap: 5px; }.dock-links a, .live-room-button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 10px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); text-decoration: none; cursor: pointer; }.dock-links a:hover { color: var(--text); background: rgba(255,255,255,.04); }.dock-links small { font-size: .46rem; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }.tv-icon { width: 19px; height: 13px; border: 1.5px solid currentColor; border-radius: 3px; box-shadow: 0 5px 0 -3px currentColor; }.about-icon { display: grid; place-items: center; width: 17px; height: 17px; border: 1.5px solid currentColor; border-radius: 50%; font-family: serif; font-size: .66rem; font-weight: 800; }
.live-room-button { padding-inline: 12px; border: 1px solid rgba(162,108,255,.18); background: linear-gradient(120deg,rgba(247,147,26,.04),rgba(162,108,255,.06)); }.live-room-button > span:last-child { display: flex; align-items: center; gap: 5px; color: #d0d2d7; font-size: .52rem; font-weight: 700; letter-spacing: .08em; }.live-room-button small { padding: 2px 4px; border-radius: 4px; background: rgba(184,242,40,.1); color: var(--lime); font-size: .38rem; }.room-icon { color: var(--orange); font-size: 1rem; }

body:not(.is-playing) .dock-track > span i { opacity: .42; }

/* LEGACY SUPPORT MODAL & PAYMENT FLOW */
.support-modal-overlay,
#support-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(4, 6, 8, 0.86) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    z-index: 99998 !important;
    opacity: 1;
    transition: opacity 0.25s ease;
}
.support-modal-overlay.hidden,
#support-modal-overlay.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
}

.support-modal-window,
#support-modal-window {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1) !important;
    width: min(720px, 94vw) !important;
    max-height: 90vh !important;
    background: rgba(12, 15, 19, 0.98) !important;
    border: 1px solid rgba(247, 147, 26, 0.3) !important;
    border-radius: 24px !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 40px rgba(247, 147, 26, 0.08) !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.support-modal-window.hidden,
#support-modal-window.hidden {
    opacity: 0 !important;
    transform: translate(-50%, -46%) scale(0.96) !important;
    pointer-events: none !important;
    display: none !important;
}

.bolt-logo {
    background: rgba(247, 147, 26, 0.18) !important;
    border: 1px solid rgba(247, 147, 26, 0.4) !important;
    color: var(--orange) !important;
    box-shadow: 0 0 12px rgba(247, 147, 26, 0.3) !important;
}
.support-month-badge {
    padding: 3px 9px;
    border-radius: 99px;
    background: rgba(247, 147, 26, 0.12);
    border: 1px solid rgba(247, 147, 26, 0.3);
    color: var(--orange);
    font: 700 0.52rem "Space Grotesk", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.support-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.support-hero-intro {
    text-align: left;
}
.support-subtitle {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #c4c9d4;
}

/* SPONSORSHIP TELEMETRY DECK (ACTIVE SPONSOR & QUEUE) */
.sponsorship-telemetry-deck {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ACTIVE SPONSOR CARD */
.active-sponsor-card {
    padding: 16px;
    background: linear-gradient(135deg, rgba(85, 217, 255, 0.07) 0%, rgba(12, 17, 24, 0.95) 100%);
    border: 1px solid rgba(85, 217, 255, 0.35);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.active-sponsor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.active-live-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 800 0.58rem "Space Grotesk", sans-serif;
    letter-spacing: 0.12em;
    color: var(--lime);
}
.pulse-green-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 10px var(--lime);
    animation: live-pulse 1.4s infinite;
}
.active-sponsor-time {
    font: 700 0.62rem "Space Grotesk", sans-serif;
    color: var(--cyan);
    padding: 2px 8px;
    background: rgba(85, 217, 255, 0.12);
    border-radius: 6px;
    border: 1px solid rgba(85, 217, 255, 0.25);
}
.active-sponsor-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.active-sponsor-identity {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.sponsor-avatar-icon {
    font-size: 1.4rem;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(247, 147, 26, 0.5));
}
.active-sponsor-name {
    margin: 0;
    font: 800 1.05rem "Space Grotesk", sans-serif;
    color: #fff;
    letter-spacing: 0.02em;
}
.active-sponsor-msg {
    margin: 4px 0 0;
    font-size: 0.68rem;
    color: #a4abb8;
    font-style: italic;
    line-height: 1.35;
}
.active-sponsor-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.active-sponsor-hours {
    font: 700 0.62rem "Space Grotesk", sans-serif;
    color: var(--orange);
}
.on-air-mention-tag {
    font: 600 0.54rem "Space Grotesk", sans-serif;
    color: var(--faint);
}
.active-progress-track {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 99px;
    overflow: hidden;
}
.active-progress-bar {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #55d9ff 0%, #b8f228 100%);
    box-shadow: 0 0 10px rgba(85, 217, 255, 0.5);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* SPONSORSHIP QUEUE */
.sponsorship-queue-wrapper {
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--line);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.queue-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.queue-title-group {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 700 0.62rem "Space Grotesk", sans-serif;
    letter-spacing: 0.1em;
    color: var(--muted);
}
.queue-bolt {
    color: var(--orange);
}
.queue-count-badge {
    padding: 1.5px 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    font-size: 0.52rem;
    color: var(--faint);
}
.queue-total-runway {
    font: 700 0.58rem "Space Grotesk", sans-serif;
    color: var(--cyan);
}
.queue-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
}
.queue-item-card {
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.queue-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.queue-item-identity {
    display: flex;
    align-items: center;
    gap: 8px;
}
.queue-num {
    font: 800 0.56rem "Space Mono", monospace;
    color: var(--orange);
    padding: 1px 4px;
    background: rgba(247, 147, 26, 0.1);
    border-radius: 4px;
}
.queue-name {
    font: 700 0.72rem "Space Grotesk", sans-serif;
    color: #fff;
}
.queue-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.queue-amount {
    font: 700 0.68rem "Space Grotesk", sans-serif;
    color: #fff;
}
.queue-hours {
    font: 700 0.62rem "Space Grotesk", sans-serif;
    color: var(--cyan);
}
.queue-start-time {
    font-size: 0.54rem;
    color: var(--faint);
}
.queue-item-msg {
    margin: 0;
    font-size: 0.6rem;
    color: var(--muted);
    font-style: italic;
}
.queue-empty-state {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(247, 147, 26, 0.04);
    border: 1px dashed rgba(247, 147, 26, 0.2);
    border-radius: 10px;
}
.empty-queue-icon {
    font-size: 1.2rem;
    color: var(--orange);
}
.queue-empty-state p {
    margin: 0;
    font-size: 0.64rem;
    line-height: 1.4;
    color: var(--muted);
}
.queue-empty-state p strong {
    color: #fff;
}

/* SUPPORT FORM CARD (BOTTOM) */
.support-form-card {
    padding: 16px;
    background: rgba(14, 18, 24, 0.6);
    border: 1px solid var(--line);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.support-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.form-title-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.form-bolt {
    color: var(--orange);
}
.form-title {
    font: 800 0.68rem "Space Grotesk", sans-serif;
    letter-spacing: 0.1em;
    color: #fff;
}
.rate-badge {
    font: 800 0.56rem "Space Grotesk", sans-serif;
    letter-spacing: 0.05em;
    color: var(--orange);
    padding: 2px 8px;
    background: rgba(247, 147, 26, 0.12);
    border: 1px solid rgba(247, 147, 26, 0.3);
    border-radius: 99px;
}

/* AMOUNTS GRID */
.support-amounts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.amount-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 12px 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}
.amount-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}
.amount-card.active {
    background: rgba(247, 147, 26, 0.12);
    border-color: rgba(247, 147, 26, 0.5);
    box-shadow: 0 0 16px rgba(247, 147, 26, 0.2);
}
.amount-value {
    font: 700 1.05rem "Space Grotesk", sans-serif;
    color: #fff;
}
.amount-card.active .amount-value {
    color: var(--orange);
}
.amount-hours {
    font: 600 0.5rem "Space Grotesk", sans-serif;
    color: var(--cyan);
}

.custom-amount-card {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    transition: all 0.2s ease;
}
.custom-amount-card:focus-within, .custom-amount-card.active {
    background: rgba(247, 147, 26, 0.12);
    border-color: rgba(247, 147, 26, 0.5);
    box-shadow: 0 0 16px rgba(247, 147, 26, 0.2);
}
.currency-prefix {
    font: 700 0.95rem "Space Grotesk", sans-serif;
    color: var(--faint);
    margin-right: 4px;
}
.custom-amount-card input {
    width: 100%;
    background: transparent;
    border: 0;
    color: #fff;
    font: 700 0.9rem "Space Grotesk", sans-serif;
    padding: 10px 0;
}
.custom-amount-card input::placeholder {
    color: var(--faint);
    font-weight: 500;
}

/* GPU IMPACT BANNER */
.gpu-impact-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(85, 217, 255, 0.05);
    border: 1px solid rgba(85, 217, 255, 0.2);
    border-radius: 12px;
}
.impact-icon {
    font-size: 1.2rem;
    color: var(--cyan);
    filter: drop-shadow(0 0 8px rgba(85, 217, 255, 0.5));
}
.impact-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.impact-copy strong {
    font: 700 0.72rem "Space Grotesk", sans-serif;
    color: #dce5ec;
}
.impact-copy small {
    font-size: 0.52rem;
    color: var(--faint);
}

/* FORM FIELDS */
.supporter-form-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.form-group label {
    font: 700 0.54rem "Space Grotesk", sans-serif;
    letter-spacing: 0.08em;
    color: var(--muted);
    text-transform: uppercase;
}
.form-group label small {
    color: var(--faint);
    text-transform: none;
    letter-spacing: normal;
}
.form-group input {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 12px;
    color: #fff;
    font-size: 0.72rem;
    transition: all 0.2s ease;
}
.form-group input:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(247, 147, 26, 0.4);
    box-shadow: 0 0 10px rgba(247, 147, 26, 0.15);
}
.form-group input::placeholder {
    color: var(--faint);
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.64rem;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}
.checkbox-label input {
    width: 14px;
    height: 14px;
    accent-color: var(--orange);
    cursor: pointer;
}

/* PAYMENT RAIL TOGGLE */
.payment-rail-toggle {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.rail-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--muted);
    font: 700 0.68rem "Space Grotesk", sans-serif;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.2s ease;
}
.rail-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}
.rail-btn.active {
    background: rgba(247, 147, 26, 0.15);
    border-color: rgba(247, 147, 26, 0.45);
    color: #fff;
    box-shadow: 0 0 16px rgba(247, 147, 26, 0.2);
}
.rail-badge {
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(85, 217, 255, 0.18);
    border: 1px solid rgba(85, 217, 255, 0.4);
    color: var(--cyan);
    font: 800 0.46rem "Space Grotesk", sans-serif;
    letter-spacing: 0.06em;
}

/* BITCOIN & LIGHTNING CARD */
.bitcoin-invoice-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: rgba(10, 14, 20, 0.65);
    border: 1px solid rgba(247, 147, 26, 0.25);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(247, 147, 26, 0.03);
}
.bitcoin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btc-badge-label {
    font: 800 0.58rem "Space Grotesk", sans-serif;
    letter-spacing: 0.1em;
    color: var(--orange);
}
.bitcoin-sats-badge {
    padding: 3px 10px;
    border-radius: 99px;
    background: rgba(247, 147, 26, 0.15);
    border: 1px solid rgba(247, 147, 26, 0.4);
    color: var(--orange);
    font: 800 0.72rem "Space Grotesk", sans-serif;
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px rgba(247, 147, 26, 0.4);
}
.bitcoin-qr-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}
.bitcoin-qr-mount {
    width: 170px;
    height: 170px;
    background: #fff;
    border: 3px solid rgba(247, 147, 26, 0.8);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 0 24px rgba(247, 147, 26, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.bitcoin-qr-mount svg,
.bitcoin-qr-mount img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.qr-loading-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.62rem;
    color: #111;
    text-align: center;
}

.bitcoin-copy-group {
    display: flex;
    gap: 6px;
}
.lightning-invoice-input {
    flex: 1;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--line);
    border-radius: 9px;
    color: #a4abb8;
    font: 500 0.58rem "Space Mono", monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn-copy-lightning {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9px;
    color: #fff;
    font: 700 0.62rem "Space Grotesk", sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.btn-copy-lightning:hover {
    background: rgba(247, 147, 26, 0.2);
    border-color: var(--orange);
    color: var(--orange);
}

.bitcoin-actions-row {
    display: flex;
    gap: 8px;
}
.btn-webln-pay {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f7931a 0%, #d87604 100%);
    border: 0;
    border-radius: 99px;
    color: #080a0c;
    font: 800 0.74rem "Space Grotesk", sans-serif;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(247, 147, 26, 0.4);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-webln-pay:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(247, 147, 26, 0.7);
    background: linear-gradient(135deg, #ffaa3b 0%, #f7931a 100%);
}
.btn-open-btcpay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background: rgba(85, 217, 255, 0.08);
    border: 1px solid rgba(85, 217, 255, 0.3);
    border-radius: 99px;
    color: var(--cyan);
    font: 700 0.64rem "Space Grotesk", sans-serif;
    text-decoration: none;
    transition: all 0.2s ease;
}
.btn-open-btcpay:hover {
    background: rgba(85, 217, 255, 0.2);
}

.bitcoin-settlement-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: 600 0.62rem "Space Grotesk", sans-serif;
    color: var(--cyan);
    padding: 4px;
}
.btn-confirm-test-btc {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(247, 147, 26, 0.4);
    border-radius: 9px;
    color: var(--faint);
    font: 600 0.58rem "Space Grotesk", sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-confirm-test-btc:hover {
    background: rgba(247, 147, 26, 0.1);
    color: var(--orange);
    border-style: solid;
}

/* STRIPE FLOW */
.stripe-flow-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.stripe-element-mount {
    min-height: 120px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.stripe-loading-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 100px;
    font-size: 0.68rem;
    color: var(--faint);
}
.spinner-dot {
    width: 8px;
    height: 8px;
    border: 2px solid var(--orange);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.stripe-error-message {
    padding: 8px 12px;
    background: rgba(255, 77, 89, 0.12);
    border: 1px solid rgba(255, 77, 89, 0.35);
    border-radius: 8px;
    color: #ff6b75;
    font-size: 0.65rem;
    line-height: 1.4;
}

.btn-stripe-hosted-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 99px;
    color: #fff;
    font: 700 0.68rem "Space Grotesk", sans-serif;
    text-decoration: none;
    transition: all 0.2s ease;
}
.btn-stripe-hosted-checkout:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-submit-support {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    border: 0;
    border-radius: 99px;
    background: linear-gradient(135deg, #f7931a 0%, #e07f0b 100%);
    color: #080a0c;
    font: 700 0.82rem "Space Grotesk", sans-serif;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 0 24px rgba(247, 147, 26, 0.4);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-submit-support:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 32px rgba(247, 147, 26, 0.65);
    background: linear-gradient(135deg, #ffaa3b 0%, #f7931a 100%);
}
.btn-submit-support:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.support-footer-notice {
    text-align: center;
    padding-top: 4px;
}
.support-footer-notice p {
    margin: 0;
    font-size: 0.54rem;
    color: var(--faint);
    line-height: 1.4;
}
.support-footer-notice a {
    color: var(--cyan);
    text-decoration: none;
}
.support-footer-notice a:hover {
    text-decoration: underline;
}



/* SUCCESS VIEW */
.support-success-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 10px 10px;
}
.success-icon-wrap {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(247, 147, 26, 0.15);
    border: 2px solid var(--orange);
    color: var(--orange);
    font-size: 1.8rem;
    box-shadow: 0 0 30px rgba(247, 147, 26, 0.4);
    margin-bottom: 14px;
    animation: success-pop 0.4s cubic-bezier(0.17, 0.89, 0.32, 1.49) forwards;
}
@keyframes success-pop {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.support-success-view h3 {
    margin: 0 0 6px;
    font: 700 1.3rem "Space Grotesk", sans-serif;
    color: #fff;
    letter-spacing: 0.04em;
}
.success-sub {
    margin: 0 0 20px;
    font-size: 0.72rem;
    color: #a4abb8;
}
.success-stats-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    padding: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 16px;
}
.success-stat small {
    display: block;
    font-size: 0.48rem;
    color: var(--faint);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.success-stat strong {
    display: block;
    font: 700 0.82rem "Space Grotesk", sans-serif;
    color: #fff;
    margin-top: 3px;
}
.success-stat:nth-child(2) strong {
    color: var(--cyan);
}
.success-stat:nth-child(3) {
    grid-column: 1 / -1;
    padding-top: 12px;
    margin-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.success-stat:nth-child(3) strong {
    overflow-wrap: anywhere;
}
.success-wall-note {
    font-size: 0.65rem;
    color: var(--lime);
    margin: 0 0 20px;
}
.success-actions {
    display: flex;
    gap: 10px;
    width: 100%;
}
.btn-success-close {
    flex: 1;
    padding: 12px;
    border: 0;
    border-radius: 99px;
    background: var(--orange);
    color: #080a0c;
    font: 700 0.74rem "Space Grotesk", sans-serif;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(247, 147, 26, 0.35);
    transition: transform 0.2s ease;
}
.btn-success-close:hover {
    transform: scale(1.02);
}
.btn-success-portal {
    flex: 1;
    padding: 12px;
    border: 1px solid rgba(85, 217, 255, 0.4);
    border-radius: 99px;
    background: rgba(85, 217, 255, 0.1);
    color: var(--cyan);
    font: 700 0.74rem "Space Grotesk", sans-serif;
    cursor: pointer;
}

/* Large-screen composition layout: float the four market voices around the
   visualizer. The existing <= 980px and <= 720px layouts remain unchanged. */
@media (min-width: 1200px) {
    main { position: relative; }

    .market-score {
        position: absolute;
        z-index: 4;
        top: 14px;
        right: 0;
        left: 0;
        height: 831px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        pointer-events: none;
    }

    .market-score .score-heading { display: none; }

    .market-score .signal-strip {
        position: relative;
        display: grid;
        grid-template-columns: 4px min(25%, 300px) minmax(0, 1fr) min(25%, 300px) 4px;
        grid-template-rows: minmax(0, 1fr) 131px 188px 131px minmax(0, 1fr);
        width: 100%;
        height: 100%;
        border: 0;
    }

    .market-score .score-signal,
    .market-score .score-signal:first-child {
        position: relative;
        width: auto;
        height: 131px;
        min-height: 0;
        padding: 14px 16px 10px;
        border: 1px solid var(--line-strong);
        border-radius: 14px;
        background: linear-gradient(145deg, rgba(12,16,19,.94), rgba(6,9,11,.88));
        box-shadow: 0 18px 44px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.025);
        pointer-events: auto;
        scale: .85;
    }

    .market-score .score-signal:nth-child(1) { grid-column: 2; grid-row: 2; }
    .market-score .score-signal:nth-child(2) { grid-column: 2; grid-row: 4; }
    .market-score .score-signal:nth-child(3) { grid-column: 4; grid-row: 4; }
    .market-score .score-signal:nth-child(4) { grid-column: 4; grid-row: 2; }
}

@media (max-width: 980px) {
    .app-shell { width: min(calc(100% - 24px), 820px); }
    .broadcast-stage { min-height: 690px; }
    .composition-panel { padding: 142px 18px 112px; }
    .composition-visual { width: min(72vw,520px); }
    .track-panel { padding: 28px 30px; }.track-panel h1 { font-size: clamp(1.7rem,4.3vw,2.45rem); }
    .header-telemetry > div { padding-inline: 9px; }
    .funding-telemetry strong { display: none; }
    .audience #listener-label { display: none; }
    .player-dock { grid-template-columns: auto minmax(120px,1fr) clamp(76px,16vw,140px) auto auto; gap: 10px; }
    .volume-control { display: flex; gap: 6px; }
    #volume-slider { width: 100%; min-width: 0; }
    .dock-links { grid-column: auto; margin: 0; padding: 0; border: 0; }
    .dock-links a { width: 36px; min-width: 36px; padding: 0; }
    .dock-links a small { display: none; }
    .signal-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .score-signal:nth-child(3) { padding-left: 3px; border-top: 1px solid var(--line); border-left: 0; }
    .score-signal:nth-child(4) { border-top: 1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   Listener sponsorship — integrated schedule and focused checkout
   -------------------------------------------------------------------------- */
.sponsor-mission {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(440px, 1.18fr);
    gap: clamp(28px, 5vw, 72px);
    margin: 22px 0 116px;
    padding: clamp(30px, 5vw, 64px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 8% 0%, rgba(247,147,26,.11), transparent 34rem),
        linear-gradient(145deg, rgba(14,18,21,.96), rgba(7,10,12,.92));
    box-shadow: 0 32px 90px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.025);
}
@media (min-width: 1200px) {
    .sponsor-mission { padding-right: 25px; }
}
.sponsor-mission-copy { align-self: center; }
.sponsor-eyebrow { display: block; margin-bottom: 17px; color: var(--orange); font-size: .62rem; font-weight: 800; letter-spacing: .18em; }
.sponsor-mission h2 { max-width: 520px; margin: 0; font: 650 clamp(2rem, 4.3vw, 3.75rem)/.98 "Space Grotesk", sans-serif; letter-spacing: -.055em; }
.sponsor-mission-copy > p { max-width: 520px; margin: 23px 0 0; color: #a9adb4; font-size: .92rem; line-height: 1.7; }
.sponsor-mission-status { display: flex; flex-direction: column; gap: 5px; margin: 28px 0 20px; }
.sponsor-mission-status strong { color: #f7f5ef; font-size: .78rem; }
.sponsor-mission-status small { color: var(--faint); font-size: .62rem; }
.sponsor-primary-cta {
    min-height: 48px; padding: 0 21px; border: 1px solid var(--orange); border-radius: 13px;
    background: var(--orange); color: #160d03; font-weight: 800; cursor: pointer;
    box-shadow: 0 10px 30px rgba(247,147,26,.16); transition: transform .2s, box-shadow .2s;
}
.sponsor-primary-cta:hover { transform: translateY(-2px); box-shadow: 0 15px 36px rgba(247,147,26,.24); }
.sponsor-board { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: rgba(4,7,9,.58); }
.sponsor-board-heading, .sponsor-list-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sponsor-board-heading { padding: 2px 2px 15px; color: #dfe1e4; font-size: .61rem; letter-spacing: .14em; }
.sponsor-board-heading > div { display: flex; align-items: center; gap: 10px; }
.sponsor-board-heading .live-dot { width: 6px; height: 6px; }
.sponsor-count { color: var(--faint); letter-spacing: .04em; }
.sponsor-current { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 20px 20px 23px; overflow: hidden; border: 1px solid rgba(247,147,26,.21); border-radius: 15px; background: rgba(247,147,26,.055); }
.sponsor-current small, .sponsor-list-label { color: var(--faint); font-size: .55rem; font-weight: 800; letter-spacing: .13em; }
.sponsor-current h3 { margin: 7px 0 0; color: #fff; font: 650 1rem "Space Grotesk", sans-serif; }
.sponsor-current p { margin: 7px 0 0; color: #9ea3aa; font-size: .68rem; line-height: 1.45; }
.sponsor-current-time { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 5px; text-align: right; }
.sponsor-current-time strong { color: #e8e5dd; font-size: .67rem; }
.sponsor-current-time span { color: var(--faint); font-size: .58rem; }
.sponsor-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: rgba(255,255,255,.06); }
.sponsor-progress span { display: block; height: 100%; background: var(--orange); transition: width .45s ease; }
.sponsor-list-block { margin-top: 19px; }
.sponsor-list-label { margin-bottom: 9px; padding: 0 2px; }
.sponsor-list-label span:last-child { color: #737881; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sponsor-list { display: flex; flex-direction: column; }
.sponsor-list-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 2px; border-top: 1px solid rgba(255,255,255,.06); }
.sponsor-list-row > div { min-width: 0; }
.sponsor-list-row strong { display: block; overflow: hidden; color: #e9e8e3; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.sponsor-list-row small { display: block; margin-top: 4px; overflow: hidden; color: #747983; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.sponsor-list-row time { flex: 0 0 auto; color: #979ba3; font-size: .59rem; white-space: nowrap; }
.sponsor-empty { padding: 14px 2px 3px; border-top: 1px solid rgba(255,255,255,.06); color: #737983; font-size: .62rem; line-height: 1.5; }
.sponsor-empty.compact { padding-bottom: 0; }
.sponsor-recent-block { margin-top: 23px; }

#support-modal-window.support-modal-window {
    top: 50%; left: 50%; width: min(94vw, 680px); max-height: min(90vh, 780px); margin: 0;
    overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 22px;
    background: #0a0d10; box-shadow: 0 38px 120px rgba(0,0,0,.72); transform: translate(-50%,-50%);
}
.support-modal-overlay { background: rgba(1,3,4,.76); backdrop-filter: blur(14px); }
.sponsor-checkout-titlebar { padding: 19px 21px; background: rgba(255,255,255,.018); }
.sponsor-checkout-titlebar .window-title-left { align-items: flex-start; }
.sponsor-checkout-titlebar .window-logo { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(247,147,26,.42); border-radius: 50%; background: rgba(247,147,26,.08); color: var(--orange); font-size: 1rem; }
.sponsor-checkout-titlebar h2 { font-size: 1rem; letter-spacing: -.015em; }
.sponsor-checkout-titlebar p { margin: 4px 0 0; color: var(--faint); font-size: .59rem; }
#support-modal-window .window-close-btn { border: 0; border-radius: 9px; background: transparent; color: #777c84; }
#support-modal-window .window-close-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
#support-modal-window .support-modal-body { padding: 0; overflow-y: auto; }
.sponsor-checkout-layout { display: block; min-height: 0; }
.sponsor-checkout-value {
    display: block; min-width: 0; padding: 20px 26px;
    border-right: 0; border-bottom: 1px solid rgba(255,255,255,.075);
    background: rgba(255,255,255,.012);
}
.checkout-value-eyebrow { color: var(--orange); font-size: .55rem; font-weight: 850; letter-spacing: .17em; }
.sponsor-checkout-value h3 { max-width: 340px; margin: 15px 0 0; color: #f5f3ed; font: 650 1.55rem/1.08 "Space Grotesk",sans-serif; letter-spacing: -.035em; }
.sponsor-checkout-value > p { max-width: 370px; margin: 15px 0 0; color: #858b94; font-size: .66rem; line-height: 1.65; }
.checkout-window-card { margin-top: 25px; padding: 17px; border: 1px solid rgba(247,147,26,.25); border-radius: 14px; background: rgba(247,147,26,.065); }
.checkout-window-label, .checkout-lineup-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.checkout-window-label span, .checkout-lineup-heading > span { color: #858b94; font-size: .51rem; font-weight: 800; letter-spacing: .13em; }
.checkout-window-label small { color: #d59a52; font-size: .49rem; font-weight: 800; letter-spacing: .06em; }
.checkout-window-card > strong { display: block; margin-top: 11px; color: #fff; font: 650 .9rem "Space Grotesk",sans-serif; }
.checkout-window-card > small { display: block; margin-top: 5px; color: #9499a1; font-size: .59rem; }
.checkout-lineup-heading { margin: 0 0 7px; }
.checkout-lineup-heading small { color: #626873; font-size: .48rem; font-weight: 700; letter-spacing: .06em; }
.checkout-sponsor-lineup { display: flex; flex-direction: column; }
.checkout-lineup-row {
    display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 10px;
    min-height: 48px; border-top: 1px solid rgba(255,255,255,.065);
}
.checkout-lineup-row.is-yours { margin: 5px -8px 0; padding: 0 8px; border: 1px solid rgba(247,147,26,.24); border-radius: 11px; background: rgba(247,147,26,.05); }
.checkout-lineup-order { color: #515760; font: 650 .5rem "Space Grotesk",sans-serif; letter-spacing: .08em; }
.checkout-lineup-row.is-yours .checkout-lineup-order { color: var(--orange); }
.checkout-lineup-row > div { min-width: 0; }
.checkout-lineup-row strong { display: block; overflow: hidden; color: #e6e4de; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.checkout-lineup-row small { display: block; margin-top: 3px; color: #646a73; font-size: .47rem; font-weight: 800; letter-spacing: .1em; }
.checkout-lineup-row.is-yours small { color: #b27c3c; }
.checkout-lineup-row time { color: #90959d; font-size: .54rem; white-space: nowrap; }
.checkout-lineup-empty { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.065); color: #6b7179; font-size: .59rem; }
.checkout-value-points { display: grid; gap: 8px; margin-top: auto; padding-top: 24px; }
.checkout-value-points span { color: #878c94; font-size: .56rem; }
.checkout-value-points i { display: inline-block; width: 27px; color: #c8873d; font-style: normal; font-size: .49rem; letter-spacing: .06em; }
#support-modal-window .support-form-card { margin: 0; padding: 22px 26px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.support-form-intro { margin-bottom: 20px; }
.support-form-intro small { color: var(--orange); font-size: .52rem; font-weight: 850; letter-spacing: .15em; }
.support-form-intro strong { color: #f0eee8; font: 650 .92rem "Space Grotesk",sans-serif; }
.checkout-section-heading { display: flex; align-items: center; gap: 0; margin: 2px 0 10px; }
.checkout-section-heading ~ .checkout-section-heading { margin-top: 18px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.06); }
.checkout-section-heading > span { display: none; }
.checkout-section-heading div { display: flex; flex-direction: column; gap: 2px; }
.checkout-section-heading strong { color: #efeee9; font-size: .68rem; letter-spacing: .01em; }
.checkout-section-heading small { color: #666c75; font-size: .54rem; }
#support-modal-window .support-amounts-grid { grid-template-columns: repeat(3, 1fr) minmax(105px, 1.2fr); gap: 8px; }
#support-modal-window .amount-card, #support-modal-window .custom-amount-card { min-height: 48px; border-color: rgba(255,255,255,.09); border-radius: 11px; background: rgba(255,255,255,.025); }
#support-modal-window .amount-card:hover, #support-modal-window .amount-card.active, #support-modal-window .custom-amount-card.active { border-color: rgba(247,147,26,.62); background: rgba(247,147,26,.08); }
#support-modal-window .amount-value { font-size: .72rem; letter-spacing: .055em; }
#support-modal-window .amount-price { color: #696f78; font-size: .55rem; font-weight: 650; }
#support-modal-window .amount-card.active .amount-price { color: #b88345; }
#support-modal-window .custom-amount-card { gap: 7px; }
#support-modal-window .custom-amount-card input { min-width: 0; }
#support-modal-window .duration-suffix { flex: 0 0 auto; color: #656b74; font-size: .51rem; font-weight: 800; letter-spacing: .08em; }
#support-modal-window .gpu-impact-banner { min-height: 0; margin-top: 9px; padding: 11px 13px; border: 0; border-radius: 10px; background: rgba(255,255,255,.025); }
#support-modal-window .impact-copy strong { color: #dad8d2; font-size: .63rem; }
#support-modal-window .impact-copy small { margin-top: 3px; color: #626873; font-size: .54rem; }
.sponsor-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#support-modal-window .supporter-form-fields { gap: 11px; }
#support-modal-window .form-group label { margin-bottom: 6px; color: #8e939b; font-size: .59rem; }
#support-modal-window .form-group input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.025); color: #eee; font-size: .68rem; }
#support-modal-window .form-group input:focus { border-color: rgba(247,147,26,.66); background: rgba(247,147,26,.025); }
#support-modal-window input:disabled { opacity: .38; }
#support-modal-window .checkbox-label { color: #858b94; font-size: .59rem; }
.checkout-dj-preview { margin-top: 1px; padding: 11px 12px; border-left: 2px solid rgba(247,147,26,.65); border-radius: 0 8px 8px 0; background: rgba(255,255,255,.022); }
.checkout-dj-preview > span { display: block; color: #777d85; font-size: .48rem; font-weight: 800; letter-spacing: .12em; }
.checkout-dj-preview p { margin: 5px 0 0; color: #d4d2cc; font-size: .59rem; line-height: 1.45; }
#support-modal-window .payment-rail-toggle { padding: 3px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.02); }
#support-modal-window .rail-btn { min-height: 39px; border: 0; border-radius: 9px; color: #7d838c; background: transparent; font-size: .64rem; }
#support-modal-window .rail-btn.active { color: #f0eee9; background: rgba(255,255,255,.075); box-shadow: none; }
#support-modal-window .payment-rail-panel { margin-top: 10px; }
#support-modal-window .bitcoin-invoice-card, #support-modal-window .stripe-flow-container { padding: 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.018); }
#support-modal-window .bitcoin-invoice-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; }
#support-modal-window .stripe-flow-container { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: 0; }
#support-modal-window .bitcoin-card-header { margin-bottom: 0; }
#support-modal-window .btc-badge-label { color: #8c9199; font-size: .55rem; }
#support-modal-window .bitcoin-sats-badge { color: #666c75; font-size: .54rem; }
#support-modal-window .btn-submit-support { display: flex; align-items: center; justify-content: center; width: auto; min-width: 170px; min-height: 39px; margin: 0; padding: 0 17px; border: 1px solid rgba(247,147,26,.75); border-radius: 9px; background: rgba(247,147,26,.93); color: #160d03; font-size: .61rem; font-weight: 800; box-shadow: 0 8px 22px rgba(247,147,26,.13); cursor: pointer; }
#support-modal-window .btn-submit-support:disabled { opacity: .55; cursor: wait; }
#support-modal-window .stripe-element-mount { min-height: 0; padding: 3px 2px 14px; color: #777d86; font-size: .6rem; text-align: center; }
#support-modal-window .stripe-flow-container .stripe-element-mount { padding: 0 4px; text-align: left; }
#support-modal-window .stripe-flow-container .stripe-error-message { grid-column: 1 / -1; }
#support-modal-window .bitcoin-copy-group { margin-top: 11px; }
#support-modal-window .bitcoin-invoice-card #bitcoin-invoice-details { grid-column: 1 / -1; width: 100%; }
#support-modal-window .lightning-invoice-input { min-width: 0; }
#support-modal-window .bitcoin-actions-row { margin-top: 9px; }
#support-modal-window .bitcoin-settlement-status { margin-top: 11px; }
#support-modal-window .support-footer-notice { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
#support-modal-window .support-footer-notice p { color: #5d636c; font-size: .53rem; line-height: 1.5; }
#support-modal-window .support-footer-notice a { color: #9297a0; }
#support-modal-window .support-success-view { padding: 48px 26px; }

@media (max-width: 860px) {
    #support-modal-window.support-modal-window { width: min(94vw,680px); }
}

@media (max-width: 800px) {
    .sponsor-mission { grid-template-columns: 1fr; margin-bottom: 105px; padding: 28px; }
    .sponsor-board { padding: 16px; }
}
@media (max-width: 560px) {
    .sponsor-mission { margin-top: 14px; padding: 23px 18px; border-radius: 20px; }
    .sponsor-mission h2 { font-size: 2.2rem; }
    .sponsor-current { grid-template-columns: 1fr; gap: 11px; }
    .sponsor-current-time { align-items: flex-start; text-align: left; }
    .sponsor-list-row { align-items: flex-start; }
    .sponsor-list-row time { max-width: 125px; text-align: right; white-space: normal; }
    #support-modal-window.support-modal-window { top: auto; bottom: 0; width: 100%; max-height: 94dvh; border-radius: 20px 20px 0 0; transform: translateX(-50%); }
    .sponsor-checkout-value { padding: 17px 16px; }
    .checkout-lineup-heading { margin-top: 0; }
    .checkout-lineup-row { min-height: 49px; }
    #support-modal-window .support-form-card { padding: 19px 16px calc(22px + var(--safe-bottom)); }
    #support-modal-window .support-amounts-grid { grid-template-columns: repeat(3, 1fr); }
    #support-modal-window .custom-amount-card { grid-column: 1 / -1; }
    .sponsor-name-row { grid-template-columns: 1fr; }
    #support-modal-window .btn-submit-support { min-width: 140px; padding-inline: 13px; }
}

@media (max-width: 720px) {
    html, body { max-width: 100vw; overflow-x: hidden; }
    body { padding-bottom: calc(82px + var(--safe-bottom)); }
    .app-shell { width: min(calc(100% - 14px),560px); padding-top: max(10px,env(safe-area-inset-top)); padding-bottom: calc(14px + var(--safe-bottom)); }
    .site-header {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        grid-template-areas: "brand account" "telemetry telemetry";
        gap: 9px 12px;
        min-height: 0;
        padding: 1px 7px 10px;
    }
    .brand { grid-area: brand; min-width: 0; }
    .header-actions { display: contents; }
    .account-control { grid-area: account; align-self: center; justify-self: end; }
    .header-telemetry {
        grid-area: telemetry;
        width: 100%;
        min-width: 0;
        padding-top: 8px;
        border-top: 1px solid rgba(255,255,255,.045);
        font-size: .58rem;
    }
    .header-market { font-size: .58rem; }
    .account-sign-in,
    .account-profile-button { min-height: 30px; padding-inline: 8px; }
    .account-profile-button #account-name,
    .account-sign-in span,
    .account-chevron { display: none; }
    .playlist-account-banner { margin: 10px 13px 0; padding: 10px; gap: 10px; }
    .playlist-account-banner small { max-width: 54vw; }
    .playlist-account-banner a { padding: 7px 8px; white-space: nowrap; }
    .brand { gap: 8px; font-size: .92rem; letter-spacing: .1em; }
    .brand-mark { width: 33px; height: 33px; font-size: 1.05rem; }
    .header-telemetry > div { padding-inline: 10px; }
    .header-telemetry > div:first-child { padding-left: 0; }
    .funding-telemetry strong { display: none; }
    .funding-telemetry { margin-left: auto; padding: 0 7px; }
    .funding-bolt { font-size: .82rem; }
    .audience { display: flex; }
    .audience #listener-label { display: none; }
    .broadcast-stage { display: grid; min-height: calc(min(94vw,430px) + 279px); margin-top: 8px; border-radius: 22px; }
    .broadcast-stage, .market-score { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .ambient-glow { filter: blur(80px); opacity: .025; }
    .composition-visual::before { filter: blur(10px); }
    .composition-panel { min-height: calc(min(94vw,430px) + 277px); justify-content: flex-start; padding: 137px 10px 112px; }.composition-panel::after { display: block; }.composition-status { display: none; }.composition-visual { width: min(94vw,430px); flex: 0 0 auto; }.composition-action-copy { bottom: -29px; }.composition-core { width: 70px; height: 70px; }.core-bitcoin { font-size: 1.9rem; }.composition-caption { display: none; }
    .composition-visual.is-playing .core-bitcoin,
    .composition-visual.is-playing:hover .core-bitcoin,
    .composition-visual.is-playing:focus-visible .core-bitcoin { opacity: 1; transform: scale(1); }
    .composition-visual.is-playing .core-icon-pause,
    .composition-visual.is-playing:hover .core-icon-pause,
    .composition-visual.is-playing:focus-visible .core-icon-pause { opacity: 0 !important; transform: scale(.72); }
    .track-panel { padding: 24px 16px 18px; border: 0; }.track-head { align-items: center; }.hero-price { min-width: 128px; margin-top: -5px; padding: 7px 9px; }.hero-price strong { font-size: .8rem; }.track-panel h1 { max-width: 92%; margin-top: 11px; font-size: clamp(1.55rem,7vw,2.35rem); }.flow-state { font-size: .66rem; }.never-repeat { margin-top: 8px; font-size: .46rem; }.generation-row { right: 16px; bottom: 18px; left: 16px; width: auto; grid-template-columns: minmax(145px,.8fr) minmax(160px,1.2fr); transform: none; }
    .dj-insight { grid-template-columns: 43px 1fr; padding: 13px; }.dj-avatar { width: 41px; height: 41px; }.dj-insight p { font-size: .69rem; }
    .market-score { border-radius: 21px; padding: 14px 13px; }.score-heading small { display: none; }.signal-strip { grid-template-columns: 1fr; }.score-signal, .score-signal:first-child, .score-signal:nth-child(3), .score-signal:nth-child(4) { padding: 13px 2px 9px; border-top: 1px solid var(--line); border-left: 0; }.score-signal:first-child { border-top: 0; }.micro-chart,.volume-chart,.score-notes,.fear-greed-chart { height: 50px; }
    .player-dock { position: fixed; right: 7px; bottom: max(7px,var(--safe-bottom)); left: 7px; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 8px; min-height: 70px; margin: 0; padding: 8px 10px; border-radius: 20px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    .player-toggle-button { width: 51px; height: 51px; min-width: 51px; }
    .player-toggle-button svg { width: 23px; height: 23px; }
    .dock-track { display: flex; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; gap: 3px; }
    .dock-track-header { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
    .dock-track strong, #dock-track-title { display: block; max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .64rem; font-weight: 600; line-height: 1.2; }
    .dock-mode-badge { font-size: .38rem; padding: 1px 4px; }
    .dock-bars { height: 14px; }
    .dock-track small { display: none; }
    .volume-control { display: none; }
    .feedback-controls { gap: 2px; }
    .feedback-button { width: 34px; height: 34px; min-width: 34px; }
    .feedback-button svg { width: 19px; height: 19px; }
    .dock-bolt { font-size: 1.05rem; }
    .dock-links { grid-column: auto; margin: 0; padding: 0; border: 0; }
    .dock-links a { width: 31px; height: 31px; min-width: 31px; min-height: 31px; padding: 0; }
    .dock-links a small, .dock-links a:nth-child(2) { display: none; }
    .dock-links a .about-icon { font-size: .75rem; }
    .my-songs-window, .support-modal-window { width: 96vw; max-height: 94vh; border-radius: 16px; }
    #my-songs-window.my-songs-window { top: auto !important; bottom: 0 !important; width: 100% !important; height: min(94dvh,780px) !important; max-height: 94dvh !important; border-radius: 22px 22px 0 0 !important; transform: translateX(-50%) !important; }
    #my-songs-window.my-songs-window.hidden { transform: translate(-50%,4%) !important; }
    .window-titlebar { min-height: 62px; padding: 10px 12px 10px 14px; }
    .window-logo { width: 34px; height: 34px; flex-basis: 34px; }
    .window-title-copy small { display: none; }
    .window-titlebar h2 { font-size: .91rem; }
    .window-title-left { gap: 8px; }
    .window-track-count { padding-inline: 7px; font-size: .45rem; }
    .btn-window-live { min-height: 30px; padding-inline: 9px; font-size: .44rem; }
    .hero-player-deck { padding: 15px 14px 16px; }
    .hero-deck-inner { grid-template-columns: 1fr; }
    .hero-disc-container { display: none; }
    .hero-track-header { align-items: center; }
    .hero-track-header h3 { max-width: 57vw; font-size: .94rem; }
    .hero-tag { max-width: 145px; }
    .hero-transport-row { gap: 8px; padding: 6px 10px; }
    .hero-play-btn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; flex: 0 0 38px; aspect-ratio: 1; }
    .hero-transport-btn { width: 26px; height: 26px; min-width: 26px; min-height: 26px; flex: 0 0 26px; aspect-ratio: 1; }
    .hero-scrubber-wrap { gap: 6px; min-width: 0; }
    .hero-time { font-size: .5rem; min-width: 22px; }
    .hero-market-card { grid-template-columns: 1fr; gap: 0; }
    .market-metrics-row { padding-right: 0; }
    .market-dj-note-row, .market-lyrics-row { margin-top: 8px; padding: 9px 0 2px; border-left: 0; }
    .window-tracks-section { padding: 17px 14px calc(24px + var(--safe-bottom)); }
    .tracks-section-header { padding-inline: 3px; }
    .window-track-row { grid-template-columns: 36px minmax(0,1fr) 42px 32px; gap: 8px; padding-inline: 7px; }
    .window-empty-state { padding: 28px 20px calc(36px + var(--safe-bottom)); }
    .empty-state-orbit { width: 158px; height: 158px; margin-bottom: 13px; }
    .empty-orbit-wave { width: 31px; }
    .empty-orbit-wave.wave-left { right: calc(50% + 42px); }
    .empty-orbit-wave.wave-right { left: calc(50% + 42px); }
    .window-empty-state h3 { max-width: 330px; font-size: 1.28rem; }
    .window-empty-state p { max-width: 355px; font-size: .64rem; }
    .empty-listen-live-btn { min-height: 46px; margin-top: 22px; }
    .form-row-split { grid-template-columns: 1fr; }
    .support-amounts-grid { grid-template-columns: repeat(2, 1fr); }
    .success-stats-box { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .site-header { gap: 9px 10px; }
    .header-telemetry .audience { display: flex; }
}

@media (max-width: 390px) {
    .site-header { gap: 8px 9px; }
    .header-telemetry .audience { display: flex; }
    .brand > span:last-child { font-size: .78rem; }
    .header-telemetry > div { padding-inline: 7px; }
    .header-telemetry > div:first-child { padding-left: 0; }
    .live-status strong { display: inline; }
    .audience-icon { width: 11px; height: 11px; }
    .broadcast-stage { min-height: calc(min(94vw,365px) + 307px); }
    .composition-panel { min-height: calc(min(94vw,365px) + 305px); }
    .composition-panel { padding-top: 132px; padding-bottom: 106px; }
    .composition-status { max-width: 210px; line-height: 1.35; }
    .composition-visual { width: min(94vw,365px); }
    .hero-price { min-width: 112px; }
    .track-panel h1 { font-size: clamp(1.45rem,7.5vw,2rem); }
    .never-repeat { letter-spacing: .13em; }
    .generation-row { grid-template-columns: 1fr; gap: 7px; }
    .mini-schedule { min-height: 44px; }
    .hero-transport-row { gap: 5px; padding: 5px 8px; }
    .hero-play-btn { width: 34px; height: 34px; min-width: 34px; min-height: 34px; flex: 0 0 34px; aspect-ratio: 1; }
    .hero-transport-btn { width: 22px; height: 22px; min-width: 22px; min-height: 22px; flex: 0 0 22px; aspect-ratio: 1; }
    .btn-window-live { width: 30px; padding: 0; justify-content: center; }
    #window-live-label { display: none; }
    #my-songs-window .btn-window-live { width: auto; padding-inline: 9px; }
    #my-songs-window #window-live-label { display: inline; }
    .hero-tags { display: none; }
    .hero-track-header h3 { max-width: 76vw; }
    .hero-action-btn { display: none; }
    .window-track-count { font-size: .41rem; }
    .tracks-hint { display: none; }
    .empty-state-orbit { width: 142px; height: 142px; }
    .window-empty-state { padding-inline: 16px; }
    .dock-track strong, #dock-track-title { max-width: 105px; font-size: .60rem; }
    .dock-mode-badge { display: none; }
    .support-modal-body { padding: 14px; }
}

@media (max-width: 350px) {
    .site-header { gap: 6px; }
    .brand { flex: 0 1 auto; min-width: 0; gap: 5px; letter-spacing: .06em; }
    .brand-mark { flex: 0 0 28px; width: 28px; height: 28px; font-size: .95rem; }
    .brand > span:last-child { overflow: hidden; font-size: .68rem; text-overflow: ellipsis; }
    .header-telemetry { width: 100%; }
    .header-telemetry .funding-telemetry strong { display: none; }
    .header-telemetry .audience { display: none !important; }
    .header-telemetry > div { padding-inline: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    #starfield-canvas { display: none; }
}


/* TEST MODE PUBLIC HIDING */
.player-dock.test-mode-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}

/* ==========================================================================
   FLOATING LIVE CHAT & ON-AIR DJ HOTLINE
   ========================================================================== */

.floating-chat-trigger {
    position: fixed;
    right: max(25px, calc((100vw - 1180px) / 2 + 25px));
    bottom: 116px;
    z-index: 990;
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    user-select: none;
    isolation: isolate;
    transition: transform .22s cubic-bezier(.16,1,.3,1);
}

.floating-chat-trigger::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.floating-chat-trigger::after {
    inset: -12px;
    background: radial-gradient(circle, rgba(247,147,26,.14), transparent 68%);
    filter: blur(12px);
    opacity: 0;
    transition: opacity .28s ease;
}

.chat-trigger-emblem {
    position: relative;
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
}

.chat-trigger-asset {
    display: block;
    width: 101px;
    height: 101px;
    max-width: none;
    object-fit: contain;
    opacity: .76;
    filter: grayscale(1) saturate(.15) brightness(.82);
    transform: scale(.98);
    transition: opacity .26s ease, filter .28s ease, transform .3s cubic-bezier(.16,1,.3,1);
    pointer-events: none;
}

.chat-trigger-label {
    position: absolute;
    top: 50%;
    right: 38px;
    z-index: -2;
    display: flex;
    align-items: center;
    width: 0;
    height: 48px;
    overflow: hidden;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 99px 0 0 99px;
    background: rgba(8,12,15,.88);
    box-shadow: 0 13px 34px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.018);
    color: #a9afb7;
    font: 500 .65rem Inter, sans-serif;
    letter-spacing: .015em;
    opacity: 0;
    white-space: nowrap;
    transform: translateY(-50%) translateX(10px);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: width .34s cubic-bezier(.16,1,.3,1), padding .34s cubic-bezier(.16,1,.3,1), opacity .2s ease, transform .34s cubic-bezier(.16,1,.3,1), border-color .26s ease;
}

.floating-chat-trigger:hover::after,
.floating-chat-trigger:focus-visible::after,
.floating-chat-trigger.active::after,
.floating-chat-trigger.has-unread::after {
    opacity: .72;
}

.floating-chat-trigger:hover .chat-trigger-asset,
.floating-chat-trigger:focus-visible .chat-trigger-asset,
.floating-chat-trigger.active .chat-trigger-asset,
.floating-chat-trigger.has-unread .chat-trigger-asset {
    opacity: 1;
    filter: none;
    transform: scale(1.015);
}

.floating-chat-trigger:hover .chat-trigger-label,
.floating-chat-trigger:focus-visible .chat-trigger-label {
    width: 214px;
    padding: 0 54px 0 22px;
    border-color: rgba(255,255,255,.105);
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.floating-chat-trigger:active {
    transform: scale(.965);
}

.floating-chat-trigger.active .chat-trigger-asset {
    filter: brightness(1.08) saturate(1.04);
}

.chat-unread-badge {
    position: absolute;
    top: 8px;
    right: 7px;
    width: 13px;
    height: 13px;
    overflow: hidden;
    border-radius: 50%;
    background: #ffa01e;
    box-shadow: 0 0 0 4px rgba(247,147,26,.065), 0 0 14px 4px rgba(247,147,26,.62);
    color: transparent;
    font-size: 0;
    animation: chatUnreadPulse 2.6s ease-in-out infinite;
}

@keyframes chatUnreadPulse {
    50% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(247,147,26,.035), 0 0 18px 5px rgba(247,147,26,.72); }
}

/* LIVE CHAT DRAWER POPUP */
.live-chat-drawer {
    position: fixed;
    bottom: 94px;
    right: 24px;
    z-index: 1000;
    width: 425px;
    max-width: calc(100vw - 32px);
    height: 580px;
    max-height: calc(100vh - 120px);
    background: rgba(8, 11, 16, 0.94);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: chatPopupIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes chatPopupIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chat-drawer-header {
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-header-icon {
    font-size: 1.15rem;
}

.chat-drawer-header strong {
    display: block;
    font: 700 0.74rem "Space Grotesk", sans-serif;
    letter-spacing: 0.08em;
    color: #fff;
}

.chat-header-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    font: 500 0.52rem "Space Grotesk", sans-serif;
    letter-spacing: 0.035em;
    color: var(--muted);
}

.chat-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.7);
}

.chat-header-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: var(--muted);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-header-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Unified modal system and inline My songs player */
html.support-modal-open, body.support-modal-open { overflow: hidden; }

.window-logo.modal-brand-logo,
.sponsor-checkout-titlebar .window-logo.modal-brand-logo {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid rgba(247,147,26,.42);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%,rgba(247,147,26,.16),rgba(247,147,26,.055));
    color: var(--orange);
    font: 800 1rem "Space Grotesk",sans-serif;
    box-shadow: 0 0 0 4px rgba(247,147,26,.025), inset 0 1px rgba(255,255,255,.05);
}

#my-songs-window.my-songs-window,
#support-modal-window.support-modal-window {
    width: min(1080px,calc(100vw - 34px)) !important;
    height: min(760px,calc(100dvh - 34px)) !important;
    max-height: 94dvh !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 50% 22%,rgba(247,147,26,.03),transparent 40%),
        linear-gradient(145deg,rgba(12,16,19,.99),rgba(7,10,12,.985)) !important;
    box-shadow: 0 38px 110px rgba(0,0,0,.9),0 0 0 1px rgba(247,147,26,.025),inset 0 1px rgba(255,255,255,.05) !important;
}

#support-modal-window .sponsor-checkout-titlebar {
    min-height: 68px;
    padding: 12px 18px 12px 20px;
}
#support-modal-window .sponsor-checkout-titlebar .window-title-left { align-items: center; }
#support-modal-window .window-title-copy small { display: block; margin-top: 2px; color: #696f7a; font-size: .52rem; }
#support-modal-window .support-modal-body { flex: 1; min-height: 0; }
#support-modal-window .window-close-btn {
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    color: #7c838e;
}
#support-modal-window .window-close-btn:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.065); color: #fff; }

#my-songs-window.has-songs .window-tracks-section { padding: 24px; }
.banditron-powered-footer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 50px;
    padding: 10px 18px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg,rgba(8,12,15,.65),rgba(5,8,10,.92));
    color: #626b75;
    font: 650 .46rem "Space Grotesk",sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
    flex: 0 0 auto;
}
.banditron-powered-footer img { width: 116px; height: auto; object-fit: contain; }
.site-banditron-footer {
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 20px auto 2px;
    padding: 10px 16px;
    border-radius: 999px;
    color: #626b75;
    font: 650 .48rem "Space Grotesk",sans-serif;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}
.site-banditron-footer img { width: 116px; height: auto; object-fit: contain; }
.site-banditron-footer:hover,
.site-banditron-footer:focus-visible { color: #8b969f; background: rgba(255,255,255,.028); transform: translateY(-1px); }
.site-banditron-footer:focus-visible { outline: 1px solid rgba(85,217,255,.5); outline-offset: 3px; }
.window-tracks-list { gap: 10px; border-top: 0; }
.window-track-row {
    display: block;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 15px;
    background: rgba(255,255,255,.018);
    box-shadow: inset 0 1px rgba(255,255,255,.018);
}
.window-track-row::before { top: 14px; bottom: 14px; left: -1px; width: 2px; }
.window-track-row:hover { border-color: rgba(255,255,255,.11); background: rgba(255,255,255,.027); }
.window-track-row.expanded { border-color: rgba(247,147,26,.2); background: linear-gradient(120deg,rgba(247,147,26,.045),rgba(255,255,255,.014) 60%); }
.window-track-row.active::before,.window-track-row.expanded::before { opacity: 1; transform: scaleY(1); }
.track-row-main {
    display: grid;
    grid-template-columns: 38px minmax(190px,.9fr) minmax(210px,1.35fr) auto;
    align-items: center;
    gap: 13px;
    min-height: 66px;
    padding: 8px 10px 8px 12px;
}
.track-row-play-btn { width: 36px; height: 36px; }
.track-row-select-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.track-row-select-btn > span { min-width: 0; }
.track-row-title-col strong { font-size: .7rem; }
.track-row-chevron { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: #626a75; stroke-width: 1.8; transition: transform .2s,color .2s; }
.window-track-row.expanded .track-row-chevron { transform: rotate(180deg); stroke: var(--orange); }
.inline-track-player { display: grid; grid-template-columns: 29px minmax(80px,1fr) 29px; align-items: center; gap: 8px; min-width: 0; }
.inline-track-current,.inline-track-duration { color: #666e79; font: 600 .48rem "Space Grotesk",sans-serif; font-variant-numeric: tabular-nums; }
.inline-track-duration { text-align: right; }
.inline-track-scrubber { width: 100%; height: 3px; margin: 0; appearance: none; border-radius: 99px; cursor: pointer; }
.inline-track-scrubber::-webkit-slider-thumb { width: 12px; height: 12px; appearance: none; border: 2px solid #11161a; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px rgba(247,147,26,.42); }
.inline-track-scrubber:disabled { opacity: 1; cursor: default; background: rgba(255,255,255,.1) !important; }
.inline-track-scrubber:disabled::-webkit-slider-thumb { width: 10px; height: 10px; border: 2px solid #11161a; background: #555d68; box-shadow: none; }
.inline-track-scrubber::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid #11161a; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px rgba(247,147,26,.42); }
.inline-track-scrubber:disabled::-moz-range-thumb { background: #555d68; box-shadow: none; }
.track-row-actions { display: flex; align-items: center; gap: 5px; }
.track-row-action {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #747d88;
    font: 650 .5rem "Space Grotesk",sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: color .16s,background .16s,border-color .16s;
}
.track-row-action:hover { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.045); color: #e8e9e7; }
.track-row-action svg { width: 14px; height: 14px; fill: currentColor; }
.track-row-banditron-btn {
    border-color: rgba(25,224,246,.13);
    background: rgba(18,205,228,.035);
    color: #73e7f2;
}
.track-row-banditron-btn:hover {
    border-color: rgba(25,224,246,.34);
    background: rgba(18,205,228,.11);
    color: #b9f7fb;
    box-shadow: 0 0 18px rgba(18,205,228,.08);
}
.track-row-banditron-btn img { width: 16px; height: 16px; object-fit: contain; }
.track-row-menu-popover { width: 178px; }
.track-row-details {
    display: grid;
    grid-template-columns: minmax(260px,.9fr) minmax(280px,1.25fr);
    gap: 18px;
    margin: 0 12px;
    padding: 15px 0 16px 51px;
    border-top: 1px solid rgba(255,255,255,.065);
}
.track-row-details[hidden] { display: none; }
.track-market-heading { grid-column: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.track-market-heading span,.track-market-note small { color: #d68a2c; font-size: .44rem; font-weight: 800; letter-spacing: .12em; }
.track-market-heading strong { color: #e8e7e2; font: 700 .62rem "Space Grotesk",sans-serif; }
.track-market-metrics { grid-column: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.track-market-metrics small { display: block; color: #59616c; font-size: .39rem; font-weight: 750; letter-spacing: .08em; }
.track-market-metrics strong { display: block; margin-top: 4px; overflow: hidden; color: #c7cbd0; font-size: .51rem; text-overflow: ellipsis; white-space: nowrap; }
.track-market-note { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: flex-start; gap: 10px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.065); }
.track-market-note p { margin: 4px 0 0; color: #aeb5bd; font-size: .56rem; line-height: 1.55; }
.playlist-toast { position: absolute; right: 24px; bottom: 22px; z-index: 15; padding: 9px 12px; border: 1px solid rgba(247,147,26,.22); border-radius: 10px; background: rgba(15,19,22,.96); color: #e8e6df; font-size: .55rem; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .18s,transform .18s; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.playlist-toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
    .track-row-main { grid-template-columns: 38px minmax(160px,.8fr) minmax(150px,1fr) auto; gap: 9px; }
    .track-row-action span { display: none; }
    .track-row-action { width: 34px; padding: 0; justify-content: center; }
}

@media (max-width: 720px) {
    #my-songs-window.my-songs-window,
    #support-modal-window.support-modal-window {
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        height: min(94dvh,780px) !important;
        max-height: 94dvh !important;
        border-radius: 22px 22px 0 0 !important;
        transform: translateX(-50%) !important;
    }
    #my-songs-window.my-songs-window.hidden,
    #support-modal-window.support-modal-window.hidden { transform: translate(-50%,4%) !important; }
    #my-songs-window.has-songs .window-tracks-section { padding: 17px 13px calc(24px + var(--safe-bottom)); }
    .banditron-powered-footer { min-height: 44px; padding: 8px 14px calc(8px + var(--safe-bottom)); }
    .banditron-powered-footer img { width: 104px; }
    .site-banditron-footer { margin-top: 16px; margin-bottom: 4px; padding: 9px 13px; }
    .site-banditron-footer img { width: 104px; }
    .track-row-main { grid-template-columns: 36px minmax(0,1fr) auto; gap: 9px; padding: 9px; }
    .inline-track-player { grid-column: 2 / -1; grid-row: 2; }
    .track-row-actions { grid-column: 3; grid-row: 1; }
    .track-row-details { grid-template-columns: 1fr; gap: 13px; margin-inline: 10px; padding: 14px 2px 15px 45px; }
    .track-market-heading,.track-market-metrics,.track-market-note { grid-column: 1; grid-row: auto; }
    .track-market-note { padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.06); border-left: 0; }
}

@media (max-width: 460px) {
    .window-track-count { display: none; }
    .track-row-main { grid-template-columns: 34px minmax(0,1fr) auto; }
    .track-row-menu { display: none; }
    .track-row-details { padding-left: 43px; }
    .track-market-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 12px; }
}

.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.chat-presence {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 28px;
    color: rgba(255, 255, 255, 0.64);
    font: 600 0.62rem "Space Mono", monospace;
    font-variant-numeric: tabular-nums;
    transition: opacity 0.2s ease;
}

.chat-presence.is-empty {
    opacity: 0.38;
}

.chat-presence-icon {
    position: relative;
    width: 14px;
    height: 12px;
    display: inline-block;
}

.chat-presence-icon i {
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    top: 0;
}

.chat-presence-icon i:first-child {
    left: 1px;
    z-index: 1;
    background: #101318;
}

.chat-presence-icon i:last-child {
    right: 1px;
    border-color: rgba(52, 211, 153, 0.8);
}

.chat-presence-icon::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 1px;
    bottom: 0;
    height: 4px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom: 0;
}

/* REPLY CONTEXT BAR */
.chat-reply-bar {
    padding: 6px 16px;
    background: rgba(247, 147, 26, 0.08);
    border-bottom: 1px solid rgba(247, 147, 26, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.62rem;
}

.chat-reply-bar .reply-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-reply-bar strong {
    color: var(--orange);
}

.chat-reply-bar small {
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.chat-cancel-reply {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 6px;
}

.chat-cancel-reply:hover {
    color: #fff;
}

/* MESSAGES FEED */
.chat-messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.chat-messages-container::-webkit-scrollbar {
    width: 4px;
}

.chat-messages-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.chat-welcome-card {
    padding: 2px 4px 12px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    text-align: left;
    margin-bottom: 6px;
}

.chat-welcome-icon {
    display: none;
}

.chat-welcome-card strong {
    display: block;
    font: 700 0.72rem "Space Grotesk", sans-serif;
    color: #fff;
    margin-bottom: 3px;
}

.chat-welcome-card p {
    margin: 0;
    font-size: 0.64rem;
    line-height: 1.45;
    color: var(--muted);
}

.chat-messages-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* INDIVIDUAL CHAT BUBBLE */
.chat-bubble {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 4px 11px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 0;
    transition: background 0.15s ease;
}

.chat-bubble:hover {
    background: rgba(255, 255, 255, 0.018);
}

.chat-bubble-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.chat-author {
    font: 700 0.7rem "Space Grotesk", sans-serif;
    color: var(--cyan);
    cursor: pointer;
}

.chat-author:hover {
    text-decoration: underline;
}

.chat-time {
    font: 500 0.52rem "Space Mono", monospace;
    color: var(--faint);
}

.chat-bubble-reply-ref {
    padding: 3px 0 3px 8px;
    background: transparent;
    border-left: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    font-size: 0.58rem;
    color: var(--faint);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-text {
    margin: 0;
    font: 400 0.78rem "Inter", sans-serif;
    line-height: 1.48;
    color: #d7dbe2;
    word-break: break-word;
}

.chat-text .mention-highlight {
    color: var(--orange);
    font-weight: 600;
    background: rgba(247, 147, 26, 0.1);
    padding: 0 3px;
    border-radius: 3px;
}

/* DJ ON-AIR RESPONSE CARD */
.chat-bubble.is-dj-message {
    margin: 6px 0;
    padding: 11px 12px;
    background: linear-gradient(90deg, rgba(247, 147, 26, 0.085), rgba(255, 255, 255, 0.018));
    border: 0;
    border-left: 2px solid rgba(247, 147, 26, 0.8);
    border-radius: 0 10px 10px 0;
    box-shadow: none;
}

.chat-bubble.is-dj-message.is-music-change {
    background: linear-gradient(90deg, rgba(52, 211, 153, 0.09), rgba(255, 255, 255, 0.018));
    border-left-color: #34d399;
}

.chat-bubble.is-dj-message .chat-author {
    color: var(--orange);
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-dj-badge {
    padding: 1px 5px;
    background: transparent;
    border: 1px solid rgba(247, 147, 26, 0.28);
    border-radius: 4px;
    font: 800 0.48rem "Space Grotesk", sans-serif;
    letter-spacing: 0.05em;
    color: var(--orange);
}

.chat-dj-avatar {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(247, 147, 26, 0.5);
    border-radius: 50%;
    color: var(--orange);
    font: 700 0.58rem "Space Grotesk", sans-serif;
}

.chat-broadcast-capsule {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    margin-left: 5px;
    padding: 2px 7px;
    border: 1px solid rgba(247, 147, 26, 0.25);
    border-radius: 999px;
    background: rgba(247, 147, 26, 0.08);
    color: #f6b35f;
    font: 700 0.56rem "Space Mono", monospace;
    line-height: 1;
    vertical-align: 1px;
    white-space: nowrap;
}

.chat-airtime {
    color: #f1f3f5;
    font-weight: 600;
    white-space: nowrap;
}


button.chat-broadcast-capsule {
    cursor: pointer;
}

.chat-broadcast-capsule.is-replay {
    color: #6ee7c1;
    border-color: rgba(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 0.09);
    transition: background .18s ease, border-color .18s ease;
}

.chat-broadcast-capsule.is-replay:hover {
    background: rgba(52, 211, 153, 0.16);
    border-color: rgba(52, 211, 153, 0.6);
}

.chat-broadcast-capsule.is-live {
    color: #ff8a92;
    border-color: rgba(255, 74, 86, 0.35);
    background: rgba(255, 74, 86, 0.09);
}

.capsule-live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ff4a56;
    box-shadow: 0 0 7px rgba(255, 74, 86, 0.85);
    animation: chat-live-pulse 1.5s ease-in-out infinite;
}

@keyframes chat-live-pulse {
    50% { opacity: .45; }
}

.chat-replay-player {
    display: grid;
    grid-template-columns: 26px 30px 1fr 30px auto;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    padding: 7px 8px;
    border: 1px solid rgba(52, 211, 153, 0.18);
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.28);
}

.chat-replay-toggle,
.chat-replay-live {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.chat-replay-toggle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #07120e;
    background: #6ee7c1;
    font-size: .58rem;
}

.chat-replay-time,
.chat-replay-duration {
    color: #9ca3af;
    font: 600 .48rem "Space Mono", monospace;
}

.chat-replay-scrubber {
    width: 100%;
    accent-color: #6ee7c1;
    cursor: pointer;
}

.chat-replay-live {
    color: #ff7c84;
    font: 800 .48rem "Space Grotesk", sans-serif;
    letter-spacing: .04em;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .capsule-live-dot { animation: none; }
}

/* CHAT INPUT FORM */
.chat-form {
    padding: 10px 14px 12px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-form-user-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.chat-nick-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 99px;
}

.chat-nick-icon {
    font-size: 0.65rem;
    color: var(--faint);
}

.chat-nickname-input {
    background: none;
    border: none;
    color: #fff;
    font: 700 0.62rem "Space Grotesk", sans-serif;
    width: 85px;
    outline: none;
}

.chat-nickname-input::placeholder {
    color: var(--faint);
}

.chat-mode-hint {
    font-size: 0.52rem;
    color: var(--faint);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-message-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 8px 12px;
    color: #fff;
    font: 400 0.72rem "Inter", sans-serif;
    line-height: 1.35;
    outline: none;
    resize: none;
    height: 36px;
    transition: all 0.2s ease;
}

.chat-message-input:focus {
    border-color: rgba(247, 147, 26, 0.5);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 12px rgba(247, 147, 26, 0.15);
}

.chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f7931a, #ff9f24);
    border: none;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 14px rgba(247, 147, 26, 0.4);
}

.chat-send-btn:active {
    transform: scale(0.95);
}

.send-icon {
    pointer-events: none;
}

@media (max-width: 600px) {
    .floating-chat-trigger {
        right: 15px;
        bottom: calc(86px + var(--safe-bottom));
        width: 64px;
        height: 64px;
    }
    .floating-chat-trigger::after { inset: -9px; }
    .chat-trigger-emblem { width: 64px; height: 64px; }
    .chat-trigger-asset { width: 83px; height: 83px; }
    .chat-unread-badge { top: 6px; right: 5px; width: 12px; height: 12px; }
    .chat-trigger-label {
        display: none;
    }
    .live-chat-drawer {
        right: 8px;
        bottom: max(8px, var(--safe-bottom));
        left: 8px;
        width: auto;
        height: min(560px, calc(100dvh - 16px - var(--safe-bottom)));
        max-width: none;
        max-height: calc(100dvh - 16px - var(--safe-bottom));
        border-radius: 22px;
        box-shadow: 0 24px 72px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.025);
    }
    body.is-chat-open .player-dock {
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(100% + 18px));
    }
    body.is-chat-open .floating-chat-trigger {
        opacity: 0;
        pointer-events: none;
    }
    .player-dock, .floating-chat-trigger {
        transition: opacity .22s ease, transform .28s cubic-bezier(.16,1,.3,1);
    }
    .chat-drawer-header {
        min-height: 76px;
        padding: 14px 15px;
        gap: 10px;
    }
    .chat-header-title-group {
        min-width: 0;
        gap: 11px;
    }
    .chat-header-title-group > div {
        min-width: 0;
    }
    .chat-header-icon {
        flex: 0 0 auto;
        font-size: 1.3rem;
    }
    .chat-drawer-header strong {
        font-size: .88rem;
        letter-spacing: .09em;
    }
    .chat-header-sub {
        display: block;
        max-width: min(58vw, 245px);
        margin-top: 3px;
        overflow: hidden;
        font-size: .64rem;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .chat-status-dot {
        display: inline-block;
        margin-right: 5px;
        vertical-align: 1px;
    }
    .chat-header-actions {
        flex: 0 0 auto;
        gap: 8px;
    }
    .chat-presence {
        min-width: 30px;
        font-size: .7rem;
    }
    .chat-header-btn {
        width: 36px;
        height: 36px;
        font-size: .82rem;
    }
    .chat-messages-container {
        padding: 10px 15px;
        gap: 8px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .chat-bubble {
        gap: 5px;
        padding: 12px 2px 14px;
    }
    .chat-author {
        font-size: .78rem;
    }
    .chat-time {
        font-size: .58rem;
    }
    .chat-text {
        font-size: .9rem;
        line-height: 1.5;
    }
    .chat-bubble-reply-ref {
        font-size: .66rem;
    }
    .chat-bubble.is-dj-message {
        margin: 7px 0;
        padding: 13px 12px 14px;
        border-left-width: 3px;
        border-radius: 0 12px 12px 0;
    }
    .chat-form {
        padding: 11px 14px calc(14px + var(--safe-bottom));
        gap: 10px;
        background: rgba(6,8,11,.96);
        box-shadow: 0 -14px 32px rgba(0,0,0,.3);
    }
    .chat-form-user-row {
        min-width: 0;
        gap: 10px;
    }
    .chat-nick-wrapper {
        min-width: 0;
        min-height: 32px;
        padding: 5px 10px;
    }
    .chat-nickname-input {
        width: min(31vw, 120px);
        font-size: .78rem;
    }
    .chat-mode-hint {
        min-width: 0;
        font-size: .64rem;
        line-height: 1.2;
    }
    .chat-input-row {
        gap: 10px;
    }
    .chat-message-input {
        min-width: 0;
        height: 52px;
        padding: 14px 16px;
        border-radius: 16px;
        font-size: 16px;
        line-height: 22px;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        caret-color: var(--orange);
        touch-action: manipulation;
    }
    .chat-send-btn {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
        border-radius: 16px;
        font-size: 1.05rem;
        touch-action: manipulation;
    }
}