/* SoundCross — "Nebula" design system. One stylesheet for the whole site. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap");
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(fonts/inter-regular.woff) format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(fonts/inter-medium.woff) format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(fonts/inter-semibold.woff) format("woff"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(fonts/inter-bold.woff) format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 700; font-display: swap; src: url(fonts/interdisplay-bold.woff) format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 800; font-display: swap; src: url(fonts/interdisplay-extrabold.woff) format("woff"); }

/* ---------- Fonts (bundled, works offline) ---------- */

/* ---------- Themes ---------- */
:root, body[data-theme="nebula"] {
    --bg0: #12062b; --bg1: #2d0b57;
    --c1: #ffd36e; --c2: #ff4fa3; --c3: #7b3cff; --c4: #4f8bff;
    --text: #ffffff; --muted: rgba(255,255,255,.68); --line: rgba(255,255,255,.17);
    --panel: rgba(255,255,255,.065); --card: rgba(255,255,255,.085);
    --on-accent: #26093f; --frame: rgba(255,79,163,.55); --shadow: rgba(8,0,24,.55);
    --nav-bg: rgba(18,6,43,.94);
}
body[data-theme="brown"]    { --bg0:#1d130e; --bg1:#3d2619; --c1:#f6dc8f; --c2:#d98a4e; --c3:#8a5a3b; --c4:#c9a063; --frame:rgba(217,138,78,.55); --nav-bg:rgba(29,19,14,.95); }
body[data-theme="purple"]   { --bg0:#100824; --bg1:#2a1853; --c1:#e5ccff; --c2:#b57cff; --c3:#6a3ad0; --c4:#8aa2ff; --frame:rgba(181,124,255,.55); --nav-bg:rgba(16,8,36,.95); }
body[data-theme="cinnabar"] { --bg0:#1c0907; --bg1:#4d130e; --c1:#ffb9a2; --c2:#e34234; --c3:#9c1d1d; --c4:#ff8a5c; --frame:rgba(227,66,52,.6); --nav-bg:rgba(28,9,7,.95); }
body[data-theme="sunflower"]{ --bg0:#1b1504; --bg1:#46320a; --c1:#fff1a8; --c2:#f1b42f; --c3:#c97a0a; --c4:#ffd56b; --frame:rgba(241,180,47,.6); --nav-bg:rgba(27,21,4,.95); }
body[data-theme="moss"]     { --bg0:#08190c; --bg1:#15401c; --c1:#d9f7bd; --c2:#74c365; --c3:#2f8a4a; --c4:#5ad0b0; --frame:rgba(116,195,101,.55); --nav-bg:rgba(8,25,12,.95); }
body[data-theme="steel"]    { --bg0:#07132a; --bg1:#123a74; --c1:#c6e4ff; --c2:#4682b4; --c3:#2a5bd7; --c4:#6fd0ff; --frame:rgba(70,130,180,.65); --nav-bg:rgba(7,19,42,.95); }
body[data-theme="oldrose"]  { --bg0:#1e0e12; --bg1:#4b2631; --c1:#ffd6d7; --c2:#c08081; --c3:#8a4a5a; --c4:#e3a1a8; --frame:rgba(192,128,129,.6); --nav-bg:rgba(30,14,18,.95); }
body[data-theme="jasper"]   { --bg0:#230c0a; --bg1:#56221e; --c1:#ffd6cd; --c2:#e88c80; --c3:#b5443a; --c4:#ffae9b; --frame:rgba(232,140,128,.6); --nav-bg:rgba(35,12,10,.95); }
body[data-theme="light"] {
    --bg0:#f7f1ff; --bg1:#ffe4f1; --c1:#ffb86b; --c2:#ff4f9c; --c3:#8b5cf6; --c4:#5b9bff;
    --text:#2a1240; --muted:rgba(42,18,64,.66); --line:rgba(70,30,120,.18);
    --panel:rgba(255,255,255,.72); --card:rgba(255,255,255,.88);
    --on-accent:#2a1240; --frame:rgba(255,79,156,.45); --shadow:rgba(90,40,140,.22); --nav-bg:rgba(250,244,255,.96);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    --accent: var(--c2);
    margin: 0; min-height: 100vh; color: var(--text); overflow-x: hidden;
    font: 400 15px/1.6 "Montserrat", "Segoe UI", system-ui, sans-serif;
    background:
        radial-gradient(700px 520px at 78% 8%, color-mix(in srgb, var(--c2) 28%, transparent), transparent 70%),
        radial-gradient(640px 520px at 8% 92%, color-mix(in srgb, var(--c3) 38%, transparent), transparent 70%),
        linear-gradient(160deg, var(--bg0) 0%, var(--bg1) 100%) fixed;
}
body::before {          /* thin neon frame, like the reference */
    content: ""; position: fixed; inset: 9px; border: 1px solid var(--frame); border-radius: 6px; pointer-events: none; z-index: 100;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--c1); }
h1, h2, h3 { margin: 0; line-height: 1.12; }
h1 { font-size: clamp(30px, 4.4vw, 56px); font-weight: 800; letter-spacing: -.02em; margin: 10px 0 10px; }
h2 { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.01em; margin: 38px 0 18px; }
h3 { font-size: 17px; font-weight: 700; }
p { color: var(--muted); margin: 0 0 12px; }
:focus-visible { outline: 2px solid var(--c1); outline-offset: 3px; }
.muted { color: var(--muted); font-size: 13px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--c1); font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c2), var(--c1)); }

/* ---------- Top bar ---------- */
.site-topbar {
    position: sticky; top: 0; z-index: 60; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
    padding: 20px clamp(24px, 4vw, 56px) 14px;
    background: linear-gradient(180deg, var(--nav-bg) 0%, var(--nav-bg) 72%, transparent 100%);
}
.brand-button { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; position: relative; z-index: 3; }
.logo-img { height: 38px; width: auto; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c2) 70%, transparent)); }
body[data-theme="light"] .logo-img { filter: invert(1) hue-rotate(250deg) saturate(2); }
.brand-name { font-weight: 600; font-size: 19px; letter-spacing: .01em; }
.brand-name b { font-weight: 800; background: linear-gradient(90deg, var(--c2), var(--c1)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.topnav { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 4px clamp(10px, 1.2vw, 22px); min-width: 0; }
.topnav a { position: relative; text-decoration: none; color: var(--text); opacity: .78; font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: 8px 0; white-space: nowrap; transition: opacity .2s; }
.topnav a span { display: none; }
.topnav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c2), var(--c1)); transition: right .3s ease; }
.topnav a:hover, .topnav a.active { opacity: 1; }
.topnav a:hover::after, .topnav a.active::after { right: 0; }

.headright { display: flex; align-items: center; gap: 12px; position: relative; z-index: 3; }
.searchbox input, .search { width: 150px; height: 38px; padding: 0 18px; border-radius: 999px; background: transparent; border: 1.5px solid color-mix(in srgb, var(--text) 80%, transparent); color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: .06em; transition: width .3s, border-color .2s, background .2s; }
.search::placeholder { color: var(--text); opacity: .8; }
.search:focus { outline: none; width: 220px; border-color: var(--c1); background: var(--panel); }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--panel); font-size: 15px; display: grid; place-items: center; transition: border-color .2s, transform .2s; }
.icon-btn:hover { border-color: var(--c2); transform: translateY(-2px); }
.profilebutton { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; font-weight: 600; font-size: 12px; letter-spacing: .04em; }
.avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid transparent; background: linear-gradient(var(--bg0), var(--bg0)) padding-box, linear-gradient(135deg, var(--c1), var(--c2), var(--c3)) border-box; }
.menu-toggle { display: none; width: 42px; height: 38px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel); flex-direction: column; justify-content: center; align-items: center; gap: 5px; position: relative; z-index: 3; }
.menu-toggle i { width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .3s, opacity .3s; }
body.menu-open .menu-toggle i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .menu-toggle i:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-backdrop { display: none; }

/* ---------- Layout ---------- */
.layout { position: relative; z-index: 1; overflow-x: clip; }
main { width: min(1280px, 100%); margin: 0 auto; padding: 18px clamp(24px, 4vw, 56px) 150px; min-width: 0; }
.block { margin-top: 70px; scroll-margin-top: 90px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.row h2 { margin: 0 0 18px; }
.row.profile-summary { justify-content: flex-start; gap: 24px; }

/* ---------- Home stage ---------- */
.stage {
    position: relative; display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 1.9fr) minmax(190px, .8fr);
    grid-template-areas: "copy art side"; align-items: center; gap: 12px;
    min-height: clamp(520px, calc(100vh - 250px), 720px); margin: 0 -10px;
}
.stage-copy { grid-area: copy; position: relative; z-index: 5; }
.stage-copy h1 { max-width: 7.5em; font-size: clamp(34px, 4vw, 58px); margin: 20px 0 30px; }
.stage-art { grid-area: art; min-width: 0; }
.stage-side { grid-area: side; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; padding: 34% 0 70px; text-align: left; position: relative; z-index: 5; }
.side-link { color: var(--text); text-decoration: none; font-size: 15px; line-height: 1.35; max-width: 9em; display: block; margin-bottom: 14px; }
.side-link strong { font-weight: 700; border-bottom: 2px solid transparent; transition: border-color .2s; }
.side-link:hover strong { border-color: var(--c2); }
.side-note { font-size: 11px; line-height: 1.7; color: var(--muted); max-width: 22em; margin: auto 0 0; }
.stage-dots { position: absolute; right: 2px; top: 38%; display: flex; flex-direction: column; gap: 14px; z-index: 6; }
.stage-dots button { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: 0; background: var(--text); opacity: .4; transition: opacity .2s, transform .2s; }
.stage-dots button.on { opacity: 1; transform: scale(1.5); background: var(--c1); }
.stage-foot { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: space-between; align-items: flex-end; z-index: 6; pointer-events: none; }
.stage-foot > * { pointer-events: auto; }
.foot-icons { position: absolute; left: 0; bottom: 0; display: flex; gap: 14px; }
.foot-arrows { display: flex; gap: 14px; }
.round { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--text) 75%, transparent); background: transparent; color: var(--text); font-size: 14px; line-height: 1; display: grid; place-items: center; transition: background .2s, border-color .2s, transform .2s; }
.round:hover { background: var(--card); border-color: var(--c1); transform: translateY(-2px); }

/* Planet scene */
.scene { --s: 1; position: relative; width: 116%; margin-left: -8%; aspect-ratio: 4 / 3; }
.scene .layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.l-back { z-index: 0; } .l-planet { z-index: 2; } .l-front { z-index: 3; }
.ring path { fill: none; stroke: color-mix(in srgb, var(--text) 55%, transparent); stroke-width: 1.4; stroke-dasharray: 2 7; stroke-linecap: round; }
.l-planet { filter: drop-shadow(0 30px 60px color-mix(in srgb, var(--c3) 55%, transparent)); }
.l-planet .halo { animation: pulse 5s ease-in-out infinite; transform-origin: 400px 300px; }
.cloud { animation: drift 16s ease-in-out infinite alternate; }
.cloud.c2 { animation-duration: 20s; animation-direction: alternate-reverse; }
.cloud.c3 { animation-duration: 13s; }
.streak { animation: breathe 3.4s ease-in-out infinite; transform-origin: 400px 300px; }
.wave { animation: waveMove 4s ease-in-out infinite alternate; }
.core-note { animation: bob 5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .22; } 50% { transform: scale(1.07); opacity: .34; } }
@keyframes drift { from { transform: translateX(-26px); } to { transform: translateX(26px); } }
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.28); } }
@keyframes waveMove { from { transform: translateX(-28px); } to { transform: translateX(28px); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.inst { position: absolute; left: 0; top: 0; width: calc(var(--s) * 104px); height: calc(var(--s) * 104px); will-change: transform; }
.inst-disc { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
    background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.32), rgba(255,255,255,.07) 60%), color-mix(in srgb, var(--bg0) 55%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--c1) 55%, transparent);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--c2) 45%, transparent), inset 0 0 22px color-mix(in srgb, var(--c3) 40%, transparent); }
.inst-disc svg { width: 58%; height: 58%; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.float-note { position: absolute; z-index: 1; font-size: calc(var(--s) * 34px); color: var(--c1); opacity: .5; animation: rise 9s ease-in-out infinite; pointer-events: none; text-shadow: 0 0 14px var(--c2); }
@keyframes rise { 0%, 100% { transform: translateY(0) rotate(-6deg); opacity: .25; } 50% { transform: translateY(-26px) rotate(8deg); opacity: .75; } }


/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 22px; font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--on-accent); text-decoration: none;
    background: linear-gradient(110deg, var(--c1), var(--c2)); box-shadow: 0 8px 22px color-mix(in srgb, var(--c2) 38%, transparent); transition: transform .2s, box-shadow .2s, filter .2s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 12px 28px color-mix(in srgb, var(--c2) 55%, transparent); }
.btn:active { transform: translateY(1px); }
.btn.secondary, .btn.pill-out { background: transparent; color: var(--text); border: 1.5px solid color-mix(in srgb, var(--text) 70%, transparent); box-shadow: none; }
.btn.secondary:hover, .btn.pill-out:hover { background: var(--card); border-color: var(--c1); box-shadow: 0 8px 22px color-mix(in srgb, var(--c3) 35%, transparent); }
.btn.pill-out { padding: 13px 28px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.btn.small { padding: 7px 14px; font-size: 11.5px; }

/* ---------- Cards / panels ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.grid.people { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.card, .panel, .notice { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.card { padding: 18px; transition: transform .25s, border-color .25s, box-shadow .25s; overflow: hidden; }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--c1), transparent 40%, var(--c3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; pointer-events: none; }
.card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px var(--shadow); }
.card:hover::before { opacity: 1; }
.card h3 { margin: 14px 0 4px; }
.card p { font-size: 13px; margin: 2px 0 14px; }
.panel { padding: clamp(18px, 2.6vw, 30px); margin: 14px 0; }
.panel h2:first-child { margin-top: 0; }
.notice { padding: 16px 20px; margin: 12px 0; border-left: 3px solid var(--c2); border-radius: 16px; color: var(--text); }
.cover { aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center; font-size: 54px; color: #fff; position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--c1), var(--c2) 55%, var(--c3)); }
.cover::after { content: ""; position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%; right: -35%; top: -35%; background: rgba(255,255,255,.2); filter: blur(2px); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.match { font-weight: 700; font-size: 14px; background: linear-gradient(90deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 2px 0 8px; }
.pring { --p: 0; width: 100px; height: 100px; border-radius: 50%; padding: 5px; display: grid; place-items: center; margin-bottom: 6px;
    background: conic-gradient(var(--c1), var(--c2) calc(var(--p) * 1%), var(--line) 0); }
.pring .person-img { width: 100%; height: 100%; margin: 0; }
.person-img { width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; font-size: 38px; background: linear-gradient(160deg, color-mix(in srgb, var(--c3) 70%, var(--bg0)), var(--bg0)); margin-bottom: 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px !important; }
.tag, .pill { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; font-size: 11.5px; font-weight: 600; color: var(--text); background: var(--panel); }
.pill { padding: 6px 14px; margin: 4px 6px 4px 0; font-size: 12px; }
.profile-large { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid transparent; background: linear-gradient(var(--bg0), var(--bg0)) padding-box, linear-gradient(135deg, var(--c1), var(--c2), var(--c3)) border-box; }

.grid > p:only-child { grid-column: 1 / -1; margin: 0; padding: 34px 20px; text-align: center; border: 1.5px dashed var(--line); border-radius: 22px; background: var(--panel); }

/* ---------- Forms ---------- */
.field { width: 100%; max-width: 440px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--bg0) 45%, transparent); color: var(--text); border: 1.5px solid var(--line); margin: 6px 0 16px; font-size: 14px; transition: border-color .2s, box-shadow .2s; }
body[data-theme="light"] .field { background: #fff; }
.field:focus { outline: none; border-color: var(--c2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c2) 22%, transparent); }
select.field option { color: #222; }
input[type=range] { accent-color: var(--c2); }
input[type=checkbox] { accent-color: var(--c2); width: 16px; height: 16px; }
label { font-weight: 500; }
.setting-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 15px 0; }
.theme { border: 1.5px solid var(--line); background: var(--panel); color: var(--text); padding: 12px 16px; border-radius: 14px; font-size: 13px; font-weight: 600; transition: border-color .2s, transform .2s; }
.theme:hover { transform: translateY(-2px); }
.theme.selected { border-color: var(--c1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1) 25%, transparent); }

/* ---------- Chat ---------- */
.chatlog { height: 300px; overflow: auto; background: color-mix(in srgb, var(--bg0) 40%, transparent); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin: 14px 0; }
.bubble { background: var(--card); padding: 11px 15px; border-radius: 16px 16px 16px 4px; margin: 8px 0; max-width: 82%; }
.bubble.mine { margin-left: auto; border-radius: 16px 16px 4px 16px; background: linear-gradient(110deg, color-mix(in srgb, var(--c2) 55%, transparent), color-mix(in srgb, var(--c3) 55%, transparent)); }
.chatinput { display: flex; gap: 8px; flex-wrap: wrap; }
.chatinput input { flex: 1; min-width: 160px; margin: 0; }

/* ---------- Player ---------- */
.player { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 70; width: min(1180px, calc(100% - 48px)); height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 22px 10px 12px;
    background: color-mix(in srgb, var(--bg0) 78%, transparent); border: 1px solid var(--line); border-radius: 999px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 16px 40px var(--shadow); }
.now { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 0; }
.now-text { min-width: 0; }
.now strong, .now .muted { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now strong { font-size: 13px; }
#playerActivity { display: block; font-size: 11px; color: var(--muted); }
.mini-cover { width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2) 55%, var(--c3)); box-shadow: 0 6px 18px color-mix(in srgb, var(--c2) 45%, transparent); }
.controls { display: flex; align-items: center; gap: 10px; }
.controls button { border: 0; background: none; font-size: 17px; width: 36px; height: 36px; border-radius: 50%; color: var(--text); transition: background .2s; }
.controls button:hover { background: var(--card); }
.controls .play-orb { width: 46px; height: 46px; font-size: 18px; color: var(--on-accent); background: linear-gradient(110deg, var(--c1), var(--c2)); box-shadow: 0 6px 18px color-mix(in srgb, var(--c2) 50%, transparent); }
.controls .play-orb:hover { background: linear-gradient(110deg, var(--c1), var(--c2)); filter: brightness(1.1); }
.controls input { width: min(18vw, 190px); }
.volume { flex: 1 1 0; justify-content: flex-end; }

/* ---------- Responsive ---------- */
@media (max-width: 1720px) and (min-width: 1501px) { .profilebutton .username { display: none; } .searchbox input, .search { width: 104px; } }
/* Navigation is always the dropdown menu, at every screen size. */
.site-topbar { grid-template-columns: auto 1fr; }
.menu-toggle { display: flex; }
.topnav { display: none; position: fixed; inset: 0; z-index: 2; flex-direction: column; justify-content: center; align-items: flex-start; flex-wrap: nowrap; gap: 8px; padding: 90px clamp(28px, 10vw, 120px) 120px; background: var(--nav-bg); overflow-y: auto; }
body.menu-open .topnav { display: flex; }
.topnav a { font-size: clamp(20px, 4.6vw, 30px); font-weight: 700; letter-spacing: .02em; text-transform: none; opacity: .9; display: flex; align-items: center; gap: 16px; }
.topnav a span { display: inline-block; width: 1.5em; color: var(--c2); font-weight: 500; }
.topnav a::after { display: none; }
.topnav a.active { background: linear-gradient(90deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topnav a.active span { color: var(--c1); }
.headright { justify-self: end; }
@media (max-width: 1060px) {
    .stage { grid-template-columns: 1fr; grid-template-areas: "copy" "art" "side"; min-height: 0; margin: 0; gap: 8px; }
    .stage-copy { text-align: center; display: flex; flex-direction: column; align-items: center; padding-top: 6px; }
    .stage-copy h1 { max-width: 12em; margin: 14px 0 22px; }
    .stage-side { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; padding: 0 0 60px; text-align: center; }
    .side-link { max-width: none; margin: 0; }
    .side-note { flex-basis: 100%; max-width: none; text-align: center; }
    .stage-dots { display: none; }
    .stage-foot { bottom: 0; }
}
@media (max-width: 640px) {
    body::before { inset: 5px; }

    .site-topbar { padding: 14px 16px 10px; gap: 10px; }
    .brand-name { font-size: 16px; } .logo-img { height: 32px; }
    .search, .searchbox input { width: 96px; padding: 0 14px; } .search:focus { width: 120px; }
    .headright { gap: 8px; } .headright .icon-btn { display: none; }
    .profilebutton .username { display: none; }
    main { padding: 10px 16px 140px; }
    .block { margin-top: 44px; }
    .scene { aspect-ratio: 1 / 0.95; margin: -4% -6%; width: 112%; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .grid.people { grid-template-columns: 1fr; }
    .card { padding: 12px; }
    .player { bottom: 12px; width: calc(100% - 24px); height: 66px; padding: 8px 14px 8px 8px; }
    .mini-cover { width: 44px; height: 44px; }
    .volume, .now .muted, .controls input { display: none; }
    .foot-icons { display: none; }
    .stage-foot { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }
/* Requested theme-consistent controls and navigation */
#spokenLanguageSetting, #audioSong, #audioUpload, #usernameSetting {background:color-mix(in srgb,var(--bg1) 75%,var(--c3) 25%);color:var(--text);border-color:var(--line)}
#spokenLanguageSetting option,#audioSong option{background:var(--bg0);color:var(--text)}
#audioUpload::file-selector-button{background:var(--c2);color:var(--on-accent);border:0;border-radius:10px;padding:9px 14px;margin-right:12px;cursor:pointer}
.grid>.card{display:flex;flex-direction:column}.grid>.card .actions{margin-top:auto;padding-top:14px}
body.menu-open .player,body.menu-open .brand,body.menu-open .brand-name{display:none!important}
.profile-large,.avatar{background:color-mix(in srgb,var(--bg1) 65%,var(--c2) 35%);border:2px solid var(--c2)}

#progress{accent-color:var(--c2)}#volumeSlider{accent-color:var(--c2)}

/* Final requested consistency fixes */
body.menu-open .player{display:none!important}
body.menu-open .brand,body.menu-open .brand-name{visibility:hidden!important}
#spokenLanguageSetting,#spokenLanguageSetting option{background-color:var(--bg1);color:var(--text)}
input[type="file"]::file-selector-button{background:var(--c2);color:var(--bg0);border:1px solid var(--line);border-radius:10px;padding:9px 14px;cursor:pointer}
.card{display:flex;flex-direction:column}.card>.actions{margin-top:auto}
#progress,#volumeSlider{accent-color:var(--c2);cursor:pointer}
.avatar,.person-img{background-color:color-mix(in srgb,var(--bg1) 65%,var(--c2) 35%)}


.back-navigation {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 28px; padding: 10px 18px;
    color: var(--text); background: var(--panel);
    border: 1px solid var(--line); border-radius: 12px;
    font-size: 13px; font-weight: 600;
    transition: border-color .2s, background .2s, transform .2s;
}
.back-navigation:hover { border-color: var(--c2); background: var(--card); transform: translateX(-2px); }
body.menu-open .back-navigation { display: none; }
.menu-return { display: none; }
/* Keep the top of a long navigation list reachable when the screen is short. */
.topnav { justify-content: flex-start; }
.topnav .menu-return {
    display: inline-flex; align-items: center; align-self: flex-start;
    margin: 0 0 16px; padding: 10px 15px;
    border-radius: 12px; border: 1px solid var(--line);
    background: var(--panel); color: var(--text);
    font-size: 15px; font-weight: 600;
}
.topnav .menu-return:hover { border-color: var(--c2); }


/* Changes 4–7 — scoped navigation, profile art, typography and music genres. */
/* The hidden attribute makes the player's complete disappearance unambiguous. */
footer.player[hidden], body.menu-open footer.player,
.brand-button[hidden], body.menu-open .brand-button {
    display: none !important;
}

/* Recolor only the default profile portrait: preserve its light/dark detail,
   replace the built-in neutral grey with colors derived from the active theme. */
.theme-avatar {
    display: block;
    flex: 0 0 auto;
    background-image:
        linear-gradient(135deg,
            color-mix(in srgb, var(--c2) 60%, var(--bg1) 40%),
            color-mix(in srgb, var(--c3) 58%, var(--bg0) 42%)),
        url("Profile.jpeg");
    background-blend-mode: color;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 2px solid color-mix(in srgb, var(--c1) 60%, var(--c2) 40%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c2) 22%, transparent),
                0 0 18px color-mix(in srgb, var(--c2) 26%, transparent);
}
.profile-large.theme-avatar {
    border-width: 3px;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--c2) 24%, transparent),
                0 10px 35px color-mix(in srgb, var(--c3) 22%, transparent);
}

/* Approved custom avatar for the purple theme only.
   Keeps the original SoundCross character/logo composition,
   but swaps in the approved purple design instead of tinting the grey JPEG. */

/* Approved avatar designs for the remaining nine existing SoundCross themes. */
body[data-theme="nebula"] .theme-avatar {
    background-image: url("Profile-nebula-approved.png");
    background-blend-mode: normal;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
body[data-theme="brown"] .theme-avatar {
    background-image: url("Profile-brown-approved.png");
    background-blend-mode: normal;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
body[data-theme="light"] .theme-avatar {
    background-image: url("Profile-light-approved.png");
    background-blend-mode: normal;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
body[data-theme="cinnabar"] .theme-avatar {
    background-image: url("Profile-cinnabar-approved.png");
    background-blend-mode: normal;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
body[data-theme="sunflower"] .theme-avatar {
    background-image: url("Profile-sunflower-approved.png");
    background-blend-mode: normal;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
body[data-theme="moss"] .theme-avatar {
    background-image: url("Profile-moss-approved.png");
    background-blend-mode: normal;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
body[data-theme="steel"] .theme-avatar {
    background-image: url("Profile-steel-approved.png");
    background-blend-mode: normal;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
body[data-theme="oldrose"] .theme-avatar {
    background-image: url("Profile-oldrose-approved.png");
    background-blend-mode: normal;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
body[data-theme="jasper"] .theme-avatar {
    background-image: url("Profile-jasper-approved.png");
    background-blend-mode: normal;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
body[data-theme="purple"] .theme-avatar {
    background-image: url("Profile-purple-approved.png");
    background-blend-mode: normal;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.profile-genre-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 9px 0 13px;
}
.profile-genre-tags .pill { margin: 0; }

/* Use the existing bundled Cyrillic/Latin Montserrat at readable sizes everywhere. */
body { font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; line-height: 1.65; font-feature-settings: "cv11", "ss03"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, .brand-name, .stage-copy h1 { font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, sans-serif; }
button, input, select, textarea { font-family: inherit; }
.topnav a { font-size: clamp(20px, 4.6vw, 30px); letter-spacing: .02em; }
.muted, .input-hint { line-height: 1.6; }

/* Changes 8–12: scrollbars use the ACTUAL chosen theme; scrolling feels smooth. */
html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--scroll-tone, #ff4fa3) 68%, var(--scroll-track, #12062b) 32%) var(--scroll-track, #12062b);
}
* { scrollbar-width: thin; }
body, .topnav, .chatlog {
    scrollbar-color: color-mix(in srgb, var(--c2) 68%, var(--bg0) 32%) var(--bg0);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scroll-track, var(--bg0)); }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--scroll-tone, var(--c2)) 68%, var(--scroll-track, var(--bg0)) 32%);
    border: 2px solid var(--scroll-track, var(--bg0));
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-tone, var(--c2)); }
.scroll-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease var(--reveal-delay, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms);
}
.scroll-reveal.scroll-visible { opacity: 1; transform: translateY(0); }
.profile-name-help { max-width: 670px; line-height: 1.7; margin-bottom: 18px; }
.profile-name-help strong { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .scroll-reveal { opacity: 1; transform: none; transition: none; }
    .auth-card, .auth-brand { animation: none !important; }
}
/* Auth pages (login/register) fade in on load */
@keyframes scFadeIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.auth-brand { animation: scFadeIn .7s ease both; }
.auth-card { animation: scFadeIn .8s ease .12s both; }

/* ---------- Player sliders: themed music progress bar and sound bar ---------- */
#progress, #volumeSlider {
    -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
    height: 24px; margin: 0; padding: 0; outline: none; accent-color: auto;
}
#progress { --v: var(--progress, 0%); width: min(26vw, 320px); }
#volumeSlider { --v: var(--volume, 70%); width: min(12vw, 130px); }

#progress::-webkit-slider-runnable-track, #volumeSlider::-webkit-slider-runnable-track {
    height: 8px; border-radius: 999px;
    background:
        linear-gradient(90deg, var(--c1), var(--c2)) 0 0 / var(--v) 100% no-repeat,
        color-mix(in srgb, var(--text) 16%, transparent);
    box-shadow: inset 0 0 0 1px var(--line);
}
#volumeSlider::-webkit-slider-runnable-track { height: 6px; }
#progress::-webkit-slider-thumb, #volumeSlider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -4px; border-radius: 50%;
    background: radial-gradient(circle, #fff 0 34%, var(--c2) 38%);
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c2) 30%, transparent), 0 4px 12px color-mix(in srgb, var(--c2) 60%, transparent);
    transition: transform .15s, box-shadow .15s;
}
#volumeSlider::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -4px; }
#progress:hover::-webkit-slider-thumb, #volumeSlider:hover::-webkit-slider-thumb,
#progress:focus-visible::-webkit-slider-thumb, #volumeSlider:focus-visible::-webkit-slider-thumb {
    transform: scale(1.25);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--c2) 35%, transparent), 0 4px 14px color-mix(in srgb, var(--c2) 70%, transparent);
}

#progress::-moz-range-track, #volumeSlider::-moz-range-track {
    height: 8px; border-radius: 999px; border: 1px solid var(--line);
    background: color-mix(in srgb, var(--text) 16%, transparent);
}
#volumeSlider::-moz-range-track { height: 6px; }
#progress::-moz-range-progress, #volumeSlider::-moz-range-progress {
    height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--c1), var(--c2));
}
#volumeSlider::-moz-range-progress { height: 6px; }
#progress::-moz-range-thumb, #volumeSlider::-moz-range-thumb {
    width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff;
    background: radial-gradient(circle, #fff 0 34%, var(--c2) 38%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c2) 30%, transparent), 0 4px 12px color-mix(in srgb, var(--c2) 60%, transparent);
}
#progress:disabled { opacity: .45; cursor: default; }
#progress:disabled::-webkit-slider-thumb { opacity: 0; }
#progress:disabled::-moz-range-thumb { opacity: 0; }

@media (max-width: 640px) {
    /* phones: the progress bar becomes a thin line along the bottom edge of the player */
    .controls #progress { display: block; position: absolute; left: 30px; right: 30px; bottom: 1px; width: auto; height: 14px; }
    .controls #progress::-webkit-slider-runnable-track { height: 4px; }
    .controls #progress::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; }
    .controls #progress::-moz-range-track, .controls #progress::-moz-range-progress { height: 4px; }
}

/* ---------- Home effect: "the planet hums" (home-fx.js) ---------- */
.stage { isolation: isolate; }
.fx-notes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* Pointer light: Home page only (pointer-glow.js). */
:root { --pg-size: clamp(100px, 18vmin, 190px); }
.pointer-glow { position: fixed; left: 0; top: 0; width: var(--pg-size); height: var(--pg-size); margin: calc(var(--pg-size) / -2) 0 0 calc(var(--pg-size) / -2); z-index: 90; pointer-events: none; opacity: 0; transition: opacity .4s ease; will-change: transform, opacity;
    background: radial-gradient(circle closest-side, color-mix(in srgb, var(--c1) 24%, transparent), color-mix(in srgb, var(--c1) 8%, transparent) 55%, transparent 100%); }
.pointer-glow.on { opacity: 1; }
.fx-ripples { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1; pointer-events: none; }
.fx-ripples i { position: absolute; left: 0; top: 0; width: 44%; aspect-ratio: 1; border-radius: 50%;
    min-width: 200px; border: 2px solid color-mix(in srgb, var(--c1) 70%, transparent);
    translate: -50% -50%; opacity: 0; animation: fxRipple 4.8s cubic-bezier(.2,.6,.3,1) infinite; }
.fx-ripples i:nth-child(2) { animation-delay: 1.6s; border-color: color-mix(in srgb, var(--c2) 70%, transparent); }
.fx-ripples i:nth-child(3) { animation-delay: 3.2s; border-color: color-mix(in srgb, var(--c3) 70%, transparent); }
@keyframes fxRipple { 0% { scale: .55; opacity: .55; } 100% { scale: 1.9; opacity: 0; } }
/* entrance sequence */
.fx-on .stage-copy > * { animation: fxRise .9s cubic-bezier(.2,.7,.2,1) both; }
.fx-on .stage-copy > *:nth-child(1) { animation-delay: .05s; }
.fx-on .stage-copy > *:nth-child(2) { animation-delay: .2s; }
.fx-on .stage-copy > *:nth-child(3) { animation-delay: .35s; }
.fx-on .stage-copy > *:nth-child(4) { animation-delay: .5s; }
.fx-on .stage-copy > *:nth-child(n+5) { animation-delay: .65s; }
.fx-on .scene { animation: fxPlanet 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fxRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fxPlanet { from { opacity: 0; transform: scale(.82) translateY(30px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) {
    .fx-ripples, .fx-on .stage-copy > *, .fx-on .scene { animation: none !important; }
}

/* Theme-specific metallic arrow cursors, based on the supplied reference. PNG files are local and work offline.
   The hotspot is at the upper-left tip; text inputs keep the text caret. */
body[data-theme="nebula"],
body[data-theme="nebula"] a,
body[data-theme="nebula"] button,
body[data-theme="nebula"] select,
body[data-theme="nebula"] input[type="range"],
body[data-theme="nebula"] input[type="checkbox"],
body[data-theme="nebula"] input[type="radio"],
body[data-theme="nebula"] label,
body[data-theme="nebula"] [role="button"] {
    cursor: url("cursors/nebula.png") 1 1, pointer;
}
body[data-theme="brown"],
body[data-theme="brown"] a,
body[data-theme="brown"] button,
body[data-theme="brown"] select,
body[data-theme="brown"] input[type="range"],
body[data-theme="brown"] input[type="checkbox"],
body[data-theme="brown"] input[type="radio"],
body[data-theme="brown"] label,
body[data-theme="brown"] [role="button"] {
    cursor: url("cursors/brown.png") 1 1, pointer;
}
body[data-theme="purple"],
body[data-theme="purple"] a,
body[data-theme="purple"] button,
body[data-theme="purple"] select,
body[data-theme="purple"] input[type="range"],
body[data-theme="purple"] input[type="checkbox"],
body[data-theme="purple"] input[type="radio"],
body[data-theme="purple"] label,
body[data-theme="purple"] [role="button"] {
    cursor: url("cursors/purple.png") 1 1, pointer;
}
body[data-theme="cinnabar"],
body[data-theme="cinnabar"] a,
body[data-theme="cinnabar"] button,
body[data-theme="cinnabar"] select,
body[data-theme="cinnabar"] input[type="range"],
body[data-theme="cinnabar"] input[type="checkbox"],
body[data-theme="cinnabar"] input[type="radio"],
body[data-theme="cinnabar"] label,
body[data-theme="cinnabar"] [role="button"] {
    cursor: url("cursors/cinnabar.png") 1 1, pointer;
}
body[data-theme="sunflower"],
body[data-theme="sunflower"] a,
body[data-theme="sunflower"] button,
body[data-theme="sunflower"] select,
body[data-theme="sunflower"] input[type="range"],
body[data-theme="sunflower"] input[type="checkbox"],
body[data-theme="sunflower"] input[type="radio"],
body[data-theme="sunflower"] label,
body[data-theme="sunflower"] [role="button"] {
    cursor: url("cursors/sunflower.png") 1 1, pointer;
}
body[data-theme="moss"],
body[data-theme="moss"] a,
body[data-theme="moss"] button,
body[data-theme="moss"] select,
body[data-theme="moss"] input[type="range"],
body[data-theme="moss"] input[type="checkbox"],
body[data-theme="moss"] input[type="radio"],
body[data-theme="moss"] label,
body[data-theme="moss"] [role="button"] {
    cursor: url("cursors/moss.png") 1 1, pointer;
}
body[data-theme="steel"],
body[data-theme="steel"] a,
body[data-theme="steel"] button,
body[data-theme="steel"] select,
body[data-theme="steel"] input[type="range"],
body[data-theme="steel"] input[type="checkbox"],
body[data-theme="steel"] input[type="radio"],
body[data-theme="steel"] label,
body[data-theme="steel"] [role="button"] {
    cursor: url("cursors/steel.png") 1 1, pointer;
}
body[data-theme="oldrose"],
body[data-theme="oldrose"] a,
body[data-theme="oldrose"] button,
body[data-theme="oldrose"] select,
body[data-theme="oldrose"] input[type="range"],
body[data-theme="oldrose"] input[type="checkbox"],
body[data-theme="oldrose"] input[type="radio"],
body[data-theme="oldrose"] label,
body[data-theme="oldrose"] [role="button"] {
    cursor: url("cursors/oldrose.png") 1 1, pointer;
}
body[data-theme="jasper"],
body[data-theme="jasper"] a,
body[data-theme="jasper"] button,
body[data-theme="jasper"] select,
body[data-theme="jasper"] input[type="range"],
body[data-theme="jasper"] input[type="checkbox"],
body[data-theme="jasper"] input[type="radio"],
body[data-theme="jasper"] label,
body[data-theme="jasper"] [role="button"] {
    cursor: url("cursors/jasper.png") 1 1, pointer;
}
body[data-theme="light"],
body[data-theme="light"] a,
body[data-theme="light"] button,
body[data-theme="light"] select,
body[data-theme="light"] input[type="range"],
body[data-theme="light"] input[type="checkbox"],
body[data-theme="light"] input[type="radio"],
body[data-theme="light"] label,
body[data-theme="light"] [role="button"] {
    cursor: url("cursors/light.png") 1 1, pointer;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], textarea, [contenteditable="true"] { cursor: text; }

/* SoundCross Messages visual refresh — follows existing theme variables. */
.sc-messenger{display:grid;grid-template-columns:minmax(215px,32%) minmax(0,1fr);min-height:480px;max-height:640px;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--panel);margin:22px 0 32px;box-shadow:0 18px 45px var(--shadow)}
.sc-conversations{border-right:1px solid var(--line);padding:17px 12px;overflow-y:auto;background:color-mix(in srgb,var(--bg0) 30%, transparent)}
.sc-pane-title{display:flex;justify-content:space-between;align-items:center;padding:0 9px 14px;font-size:17px}.sc-count{font-size:12px;background:var(--card);border-radius:30px;padding:2px 10px;color:var(--c2)}
.sc-conversation-search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 12px;margin-bottom:15px}.sc-conversation-search input{width:100%;min-width:0;color:var(--text);background:transparent;border:0;outline:0;font:inherit;font-size:12px}.sc-conversation-search input::placeholder{color:var(--muted)}
.sc-conversation{width:100%;display:flex;align-items:center;text-align:left;gap:10px;padding:13px 9px;color:var(--text);background:transparent;border:1px solid transparent;border-radius:16px;cursor:pointer}.sc-conversation.active,.sc-conversation:hover{background:color-mix(in srgb,var(--c2) 13%,var(--panel));border-color:color-mix(in srgb,var(--c2) 35%,transparent)}.sc-conversation[hidden]{display:none}.sc-person-avatar{display:grid;flex:0 0 44px;place-items:center;width:44px;height:44px;border-radius:50%;font-weight:800;color:var(--on-accent);background:linear-gradient(135deg,var(--c1),var(--c2),var(--c3))}.sc-convo-info{display:flex;flex:1;min-width:0;flex-direction:column}.sc-convo-info strong{white-space:nowrap;font-size:14px}.sc-convo-info small{display:block;color:var(--c2);font-size:10px}.sc-convo-info>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px}.sc-convo-date{font-size:10px;color:var(--muted);align-self:flex-start}.sc-chat-panel{display:flex;flex-direction:column;min-width:0;min-height:0}.sc-chat-header{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}.sc-chat-identity{display:flex;flex:1;flex-direction:column;min-width:0}.sc-chat-identity small{color:var(--muted);font-size:12px}.sc-chat-messages{flex:1;min-height:260px;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:12px;background:color-mix(in srgb,var(--bg0) 22%,transparent)}.sc-day-divider{text-align:center;color:var(--muted);font-size:11px;padding:6px}.sc-message{display:flex;flex-direction:column;align-items:flex-start;max-width:78%}.sc-message.outgoing{align-self:flex-end;align-items:flex-end}.sc-message-body{border-radius:17px 17px 17px 5px;padding:12px 16px;background:var(--card);border:1px solid var(--line);overflow-wrap:anywhere}.sc-message.outgoing .sc-message-body{border-radius:17px 17px 5px 17px;background:linear-gradient(125deg,color-mix(in srgb,var(--c2) 70%,var(--bg1)),color-mix(in srgb,var(--c3) 60%,var(--bg1)));color:#fff;border-color:color-mix(in srgb,var(--c2) 36%,transparent)}.sc-message>small{font-size:10px;color:var(--muted);margin:4px 5px}.sc-compose{display:flex;gap:8px;padding:13px 16px 4px;border-top:1px solid var(--line)}.sc-compose .field{margin:0;min-width:0;flex:1}.sc-compose .btn{white-space:nowrap}.sc-chat-disclaimer{font-size:11px;color:var(--muted);padding:0 18px 9px;margin:6px 0}.sc-empty{padding:20px;color:var(--muted);font-size:13px}.sc-shared-song{display:flex;align-items:center;gap:12px;min-width:170px}.sc-music-note{display:grid;place-items:center;width:40px;height:40px;background:var(--c3);border-radius:9px;font-size:23px}.sc-shared-song>span:nth-child(2){display:flex;flex:1;flex-direction:column}.sc-shared-song small{opacity:.8}.sc-song-play{border:0;border-radius:50%;width:32px;height:32px;cursor:pointer;color:var(--on-accent);background:var(--c1)}
.sc-unified-results{margin:18px 0}.sc-unified-results[hidden]{display:none}.sc-result-heading{display:flex;align-items:center;gap:12px;margin:22px 0 9px}.sc-result-heading h2{margin:0}.sc-result-heading span{font-size:12px;color:var(--muted)}.sc-search-people{display:grid;gap:9px}.sc-search-person{display:flex;align-items:center;gap:12px;padding:12px 15px;background:var(--panel);border:1px solid var(--line);border-radius:16px}.sc-search-person>div{display:flex;flex-direction:column;flex:1;min-width:0}.sc-search-person small{font-size:12px;color:var(--muted)}.sc-search-hint{font-size:12px;color:var(--c2)}
@media(max-width:680px){.sc-messenger{grid-template-columns:1fr;max-height:none;min-height:0}.sc-conversations{border-right:0;border-bottom:1px solid var(--line);max-height:215px}.sc-chat-messages{height:310px;flex:initial}.sc-compose{flex-wrap:wrap}.sc-compose .field{flex-basis:100%}.sc-chat-header{padding:12px}.sc-chat-header .btn{font-size:11px}.sc-message{max-width:90%}}

/* 2026-10 SoundCross Messages: music-glass chat redesign. Scoped only to Messages. */
body[data-page="messages"] .sc-messenger {
  --chat-accent: var(--c2); --chat-glow: color-mix(in srgb,var(--c2) 60%,transparent);
  grid-template-columns:minmax(230px,31%) minmax(0,1fr);min-height:580px;max-height:710px;
  border-radius:30px;border:1px solid color-mix(in srgb,var(--c2) 48%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--panel) 87%,var(--c2)),var(--panel) 50%,color-mix(in srgb,var(--bg1) 88%,var(--c3)));
  box-shadow:0 18px 48px var(--shadow),0 0 0 1px color-mix(in srgb,var(--c2) 13%,transparent),0 0 27px color-mix(in srgb,var(--c2) 14%,transparent);
}
body[data-page="messages"] .sc-conversations{padding:22px 13px;background:linear-gradient(155deg,color-mix(in srgb,var(--c2) 10%,var(--panel)),color-mix(in srgb,var(--bg0) 38%,var(--panel)));border-right:1px solid color-mix(in srgb,var(--c2) 25%,var(--line))}
body[data-page="messages"] .sc-pane-title{font-size:19px;margin-bottom:8px}
body[data-page="messages"] .sc-count{padding:5px 10px;background:color-mix(in srgb,var(--c2) 22%,var(--panel));border:1px solid color-mix(in srgb,var(--c2) 33%,var(--line))}
body[data-page="messages"] .sc-conversation-search{padding:12px 14px;border-radius:18px;background:color-mix(in srgb,var(--card) 79%,transparent);transition:border-color .25s,box-shadow .25s}
body[data-page="messages"] .sc-conversation-search:focus-within{border-color:var(--c2);box-shadow:0 0 0 3px color-mix(in srgb,var(--c2) 16%,transparent)}
body[data-page="messages"] .sc-conversation{position:relative;min-height:84px;padding:15px 12px;border-radius:19px;border:1px solid color-mix(in srgb,var(--line) 65%,transparent);margin-bottom:9px;background:color-mix(in srgb,var(--card) 55%,transparent);transition:transform .24s,border-color .24s,box-shadow .24s}
body[data-page="messages"] .sc-conversation.active{background:linear-gradient(115deg,color-mix(in srgb,var(--c2) 24%,var(--panel)),color-mix(in srgb,var(--c3) 13%,var(--panel)));border-color:color-mix(in srgb,var(--c2) 70%,var(--line));box-shadow:inset 0 0 19px color-mix(in srgb,var(--c2) 9%,transparent),0 0 17px color-mix(in srgb,var(--c2) 20%,transparent)}
body[data-page="messages"] .sc-conversation.active:before{content:"";position:absolute;left:-1px;top:17%;height:66%;width:4px;border-radius:10px;background:var(--c2);box-shadow:0 0 12px var(--c2)}
body[data-page="messages"] .sc-conversation:hover{transform:translateY(-2px);border-color:var(--c2)}
body[data-page="messages"] .sc-person-avatar,body[data-page="messages"] .sc-message-avatar{width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2),var(--c3));color:var(--on-accent);font-weight:800;box-shadow:0 4px 16px color-mix(in srgb,var(--c2) 20%,transparent)}
body[data-page="messages"] .sc-chat-panel{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 80% 75%,color-mix(in srgb,var(--c2) 11%,transparent),transparent 55%)}
body[data-page="messages"] .sc-chat-notes{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
body[data-page="messages"] .sc-chat-notes span{position:absolute;display:block;font-size:clamp(21px,2.4vw,41px);color:var(--c2);opacity:.22;text-shadow:0 0 15px color-mix(in srgb,var(--c2) 55%,transparent);animation:sc-note-drift 12s ease-in-out infinite alternate;will-change:transform}
body[data-page="messages"] .sc-chat-notes span:nth-child(1){left:15%;top:32%;animation-duration:11s}
body[data-page="messages"] .sc-chat-notes span:nth-child(2){left:69%;top:16%;animation-duration:14s;animation-delay:-5s;font-size:35px}
body[data-page="messages"] .sc-chat-notes span:nth-child(3){left:87%;top:45%;animation-duration:17s;animation-delay:-7s}
body[data-page="messages"] .sc-chat-notes span:nth-child(4){left:35%;top:71%;animation-duration:13s;animation-delay:-3s}
body[data-page="messages"] .sc-chat-notes span:nth-child(5){left:80%;top:80%;animation-duration:15s;animation-delay:-9s}
body[data-page="messages"] .sc-chat-notes span:nth-child(6){left:48%;top:24%;animation-duration:19s;animation-delay:-11s}
body[data-page="messages"] .sc-chat-notes span:nth-child(7){left:12%;top:88%;animation-duration:16s;animation-delay:-2s}
@keyframes sc-note-drift{0%{transform:translate3d(-8px,12px,0) rotate(-17deg) scale(.85);opacity:.10}50%{opacity:.29}100%{transform:translate3d(29px,-33px,0) rotate(19deg) scale(1.18);opacity:.18}}
body[data-page="messages"] .sc-chat-header{position:relative;z-index:1;min-height:82px;background:linear-gradient(115deg,color-mix(in srgb,var(--c2) 18%,var(--panel)),color-mix(in srgb,var(--card) 77%,transparent));border-bottom:1px solid color-mix(in srgb,var(--c2) 24%,var(--line))}
body[data-page="messages"] .sc-chat-identity strong{font-size:17px}
body[data-page="messages"] .sc-chat-identity small{color:var(--c2)}
body[data-page="messages"] .sc-chat-header .btn{border-radius:999px;padding:11px 18px}
body[data-page="messages"] .sc-chat-messages{background:transparent;z-index:1;padding:26px 24px 20px;gap:15px;scrollbar-width:thin;scrollbar-color:var(--c2) transparent}
body[data-page="messages"] .sc-day-divider{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 10px;width:min(75%,330px)}
body[data-page="messages"] .sc-day-divider:before,body[data-page="messages"] .sc-day-divider:after{content:"";height:1px;flex:1;background:color-mix(in srgb,var(--c2) 30%,var(--line))}
body[data-page="messages"] .sc-day-divider span{padding:4px 13px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--card) 80%,transparent)}
body[data-page="messages"] .sc-message{position:relative;display:flex;flex-direction:row;align-items:flex-end;gap:11px;max-width:85%}
body[data-page="messages"] .sc-message.outgoing{flex-direction:row;align-self:flex-end}
body[data-page="messages"] .sc-message-avatar{width:33px;height:33px;flex-basis:33px;font-size:12px}
body[data-page="messages"] .sc-message-content{display:flex;flex-direction:column;min-width:0;align-items:flex-start;gap:2px}
body[data-page="messages"] .sc-message.outgoing .sc-message-content{align-items:flex-end}
body[data-page="messages"] .sc-message-body{border-radius:18px 18px 18px 5px;padding:13px 17px;line-height:1.5;box-shadow:0 5px 17px color-mix(in srgb,var(--bg0) 28%,transparent);background:color-mix(in srgb,var(--card) 83%,transparent);backdrop-filter:blur(8px)}
body[data-page="messages"] .sc-message.outgoing .sc-message-body{border-radius:18px 18px 5px 18px;background:linear-gradient(120deg,color-mix(in srgb,var(--c2) 54%,var(--panel)),color-mix(in srgb,var(--c3) 44%,var(--panel)));border-color:color-mix(in srgb,var(--c2) 45%,transparent)}
body[data-page="messages"] .sc-message-content>small{margin:3px 8px;font-size:10px}
body[data-page="messages"] .sc-compose{position:relative;z-index:1;margin:0 12px 0;padding:12px;border:1px solid color-mix(in srgb,var(--c2) 38%,var(--line));border-radius:20px;background:color-mix(in srgb,var(--card) 82%,transparent);box-shadow:0 0 15px color-mix(in srgb,var(--c2) 10%,transparent)}
body[data-page="messages"] .sc-compose .field{border-radius:999px;background:color-mix(in srgb,var(--bg0) 35%,var(--card));padding-inline:16px}
body[data-page="messages"] .sc-compose .btn{border-radius:999px;padding:11px 16px;transition:transform .2s,box-shadow .2s}
body[data-page="messages"] .sc-compose .btn:hover{transform:translateY(-2px);box-shadow:0 0 15px color-mix(in srgb,var(--c2) 25%,transparent)}
body[data-page="messages"] .sc-chat-disclaimer{position:relative;z-index:1;padding:8px 23px 12px}
body[data-page="messages"] .sc-shared-song{padding:4px 1px;gap:13px}
body[data-page="messages"] .sc-music-note{width:52px;height:52px;border-radius:13px;background:linear-gradient(135deg,var(--c1),var(--c2),var(--c3));color:var(--on-accent)}
@media(max-width:680px){body[data-page="messages"] .sc-messenger{grid-template-columns:1fr;min-height:0;max-height:none;border-radius:22px}body[data-page="messages"] .sc-conversations{max-height:200px}body[data-page="messages"] .sc-chat-messages{height:340px;padding:17px 12px}body[data-page="messages"] .sc-message{max-width:95%}body[data-page="messages"] .sc-compose{flex-wrap:wrap;margin:0 8px}body[data-page="messages"] .sc-compose .field{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){body[data-page="messages"] .sc-chat-notes span{animation:none;will-change:auto}body[data-page="messages"] .sc-conversation,body[data-page="messages"] .sc-compose .btn{transition:none}}

/* SoundCross 2026 · reference-inspired animated messenger. Scoped to Messages only. */
body[data-page="messages"] .sc-messenger{grid-template-columns:minmax(240px,30%) minmax(0,1fr);min-height:660px;max-height:780px;border-radius:29px;border:1.5px solid color-mix(in srgb,var(--c2) 72%,white 12%);box-shadow:0 18px 50px var(--shadow),0 0 26px color-mix(in srgb,var(--c2) 26%,transparent),inset 0 0 12px color-mix(in srgb,var(--c2) 12%,transparent)}
body[data-page="messages"] .sc-conversations{padding:24px 13px;background:linear-gradient(160deg,color-mix(in srgb,var(--bg0) 64%,var(--panel)),color-mix(in srgb,var(--c2) 9%,var(--panel)))}
body[data-page="messages"] .sc-pane-title strong{font-size:19px;letter-spacing:-.4px}
body[data-page="messages"] .sc-conversation{min-height:85px;margin-bottom:9px;background:linear-gradient(120deg,color-mix(in srgb,var(--card) 70%,transparent),color-mix(in srgb,var(--panel) 84%,transparent));border-color:color-mix(in srgb,var(--c2) 15%,var(--line));border-radius:19px}
body[data-page="messages"] .sc-conversation.active{border-color:color-mix(in srgb,var(--c2) 76%,white 17%);background:linear-gradient(105deg,color-mix(in srgb,var(--c2) 28%,var(--panel)),color-mix(in srgb,var(--c3) 14%,var(--panel)));box-shadow:0 0 8px color-mix(in srgb,var(--c2) 44%,transparent),0 0 24px color-mix(in srgb,var(--c2) 26%,transparent),inset 0 0 22px color-mix(in srgb,var(--c2) 13%,transparent)}
body[data-page="messages"] .sc-conversation.active:after{content:"";position:absolute;inset:-2px;border-radius:20px;border:1px solid color-mix(in srgb,var(--c2) 72%,white 28%);pointer-events:none;animation:sc-selected-halo 3.4s ease-in-out infinite}
@keyframes sc-selected-halo{0%,100%{opacity:.35;box-shadow:0 0 5px color-mix(in srgb,var(--c2) 28%,transparent)}50%{opacity:.98;box-shadow:0 0 17px color-mix(in srgb,var(--c2) 64%,transparent)}}
body[data-page="messages"] .sc-conversation.sc-selected-burst{animation:sc-select-pop .48s ease-out}
@keyframes sc-select-pop{0%{transform:scale(.973);filter:brightness(1.5)}75%{transform:scale(1.012)}100%{transform:scale(1);filter:brightness(1)}}
body[data-page="messages"] .sc-list-avatar{position:relative}
body[data-page="messages"] .sc-avatar-online,body[data-page="messages"] .sc-online-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#62e49b;box-shadow:0 0 10px #58dc9e;border:2px solid var(--panel)}
body[data-page="messages"] .sc-avatar-online{position:absolute;right:0;bottom:0}
body[data-page="messages"] .sc-online-dot{vertical-align:middle;margin-left:4px}
body[data-page="messages"] .sc-convo-date{display:flex;flex-direction:column;align-items:flex-end;gap:14px;white-space:nowrap}
body[data-page="messages"] .sc-demo-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c2);box-shadow:0 0 10px var(--c2)}
body[data-page="messages"] .sc-chat-panel{background:radial-gradient(ellipse at 75% 53%,color-mix(in srgb,var(--c2) 7%,transparent),transparent 65%),linear-gradient(165deg,color-mix(in srgb,var(--bg0) 20%,var(--panel)),var(--panel))}
body[data-page="messages"] .sc-chat-notes{z-index:0;inset:75px 0 88px;contain:paint}
body[data-page="messages"] .sc-chat-notes .sc-floating-note{position:absolute;z-index:1;left:calc(5% + (var(--n) * 37% / 13));top:calc(8% + (var(--n) * 19% / 7));font-size:clamp(17px,2.15vw,36px);font-family:Georgia,serif;font-weight:bold;color:color-mix(in srgb,var(--c2) 78%,white 22%);opacity:.26;pointer-events:none;text-shadow:0 0 4px var(--c2),0 0 15px color-mix(in srgb,var(--c2) 78%,transparent),0 0 28px color-mix(in srgb,var(--c2) 40%,transparent);animation:sc-notes-float calc(9s + var(--n) * .45s) ease-in-out calc(-1.2s * var(--n)) infinite alternate,sc-notes-twinkle calc(2.6s + var(--n) * .21s) ease-in-out calc(-.5s * var(--n)) infinite;will-change:transform,opacity;}
body[data-page="messages"] .sc-chat-notes .sc-floating-note:nth-child(3n){left:calc(8% + (var(--n) * 63% / 28));top:calc(22% + (var(--n) * 7% / 4));font-size:24px}
body[data-page="messages"] .sc-chat-notes .sc-floating-note:nth-child(4n){left:calc(96% - (var(--n) * 63% / 28));top:calc(81% - (var(--n) * 13% / 7));font-size:43px}
body[data-page="messages"] .sc-chat-notes .sc-floating-note:nth-child(5n){left:calc(22% + (var(--n) * 36% / 26));top:calc(88% - (var(--n) * 63% / 26))}
@keyframes sc-notes-float{0%{transform:translate3d(-11px,16px,0) rotate(-21deg) scale(.8)}50%{transform:translate3d(12px,-6px,0) rotate(9deg) scale(1.12)}100%{transform:translate3d(32px,-34px,0) rotate(22deg) scale(.93)}}
@keyframes sc-notes-twinkle{0%,100%{opacity:.09;filter:brightness(.8)}33%{opacity:.42;filter:brightness(1.9)}65%{opacity:.19;filter:brightness(1.1)}79%{opacity:.52;filter:brightness(2.25)}}
body[data-page="messages"] .sc-wave{position:absolute;z-index:0;width:130%;height:100px;left:-18%;border-top:1px solid color-mix(in srgb,var(--c2) 17%,transparent);border-radius:50%;transform:rotate(-10deg);animation:sc-wave-shimmer 13s ease-in-out infinite alternate}
body[data-page="messages"] .sc-wave-a{top:45%}body[data-page="messages"] .sc-wave-b{top:77%;animation-delay:-6s}
@keyframes sc-wave-shimmer{0%{transform:translateY(12px) rotate(-8deg);opacity:.2}100%{transform:translateY(-24px) rotate(4deg);opacity:.64}}
body[data-page="messages"] .sc-chat-header{z-index:2;background:linear-gradient(105deg,color-mix(in srgb,var(--c2) 16%,var(--panel)),color-mix(in srgb,var(--card) 87%,transparent));padding:15px 20px}
body[data-page="messages"] .sc-header-note{font-size:37px;color:var(--c2);opacity:.7;margin-right:16px;text-shadow:0 0 12px var(--c2);animation:sc-notes-twinkle 3.3s ease-in-out infinite}
body[data-page="messages"] .sc-chat-messages{z-index:1;padding:24px 23px;gap:19px}
body[data-page="messages"] .sc-chat-switch{animation:sc-chat-appear .48s ease-out}
@keyframes sc-chat-appear{from{opacity:.38;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
body[data-page="messages"] .sc-chat-panel.sc-conversation-spark:after{content:"";position:absolute;z-index:0;inset:80px 0 80px;pointer-events:none;background:radial-gradient(ellipse at 65% 45%,color-mix(in srgb,var(--c2) 22%,transparent),transparent 66%);animation:sc-chat-flash .9s ease-out forwards}
@keyframes sc-chat-flash{0%{opacity:.75}100%{opacity:0}}
body[data-page="messages"] .sc-message{max-width:90%;align-items:center}
body[data-page="messages"] .sc-message.outgoing{align-items:center}
body[data-page="messages"] .sc-message-body{font-size:13px;border:1px solid color-mix(in srgb,var(--c2) 20%,var(--line));border-radius:16px 16px 16px 4px;box-shadow:0 5px 18px color-mix(in srgb,var(--bg0) 25%,transparent)}
body[data-page="messages"] .sc-message.outgoing .sc-message-body{border-radius:16px 16px 4px 16px;border-color:color-mix(in srgb,var(--c2) 55%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--c2) 13%,transparent)}
body[data-page="messages"] .sc-self-avatar{display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;border-radius:50%;border:1px solid var(--c2);background:color-mix(in srgb,var(--c2) 35%,var(--card));font-size:15px;color:var(--text)}
body[data-page="messages"] .sc-shared-song{min-width:min(380px,46vw);gap:12px}
body[data-page="messages"] .sc-song-art{width:75px;height:75px;min-width:75px;object-fit:cover;border-radius:12px;background:linear-gradient(140deg,var(--c1),var(--c2))}
body[data-page="messages"] .sc-shared-song-meta{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
body[data-page="messages"] .sc-song-play{height:40px;width:40px;flex:0 0 40px;box-shadow:0 0 12px color-mix(in srgb,var(--c2) 33%,transparent)}
body[data-page="messages"] .sc-compose{margin:0 12px;padding:10px;border-radius:22px;box-shadow:0 0 14px color-mix(in srgb,var(--c2) 21%,transparent)}
body[data-page="messages"] .sc-paperclip{display:grid;place-items:center;width:30px;flex:0 0 30px;font-size:22px;color:var(--c2)}
body[data-page="messages"] .sc-compose .btn:last-child{background:linear-gradient(110deg,var(--c1),var(--c2));box-shadow:0 0 17px color-mix(in srgb,var(--c2) 34%,transparent)}
@media(max-width:680px){body[data-page="messages"] .sc-messenger{grid-template-columns:1fr;max-height:none;min-height:0}body[data-page="messages"] .sc-conversations{max-height:235px}body[data-page="messages"] .sc-chat-messages{height:370px;padding:17px 11px}body[data-page="messages"] .sc-chat-header{padding:12px}body[data-page="messages"] .sc-header-note{display:none}body[data-page="messages"] .sc-shared-song{min-width:0}body[data-page="messages"] .sc-song-art{width:52px;height:52px;min-width:52px}body[data-page="messages"] .sc-compose{flex-wrap:wrap}body[data-page="messages"] .sc-compose .field{flex-basis:calc(100% - 55px)} }
@media(prefers-reduced-motion:reduce){body[data-page="messages"] .sc-chat-notes *,body[data-page="messages"] .sc-header-note,body[data-page="messages"] .sc-conversation.active:after{animation:none!important}body[data-page="messages"] .sc-chat-switch,body[data-page="messages"] .sc-conversation.sc-selected-burst{animation:none}}

/* Messages sizing and independent conversation scrolling — 2026-10-23 */
body[data-page="messages"] .sc-messenger {
  width:100%;
  grid-template-columns:minmax(0,30%) minmax(0,70%);
  height:68dvh;
  min-height:0;
  max-height:none;
  margin-bottom:3%;
}
body[data-page="messages"] .sc-conversations {
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
body[data-page="messages"] .sc-pane-title,
body[data-page="messages"] .sc-conversation-search {flex-shrink:0;}
body[data-page="messages"] .sc-conversation-scroll {
  min-height:0;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;scrollbar-width:thin;
  scrollbar-color:var(--c2) transparent;padding:2px 4px 8px 1px;
}
body[data-page="messages"] .sc-conversation-scroll::-webkit-scrollbar {width:7px;}
body[data-page="messages"] .sc-conversation-scroll::-webkit-scrollbar-thumb {background:var(--c2);border-radius:20px;}
body[data-page="messages"] .sc-chat-messages {min-height:0;overflow-y:auto;}
@media(max-width:680px) {
  body[data-page="messages"] .sc-messenger {grid-template-columns:minmax(0,100%);height:auto;min-height:0;max-height:none;}
  body[data-page="messages"] .sc-conversations {height:30dvh;max-height:none;min-height:0;}
  body[data-page="messages"] .sc-conversation-scroll {flex:1 1 auto;min-height:0;}
  body[data-page="messages"] .sc-chat-panel {height:55dvh;min-height:0;}
  body[data-page="messages"] .sc-chat-messages {flex:1 1 auto;height:auto;min-height:0;}
}

/* Messages only: player lives below the chat, never floats over conversations. */
body[data-page="messages"] main { padding-bottom:clamp(24px,4vh,50px); }
body[data-page="messages"] footer.player {
  position:relative;left:auto;bottom:auto;transform:none;
  width:min(100%,1180px);max-width:100%;margin:clamp(12px,2.5vh,24px) auto 0;
  z-index:2;
}
body[data-page="messages"] .sc-messenger {margin-bottom:0;}
body[data-page="messages"] .sc-conversation:not(.sc-unread) .sc-demo-dot {display:none;}
body[data-page="messages"] .sc-pane-title .sc-count {min-width:1.6em;text-align:center;}
@media(max-width:680px){body[data-page="messages"] footer.player{margin-top:18px;width:100%;}}
/* Real member cards inherit existing SoundCross theme accents. */
.sc-cloud-person{display:flex;align-items:center;gap:12px;padding:13px 15px;margin:10px 0;border:1px solid color-mix(in srgb,var(--c2) 45%,transparent);border-radius:19px;background:color-mix(in srgb,var(--panel) 88%,transparent)}
.sc-cloud-person>div{flex:1;min-width:0}.sc-cloud-person small{display:block;color:var(--muted);font-size:12px;margin-top:5px}
.sc-cloud-person .sc-person-avatar{flex-shrink:0}.sc-cloud-person .btn{white-space:nowrap}
.sc-real-avatar{height:100%;width:100%;border-radius:50%;object-fit:cover}
@media(max-width:560px){.sc-cloud-person{flex-wrap:wrap}.sc-cloud-person .btn{padding:9px}}

/* Real SoundCross member profiles opened from the unified search. */
.sc-member-profile{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:16px 4px}
.sc-member-avatar{width:100px;height:100px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--c1),var(--c2));font-size:40px;font-weight:800;color:var(--bg);overflow:hidden;border:2px solid var(--line)}
.sc-member-avatar img{width:100%;height:100%;object-fit:cover}
.sc-member-profile h2{margin:6px 0 10px;overflow-wrap:anywhere}

/* SoundCross real directory and unread notifications (uses existing theme variables) */
.sc-live-member {display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:15px;border:1px solid var(--line);border-radius:19px;background:var(--panel);margin:10px 0;}
.sc-real-directory-avatar{height:49px;width:49px;flex:0 0 49px;object-fit:cover;border-radius:50%;border:1px solid var(--c2);}
.sc-real-initial{display:inline-grid;place-items:center;font-weight:800;background:linear-gradient(125deg,var(--c1),var(--c2));}
.sc-live-member-copy{display:flex;flex:1;min-width:125px;flex-direction:column;gap:4px;}
.sc-live-member-copy small{color:var(--muted)}
.sc-live-member-actions,.sc-live-profile-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.sc-live-profile-actions{margin-top:18px;}
.profilebutton{position:relative;}
.sc-live-alert-dot{position:absolute;right:0;top:0;min-width:11px;height:11px;background:var(--c2);border:2px solid var(--bg0);border-radius:99px;box-shadow:0 0 12px var(--c2);pointer-events:none;z-index:3;}
#nav a{position:relative;}
.sc-live-alert-dot.sc-menu-alert{position:static;display:inline-grid;place-items:center;padding:0 5px;min-width:19px;height:19px;border:0;font-size:11px;font-weight:800;color:var(--bg0);margin-left:8px;}
.sc-live-member-actions .btn{white-space:nowrap;}
@media(max-width:700px){.sc-live-member-actions{width:100%;}.sc-live-member-actions .btn{flex:1 1 auto;text-align:center;}}

/* Search section and unread menu indicator */
.sc-search-page{max-width:960px;margin:1.2rem auto}.sc-search-tabs{display:flex;gap:.7rem;margin-bottom:1rem}.sc-search-page .field{width:100%;margin-bottom:1.2rem}
#menuToggle{position:relative}#menuToggle.sc-has-unread::after{content:'!';position:absolute;right:-5px;top:-7px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#d73d53;color:white;font:bold 12px/1 Arial;box-shadow:0 0 0 2px var(--bg0,#140c24);pointer-events:none}

/* SoundCross mobile messenger: readable, scrollable conversation area. */
@media (max-width:680px) {
  body[data-page="messages"] .sc-messenger {
    display:flex;flex-direction:column;width:100%;min-width:0;max-width:100%;
    height:auto;overflow:visible;gap:12px;
  }
  body[data-page="messages"] .sc-conversations {
    flex:0 0 auto;width:100%;height:auto;max-height:32dvh;min-height:100px;
    overflow:hidden;
  }
  body[data-page="messages"] .sc-conversation-scroll {max-height:22dvh;overflow-y:auto;}
  body[data-page="messages"] .sc-chat-panel {
    width:100%;min-width:0;min-height:420px;height:min(67dvh,650px);
    display:flex;flex-direction:column;overflow:hidden;
  }
  body[data-page="messages"] .sc-chat-header {flex:0 0 auto;min-width:0;}
  body[data-page="messages"] .sc-chat-messages {
    flex:1 1 auto;min-height:0;height:auto;overflow:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;overflow-wrap:anywhere;
  }
  body[data-page="messages"] .sc-compose {flex:0 0 auto;min-width:0;}
  body[data-page="messages"] .sc-compose .field {min-width:0;}
  body[data-page="messages"] .sc-message {max-width:96%;min-width:0;}
  body[data-page="messages"] .sc-message-body {overflow-wrap:anywhere;}
}